@pine-ds/core 4.7.2 → 4.9.0
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/components/attributes.js +1 -1
- package/components/floating-ui.dom.js +1 -1
- package/components/index.js +1 -1
- package/components/index2.js +1 -1
- package/components/keep-hydrated.js +1 -0
- package/components/mock-pds-modal.js +1 -1
- package/components/pds-alert.js +1 -1
- package/components/pds-avatar.js +1 -1
- package/components/pds-box2.js +1 -1
- package/components/pds-button2.js +1 -1
- package/components/pds-checkbox2.js +1 -1
- package/components/pds-chip2.js +1 -1
- package/components/pds-combobox.js +1 -1
- package/components/pds-container.js +1 -1
- package/components/pds-copytext.js +1 -1
- package/components/pds-datepicker.js +1 -1
- package/components/pds-divider.js +1 -1
- package/components/pds-drawer-content.js +1 -1
- package/components/pds-drawer-footer.js +1 -1
- package/components/pds-drawer-header.js +1 -1
- package/components/pds-drawer.js +1 -1
- package/components/pds-dropdown-menu-item.js +1 -1
- package/components/pds-dropdown-menu-separator.js +1 -1
- package/components/pds-dropdown-menu.js +1 -1
- package/components/pds-filter.js +1 -1
- package/components/pds-filters.js +1 -1
- package/components/pds-image.js +1 -1
- package/components/pds-input2.js +1 -1
- package/components/pds-link2.js +1 -1
- package/components/pds-loader2.js +1 -1
- package/components/pds-modal-content.js +1 -1
- package/components/pds-modal-footer.js +1 -1
- package/components/pds-modal-header.js +1 -1
- package/components/pds-modal2.js +1 -1
- package/components/pds-multiselect.js +1 -1
- package/components/pds-popover.js +1 -1
- package/components/pds-progress.js +1 -1
- package/components/pds-property.js +1 -1
- package/components/pds-radio-group.js +1 -1
- package/components/pds-radio.js +1 -1
- package/components/pds-row.js +1 -1
- package/components/pds-select.js +1 -1
- package/components/pds-sortable-item.js +1 -1
- package/components/pds-sortable.js +2 -2
- package/components/pds-switch.js +1 -1
- package/components/pds-table-body.js +1 -1
- package/components/pds-table-cell2.js +1 -1
- package/components/pds-table-head-cell2.js +1 -1
- package/components/pds-table-head.js +1 -1
- package/components/pds-table-row.js +1 -1
- package/components/pds-tabpanel.js +1 -1
- package/components/pds-tabs.js +1 -1
- package/components/pds-text2.js +1 -1
- package/components/pds-textarea.js +1 -1
- package/components/pds-toast.js +1 -1
- package/components/pds-tooltip.js +1 -1
- package/components/tabbable.js +1 -0
- package/components/truncation-tooltip.js +1 -1
- package/dist/cjs/{attributes-BJ7KBHql.js → attributes-CW49XqaL.js} +1 -1
- package/dist/cjs/{floating-ui.dom-Dc8Anyel.js → floating-ui.dom-Dw41zbyY.js} +1 -0
- package/dist/cjs/{index-jl_Q819j.js → index-BsWY_xEJ.js} +1 -1
- package/dist/cjs/{index-5Azb8EQG.js → index-Do70atou.js} +1 -1
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/{keep-hydrated-CiXgkEYd.js → keep-hydrated-AKoh0DG4.js} +1 -0
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/cjs/mock-pds-modal.cjs.entry.js +3 -3
- package/dist/cjs/pds-accordion.cjs.entry.js +3 -3
- package/dist/cjs/pds-alert.cjs.entry.js +17 -4
- package/dist/cjs/pds-avatar.cjs.entry.js +23 -13
- package/dist/cjs/pds-box.cjs.entry.js +4 -4
- package/dist/cjs/pds-button.cjs.entry.js +80 -45
- package/dist/cjs/pds-checkbox.cjs.entry.js +16 -8
- package/dist/cjs/pds-chip.cjs.entry.js +8 -8
- package/dist/cjs/pds-combobox.cjs.entry.js +43 -13
- package/dist/cjs/pds-container.cjs.entry.js +3 -3
- package/dist/cjs/pds-copytext.cjs.entry.js +7 -7
- package/dist/cjs/pds-datepicker.cjs.entry.js +6 -6
- package/dist/cjs/pds-divider.cjs.entry.js +3 -3
- package/dist/cjs/pds-drawer-content.cjs.entry.js +3 -3
- package/dist/cjs/pds-drawer-footer.cjs.entry.js +3 -3
- package/dist/cjs/pds-drawer-header.cjs.entry.js +3 -3
- package/dist/cjs/pds-drawer.cjs.entry.js +4 -4
- package/dist/cjs/pds-dropdown-menu-item.cjs.entry.js +34 -5
- package/dist/cjs/pds-dropdown-menu-separator.cjs.entry.js +3 -3
- package/dist/cjs/pds-dropdown-menu.cjs.entry.js +8 -8
- package/dist/cjs/pds-filter.cjs.entry.js +4 -4
- package/dist/cjs/pds-filters.cjs.entry.js +3 -3
- package/dist/cjs/pds-icon.cjs.entry.js +2 -2
- package/dist/cjs/pds-image.cjs.entry.js +4 -4
- package/dist/cjs/pds-input.cjs.entry.js +6 -6
- package/dist/cjs/pds-link.cjs.entry.js +15 -6
- package/dist/cjs/pds-loader.cjs.entry.js +4 -4
- package/dist/cjs/pds-modal-content.cjs.entry.js +34 -32
- package/dist/cjs/pds-modal-footer.cjs.entry.js +3 -3
- package/dist/cjs/pds-modal-header.cjs.entry.js +3 -3
- package/dist/cjs/pds-modal.cjs.entry.js +9 -89
- package/dist/cjs/pds-multiselect.cjs.entry.js +9 -9
- package/dist/cjs/pds-popover.cjs.entry.js +416 -163
- package/dist/cjs/pds-progress.cjs.entry.js +4 -4
- package/dist/cjs/pds-property.cjs.entry.js +3 -3
- package/dist/cjs/pds-radio-group.cjs.entry.js +6 -6
- package/dist/cjs/pds-radio.cjs.entry.js +24 -11
- package/dist/cjs/pds-row.cjs.entry.js +4 -4
- package/dist/cjs/pds-select.cjs.entry.js +132 -21
- package/dist/cjs/pds-sortable-item.cjs.entry.js +5 -5
- package/dist/cjs/pds-sortable.cjs.entry.js +4 -4
- package/dist/cjs/pds-switch.cjs.entry.js +7 -7
- package/dist/cjs/pds-tab.cjs.entry.js +3 -3
- package/dist/cjs/pds-table-body.cjs.entry.js +3 -3
- package/dist/cjs/pds-table-cell.cjs.entry.js +6 -6
- package/dist/cjs/pds-table-head-cell.cjs.entry.js +5 -5
- package/dist/cjs/pds-table-head.cjs.entry.js +3 -3
- package/dist/cjs/pds-table-row.cjs.entry.js +3 -3
- package/dist/cjs/pds-table.cjs.entry.js +2 -2
- package/dist/cjs/pds-tabpanel.cjs.entry.js +4 -4
- package/dist/cjs/pds-tabs.cjs.entry.js +4 -4
- package/dist/cjs/pds-text.cjs.entry.js +5 -5
- package/dist/cjs/pds-textarea.cjs.entry.js +8 -8
- package/dist/cjs/pds-toast.cjs.entry.js +14 -8
- package/dist/cjs/pds-tooltip.cjs.entry.js +115 -44
- package/dist/cjs/pine-core.cjs.js +3 -3
- package/dist/cjs/tabbable-CddSt_Hi.js +85 -0
- package/dist/cjs/{truncation-tooltip-DO9xli2e.js → truncation-tooltip-O5nQmXPw.js} +32 -7
- package/dist/collection/components/pds-alert/pds-alert.css +13 -0
- package/dist/collection/components/pds-alert/pds-alert.js +36 -1
- package/dist/collection/components/pds-alert/stories/pds-alert.stories.js +4 -0
- package/dist/collection/components/pds-avatar/pds-avatar.js +42 -10
- package/dist/collection/components/pds-avatar/stories/pds-avatar.stories.js +2 -0
- package/dist/collection/components/pds-box/pds-box.js +1 -1
- package/dist/collection/components/pds-button/pds-button.js +36 -44
- package/dist/collection/components/pds-button/stories/pds-button.stories.js +3 -3
- package/dist/collection/components/pds-checkbox/pds-checkbox.css +79 -0
- package/dist/collection/components/pds-checkbox/pds-checkbox.js +36 -5
- package/dist/collection/components/pds-checkbox/stories/pds-checkbox.stories.js +38 -0
- package/dist/collection/components/pds-chip/pds-chip.js +2 -2
- package/dist/collection/components/pds-combobox/pds-combobox.css +33 -0
- package/dist/collection/components/pds-combobox/pds-combobox.js +62 -9
- package/dist/collection/components/pds-combobox/stories/pds-combobox.stories.js +44 -0
- package/dist/collection/components/pds-container/pds-container.js +1 -1
- package/dist/collection/components/pds-copytext/pds-copytext.js +1 -1
- package/dist/collection/components/pds-datepicker/pds-datepicker.js +2 -2
- package/dist/collection/components/pds-datepicker/stories/pds-datepicker.stories.js +1 -1
- package/dist/collection/components/pds-divider/pds-divider.js +1 -1
- package/dist/collection/components/pds-drawer/pds-drawer-content/pds-drawer-content.js +1 -1
- package/dist/collection/components/pds-drawer/pds-drawer-footer/pds-drawer-footer.js +1 -1
- package/dist/collection/components/pds-drawer/pds-drawer-header/pds-drawer-header.js +1 -1
- package/dist/collection/components/pds-drawer/pds-drawer.js +2 -2
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.css +8 -0
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js +81 -7
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.js +1 -1
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.js +4 -4
- package/dist/collection/components/pds-dropdown-menu/stories/pds-dropdown-menu.stories.js +39 -0
- package/dist/collection/components/pds-filters/pds-filter/pds-filter.js +1 -1
- package/dist/collection/components/pds-filters/pds-filters.js +1 -1
- package/dist/collection/components/pds-image/pds-image.js +2 -2
- package/dist/collection/components/pds-input/pds-input.js +2 -2
- package/dist/collection/components/pds-input/stories/pds-input.stories.js +6 -6
- package/dist/collection/components/pds-link/pds-link.js +34 -3
- package/dist/collection/components/pds-link/stories/pds-link.stories.js +3 -2
- package/dist/collection/components/pds-loader/pds-loader.js +1 -1
- package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js +32 -30
- package/dist/collection/components/pds-modal/pds-modal-footer/pds-modal-footer.js +1 -1
- package/dist/collection/components/pds-modal/pds-modal-header/pds-modal-header.js +1 -1
- package/dist/collection/components/pds-modal/pds-modal.js +5 -85
- package/dist/collection/components/pds-modal/test/mock-pds-modal.js +1 -1
- package/dist/collection/components/pds-multiselect/pds-multiselect.js +5 -5
- package/dist/collection/components/pds-popover/pds-popover.css +6 -0
- package/dist/collection/components/pds-popover/pds-popover.js +465 -159
- package/dist/collection/components/pds-popover/stories/pds-popover.stories.js +31 -0
- package/dist/collection/components/pds-progress/pds-progress.js +1 -1
- package/dist/collection/components/pds-property/pds-property.js +1 -1
- package/dist/collection/components/pds-radio/pds-radio.css +57 -0
- package/dist/collection/components/pds-radio/pds-radio.js +45 -9
- package/dist/collection/components/pds-radio/stories/pds-radio.stories.js +15 -0
- package/dist/collection/components/pds-radio-group/pds-radio-group.js +3 -3
- package/dist/collection/components/pds-radio-group/stories/pds-radio-group.stories.js +45 -0
- package/dist/collection/components/pds-row/pds-row.js +1 -1
- package/dist/collection/components/pds-select/pds-select.js +128 -17
- package/dist/collection/components/pds-select/stories/pds-select.stories.js +2 -2
- package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js +1 -1
- package/dist/collection/components/pds-sortable/pds-sortable.js +1 -1
- package/dist/collection/components/pds-switch/pds-switch.js +3 -3
- package/dist/collection/components/pds-table/pds-table-body/pds-table-body.js +1 -1
- package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js +2 -2
- package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js +1 -1
- package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js +2 -2
- package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js +1 -1
- package/dist/collection/components/pds-table/stories/pds-table.stories.js +4 -4
- package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js +1 -1
- package/dist/collection/components/pds-tabs/pds-tabs.js +1 -1
- package/dist/collection/components/pds-text/pds-text.js +1 -1
- package/dist/collection/components/pds-text/stories/pds-text.stories.js +1 -1
- package/dist/collection/components/pds-textarea/pds-textarea.js +4 -4
- package/dist/collection/components/pds-textarea/stories/pds-textarea.stories.js +2 -2
- package/dist/collection/components/pds-toast/pds-toast.css +13 -0
- package/dist/collection/components/pds-toast/pds-toast.js +33 -5
- package/dist/collection/components/pds-toast/stories/pds-toast.stories.js +4 -1
- package/dist/collection/components/pds-tooltip/pds-tooltip.js +113 -41
- package/dist/collection/utils/aria-references.js +42 -0
- package/dist/collection/utils/tabbable.js +81 -0
- package/dist/collection/utils/truncation-tooltip.js +31 -6
- package/dist/docs.json +367 -13
- package/dist/esm/{attributes-WXw_I_uJ.js → attributes-DkeVeN0g.js} +1 -1
- package/dist/esm/{floating-ui.dom-BPqJgIq6.js → floating-ui.dom-Cuc0DYlm.js} +1 -1
- package/dist/esm/{index-Cw9J31qd.js → index-BFSwd-GQ.js} +1 -1
- package/dist/esm/{index-BJXk71tO.js → index-m3pqpeWg.js} +2 -2
- package/dist/esm/index.js +1 -1
- package/dist/esm/{keep-hydrated-BLG6RDBt.js → keep-hydrated-BgNaWLoS.js} +1 -1
- package/dist/esm/loader.js +4 -4
- package/dist/esm/mock-pds-modal.entry.js +3 -3
- package/dist/esm/pds-accordion.entry.js +3 -3
- package/dist/esm/pds-alert.entry.js +17 -4
- package/dist/esm/pds-avatar.entry.js +23 -13
- package/dist/esm/pds-box.entry.js +4 -4
- package/dist/esm/pds-button.entry.js +80 -45
- package/dist/esm/pds-checkbox.entry.js +16 -8
- package/dist/esm/pds-chip.entry.js +8 -8
- package/dist/esm/pds-combobox.entry.js +43 -13
- package/dist/esm/pds-container.entry.js +3 -3
- package/dist/esm/pds-copytext.entry.js +7 -7
- package/dist/esm/pds-datepicker.entry.js +6 -6
- package/dist/esm/pds-divider.entry.js +3 -3
- package/dist/esm/pds-drawer-content.entry.js +3 -3
- package/dist/esm/pds-drawer-footer.entry.js +3 -3
- package/dist/esm/pds-drawer-header.entry.js +3 -3
- package/dist/esm/pds-drawer.entry.js +4 -4
- package/dist/esm/pds-dropdown-menu-item.entry.js +34 -5
- package/dist/esm/pds-dropdown-menu-separator.entry.js +3 -3
- package/dist/esm/pds-dropdown-menu.entry.js +8 -8
- package/dist/esm/pds-filter.entry.js +4 -4
- package/dist/esm/pds-filters.entry.js +3 -3
- package/dist/esm/pds-icon.entry.js +2 -2
- package/dist/esm/pds-image.entry.js +4 -4
- package/dist/esm/pds-input.entry.js +6 -6
- package/dist/esm/pds-link.entry.js +15 -6
- package/dist/esm/pds-loader.entry.js +4 -4
- package/dist/esm/pds-modal-content.entry.js +34 -32
- package/dist/esm/pds-modal-footer.entry.js +3 -3
- package/dist/esm/pds-modal-header.entry.js +3 -3
- package/dist/esm/pds-modal.entry.js +7 -87
- package/dist/esm/pds-multiselect.entry.js +9 -9
- package/dist/esm/pds-popover.entry.js +416 -163
- package/dist/esm/pds-progress.entry.js +4 -4
- package/dist/esm/pds-property.entry.js +3 -3
- package/dist/esm/pds-radio-group.entry.js +6 -6
- package/dist/esm/pds-radio.entry.js +24 -11
- package/dist/esm/pds-row.entry.js +4 -4
- package/dist/esm/pds-select.entry.js +132 -21
- package/dist/esm/pds-sortable-item.entry.js +5 -5
- package/dist/esm/pds-sortable.entry.js +4 -4
- package/dist/esm/pds-switch.entry.js +7 -7
- package/dist/esm/pds-tab.entry.js +3 -3
- package/dist/esm/pds-table-body.entry.js +3 -3
- package/dist/esm/pds-table-cell.entry.js +6 -6
- package/dist/esm/pds-table-head-cell.entry.js +5 -5
- package/dist/esm/pds-table-head.entry.js +3 -3
- package/dist/esm/pds-table-row.entry.js +3 -3
- package/dist/esm/pds-table.entry.js +2 -2
- package/dist/esm/pds-tabpanel.entry.js +4 -4
- package/dist/esm/pds-tabs.entry.js +4 -4
- package/dist/esm/pds-text.entry.js +5 -5
- package/dist/esm/pds-textarea.entry.js +8 -8
- package/dist/esm/pds-toast.entry.js +14 -8
- package/dist/esm/pds-tooltip.entry.js +115 -44
- package/dist/esm/pine-core.js +4 -4
- package/dist/esm/tabbable-DCKBKRUy.js +83 -0
- package/dist/esm/{truncation-tooltip-DRXsdKk1.js → truncation-tooltip-D_gvhB9r.js} +32 -7
- package/dist/esm-es5/{attributes-WXw_I_uJ.js → attributes-DkeVeN0g.js} +1 -1
- package/dist/esm-es5/{floating-ui.dom-BPqJgIq6.js → floating-ui.dom-Cuc0DYlm.js} +1 -1
- package/dist/esm-es5/{index-Cw9J31qd.js → index-BFSwd-GQ.js} +2 -2
- package/dist/esm-es5/{index-BJXk71tO.js → index-m3pqpeWg.js} +1 -1
- package/dist/esm-es5/index.js +1 -1
- package/dist/esm-es5/{keep-hydrated-BLG6RDBt.js → keep-hydrated-BgNaWLoS.js} +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mock-pds-modal.entry.js +1 -1
- package/dist/esm-es5/pds-accordion.entry.js +1 -1
- package/dist/esm-es5/pds-alert.entry.js +1 -1
- package/dist/esm-es5/pds-avatar.entry.js +1 -1
- package/dist/esm-es5/pds-box.entry.js +1 -1
- package/dist/esm-es5/pds-button.entry.js +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js +1 -1
- package/dist/esm-es5/pds-chip.entry.js +1 -1
- package/dist/esm-es5/pds-combobox.entry.js +2 -2
- package/dist/esm-es5/pds-container.entry.js +1 -1
- package/dist/esm-es5/pds-copytext.entry.js +1 -1
- package/dist/esm-es5/pds-datepicker.entry.js +1 -1
- package/dist/esm-es5/pds-divider.entry.js +1 -1
- package/dist/esm-es5/pds-drawer-content.entry.js +1 -1
- package/dist/esm-es5/pds-drawer-footer.entry.js +1 -1
- package/dist/esm-es5/pds-drawer-header.entry.js +1 -1
- package/dist/esm-es5/pds-drawer.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu-item.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu-separator.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu.entry.js +1 -1
- package/dist/esm-es5/pds-filter.entry.js +1 -1
- package/dist/esm-es5/pds-filters.entry.js +1 -1
- package/dist/esm-es5/pds-icon.entry.js +1 -1
- package/dist/esm-es5/pds-image.entry.js +1 -1
- package/dist/esm-es5/pds-input.entry.js +1 -1
- package/dist/esm-es5/pds-link.entry.js +1 -1
- package/dist/esm-es5/pds-loader.entry.js +1 -1
- package/dist/esm-es5/pds-modal-content.entry.js +1 -1
- package/dist/esm-es5/pds-modal-footer.entry.js +1 -1
- package/dist/esm-es5/pds-modal-header.entry.js +1 -1
- package/dist/esm-es5/pds-modal.entry.js +1 -1
- package/dist/esm-es5/pds-multiselect.entry.js +1 -1
- package/dist/esm-es5/pds-popover.entry.js +1 -1
- package/dist/esm-es5/pds-progress.entry.js +1 -1
- package/dist/esm-es5/pds-property.entry.js +1 -1
- package/dist/esm-es5/pds-radio-group.entry.js +1 -1
- package/dist/esm-es5/pds-radio.entry.js +1 -1
- package/dist/esm-es5/pds-row.entry.js +1 -1
- package/dist/esm-es5/pds-select.entry.js +1 -1
- package/dist/esm-es5/pds-sortable-item.entry.js +1 -1
- package/dist/esm-es5/pds-sortable.entry.js +2 -2
- package/dist/esm-es5/pds-switch.entry.js +1 -1
- package/dist/esm-es5/pds-tab.entry.js +1 -1
- package/dist/esm-es5/pds-table-body.entry.js +1 -1
- package/dist/esm-es5/pds-table-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-head.entry.js +1 -1
- package/dist/esm-es5/pds-table-row.entry.js +1 -1
- package/dist/esm-es5/pds-table.entry.js +1 -1
- package/dist/esm-es5/pds-tabpanel.entry.js +1 -1
- package/dist/esm-es5/pds-tabs.entry.js +1 -1
- package/dist/esm-es5/pds-text.entry.js +1 -1
- package/dist/esm-es5/pds-textarea.entry.js +1 -1
- package/dist/esm-es5/pds-toast.entry.js +1 -1
- package/dist/esm-es5/pds-tooltip.entry.js +1 -1
- package/dist/esm-es5/pine-core.js +1 -1
- package/dist/esm-es5/tabbable-DCKBKRUy.js +1 -0
- package/dist/esm-es5/truncation-tooltip-D_gvhB9r.js +1 -0
- package/dist/pine-core/index.esm.js +1 -1
- package/dist/pine-core/p-001d4b86.entry.js +1 -0
- package/dist/pine-core/p-06279b93.system.entry.js +1 -0
- package/dist/pine-core/{p-b75b0d09.system.entry.js → p-0790dd0d.system.entry.js} +1 -1
- package/dist/pine-core/p-079c39d1.entry.js +1 -0
- package/dist/pine-core/p-07b4524e.entry.js +1 -0
- package/dist/pine-core/{p-b60ac7eb.system.entry.js → p-08bbd3e6.system.entry.js} +1 -1
- package/dist/pine-core/{p-c5c9ed36.system.entry.js → p-0bd61097.system.entry.js} +1 -1
- package/dist/pine-core/p-0c60f577.system.entry.js +1 -0
- package/dist/pine-core/{p-6d603d16.system.entry.js → p-110b4051.system.entry.js} +1 -1
- package/dist/pine-core/p-11e7d660.entry.js +1 -0
- package/dist/pine-core/p-14d872d3.entry.js +1 -0
- package/dist/pine-core/p-17fc76e7.system.entry.js +1 -0
- package/dist/pine-core/{p-0913f696.system.entry.js → p-1e5648bf.system.entry.js} +1 -1
- package/dist/pine-core/{p-e803f629.system.entry.js → p-22ae92f7.system.entry.js} +1 -1
- package/dist/pine-core/p-239774c9.entry.js +1 -0
- package/dist/pine-core/{p-0b71ecb6.system.entry.js → p-25bf2f26.system.entry.js} +2 -2
- package/dist/pine-core/{p-e7a95a49.system.entry.js → p-272b24ad.system.entry.js} +1 -1
- package/dist/pine-core/{p-d2c91e7a.entry.js → p-2c0047cd.entry.js} +1 -1
- package/dist/pine-core/p-2d5b1deb.entry.js +1 -0
- package/dist/pine-core/{p-e8cb76e8.entry.js → p-3556f6ad.entry.js} +1 -1
- package/dist/pine-core/{p-BGLP3keB.js → p-35s7h-dk.js} +1 -1
- package/dist/pine-core/{p-080cb087.system.entry.js → p-38b87aa2.system.entry.js} +1 -1
- package/dist/pine-core/{p-355e4cf9.entry.js → p-3afb1208.entry.js} +1 -1
- package/dist/pine-core/p-3b5b8f73.entry.js +1 -0
- package/dist/pine-core/{p-8c8cc079.system.entry.js → p-3cc19ea8.system.entry.js} +1 -1
- package/dist/pine-core/{p-bd67156b.system.entry.js → p-3ce7e72e.system.entry.js} +1 -1
- package/dist/pine-core/p-3f62581a.system.entry.js +1 -0
- package/dist/pine-core/p-414faecf.entry.js +1 -0
- package/dist/pine-core/p-463a29fa.entry.js +1 -0
- package/dist/pine-core/{p-f029b7da.system.entry.js → p-4ee44585.system.entry.js} +1 -1
- package/dist/pine-core/p-50af67ea.system.entry.js +1 -0
- package/dist/pine-core/p-5133e8be.system.entry.js +1 -0
- package/dist/pine-core/p-55fce29e.entry.js +1 -0
- package/dist/pine-core/{p-77395d62.system.entry.js → p-568a9a79.system.entry.js} +1 -1
- package/dist/pine-core/p-5967d9fa.system.entry.js +1 -0
- package/dist/pine-core/{p-5870b092.system.entry.js → p-5c46553f.system.entry.js} +1 -1
- package/dist/pine-core/{p-f0d24298.system.entry.js → p-5ce5836e.system.entry.js} +1 -1
- package/dist/pine-core/p-5f3242c8.system.entry.js +1 -0
- package/dist/pine-core/{p-80e6f3a0.system.entry.js → p-60d27247.system.entry.js} +1 -1
- package/dist/pine-core/{p-bd26a5e8.entry.js → p-60e3b1af.entry.js} +1 -1
- package/dist/pine-core/{p-ca0a8f5c.entry.js → p-64283f7b.entry.js} +1 -1
- package/dist/pine-core/p-6602b4d0.entry.js +1 -0
- package/dist/pine-core/p-6845867f.system.entry.js +1 -0
- package/dist/pine-core/{p-1ee86d87.system.entry.js → p-68fdfb8f.system.entry.js} +1 -1
- package/dist/pine-core/p-6b6ae1be.entry.js +1 -0
- package/dist/pine-core/{p-e5420660.entry.js → p-6d64e6c7.entry.js} +1 -1
- package/dist/pine-core/{p-3a959459.system.entry.js → p-6dad76cb.system.entry.js} +1 -1
- package/dist/pine-core/p-6f34ad9c.entry.js +1 -0
- package/dist/pine-core/{p-55224683.entry.js → p-7073146f.entry.js} +1 -1
- package/dist/pine-core/{p-f1702281.entry.js → p-735b3631.entry.js} +1 -1
- package/dist/pine-core/p-7a14473e.entry.js +1 -0
- package/dist/pine-core/{p-9880d251.system.entry.js → p-7a19477e.system.entry.js} +1 -1
- package/dist/pine-core/{p-88ff1604.entry.js → p-7d3a20ba.entry.js} +1 -1
- package/dist/pine-core/{p-a939b471.entry.js → p-7fcf3d37.entry.js} +1 -1
- package/dist/pine-core/{p-26642718.entry.js → p-87642228.entry.js} +1 -1
- package/dist/pine-core/p-89fefe36.entry.js +1 -0
- package/dist/pine-core/p-8b97dd57.system.entry.js +1 -0
- package/dist/pine-core/{p-0092444c.system.entry.js → p-9201b497.system.entry.js} +1 -1
- package/dist/pine-core/{p-ebd0bff2.entry.js → p-92a8cf7d.entry.js} +1 -1
- package/dist/pine-core/{p-e836a041.entry.js → p-94597b73.entry.js} +1 -1
- package/dist/pine-core/p-9713d6a5.system.entry.js +1 -0
- package/dist/pine-core/p-97be00f4.system.entry.js +1 -0
- package/dist/pine-core/{p-2ac2457b.system.entry.js → p-98843402.system.entry.js} +1 -1
- package/dist/pine-core/{p-b914dde8.entry.js → p-98cc327b.entry.js} +2 -2
- package/dist/pine-core/p-9a8971e2.system.entry.js +1 -0
- package/dist/pine-core/p-9a8d2985.system.entry.js +3 -0
- package/dist/pine-core/{p-cfc52b95.system.entry.js → p-9dbc017f.system.entry.js} +1 -1
- package/dist/pine-core/p-9fbcba0d.entry.js +1 -0
- package/dist/pine-core/p-9fe4a64a.entry.js +1 -0
- package/dist/pine-core/{p-COtCa1Md.system.js → p-BNTlHhoO.system.js} +1 -1
- package/dist/pine-core/p-BZ1l3LGl.system.js +1 -0
- package/dist/pine-core/p-BgNaWLoS.js +1 -0
- package/dist/pine-core/{p-CmSJytt1.js → p-BplEmwUQ.js} +2 -2
- package/dist/pine-core/{p-Cy8cvR7I.system.js → p-CANeE7Ss.system.js} +1 -1
- package/dist/pine-core/{p-XW4H0W6i.system.js → p-CNXspDYs.system.js} +1 -1
- package/dist/pine-core/{p-JtdHT_W5.js → p-CirzxZ33.js} +1 -1
- package/dist/pine-core/{p-CGRdQc49.system.js → p-CjRCtzPD.system.js} +2 -2
- package/dist/pine-core/{p-BPqJgIq6.js → p-Cuc0DYlm.js} +1 -1
- package/dist/pine-core/p-D52aRqFx.system.js +1 -0
- package/dist/pine-core/p-DCKBKRUy.js +1 -0
- package/dist/pine-core/p-DXO1yd32.system.js +1 -0
- package/dist/pine-core/{p-n3_ytl_p.system.js → p-DaCT2ssj.system.js} +1 -1
- package/dist/pine-core/p-a2078add.entry.js +1 -0
- package/dist/pine-core/{p-97d0b89e.system.entry.js → p-a48b025a.system.entry.js} +1 -1
- package/dist/pine-core/{p-9713fb36.entry.js → p-a7d25143.entry.js} +1 -1
- package/dist/pine-core/{p-9dcd2cdb.entry.js → p-ad3b1ec3.entry.js} +1 -1
- package/dist/pine-core/p-b017eb99.system.entry.js +1 -0
- package/dist/pine-core/p-b037dcbd.system.entry.js +1 -0
- package/dist/pine-core/{p-db17c626.system.entry.js → p-b243767b.system.entry.js} +1 -1
- package/dist/pine-core/{p-341c38f1.system.entry.js → p-b33ad96e.system.entry.js} +1 -1
- package/dist/pine-core/p-b6edfdfe.entry.js +2 -0
- package/dist/pine-core/{p-8191498f.system.entry.js → p-b7cbd913.system.entry.js} +1 -1
- package/dist/pine-core/{p-8f531063.entry.js → p-b9d71b76.entry.js} +1 -1
- package/dist/pine-core/p-bcf57566.entry.js +1 -0
- package/dist/pine-core/{p-4fd454f6.entry.js → p-bda7e3be.entry.js} +1 -1
- package/dist/pine-core/p-bdde1e53.entry.js +1 -0
- package/dist/pine-core/{p-cb6a3e4c.system.entry.js → p-be3b4f12.system.entry.js} +1 -1
- package/dist/pine-core/{p-b1548a20.entry.js → p-bfdfbe9f.entry.js} +1 -1
- package/dist/pine-core/p-c02a32ec.entry.js +1 -0
- package/dist/pine-core/p-c1da80e5.entry.js +1 -0
- package/dist/pine-core/{p-d8570b4b.system.entry.js → p-c233866c.system.entry.js} +1 -1
- package/dist/pine-core/{p-fc25b956.system.entry.js → p-cb560aab.system.entry.js} +1 -1
- package/dist/pine-core/{p-02088776.entry.js → p-ce554098.entry.js} +1 -1
- package/dist/pine-core/p-ced6a814.system.entry.js +1 -0
- package/dist/pine-core/{p-0a84d220.entry.js → p-d7930540.entry.js} +1 -1
- package/dist/pine-core/{p-11d98408.system.entry.js → p-d7db749a.system.entry.js} +1 -1
- package/dist/pine-core/{p-7a5b21d2.system.entry.js → p-d8bedb58.system.entry.js} +1 -1
- package/dist/pine-core/{p-1dc5a7e0.system.entry.js → p-d9243653.system.entry.js} +1 -1
- package/dist/pine-core/{p-9ab95438.entry.js → p-d94ebe84.entry.js} +1 -1
- package/dist/pine-core/{p-9109b90a.entry.js → p-de176bd9.entry.js} +1 -1
- package/dist/pine-core/{p-57a2f927.entry.js → p-dea2a254.entry.js} +1 -1
- package/dist/pine-core/p-dfadfcd1.entry.js +1 -0
- package/dist/pine-core/{p-1437585e.system.entry.js → p-e1fdd53a.system.entry.js} +1 -1
- package/dist/pine-core/{p-4435fff6.system.entry.js → p-e70cb112.system.entry.js} +1 -1
- package/dist/pine-core/{p-01aa382c.system.entry.js → p-e9a53a88.system.entry.js} +1 -1
- package/dist/pine-core/p-eb93cc6e.entry.js +1 -0
- package/dist/pine-core/{p-4d03d1e2.system.entry.js → p-ebf0c51b.system.entry.js} +1 -1
- package/dist/pine-core/p-ebf74c43.system.entry.js +1 -0
- package/dist/pine-core/{p-cde8eb81.entry.js → p-ee449a4b.entry.js} +1 -1
- package/dist/pine-core/p-ef4d8fea.entry.js +1 -0
- package/dist/pine-core/p-f09f27ab.system.entry.js +1 -0
- package/dist/pine-core/{p-ff3de72e.entry.js → p-f2c487e6.entry.js} +1 -1
- package/dist/pine-core/p-f549f2bc.entry.js +1 -0
- package/dist/pine-core/p-fc743f6e.entry.js +1 -0
- package/dist/pine-core/{p-BJXk71tO.js → p-m3pqpeWg.js} +1 -1
- package/dist/pine-core/p-wXfuz0Bd.system.js +1 -0
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/pine-core/pine-core.js +1 -1
- package/dist/types/components/pds-alert/pds-alert.d.ts +10 -0
- package/dist/types/components/pds-avatar/pds-avatar.d.ts +8 -0
- package/dist/types/components/pds-button/pds-button.d.ts +5 -6
- package/dist/types/components/pds-checkbox/pds-checkbox.d.ts +7 -1
- package/dist/types/components/pds-combobox/pds-combobox.d.ts +9 -0
- package/dist/types/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.d.ts +20 -3
- package/dist/types/components/pds-link/pds-link.d.ts +8 -0
- package/dist/types/components/pds-modal/pds-modal-content/pds-modal-content.d.ts +2 -0
- package/dist/types/components/pds-popover/pds-popover.d.ts +87 -21
- package/dist/types/components/pds-radio/pds-radio.d.ts +9 -3
- package/dist/types/components/pds-select/pds-select.d.ts +32 -4
- package/dist/types/components/pds-toast/pds-toast.d.ts +9 -0
- package/dist/types/components/pds-tooltip/pds-tooltip.d.ts +31 -0
- package/dist/types/components.d.ts +139 -18
- package/dist/types/utils/aria-references.d.ts +24 -0
- package/dist/types/utils/tabbable.d.ts +2 -0
- package/dist/types/utils/truncation-tooltip.d.ts +4 -4
- package/dist/types/utils/types.d.ts +1 -0
- package/dist/vscode.html-data.json +129 -14
- package/hydrate/index.js +1040 -416
- package/hydrate/index.mjs +1040 -416
- package/package.json +2 -2
- package/dist/esm-es5/truncation-tooltip-DRXsdKk1.js +0 -1
- package/dist/pine-core/p-049f126a.entry.js +0 -1
- package/dist/pine-core/p-153ba77b.entry.js +0 -1
- package/dist/pine-core/p-208c7dbf.entry.js +0 -1
- package/dist/pine-core/p-258770cf.system.entry.js +0 -1
- package/dist/pine-core/p-2cb5483a.system.entry.js +0 -1
- package/dist/pine-core/p-432d5ec7.entry.js +0 -1
- package/dist/pine-core/p-5442d983.system.entry.js +0 -1
- package/dist/pine-core/p-576cf904.system.entry.js +0 -1
- package/dist/pine-core/p-5c90091e.system.entry.js +0 -1
- package/dist/pine-core/p-602c197f.entry.js +0 -1
- package/dist/pine-core/p-645a482b.system.entry.js +0 -1
- package/dist/pine-core/p-72865997.entry.js +0 -1
- package/dist/pine-core/p-75ee0403.entry.js +0 -1
- package/dist/pine-core/p-7a287635.system.entry.js +0 -1
- package/dist/pine-core/p-7bf6563a.system.entry.js +0 -1
- package/dist/pine-core/p-7fa66cad.entry.js +0 -1
- package/dist/pine-core/p-80a698ae.entry.js +0 -1
- package/dist/pine-core/p-82cf4ec6.entry.js +0 -1
- package/dist/pine-core/p-86040cac.system.entry.js +0 -1
- package/dist/pine-core/p-875b0436.system.entry.js +0 -1
- package/dist/pine-core/p-8cc302aa.system.entry.js +0 -1
- package/dist/pine-core/p-8d292b48.entry.js +0 -1
- package/dist/pine-core/p-92ae6082.entry.js +0 -1
- package/dist/pine-core/p-94593f20.system.entry.js +0 -1
- package/dist/pine-core/p-993d1043.entry.js +0 -1
- package/dist/pine-core/p-99459e27.entry.js +0 -1
- package/dist/pine-core/p-BLG6RDBt.js +0 -1
- package/dist/pine-core/p-BR5nujVX.system.js +0 -1
- package/dist/pine-core/p-CuSNnuFu.system.js +0 -1
- package/dist/pine-core/p-a0960b3d.system.entry.js +0 -1
- package/dist/pine-core/p-a1230a74.system.entry.js +0 -1
- package/dist/pine-core/p-a19cd59c.entry.js +0 -1
- package/dist/pine-core/p-a787b34a.system.entry.js +0 -1
- package/dist/pine-core/p-a826f290.entry.js +0 -1
- package/dist/pine-core/p-aa032a5e.system.entry.js +0 -1
- package/dist/pine-core/p-acce8eb2.entry.js +0 -1
- package/dist/pine-core/p-b69f04b7.entry.js +0 -1
- package/dist/pine-core/p-bb68431a.entry.js +0 -1
- package/dist/pine-core/p-bb73ad66.entry.js +0 -2
- package/dist/pine-core/p-beb23781.entry.js +0 -1
- package/dist/pine-core/p-bf30dec0.entry.js +0 -1
- package/dist/pine-core/p-c36b490e.entry.js +0 -1
- package/dist/pine-core/p-c81d8ac8.entry.js +0 -1
- package/dist/pine-core/p-ca0d48e8.entry.js +0 -1
- package/dist/pine-core/p-cfd012d4.entry.js +0 -1
- package/dist/pine-core/p-e0917a26.entry.js +0 -1
- package/dist/pine-core/p-e836f3ec.system.entry.js +0 -3
- package/dist/pine-core/p-ea4d4741.system.entry.js +0 -1
- package/dist/pine-core/p-f2c253d8.entry.js +0 -1
- package/dist/pine-core/p-f474d7de.entry.js +0 -1
- package/dist/pine-core/p-f77905aa.system.entry.js +0 -1
- package/dist/pine-core/p-qhdoK1Jp.system.js +0 -1
package/hydrate/index.mjs
CHANGED
|
@@ -5730,7 +5730,7 @@ class MockPdsModal {
|
|
|
5730
5730
|
'pds-modal__backdrop': true,
|
|
5731
5731
|
'open': this.open,
|
|
5732
5732
|
};
|
|
5733
|
-
return (hAsync("div", { key: '
|
|
5733
|
+
return (hAsync("div", { key: '6e165638f8f4699fa242f3045155c392f9f529b2', class: backdropClasses }, hAsync("div", { key: 'f4b8db3093a6fbe24be8035a826e8289815e4afb', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, hAsync("div", { key: 'fa846f66e539ea0d1b73820abb991fdb02902499', class: "pds-modal__header" }, hAsync("slot", { key: '0faaa6858fecd9d0c48c7f183d4f2101c1bed785', name: "header" })), hAsync("div", { key: 'a896fba9494fcdee9dde7e0d9f7baf708095ee6f', class: "pds-modal-content" }, hAsync("slot", { key: '4091e70b2a744c36c8249aa8664937d227145c14' })), hAsync("div", { key: 'cbf4bdd80cc3575d8c7e2e0e2078e28c4f185920', class: "pds-modal__footer" }, hAsync("slot", { key: '56ed3a26c36fd70d7ec9f033951d1b1d9e044957', name: "footer" })))));
|
|
5734
5734
|
}
|
|
5735
5735
|
get el() { return getElement(this); }
|
|
5736
5736
|
static get style() { return pdsModalCss$1(); }
|
|
@@ -5752,7 +5752,7 @@ class MockPdsModal {
|
|
|
5752
5752
|
}; }
|
|
5753
5753
|
}
|
|
5754
5754
|
|
|
5755
|
-
/* pds-icons v10.
|
|
5755
|
+
/* pds-icons v10.7.0, ES Modules */
|
|
5756
5756
|
|
|
5757
5757
|
const addCircle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m11-5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1'/></svg>";
|
|
5758
5758
|
const calendarSimple = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M8 1a1 1 0 0 1 1 1v1h6V2a1 1 0 1 1 2 0v1.002c.476.003.891.013 1.252.042.562.046 1.079.145 1.564.392a4 4 0 0 1 1.748 1.748c.247.485.346 1.002.392 1.564C22 7.29 22 7.954 22 8.758v8.483c0 .805 0 1.47-.044 2.01-.046.563-.145 1.08-.392 1.565a4 4 0 0 1-1.748 1.748c-.485.247-1.002.346-1.564.392-.541.044-1.206.044-2.01.044H7.758c-.805 0-1.47 0-2.01-.044-.563-.046-1.08-.145-1.565-.392a4 4 0 0 1-1.748-1.748c-.247-.485-.346-1.002-.392-1.564C2 18.71 2 18.046 2 17.242V8.758c0-.805 0-1.47.044-2.01.046-.563.145-1.08.392-1.565a4 4 0 0 1 1.748-1.748c.485-.247 1.002-.346 1.564-.392.361-.03.777-.04 1.252-.042V2a1 1 0 0 1 1-1M7 5.002c-.446.003-.795.012-1.089.036-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819C4 7.361 4 7.943 4 8.8V9h16v-.2c0-.857 0-1.439-.038-1.889-.035-.438-.1-.663-.18-.819a2 2 0 0 0-.874-.874c-.156-.08-.38-.145-.819-.18A15 15 0 0 0 17 5.002V6a1 1 0 1 1-2 0V5H9v1a1 1 0 1 1-2 0zM20 11H4v6.2c0 .857 0 1.439.038 1.889.035.438.1.663.18.819a2 2 0 0 0 .874.874c.156.08.38.145.819.18C6.361 21 6.943 21 7.8 21h8.4c.857 0 1.439 0 1.889-.038.438-.035.663-.1.819-.18a2 2 0 0 0 .874-.874c.08-.156.145-.38.18-.819.037-.45.038-1.032.038-1.889z'/></svg>";
|
|
@@ -5830,8 +5830,16 @@ class PdsAccordion {
|
|
|
5830
5830
|
|
|
5831
5831
|
const pdsAlertTokensCss = () => `:host{--pine-alert-color-background:var(--pine-color-grey-150);--pine-alert-color-border:var(--pine-color-grey-300);--pine-alert-color-dismiss:var(--pine-color-grey-900);--pine-alert-color-dismiss-hover:var(--pine-color-grey-300);--pine-alert-color-icon:var(--pine-color-grey-700);--pine-alert-color-link:var(--pine-color-grey-900);--pine-alert-color-link-hover:var(--pine-color-grey-950);--pine-alert-color-text:var(--pine-color-grey-950);--pine-alert-color-danger-background:var(--pine-color-red-150);--pine-alert-color-danger-border:var(--pine-color-red-300);--pine-alert-color-danger-dismiss:var(--pine-color-red-900);--pine-alert-color-danger-dismiss-hover:var(--pine-color-red-300);--pine-alert-color-danger-icon:var(--pine-color-red-700);--pine-alert-color-danger-link:var(--pine-color-red-900);--pine-alert-color-danger-link-hover:var(--pine-color-red-950);--pine-alert-color-danger-text:var(--pine-color-red-950);--pine-alert-color-info-background:var(--pine-color-blue-150);--pine-alert-color-info-border:var(--pine-color-blue-300);--pine-alert-color-info-dismiss:var(--pine-color-blue-900);--pine-alert-color-info-dismiss-hover:var(--pine-color-blue-300);--pine-alert-color-info-icon:var(--pine-color-blue-700);--pine-alert-color-info-link:var(--pine-color-blue-900);--pine-alert-color-info-link-hover:var(--pine-color-blue-950);--pine-alert-color-info-text:var(--pine-color-blue-950);--pine-alert-color-success-background:var(--pine-color-green-150);--pine-alert-color-success-border:var(--pine-color-green-300);--pine-alert-color-success-dismiss:var(--pine-color-green-900);--pine-alert-color-success-dismiss-hover:var(--pine-color-green-300);--pine-alert-color-success-icon:var(--pine-color-green-700);--pine-alert-color-success-link:var(--pine-color-green-900);--pine-alert-color-success-link-hover:var(--pine-color-green-950);--pine-alert-color-success-text:var(--pine-color-green-950);--pine-alert-color-warning-background:var(--pine-color-yellow-150);--pine-alert-color-warning-border:var(--pine-color-yellow-300);--pine-alert-color-warning-dismiss:var(--pine-color-yellow-900);--pine-alert-color-warning-dismiss-hover:var(--pine-color-yellow-300);--pine-alert-color-warning-icon:var(--pine-color-yellow-700);--pine-alert-color-warning-link:var(--pine-color-yellow-900);--pine-alert-color-warning-link-hover:var(--pine-color-yellow-950);--pine-alert-color-warning-text:var(--pine-color-yellow-950)}:host-context([data-theme=dark]){--pine-alert-color-background:var(--pine-color-grey-800);--pine-alert-color-border:var(--pine-color-grey-600);--pine-alert-color-dismiss:var(--pine-color-grey-200);--pine-alert-color-dismiss-hover:var(--pine-color-grey-700);--pine-alert-color-icon:var(--pine-color-grey-300);--pine-alert-color-link:var(--pine-color-grey-300);--pine-alert-color-link-hover:var(--pine-color-grey-050);--pine-alert-color-text:var(--pine-color-grey-100);--pine-alert-color-danger-background:var(--pine-color-red-900);--pine-alert-color-danger-border:var(--pine-color-red-800);--pine-alert-color-danger-dismiss:var(--pine-color-red-200);--pine-alert-color-danger-dismiss-hover:var(--pine-color-red-800);--pine-alert-color-danger-icon:var(--pine-color-red-400);--pine-alert-color-danger-link:var(--pine-color-red-300);--pine-alert-color-danger-link-hover:var(--pine-color-red-200);--pine-alert-color-danger-text:var(--pine-color-red-100);--pine-alert-color-info-background:var(--pine-color-blue-900);--pine-alert-color-info-border:var(--pine-color-blue-800);--pine-alert-color-info-dismiss:var(--pine-color-blue-200);--pine-alert-color-info-dismiss-hover:var(--pine-color-blue-800);--pine-alert-color-info-icon:var(--pine-color-blue-400);--pine-alert-color-info-link:var(--pine-color-blue-300);--pine-alert-color-info-link-hover:var(--pine-color-blue-200);--pine-alert-color-info-text:var(--pine-color-blue-100);--pine-alert-color-success-background:var(--pine-color-green-900);--pine-alert-color-success-border:var(--pine-color-green-800);--pine-alert-color-success-dismiss:var(--pine-color-green-200);--pine-alert-color-success-dismiss-hover:var(--pine-color-green-800);--pine-alert-color-success-icon:var(--pine-color-green-400);--pine-alert-color-success-link:var(--pine-color-green-300);--pine-alert-color-success-link-hover:var(--pine-color-green-200);--pine-alert-color-success-text:var(--pine-color-green-100);--pine-alert-color-warning-background:var(--pine-color-yellow-900);--pine-alert-color-warning-border:var(--pine-color-yellow-800);--pine-alert-color-warning-dismiss:var(--pine-color-yellow-200);--pine-alert-color-warning-dismiss-hover:var(--pine-color-yellow-800);--pine-alert-color-warning-icon:var(--pine-color-yellow-400);--pine-alert-color-warning-link:var(--pine-color-yellow-300);--pine-alert-color-warning-link-hover:var(--pine-color-yellow-200);--pine-alert-color-warning-text:var(--pine-color-yellow-100)}`;
|
|
5832
5832
|
|
|
5833
|
-
const pdsAlertCss = () => `:host{--pds-context-link-color:var(--pine-alert-color-link);--pds-context-link-color-hover:var(--pine-alert-color-link-hover);display:block;line-height:1;width:100%}:host([variant=danger]){--pds-context-link-color:var(--pine-alert-color-danger-link);--pds-context-link-color-hover:var(--pine-alert-color-danger-link-hover)}:host([variant=info]){--pds-context-link-color:var(--pine-alert-color-info-link);--pds-context-link-color-hover:var(--pine-alert-color-info-link-hover)}:host([variant=success]){--pds-context-link-color:var(--pine-alert-color-success-link);--pds-context-link-color-hover:var(--pine-alert-color-success-link-hover)}:host([variant=warning]){--pds-context-link-color:var(--pine-alert-color-warning-link);--pds-context-link-color-hover:var(--pine-alert-color-warning-link-hover)}.pds-alert__container{--pds-alert-icon-size:var(--pine-dimension-sm);--pds-alert-border-dismiss-outline:2px solid var(--pds-alert-color-dismiss);--pds-alert-background:var(--pine-alert-color-background);--pds-alert-border-color:var(--pine-alert-color-border);--pds-alert-color-icon:var(--pine-alert-color-icon);--pds-alert-color-text:var(--pine-alert-color-text);--pds-alert-color-dismiss:var(--pine-alert-color-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-dismiss-hover);padding:var(--pine-dimension-250)}.pds-alert__container--danger{--pds-alert-background:var(--pine-alert-color-danger-background);--pds-alert-border-color:var(--pine-alert-color-danger-border);--pds-alert-color-icon:var(--pine-alert-color-danger-icon);--pds-alert-color-text:var(--pine-alert-color-danger-text);--pds-alert-color-dismiss:var(--pine-alert-color-danger-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-danger-dismiss-hover)}.pds-alert__container--info{--pds-alert-background:var(--pine-alert-color-info-background);--pds-alert-border-color:var(--pine-alert-color-info-border);--pds-alert-color-icon:var(--pine-alert-color-info-icon);--pds-alert-color-text:var(--pine-alert-color-info-text);--pds-alert-color-dismiss:var(--pine-alert-color-info-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-info-dismiss-hover)}.pds-alert__container--success{--pds-alert-background:var(--pine-alert-color-success-background);--pds-alert-border-color:var(--pine-alert-color-success-border);--pds-alert-color-icon:var(--pine-alert-color-success-icon);--pds-alert-color-text:var(--pine-alert-color-success-text);--pds-alert-color-dismiss:var(--pine-alert-color-success-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-success-dismiss-hover)}.pds-alert__container--warning{--pds-alert-background:var(--pine-alert-color-warning-background);--pds-alert-border-color:var(--pine-alert-color-warning-border);--pds-alert-color-icon:var(--pine-alert-color-warning-icon);--pds-alert-color-text:var(--pine-alert-color-warning-text);--pds-alert-color-dismiss:var(--pine-alert-color-warning-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-warning-dismiss-hover)}.pds-alert__icon{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-alert__icon--small{-webkit-margin-before:0;margin-block-start:0}.pds-alert__content-wrapper{-ms-flex:1;flex:1;min-width:0;overflow:hidden;width:100%}.pds-alert__dismiss{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;height:var(--pine-dimension-250);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs);width:var(--pine-dimension-250)}.pds-alert__dismiss:hover{background:var(--pds-alert-background-dismiss-hover);opacity:0.8}.pds-alert__dismiss:focus-visible{outline:var(--pds-alert-border-dismiss-outline)}.pds-alert__description--small{-ms-flex:1 1 auto;flex:1 1 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-alert__actions{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-alert__actions--small{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}`;
|
|
5833
|
+
const pdsAlertCss = () => `:host{--pds-context-link-color:var(--pine-alert-color-link);--pds-context-link-color-hover:var(--pine-alert-color-link-hover);display:block;line-height:1;width:100%}:host([variant=danger]){--pds-context-link-color:var(--pine-alert-color-danger-link);--pds-context-link-color-hover:var(--pine-alert-color-danger-link-hover)}:host([variant=info]){--pds-context-link-color:var(--pine-alert-color-info-link);--pds-context-link-color-hover:var(--pine-alert-color-info-link-hover)}:host([variant=success]){--pds-context-link-color:var(--pine-alert-color-success-link);--pds-context-link-color-hover:var(--pine-alert-color-success-link-hover)}:host([variant=warning]){--pds-context-link-color:var(--pine-alert-color-warning-link);--pds-context-link-color-hover:var(--pine-alert-color-warning-link-hover)}.pds-alert__container{--pds-alert-icon-size:var(--pine-dimension-sm);--pds-alert-border-dismiss-outline:2px solid var(--pds-alert-color-dismiss);--pds-alert-background:var(--pine-alert-color-background);--pds-alert-border-color:var(--pine-alert-color-border);--pds-alert-color-icon:var(--pine-alert-color-icon);--pds-alert-color-text:var(--pine-alert-color-text);--pds-alert-color-dismiss:var(--pine-alert-color-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-dismiss-hover);padding:var(--pine-dimension-250)}.pds-alert__container--danger{--pds-alert-background:var(--pine-alert-color-danger-background);--pds-alert-border-color:var(--pine-alert-color-danger-border);--pds-alert-color-icon:var(--pine-alert-color-danger-icon);--pds-alert-color-text:var(--pine-alert-color-danger-text);--pds-alert-color-dismiss:var(--pine-alert-color-danger-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-danger-dismiss-hover)}.pds-alert__container--info{--pds-alert-background:var(--pine-alert-color-info-background);--pds-alert-border-color:var(--pine-alert-color-info-border);--pds-alert-color-icon:var(--pine-alert-color-info-icon);--pds-alert-color-text:var(--pine-alert-color-info-text);--pds-alert-color-dismiss:var(--pine-alert-color-info-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-info-dismiss-hover)}.pds-alert__container--success{--pds-alert-background:var(--pine-alert-color-success-background);--pds-alert-border-color:var(--pine-alert-color-success-border);--pds-alert-color-icon:var(--pine-alert-color-success-icon);--pds-alert-color-text:var(--pine-alert-color-success-text);--pds-alert-color-dismiss:var(--pine-alert-color-success-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-success-dismiss-hover)}.pds-alert__container--warning{--pds-alert-background:var(--pine-alert-color-warning-background);--pds-alert-border-color:var(--pine-alert-color-warning-border);--pds-alert-color-icon:var(--pine-alert-color-warning-icon);--pds-alert-color-text:var(--pine-alert-color-warning-text);--pds-alert-color-dismiss:var(--pine-alert-color-warning-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-warning-dismiss-hover)}.pds-alert__icon{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-alert__icon--small{-webkit-margin-before:0;margin-block-start:0}.pds-alert__content-wrapper{-ms-flex:1;flex:1;min-width:0;overflow:hidden;width:100%}.pds-alert__dismiss{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;height:var(--pine-dimension-250);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs);width:var(--pine-dimension-250)}.pds-alert__dismiss:hover{background:var(--pds-alert-background-dismiss-hover);opacity:0.8}.pds-alert__dismiss:focus-visible{outline:var(--pds-alert-border-dismiss-outline)}.pds-alert__description--small{-ms-flex:1 1 auto;flex:1 1 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-alert__actions{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-alert__actions--small{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
|
|
5834
5834
|
|
|
5835
|
+
// What each variant announces when `severityLabel` isn't set. The `default`
|
|
5836
|
+
// variant has no severity.
|
|
5837
|
+
const SEVERITY_LABELS = {
|
|
5838
|
+
danger: 'Error',
|
|
5839
|
+
info: 'Info',
|
|
5840
|
+
success: 'Success',
|
|
5841
|
+
warning: 'Warning',
|
|
5842
|
+
};
|
|
5835
5843
|
/**
|
|
5836
5844
|
* @slot actions - Slot for alert actions.
|
|
5837
5845
|
* @part dismiss
|
|
@@ -5885,7 +5893,12 @@ class PdsAlert {
|
|
|
5885
5893
|
}
|
|
5886
5894
|
return (hAsync("div", null, hAsync("pds-text", { class: "pds-alert__description", color: "var(--pds-alert-color-text)", tag: "p" }, hAsync("slot", null)), this.hasActionsContent && this.renderActions(false)));
|
|
5887
5895
|
}
|
|
5896
|
+
severityText() {
|
|
5897
|
+
var _a;
|
|
5898
|
+
return (_a = this.severityLabel) !== null && _a !== void 0 ? _a : SEVERITY_LABELS[this.variant];
|
|
5899
|
+
}
|
|
5888
5900
|
render() {
|
|
5901
|
+
const severity = this.severityText();
|
|
5889
5902
|
const iconMap = {
|
|
5890
5903
|
danger: 'warning-filled',
|
|
5891
5904
|
default: 'info-circle-filled',
|
|
@@ -5895,7 +5908,7 @@ class PdsAlert {
|
|
|
5895
5908
|
};
|
|
5896
5909
|
// Get the icon name based on the current variant
|
|
5897
5910
|
const iconName = iconMap[this.variant] || iconMap.default;
|
|
5898
|
-
return (hAsync(Host, { key: '
|
|
5911
|
+
return (hAsync(Host, { key: 'd487419289ef352f63e7861fb21f42aa243ee526', class: "pds-alert", id: this.componentId, variant: this.variant }, hAsync("pds-box", { key: '0ecd6e25d4163d41055be53e88f6d332e56e1ed8', class: `pds-alert__container pds-alert__container--${this.variant}`, "background-color": "var(--pds-alert-background)", "border-color": "var(--pds-alert-border-color)", "border-radius": "md", border: true, display: "block" }, hAsync("pds-box", { key: '4cca87bd3b9758e9830eddec25c9fd3e8c06a44d', gap: "sm", display: "flex", "align-items": this.small ? "center" : undefined }, severity && hAsync("span", { key: 'b076475ed4a0bc2db09df84d6530db0e4e098daf', class: "visually-hidden" }, severity), !this.hideIcon && (hAsync("pds-icon", { key: 'e8efc683c4f84e22fac8729c0c476c817b33f3e6', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)", "aria-hidden": "true" })), hAsync("pds-box", { key: 'f3ff29ce778f2e8bfb0d0a3e6a732714ce22e8ad', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (hAsync("pds-text", { key: 'c00d44fe496e8aae699ac740428e6e523c0c8d0a', class: "pds-alert__heading", color: "var(--pds-alert-color-text)", size: "h5", tag: "h3", weight: "medium" }, this.heading)), this.renderContent()), this.dismissible && (hAsync("button", { key: 'd770590cecc3b27e1dd2750bbdfa07209dbb017d', class: "pds-alert__dismiss", type: "button", part: "dismiss", "aria-label": this.dismissLabel, onClick: this.handleCloseClick }, hAsync("pds-icon", { key: '9d79c27c829662dbeecb30dfad806f345eeb6c67', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
|
|
5899
5912
|
}
|
|
5900
5913
|
get el() { return getElement(this); }
|
|
5901
5914
|
static get style() { return pdsAlertTokensCss() + pdsAlertCss(); }
|
|
@@ -5910,6 +5923,7 @@ class PdsAlert {
|
|
|
5910
5923
|
"hideIcon": [4, "hide-icon"],
|
|
5911
5924
|
"variant": [1],
|
|
5912
5925
|
"dismissLabel": [1, "dismiss-label"],
|
|
5926
|
+
"severityLabel": [1, "severity-label"],
|
|
5913
5927
|
"hasActionsContent": [32]
|
|
5914
5928
|
},
|
|
5915
5929
|
"$listeners$": undefined,
|
|
@@ -5961,6 +5975,8 @@ function restoreReflectedDefault(el, attr, value, defaultValue) {
|
|
|
5961
5975
|
|
|
5962
5976
|
const pdsAvatarCss = () => `:host{display:inline-block}div{--color-background-container:var(--pine-color-background-container-hover);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-dimension-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-none)}.pds-avatar__button:focus-visible{outline:var(--pine-outline-focus)}.pds-avatar__badge{background-color:transparent;border:var(--pine-dimension-none);border-color:transparent;border-radius:var(--pine-border-radius-round);inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);position:absolute}:host([status=online]){--pds-avatar-status-color:var(--pine-color-green-500)}:host([status=away]){--pds-avatar-status-color:var(--pine-color-yellow-500)}:host([status=offline]){--pds-avatar-status-color:var(--pine-color-background-inset-emphasized)}.pds-avatar__status{background-color:var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized));block-size:28%;border-radius:var(--pine-border-radius-full);-webkit-box-shadow:0 0 0 var(--pine-border-width-thick) var(--pine-color-background-container);box-shadow:0 0 0 var(--pine-border-width-thick) var(--pine-color-background-container);inline-size:28%;inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);min-block-size:var(--pine-dimension-100);min-inline-size:var(--pine-dimension-100);position:absolute}:host(.pds-avatar--status-ring) div{-webkit-box-shadow:0 0 0 var(--pine-border-width-thick) var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized));box-shadow:0 0 0 var(--pine-border-width-thick) var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized))}img{border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.pds-avatar__initials{color:var(--pine-color-brand);fill:var(--pine-color-brand);font-size:var(--pine-font-size-085);font-weight:var(--pine-font-weight-semi-bold);height:100%;text-align:center;width:100%}.pds-avatar__initials text{text-anchor:middle}`;
|
|
5963
5977
|
|
|
5978
|
+
// Used when `badgeLabel` is unset; an empty string hides the badge instead.
|
|
5979
|
+
const DEFAULT_BADGE_LABEL = 'Verified';
|
|
5964
5980
|
/**
|
|
5965
5981
|
* @part asset-wrapper
|
|
5966
5982
|
* @part button
|
|
@@ -6040,14 +6056,22 @@ class PdsAvatar {
|
|
|
6040
6056
|
:
|
|
6041
6057
|
this.renderAssetWrapper());
|
|
6042
6058
|
};
|
|
6043
|
-
this.renderBadge = () =>
|
|
6044
|
-
|
|
6045
|
-
|
|
6046
|
-
|
|
6047
|
-
//
|
|
6048
|
-
|
|
6049
|
-
|
|
6050
|
-
|
|
6059
|
+
this.renderBadge = () => {
|
|
6060
|
+
var _a;
|
|
6061
|
+
// Inside the dropdown trigger the button's aria-label is the name, so the
|
|
6062
|
+
// badge is decorative there, as the status dot is. An empty label is
|
|
6063
|
+
// decorative too, rather than an image with no name.
|
|
6064
|
+
const badgeLabel = (_a = this.badgeLabel) !== null && _a !== void 0 ? _a : DEFAULT_BADGE_LABEL;
|
|
6065
|
+
const label = this.dropdown || badgeLabel === '' ? undefined : badgeLabel;
|
|
6066
|
+
return (
|
|
6067
|
+
// `badge` and `status` share the bottom-end corner; `status` wins so the
|
|
6068
|
+
// presence dot is never painted over the badge.
|
|
6069
|
+
this.badge && !this.status
|
|
6070
|
+
// Percentage is average size of icon in relation to total avatar size
|
|
6071
|
+
// of all preset sizes found in Figma.
|
|
6072
|
+
// Used to allow icons to scale to container size
|
|
6073
|
+
&& hAsync("pds-icon", { color: "var(--pine-color-purple-600)", class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%", "aria-label": label, "aria-hidden": label === undefined ? 'true' : undefined }));
|
|
6074
|
+
};
|
|
6051
6075
|
this.renderStatus = () => {
|
|
6052
6076
|
var _a;
|
|
6053
6077
|
if (!this.status)
|
|
@@ -6070,7 +6094,7 @@ class PdsAvatar {
|
|
|
6070
6094
|
// Percentage is average size of icon in relation to total avatar size
|
|
6071
6095
|
// of all preset sizes found in Figma.
|
|
6072
6096
|
// Used to allow icons to scale to container size
|
|
6073
|
-
return hAsync("pds-icon", { color: "var(--pine-color-brand)", icon: userFilled, size: "33.53%" });
|
|
6097
|
+
return hAsync("pds-icon", { color: "var(--pine-color-brand)", icon: userFilled, size: "33.53%", "aria-hidden": "true" });
|
|
6074
6098
|
};
|
|
6075
6099
|
this.classNames = () => ({
|
|
6076
6100
|
'pds-avatar': true,
|
|
@@ -6102,7 +6126,7 @@ class PdsAvatar {
|
|
|
6102
6126
|
}
|
|
6103
6127
|
}
|
|
6104
6128
|
render() {
|
|
6105
|
-
return (hAsync(Host, { key: '
|
|
6129
|
+
return (hAsync(Host, { key: '0942c1fff94d0d8138143cbddf80aea1d09e34a9', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
|
|
6106
6130
|
}
|
|
6107
6131
|
get el() { return getElement(this); }
|
|
6108
6132
|
static get watchers() { return {
|
|
@@ -6120,6 +6144,7 @@ class PdsAvatar {
|
|
|
6120
6144
|
"$members$": {
|
|
6121
6145
|
"alt": [1],
|
|
6122
6146
|
"badge": [4],
|
|
6147
|
+
"badgeLabel": [1, "badge-label"],
|
|
6123
6148
|
"componentId": [1, "component-id"],
|
|
6124
6149
|
"dropdown": [4],
|
|
6125
6150
|
"image": [1],
|
|
@@ -6582,7 +6607,7 @@ class PdsBox {
|
|
|
6582
6607
|
const normalizedBorder = normalizeColorValue$1(this.borderColor);
|
|
6583
6608
|
const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (normalizedBackground && { '--color-background-box': normalizedBackground })), (normalizedBorder && { '--color-border-box': normalizedBorder })), (this.minHeight && { '--sizing-min-height-box': this.minHeight })), (this.minWidth && { '--sizing-min-width-box': this.minWidth })), (this.flex && !['none', 'grow', 'shrink'].includes(this.flex) && { 'flex': this.flex }));
|
|
6584
6609
|
this.hostKeeper.record(boxClasses, boxInlineStyles);
|
|
6585
|
-
return (hAsync(Host, { key: '
|
|
6610
|
+
return (hAsync(Host, { key: 'c791a8d413b47629c619424bebf9d9c4acc4d9f3', class: boxClasses, style: boxInlineStyles }));
|
|
6586
6611
|
}
|
|
6587
6612
|
get el() { return getElement(this); }
|
|
6588
6613
|
static get style() { return pdsBoxCss(); }
|
|
@@ -6719,8 +6744,52 @@ class PdsBox {
|
|
|
6719
6744
|
}; }
|
|
6720
6745
|
}
|
|
6721
6746
|
|
|
6747
|
+
/**
|
|
6748
|
+
* The ARIA attributes that take ID references, and the element-reflection property each is forwarded
|
|
6749
|
+
* through. An ID on a host can't reach an element inside its shadow root, so a component that
|
|
6750
|
+
* delegates focus forwards the elements the IDs point at instead. A browser without ARIA element
|
|
6751
|
+
* reflection gets none of them.
|
|
6752
|
+
*/
|
|
6753
|
+
const ARIA_REFERENCE_PROPERTIES = {
|
|
6754
|
+
'aria-controls': 'ariaControlsElements',
|
|
6755
|
+
'aria-describedby': 'ariaDescribedByElements',
|
|
6756
|
+
'aria-labelledby': 'ariaLabelledByElements',
|
|
6757
|
+
};
|
|
6758
|
+
const ARIA_REFERENCE_ATTRIBUTES = Object.keys(ARIA_REFERENCE_PROPERTIES);
|
|
6759
|
+
/**
|
|
6760
|
+
* Finds an element by ID in the host's tree, then in each shadow root that contains it, so a host
|
|
6761
|
+
* inside another component's shadow root still reaches, say, a popover portal on document.body.
|
|
6762
|
+
* The closest root wins when an ID repeats.
|
|
6763
|
+
*/
|
|
6764
|
+
const findInAncestorRoots = (host, id) => {
|
|
6765
|
+
let root = host.getRootNode();
|
|
6766
|
+
while (root instanceof ShadowRoot) {
|
|
6767
|
+
const found = root.getElementById(id);
|
|
6768
|
+
if (found)
|
|
6769
|
+
return found;
|
|
6770
|
+
root = root.host.getRootNode();
|
|
6771
|
+
}
|
|
6772
|
+
return root instanceof Document ? root.getElementById(id) : null;
|
|
6773
|
+
};
|
|
6774
|
+
/**
|
|
6775
|
+
* Points the target's reflected ARIA properties at the elements the host's ID-reference attributes
|
|
6776
|
+
* name, or clears them. Run it again whenever the attributes or the referenced elements may have
|
|
6777
|
+
* changed: element references don't follow an ID to a node added or replaced later.
|
|
6778
|
+
*/
|
|
6779
|
+
const forwardAriaReferences = (host, target) => {
|
|
6780
|
+
Object.entries(ARIA_REFERENCE_PROPERTIES).forEach(([attribute, property]) => {
|
|
6781
|
+
var _a, _b;
|
|
6782
|
+
if (!(property in target))
|
|
6783
|
+
return;
|
|
6784
|
+
const ids = (_b = (_a = host.getAttribute(attribute)) === null || _a === void 0 ? void 0 : _a.split(/\s+/).filter(Boolean)) !== null && _b !== void 0 ? _b : [];
|
|
6785
|
+
const referenced = ids.map((id) => findInAncestorRoots(host, id)).filter((el) => el !== null);
|
|
6786
|
+
target[property] = referenced.length > 0 ? referenced : null;
|
|
6787
|
+
});
|
|
6788
|
+
};
|
|
6789
|
+
|
|
6722
6790
|
const pdsButtonCss = () => `:host{--pds-button-background:var(--pds-button-color-background-default);--pds-button-border:var(--pine-border);--pds-button-border-radius:var(--pine-border-radius-full);--pds-button-border-radius-start-end:var(--pine-border-radius-full);--pds-button-border-radius-start-start:var(--pine-border-radius-full);--pds-button-border-radius-end-end:var(--pine-border-radius-full);--pds-button-border-radius-end-start:var(--pine-border-radius-full);--pds-button-min-height:var(--pine-dimension-450);--pds-button-outline-offset:var(--pine-border-width);--pds-button-color-border-default:transparent;--pds-button-color-border-disabled:transparent;--pds-button-color-border-focus:transparent;--pds-button-color-border-hover:transparent;--button-loader-color:var(--pds-button-color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) a,:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([full-width=true]) .pds-button__content{-ms-flex-pack:center;justify-content:center;text-align:center}:host([loading=true]){cursor:wait;pointer-events:none}:host([aria-disabled=true]){pointer-events:none}.pds-button{--pds-loader-color:var(--pds-button-color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--pds-button-background, var(--pds-button-color-background-default));border:var(--pds-button-border);border-color:var(--pds-button-color-border-default);border-radius:var(--pds-button-border-radius);border-end-end-radius:var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));border-end-start-radius:var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));border-start-end-radius:var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));border-start-start-radius:var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pds-button-color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-button-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);position:relative;text-decoration:none}.pds-button pds-icon{color:currentColor;fill:currentColor}.pds-button:hover{background-color:var(--pds-button-color-background-hover);border-color:var(--pds-button-color-border-hover)}.pds-button:focus-visible{border-color:var(--pds-button-color-border-focus);-webkit-box-shadow:var(--pds-button-box-shadow-focus, none);box-shadow:var(--pds-button-box-shadow-focus, none);outline:var(--pds-button-outline-focus, var(--pine-outline-focus));outline-offset:var(--pds-button-outline-offset)}.pds-button:disabled{background-color:var(--pds-button-color-background-disabled);border-color:var(--pds-button-color-border-disabled);color:var(--pds-button-color-text-disabled);pointer-events:none}.pds-button--primary{--pds-button-color-background-default:var(--pine-color-primary);--pds-button-color-background-hover:var(--pine-color-primary-hover);--pds-button-color-background-disabled:var(--pine-color-primary-disabled);--pds-button-color-border-default:var(--pine-color-primary);--pds-button-color-border-hover:var(--pine-color-primary-hover);--pds-button-color-text-default:var(--pine-color-text-primary);--pds-button-color-text-disabled:var(--pine-color-text-primary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--pds-button-color-background-default:var(--pine-color-accent);--pds-button-color-background-hover:var(--pine-color-accent-hover);--pds-button-color-background-disabled:var(--pine-color-accent-disabled);--pds-button-color-border-default:var(--pine-color-accent);--pds-button-color-border-hover:var(--pine-color-accent-hover);--pds-button-color-text-default:var(--pine-color-text-primary);--pds-button-color-text-disabled:var(--pine-color-text-accent-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--pds-button-color-background-default:var(--pine-color-danger);--pds-button-color-background-hover:var(--pine-color-danger-hover);--pds-button-color-background-disabled:var(--pine-color-danger-disabled);--pds-button-color-border-default:var(--pine-color-danger);--pds-button-color-border-hover:var(--pine-color-danger-hover);--pds-button-color-text-default:var(--pine-color-white);--pds-button-color-text-disabled:var(--pine-color-text-danger-disabled);--pds-button-color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-button--secondary,.pds-button--disclosure{--pds-button-color-background-default:var(--pine-color-secondary);--pds-button-color-background-hover:var(--pine-color-secondary-hover);--pds-button-color-background-disabled:var(--pine-color-secondary-disabled);--pds-button-color-border-disabled:var(--pine-color-border-disabled);--pds-button-color-border-focus:var(--pine-color-border);--pds-button-color-border-hover:var(--pine-color-border-hover);--pds-button-color-border-default:var(--pine-color-border);--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-disabled:var(--pine-color-text-secondary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--tertiary{--pds-button-color-background-default:transparent;--pds-button-color-background-hover:var(--pine-color-background-muted);--pds-button-color-background-disabled:transparent;--pds-button-color-border-default:transparent;--pds-button-color-border-hover:var(--pine-color-background-muted);--pds-button-color-border-disabled:transparent;--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-disabled:var(--pine-color-text-secondary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--filter{--pds-button-color-background-default:var(--pine-color-background-container);--pds-button-color-background-hover:var(--pine-color-background-subtle);--pds-button-color-background-disabled:var(--pine-color-white);--pds-button-color-border-default:transparent;--pds-button-color-border-hover:transparent;--pds-button-color-border-focus:transparent;--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-hover:var(--pine-color-text-hover);--pds-button-color-text-disabled:var(--pine-color-text-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary);--pds-button-border-radius:var(--pine-dimension-125);--pds-button-border-radius-start-end:var(--pine-dimension-125);--pds-button-border-radius-start-start:var(--pine-dimension-125);--pds-button-border-radius-end-end:var(--pine-dimension-125);--pds-button-border-radius-end-start:var(--pine-dimension-125);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-button--filter:disabled{background-color:var(--pine-color-background-container)}.pds-button--filter:hover{color:var(--pds-button-color-text-hover)}.pds-button--unstyled{--pds-button-color-background-default:transparent;--pds-button-color-background-hover:transparent;--pds-button-color-background-disabled:transparent;--pds-button-color-text-default:var(--pine-color-text);--button-loader-color:var(--pine-color-text);border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-xs);position:relative;width:100%}.pds-button__icon{display:-ms-inline-flexbox;display:inline-flex}.pds-button__icon--empty{display:none}.pds-button__text{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}.pds-button__icon--hidden,.pds-button__text--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}.pds-button--small{min-height:var(--pine-dimension-400);padding:calc(var(--pine-dimension-2xs) - var(--pine-border-width)) var(--pine-dimension-sm)}.pds-button--micro{font-size:var(--pine-font-size-085);min-height:var(--pine-dimension-300);padding:var(--pine-dimension-025) var(--pine-dimension-xs)}.pds-button--icon-only{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);height:var(--button-dimension);-ms-flex-pack:center;justify-content:center;min-height:var(--button-dimension);min-width:var(--button-dimension);padding:var(--pine-dimension-xs);width:var(--button-dimension)}.pds-button--icon-only .pds-button__content{height:100%;-ms-flex-pack:center;justify-content:center;width:100%}.pds-button--icon-only .pds-button__text--hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-button--icon-only.pds-button--small{height:var(--pine-dimension-400);min-height:var(--pine-dimension-400);min-width:var(--pine-dimension-400);padding:var(--pine-dimension-2xs);width:var(--pine-dimension-400)}.pds-button--icon-only.pds-button--micro{height:var(--pine-dimension-300);min-height:var(--pine-dimension-300);min-width:var(--pine-dimension-300);padding:var(--pine-dimension-3xs);width:var(--pine-dimension-300)}`;
|
|
6723
6791
|
|
|
6792
|
+
const FORWARDED_ARIA_ATTRIBUTES = ['aria-current', 'aria-expanded', 'aria-haspopup', 'aria-label', 'aria-pressed'];
|
|
6724
6793
|
/**
|
|
6725
6794
|
* @part button - Exposes the underlying button (or anchor) element for styling, including custom size, shape, or surface on icon-only placements (e.g. a compact square or inverse icon button).
|
|
6726
6795
|
* @part button-content - Exposes the button content for styling.
|
|
@@ -6779,12 +6848,22 @@ class PdsButton {
|
|
|
6779
6848
|
this.variant = 'primary';
|
|
6780
6849
|
this.hasStartContent = false;
|
|
6781
6850
|
this.hasEndContent = false;
|
|
6782
|
-
this.
|
|
6783
|
-
|
|
6784
|
-
|
|
6785
|
-
|
|
6786
|
-
|
|
6787
|
-
this.
|
|
6851
|
+
this.forwardedAria = {};
|
|
6852
|
+
// Copied rather than moved: frameworks and DOM morphs put host attributes back on every update,
|
|
6853
|
+
// so taking them off the host would fight each one.
|
|
6854
|
+
this.syncHostAria = () => {
|
|
6855
|
+
const forwarded = {};
|
|
6856
|
+
FORWARDED_ARIA_ATTRIBUTES.forEach((name) => (forwarded[name] = this.el.getAttribute(name)));
|
|
6857
|
+
// A new object always re-renders, and frameworks re-set unchanged attributes on every render of their own.
|
|
6858
|
+
if (FORWARDED_ARIA_ATTRIBUTES.some((name) => forwarded[name] !== this.forwardedAria[name])) {
|
|
6859
|
+
this.forwardedAria = forwarded;
|
|
6860
|
+
}
|
|
6861
|
+
this.forwardAriaReferences();
|
|
6862
|
+
};
|
|
6863
|
+
// A hint added after the button, or replaced by a framework or a DOM morph, is picked up by the
|
|
6864
|
+
// time focus reaches the button and it's announced.
|
|
6865
|
+
this.handleFocusIn = () => {
|
|
6866
|
+
this.forwardAriaReferences();
|
|
6788
6867
|
};
|
|
6789
6868
|
this.handleStartSlotChange = (event) => {
|
|
6790
6869
|
this.hasStartContent = event.target.assignedElements({ flatten: true }).length > 0;
|
|
@@ -6821,22 +6900,22 @@ class PdsButton {
|
|
|
6821
6900
|
};
|
|
6822
6901
|
}
|
|
6823
6902
|
connectedCallback() {
|
|
6824
|
-
this.
|
|
6903
|
+
this.syncHostAria();
|
|
6825
6904
|
if (typeof MutationObserver === 'undefined')
|
|
6826
6905
|
return;
|
|
6827
|
-
//
|
|
6828
|
-
this.
|
|
6829
|
-
this.
|
|
6830
|
-
attributeFilter:
|
|
6906
|
+
// Consumers, popovers and menus set these on the host, often after render, but only the inner element is announced.
|
|
6907
|
+
this.hostAriaObserver = new MutationObserver(this.syncHostAria);
|
|
6908
|
+
this.hostAriaObserver.observe(this.el, {
|
|
6909
|
+
attributeFilter: FORWARDED_ARIA_ATTRIBUTES.concat(ARIA_REFERENCE_ATTRIBUTES),
|
|
6831
6910
|
});
|
|
6832
6911
|
}
|
|
6833
6912
|
disconnectedCallback() {
|
|
6834
6913
|
var _a;
|
|
6835
|
-
(_a = this.
|
|
6836
|
-
this.
|
|
6914
|
+
(_a = this.hostAriaObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
6915
|
+
this.hostAriaObserver = undefined;
|
|
6837
6916
|
}
|
|
6838
6917
|
componentDidRender() {
|
|
6839
|
-
this.
|
|
6918
|
+
this.forwardAriaReferences();
|
|
6840
6919
|
}
|
|
6841
6920
|
/**
|
|
6842
6921
|
* Listen for Enter key presses on form inputs to trigger submit
|
|
@@ -6887,25 +6966,9 @@ class PdsButton {
|
|
|
6887
6966
|
}
|
|
6888
6967
|
}
|
|
6889
6968
|
}
|
|
6890
|
-
|
|
6891
|
-
|
|
6892
|
-
|
|
6893
|
-
if (!this.contentEl || !('ariaControlsElements' in this.contentEl))
|
|
6894
|
-
return;
|
|
6895
|
-
const ids = (_b = (_a = this.el.getAttribute('aria-controls')) === null || _a === void 0 ? void 0 : _a.split(/\s+/).filter(Boolean)) !== null && _b !== void 0 ? _b : [];
|
|
6896
|
-
const controlled = ids.map((id) => this.findInAncestorRoots(id)).filter((el) => el !== null);
|
|
6897
|
-
this.contentEl.ariaControlsElements = controlled.length > 0 ? controlled : null;
|
|
6898
|
-
}
|
|
6899
|
-
// A trigger inside another component's shadow root still controls a popover portal on document.body.
|
|
6900
|
-
findInAncestorRoots(id) {
|
|
6901
|
-
let root = this.el.getRootNode();
|
|
6902
|
-
while (root instanceof ShadowRoot) {
|
|
6903
|
-
const found = root.getElementById(id);
|
|
6904
|
-
if (found)
|
|
6905
|
-
return found;
|
|
6906
|
-
root = root.host.getRootNode();
|
|
6907
|
-
}
|
|
6908
|
-
return root instanceof Document ? root.getElementById(id) : null;
|
|
6969
|
+
forwardAriaReferences() {
|
|
6970
|
+
if (this.contentEl)
|
|
6971
|
+
forwardAriaReferences(this.el, this.contentEl);
|
|
6909
6972
|
}
|
|
6910
6973
|
classNames() {
|
|
6911
6974
|
const classNames = ['pds-button'];
|
|
@@ -6951,16 +7014,13 @@ class PdsButton {
|
|
|
6951
7014
|
}
|
|
6952
7015
|
render() {
|
|
6953
7016
|
// Common props for both button and anchor elements
|
|
6954
|
-
const commonProps = {
|
|
6955
|
-
'aria-expanded': this.triggerExpanded,
|
|
6956
|
-
'aria-haspopup': this.triggerHasPopup,
|
|
6957
|
-
class: this.classNames(),
|
|
6958
|
-
part: 'button',
|
|
6959
|
-
ref: (el) => (this.contentEl = el),
|
|
6960
|
-
};
|
|
7017
|
+
const commonProps = Object.assign(Object.assign({}, this.forwardedAria), { class: this.classNames(), part: 'button', ref: (el) => (this.contentEl = el) });
|
|
6961
7018
|
const attributes = () => {
|
|
6962
7019
|
if (this.href) {
|
|
6963
|
-
return Object.assign(Object.assign({}, commonProps), {
|
|
7020
|
+
return Object.assign(Object.assign({}, commonProps), {
|
|
7021
|
+
// ARIA allows aria-pressed only on buttons, so a link never gets it.
|
|
7022
|
+
'aria-pressed': null, download: this.download, href: this.disabled ? null : this.href, target: this.target
|
|
7023
|
+
});
|
|
6964
7024
|
}
|
|
6965
7025
|
return Object.assign(Object.assign({}, commonProps), { 'aria-busy': this.loading ? 'true' : null, 'aria-live': this.loading ? 'polite' : null, 'disabled': this.disabled, 'name': this.name, 'type': this.type, 'value': this.value });
|
|
6966
7026
|
};
|
|
@@ -6968,7 +7028,7 @@ class PdsButton {
|
|
|
6968
7028
|
// Hide text when loading or iconOnly is true
|
|
6969
7029
|
const hideText = this.loading || this.iconOnly;
|
|
6970
7030
|
const content = (hAsync("div", { class: "pds-button__content", part: "button-content" }, this.renderStartContent(), hAsync("span", { class: `pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`, part: "button-text" }, hAsync("slot", null)), this.loading && (hAsync("span", { class: "pds-button__loader" }, hAsync("pds-loader", { "is-loading": true, size: "var(--pine-font-size-body-2xl)", variant: "spinner", exportparts: "loader-svg" }, "Loading..."))), this.renderEndContent()));
|
|
6971
|
-
return (hAsync(Host, Object.assign({ "aria-disabled": this.disabled ? 'true' : null }, (this.componentId != null ? { id: this.componentId } : {}), { onClick: this.handleClick, variant: this.variant }), hAsync(ContentElement, Object.assign({}, attributes()), content)));
|
|
7031
|
+
return (hAsync(Host, Object.assign({ "aria-disabled": this.disabled ? 'true' : null }, (this.componentId != null ? { id: this.componentId } : {}), { onClick: this.handleClick, onFocusin: this.handleFocusIn, variant: this.variant }), hAsync(ContentElement, Object.assign({}, attributes()), content)));
|
|
6972
7032
|
}
|
|
6973
7033
|
static get delegatesFocus() { return true; }
|
|
6974
7034
|
get el() { return getElement(this); }
|
|
@@ -6993,8 +7053,7 @@ class PdsButton {
|
|
|
6993
7053
|
"variant": [1],
|
|
6994
7054
|
"hasStartContent": [32],
|
|
6995
7055
|
"hasEndContent": [32],
|
|
6996
|
-
"
|
|
6997
|
-
"triggerHasPopup": [32]
|
|
7056
|
+
"forwardedAria": [32]
|
|
6998
7057
|
},
|
|
6999
7058
|
"$listeners$": [[16, "keydown", "handleFormKeyDown"]],
|
|
7000
7059
|
"$lazyBundleId$": "-",
|
|
@@ -7066,7 +7125,7 @@ const isSpecTest = () => {
|
|
|
7066
7125
|
|
|
7067
7126
|
const labelCss$5 = () => `:host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
|
|
7068
7127
|
|
|
7069
|
-
const pdsCheckboxCss = () => `:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--pine-color-text-primary);-webkit-border-after:var(--pine-border-width-none);border-block-end:var(--pine-border-width-none);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);-ms-flex:none;flex:none;height:var(--pine-dimension-sm);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:1px solid var(--pine-color-text-primary);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -60%) rotate(43deg);transform:translate(-50%, -60%) rotate(43deg);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-border)}input:disabled+label{cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{outline:var(--pine-outline-focus)}:host-context([dir=rtl]) input:checked::after{-webkit-transform:translate(-50%, -60%) rotate(-43deg);transform:translate(-50%, -60%) rotate(-43deg)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}:host(.has-label-slot) label{-ms-flex-align:center;align-items:center}:host(.has-label-slot) label,:host(.has-label-slot) label>span{min-width:0}:host(.has-label-slot) input{-webkit-margin-before:0;margin-block-start:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-checkbox__message--error{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-checkbox__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}`;
|
|
7128
|
+
const pdsCheckboxCss = () => `:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--pine-color-text-primary);-webkit-border-after:var(--pine-border-width-none);border-block-end:var(--pine-border-width-none);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);-ms-flex:none;flex:none;height:var(--pine-dimension-sm);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:1px solid var(--pine-color-text-primary);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -60%) rotate(43deg);transform:translate(-50%, -60%) rotate(43deg);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-border)}input:disabled+label{cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{outline:var(--pine-outline-focus)}:host-context([dir=rtl]) input:checked::after{-webkit-transform:translate(-50%, -60%) rotate(-43deg);transform:translate(-50%, -60%) rotate(-43deg)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}:host(.has-label-slot) label{-ms-flex-align:center;align-items:center}:host(.has-label-slot) label,:host(.has-label-slot) label>span{min-width:0}:host(.has-label-slot) input{-webkit-margin-before:0;margin-block-start:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-checkbox__message--error{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-checkbox__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}:host(.pds-checkbox--pill){position:relative}:host(.pds-checkbox--pill) label{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);cursor:pointer;font:var(--pine-typography-body);min-block-size:var(--pine-dimension-xl);padding:0 var(--pine-dimension-sm);-webkit-transition:border-color var(--pine-motion-duration-fast) ease;transition:border-color var(--pine-motion-duration-fast) ease}:host(.pds-checkbox--pill) label span{min-width:0;overflow-wrap:anywhere}:host(.pds-checkbox--pill) label:hover{border-color:var(--pine-color-text)}:host(.pds-checkbox--pill) label:has(input:checked){border-color:var(--pine-color-text-active);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active)}:host(.pds-checkbox--pill) label:has(input:focus-visible){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}:host(.pds-checkbox--pill) label:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host(.pds-checkbox--pill) label:has(input:disabled:checked){border-color:var(--pine-color-text-disabled);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled)}@media (forced-colors: active){:host(.pds-checkbox--pill) label:has(input:disabled){border-color:GrayText}:host(.pds-checkbox--pill) label:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}:host(.pds-checkbox--pill) label:has(input:disabled:checked){border-color:GrayText;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}:host(.pds-checkbox--pill) .pds-checkbox__message{-webkit-margin-start:0;margin-inline-start:0}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label{border-color:var(--pine-color-border-danger);color:var(--pine-color-text-active)}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked){border-color:var(--pine-color-border-danger);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger)}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:focus-visible){outline:var(--pine-outline-focus-danger)}@media (forced-colors: active){:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}`;
|
|
7070
7129
|
|
|
7071
7130
|
/**
|
|
7072
7131
|
* @slot label - Content displayed as the checkbox label in place of the `label` text. Clicking it toggles the checkbox.
|
|
@@ -7084,6 +7143,11 @@ class PdsCheckbox {
|
|
|
7084
7143
|
* It determines whether or not the checkbox is checked.
|
|
7085
7144
|
*/
|
|
7086
7145
|
this.checked = false;
|
|
7146
|
+
/**
|
|
7147
|
+
* Sets the style variant of the checkbox. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
|
|
7148
|
+
* @defaultValue default
|
|
7149
|
+
*/
|
|
7150
|
+
this.variant = 'default';
|
|
7087
7151
|
this.handleCheckboxChange = (e) => {
|
|
7088
7152
|
if (this.disabled) {
|
|
7089
7153
|
return;
|
|
@@ -7123,6 +7187,9 @@ class PdsCheckbox {
|
|
|
7123
7187
|
if (this.hasLabelSlot) {
|
|
7124
7188
|
classNames.push('has-label-slot');
|
|
7125
7189
|
}
|
|
7190
|
+
if (this.variant === 'pill') {
|
|
7191
|
+
classNames.push('pds-checkbox--pill');
|
|
7192
|
+
}
|
|
7126
7193
|
return classNames.join(' ');
|
|
7127
7194
|
}
|
|
7128
7195
|
connectedCallback() {
|
|
@@ -7185,9 +7252,9 @@ class PdsCheckbox {
|
|
|
7185
7252
|
render() {
|
|
7186
7253
|
const hostClass = this.classNames();
|
|
7187
7254
|
this.hostKeeper.record(hostClass);
|
|
7188
|
-
return (hAsync(Host, { key: '
|
|
7189
|
-
hAsync("div", { key: '
|
|
7190
|
-
hAsync("div", { key: '
|
|
7255
|
+
return (hAsync(Host, { key: '8e9185653796f250ad425350b9adc1f65fd047c1', class: hostClass }, hAsync("label", { key: 'e17bab4b96b4ffc716e311ecea488a3025e1551c', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '8af9bbc3dbe18409532e95b4b490eab4aabc8762', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput, class: this.variant === 'pill' ? 'visually-hidden' : undefined }, this.inheritedAttributes)), hAsync("span", { key: '1e4d9a826b6b5ec429ae47096d4aede3af43d110', class: this.hideLabel && this.variant !== 'pill' ? 'visually-hidden' : '' }, hAsync("slot", { key: '7b10c7d1e018be4afe019cb56e82a5ec7a638de8', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
|
|
7256
|
+
hAsync("div", { key: 'c5455322eb07bf73805a17c28bf6acc1b5384337', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
7257
|
+
hAsync("div", { key: '0f7c8ec00362c31b1c5bd11c185c6e7bfc177f22', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'f6eccfaac90505903aee379f2fc28b5735d8c4a9', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
|
|
7191
7258
|
}
|
|
7192
7259
|
static get formAssociated() { return true; }
|
|
7193
7260
|
get el() { return getElement(this); }
|
|
@@ -7215,6 +7282,7 @@ class PdsCheckbox {
|
|
|
7215
7282
|
"name": [1],
|
|
7216
7283
|
"required": [4],
|
|
7217
7284
|
"value": [1],
|
|
7285
|
+
"variant": [1],
|
|
7218
7286
|
"hasLabelSlot": [32]
|
|
7219
7287
|
},
|
|
7220
7288
|
"$listeners$": undefined,
|
|
@@ -8986,12 +9054,24 @@ function injectStyles() {
|
|
|
8986
9054
|
function isOverflowing(el) {
|
|
8987
9055
|
return el.scrollWidth > el.clientWidth;
|
|
8988
9056
|
}
|
|
9057
|
+
/**
|
|
9058
|
+
* Engines without `:focus-visible` throw on the selector, so there every
|
|
9059
|
+
* focus counts as visible rather than none.
|
|
9060
|
+
*/
|
|
9061
|
+
function isFocusVisible(el) {
|
|
9062
|
+
try {
|
|
9063
|
+
return el.matches(':focus-visible');
|
|
9064
|
+
}
|
|
9065
|
+
catch (_a) {
|
|
9066
|
+
return true;
|
|
9067
|
+
}
|
|
9068
|
+
}
|
|
8989
9069
|
/**
|
|
8990
9070
|
* Sets up automatic tooltip behavior for a truncated element.
|
|
8991
9071
|
*
|
|
8992
|
-
* When the element's text overflows, hovering
|
|
8993
|
-
* will display a tooltip showing the full text content. The
|
|
8994
|
-
* rendered as a portal on document.body and positioned with Floating UI.
|
|
9072
|
+
* When the element's text overflows, hovering the host element or giving it
|
|
9073
|
+
* keyboard focus will display a tooltip showing the full text content. The
|
|
9074
|
+
* tooltip is rendered as a portal on document.body and positioned with Floating UI.
|
|
8995
9075
|
*
|
|
8996
9076
|
* Also owns the element's `tabindex` while it is clipped — see syncTabIndex.
|
|
8997
9077
|
*
|
|
@@ -9182,18 +9262,30 @@ function setupTruncationTooltip(options) {
|
|
|
9182
9262
|
isHoveringPortal = false;
|
|
9183
9263
|
scheduleHide();
|
|
9184
9264
|
}
|
|
9185
|
-
|
|
9265
|
+
// Keyboard focus only: focus from a click would pin the tooltip open after the pointer leaves.
|
|
9266
|
+
// Events from inside a shadow root arrive retargeted to its host, so test the innermost target.
|
|
9267
|
+
function showForVisibleFocus(event) {
|
|
9268
|
+
if (!isFocusVisible(event.composedPath()[0]))
|
|
9269
|
+
return;
|
|
9186
9270
|
isFocused = true;
|
|
9187
9271
|
showTooltip();
|
|
9188
9272
|
}
|
|
9273
|
+
// A key press after a click makes focus visible in place, with no new focusin. keyup, not
|
|
9274
|
+
// keydown, so Tab's focus move lands first; Escape asks to dismiss, never to reveal.
|
|
9275
|
+
function handleKeyUp(event) {
|
|
9276
|
+
if (isFocused || event.key === 'Escape')
|
|
9277
|
+
return;
|
|
9278
|
+
showForVisibleFocus(event);
|
|
9279
|
+
}
|
|
9189
9280
|
function handleFocusOut() {
|
|
9190
9281
|
isFocused = false;
|
|
9191
9282
|
scheduleHide();
|
|
9192
9283
|
}
|
|
9193
9284
|
hostEl.addEventListener('mouseenter', handleMouseEnter);
|
|
9194
9285
|
hostEl.addEventListener('mouseleave', handleMouseLeave);
|
|
9195
|
-
focusEl.addEventListener('focusin',
|
|
9286
|
+
focusEl.addEventListener('focusin', showForVisibleFocus);
|
|
9196
9287
|
focusEl.addEventListener('focusout', handleFocusOut);
|
|
9288
|
+
focusEl.addEventListener('keyup', handleKeyUp);
|
|
9197
9289
|
// Return cleanup function
|
|
9198
9290
|
return () => {
|
|
9199
9291
|
disposed = true;
|
|
@@ -9213,8 +9305,9 @@ function setupTruncationTooltip(options) {
|
|
|
9213
9305
|
}
|
|
9214
9306
|
hostEl.removeEventListener('mouseenter', handleMouseEnter);
|
|
9215
9307
|
hostEl.removeEventListener('mouseleave', handleMouseLeave);
|
|
9216
|
-
focusEl.removeEventListener('focusin',
|
|
9308
|
+
focusEl.removeEventListener('focusin', showForVisibleFocus);
|
|
9217
9309
|
focusEl.removeEventListener('focusout', handleFocusOut);
|
|
9310
|
+
focusEl.removeEventListener('keyup', handleKeyUp);
|
|
9218
9311
|
removePortal();
|
|
9219
9312
|
};
|
|
9220
9313
|
}
|
|
@@ -9456,13 +9549,13 @@ class PdsChip {
|
|
|
9456
9549
|
'aria-label': this.dismissLabel,
|
|
9457
9550
|
};
|
|
9458
9551
|
};
|
|
9459
|
-
return (hAsync(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), hAsync("pds-icon", { icon: remove, size: this.iconSize })));
|
|
9552
|
+
return (hAsync(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), hAsync("pds-icon", { icon: remove, size: this.iconSize, "aria-hidden": "true" })));
|
|
9460
9553
|
}
|
|
9461
9554
|
render() {
|
|
9462
9555
|
const hostClass = this.classNames();
|
|
9463
9556
|
const hostStyles = this.hostStyles;
|
|
9464
9557
|
this.hostKeeper.record(hostClass, hostStyles);
|
|
9465
|
-
return (hAsync(Host, { key: '
|
|
9558
|
+
return (hAsync(Host, { key: '0e67ea3700e8a8e1ad3049b6eafced6934262335', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
|
|
9466
9559
|
}
|
|
9467
9560
|
get el() { return getElement(this); }
|
|
9468
9561
|
static get style() { return pdsChipTokensCss() + pdsChipCss(); }
|
|
@@ -11172,7 +11265,7 @@ class FlyoutController {
|
|
|
11172
11265
|
}
|
|
11173
11266
|
}
|
|
11174
11267
|
|
|
11175
|
-
const pdsComboboxCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-950)}.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled){border-color:var(--pine-color-border-danger)}.pds-combobox__input.pds-combobox__input--invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:calc(var(--pine-z-index-raised) - 1)}.pds-combobox__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error pds-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-combobox__listbox{background:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-background-muted)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-background-muted)}.pds-combobox__option--disabled,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger,.pds-combobox__group-back--disabled>.pds-combobox__group-back-trigger,.pds-combobox__group--disabled>.pds-combobox__group-label{color:var(--pine-color-text-disabled)}.pds-combobox__option--disabled{cursor:not-allowed}.pds-combobox__option--disabled .pds-combobox__option-chip,.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper{opacity:0.5}.pds-combobox__option-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__option-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group{list-style:none;-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150)}.pds-combobox__group:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group-list{list-style:none;margin:0;padding:0}.pds-combobox__listbox--grouped .pds-combobox__group-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs)}.pds-combobox__group-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__group-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__group-row{list-style:none;position:relative}.pds-combobox__group-row-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.pds-combobox__group-row-trigger,.pds-combobox__group-row--has-selection>.pds-combobox__group-row-trigger,.pds-combobox__group-row--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-back--highlighted>.pds-combobox__group-row-trigger{background:var(--pine-color-background-muted)}.pds-combobox__listbox--pointer-hover .pds-combobox__group-row-trigger:hover{background:var(--pine-color-background-muted)}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out{overflow-x:hidden}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out:dir(rtl){--pds-combobox-drill-from:var(--pine-dimension-sm)}.pds-combobox__listbox--drill-out,.pds-combobox__listbox--drill-in:dir(rtl){--pds-combobox-drill-from:calc(var(--pine-dimension-sm) * -1)}.pds-combobox__listbox--drill-in .pds-combobox__drill-in-options>li,.pds-combobox__listbox--drill-in .pds-combobox__group-back-trigger,.pds-combobox__listbox--drill-out>li{-webkit-animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}@keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__group-row-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0}.pds-combobox__group-row-caret{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--grouped,.pds-combobox__flyout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);padding:var(--pine-dimension-2xs)}.pds-combobox__flyout{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;overflow-y:auto;position:fixed;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1}.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:0}.pds-combobox__listbox-options{-ms-flex:1;flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-combobox__listbox-options.pds-combobox__listbox--grouped{padding:var(--pine-dimension-2xs)}.pds-combobox__panel-search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-sm)}.pds-combobox__panel-search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:0;flex-shrink:0}.pds-combobox__panel-search:focus-within{border-block-end-color:var(--pine-color-border-active)}.pds-combobox__panel-search-input{background:transparent;border:0;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:0;outline:none;padding:0}.pds-combobox__panel-search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none}.pds-combobox__group-back-trigger{-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in.pds-combobox__listbox--grouped{-webkit-padding-before:0;padding-block-start:0}.pds-combobox__listbox-options--drilled-in:focus{outline:none}.pds-combobox__listbox-options--drilled-in:focus .pds-combobox__group-back-trigger{border-block-end-color:var(--pine-color-border-active)}:where(.pds-combobox__listbox-options--drilled-in) .pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay);-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);border-radius:0;color:var(--pine-color-text-strong);font:var(--pine-typography-body);inset-block-start:0;letter-spacing:var(--pine-letter-spacing);margin-inline:calc(var(--pine-dimension-2xs) * -1);padding:var(--pine-dimension-sm);position:-webkit-sticky;position:sticky;z-index:1}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none;margin:0;padding:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}:host(.pds-combobox-dropdown-portal) .pds-combobox__listbox{position:fixed;z-index:var(--pine-z-index-priority)}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;text-align:start}.pds-combobox__button-trigger-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__button-trigger-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150)}.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder{color:var(--pine-color-text-muted)}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:"";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}`;
|
|
11268
|
+
const pdsComboboxCss = () => `:host{display:block}:host([truncate]){display:block;min-width:0}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-950)}.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled){border-color:var(--pine-color-border-danger)}.pds-combobox__input.pds-combobox__input--invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:calc(var(--pine-z-index-raised) - 1)}.pds-combobox__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error pds-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-combobox__listbox{background:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-background-muted)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-background-muted)}.pds-combobox__option--disabled,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger,.pds-combobox__group-back--disabled>.pds-combobox__group-back-trigger,.pds-combobox__group--disabled>.pds-combobox__group-label{color:var(--pine-color-text-disabled)}.pds-combobox__option--disabled{cursor:not-allowed}.pds-combobox__option--disabled .pds-combobox__option-chip,.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper{opacity:0.5}.pds-combobox__option-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__option-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--truncate .pds-combobox__option-label{-ms-flex:1 1 auto;flex:1 1 auto;overflow-wrap:normal}.pds-combobox__listbox--truncate .pds-combobox__option-check{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group{list-style:none;-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150)}.pds-combobox__group:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group-list{list-style:none;margin:0;padding:0}.pds-combobox__listbox--grouped .pds-combobox__group-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs)}.pds-combobox__group-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__group-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__group-row{list-style:none;position:relative}.pds-combobox__group-row-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.pds-combobox__group-row-trigger,.pds-combobox__group-row--has-selection>.pds-combobox__group-row-trigger,.pds-combobox__group-row--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-back--highlighted>.pds-combobox__group-row-trigger{background:var(--pine-color-background-muted)}.pds-combobox__listbox--pointer-hover .pds-combobox__group-row-trigger:hover{background:var(--pine-color-background-muted)}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out{overflow-x:hidden}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out:dir(rtl){--pds-combobox-drill-from:var(--pine-dimension-sm)}.pds-combobox__listbox--drill-out,.pds-combobox__listbox--drill-in:dir(rtl){--pds-combobox-drill-from:calc(var(--pine-dimension-sm) * -1)}.pds-combobox__listbox--drill-in .pds-combobox__drill-in-options>li,.pds-combobox__listbox--drill-in .pds-combobox__group-back-trigger,.pds-combobox__listbox--drill-out>li{-webkit-animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}@keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__group-row-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0}.pds-combobox__group-row-caret{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--grouped,.pds-combobox__flyout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);padding:var(--pine-dimension-2xs)}.pds-combobox__flyout{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;overflow-y:auto;position:fixed;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1}.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:0}.pds-combobox__listbox-options{-ms-flex:1;flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-combobox__listbox-options.pds-combobox__listbox--grouped{padding:var(--pine-dimension-2xs)}.pds-combobox__panel-search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-sm)}.pds-combobox__panel-search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:0;flex-shrink:0}.pds-combobox__panel-search:focus-within{border-block-end-color:var(--pine-color-border-active)}.pds-combobox__panel-search-input{background:transparent;border:0;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:0;outline:none;padding:0}.pds-combobox__panel-search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none}.pds-combobox__group-back-trigger{-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in.pds-combobox__listbox--grouped{-webkit-padding-before:0;padding-block-start:0}.pds-combobox__listbox-options--drilled-in:focus{outline:none}.pds-combobox__listbox-options--drilled-in:focus .pds-combobox__group-back-trigger{border-block-end-color:var(--pine-color-border-active)}:where(.pds-combobox__listbox-options--drilled-in) .pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay);-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);border-radius:0;color:var(--pine-color-text-strong);font:var(--pine-typography-body);inset-block-start:0;letter-spacing:var(--pine-letter-spacing);margin-inline:calc(var(--pine-dimension-2xs) * -1);padding:var(--pine-dimension-sm);position:-webkit-sticky;position:sticky;z-index:1}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none;margin:0;padding:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}:host(.pds-combobox-dropdown-portal) .pds-combobox__listbox{position:fixed;z-index:var(--pine-z-index-priority)}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;text-align:start}.pds-combobox__button-trigger-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__button-trigger-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger--truncate{max-width:100%}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-label{overflow-wrap:normal}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-chevron{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger-text,.pds-combobox__listbox--truncate .pds-combobox__option-text{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150)}.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder{color:var(--pine-color-text-muted)}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:"";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}`;
|
|
11176
11269
|
|
|
11177
11270
|
/**
|
|
11178
11271
|
* @slot option - Option elements for the combobox dropdown
|
|
@@ -11313,6 +11406,13 @@ class PdsCombobox {
|
|
|
11313
11406
|
* @default 'pill'
|
|
11314
11407
|
*/
|
|
11315
11408
|
this.triggerShape = 'pill';
|
|
11409
|
+
/**
|
|
11410
|
+
* Determines whether the button trigger's label and the option labels should truncate and display with an ellipsis.
|
|
11411
|
+
* When a label overflows, a `title` showing the full label will appear on hover.
|
|
11412
|
+
* Chip options, custom layouts and group rows aren't affected.
|
|
11413
|
+
* @defaultValue false
|
|
11414
|
+
*/
|
|
11415
|
+
this.truncate = false;
|
|
11316
11416
|
/**
|
|
11317
11417
|
* The sentiment for the chip trigger. Matches Pine chip sentiments.
|
|
11318
11418
|
* @default 'neutral'
|
|
@@ -11609,10 +11709,15 @@ class PdsCombobox {
|
|
|
11609
11709
|
if (this.usesPanelSearch)
|
|
11610
11710
|
this.restoreFocusToTrigger();
|
|
11611
11711
|
};
|
|
11712
|
+
this.onButtonTriggerMouseEnter = (event) => {
|
|
11713
|
+
this.syncTitle(event.currentTarget, '.pds-combobox__button-trigger-text');
|
|
11714
|
+
};
|
|
11612
11715
|
// Event handler for mouse enter on option
|
|
11613
11716
|
this.onOptionMouseEnter = (event) => {
|
|
11614
|
-
const
|
|
11615
|
-
this.
|
|
11717
|
+
const row = event.currentTarget;
|
|
11718
|
+
if (this.truncate)
|
|
11719
|
+
this.syncTitle(row, '.pds-combobox__option-text');
|
|
11720
|
+
this.highlightedIndex = Number(row.getAttribute('data-option-index'));
|
|
11616
11721
|
this.keyboardNavigating = false;
|
|
11617
11722
|
};
|
|
11618
11723
|
this.onGroupRowMouseEnter = (event) => {
|
|
@@ -11902,6 +12007,19 @@ class PdsCombobox {
|
|
|
11902
12007
|
this.focusPanel(panelFocusEl);
|
|
11903
12008
|
}
|
|
11904
12009
|
}
|
|
12010
|
+
// A `title` only while the text is cut, measured on hover. On the span, not the option or trigger,
|
|
12011
|
+
// so it isn't read again as their description.
|
|
12012
|
+
syncTitle(el, selector) {
|
|
12013
|
+
const text = el.querySelector(selector);
|
|
12014
|
+
if (!text)
|
|
12015
|
+
return;
|
|
12016
|
+
if (text.scrollWidth > text.clientWidth) {
|
|
12017
|
+
text.title = text.textContent || '';
|
|
12018
|
+
}
|
|
12019
|
+
else {
|
|
12020
|
+
text.removeAttribute('title');
|
|
12021
|
+
}
|
|
12022
|
+
}
|
|
11905
12023
|
/**
|
|
11906
12024
|
* Scrolls just enough to show `el`, as `scrollIntoView({ block: 'nearest' })` does. In the drill-in
|
|
11907
12025
|
* panel it scrolls the list alone, and never sideways: while a drill-in slide offsets a row past
|
|
@@ -13303,6 +13421,7 @@ class PdsCombobox {
|
|
|
13303
13421
|
'pds-combobox__listbox--drill-in': this.drillDirection === 'in',
|
|
13304
13422
|
'pds-combobox__listbox--drill-out': this.drillDirection === 'out',
|
|
13305
13423
|
'pds-combobox__listbox--pointer-hover': this.pointerCanHover,
|
|
13424
|
+
'pds-combobox__listbox--truncate': this.truncate,
|
|
13306
13425
|
}, onAnimationEnd: this.onDrillAnimationEnd, onPointerMove: this.onPanelPointer, onPointerDown: this.onPanelPointer, role: this.showsGroupedPanel ? 'tree' : 'listbox', id: this.listboxId, "aria-label": this.label || 'Options', "aria-multiselectable": "false",
|
|
13307
13426
|
// Focusable but out of the tab order with panel search, so it can take focus when a
|
|
13308
13427
|
// drilled-in group hides the field. Dropping it while focused would blur the list and close.
|
|
@@ -13469,14 +13588,15 @@ class PdsCombobox {
|
|
|
13469
13588
|
'pds-combobox__option--layout': isLayout,
|
|
13470
13589
|
'pds-combobox__option--chip': isChip,
|
|
13471
13590
|
'pds-combobox__option--disabled': isDisabled,
|
|
13472
|
-
}, "data-option-index": index, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (hAsync("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : (this.renderOptionLabel(option)), isSelected && hAsync("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
|
|
13591
|
+
}, "data-option-index": index, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (hAsync("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : (this.renderOptionLabel(option)), isSelected && hAsync("pds-icon", { icon: "check", size: "regular", "aria-hidden": "true", class: "pds-combobox__option-check" })));
|
|
13473
13592
|
}
|
|
13474
13593
|
/** An option's text, after its `data-icon` when it has one. */
|
|
13475
13594
|
renderOptionLabel(option) {
|
|
13476
13595
|
const icon = optionIconOf(option);
|
|
13596
|
+
const label = this.truncate ? (hAsync("span", { key: this.getOptionLabel(option), class: "pds-combobox__option-text" }, this.getOptionLabel(option))) : this.getOptionLabel(option);
|
|
13477
13597
|
if (icon === null)
|
|
13478
|
-
return
|
|
13479
|
-
return (hAsync("span", { class: "pds-combobox__option-label" }, hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }),
|
|
13598
|
+
return label;
|
|
13599
|
+
return (hAsync("span", { class: "pds-combobox__option-label" }, hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }), label));
|
|
13480
13600
|
}
|
|
13481
13601
|
/** The grouped panel's rows, in the order the panel draws them and the keyboard moves through. */
|
|
13482
13602
|
panelEntries() {
|
|
@@ -13564,7 +13684,9 @@ class PdsCombobox {
|
|
|
13564
13684
|
'pds-combobox__button-trigger-label--with-icon': icon !== null,
|
|
13565
13685
|
} }, icon !== null && (
|
|
13566
13686
|
// `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
|
|
13567
|
-
hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.
|
|
13687
|
+
hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.truncate ? (
|
|
13688
|
+
// Keyed so a new label drops a stale `title`.
|
|
13689
|
+
hAsync("span", { key: this.selectedLabel || this.placeholder, class: "pds-combobox__button-trigger-text" }, this.selectedLabel || this.placeholder)) : (this.selectedLabel || this.placeholder)));
|
|
13568
13690
|
}
|
|
13569
13691
|
/** The selection's icon for the button trigger: the option's own, or else its group's. */
|
|
13570
13692
|
get selectedIcon() {
|
|
@@ -13668,7 +13790,7 @@ class PdsCombobox {
|
|
|
13668
13790
|
}
|
|
13669
13791
|
// Helper method to render chip trigger default content
|
|
13670
13792
|
renderChipTriggerDefaultContent() {
|
|
13671
|
-
return (hAsync("span", { class: "pds-combobox__chip-trigger-label" }, this.selectedChipIcon && hAsync("pds-icon", { icon: this.selectedChipIcon, class: "pds-combobox__chip-trigger-icon" }), this.selectedLabel || this.placeholder));
|
|
13793
|
+
return (hAsync("span", { class: "pds-combobox__chip-trigger-label" }, this.selectedChipIcon && hAsync("pds-icon", { icon: this.selectedChipIcon, "aria-hidden": "true", class: "pds-combobox__chip-trigger-icon" }), this.selectedLabel || this.placeholder));
|
|
13672
13794
|
}
|
|
13673
13795
|
// Helper method to render option as chip (new automatic approach)
|
|
13674
13796
|
renderOptionChip(option) {
|
|
@@ -13696,16 +13818,17 @@ class PdsCombobox {
|
|
|
13696
13818
|
'pds-combobox__button-trigger',
|
|
13697
13819
|
`pds-combobox__button-trigger--${this.triggerVariant}`,
|
|
13698
13820
|
this.triggerShape === 'input' && 'pds-combobox__button-trigger--input-shape',
|
|
13821
|
+
this.truncate && 'pds-combobox__button-trigger--truncate',
|
|
13699
13822
|
]
|
|
13700
13823
|
.filter(Boolean)
|
|
13701
13824
|
.join(' ');
|
|
13702
|
-
return (hAsync(Host, { key: '
|
|
13825
|
+
return (hAsync(Host, { key: '2786062989bc490e87ea382b5c80f7e2758c1a8a', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: 'b3b272a99528d725a52d3092a3650efacaf54b34', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (hAsync("label", { key: '8e2e0021e1f60cddfe41b918406c7d76659fbff1', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (hAsync("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, hAsync("input", { ref: el => {
|
|
13703
13826
|
this.inputEl = el;
|
|
13704
13827
|
this.triggerEl = el;
|
|
13705
13828
|
}, class: {
|
|
13706
13829
|
'pds-combobox__input': true,
|
|
13707
13830
|
'pds-combobox__input--invalid': this.isInvalid(),
|
|
13708
|
-
}, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: '
|
|
13831
|
+
}, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, onMouseEnter: this.truncate ? this.onButtonTriggerMouseEnter : undefined, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: '2216779564fa3f4efd1b4d0972ac045fa0851078', style: { display: 'none' } }, hAsync("slot", { key: '77b344d7301193f435949cbe2be2b28e1d7f6602', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
|
|
13709
13832
|
hAsync("span", { key: "drill-status", class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : ''),
|
|
13710
13833
|
// Its own region: sharing one, revealing a row then opening it would leave the text the
|
|
13711
13834
|
// same, and opening the group would go unannounced.
|
|
@@ -13776,6 +13899,7 @@ class PdsCombobox {
|
|
|
13776
13899
|
"triggerWidth": [1, "trigger-width"],
|
|
13777
13900
|
"triggerVariant": [1, "trigger-variant"],
|
|
13778
13901
|
"triggerShape": [1, "trigger-shape"],
|
|
13902
|
+
"truncate": [516],
|
|
13779
13903
|
"chipSentiment": [1, "chip-sentiment"],
|
|
13780
13904
|
"chipLarge": [4, "chip-large"],
|
|
13781
13905
|
"chipIcon": [1, "chip-icon"],
|
|
@@ -13812,7 +13936,7 @@ class PdsCombobox {
|
|
|
13812
13936
|
},
|
|
13813
13937
|
"$listeners$": undefined,
|
|
13814
13938
|
"$lazyBundleId$": "-",
|
|
13815
|
-
"$attrsToReflect$": [["name", "name"]]
|
|
13939
|
+
"$attrsToReflect$": [["name", "name"], ["truncate", "truncate"]]
|
|
13816
13940
|
}; }
|
|
13817
13941
|
}
|
|
13818
13942
|
|
|
@@ -13845,7 +13969,7 @@ class PdsContainer {
|
|
|
13845
13969
|
hostStyle['--pine-container-max-width'] = customSize;
|
|
13846
13970
|
if (!this.centered)
|
|
13847
13971
|
hostStyle['margin-inline'] = '0';
|
|
13848
|
-
return (hAsync(Host, { key: '
|
|
13972
|
+
return (hAsync(Host, { key: '8a01369c4d1817dd083b1ac714ff7c02920f817e', class: { [`pds-container--${this.size}`]: isNamed }, style: Object.keys(hostStyle).length ? hostStyle : undefined }, hAsync(Tag, { key: '7428cb0040896dc11004065cf91ae9d3c3a99c49', part: "container" }, hAsync("slot", { key: '5a5b5bbc87c03afc23f1c9a0523fced8c0795efb' }))));
|
|
13849
13973
|
}
|
|
13850
13974
|
static get style() { return pdsContainerCss(); }
|
|
13851
13975
|
static get cmpMeta() { return {
|
|
@@ -13970,7 +14094,7 @@ class PdsCopytext {
|
|
|
13970
14094
|
render() {
|
|
13971
14095
|
const hostClass = this.classNames();
|
|
13972
14096
|
this.hostKeeper.record(hostClass);
|
|
13973
|
-
return (hAsync(Host, { key: '
|
|
14097
|
+
return (hAsync(Host, { key: '35d74eaecedd432f7852545522f9ce72396f9ab9', class: hostClass, id: this.componentId }, hAsync("pds-button", { key: '9550ce2fb21166e9726b08b5928036244c7b729e', type: "button", variant: "unstyled", onClick: this.handleClick }, hAsync("span", { key: '47af45448759c911ca4ca03d0158088289b622e0', ref: (el) => this.valueSpanEl = el }, this.value), hAsync("pds-icon", { key: '3ddab7c3e7063843cd606ffb19481cae3792db43', "aria-hidden": "true", icon: copy, size: "16px" }))));
|
|
13974
14098
|
}
|
|
13975
14099
|
get el() { return getElement(this); }
|
|
13976
14100
|
static get watchers() { return {
|
|
@@ -15972,14 +16096,14 @@ class PdsDatepicker {
|
|
|
15972
16096
|
}
|
|
15973
16097
|
render() {
|
|
15974
16098
|
const locale = this.resolvedLocale;
|
|
15975
|
-
return (hAsync(Host, { key: '
|
|
16099
|
+
return (hAsync(Host, { key: 'a761f0ca6eeedcac3e4bd90760aa9781cd37dcdc', class: { 'pds-datepicker--range': this.range, 'pds-datepicker--time': this.timePicker }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, hAsync("pds-input", { key: '2eb04f9fd4e2f7a2437145d250c629c2cc8a0bf6', ref: (el) => (this.inputEl = el), componentId: this.baseId, label: this.label, hideLabel: this.hideLabel, helperMessage: this.helperMessage, errorMessage: this.errorMessage, invalid: this.invalid || !!this.textError || !!this.valueError(), disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.fieldPlaceholder, fullWidth: this.fullWidth, autocomplete: "off", value: this.text, onClick: this.onFieldClick, onPdsInput: this.onTextInput, onPdsChange: this.onTextChange, onPdsKeyDown: this.onTextKeyDown, onPdsFocus: this.stopInnerEvent, onPdsBlur: this.stopInnerEvent }, this.clearable && !!this.value && this.isInteractive && (hAsync("button", {
|
|
15976
16100
|
// Keyed, as is the calendar button: when Clear appears after a pick, the focused
|
|
15977
16101
|
// calendar button must stay that button rather than be reused as Clear.
|
|
15978
16102
|
key: "clear", slot: "suffix", type: "button", class: "pds-datepicker__clear", ref: (el) => (this.clearEl = el), "aria-label": this.label ? `${this.clearLabel} ${this.label}` : this.clearLabel,
|
|
15979
16103
|
// Out of the tab order, as a native search field's clear button is: Tab from a field
|
|
15980
16104
|
// just emptied would land on it as the change removes it, dropping focus to the page.
|
|
15981
16105
|
tabindex: "-1", onMouseDown: this.onClearMouseDown, onClick: this.onClearClick
|
|
15982
|
-
}, hAsync("pds-icon", { key: '
|
|
16106
|
+
}, hAsync("pds-icon", { key: '98c325fbba8ea78b2d409bc77099db3206738508', icon: remove, "aria-hidden": "true" }))), hAsync("button", { key: "trigger", slot: "suffix", type: "button", class: "pds-datepicker__trigger", ref: (el) => (this.triggerEl = el), "aria-label": this.triggerAccessibleName(locale), "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', disabled: !this.isInteractive, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, hAsync("pds-icon", { key: 'cb8483febe1b485058b7bb4271b749981a7747a1', icon: calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
|
|
15983
16107
|
}
|
|
15984
16108
|
static get formAssociated() { return true; }
|
|
15985
16109
|
get el() { return getElement(this); }
|
|
@@ -16121,7 +16245,7 @@ class PdsDivider {
|
|
|
16121
16245
|
return classNames.join(' ');
|
|
16122
16246
|
}
|
|
16123
16247
|
render() {
|
|
16124
|
-
return (hAsync(Host, { key: '
|
|
16248
|
+
return (hAsync(Host, { key: '072cc8552bd33c4a00d216f15a5a848cfc97fd92', id: this.componentId }, this.hasLabel ? (hAsync("div", { class: this.classNames(), role: "separator", "aria-label": this.label }, hAsync("span", { class: "pds-divider__label", part: "label", "aria-hidden": "true" }, this.label))) : (hAsync("hr", { class: this.classNames() }))));
|
|
16125
16249
|
}
|
|
16126
16250
|
static get style() { return pdsDividerCss(); }
|
|
16127
16251
|
static get cmpMeta() { return {
|
|
@@ -16317,11 +16441,11 @@ class PdsDrawer {
|
|
|
16317
16441
|
this.open = false;
|
|
16318
16442
|
}
|
|
16319
16443
|
render() {
|
|
16320
|
-
return (hAsync(Host, { key: '
|
|
16444
|
+
return (hAsync(Host, { key: '7cf13256457914e48e8fde422832a2a52ee0c13b', class: {
|
|
16321
16445
|
'pds-drawer': true,
|
|
16322
16446
|
[`pds-drawer--${this.side}`]: true,
|
|
16323
16447
|
[`pds-drawer--${this.size}`]: true,
|
|
16324
|
-
} }, hAsync("pds-modal", { key: '
|
|
16448
|
+
} }, hAsync("pds-modal", { key: 'd4ceb5b4c0b03930aa3d001ae1bbbfbf449bde33', class: { 'pds-drawer__modal': true, 'pds-drawer__modal--modal': this.modal }, ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: !this.modal, backdropDismiss: this.lightDismiss, disableInitialFocus: !this.modal && this.initialFocus === 'none' }, hAsync("slot", { key: '41bfdea76282b333ca6950048999cb9d94e69438' }))));
|
|
16325
16449
|
}
|
|
16326
16450
|
get el() { return getElement(this); }
|
|
16327
16451
|
static get style() { return pdsDrawerCss(); }
|
|
@@ -16362,7 +16486,7 @@ class PdsDrawerContent {
|
|
|
16362
16486
|
unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
|
|
16363
16487
|
}
|
|
16364
16488
|
render() {
|
|
16365
|
-
return (hAsync("div", { key: '
|
|
16489
|
+
return (hAsync("div", { key: 'b15b087506c1292f9d67e531e8d935069749c09d', class: "pds-drawer-content" }, hAsync("slot", { key: '9c60ca75c7905e7e994f9c41eee213b962afb833' })));
|
|
16366
16490
|
}
|
|
16367
16491
|
get el() { return getElement(this); }
|
|
16368
16492
|
static get style() { return pdsDrawerContentCss(); }
|
|
@@ -16390,7 +16514,7 @@ class PdsDrawerFooter {
|
|
|
16390
16514
|
unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
|
|
16391
16515
|
}
|
|
16392
16516
|
render() {
|
|
16393
|
-
return (hAsync("footer", { key: '
|
|
16517
|
+
return (hAsync("footer", { key: 'a4eec0aff617c605b94f8d3b9ec1e2d98cded6fb', class: "pds-drawer__footer" }, hAsync("slot", { key: '6dc379c940e37edfd05d99728be9dff58ca1d717' })));
|
|
16394
16518
|
}
|
|
16395
16519
|
get el() { return getElement(this); }
|
|
16396
16520
|
static get style() { return pdsDrawerFooterCss(); }
|
|
@@ -16418,7 +16542,7 @@ class PdsDrawerHeader {
|
|
|
16418
16542
|
unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
|
|
16419
16543
|
}
|
|
16420
16544
|
render() {
|
|
16421
|
-
return (hAsync("header", { key: '
|
|
16545
|
+
return (hAsync("header", { key: '6b9338e5dbf7a7e580c11b28c95ca53693528382', class: "pds-drawer__header" }, hAsync("slot", { key: '0990fbcf94c0c438b98cf1e8945f1e2fd9aa33dc' })));
|
|
16422
16546
|
}
|
|
16423
16547
|
get el() { return getElement(this); }
|
|
16424
16548
|
static get style() { return pdsDrawerHeaderCss(); }
|
|
@@ -16634,11 +16758,11 @@ class PdsDropdownMenu {
|
|
|
16634
16758
|
if (tagName === 'pds-dropdown-menu-item') {
|
|
16635
16759
|
// For pds-dropdown-menu-item, focus the inner element
|
|
16636
16760
|
const menuItem = item;
|
|
16637
|
-
const
|
|
16761
|
+
const innerControl = (_a = menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [role="menuitem"]');
|
|
16638
16762
|
const innerLink = ((_d = (_c = (_b = menuItem.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('pds-link')) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('a'))
|
|
16639
16763
|
|| ((_e = menuItem.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('a'));
|
|
16640
|
-
if (
|
|
16641
|
-
|
|
16764
|
+
if (innerControl) {
|
|
16765
|
+
innerControl.focus();
|
|
16642
16766
|
}
|
|
16643
16767
|
else if (innerLink) {
|
|
16644
16768
|
innerLink.focus();
|
|
@@ -16790,7 +16914,7 @@ class PdsDropdownMenu {
|
|
|
16790
16914
|
}
|
|
16791
16915
|
}
|
|
16792
16916
|
render() {
|
|
16793
|
-
return (hAsync(Host, { key: '
|
|
16917
|
+
return (hAsync(Host, { key: '0ed3d8ee889a5423ca9de66a86791d084f75abf0', id: this.componentId }, hAsync("slot", { key: '6bab71652d6afe094075623d3a48641a4d89b232', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), hAsync("pds-box", { key: 'fcef0667f999ae5b8cd03eb94a0db0be7be502cb', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, hAsync("div", { key: 'c78d5bd7e48c5483b12171341271f9132f4b2ff9', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, hAsync("slot", { key: '6464994260720d6046da548f4aad0896965cc47c', name: "header", onSlotchange: this.handleHeaderSlotChange })), hAsync("div", { key: '3e97dfc4e1911f91ce8917faf981d436e71e5c24', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, hAsync("slot", { key: 'dfd77a8b73df5ce9eef3e661d3f9501cb8bfdba2', onSlotchange: this.handleSlotChange })))));
|
|
16794
16918
|
}
|
|
16795
16919
|
get host() { return getElement(this); }
|
|
16796
16920
|
static get style() { return pdsDropdownMenuCss(); }
|
|
@@ -16809,10 +16933,10 @@ class PdsDropdownMenu {
|
|
|
16809
16933
|
}; }
|
|
16810
16934
|
}
|
|
16811
16935
|
|
|
16812
|
-
const pdsDropdownMenuItemCss = () => `:host{cursor:pointer;display:-ms-flexbox;display:flex;width:100%;}:host(.is-disabled){cursor:not-allowed !important;opacity:0.5 !important}:host(.is-disabled) .pds-dropdown-menu-item__content{cursor:not-allowed !important;pointer-events:none !important}.pds-dropdown-menu-item__content{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text);display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px);padding:var(--pine-dimension-xs);text-align:start;width:100%;}.pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-background-muted);color:var(--pine-color-text-hover)}.pds-dropdown-menu-item__content{}.pds-dropdown-menu-item__content:focus,.pds-dropdown-menu-item__content:focus-visible,.pds-dropdown-menu-item__content.has-focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host(.destructive) .pds-dropdown-menu-item__content{--pds-context-link-color:var(--pine-color-danger);--pds-context-link-color-hover:var(--pine-color-danger-hover);-ms-flex-align:center;align-items:center;color:var(--pine-color-danger)}:host(.destructive) .pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-danger-disabled);color:var(--pine-color-danger-hover)}:host(.destructive) .pds-dropdown-menu-item__content:focus,:host(.destructive) .pds-dropdown-menu-item__content:focus-visible,:host(.destructive) .pds-dropdown-menu-item__content.has-focus{background-color:var(--pine-color-danger-disabled);outline:var(--pine-outline-focus-danger);outline-offset:var(--pine-border-width)}pds-link::part(link):focus,pds-link::part(link):focus-visible{-webkit-box-shadow:none;box-shadow:none;outline:none}pds-link::part(link){-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);margin:calc(var(--pine-dimension-xs) * -1);padding:var(--pine-dimension-xs);text-decoration:none;width:calc(100% + var(--pine-dimension-xs) * 2)}`;
|
|
16936
|
+
const pdsDropdownMenuItemCss = () => `:host{cursor:pointer;display:-ms-flexbox;display:flex;width:100%;}:host(.is-disabled){cursor:not-allowed !important;opacity:0.5 !important}:host(.is-disabled) .pds-dropdown-menu-item__content{cursor:not-allowed !important;pointer-events:none !important}.pds-dropdown-menu-item__content{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text);display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px);padding:var(--pine-dimension-xs);text-align:start;width:100%;}.pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-background-muted);color:var(--pine-color-text-hover)}.pds-dropdown-menu-item__content{}.pds-dropdown-menu-item__content:focus,.pds-dropdown-menu-item__content:focus-visible,.pds-dropdown-menu-item__content.has-focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host(.is-informational){cursor:default}:host(.is-informational) .pds-dropdown-menu-item__content:hover{background-color:transparent;color:var(--pine-color-text)}:host(.destructive) .pds-dropdown-menu-item__content{--pds-context-link-color:var(--pine-color-danger);--pds-context-link-color-hover:var(--pine-color-danger-hover);-ms-flex-align:center;align-items:center;color:var(--pine-color-danger)}:host(.destructive) .pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-danger-disabled);color:var(--pine-color-danger-hover)}:host(.destructive) .pds-dropdown-menu-item__content:focus,:host(.destructive) .pds-dropdown-menu-item__content:focus-visible,:host(.destructive) .pds-dropdown-menu-item__content.has-focus{background-color:var(--pine-color-danger-disabled);outline:var(--pine-outline-focus-danger);outline-offset:var(--pine-border-width)}pds-link::part(link):focus,pds-link::part(link):focus-visible{-webkit-box-shadow:none;box-shadow:none;outline:none}pds-link::part(link){-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);margin:calc(var(--pine-dimension-xs) * -1);padding:var(--pine-dimension-xs);text-decoration:none;width:calc(100% + var(--pine-dimension-xs) * 2)}`;
|
|
16813
16937
|
|
|
16814
16938
|
/**
|
|
16815
|
-
* @part button
|
|
16939
|
+
* @part button - Exposes the item's inner element for styling. Appears on button and informational items, not on links.
|
|
16816
16940
|
*/
|
|
16817
16941
|
class PdsDropdownMenuItem {
|
|
16818
16942
|
constructor(hostRef) {
|
|
@@ -16828,9 +16952,17 @@ class PdsDropdownMenuItem {
|
|
|
16828
16952
|
* @defaultValue false
|
|
16829
16953
|
*/
|
|
16830
16954
|
this.disabled = false;
|
|
16955
|
+
/**
|
|
16956
|
+
* It determines whether or not the dropdown-item is informational: text that the arrow keys
|
|
16957
|
+
* reach but that can't be activated. Takes precedence over `href` and `destructive`.
|
|
16958
|
+
* Screen readers announce it as dimmed or unavailable, the same way as a disabled item.
|
|
16959
|
+
* @defaultValue false
|
|
16960
|
+
*/
|
|
16961
|
+
this.informational = false;
|
|
16831
16962
|
/**
|
|
16832
16963
|
* Determines whether the link should open in a new tab and display an external icon.
|
|
16833
16964
|
* This is a simpler alternative to using `target="_blank"` for the common case.
|
|
16965
|
+
* Ignored when `informational` is set.
|
|
16834
16966
|
* @defaultValue false
|
|
16835
16967
|
*/
|
|
16836
16968
|
this.external = false;
|
|
@@ -16841,6 +16973,12 @@ class PdsDropdownMenuItem {
|
|
|
16841
16973
|
this.handleBlur = () => {
|
|
16842
16974
|
this.hasFocus = false;
|
|
16843
16975
|
};
|
|
16976
|
+
// Space would otherwise scroll the page, since nothing in the item takes the key.
|
|
16977
|
+
this.handleInformationalKeyDown = (event) => {
|
|
16978
|
+
if (event.key === ' ') {
|
|
16979
|
+
event.preventDefault();
|
|
16980
|
+
}
|
|
16981
|
+
};
|
|
16844
16982
|
this.handleKeyDown = (event) => {
|
|
16845
16983
|
// Handle keyboard events
|
|
16846
16984
|
if (!this.disabled && (event.key === 'Enter')) {
|
|
@@ -16862,6 +17000,8 @@ class PdsDropdownMenuItem {
|
|
|
16862
17000
|
;
|
|
16863
17001
|
handleClick() {
|
|
16864
17002
|
var _a;
|
|
17003
|
+
if (this.informational)
|
|
17004
|
+
return;
|
|
16865
17005
|
// Filter only pds-dropdown-menu-item elements and find the index of the current item
|
|
16866
17006
|
const menuItems = Array.from(this.host.parentNode.children).filter((child) => child.tagName.toLowerCase() === 'pds-dropdown-menu-item');
|
|
16867
17007
|
const itemIndex = menuItems.indexOf(this.host);
|
|
@@ -16874,8 +17014,14 @@ class PdsDropdownMenuItem {
|
|
|
16874
17014
|
});
|
|
16875
17015
|
}
|
|
16876
17016
|
renderElement() {
|
|
17017
|
+
if (this.informational) {
|
|
17018
|
+
return (hAsync("div", { class: {
|
|
17019
|
+
'pds-dropdown-menu-item__content': true,
|
|
17020
|
+
'has-focus': this.hasFocus
|
|
17021
|
+
}, role: "menuitem", "aria-disabled": "true", part: "button", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleInformationalKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("slot", null)));
|
|
17022
|
+
}
|
|
16877
17023
|
if (this.href != null) {
|
|
16878
|
-
return (hAsync("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, target: this.target, class: {
|
|
17024
|
+
return (hAsync("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, externalLabel: this.externalLabel, target: this.target, class: {
|
|
16879
17025
|
'pds-dropdown-menu-item__content': true,
|
|
16880
17026
|
'has-focus': this.hasFocus
|
|
16881
17027
|
}, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-disabled": this.disabled ? 'true' : null }, hAsync("slot", null)));
|
|
@@ -16886,7 +17032,14 @@ class PdsDropdownMenuItem {
|
|
|
16886
17032
|
}, tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, hAsync("slot", null)));
|
|
16887
17033
|
}
|
|
16888
17034
|
render() {
|
|
16889
|
-
return (hAsync(Host, { key: '
|
|
17035
|
+
return (hAsync(Host, { key: 'a69947d99160783919f711d7c53e0592694f9565', id: this.componentId, class: {
|
|
17036
|
+
'is-disabled': this.disabled,
|
|
17037
|
+
'is-informational': this.informational,
|
|
17038
|
+
'destructive': !this.disabled && !this.informational && this.destructive
|
|
17039
|
+
}, onClick: () => !this.disabled && this.handleClick(), role: "none",
|
|
17040
|
+
// ARIA ignores role="none" on focusable elements, so a focusable host would sit between
|
|
17041
|
+
// the menu and the informational menuitem as an unexpected child.
|
|
17042
|
+
tabIndex: this.informational ? null : -1, "aria-disabled": this.disabled && !this.informational ? 'true' : null }, this.renderElement()));
|
|
16890
17043
|
}
|
|
16891
17044
|
get host() { return getElement(this); }
|
|
16892
17045
|
static get style() { return pdsDropdownMenuItemCss(); }
|
|
@@ -16899,14 +17052,16 @@ class PdsDropdownMenuItem {
|
|
|
16899
17052
|
"disabled": [516],
|
|
16900
17053
|
"download": [1],
|
|
16901
17054
|
"href": [1],
|
|
17055
|
+
"informational": [516],
|
|
16902
17056
|
"external": [516],
|
|
17057
|
+
"externalLabel": [1, "external-label"],
|
|
16903
17058
|
"target": [513],
|
|
16904
17059
|
"hasFocus": [32],
|
|
16905
17060
|
"clickItem": [64]
|
|
16906
17061
|
},
|
|
16907
17062
|
"$listeners$": undefined,
|
|
16908
17063
|
"$lazyBundleId$": "-",
|
|
16909
|
-
"$attrsToReflect$": [["disabled", "disabled"], ["external", "external"], ["target", "target"]]
|
|
17064
|
+
"$attrsToReflect$": [["disabled", "disabled"], ["informational", "informational"], ["external", "external"], ["target", "target"]]
|
|
16910
17065
|
}; }
|
|
16911
17066
|
}
|
|
16912
17067
|
|
|
@@ -16922,7 +17077,7 @@ class PdsDropdownMenuSeparator {
|
|
|
16922
17077
|
this.disabled = false;
|
|
16923
17078
|
}
|
|
16924
17079
|
render() {
|
|
16925
|
-
return (hAsync(Host, { key: '
|
|
17080
|
+
return (hAsync(Host, { key: '72f29c5015d2379d9986c90ec966f34f41298226', id: this.componentId }, hAsync("hr", { key: '72c2155d0fbee6346f3f38997009a7d9e14ad0c8' })));
|
|
16926
17081
|
}
|
|
16927
17082
|
static get style() { return pdsDropdownMenuSeparatorCss(); }
|
|
16928
17083
|
static get cmpMeta() { return {
|
|
@@ -17502,7 +17657,7 @@ class PdsFilter {
|
|
|
17502
17657
|
return null;
|
|
17503
17658
|
}
|
|
17504
17659
|
render() {
|
|
17505
|
-
return (hAsync(Host, { key: '
|
|
17660
|
+
return (hAsync(Host, { key: '9b2286e9a0d7f88b7f6bc90f8444185cfec832c8', id: this.componentId }, hAsync("button", { key: '968953600d615f2739757a91422dafdb817c9a6f', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, hAsync("span", { key: 'ee479f7e510ffcb54f7857cb7d1345f2a5c1d76a', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (hAsync("span", { key: 'e98aa8b915a2460f3c7d49e20ec7d43853ee5f9f', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (hAsync("div", { key: '3084babfba2d96880b2829a60d2ef00140a6813b', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, hAsync("slot", { key: 'e901488be75a18bedc6b2c42be5c398fd2cf2a29' })))));
|
|
17506
17661
|
}
|
|
17507
17662
|
get el() { return getElement(this); }
|
|
17508
17663
|
static get style() { return pdsFilterCss(); }
|
|
@@ -17534,7 +17689,7 @@ class PdsFilters {
|
|
|
17534
17689
|
registerInstance(this, hostRef);
|
|
17535
17690
|
}
|
|
17536
17691
|
render() {
|
|
17537
|
-
return (hAsync(Host, { key: '
|
|
17692
|
+
return (hAsync(Host, { key: '6f785fc222e3b5b7cf932f704b56aa7f1f52ead3', id: this.componentId }, hAsync("div", { key: '0ffd2894cdeb1e632228b4c3fa523069dcffa4b2', class: "pds-filters" }, hAsync("slot", { key: 'a3f42dedcda1b0fec78a33793d085791d9b9fc5c' }))));
|
|
17538
17693
|
}
|
|
17539
17694
|
static get style() { return pdsFiltersCss(); }
|
|
17540
17695
|
static get cmpMeta() { return {
|
|
@@ -18030,9 +18185,9 @@ class PdsImage {
|
|
|
18030
18185
|
this.loading = 'eager';
|
|
18031
18186
|
}
|
|
18032
18187
|
render() {
|
|
18033
|
-
return (hAsync(Host, { key: '
|
|
18188
|
+
return (hAsync(Host, { key: '6d2d48c468c39f53d67e63999dd83f3ad61053b5', class: {
|
|
18034
18189
|
'pds-image': true,
|
|
18035
|
-
}, id: this.componentId }, hAsync("img", { key: '
|
|
18190
|
+
}, id: this.componentId }, hAsync("img", { key: '393cc584586e37e8d5b602fbdcda1783bf80cf9b', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
|
|
18036
18191
|
}
|
|
18037
18192
|
static get style() { return pdsImageCss(); }
|
|
18038
18193
|
static get cmpMeta() { return {
|
|
@@ -18352,10 +18507,10 @@ class PdsInput {
|
|
|
18352
18507
|
'has-prepend': this.hasPrepend,
|
|
18353
18508
|
'has-append': this.hasAppend,
|
|
18354
18509
|
};
|
|
18355
|
-
return (hAsync(Host, { key: '
|
|
18510
|
+
return (hAsync(Host, { key: '1706e29a68d25a8bb83c36d6bddace04a448f6f5', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, hAsync("div", { key: '1488b6ea995c4ffc4068757f566494c0ac073950', class: "pds-input" }, label && (hAsync("div", { key: 'e2fe4e461e626648ec51882e92e02fea179e3e13', class: {
|
|
18356
18511
|
'pds-input__label-wrapper': true,
|
|
18357
18512
|
'visually-hidden': this.hideLabel,
|
|
18358
|
-
} }, hAsync("label", { key: '
|
|
18513
|
+
} }, hAsync("label", { key: 'c926a6fbb3130afdc6c86d509b92fb6650391c4b', htmlFor: componentId, class: "pds-input__label" }, hAsync("span", { key: 'dbbaf9d0db49f949f69f1faf848e7c6193e32793' }, label, this.required && hAsync("span", { key: '42e6325a0f5ee276ed92cf2eb71942c268c3d1aa', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), hAsync("div", { key: '4715743733f2d7d3e4edf9ac4ab6d69ffde04d00', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), hAsync("input", Object.assign({ key: '438ac0fc6d497a8227c83e628d29d4633ffc208a', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (hAsync("p", { key: '43b5c3a332072f19a38be316565602932c61504d', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (hAsync("p", { key: '54fd4fc2dcbc645377edbe4d04cfd82c7d1591e8', class: "pds-input__error-message", id: messageId(componentId, 'error') }, hAsync("pds-icon", { key: '2bd509a575ec5c7a548955dd7f706d7c1d42557e', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
|
|
18359
18514
|
}
|
|
18360
18515
|
static get formAssociated() { return true; }
|
|
18361
18516
|
get el() { return getElement(this); }
|
|
@@ -18411,6 +18566,8 @@ class PdsInput {
|
|
|
18411
18566
|
|
|
18412
18567
|
const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color, var(--pds-context-link-color, var(--pine-color-text)));display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick);position:relative}.pds-link:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:none}:host([color=secondary]) .pds-link{color:var(--pine-color-text-primary)}:host([color=secondary]) .pds-link:hover{color:var(--pine-color-text-inverse-secondary)}:host([color=accent]) .pds-link{color:var(--pine-color-accent)}:host([color=accent]) .pds-link:hover{color:var(--pine-color-accent-hover)}:host([color=danger]) .pds-link{color:var(--pine-color-danger)}:host([color=danger]) .pds-link:hover{color:var(--pine-color-danger-hover)}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:underline}:host([active]) .pds-link{color:var(--pds-context-link-color, var(--pine-color-text-strong));text-decoration:underline}:host([active]) .pds-link:hover{color:var(--pds-context-link-color-hover, var(--pine-color-text-strong));text-decoration:underline}`;
|
|
18413
18568
|
|
|
18569
|
+
// Used when `externalLabel` is unset; an empty string hides the icon instead.
|
|
18570
|
+
const DEFAULT_EXTERNAL_LABEL = '(opens in a new tab)';
|
|
18414
18571
|
/**
|
|
18415
18572
|
* @part link - Link element styles.
|
|
18416
18573
|
* @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.
|
|
@@ -18464,11 +18621,18 @@ class PdsLink {
|
|
|
18464
18621
|
return linkStyles;
|
|
18465
18622
|
}
|
|
18466
18623
|
render() {
|
|
18624
|
+
var _a;
|
|
18467
18625
|
const targetValue = this.target || (this.external ? '_blank' : undefined);
|
|
18468
18626
|
const showExternalIcon = this.external;
|
|
18469
|
-
const
|
|
18470
|
-
|
|
18471
|
-
|
|
18627
|
+
const opensInNewTab = targetValue === '_blank';
|
|
18628
|
+
const relValue = opensInNewTab ? 'noopener noreferrer' : undefined;
|
|
18629
|
+
// A `target` other than _blank overrides `external`, and then the label
|
|
18630
|
+
// would be false, so the icon is decorative there, as it is when the
|
|
18631
|
+
// label is empty.
|
|
18632
|
+
const externalLabel = (_a = this.externalLabel) !== null && _a !== void 0 ? _a : DEFAULT_EXTERNAL_LABEL;
|
|
18633
|
+
const externalIconLabel = opensInNewTab && externalLabel !== '' ? externalLabel : undefined;
|
|
18634
|
+
return (hAsync("a", { key: 'ae7928aa6dce42657545a1d17581818d3724746f', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, hAsync("slot", { key: 'e61374c58fddec869f2f5dda54634a0b1ba9f345' }, this.href), showExternalIcon &&
|
|
18635
|
+
hAsync("pds-icon", { key: '161657146e5f3ce360480c573ea8f14c9012cb1f', icon: launch, size: this.fontSize, "aria-label": externalIconLabel, "aria-hidden": externalIconLabel === undefined ? 'true' : undefined })));
|
|
18472
18636
|
}
|
|
18473
18637
|
static get style() { return pdsLinkCss(); }
|
|
18474
18638
|
static get cmpMeta() { return {
|
|
@@ -18480,6 +18644,7 @@ class PdsLink {
|
|
|
18480
18644
|
"download": [1],
|
|
18481
18645
|
"componentId": [1, "component-id"],
|
|
18482
18646
|
"external": [4],
|
|
18647
|
+
"externalLabel": [1, "external-label"],
|
|
18483
18648
|
"target": [1],
|
|
18484
18649
|
"variant": [1],
|
|
18485
18650
|
"fontSize": [1, "font-size"],
|
|
@@ -18567,7 +18732,7 @@ class PdsLoader {
|
|
|
18567
18732
|
'aria-live': 'polite',
|
|
18568
18733
|
};
|
|
18569
18734
|
this.hostKeeper.record(hostClass, {}, hostAttributes);
|
|
18570
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
18735
|
+
return (hAsync(Host, Object.assign({ key: 'eaf8a64d5c2e37349ed2d2426a6c6bf1df68005f', class: hostClass }, hostAttributes), this.variant === 'spinner' && (hAsync("div", { key: '216143117aabd29ca52c56cd7951a27f9742e466', class: "pds-loader--spinner" }, hAsync("svg", { key: '9c9db37e883fb3a4ba5e0c7c173a5d7a76cdadda', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, hAsync("defs", { key: '8f65f537290ea2dd96b66343324851d243fec3dd' }, hAsync("linearGradient", { key: '8b1a53bcc9401b98dafa805cae8e417af7646bfd', id: "spinner-secondHalf" }, hAsync("stop", { key: 'f06605f7180e9c07d5eb4c9dbadcdb87cee0dd70', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), hAsync("stop", { key: '0bf492e4d5578bd0d98a2f7570a1dd21ca2ecf3d', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), hAsync("linearGradient", { key: '6c7038c158d786866a408063b07b236bf17cefc1', id: "spinner-firstHalf" }, hAsync("stop", { key: '916502c73bc4b78368bb210aed318537841917b9', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), hAsync("stop", { key: '2d20708106bb3a685fbaf4bdcf099684a36359c0', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), hAsync("g", { key: '93165f80e7d5155b3dc8f2fc62e326bec7604c57', class: "pds-loader__spinner-path" }, hAsync("path", { key: '4b1e39a899aadf9d4b4cbf954c783c1103c43c24', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), hAsync("path", { key: '0aa1683dc97e2a01cc076a52a4883388c1d09c6f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), hAsync("path", { key: '9839fb9e0b473814d3b10eb27f7be87990b6c088', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (hAsync("div", { key: 'd83e4625ea2d41a545a98e08edb3033b83e7eb5b', class: "pds-loader--typing" }, hAsync("span", { key: '2e793f3f5b17cb7709c8fc89e2054d7cd77fafd4' }), hAsync("span", { key: 'c266ad3b8edf6c1cc392c544027f7cfd543b711c' }), hAsync("span", { key: '061f9e3030cce603e50e8d86d3aa5036800c1324' }))), hAsync("div", { key: '747c1c6c28136cfb9ba9dac0d4944bc6281af075', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, hAsync("slot", { key: '5eb5a5710deafa10bd269429edff0ac677546cf5', name: "label" }, "Loading..."))));
|
|
18571
18736
|
}
|
|
18572
18737
|
get el() { return getElement(this); }
|
|
18573
18738
|
static get watchers() { return {
|
|
@@ -18591,12 +18756,6 @@ class PdsLoader {
|
|
|
18591
18756
|
}; }
|
|
18592
18757
|
}
|
|
18593
18758
|
|
|
18594
|
-
const pdsModalCss = () => `.pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop[aria-modal=false]{overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop[aria-modal=false]{-webkit-backdrop-filter:none;backdrop-filter:none}.pds-modal__backdrop[aria-modal=false]::before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);content:"";inset:0;position:fixed;z-index:-1}}.pds-modal__backdrop.open{opacity:1;-webkit-transition-timing-function:var(--pine-motion-easing-out);transition-timing-function:var(--pine-motion-easing-out);visibility:visible}.pds-modal{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--custom{max-width:var(--pds-modal-max-width, 700px)}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}`;
|
|
18595
|
-
|
|
18596
|
-
const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
|
|
18597
|
-
const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
|
|
18598
|
-
/\d/.test(value) &&
|
|
18599
|
-
(typeof CSS === 'undefined' || CSS.supports('max-width', value));
|
|
18600
18759
|
const TABBABLE = [
|
|
18601
18760
|
'a[href]',
|
|
18602
18761
|
'area[href]',
|
|
@@ -18678,6 +18837,13 @@ function tabbableIn(root) {
|
|
|
18678
18837
|
});
|
|
18679
18838
|
return oneRadioPerGroup(visible);
|
|
18680
18839
|
}
|
|
18840
|
+
|
|
18841
|
+
const pdsModalCss = () => `.pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop[aria-modal=false]{overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop[aria-modal=false]{-webkit-backdrop-filter:none;backdrop-filter:none}.pds-modal__backdrop[aria-modal=false]::before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);content:"";inset:0;position:fixed;z-index:-1}}.pds-modal__backdrop.open{opacity:1;-webkit-transition-timing-function:var(--pine-motion-easing-out);transition-timing-function:var(--pine-motion-easing-out);visibility:visible}.pds-modal{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--custom{max-width:var(--pds-modal-max-width, 700px)}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}`;
|
|
18842
|
+
|
|
18843
|
+
const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
|
|
18844
|
+
const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
|
|
18845
|
+
/\d/.test(value) &&
|
|
18846
|
+
(typeof CSS === 'undefined' || CSS.supports('max-width', value));
|
|
18681
18847
|
/** Whether `node` is `ancestor` or inside it, crossing shadow roots, which `Node.contains` doesn't. */
|
|
18682
18848
|
function containsComposed(ancestor, node) {
|
|
18683
18849
|
for (let current = node; current; current = current instanceof ShadowRoot ? current.host : current.parentNode) {
|
|
@@ -18693,7 +18859,7 @@ function containsComposed(ancestor, node) {
|
|
|
18693
18859
|
*/
|
|
18694
18860
|
const openModals = new Map();
|
|
18695
18861
|
let openSequence = 0;
|
|
18696
|
-
/** Whether an open
|
|
18862
|
+
/** Whether the panel of an open popover that takes Escape sits in `root`, including inside shadow roots under it. */
|
|
18697
18863
|
function hasOpenPopover(root) {
|
|
18698
18864
|
if (root.querySelector('[data-pds-popover-open]'))
|
|
18699
18865
|
return true;
|
|
@@ -19240,14 +19406,14 @@ class PdsModal {
|
|
|
19240
19406
|
}
|
|
19241
19407
|
render() {
|
|
19242
19408
|
const [sizeClass = 'md', customSize] = this.resolveSize();
|
|
19243
|
-
return (hAsync("dialog", { key: '
|
|
19409
|
+
return (hAsync("dialog", { key: 'cd574868a46b69185e2058c60374dbec34677732', class: {
|
|
19244
19410
|
'pds-modal__backdrop': true,
|
|
19245
19411
|
'open': this.open
|
|
19246
|
-
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: '
|
|
19412
|
+
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: '8c50fb4810b4bb07d62348fed44df30b14a52acd', class: {
|
|
19247
19413
|
'pds-modal': true,
|
|
19248
19414
|
[`pds-modal--${sizeClass}`]: true,
|
|
19249
19415
|
'pds-modal--scrollable': this.scrollable
|
|
19250
|
-
}, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '
|
|
19416
|
+
}, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '25a71c95dfeff4648a28edef21bf510b1743ed7c' }))));
|
|
19251
19417
|
}
|
|
19252
19418
|
get el() { return getElement(this); }
|
|
19253
19419
|
static get watchers() { return {
|
|
@@ -19298,6 +19464,21 @@ class PdsModalContent {
|
|
|
19298
19464
|
* Tracks whether the border prop was explicitly set by the user
|
|
19299
19465
|
*/
|
|
19300
19466
|
this.userSetBorder = false;
|
|
19467
|
+
this.hasLoaded = false;
|
|
19468
|
+
/**
|
|
19469
|
+
* Handle scroll events
|
|
19470
|
+
*/
|
|
19471
|
+
this.handleScroll = () => {
|
|
19472
|
+
this.updateBorders();
|
|
19473
|
+
};
|
|
19474
|
+
/**
|
|
19475
|
+
* Handle resize events
|
|
19476
|
+
*/
|
|
19477
|
+
this.handleResize = () => {
|
|
19478
|
+
this.calculateMaxHeight();
|
|
19479
|
+
// Update borders after resize as content scrollability might change
|
|
19480
|
+
setTimeout(() => this.updateBorders(), 50);
|
|
19481
|
+
};
|
|
19301
19482
|
}
|
|
19302
19483
|
// Unwraps a nested .pds-modal-content left by a page-cache (Turbo, bfcache) reconnect.
|
|
19303
19484
|
componentDidRender() {
|
|
@@ -19311,43 +19492,30 @@ class PdsModalContent {
|
|
|
19311
19492
|
this.userSetBorder = hasBorderAttribute || this.border !== 'none';
|
|
19312
19493
|
}
|
|
19313
19494
|
componentDidLoad() {
|
|
19495
|
+
this.hasLoaded = true;
|
|
19314
19496
|
this.calculateMaxHeight();
|
|
19315
|
-
// Set up resize listener
|
|
19316
|
-
window.addEventListener('resize', this.handleResize.bind(this));
|
|
19317
|
-
// Only set up scroll listener for border updates if borders are managed automatically
|
|
19318
19497
|
if (!this.userSetBorder) {
|
|
19319
|
-
|
|
19320
|
-
|
|
19321
|
-
this.el.addEventListener('scroll', this.handleScroll.bind(this));
|
|
19322
|
-
// Initial border update after everything is set up
|
|
19323
|
-
setTimeout(() => this.updateBorders(), 100);
|
|
19324
|
-
}, 100);
|
|
19498
|
+
// Initial border update after everything is set up
|
|
19499
|
+
setTimeout(() => this.updateBorders(), 200);
|
|
19325
19500
|
}
|
|
19326
19501
|
}
|
|
19502
|
+
// Here rather than in componentDidLoad, which runs once: content taken out of the page and put
|
|
19503
|
+
// back (a DOM morph or a framework moving it) gets its listeners and header/footer observer back.
|
|
19504
|
+
connectedCallback() {
|
|
19505
|
+
window.addEventListener('resize', this.handleResize);
|
|
19506
|
+
// The scroll happens on the component element itself (this.el), not the inner div
|
|
19507
|
+
this.el.addEventListener('scroll', this.handleScroll);
|
|
19508
|
+
if (this.hasLoaded)
|
|
19509
|
+
this.calculateMaxHeight();
|
|
19510
|
+
}
|
|
19327
19511
|
disconnectedCallback() {
|
|
19328
|
-
window.removeEventListener('resize', this.handleResize
|
|
19329
|
-
|
|
19330
|
-
if (!this.userSetBorder) {
|
|
19331
|
-
this.el.removeEventListener('scroll', this.handleScroll.bind(this));
|
|
19332
|
-
}
|
|
19512
|
+
window.removeEventListener('resize', this.handleResize);
|
|
19513
|
+
this.el.removeEventListener('scroll', this.handleScroll);
|
|
19333
19514
|
if (this.mutationObserver) {
|
|
19334
19515
|
this.mutationObserver.disconnect();
|
|
19516
|
+
this.mutationObserver = undefined;
|
|
19335
19517
|
}
|
|
19336
19518
|
}
|
|
19337
|
-
/**
|
|
19338
|
-
* Handle scroll events
|
|
19339
|
-
*/
|
|
19340
|
-
handleScroll() {
|
|
19341
|
-
this.updateBorders();
|
|
19342
|
-
}
|
|
19343
|
-
/**
|
|
19344
|
-
* Handle resize events
|
|
19345
|
-
*/
|
|
19346
|
-
handleResize() {
|
|
19347
|
-
this.calculateMaxHeight();
|
|
19348
|
-
// Update borders after resize as content scrollability might change
|
|
19349
|
-
setTimeout(() => this.updateBorders(), 50);
|
|
19350
|
-
}
|
|
19351
19519
|
/**
|
|
19352
19520
|
* Updates border visibility based on scroll state (only if not user-defined)
|
|
19353
19521
|
*/
|
|
@@ -19464,10 +19632,10 @@ class PdsModalContent {
|
|
|
19464
19632
|
render() {
|
|
19465
19633
|
// Only apply max-height style if it's not 'none'
|
|
19466
19634
|
const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
|
|
19467
|
-
return (hAsync(Host, { key: '
|
|
19635
|
+
return (hAsync(Host, { key: 'b4200778f186c45a1917646ba2e0e4e623959951' }, hAsync("div", { key: '39eaaf228e5441f5c0fd628c47be079fb4e07e0f', class: {
|
|
19468
19636
|
'pds-modal-content': true,
|
|
19469
19637
|
[`pds-modal-content--border-${this.border}`]: true
|
|
19470
|
-
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '
|
|
19638
|
+
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: 'ac31a9b81941b8b3abbac3a67c25bacaa54e6840' }))));
|
|
19471
19639
|
}
|
|
19472
19640
|
get el() { return getElement(this); }
|
|
19473
19641
|
static get style() { return pdsModalContentCss(); }
|
|
@@ -19498,7 +19666,7 @@ class PdsModalFooter {
|
|
|
19498
19666
|
unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
|
|
19499
19667
|
}
|
|
19500
19668
|
render() {
|
|
19501
|
-
return (hAsync("footer", { key: '
|
|
19669
|
+
return (hAsync("footer", { key: 'c0d50408471355d80759112e63f58c8a34fb7906', class: "pds-modal__footer" }, hAsync("slot", { key: '6566d446457be8b57e37bf1542a5863b0018d233' })));
|
|
19502
19670
|
}
|
|
19503
19671
|
get el() { return getElement(this); }
|
|
19504
19672
|
static get style() { return pdsModalFooterCss(); }
|
|
@@ -19526,7 +19694,7 @@ class PdsModalHeader {
|
|
|
19526
19694
|
unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
|
|
19527
19695
|
}
|
|
19528
19696
|
render() {
|
|
19529
|
-
return (hAsync("header", { key: '
|
|
19697
|
+
return (hAsync("header", { key: 'eb295ff36fd23b7965296b6dfcfcf783a32079a0', class: "pds-modal__header" }, hAsync("slot", { key: '9c97566ff79f8d9b233d814395d5a7e893751a06' })));
|
|
19530
19698
|
}
|
|
19531
19699
|
get el() { return getElement(this); }
|
|
19532
19700
|
static get style() { return pdsModalHeaderCss(); }
|
|
@@ -20723,7 +20891,7 @@ class PdsMultiselect {
|
|
|
20723
20891
|
'pds-multiselect__option--selected': isSelected,
|
|
20724
20892
|
'pds-multiselect__option--create': isCreateOption,
|
|
20725
20893
|
'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
|
|
20726
|
-
}, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (hAsync("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, hAsync("pds-icon", { name: "add", size: "small" }), hAsync("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (hAsync("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (hAsync("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor, "max-width": "100%" }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
|
|
20894
|
+
}, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (hAsync("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, hAsync("pds-icon", { name: "add", size: "small", "aria-hidden": "true" }), hAsync("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (hAsync("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (hAsync("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor, "max-width": "100%" }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
|
|
20727
20895
|
}
|
|
20728
20896
|
renderOptionAction(option, optionId, isHighlighted) {
|
|
20729
20897
|
var _a;
|
|
@@ -20746,7 +20914,7 @@ class PdsMultiselect {
|
|
|
20746
20914
|
const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
|
|
20747
20915
|
const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
|
|
20748
20916
|
const hasSlottedFooter = !!this.el.querySelector('[slot="footer"]');
|
|
20749
|
-
return (hAsync("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, hAsync("div", { class: "pds-multiselect__search" }, hAsync("pds-icon", { name: "search", size: "small" }), hAsync("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label": this.searchOptionsLabel, "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), hAsync("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || this.optionsLabel, id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (hAsync("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (hAsync("slot", { name: "loading" })) : (hAsync("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (hAsync("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (hAsync("slot", { name: "empty" })) : (hAsync("span", null, this.noOptionsFoundLabel)))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
|
|
20917
|
+
return (hAsync("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, hAsync("div", { class: "pds-multiselect__search" }, hAsync("pds-icon", { name: "search", size: "small", "aria-hidden": "true" }), hAsync("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label": this.searchOptionsLabel, "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), hAsync("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || this.optionsLabel, id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (hAsync("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (hAsync("slot", { name: "loading" })) : (hAsync("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (hAsync("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (hAsync("slot", { name: "empty" })) : (hAsync("span", null, this.noOptionsFoundLabel)))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
|
|
20750
20918
|
if (item.type === 'group') {
|
|
20751
20919
|
return (hAsync("li", { key: `group-${itemIndex}`, role: "group", "aria-label": item.group, class: "pds-multiselect__group" }, hAsync("span", { class: "pds-multiselect__group-header", "aria-hidden": "true" }, item.group), hAsync("ul", { class: "pds-multiselect__group-list", role: "presentation" }, item.options.map(({ option, index }) => this.renderOption(option, index, valueArray)))));
|
|
20752
20920
|
}
|
|
@@ -20805,10 +20973,10 @@ class PdsMultiselect {
|
|
|
20805
20973
|
}
|
|
20806
20974
|
render() {
|
|
20807
20975
|
const hasSelections = this.selectedItems.length > 0;
|
|
20808
|
-
return (hAsync(Host, { key: '
|
|
20976
|
+
return (hAsync(Host, { key: 'a92086af75e20b9b37b147365bfa517d96021700', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: 'd49e0442e3a348248e5ac3b37afc9f128b34956b', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: '41a081803dfd784e20a7135ecf5f5c4657908dd1', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
|
|
20809
20977
|
'pds-multiselect__label': true,
|
|
20810
20978
|
'visually-hidden': this.hideLabel,
|
|
20811
|
-
} }, this.label)), hAsync("div", { key: '
|
|
20979
|
+
} }, this.label)), hAsync("div", { key: '0e3c8a3aaf7c70b4ff71972c29b8d5599f62ec97', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (hAsync("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
|
|
20812
20980
|
'pds-multiselect__trigger': true,
|
|
20813
20981
|
'pds-multiselect__trigger--open': this.isOpen,
|
|
20814
20982
|
'pds-multiselect__trigger--disabled': this.disabled,
|
|
@@ -20824,7 +20992,7 @@ class PdsMultiselect {
|
|
|
20824
20992
|
}, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hAsync("span", { class: {
|
|
20825
20993
|
'pds-multiselect__trigger-text': true,
|
|
20826
20994
|
'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
|
|
20827
|
-
} }, this.getTriggerText()), hAsync("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '
|
|
20995
|
+
} }, this.getTriggerText()), hAsync("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: 'd5cddc1d3374d94ecf0cce1bcaf7c7125bf3128d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: 'e3cb958b6fd2b1e138b769de0f53be1b8564902d', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: 'f6c2a30cc192391973d9b22fbb6732ce387832ac', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'f437effafaa383b81aec7b5bf635598c8b0075b8', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: 'f1e747137f2dc7cad3d4e1ff8fc293401e3173e1', style: { display: 'none' } }, hAsync("slot", { key: 'f337137b3ca5983dc6641361101f6d19c972778c' })))));
|
|
20828
20996
|
}
|
|
20829
20997
|
static get formAssociated() { return true; }
|
|
20830
20998
|
get el() { return getElement(this); }
|
|
@@ -20962,10 +21130,32 @@ const cssEscape = (value) => {
|
|
|
20962
21130
|
return result;
|
|
20963
21131
|
};
|
|
20964
21132
|
|
|
20965
|
-
const pdsPopoverCss = () => `:host{--sizing-max-width-default:352px;display:inline-block}:host .pds-popover__trigger-wrapper{display:inline-block}:host .pds-popover__content-slot-wrapper{display:none}`;
|
|
21133
|
+
const pdsPopoverCss = () => `:host{--sizing-max-width-default:352px;display:inline-block}:host .pds-popover__trigger-wrapper{display:inline-block}:host .pds-popover__tab-guard{opacity:0;outline:none;pointer-events:none;position:fixed}:host .pds-popover__content-slot-wrapper{display:none}`;
|
|
20966
21134
|
|
|
20967
|
-
/** Open
|
|
20968
|
-
const
|
|
21135
|
+
/** Open popovers that close on Escape, in the order they opened: Escape goes to the last one it applies to. */
|
|
21136
|
+
const popoversTakingEscape = [];
|
|
21137
|
+
/** Hovering the trigger waits this long before opening, so a pointer passing over it doesn't open it. */
|
|
21138
|
+
const HOVER_OPEN_DELAY_MS = 120;
|
|
21139
|
+
/** Leaving the trigger and panel waits this long before closing, which covers the gap between them. */
|
|
21140
|
+
const HOVER_CLOSE_DELAY_MS = 200;
|
|
21141
|
+
/**
|
|
21142
|
+
* floating-ui reporting viewport coordinates, as `position: fixed` uses without a containing block. Its own
|
|
21143
|
+
* containing-block check misses a backdrop filter in WebKit, so handlePopoverPositioning corrects for one itself.
|
|
21144
|
+
*/
|
|
21145
|
+
const viewportPlatform = Object.assign(Object.assign({}, platform), { getOffsetParent: () => window });
|
|
21146
|
+
/**
|
|
21147
|
+
* Where `top: 0; left: 0` puts a fixed element beside the given one. An empty probe is measured instead of the
|
|
21148
|
+
* element, whose own transforms, such as an entrance animation, would otherwise read as part of the offset.
|
|
21149
|
+
*/
|
|
21150
|
+
const containingBlockOrigin = (element) => {
|
|
21151
|
+
var _a;
|
|
21152
|
+
const probe = document.createElement('div');
|
|
21153
|
+
probe.style.cssText = 'all: initial; position: fixed; top: 0; left: 0;';
|
|
21154
|
+
(_a = element.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(probe, element);
|
|
21155
|
+
const { top, left } = probe.getBoundingClientRect();
|
|
21156
|
+
probe.remove();
|
|
21157
|
+
return { top, left };
|
|
21158
|
+
};
|
|
20969
21159
|
/** The focused element, followed down through shadow roots to the control that has focus. */
|
|
20970
21160
|
function deepActiveElement() {
|
|
20971
21161
|
var _a;
|
|
@@ -20974,6 +21164,27 @@ function deepActiveElement() {
|
|
|
20974
21164
|
active = active.shadowRoot.activeElement;
|
|
20975
21165
|
return active;
|
|
20976
21166
|
}
|
|
21167
|
+
/** `node`, or the shadow host it sits in, lifted until it shares a tree with `other` or reaches the document. */
|
|
21168
|
+
function liftToTreeOf(node, other) {
|
|
21169
|
+
let current = node;
|
|
21170
|
+
while (current.getRootNode() !== other.getRootNode() && current.getRootNode() instanceof ShadowRoot) {
|
|
21171
|
+
current = current.getRootNode().host;
|
|
21172
|
+
}
|
|
21173
|
+
return current;
|
|
21174
|
+
}
|
|
21175
|
+
/**
|
|
21176
|
+
* Where `node` sits relative to `ref`, as `compareDocumentPosition` reports it. Whichever of the two
|
|
21177
|
+
* is inside a shadow root is lifted to its host first, so a control inside a component compares too.
|
|
21178
|
+
*/
|
|
21179
|
+
function positionAcrossTrees(ref, node) {
|
|
21180
|
+
const lifted = liftToTreeOf(node, ref);
|
|
21181
|
+
return liftToTreeOf(ref, lifted).compareDocumentPosition(lifted);
|
|
21182
|
+
}
|
|
21183
|
+
const isPosition = (position, flag) => (position & Node.DOCUMENT_POSITION_DISCONNECTED) === 0 && (position & flag) !== 0;
|
|
21184
|
+
/** The popover each panel belongs to, so a popover inside another one's panel can find it. */
|
|
21185
|
+
const panelOwners = new WeakMap();
|
|
21186
|
+
/** Floating layers Pine components put at the end of the page or of a dialog, as a popover does its panel. */
|
|
21187
|
+
const FLOATING_LAYERS = '.pds-popover, .pds-datepicker-calendar-portal, .pds-combobox-dropdown-portal';
|
|
20977
21188
|
/**
|
|
20978
21189
|
* @slot trigger - The trigger element for the popover
|
|
20979
21190
|
* @slot (default) - The content to display inside the popover
|
|
@@ -21013,14 +21224,21 @@ class PdsPopover {
|
|
|
21013
21224
|
*/
|
|
21014
21225
|
this.portalEl = null;
|
|
21015
21226
|
/**
|
|
21016
|
-
*
|
|
21227
|
+
* Stops floating-ui's autoUpdate, which repositions the open panel as its trigger or the page moves or resizes
|
|
21228
|
+
*/
|
|
21229
|
+
this.stopAutoUpdate = null;
|
|
21230
|
+
/**
|
|
21231
|
+
* Counts positioning runs, so a run that resolves after a newer one started is dropped
|
|
21017
21232
|
*/
|
|
21018
|
-
this.
|
|
21233
|
+
this.positioningRun = 0;
|
|
21019
21234
|
/**
|
|
21020
|
-
*
|
|
21235
|
+
* The latest positioning run, which pdsPopoverOpen waits for so the panel's side is set when it fires
|
|
21021
21236
|
*/
|
|
21022
|
-
this.
|
|
21023
|
-
|
|
21237
|
+
this.positioning = Promise.resolve();
|
|
21238
|
+
/**
|
|
21239
|
+
* Set while show() waits to emit pdsPopoverOpen, so a hide() in the meantime emits it first
|
|
21240
|
+
*/
|
|
21241
|
+
this.openEventPending = false;
|
|
21024
21242
|
/**
|
|
21025
21243
|
* Track moved nodes and their placeholders for restoration
|
|
21026
21244
|
*/
|
|
@@ -21029,11 +21247,41 @@ class PdsPopover {
|
|
|
21029
21247
|
* Timestamp when popover was opened (for preventing immediate close)
|
|
21030
21248
|
*/
|
|
21031
21249
|
this.openTimestamp = 0;
|
|
21250
|
+
/**
|
|
21251
|
+
* Set while hover holds the popover open, until a click pins it or it closes
|
|
21252
|
+
*/
|
|
21253
|
+
this.hoverOpened = false;
|
|
21254
|
+
/**
|
|
21255
|
+
* Set when the pointer left while focus was in the panel, so focus leaving it closes it instead
|
|
21256
|
+
*/
|
|
21257
|
+
this.closeWhenFocusLeaves = false;
|
|
21258
|
+
/**
|
|
21259
|
+
* How far the pointer was from the panel at its last move after leaving the trigger
|
|
21260
|
+
*/
|
|
21261
|
+
this.panelDistance = Infinity;
|
|
21262
|
+
/**
|
|
21263
|
+
* Stands in for the panel in the Tab order, right after the trigger, while the popover is open
|
|
21264
|
+
*/
|
|
21265
|
+
this.tabGuardEl = null;
|
|
21266
|
+
/**
|
|
21267
|
+
* Set while focus passes through the guard on its way out of the panel
|
|
21268
|
+
*/
|
|
21269
|
+
this.leavingPanel = false;
|
|
21270
|
+
/**
|
|
21271
|
+
* The direction of the Tab key being handled, until its default action has run
|
|
21272
|
+
*/
|
|
21273
|
+
this.tabDirection = null;
|
|
21032
21274
|
/**
|
|
21033
21275
|
* Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
|
|
21034
21276
|
* @defaultValue "show"
|
|
21035
21277
|
*/
|
|
21036
21278
|
this.popoverTargetAction = 'show';
|
|
21279
|
+
/**
|
|
21280
|
+
* Determines how the popover opens. With `hover`, it also opens when the pointer rests on the trigger and closes
|
|
21281
|
+
* when the pointer leaves, until a click on the trigger keeps it open. Enter or Space on the trigger opens it either way.
|
|
21282
|
+
* @defaultValue "click"
|
|
21283
|
+
*/
|
|
21284
|
+
this.openOn = 'click';
|
|
21037
21285
|
/**
|
|
21038
21286
|
* Determines the type of popover. Auto popovers can be "light dismissed" by clicking outside of the popover.
|
|
21039
21287
|
* Manual popovers require the consumer to handle the visibility of the popover.
|
|
@@ -21044,6 +21292,11 @@ class PdsPopover {
|
|
|
21044
21292
|
* @defaultValue 352
|
|
21045
21293
|
*/
|
|
21046
21294
|
this.maxWidth = 352;
|
|
21295
|
+
/**
|
|
21296
|
+
* Sets the padding of the popover content
|
|
21297
|
+
* @defaultValue "md"
|
|
21298
|
+
*/
|
|
21299
|
+
this.padding = 'md';
|
|
21047
21300
|
/**
|
|
21048
21301
|
* Determines the preferred position of the popover
|
|
21049
21302
|
* @defaultValue "right"
|
|
@@ -21058,6 +21311,7 @@ class PdsPopover {
|
|
|
21058
21311
|
// Clean up previous trigger's event listener if it exists
|
|
21059
21312
|
if (this.triggerEl != null) {
|
|
21060
21313
|
this.triggerEl.removeEventListener('click', this.handleTriggerClick);
|
|
21314
|
+
this.stopListeningForHover(this.triggerEl);
|
|
21061
21315
|
}
|
|
21062
21316
|
if (assignedElements.length > 0) {
|
|
21063
21317
|
// Use the first assigned element as the trigger
|
|
@@ -21065,10 +21319,14 @@ class PdsPopover {
|
|
|
21065
21319
|
this.linkTriggerToPortal();
|
|
21066
21320
|
// Attach click listener to handle popover visibility
|
|
21067
21321
|
this.triggerEl.addEventListener('click', this.handleTriggerClick);
|
|
21322
|
+
this.listenForHover(this.triggerEl);
|
|
21068
21323
|
}
|
|
21069
21324
|
else {
|
|
21070
21325
|
this.triggerEl = null;
|
|
21071
21326
|
}
|
|
21327
|
+
// autoUpdate watches the trigger it started with, so an open popover starts it again on the new one.
|
|
21328
|
+
if (this.active)
|
|
21329
|
+
this.addScrollAndResizeListeners();
|
|
21072
21330
|
this.observeTrigger();
|
|
21073
21331
|
};
|
|
21074
21332
|
/**
|
|
@@ -21091,6 +21349,13 @@ class PdsPopover {
|
|
|
21091
21349
|
if (!anchorWithHref) {
|
|
21092
21350
|
event.preventDefault();
|
|
21093
21351
|
}
|
|
21352
|
+
if (this.openOn === 'hover' && this.popoverTargetAction !== 'hide') {
|
|
21353
|
+
const heldByHover = this.hoverOpened;
|
|
21354
|
+
this.pin();
|
|
21355
|
+
// Pinning, not toggling: the hover before a click has already opened it.
|
|
21356
|
+
if (heldByHover)
|
|
21357
|
+
return;
|
|
21358
|
+
}
|
|
21094
21359
|
// Execute the appropriate action based on popoverTargetAction prop
|
|
21095
21360
|
switch (this.popoverTargetAction) {
|
|
21096
21361
|
case 'show':
|
|
@@ -21105,6 +21370,60 @@ class PdsPopover {
|
|
|
21105
21370
|
break;
|
|
21106
21371
|
}
|
|
21107
21372
|
};
|
|
21373
|
+
// A tap sends touch pointer events and then a click, so touch takes the click path alone.
|
|
21374
|
+
this.handleHoverEnter = (event) => {
|
|
21375
|
+
if (event.pointerType === 'touch')
|
|
21376
|
+
return;
|
|
21377
|
+
this.clearHoverTimers();
|
|
21378
|
+
if (this.active)
|
|
21379
|
+
return;
|
|
21380
|
+
this.hoverOpenTimer = setTimeout(() => {
|
|
21381
|
+
this.hoverOpenTimer = undefined;
|
|
21382
|
+
if (this.active || this.portalEl == null)
|
|
21383
|
+
return;
|
|
21384
|
+
this.hoverOpened = true;
|
|
21385
|
+
this.show();
|
|
21386
|
+
}, HOVER_OPEN_DELAY_MS);
|
|
21387
|
+
};
|
|
21388
|
+
this.handleHoverLeave = (event) => {
|
|
21389
|
+
if (event.pointerType === 'touch')
|
|
21390
|
+
return;
|
|
21391
|
+
this.clearHoverTimers();
|
|
21392
|
+
if (!this.hoverOpened)
|
|
21393
|
+
return;
|
|
21394
|
+
this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
|
|
21395
|
+
if (event.currentTarget !== this.triggerEl)
|
|
21396
|
+
return;
|
|
21397
|
+
this.panelDistance = this.distanceToPanel(event);
|
|
21398
|
+
document.addEventListener('pointermove', this.handleMoveTowardPanel);
|
|
21399
|
+
};
|
|
21400
|
+
// A slow diagonal from the trigger to a panel shorter than it runs beside the panel for longer
|
|
21401
|
+
// than the close delay, so each move that brings the pointer closer starts the delay again.
|
|
21402
|
+
this.handleMoveTowardPanel = (event) => {
|
|
21403
|
+
const distance = this.distanceToPanel(event);
|
|
21404
|
+
if (distance < this.panelDistance) {
|
|
21405
|
+
clearTimeout(this.hoverCloseTimer);
|
|
21406
|
+
this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
|
|
21407
|
+
}
|
|
21408
|
+
this.panelDistance = distance;
|
|
21409
|
+
};
|
|
21410
|
+
this.handleHoverFocusOut = (event) => {
|
|
21411
|
+
if (!this.closeWhenFocusLeaves || containsComposed$1(this.portalEl, event.relatedTarget))
|
|
21412
|
+
return;
|
|
21413
|
+
this.closeWhenFocusLeaves = false;
|
|
21414
|
+
this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
|
|
21415
|
+
};
|
|
21416
|
+
this.closeFromHover = () => {
|
|
21417
|
+
this.clearHoverTimers();
|
|
21418
|
+
if (!this.hoverOpened)
|
|
21419
|
+
return;
|
|
21420
|
+
// Content shown on hover stays while focus is in it (WCAG 1.4.13).
|
|
21421
|
+
if (containsComposed$1(this.portalEl, deepActiveElement())) {
|
|
21422
|
+
this.closeWhenFocusLeaves = true;
|
|
21423
|
+
return;
|
|
21424
|
+
}
|
|
21425
|
+
this.hide();
|
|
21426
|
+
};
|
|
21108
21427
|
/** The focus style copied into a shadow root the panel opened in, which `document.head` can't reach. */
|
|
21109
21428
|
this.shadowFocusStyle = null;
|
|
21110
21429
|
/** The dialog the panel was opened in, closed along with it. */
|
|
@@ -21125,6 +21444,85 @@ class PdsPopover {
|
|
|
21125
21444
|
event.stopPropagation();
|
|
21126
21445
|
}
|
|
21127
21446
|
};
|
|
21447
|
+
// At the end of the body or of a dialog, the panel would come last in the Tab order. The guard
|
|
21448
|
+
// after the trigger takes its place there, while the panel has a control for it to lead to.
|
|
21449
|
+
this.syncTabGuard = (event) => {
|
|
21450
|
+
if (event.key !== 'Tab')
|
|
21451
|
+
return;
|
|
21452
|
+
this.releasePanel();
|
|
21453
|
+
this.tabDirection = event.shiftKey ? 'backward' : 'forward';
|
|
21454
|
+
setTimeout(this.endTabKey);
|
|
21455
|
+
// Read on each Tab, as the panel's content can arrive after it opens.
|
|
21456
|
+
const guarding = this.guardedTabbables().length > 0;
|
|
21457
|
+
if (this.tabGuardEl != null)
|
|
21458
|
+
this.tabGuardEl.tabIndex = guarding ? 0 : -1;
|
|
21459
|
+
// Inert for this key press, the panel is reached only through the guard, either way round. A
|
|
21460
|
+
// control in another floating layer, such as a nested popover's panel, may move focus back into it.
|
|
21461
|
+
const focused = deepActiveElement();
|
|
21462
|
+
if (guarding && !containsComposed$1(this.portalEl, focused) && !closest$1(FLOATING_LAYERS, focused !== null && focused !== void 0 ? focused : document)) {
|
|
21463
|
+
this.portalEl.inert = true;
|
|
21464
|
+
}
|
|
21465
|
+
};
|
|
21466
|
+
this.endTabKey = () => {
|
|
21467
|
+
this.tabDirection = null;
|
|
21468
|
+
this.releasePanel();
|
|
21469
|
+
};
|
|
21470
|
+
this.handleTabGuardFocus = (event) => {
|
|
21471
|
+
if (this.leavingPanel)
|
|
21472
|
+
return;
|
|
21473
|
+
// An inert panel's controls aren't tabbable, so the guard would find none to send focus to.
|
|
21474
|
+
this.releasePanel();
|
|
21475
|
+
const tabbables = this.guardedTabbables();
|
|
21476
|
+
// A Tab press says which end of the panel focus comes in at; without one, where it came from does.
|
|
21477
|
+
const from = event.relatedTarget;
|
|
21478
|
+
const backward = this.tabDirection != null ? this.tabDirection === 'backward' : from != null && this.isAfterPopover(from);
|
|
21479
|
+
const target = backward ? tabbables[tabbables.length - 1] : tabbables[0];
|
|
21480
|
+
// Focus can reach the guard without a Tab keydown here (from a frame, or assistive tech) after
|
|
21481
|
+
// the panel's controls are gone. The trigger is the nearest visible place for it.
|
|
21482
|
+
if (target == null)
|
|
21483
|
+
this.returnFocusToTrigger();
|
|
21484
|
+
else
|
|
21485
|
+
target.focus();
|
|
21486
|
+
};
|
|
21487
|
+
this.handleTabFromPanel = (event) => {
|
|
21488
|
+
if (event.key !== 'Tab' || event.defaultPrevented || this.tabGuardEl == null)
|
|
21489
|
+
return;
|
|
21490
|
+
const tabbables = this.guardedTabbables();
|
|
21491
|
+
const edge = event.shiftKey ? tabbables[0] : tabbables[tabbables.length - 1];
|
|
21492
|
+
if (edge == null || deepActiveElement() !== edge)
|
|
21493
|
+
return;
|
|
21494
|
+
this.leavePanel(edge, event.shiftKey);
|
|
21495
|
+
};
|
|
21496
|
+
this.releasePanel = () => {
|
|
21497
|
+
if (this.portalEl != null)
|
|
21498
|
+
this.portalEl.inert = false;
|
|
21499
|
+
};
|
|
21500
|
+
}
|
|
21501
|
+
openOnChanged() {
|
|
21502
|
+
this.pin();
|
|
21503
|
+
this.stopListeningForHover(this.triggerEl);
|
|
21504
|
+
this.stopListeningForHover(this.portalEl);
|
|
21505
|
+
// Out of the page, connectedCallback binds them when it comes back.
|
|
21506
|
+
if (!this.isComponentMounted)
|
|
21507
|
+
return;
|
|
21508
|
+
this.listenForHover(this.triggerEl);
|
|
21509
|
+
this.listenForHover(this.portalEl);
|
|
21510
|
+
}
|
|
21511
|
+
applyPadding() {
|
|
21512
|
+
if (this.portalEl != null)
|
|
21513
|
+
this.portalEl.style.padding = this.paddingToken();
|
|
21514
|
+
}
|
|
21515
|
+
paddingToken() {
|
|
21516
|
+
switch (this.padding) {
|
|
21517
|
+
case 'none':
|
|
21518
|
+
return 'var(--pine-dimension-none)';
|
|
21519
|
+
case 'xs':
|
|
21520
|
+
return 'var(--pine-dimension-xs)';
|
|
21521
|
+
case 'sm':
|
|
21522
|
+
return 'var(--pine-dimension-sm)';
|
|
21523
|
+
default:
|
|
21524
|
+
return 'var(--pine-dimension-md)';
|
|
21525
|
+
}
|
|
21128
21526
|
}
|
|
21129
21527
|
restorePlacementDefault(newValue) {
|
|
21130
21528
|
this.placement = restoreReflectedDefault(this.el, 'placement', newValue, 'right');
|
|
@@ -21134,8 +21532,6 @@ class PdsPopover {
|
|
|
21134
21532
|
// Bind event handlers for cleanup
|
|
21135
21533
|
this.boundClickOutsideHandler = this.handleClickOutside.bind(this);
|
|
21136
21534
|
this.boundEscapeKeyHandler = this.handleEscapeKey.bind(this);
|
|
21137
|
-
this.boundScrollHandler = this.handleScroll.bind(this);
|
|
21138
|
-
this.boundResizeHandler = this.handleResize.bind(this);
|
|
21139
21535
|
// Create portal element
|
|
21140
21536
|
this.createPortal();
|
|
21141
21537
|
this.hasLoaded = true;
|
|
@@ -21176,6 +21572,48 @@ class PdsPopover {
|
|
|
21176
21572
|
// Skips values already in place, so the trigger observer's own callback doesn't loop.
|
|
21177
21573
|
return setAttributesIfChanged(this.triggerEl, { 'aria-expanded': String(this.active), 'aria-controls': this.portalEl.id });
|
|
21178
21574
|
}
|
|
21575
|
+
listenForHover(el) {
|
|
21576
|
+
if (this.openOn !== 'hover' || el == null)
|
|
21577
|
+
return;
|
|
21578
|
+
el.addEventListener('pointerenter', this.handleHoverEnter);
|
|
21579
|
+
el.addEventListener('pointerleave', this.handleHoverLeave);
|
|
21580
|
+
el.addEventListener('focusout', this.handleHoverFocusOut);
|
|
21581
|
+
}
|
|
21582
|
+
stopListeningForHover(el) {
|
|
21583
|
+
if (el == null)
|
|
21584
|
+
return;
|
|
21585
|
+
el.removeEventListener('pointerenter', this.handleHoverEnter);
|
|
21586
|
+
el.removeEventListener('pointerleave', this.handleHoverLeave);
|
|
21587
|
+
el.removeEventListener('focusout', this.handleHoverFocusOut);
|
|
21588
|
+
}
|
|
21589
|
+
distanceToPanel({ clientX, clientY }) {
|
|
21590
|
+
const panel = this.portalEl.getBoundingClientRect();
|
|
21591
|
+
return Math.hypot(Math.max(panel.left - clientX, 0, clientX - panel.right), Math.max(panel.top - clientY, 0, clientY - panel.bottom));
|
|
21592
|
+
}
|
|
21593
|
+
/**
|
|
21594
|
+
* Keeps a popover that hover opened open, closing from then on as one opened by a click does. A
|
|
21595
|
+
* manual one gives up Escape again, which it took only while hover held it.
|
|
21596
|
+
*/
|
|
21597
|
+
pin() {
|
|
21598
|
+
var _a;
|
|
21599
|
+
this.clearHoverTimers();
|
|
21600
|
+
if (!this.hoverOpened)
|
|
21601
|
+
return;
|
|
21602
|
+
this.hoverOpened = false;
|
|
21603
|
+
if (this.popoverType === 'auto')
|
|
21604
|
+
return;
|
|
21605
|
+
this.forgetOpen();
|
|
21606
|
+
(_a = this.portalEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-pds-popover-open');
|
|
21607
|
+
document.removeEventListener('keydown', this.boundEscapeKeyHandler);
|
|
21608
|
+
}
|
|
21609
|
+
clearHoverTimers() {
|
|
21610
|
+
clearTimeout(this.hoverOpenTimer);
|
|
21611
|
+
clearTimeout(this.hoverCloseTimer);
|
|
21612
|
+
this.hoverOpenTimer = undefined;
|
|
21613
|
+
this.hoverCloseTimer = undefined;
|
|
21614
|
+
this.closeWhenFocusLeaves = false;
|
|
21615
|
+
document.removeEventListener('pointermove', this.handleMoveTowardPanel);
|
|
21616
|
+
}
|
|
21179
21617
|
// componentDidLoad doesn't run again when a popover comes back, so rebuild whatever
|
|
21180
21618
|
// disconnectedCallback tore down. Each step is a no-op when nothing was.
|
|
21181
21619
|
connectedCallback() {
|
|
@@ -21185,17 +21623,19 @@ class PdsPopover {
|
|
|
21185
21623
|
this.isComponentMounted = true;
|
|
21186
21624
|
this.createPortal();
|
|
21187
21625
|
(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.handleTriggerClick);
|
|
21626
|
+
this.listenForHover(this.triggerEl);
|
|
21188
21627
|
this.observeTrigger();
|
|
21189
21628
|
this.linkTriggerToPortal();
|
|
21190
21629
|
// Still open after a move: the trigger moved, so the portal follows it, into the dialog it
|
|
21191
21630
|
// is in now, if any.
|
|
21192
21631
|
if (this.active) {
|
|
21193
21632
|
this.placePortal();
|
|
21194
|
-
|
|
21633
|
+
// autoUpdate listens to the scroll containers around where the trigger was, so it starts again.
|
|
21634
|
+
this.addScrollAndResizeListeners();
|
|
21195
21635
|
}
|
|
21196
21636
|
}
|
|
21197
21637
|
disconnectedCallback() {
|
|
21198
|
-
var _a;
|
|
21638
|
+
var _a, _b;
|
|
21199
21639
|
// Moved in one operation (a DOM morph, or a framework reparenting it), the popover is
|
|
21200
21640
|
// already back in the page. Its portal is outside the popover, so it stays open, with focus
|
|
21201
21641
|
// where it was; connectedCallback moves it to follow the popover.
|
|
@@ -21210,6 +21650,7 @@ class PdsPopover {
|
|
|
21210
21650
|
this.restorePortalContent();
|
|
21211
21651
|
this.active = false;
|
|
21212
21652
|
this.linkTriggerToPortal();
|
|
21653
|
+
this.emitOpenEvent();
|
|
21213
21654
|
this.pdsPopoverClose.emit({
|
|
21214
21655
|
componentId: this.componentId,
|
|
21215
21656
|
popoverType: this.popoverType,
|
|
@@ -21219,36 +21660,27 @@ class PdsPopover {
|
|
|
21219
21660
|
if (this.triggerEl != null) {
|
|
21220
21661
|
this.triggerEl.removeEventListener('click', this.handleTriggerClick);
|
|
21221
21662
|
}
|
|
21663
|
+
this.stopListeningForHover(this.triggerEl);
|
|
21222
21664
|
(_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
21223
21665
|
this.triggerObserver = null;
|
|
21224
21666
|
// Clean up all event listeners
|
|
21225
21667
|
this.removeLightDismissListeners();
|
|
21226
21668
|
this.removeScrollAndResizeListeners();
|
|
21227
21669
|
document.removeEventListener('submit', this.handleSubmitFromPanel, true);
|
|
21228
|
-
|
|
21229
|
-
this.
|
|
21670
|
+
document.removeEventListener('keydown', this.syncTabGuard, true);
|
|
21671
|
+
(_b = this.tabGuardEl) === null || _b === void 0 ? void 0 : _b.removeAttribute('tabindex');
|
|
21672
|
+
this.clearHoverTimers();
|
|
21673
|
+
this.hoverOpened = false;
|
|
21230
21674
|
// Remove portal from DOM
|
|
21231
21675
|
this.removePortal();
|
|
21232
21676
|
}
|
|
21233
|
-
/**
|
|
21234
|
-
* Clears any pending debounce timers
|
|
21235
|
-
*/
|
|
21236
|
-
clearDebounceTimers() {
|
|
21237
|
-
if (this.scrollDebounceTimer !== null) {
|
|
21238
|
-
clearTimeout(this.scrollDebounceTimer);
|
|
21239
|
-
this.scrollDebounceTimer = null;
|
|
21240
|
-
}
|
|
21241
|
-
if (this.resizeDebounceTimer !== null) {
|
|
21242
|
-
clearTimeout(this.resizeDebounceTimer);
|
|
21243
|
-
this.resizeDebounceTimer = null;
|
|
21244
|
-
}
|
|
21245
|
-
}
|
|
21246
21677
|
createPortal() {
|
|
21247
21678
|
var _a;
|
|
21248
21679
|
if (this.portalEl !== null)
|
|
21249
21680
|
return;
|
|
21250
21681
|
this.portalEl = document.createElement('div');
|
|
21251
21682
|
this.portalEl.className = 'pds-popover';
|
|
21683
|
+
panelOwners.set(this.portalEl, this);
|
|
21252
21684
|
// Apply all styles inline since portal is outside shadow DOM
|
|
21253
21685
|
this.portalEl.style.position = 'fixed';
|
|
21254
21686
|
this.portalEl.style.zIndex = 'var(--pine-z-index-raised)';
|
|
@@ -21260,7 +21692,7 @@ class PdsPopover {
|
|
|
21260
21692
|
this.portalEl.style.borderRadius = 'var(--pine-dimension-125)';
|
|
21261
21693
|
this.portalEl.style.boxShadow = 'var(--pine-box-shadow-200)';
|
|
21262
21694
|
this.portalEl.style.margin = 'var(--pine-dimension-none)';
|
|
21263
|
-
this.portalEl.style.padding =
|
|
21695
|
+
this.portalEl.style.padding = this.paddingToken();
|
|
21264
21696
|
// Generate unique ID
|
|
21265
21697
|
if (!this.componentId) {
|
|
21266
21698
|
(_a = this.generatedPortalId) !== null && _a !== void 0 ? _a : (this.generatedPortalId = `pds-popover-portal-${PdsPopover.instanceCounter++}`);
|
|
@@ -21274,6 +21706,8 @@ class PdsPopover {
|
|
|
21274
21706
|
// Add global focus styles to match Pine design system
|
|
21275
21707
|
// This is done after appending to ensure it's part of the document and can access CSS variables
|
|
21276
21708
|
this.addPortalFocusStyles();
|
|
21709
|
+
this.listenForHover(this.portalEl);
|
|
21710
|
+
this.portalEl.addEventListener('keydown', this.handleTabFromPanel);
|
|
21277
21711
|
}
|
|
21278
21712
|
/**
|
|
21279
21713
|
* Adds Pine design system focus styles and dark mode border to the portal element
|
|
@@ -21401,27 +21835,40 @@ class PdsPopover {
|
|
|
21401
21835
|
// Update portal content with latest slot content
|
|
21402
21836
|
this.updatePortalContent();
|
|
21403
21837
|
// Show portal. The attribute tells a modal around it that this popover takes Escape first; only
|
|
21404
|
-
// an auto popover listens for Escape.
|
|
21405
|
-
if (this.popoverType === 'auto')
|
|
21838
|
+
// an auto popover, or one hover opened, listens for Escape.
|
|
21839
|
+
if (this.popoverType === 'auto' || this.hoverOpened)
|
|
21406
21840
|
this.portalEl.setAttribute('data-pds-popover-open', '');
|
|
21407
21841
|
this.portalEl.style.display = 'block';
|
|
21408
21842
|
this.portalEl.style.opacity = '1';
|
|
21409
21843
|
this.portalEl.style.visibility = 'visible';
|
|
21410
|
-
// Position the popover
|
|
21411
|
-
requestAnimationFrame(() => {
|
|
21412
|
-
if (!this.isComponentMounted)
|
|
21413
|
-
return;
|
|
21414
|
-
this.handlePopoverPositioning();
|
|
21415
|
-
});
|
|
21416
|
-
// Add scroll and resize listeners for repositioning (always)
|
|
21844
|
+
// Position the popover now, and again whenever its trigger or the page moves or resizes
|
|
21417
21845
|
this.addScrollAndResizeListeners();
|
|
21418
21846
|
document.addEventListener('submit', this.handleSubmitFromPanel, true);
|
|
21419
|
-
|
|
21847
|
+
document.addEventListener('keydown', this.syncTabGuard, true);
|
|
21848
|
+
// Add document listeners for light dismiss and escape key (auto type only), or for the escape
|
|
21849
|
+
// key alone while hover holds a manual popover open
|
|
21420
21850
|
if (this.popoverType === 'auto') {
|
|
21421
|
-
|
|
21851
|
+
popoversTakingEscape.push(this);
|
|
21422
21852
|
this.addLightDismissListeners();
|
|
21423
21853
|
}
|
|
21424
|
-
|
|
21854
|
+
else if (this.hoverOpened) {
|
|
21855
|
+
popoversTakingEscape.push(this);
|
|
21856
|
+
document.addEventListener('keydown', this.boundEscapeKeyHandler);
|
|
21857
|
+
}
|
|
21858
|
+
// Emit open event once the panel is positioned, with the side it took already on it. A reconnect, a
|
|
21859
|
+
// trigger swap or another show() can start a newer run meanwhile, which drops this one, so wait for the latest.
|
|
21860
|
+
this.openEventPending = true;
|
|
21861
|
+
let positioning;
|
|
21862
|
+
do {
|
|
21863
|
+
positioning = this.positioning;
|
|
21864
|
+
await positioning;
|
|
21865
|
+
} while (positioning !== this.positioning);
|
|
21866
|
+
this.emitOpenEvent();
|
|
21867
|
+
}
|
|
21868
|
+
emitOpenEvent() {
|
|
21869
|
+
if (!this.openEventPending)
|
|
21870
|
+
return;
|
|
21871
|
+
this.openEventPending = false;
|
|
21425
21872
|
this.pdsPopoverOpen.emit({
|
|
21426
21873
|
componentId: this.componentId,
|
|
21427
21874
|
popoverType: this.popoverType,
|
|
@@ -21431,9 +21878,12 @@ class PdsPopover {
|
|
|
21431
21878
|
* Closes the popover programmatically
|
|
21432
21879
|
*/
|
|
21433
21880
|
async hide() {
|
|
21881
|
+
var _a;
|
|
21882
|
+
this.clearHoverTimers();
|
|
21434
21883
|
if (!this.active || !this.portalEl)
|
|
21435
21884
|
return;
|
|
21436
21885
|
this.active = false;
|
|
21886
|
+
this.hoverOpened = false;
|
|
21437
21887
|
this.unwatchDialogClose();
|
|
21438
21888
|
// Restoring the content drops its focus to the body, so check where focus is first. In a
|
|
21439
21889
|
// shadow root, document.activeElement is only its host.
|
|
@@ -21444,6 +21894,7 @@ class PdsPopover {
|
|
|
21444
21894
|
// Hide portal. The dark-mode border set in a shadow root is worked out again on the next open.
|
|
21445
21895
|
this.portalEl.style.border = '';
|
|
21446
21896
|
this.portalEl.removeAttribute('data-pds-popover-open');
|
|
21897
|
+
this.portalEl.removeAttribute('data-pds-popover-placement');
|
|
21447
21898
|
this.portalEl.style.display = 'none';
|
|
21448
21899
|
this.portalEl.style.opacity = '0';
|
|
21449
21900
|
this.portalEl.style.visibility = 'hidden';
|
|
@@ -21457,8 +21908,11 @@ class PdsPopover {
|
|
|
21457
21908
|
this.removeLightDismissListeners();
|
|
21458
21909
|
this.removeScrollAndResizeListeners();
|
|
21459
21910
|
document.removeEventListener('submit', this.handleSubmitFromPanel, true);
|
|
21460
|
-
|
|
21461
|
-
this.
|
|
21911
|
+
document.removeEventListener('keydown', this.syncTabGuard, true);
|
|
21912
|
+
(_a = this.tabGuardEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('tabindex');
|
|
21913
|
+
this.releasePanel();
|
|
21914
|
+
// Closed before its first position resolved, it still announces the open before the close.
|
|
21915
|
+
this.emitOpenEvent();
|
|
21462
21916
|
// Emit close event
|
|
21463
21917
|
this.pdsPopoverClose.emit({
|
|
21464
21918
|
componentId: this.componentId,
|
|
@@ -21470,10 +21924,10 @@ class PdsPopover {
|
|
|
21470
21924
|
*/
|
|
21471
21925
|
async toggle() {
|
|
21472
21926
|
if (this.active) {
|
|
21473
|
-
this.hide();
|
|
21927
|
+
await this.hide();
|
|
21474
21928
|
}
|
|
21475
21929
|
else {
|
|
21476
|
-
this.show();
|
|
21930
|
+
await this.show();
|
|
21477
21931
|
}
|
|
21478
21932
|
}
|
|
21479
21933
|
/**
|
|
@@ -21512,9 +21966,9 @@ class PdsPopover {
|
|
|
21512
21966
|
this.portalEl.style.border = root instanceof ShadowRoot && closest$1('[data-theme="dark"]', this.el) ? 'var(--pine-border)' : '';
|
|
21513
21967
|
}
|
|
21514
21968
|
forgetOpen() {
|
|
21515
|
-
const index =
|
|
21969
|
+
const index = popoversTakingEscape.indexOf(this);
|
|
21516
21970
|
if (index >= 0)
|
|
21517
|
-
|
|
21971
|
+
popoversTakingEscape.splice(index, 1);
|
|
21518
21972
|
}
|
|
21519
21973
|
/**
|
|
21520
21974
|
* Whether an Escape is this popover's. One from a dialog the popover isn't in belongs to that
|
|
@@ -21557,19 +22011,62 @@ class PdsPopover {
|
|
|
21557
22011
|
document.removeEventListener('click', this.boundClickOutsideHandler, true);
|
|
21558
22012
|
document.removeEventListener('keydown', this.boundEscapeKeyHandler);
|
|
21559
22013
|
}
|
|
22014
|
+
/**
|
|
22015
|
+
* The panel's controls that Tab reaches through the guard. None when the panel sits right after
|
|
22016
|
+
* the popover, in a dialog, where it's already next in the Tab order.
|
|
22017
|
+
*/
|
|
22018
|
+
guardedTabbables() {
|
|
22019
|
+
if (this.portalEl == null || this.el.nextElementSibling === this.portalEl)
|
|
22020
|
+
return [];
|
|
22021
|
+
return tabbableIn(this.portalEl);
|
|
22022
|
+
}
|
|
22023
|
+
isAfterPopover(node) {
|
|
22024
|
+
if (containsComposed$1(this.el, node))
|
|
22025
|
+
return false;
|
|
22026
|
+
return isPosition(positionAcrossTrees(this.el, node), Node.DOCUMENT_POSITION_FOLLOWING);
|
|
22027
|
+
}
|
|
22028
|
+
/**
|
|
22029
|
+
* Moves focus to the guard without preventing the Tab, so the browser's Tab carries on from there.
|
|
22030
|
+
* Inert until then, the panel can't be where it lands.
|
|
22031
|
+
*/
|
|
22032
|
+
leavePanel(edge, backward) {
|
|
22033
|
+
var _a, _b;
|
|
22034
|
+
this.leavingPanel = true;
|
|
22035
|
+
(_a = this.tabGuardEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
22036
|
+
this.leavingPanel = false;
|
|
22037
|
+
this.portalEl.inert = true;
|
|
22038
|
+
setTimeout(() => this.finishLeavingPanel(edge));
|
|
22039
|
+
// Last in another popover's panel, the guard hands the Tab on to that popover's own guard.
|
|
22040
|
+
const outer = panelOwners.get(closest$1('.pds-popover', this.el));
|
|
22041
|
+
const outerTabbables = (_b = outer === null || outer === void 0 ? void 0 : outer.guardedTabbables()) !== null && _b !== void 0 ? _b : [];
|
|
22042
|
+
if (!backward && outerTabbables[outerTabbables.length - 1] === this.tabGuardEl)
|
|
22043
|
+
outer.leavePanel(edge, false);
|
|
22044
|
+
}
|
|
22045
|
+
// With nowhere for the browser's Tab to go, focus would stay on the invisible guard.
|
|
22046
|
+
finishLeavingPanel(edge) {
|
|
22047
|
+
var _a;
|
|
22048
|
+
this.releasePanel();
|
|
22049
|
+
if (this.active && ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === this.tabGuardEl)
|
|
22050
|
+
edge.focus();
|
|
22051
|
+
}
|
|
21560
22052
|
/**
|
|
21561
22053
|
* Adds scroll and resize listeners for repositioning
|
|
21562
22054
|
*/
|
|
21563
22055
|
addScrollAndResizeListeners() {
|
|
21564
|
-
|
|
21565
|
-
|
|
22056
|
+
this.removeScrollAndResizeListeners();
|
|
22057
|
+
if (this.triggerEl == null || this.portalEl == null)
|
|
22058
|
+
return;
|
|
22059
|
+
this.stopAutoUpdate = autoUpdate(this.triggerEl, this.portalEl, () => {
|
|
22060
|
+
this.positioning = this.handlePopoverPositioning().catch(error => console.warn('pds-popover: failed to position the panel', error));
|
|
22061
|
+
});
|
|
21566
22062
|
}
|
|
21567
22063
|
/**
|
|
21568
22064
|
* Removes scroll and resize listeners
|
|
21569
22065
|
*/
|
|
21570
22066
|
removeScrollAndResizeListeners() {
|
|
21571
|
-
|
|
21572
|
-
|
|
22067
|
+
var _a;
|
|
22068
|
+
(_a = this.stopAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
22069
|
+
this.stopAutoUpdate = null;
|
|
21573
22070
|
}
|
|
21574
22071
|
/**
|
|
21575
22072
|
* Handles clicks outside the popover for light dismiss (auto type only)
|
|
@@ -21623,7 +22120,7 @@ class PdsPopover {
|
|
|
21623
22120
|
return;
|
|
21624
22121
|
// Like the native Popover API, Escape closes only the top popover: the last one opened that
|
|
21625
22122
|
// it applies to. Every open popover hears it, so each checks whether it's that one.
|
|
21626
|
-
const top = [...
|
|
22123
|
+
const top = [...popoversTakingEscape].reverse().find(popover => popover.takesEscapeFrom(event));
|
|
21627
22124
|
if (top !== this)
|
|
21628
22125
|
return;
|
|
21629
22126
|
// Take the key, so the dialog or modal around it doesn't close too.
|
|
@@ -21633,125 +22130,47 @@ class PdsPopover {
|
|
|
21633
22130
|
this.hide();
|
|
21634
22131
|
}
|
|
21635
22132
|
/**
|
|
21636
|
-
*
|
|
21637
|
-
|
|
21638
|
-
handleScroll() {
|
|
21639
|
-
if (!this.active)
|
|
21640
|
-
return;
|
|
21641
|
-
if (this.scrollDebounceTimer !== null) {
|
|
21642
|
-
clearTimeout(this.scrollDebounceTimer);
|
|
21643
|
-
}
|
|
21644
|
-
this.scrollDebounceTimer = setTimeout(() => {
|
|
21645
|
-
this.handlePopoverPositioning();
|
|
21646
|
-
this.scrollDebounceTimer = null;
|
|
21647
|
-
}, 10); // 10ms debounce for smooth repositioning
|
|
21648
|
-
}
|
|
21649
|
-
/**
|
|
21650
|
-
* Handles resize events to reposition the popover (debounced for performance)
|
|
22133
|
+
* Positions the popover relative to its trigger element, flipping to the opposite side when only that side has
|
|
22134
|
+
* room and shifting to stay 8px inside the viewport. The side it takes goes on the panel's `data-pds-popover-placement`.
|
|
21651
22135
|
*/
|
|
21652
|
-
|
|
21653
|
-
|
|
21654
|
-
|
|
21655
|
-
if (this.
|
|
21656
|
-
clearTimeout(this.resizeDebounceTimer);
|
|
21657
|
-
}
|
|
21658
|
-
this.resizeDebounceTimer = setTimeout(() => {
|
|
21659
|
-
this.handlePopoverPositioning();
|
|
21660
|
-
this.resizeDebounceTimer = null;
|
|
21661
|
-
}, 100); // 100ms debounce for resize
|
|
21662
|
-
}
|
|
21663
|
-
/**
|
|
21664
|
-
* Positions the popover relative to its trigger element
|
|
21665
|
-
*/
|
|
21666
|
-
handlePopoverPositioning() {
|
|
21667
|
-
// Prevent repositioning loops
|
|
21668
|
-
if (this.isRepositioning) {
|
|
21669
|
-
return;
|
|
21670
|
-
}
|
|
21671
|
-
this.isRepositioning = true;
|
|
21672
|
-
if (this.triggerEl == null || this.portalEl == null) {
|
|
21673
|
-
this.isRepositioning = false;
|
|
22136
|
+
async handlePopoverPositioning() {
|
|
22137
|
+
// Counted before the guards, so a run still in flight is dropped even when this one can't position.
|
|
22138
|
+
const run = ++this.positioningRun;
|
|
22139
|
+
if (this.triggerEl == null || this.portalEl == null)
|
|
21674
22140
|
return;
|
|
21675
|
-
}
|
|
21676
|
-
const triggerRect = this.triggerEl.getBoundingClientRect();
|
|
21677
|
-
const popoverRect = this.portalEl.getBoundingClientRect();
|
|
21678
22141
|
// Safety check: ensure trigger has valid dimensions (is rendered and visible)
|
|
21679
|
-
|
|
21680
|
-
|
|
22142
|
+
const triggerRect = this.triggerEl.getBoundingClientRect();
|
|
22143
|
+
if (triggerRect.width === 0 || triggerRect.height === 0)
|
|
21681
22144
|
return;
|
|
21682
|
-
|
|
21683
|
-
|
|
21684
|
-
|
|
21685
|
-
|
|
21686
|
-
|
|
21687
|
-
|
|
21688
|
-
|
|
21689
|
-
|
|
21690
|
-
|
|
21691
|
-
|
|
21692
|
-
|
|
21693
|
-
|
|
21694
|
-
break;
|
|
21695
|
-
case 'top-end':
|
|
21696
|
-
top = triggerRect.top - popoverRect.height - offset;
|
|
21697
|
-
left = triggerRect.right - popoverRect.width;
|
|
21698
|
-
break;
|
|
21699
|
-
case 'right':
|
|
21700
|
-
top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
|
|
21701
|
-
left = triggerRect.right + offset;
|
|
21702
|
-
break;
|
|
21703
|
-
case 'right-start':
|
|
21704
|
-
top = triggerRect.top;
|
|
21705
|
-
left = triggerRect.right + offset;
|
|
21706
|
-
break;
|
|
21707
|
-
case 'right-end':
|
|
21708
|
-
top = triggerRect.bottom - popoverRect.height;
|
|
21709
|
-
left = triggerRect.right + offset;
|
|
21710
|
-
break;
|
|
21711
|
-
case 'bottom':
|
|
21712
|
-
top = triggerRect.bottom + offset;
|
|
21713
|
-
left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
|
|
21714
|
-
break;
|
|
21715
|
-
case 'bottom-start':
|
|
21716
|
-
top = triggerRect.bottom + offset;
|
|
21717
|
-
left = triggerRect.left;
|
|
21718
|
-
break;
|
|
21719
|
-
case 'bottom-end':
|
|
21720
|
-
top = triggerRect.bottom + offset;
|
|
21721
|
-
left = triggerRect.right - popoverRect.width;
|
|
21722
|
-
break;
|
|
21723
|
-
case 'left':
|
|
21724
|
-
top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
|
|
21725
|
-
left = triggerRect.left - popoverRect.width - offset;
|
|
21726
|
-
break;
|
|
21727
|
-
case 'left-start':
|
|
21728
|
-
top = triggerRect.top;
|
|
21729
|
-
left = triggerRect.left - popoverRect.width - offset;
|
|
21730
|
-
break;
|
|
21731
|
-
case 'left-end':
|
|
21732
|
-
top = triggerRect.bottom - popoverRect.height;
|
|
21733
|
-
left = triggerRect.left - popoverRect.width - offset;
|
|
21734
|
-
break;
|
|
21735
|
-
}
|
|
21736
|
-
this.portalEl.style.top = `${top}px`;
|
|
21737
|
-
this.portalEl.style.left = `${left}px`;
|
|
22145
|
+
const portal = this.portalEl;
|
|
22146
|
+
const { x: left, y: top, placement } = await computePosition(this.triggerEl, portal, {
|
|
22147
|
+
placement: this.placement,
|
|
22148
|
+
strategy: 'fixed',
|
|
22149
|
+
// With no room on either side, stay on the preferred side: the side that overflows less can still push
|
|
22150
|
+
// a tall panel's start above the viewport.
|
|
22151
|
+
middleware: [offset(8), flip({ fallbackStrategy: 'initialPlacement' }), shift({ padding: 8 })],
|
|
22152
|
+
platform: viewportPlatform,
|
|
22153
|
+
});
|
|
22154
|
+
if (!this.active || run !== this.positioningRun || portal !== this.portalEl)
|
|
22155
|
+
return;
|
|
22156
|
+
portal.setAttribute('data-pds-popover-placement', placement);
|
|
21738
22157
|
// `position: fixed` measures from the viewport unless an ancestor becomes its containing block,
|
|
21739
|
-
// as a modal dialog does with its backdrop filter.
|
|
21740
|
-
const
|
|
21741
|
-
|
|
21742
|
-
|
|
21743
|
-
this.portalEl.style.left = `${2 * left - placed.left}px`;
|
|
21744
|
-
}
|
|
21745
|
-
// Reset the repositioning guard after a short delay
|
|
21746
|
-
setTimeout(() => {
|
|
21747
|
-
this.isRepositioning = false;
|
|
21748
|
-
}, 16); // ~1 frame at 60fps
|
|
22158
|
+
// as a modal dialog does with its backdrop filter. Offset by however far that block's corner is from the viewport's.
|
|
22159
|
+
const origin = containingBlockOrigin(portal);
|
|
22160
|
+
portal.style.top = `${top - origin.top}px`;
|
|
22161
|
+
portal.style.left = `${left - origin.left}px`;
|
|
21749
22162
|
}
|
|
21750
22163
|
render() {
|
|
21751
|
-
return (hAsync(Host, { key: '
|
|
22164
|
+
return (hAsync(Host, { key: '85422eb7544a4795ce78b51684b7224a5d856a4e', id: this.componentId }, hAsync("span", { key: '6fe9c827ed4d46ca723d6013f296faf80ba31366', class: "pds-popover__trigger-wrapper" }, hAsync("slot", { key: '970d1974d2be1451e670a36e7d2ccdc5979595bb', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), hAsync("span", { key: '0c76f76286a30d8e6e948bd0abab3317b3673aa6', class: "pds-popover__tab-guard", ref: (el) => (this.tabGuardEl = el !== null && el !== void 0 ? el : null), onFocus: this.handleTabGuardFocus }), hAsync("div", { key: '692c45e93899e74a3d5970f3a3625f6115ab63b0', class: "pds-popover__content-slot-wrapper" }, hAsync("slot", { key: 'f1566e0eb1eb08626f2a8285447702ce96b09f4d', onSlotchange: this.handleContentSlotChange }))));
|
|
21752
22165
|
}
|
|
21753
22166
|
get el() { return getElement(this); }
|
|
21754
22167
|
static get watchers() { return {
|
|
22168
|
+
"openOn": [{
|
|
22169
|
+
"openOnChanged": 0
|
|
22170
|
+
}],
|
|
22171
|
+
"padding": [{
|
|
22172
|
+
"applyPadding": 0
|
|
22173
|
+
}],
|
|
21755
22174
|
"placement": [{
|
|
21756
22175
|
"restorePlacementDefault": 0
|
|
21757
22176
|
}]
|
|
@@ -21762,9 +22181,11 @@ class PdsPopover {
|
|
|
21762
22181
|
"$tagName$": "pds-popover",
|
|
21763
22182
|
"$members$": {
|
|
21764
22183
|
"popoverTargetAction": [1, "popover-target-action"],
|
|
22184
|
+
"openOn": [1, "open-on"],
|
|
21765
22185
|
"popoverType": [1, "popover-type"],
|
|
21766
22186
|
"componentId": [1, "component-id"],
|
|
21767
22187
|
"maxWidth": [2, "max-width"],
|
|
22188
|
+
"padding": [1],
|
|
21768
22189
|
"placement": [1537],
|
|
21769
22190
|
"active": [32],
|
|
21770
22191
|
"show": [64],
|
|
@@ -21813,7 +22234,7 @@ class PdsProgress {
|
|
|
21813
22234
|
const normalizedFillColor = normalizeColorValue$1(this.fillColor);
|
|
21814
22235
|
const hostClass = this.animated ? { 'is-animated': this.animated } : '';
|
|
21815
22236
|
this.hostKeeper.record(hostClass);
|
|
21816
|
-
return (hAsync(Host, { key: '
|
|
22237
|
+
return (hAsync(Host, { key: '6d2151cdd1f65b33a7478e5ac12df711d8252d1f', class: hostClass }, hAsync("div", { key: '4a902c6c7d51fe8e8a778e1fa24bdbf95d625b1f', class: "pds-progress" }, hAsync("label", { key: 'c50955234a7eee05cdf47531e25b4413f206e416', class: "pds-progress__label", htmlFor: this.componentId }, this.label), hAsync("progress", { key: 'c54ad90f7b3fcf3368afca4c5618949f1a370114', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && hAsync("div", { key: '6b3e3f42f04a516ef7992d1f8bc967be432f55bb', class: "pds-progress__percentage" }, this.percent, "%")));
|
|
21817
22238
|
}
|
|
21818
22239
|
get el() { return getElement(this); }
|
|
21819
22240
|
static get style() { return pdsProgressCss(); }
|
|
@@ -21848,7 +22269,7 @@ class PdsProperty {
|
|
|
21848
22269
|
this.icon = 'star';
|
|
21849
22270
|
}
|
|
21850
22271
|
render() {
|
|
21851
|
-
return (hAsync(Host, { key: '
|
|
22272
|
+
return (hAsync(Host, { key: '198ffd747b7a84a6f58a1b072890fc8bd3ed93aa', id: this.componentId }, hAsync("pds-box", { key: 'be71f3d96efea0a45f357d888f71dbe5ad8b68d6', "align-items": "center", gap: "xs" }, hAsync("pds-icon", { key: '1a52407e00b158d5e6a515ad4b07ed3407d31f75', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), hAsync("slot", { key: '46ac5019b27bdd079c7853abeef8f7c240d19c2c' }))));
|
|
21852
22273
|
}
|
|
21853
22274
|
static get style() { return pdsPropertyCss(); }
|
|
21854
22275
|
static get cmpMeta() { return {
|
|
@@ -21866,10 +22287,10 @@ class PdsProperty {
|
|
|
21866
22287
|
|
|
21867
22288
|
const labelCss$3 = () => `.sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
|
|
21868
22289
|
|
|
21869
|
-
const pdsRadioCss = () => `.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-text-primary);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__content-wrapper.sc-pds-radio{-ms-flex:1;flex:1;min-width:0;overflow-wrap:anywhere}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio::after{cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}`;
|
|
22290
|
+
const pdsRadioCss = () => `.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-text-primary);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__content-wrapper.sc-pds-radio{-ms-flex:1;flex:1;min-width:0;overflow-wrap:anywhere}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio::after{cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);cursor:pointer;font:var(--pine-typography-body);min-block-size:var(--pine-dimension-xl);padding:0 var(--pine-dimension-sm);-webkit-transition:border-color var(--pine-motion-duration-fast) ease;transition:border-color var(--pine-motion-duration-fast) ease}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio span.sc-pds-radio{min-width:0;overflow-wrap:anywhere}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:hover{border-color:var(--pine-color-text)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:checked){border-color:var(--pine-color-text-active);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:focus-visible){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-label-disabled);cursor:not-allowed}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled:checked){border-color:var(--pine-color-text-label-disabled);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-label-disabled);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-label-disabled)}@media (forced-colors: active){.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled){border-color:GrayText}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled:checked){border-color:GrayText;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}.pds-radio--pill.sc-pds-radio-h .pds-radio__message.sc-pds-radio{-webkit-margin-start:0;margin-inline-start:0}`;
|
|
21870
22291
|
|
|
21871
22292
|
/**
|
|
21872
|
-
* @slot image - Custom image content to display instead of the default radio input
|
|
22293
|
+
* @slot image - Custom image content to display instead of the default radio input. Ignored when `variant` is `pill`.
|
|
21873
22294
|
* @part image-container - The container for the image
|
|
21874
22295
|
* @lightDom renders-markup
|
|
21875
22296
|
*/
|
|
@@ -21891,7 +22312,7 @@ class PdsRadio {
|
|
|
21891
22312
|
*/
|
|
21892
22313
|
this.disabled = false;
|
|
21893
22314
|
/**
|
|
21894
|
-
* Adds a border around the radio component for better visual separation.
|
|
22315
|
+
* Adds a border around the radio component for better visual separation. Ignored when `variant` is `pill`.
|
|
21895
22316
|
* @defaultValue false
|
|
21896
22317
|
*/
|
|
21897
22318
|
this.hasBorder = false;
|
|
@@ -21905,6 +22326,11 @@ class PdsRadio {
|
|
|
21905
22326
|
* @defaultValue false
|
|
21906
22327
|
*/
|
|
21907
22328
|
this.required = false;
|
|
22329
|
+
/**
|
|
22330
|
+
* Sets the style variant of the radio. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
|
|
22331
|
+
* @defaultValue default
|
|
22332
|
+
*/
|
|
22333
|
+
this.variant = 'default';
|
|
21908
22334
|
this.handleRadioChange = (e) => {
|
|
21909
22335
|
if (this.disabled) {
|
|
21910
22336
|
return;
|
|
@@ -21926,6 +22352,9 @@ class PdsRadio {
|
|
|
21926
22352
|
hasImage() {
|
|
21927
22353
|
return this._hasImage;
|
|
21928
22354
|
}
|
|
22355
|
+
isPill() {
|
|
22356
|
+
return this.variant === 'pill';
|
|
22357
|
+
}
|
|
21929
22358
|
classNames() {
|
|
21930
22359
|
const classNames = [];
|
|
21931
22360
|
if (this.invalid) {
|
|
@@ -21934,10 +22363,14 @@ class PdsRadio {
|
|
|
21934
22363
|
if (this.disabled) {
|
|
21935
22364
|
classNames.push('is-disabled');
|
|
21936
22365
|
}
|
|
21937
|
-
|
|
22366
|
+
// A pill is its own bordered shape, so has-border doesn't stack a card around it.
|
|
22367
|
+
if (this.hasBorder && !this.isPill()) {
|
|
21938
22368
|
classNames.push('has-border');
|
|
21939
22369
|
}
|
|
21940
|
-
if (this.
|
|
22370
|
+
if (this.isPill()) {
|
|
22371
|
+
classNames.push('pds-radio--pill');
|
|
22372
|
+
}
|
|
22373
|
+
if (this.hasImage() && !this.isPill()) {
|
|
21941
22374
|
classNames.push('has-image');
|
|
21942
22375
|
}
|
|
21943
22376
|
return classNames.join(' ');
|
|
@@ -21967,13 +22400,14 @@ class PdsRadio {
|
|
|
21967
22400
|
}
|
|
21968
22401
|
render() {
|
|
21969
22402
|
const renderLabelAndMessages = () => [
|
|
21970
|
-
hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: '
|
|
22403
|
+
hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: 'fdd83248666907fa25c5406cdedcd0e6f8d45f50', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() || this.isPill() ? 'visually-hidden' : '' }), hAsync("span", { key: '73166ffd57cdb1f3b9e2b61fe880216b23a6510b', class: this.hideLabel && !this.isPill() ? 'visually-hidden' : '' }, this.label)),
|
|
21971
22404
|
this.helperMessage && (hAsync("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
|
|
21972
|
-
this.errorMessage && (hAsync("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '
|
|
22405
|
+
this.errorMessage && (hAsync("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'e5bca81578382181b6fce61fa6830fd60e54234a', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))
|
|
21973
22406
|
];
|
|
21974
22407
|
const hostClass = this.classNames();
|
|
21975
22408
|
this.hostKeeper.record(hostClass);
|
|
21976
|
-
|
|
22409
|
+
const showImage = this.hasImage() && !this.isPill();
|
|
22410
|
+
return (hAsync(Host, { key: '4cf39a988cc7642234ff62e7fa2f0d08b09e7d25', class: hostClass }, showImage && (hAsync("div", { key: '7a88d32f896ad4696ea46b13f9ef01e7df0a1c3e', class: "pds-radio__image-container", part: "image-container" }, hAsync("slot", { key: 'eb8399263443d36ab91c0875602d0dc31f036058', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), showImage ? (hAsync("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
|
|
21977
22411
|
}
|
|
21978
22412
|
get el() { return getElement(this); }
|
|
21979
22413
|
static get style() { return labelCss$3() + pdsRadioCss(); }
|
|
@@ -21993,6 +22427,7 @@ class PdsRadio {
|
|
|
21993
22427
|
"name": [1],
|
|
21994
22428
|
"required": [4],
|
|
21995
22429
|
"value": [1],
|
|
22430
|
+
"variant": [1],
|
|
21996
22431
|
"_hasImage": [32]
|
|
21997
22432
|
},
|
|
21998
22433
|
"$listeners$": undefined,
|
|
@@ -22165,13 +22600,13 @@ class PdsRadioGroup {
|
|
|
22165
22600
|
render() {
|
|
22166
22601
|
const gapValue = this.getGapValue();
|
|
22167
22602
|
const ariaDescribedBy = this.getAriaDescribedBy();
|
|
22168
|
-
return (hAsync(Host, { key: '
|
|
22603
|
+
return (hAsync(Host, { key: 'aaf53113f06a0f49706e53735701fba64e79cb4d', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
|
|
22169
22604
|
'--pds-radio-group-gap': gapValue,
|
|
22170
|
-
} }, this.groupLabel && (hAsync("div", { key: '
|
|
22605
|
+
} }, this.groupLabel && (hAsync("div", { key: '4be5e43146bf348929e45498107862aaca161644', class: "pds-radio-group__label" }, this.groupLabel)), hAsync("div", { key: 'b4a1b870c1a7167b8dcbcf0a11808bbd9a8cec4e', class: {
|
|
22171
22606
|
'pds-radio-group__radios': true,
|
|
22172
22607
|
'pds-radio-group__radios--row': this.direction === 'row',
|
|
22173
22608
|
'pds-radio-group__radios--column': this.direction === 'column',
|
|
22174
|
-
} }, hAsync("slot", { key: '
|
|
22609
|
+
} }, hAsync("slot", { key: '2d841cc69c35a4f9da933bbb33c1384ca343e077', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (hAsync("div", { key: 'a09bb9e739570c06dc1907cb4e2dceecca36f7d3', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("div", { key: 'b8fe891cc4b8683d18c19b3b4ddb70212185b954', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '9a15d81d8303eeb5a928b96c760f6b15e536e0dc', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
|
|
22175
22610
|
}
|
|
22176
22611
|
get el() { return getElement(this); }
|
|
22177
22612
|
static get watchers() { return {
|
|
@@ -22280,7 +22715,7 @@ class PdsRow {
|
|
|
22280
22715
|
'min-height': this.minHeight,
|
|
22281
22716
|
}));
|
|
22282
22717
|
this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
|
|
22283
|
-
return hAsync(Host, { key: '
|
|
22718
|
+
return hAsync(Host, { key: '589ee3251a4ee1d7824c8e2fa3e214de5466c3db', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
|
|
22284
22719
|
}
|
|
22285
22720
|
get el() { return getElement(this); }
|
|
22286
22721
|
static get style() { return pdsRowCss(); }
|
|
@@ -22310,6 +22745,25 @@ const labelCss$2 = () => `:host{display:inline-block}:host([aria-disabled=true])
|
|
|
22310
22745
|
|
|
22311
22746
|
const pdsSelectCss = () => `:host{--pds-select-background:var(--pine-color-background-container);--pds-select-border:var(--pine-border);--pds-select-border-radius:var(--pine-dimension-125);--pds-select-border-radius-start-end:var(--pine-dimension-125);--pds-select-border-radius-start-start:var(--pine-dimension-125);--pds-select-border-radius-end-end:var(--pine-dimension-125);--pds-select-border-radius-end-start:var(--pine-dimension-125);--pds-select-min-height:36px;--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger)}:host .hidden,:host :host([hidden]){display:none}.pds-select{color:var(--pine-color-text);display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:"label label" "field field" "message message";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}.pds-select__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-area:label;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--pds-select-background);border:var(--pds-select-border);border-end-end-radius:var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));border-end-start-radius:var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));border-start-end-radius:var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));border-start-start-radius:var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));color:var(--pine-color-text);font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-select-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);-webkit-padding-end:var(--pine-dimension-450);padding-inline-end:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-color-red-950)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-disabled) .pds-select__select-icon{color:var(--pine-color-text-disabled)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) :host(.is-invalid) select{background-color:var(--pine-color-red-950)}:host(.is-invalid) select:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-accent);color:var(--pine-color-text-accent)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:hover:not(:disabled){border-color:var(--pine-color-accent-hover)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:focus-visible{outline-color:var(--pine-color-focus-ring)}:host([highlight]:not(.is-disabled):not(.is-invalid)) .pds-select__select-icon{color:var(--pine-color-text-accent)}.pds-select__error-message,.pds-select__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-select__error-message{color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-select__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:var(--pds-select-min-height);pointer-events:none;position:relative;z-index:calc(var(--pine-z-index-raised) - 1)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
|
|
22312
22747
|
|
|
22748
|
+
/** The tags of an option list in order, optgroup contents included: equal shapes can be patched in place. */
|
|
22749
|
+
const shapeOf = (items) => items.map((item) => item.tagName + (item.tagName === 'OPTGROUP' ? `(${shapeOf(Array.from(item.children))})` : '')).join();
|
|
22750
|
+
/** Brings an existing option or optgroup up to date with its copy, keeping the element itself. */
|
|
22751
|
+
const patchInPlace = (target, copy) => {
|
|
22752
|
+
Array.from(target.attributes).forEach(({ name }) => {
|
|
22753
|
+
if (!copy.hasAttribute(name))
|
|
22754
|
+
target.removeAttribute(name);
|
|
22755
|
+
});
|
|
22756
|
+
Array.from(copy.attributes).forEach(({ name, value }) => {
|
|
22757
|
+
if (target.getAttribute(name) !== value)
|
|
22758
|
+
target.setAttribute(name, value);
|
|
22759
|
+
});
|
|
22760
|
+
if (copy.tagName === 'OPTGROUP') {
|
|
22761
|
+
Array.from(copy.children).forEach((child, index) => patchInPlace(target.children[index], child));
|
|
22762
|
+
}
|
|
22763
|
+
else if (target.textContent !== copy.textContent) {
|
|
22764
|
+
target.textContent = copy.textContent;
|
|
22765
|
+
}
|
|
22766
|
+
};
|
|
22313
22767
|
/**
|
|
22314
22768
|
* @slot action - Content to be displayed in the label area, typically for help icons or links
|
|
22315
22769
|
*/
|
|
@@ -22321,6 +22775,9 @@ class PdsSelect {
|
|
|
22321
22775
|
this.pdsFocus = createEvent(this, "pdsFocus");
|
|
22322
22776
|
this.pdsKeyDown = createEvent(this, "pdsKeyDown");
|
|
22323
22777
|
this._type = 'select-one';
|
|
22778
|
+
this.optionObserver = null;
|
|
22779
|
+
this.optionSyncFrame = null;
|
|
22780
|
+
this.hasHadOptions = false;
|
|
22324
22781
|
this.hostKeeper = new HostStylingKeeper();
|
|
22325
22782
|
/**
|
|
22326
22783
|
* Indicates whether or not the select field is disabled.
|
|
@@ -22337,6 +22794,16 @@ class PdsSelect {
|
|
|
22337
22794
|
* @defaultValue false
|
|
22338
22795
|
*/
|
|
22339
22796
|
this.required = false;
|
|
22797
|
+
/**
|
|
22798
|
+
* Whether a mutation is inside an option or optgroup. The host's own attributes and children
|
|
22799
|
+
* (top-level adds and removes reach `slotchange`) and the action slot's content are not.
|
|
22800
|
+
*/
|
|
22801
|
+
this.touchesOption = ({ target }) => {
|
|
22802
|
+
// Not just TEXT_NODE: characterData also reports comment nodes, and a Comment has no
|
|
22803
|
+
// .closest() — treating anything non-Element as a Text node crashed on one.
|
|
22804
|
+
const element = target.nodeType === Node.ELEMENT_NODE ? target : target.parentElement;
|
|
22805
|
+
return target !== this.el && (element === null || element === void 0 ? void 0 : element.closest('option, optgroup')) != null;
|
|
22806
|
+
};
|
|
22340
22807
|
/**
|
|
22341
22808
|
* Emits an event on input change.
|
|
22342
22809
|
*/
|
|
@@ -22363,25 +22830,47 @@ class PdsSelect {
|
|
|
22363
22830
|
this.pdsKeyDown.emit(ev);
|
|
22364
22831
|
};
|
|
22365
22832
|
/**
|
|
22366
|
-
*
|
|
22367
|
-
*
|
|
22368
|
-
*
|
|
22369
|
-
*
|
|
22833
|
+
* Copies the slotted <option> and <optgroup> elements into the inner select, then
|
|
22834
|
+
* reselects the current value. Runs on `slotchange` and when a slotted option changes
|
|
22835
|
+
* (see startOptionSync).
|
|
22836
|
+
*
|
|
22837
|
+
* Nothing happens when the copies match what the select already holds. When only text or
|
|
22838
|
+
* attributes changed, the select's own options are updated in place rather than replaced,
|
|
22839
|
+
* so an open picker keeps its highlight, a multiple select keeps its range anchor, and a
|
|
22840
|
+
* screen reader keeps its place. Selecting programmatically fires no change event, so a
|
|
22841
|
+
* copy never emits `pdsSelectChange`.
|
|
22370
22842
|
*/
|
|
22371
22843
|
this.handleSlotChange = () => {
|
|
22372
|
-
|
|
22373
|
-
this.
|
|
22374
|
-
|
|
22375
|
-
|
|
22376
|
-
|
|
22377
|
-
|
|
22378
|
-
|
|
22379
|
-
|
|
22380
|
-
|
|
22381
|
-
|
|
22382
|
-
|
|
22383
|
-
|
|
22844
|
+
var _a;
|
|
22845
|
+
const slot = (_a = this.slotContainer) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
|
|
22846
|
+
if (slot === null || slot === undefined || this.selectEl === undefined)
|
|
22847
|
+
return;
|
|
22848
|
+
const copies = slot.assignedElements({ flatten: true })
|
|
22849
|
+
.filter((item) => ['OPTION', 'OPTGROUP'].includes(item.tagName))
|
|
22850
|
+
.map((item) => item.cloneNode(true));
|
|
22851
|
+
const current = Array.from(this.selectEl.children);
|
|
22852
|
+
// The very first copy populates an empty select, where falling back to the first option (like
|
|
22853
|
+
// a native select) is correct; the no-match blank state is for options changing under a value
|
|
22854
|
+
// that was already showing selected. Tracked separately from the select's current emptiness:
|
|
22855
|
+
// an async reload that clears options before the next set lands would otherwise look like a
|
|
22856
|
+
// first render again, and the no-match state must still apply once that next set arrives.
|
|
22857
|
+
const hadOptions = this.hasHadOptions;
|
|
22858
|
+
if (copies.length > 0)
|
|
22859
|
+
this.hasHadOptions = true;
|
|
22860
|
+
const markup = (items) => items.map((item) => item.outerHTML).join('');
|
|
22861
|
+
if (markup(copies) === markup(current))
|
|
22862
|
+
return;
|
|
22863
|
+
if (shapeOf(copies) === shapeOf(current)) {
|
|
22864
|
+
copies.forEach((copy, index) => patchInPlace(current[index], copy));
|
|
22865
|
+
}
|
|
22866
|
+
else {
|
|
22867
|
+
this.selectEl.innerHTML = '';
|
|
22868
|
+
copies.forEach((copy) => this.selectEl.appendChild(copy));
|
|
22869
|
+
}
|
|
22384
22870
|
this.updateSelectedOption();
|
|
22871
|
+
if (hadOptions)
|
|
22872
|
+
this.showNoSelectionWithoutMatch();
|
|
22873
|
+
this.updateFormValue();
|
|
22385
22874
|
};
|
|
22386
22875
|
}
|
|
22387
22876
|
/**
|
|
@@ -22410,9 +22899,16 @@ class PdsSelect {
|
|
|
22410
22899
|
}
|
|
22411
22900
|
// Expose type property on the element instance to match native form element behavior
|
|
22412
22901
|
exposeTypeProperty(this.el, () => this._type);
|
|
22902
|
+
// Reconnected after a move: componentDidLoad won't run again, and options may have changed
|
|
22903
|
+
// while it was out of the document.
|
|
22904
|
+
if (this.selectEl !== undefined) {
|
|
22905
|
+
this.startOptionSync();
|
|
22906
|
+
this.scheduleOptionSync();
|
|
22907
|
+
}
|
|
22413
22908
|
}
|
|
22414
22909
|
disconnectedCallback() {
|
|
22415
22910
|
this.hostKeeper.disconnect();
|
|
22911
|
+
this.stopOptionSync();
|
|
22416
22912
|
}
|
|
22417
22913
|
componentWillLoad() {
|
|
22418
22914
|
// Set initial type based on multiple prop
|
|
@@ -22422,6 +22918,43 @@ class PdsSelect {
|
|
|
22422
22918
|
componentDidLoad() {
|
|
22423
22919
|
// Set initial form value
|
|
22424
22920
|
this.updateFormValue();
|
|
22921
|
+
// Stencil holds componentDidLoad until the shadow root's pds-icon has loaded, so options can
|
|
22922
|
+
// change between the first slotchange copy and here with nothing observing yet — the same gap
|
|
22923
|
+
// the reconnect path closes with a catch-up sync.
|
|
22924
|
+
this.startOptionSync();
|
|
22925
|
+
this.scheduleOptionSync();
|
|
22926
|
+
}
|
|
22927
|
+
/**
|
|
22928
|
+
* Keeps the inner select in step with the slotted options. `slotchange` only fires when
|
|
22929
|
+
* top-level options are added or removed, so an option's text, value or disabled state
|
|
22930
|
+
* changing, or an option added inside an optgroup, would otherwise never reach the select.
|
|
22931
|
+
* Changes are batched into one copy per animation frame.
|
|
22932
|
+
*/
|
|
22933
|
+
startOptionSync() {
|
|
22934
|
+
if (this.optionObserver !== null || typeof MutationObserver === 'undefined' || !this.el.isConnected)
|
|
22935
|
+
return;
|
|
22936
|
+
this.optionObserver = new MutationObserver((mutations) => {
|
|
22937
|
+
if (mutations.some(this.touchesOption))
|
|
22938
|
+
this.scheduleOptionSync();
|
|
22939
|
+
});
|
|
22940
|
+
this.optionObserver.observe(this.el, { childList: true, subtree: true, attributes: true, characterData: true });
|
|
22941
|
+
}
|
|
22942
|
+
scheduleOptionSync() {
|
|
22943
|
+
if (this.optionSyncFrame !== null)
|
|
22944
|
+
return;
|
|
22945
|
+
this.optionSyncFrame = requestAnimationFrame(() => {
|
|
22946
|
+
this.optionSyncFrame = null;
|
|
22947
|
+
this.handleSlotChange();
|
|
22948
|
+
});
|
|
22949
|
+
}
|
|
22950
|
+
stopOptionSync() {
|
|
22951
|
+
var _a;
|
|
22952
|
+
(_a = this.optionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
22953
|
+
this.optionObserver = null;
|
|
22954
|
+
if (this.optionSyncFrame !== null) {
|
|
22955
|
+
cancelAnimationFrame(this.optionSyncFrame);
|
|
22956
|
+
this.optionSyncFrame = null;
|
|
22957
|
+
}
|
|
22425
22958
|
}
|
|
22426
22959
|
/**
|
|
22427
22960
|
* Updates the selected option in the select element based on the current value.
|
|
@@ -22447,6 +22980,19 @@ class PdsSelect {
|
|
|
22447
22980
|
});
|
|
22448
22981
|
}
|
|
22449
22982
|
}
|
|
22983
|
+
/**
|
|
22984
|
+
* After a copy that changes an existing option set, a value whose option was renamed or removed
|
|
22985
|
+
* has nothing to select. Like a native select, show nothing selected rather than the first
|
|
22986
|
+
* option; the value itself is kept, with no change event.
|
|
22987
|
+
*/
|
|
22988
|
+
showNoSelectionWithoutMatch() {
|
|
22989
|
+
var _a;
|
|
22990
|
+
const wanted = [].concat((_a = this.value) !== null && _a !== void 0 ? _a : []).filter((value) => value !== '');
|
|
22991
|
+
const options = Array.from(this.selectEl.options);
|
|
22992
|
+
if (wanted.length > 0 && !options.some((option) => wanted.includes(option.value))) {
|
|
22993
|
+
this.selectEl.selectedIndex = -1;
|
|
22994
|
+
}
|
|
22995
|
+
}
|
|
22450
22996
|
getHelperMessage() {
|
|
22451
22997
|
return this.helperMessage && (hAsync("p", { class: "pds-select__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage));
|
|
22452
22998
|
}
|
|
@@ -22552,7 +23098,7 @@ class PdsSelect {
|
|
|
22552
23098
|
'has-action': hasAction && !this.hideLabel ? 'true' : null,
|
|
22553
23099
|
};
|
|
22554
23100
|
this.hostKeeper.record(hostClass, {}, hostAttributes);
|
|
22555
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
23101
|
+
return (hAsync(Host, Object.assign({ key: '37c2c3b72c13c3c4e3d81da29ddddc86a7300d70', class: hostClass }, hostAttributes), hAsync("div", { key: 'ff1c311dca6fc25813e5473d0e8daff4dc12e807', class: "pds-select" }, !this.hideLabel && (hAsync("div", { key: '77db17b0beb1fefabb26ffe1df0e5f03a0515996', class: "pds-select__label-wrapper" }, hAsync("label", { key: 'c4dcba3bc148aada4a3afcca0a30c64a630e441f', htmlFor: this.componentId }, hAsync("span", { key: '0fc3424ec1961d3b216c0fabb80cb8acee37f1a2', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), hAsync("select", { key: 'ff343a6653ccd081021cb669a428c780d0162e8b', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), hAsync("div", { key: '86fed1916c3b13d079492581a7c6bb621012a4a5', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, hAsync("slot", { key: 'abe06eeef5be13b716573c8a806d6b7795edc65f', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && hAsync("pds-icon", { key: '68c958666828f77114f2edeedb667070106046fa', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
|
|
22556
23102
|
}
|
|
22557
23103
|
static get formAssociated() { return true; }
|
|
22558
23104
|
get el() { return getElement(this); }
|
|
@@ -25311,7 +25857,7 @@ class PdsSortable {
|
|
|
25311
25857
|
render() {
|
|
25312
25858
|
const classNames = this.classNames();
|
|
25313
25859
|
this.hostKeeper.record(classNames);
|
|
25314
|
-
return (hAsync(Host, { key: '
|
|
25860
|
+
return (hAsync(Host, { key: '6e9e7b769f57ebfd81541fbecbe17b3fb4ad3e47', class: classNames, id: this.componentId }, hAsync("slot", { key: 'c9466a216862c0a3e578f3fcfc1ac1e26146722b' })));
|
|
25315
25861
|
}
|
|
25316
25862
|
get el() { return getElement(this); }
|
|
25317
25863
|
static get watchers() { return {
|
|
@@ -25386,7 +25932,7 @@ class PdsSortableItem {
|
|
|
25386
25932
|
}
|
|
25387
25933
|
render() {
|
|
25388
25934
|
this.hostKeeper.record('pds-sortable-item');
|
|
25389
|
-
return (hAsync(Host, { key: '
|
|
25935
|
+
return (hAsync(Host, { key: 'c6b5402a54179d4e7caed3cc81874977d2d6c677', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (hAsync("div", { key: 'cd2d85286bcb3e47f76e4571d609d91f932b717b', class: "pds-sortable-item__handle" }, hAsync("pds-icon", { key: '97e2e155283d86921f40198637abf596d6cc86e0', "aria-hidden": "true", icon: handle }))), hAsync("slot", { key: '99743c8e5be45ca76f276b47688843a621c8ded5' }), this.enableActions && (hAsync("div", { key: '7cb1a8b99658d72067ccae036b2bc0276b8cf02e', class: "pds-sortable-item__actions" }, hAsync("slot", { key: 'f9b3b7d1cc10ac077f65ec2cafac7a372deae511', name: "sortable-item-actions" })))));
|
|
25390
25936
|
}
|
|
25391
25937
|
get el() { return getElement(this); }
|
|
25392
25938
|
static get style() { return pdsSortableItemCss(); }
|
|
@@ -25521,9 +26067,9 @@ class PdsSwitch {
|
|
|
25521
26067
|
const hostClass = this.switchClassNames();
|
|
25522
26068
|
const ariaDisabled = this.disabled ? 'true' : null;
|
|
25523
26069
|
this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
|
|
25524
|
-
return (hAsync(Host, { key: '
|
|
25525
|
-
hAsync("div", { key: '
|
|
25526
|
-
hAsync("div", { key: '
|
|
26070
|
+
return (hAsync(Host, { key: '0fa5beb83232b381ea5cdfa82d143afcb69eb4e1', class: hostClass, "aria-disabled": ariaDisabled }, hAsync("label", { key: 'df5d08344d11cb334ef69a432d1c02557caacc96', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '6908b328f0e2da2085ffbffe0d1e4d09f2c6fd86', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), hAsync("span", { key: '1108ab3eae63a371f9e9b80f011211cba8287b67', class: this.hideLabel ? 'visually-hidden' : '' }, hAsync("slot", { key: '8aac1d9b81deab92e1e27c06debf2b87bc697874', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
|
|
26071
|
+
hAsync("div", { key: 'ef829fb6bc66060805a144995f60e2bebb915615', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
26072
|
+
hAsync("div", { key: '42ad678cc2179b4a26ed09151de41c2293b98011', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '8dc0b29b522247762010edb3b1e8e5fc8c8788fa', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
|
|
25527
26073
|
}
|
|
25528
26074
|
static get formAssociated() { return true; }
|
|
25529
26075
|
get el() { return getElement(this); }
|
|
@@ -25947,7 +26493,7 @@ class PdsTableBody {
|
|
|
25947
26493
|
registerInstance(this, hostRef);
|
|
25948
26494
|
}
|
|
25949
26495
|
render() {
|
|
25950
|
-
return (hAsync(Host, { key: '
|
|
26496
|
+
return (hAsync(Host, { key: '4f1cba9505f56ff1ab0a19f9a88318d66a02eacc', role: "rowgroup", part: "body" }, hAsync("slot", { key: 'ea0c620a15fcbe2915189e870d0815c5cbffdf8c' })));
|
|
25951
26497
|
}
|
|
25952
26498
|
static get style() { return pdsTableBodyCss(); }
|
|
25953
26499
|
static get cmpMeta() { return {
|
|
@@ -26105,11 +26651,11 @@ class PdsTableCell {
|
|
|
26105
26651
|
return classNames.join(' ');
|
|
26106
26652
|
}
|
|
26107
26653
|
render() {
|
|
26108
|
-
return (hAsync(Host, { key: '
|
|
26654
|
+
return (hAsync(Host, { key: 'fd84150bcb9bd5d2029624394d4f69b0a7234bc0', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
|
|
26109
26655
|
this.tableRef.fixedColumn &&
|
|
26110
26656
|
this.tableRef.selectable
|
|
26111
26657
|
? { '--fixed-cell-position': '40px' }
|
|
26112
|
-
: {} }, hAsync("slot", { key: '
|
|
26658
|
+
: {} }, hAsync("slot", { key: '9256f033ec58b9cb2acc74d705acc9726507668b' })));
|
|
26113
26659
|
}
|
|
26114
26660
|
get hostElement() { return getElement(this); }
|
|
26115
26661
|
static get watchers() { return {
|
|
@@ -26178,7 +26724,7 @@ class PdsTableHead {
|
|
|
26178
26724
|
}
|
|
26179
26725
|
}
|
|
26180
26726
|
render() {
|
|
26181
|
-
return (hAsync(Host, { key: '
|
|
26727
|
+
return (hAsync(Host, { key: '4fb8d7bf4a9b0bce672208651c0600fbc94214af', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-head-cell", { key: '20b86146540208178bd63bd136e14e5534c7ec76', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (hAsync("pds-checkbox", { key: 'fa8054dd7ee36c6401e9eeb9c962a820d3a02558', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" })))), hAsync("slot", { key: 'a0000270ae6ed1cab1c6e802ccc53ba0de3e54c9' })));
|
|
26182
26728
|
}
|
|
26183
26729
|
get hostElement() { return getElement(this); }
|
|
26184
26730
|
static get style() { return pdsTableHeadCss(); }
|
|
@@ -26399,11 +26945,11 @@ class PdsTableHeadCell {
|
|
|
26399
26945
|
return classNames.join(' ');
|
|
26400
26946
|
}
|
|
26401
26947
|
render() {
|
|
26402
|
-
return (hAsync(Host, { key: '
|
|
26948
|
+
return (hAsync(Host, { key: 'd609309180968913315c1428d0403c3974a4bfc0', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
|
|
26403
26949
|
this.tableRef.fixedColumn &&
|
|
26404
26950
|
this.tableRef.selectable
|
|
26405
26951
|
? { '--fixed-cell-position': '40px' }
|
|
26406
|
-
: {} }, hAsync("slot", { key: '
|
|
26952
|
+
: {} }, hAsync("slot", { key: '7aff5994fe4c5250ce83516960183dbd9ffa9c69' }), this.sortable && this.isActive && (hAsync("pds-icon", { key: '0a7b99ab2c56ea0cfb3aa6f810bf802422a29bef', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon", "aria-hidden": "true" }))));
|
|
26407
26953
|
}
|
|
26408
26954
|
get hostElement() { return getElement(this); }
|
|
26409
26955
|
static get style() { return pdsTableHeadCellCss(); }
|
|
@@ -26569,7 +27115,7 @@ class PdsTableRow {
|
|
|
26569
27115
|
}
|
|
26570
27116
|
}
|
|
26571
27117
|
render() {
|
|
26572
|
-
return (hAsync(Host, { key: '
|
|
27118
|
+
return (hAsync(Host, { key: 'dc956e7253971bdadc003448822a83953ed4658f', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-cell", { key: '1f119c5036ab1d27c5138106968a40492222b6f3', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, hAsync("pds-checkbox", { key: 'f7a3534eceeabe478fb85e6e476f814e03988cfb', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), hAsync("slot", { key: '287c0fe2c39bac5df7a977e31290aeddd0cd46b3' })));
|
|
26573
27119
|
}
|
|
26574
27120
|
get hostElement() { return getElement(this); }
|
|
26575
27121
|
static get style() { return pdsTableRowCss(); }
|
|
@@ -26623,7 +27169,7 @@ class PdsTabpanel {
|
|
|
26623
27169
|
// The docs show consumers omitting `slot`, so server HTML doesn't carry it — a DOM morph
|
|
26624
27170
|
// that strips it (and the stretch-active class) leaves this panel unslotted. Put both back.
|
|
26625
27171
|
this.hostKeeper.record(hostClass, {}, { slot: 'tabpanels' });
|
|
26626
|
-
return (hAsync(Host, { key: '
|
|
27172
|
+
return (hAsync(Host, { key: 'b649c0f9e0c103a2d7dad43b7db0a092194b4ba0', slot: "tabpanels", class: hostClass || undefined }, hAsync("div", { key: 'a578722d33f7d04726185e393771838870833984', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, hAsync("slot", { key: '2ebe5745c444563333ee175bb3a1f7401ba77ec1' }))));
|
|
26627
27173
|
}
|
|
26628
27174
|
get el() { return getElement(this); }
|
|
26629
27175
|
static get style() { return pdsTabpanelCss(); }
|
|
@@ -26922,7 +27468,7 @@ class PdsTabs {
|
|
|
26922
27468
|
// Only the classes: `active-tab-name` backs the mutable activeTabName prop, so a morph that drops
|
|
26923
27469
|
// it is a prop change, not a strip.
|
|
26924
27470
|
this.hostKeeper.record(hostClass);
|
|
26925
|
-
return (hAsync(Host, { key: '
|
|
27471
|
+
return (hAsync(Host, { key: '08ac02be358bebbd95dd5edca30cd99789445f50', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, hAsync("slot", { key: '02395c056f80f46f1fa9117eafde68ef170b4188', name: "tabpanels" })));
|
|
26926
27472
|
}
|
|
26927
27473
|
get el() { return getElement(this); }
|
|
26928
27474
|
static get style() { return pdsTabsCss(); }
|
|
@@ -27056,7 +27602,7 @@ class PdsText {
|
|
|
27056
27602
|
? `pds-text--decoration-${this.decoration}`
|
|
27057
27603
|
: ''}
|
|
27058
27604
|
`;
|
|
27059
|
-
return (hAsync(Tag, { key: '
|
|
27605
|
+
return (hAsync(Tag, { key: 'b79a6e67f11024cb025cb26bbf77231547bd63a4', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: 'ae1f8ca39899894541eac3c07fb21ead4ab98f40' })));
|
|
27060
27606
|
}
|
|
27061
27607
|
get el() { return getElement(this); }
|
|
27062
27608
|
static get watchers() { return {
|
|
@@ -27402,10 +27948,10 @@ class PdsTextarea {
|
|
|
27402
27948
|
}
|
|
27403
27949
|
render() {
|
|
27404
27950
|
const value = this.getValue();
|
|
27405
|
-
return (hAsync(Host, { key: '
|
|
27406
|
-
hAsync("div", { key: '
|
|
27407
|
-
hAsync("p", { key: '
|
|
27408
|
-
hAsync("p", { key: '
|
|
27951
|
+
return (hAsync(Host, { key: '76e445d135191df3090620f2c2eaf6ed8d7eb9cb', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '836815333b0ca925bc205a4b8b25086fe82fcedc', class: "pds-textarea" }, this.label &&
|
|
27952
|
+
hAsync("div", { key: 'e8633457c994d3387ec277fd9945afb2c653d27a', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '977bb1c171b68242ab06e01ef94ecc4e4cb26880', htmlFor: this.componentId }, hAsync("span", { key: 'ef87433d6524296b3153e8d04e6406c9287e3f2e', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '92952c76f5f4a87da4953f792a9a5589d7765451', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: 'a61f39d0e299cb6b3e6d1beed37805ad9a71b579', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
|
|
27953
|
+
hAsync("p", { key: '811065b7ce7b45d902d821dbceb25fef4231db94', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
|
|
27954
|
+
hAsync("p", { key: 'f95f566b79215a4a128fe92c02be244219f843e5', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '08f649e4b32551d59d60b978262cd7beaa99e08d', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
|
|
27409
27955
|
}
|
|
27410
27956
|
static get formAssociated() { return true; }
|
|
27411
27957
|
get el() { return getElement(this); }
|
|
@@ -27453,7 +27999,7 @@ class PdsTextarea {
|
|
|
27453
27999
|
}; }
|
|
27454
28000
|
}
|
|
27455
28001
|
|
|
27456
|
-
const pdsToastCss = () => `:host{--animation-duration:var(--pine-motion-duration-slow);--animation-timing:var(--pine-motion-easing-in-out);--padding-inline:var(--pine-dimension-md);--padding-inline-desktop:var(--pine-dimension-2xl);--sizing-height-default:68px;--sizing-min-width:calc(var(--sizing-total-width) - (var(--padding-inline) * 2));--sizing-min-width-desktop:calc(var(--sizing-total-width) - (var(--padding-inline-desktop) * 2));--sizing-total-width:350px;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;font:var(--pine-typography-body-medium)}.pds-toast{-ms-flex-align:center;align-items:center;-webkit-animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);background-color:var(--pine-color-primary);border-radius:var(--pine-dimension-xs);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);display:-ms-flexbox;display:flex;height:var(--sizing-height-default);-ms-flex-pack:start;justify-content:flex-start;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);max-width:90vw;min-width:var(--sizing-min-width);padding:0 var(--padding-inline);position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (max-width: 767px){.pds-toast{height:36px;max-width:calc(100vw - var(--pine-dimension-2xs) * 2);min-width:auto;padding-inline:var(--pine-dimension-2xs)}}.pds-toast--danger{background-color:var(--pine-color-danger)}.pds-toast--loading .pds-toast__loader{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);position:relative}.pds-toast--loading .pds-toast__loader-spinner{-webkit-animation:pds-toast-rotate 2s linear infinite;animation:pds-toast-rotate 2s linear infinite;height:20px;width:20px}.pds-toast--loading .pds-toast__loader-path{-webkit-animation:pds-toast-dash 1.5s ease-in-out infinite;animation:pds-toast-dash 1.5s ease-in-out infinite;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}.pds-toast__icon{color:var(--pine-color-text-primary);display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-toast__message{font:var(--pine-typography-body-sm-medium);-webkit-margin-end:auto;margin-inline-end:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-toast__message ::slotted(a){color:var(--pine-color-text-primary);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs);opacity:0.7;text-decoration:underline}.pds-toast__message ::slotted(a):hover,.pds-toast__message ::slotted(a):focus-visible{opacity:1}.pds-toast__message ::slotted(a):focus-visible{outline:2px solid var(--pine-color-text-primary);outline-offset:2px}.pds-toast__button{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);color:inherit;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);opacity:0.7;padding:0;white-space:nowrap}.pds-toast__button:hover,.pds-toast__button:focus{opacity:1}.pds-toast__button:focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-dimension-2xs)}@-webkit-keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}:host([hidden]) .pds-toast,.pds-toast--animating-out{-webkit-animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;pointer-events:none;}`;
|
|
28002
|
+
const pdsToastCss = () => `:host{--animation-duration:var(--pine-motion-duration-slow);--animation-timing:var(--pine-motion-easing-in-out);--padding-inline:var(--pine-dimension-md);--padding-inline-desktop:var(--pine-dimension-2xl);--sizing-height-default:68px;--sizing-min-width:calc(var(--sizing-total-width) - (var(--padding-inline) * 2));--sizing-min-width-desktop:calc(var(--sizing-total-width) - (var(--padding-inline-desktop) * 2));--sizing-total-width:350px;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;font:var(--pine-typography-body-medium)}.pds-toast{-ms-flex-align:center;align-items:center;-webkit-animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);background-color:var(--pine-color-primary);border-radius:var(--pine-dimension-xs);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);display:-ms-flexbox;display:flex;height:var(--sizing-height-default);-ms-flex-pack:start;justify-content:flex-start;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);max-width:90vw;min-width:var(--sizing-min-width);padding:0 var(--padding-inline);position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (max-width: 767px){.pds-toast{height:36px;max-width:calc(100vw - var(--pine-dimension-2xs) * 2);min-width:auto;padding-inline:var(--pine-dimension-2xs)}}.pds-toast--danger{background-color:var(--pine-color-danger)}.pds-toast--loading .pds-toast__loader{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);position:relative}.pds-toast--loading .pds-toast__loader-spinner{-webkit-animation:pds-toast-rotate 2s linear infinite;animation:pds-toast-rotate 2s linear infinite;height:20px;width:20px}.pds-toast--loading .pds-toast__loader-path{-webkit-animation:pds-toast-dash 1.5s ease-in-out infinite;animation:pds-toast-dash 1.5s ease-in-out infinite;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}.pds-toast__icon{color:var(--pine-color-text-primary);display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-toast__message{font:var(--pine-typography-body-sm-medium);-webkit-margin-end:auto;margin-inline-end:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-toast__message ::slotted(a){color:var(--pine-color-text-primary);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs);opacity:0.7;text-decoration:underline}.pds-toast__message ::slotted(a):hover,.pds-toast__message ::slotted(a):focus-visible{opacity:1}.pds-toast__message ::slotted(a):focus-visible{outline:2px solid var(--pine-color-text-primary);outline-offset:2px}.pds-toast__button{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);color:inherit;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);opacity:0.7;padding:0;white-space:nowrap}.pds-toast__button:hover,.pds-toast__button:focus{opacity:1}.pds-toast__button:focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-dimension-2xs)}@-webkit-keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}:host([hidden]) .pds-toast,.pds-toast--animating-out{-webkit-animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;pointer-events:none;}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
|
|
27457
28003
|
|
|
27458
28004
|
/** Fallback when computed `--animation-duration` is unavailable (matches `--pine-motion-duration-slow`). */
|
|
27459
28005
|
const TOAST_DISMISS_ANIMATION_MS = 300;
|
|
@@ -27575,17 +28121,23 @@ class PdsToast {
|
|
|
27575
28121
|
if (this.type === 'loading') {
|
|
27576
28122
|
return (hAsync("div", { class: "pds-toast__loader" }, hAsync("svg", { class: "pds-toast__loader-spinner", viewBox: "25 25 50 50", "aria-hidden": "true" }, hAsync("circle", { class: "pds-toast__loader-path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }))));
|
|
27577
28123
|
}
|
|
27578
|
-
//
|
|
27579
|
-
|
|
28124
|
+
// Decorative: inside role="alert" an icon name would be read out with the
|
|
28125
|
+
// message. Severity is announced as text instead (see severityLabel).
|
|
28126
|
+
return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon", "aria-hidden": "true" });
|
|
28127
|
+
}
|
|
28128
|
+
severityText() {
|
|
28129
|
+
var _a;
|
|
28130
|
+
return (_a = this.severityLabel) !== null && _a !== void 0 ? _a : (this.type === 'danger' ? 'Error' : undefined);
|
|
27580
28131
|
}
|
|
27581
28132
|
render() {
|
|
27582
|
-
|
|
28133
|
+
const severity = this.severityText();
|
|
28134
|
+
return (hAsync(Host, { key: '4c4077add1843ab84674dfa49fb963df55f1c432', hidden: !this.isVisible }, hAsync("div", { key: '0d819ac123de625604d3b1aa0f9391366b4d0289', class: {
|
|
27583
28135
|
'pds-toast': true,
|
|
27584
28136
|
[`pds-toast--${this.type}`]: this.type !== 'default',
|
|
27585
28137
|
'pds-toast--animating-out': this.isAnimatingOut
|
|
27586
|
-
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '
|
|
28138
|
+
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), severity && hAsync("span", { key: 'f75fb422797082e99acb85432c1b50cf702d7afc', class: "visually-hidden" }, severity), hAsync("span", { key: '3d9f03d96dbda41c72d2c2cc492b1422928d573f', class: "pds-toast__message" }, hAsync("slot", { key: 'affc7e4cb592735ec396fa90a9405f25b389e4bd' })), this.dismissible && (hAsync("button", { key: '0c4ef459dda09b8a196eed7ee28383995d959b11', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
|
|
27587
28139
|
this.dismiss();
|
|
27588
|
-
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '
|
|
28140
|
+
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '1b26a6a842868a5b1e55b7110c755edc7f830ba5', name: "remove", "aria-hidden": "true" }))))));
|
|
27589
28141
|
}
|
|
27590
28142
|
get el() { return getElement(this); }
|
|
27591
28143
|
static get watchers() { return {
|
|
@@ -27604,6 +28156,7 @@ class PdsToast {
|
|
|
27604
28156
|
"icon": [1],
|
|
27605
28157
|
"type": [1],
|
|
27606
28158
|
"dismissLabel": [1, "dismiss-label"],
|
|
28159
|
+
"severityLabel": [1, "severity-label"],
|
|
27607
28160
|
"isVisible": [32],
|
|
27608
28161
|
"isAnimatingOut": [32],
|
|
27609
28162
|
"dismiss": [64]
|
|
@@ -27633,7 +28186,9 @@ class PdsTooltip {
|
|
|
27633
28186
|
this.resolvedPlacement = 'right';
|
|
27634
28187
|
this.triggerEl = null;
|
|
27635
28188
|
this.contentDiv = null;
|
|
28189
|
+
this.lastCopiedHtml = null;
|
|
27636
28190
|
this.slotMutationObserver = null;
|
|
28191
|
+
this.contentSyncFrame = null;
|
|
27637
28192
|
this.currentPathname = '';
|
|
27638
28193
|
this.pathnameCheckInterval = null;
|
|
27639
28194
|
this.stopAutoUpdate = null;
|
|
@@ -27700,6 +28255,25 @@ class PdsTooltip {
|
|
|
27700
28255
|
this.handleSpaNavigation();
|
|
27701
28256
|
}
|
|
27702
28257
|
};
|
|
28258
|
+
this.scheduleContentSync = () => {
|
|
28259
|
+
if (this.contentSyncFrame !== null)
|
|
28260
|
+
return;
|
|
28261
|
+
this.contentSyncFrame = requestAnimationFrame(() => {
|
|
28262
|
+
this.contentSyncFrame = null;
|
|
28263
|
+
if (this.portalEl === null || this.contentDiv === null)
|
|
28264
|
+
return;
|
|
28265
|
+
const copy = this.copySlottedContent();
|
|
28266
|
+
const strippedCopy = this.strippedHtml(copy);
|
|
28267
|
+
if (strippedCopy === this.lastCopiedHtml)
|
|
28268
|
+
return;
|
|
28269
|
+
this.lastCopiedHtml = strippedCopy;
|
|
28270
|
+
this.contentDiv.textContent = '';
|
|
28271
|
+
this.contentDiv.append(...Array.from(copy.childNodes));
|
|
28272
|
+
this.repositionPortal().catch(error => {
|
|
28273
|
+
console.warn('Failed to reposition tooltip after a content change:', error);
|
|
28274
|
+
});
|
|
28275
|
+
});
|
|
28276
|
+
};
|
|
27703
28277
|
}
|
|
27704
28278
|
handleOpenToggle(newValue, oldValue) {
|
|
27705
28279
|
if (newValue === false && oldValue === true) {
|
|
@@ -27714,16 +28288,6 @@ class PdsTooltip {
|
|
|
27714
28288
|
window.addEventListener('pageshow', this.handlePageShow);
|
|
27715
28289
|
this.currentPathname = window.location.pathname;
|
|
27716
28290
|
this.triggerEl = this.el.querySelector('.pds-tooltip__trigger');
|
|
27717
|
-
const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');
|
|
27718
|
-
if (contentSlotWrapper !== null) {
|
|
27719
|
-
this.slotMutationObserver = new MutationObserver(() => {
|
|
27720
|
-
if (this.opened && this.portalEl !== null) {
|
|
27721
|
-
this.removePortal();
|
|
27722
|
-
this.createPortal();
|
|
27723
|
-
}
|
|
27724
|
-
});
|
|
27725
|
-
this.slotMutationObserver.observe(contentSlotWrapper, { childList: true, subtree: false });
|
|
27726
|
-
}
|
|
27727
28291
|
// no return; Stencil ignores teardown functions here
|
|
27728
28292
|
}
|
|
27729
28293
|
connectedCallback() {
|
|
@@ -27731,10 +28295,6 @@ class PdsTooltip {
|
|
|
27731
28295
|
}
|
|
27732
28296
|
disconnectedCallback() {
|
|
27733
28297
|
window.removeEventListener('pageshow', this.handlePageShow);
|
|
27734
|
-
if (this.slotMutationObserver !== null) {
|
|
27735
|
-
this.slotMutationObserver.disconnect();
|
|
27736
|
-
this.slotMutationObserver = null;
|
|
27737
|
-
}
|
|
27738
28298
|
// Ensure global listeners/intervals are removed if still present
|
|
27739
28299
|
if (this.portalEl !== null) {
|
|
27740
28300
|
this.removePortal();
|
|
@@ -27877,31 +28437,9 @@ class PdsTooltip {
|
|
|
27877
28437
|
this.contentDiv.className = 'pds-tooltip__content';
|
|
27878
28438
|
this.contentDiv.setAttribute('aria-hidden', this.opened ? 'false' : 'true');
|
|
27879
28439
|
this.contentDiv.setAttribute('aria-live', this.opened ? 'polite' : 'off');
|
|
27880
|
-
const
|
|
27881
|
-
|
|
27882
|
-
|
|
27883
|
-
if (slottedContentContainer !== null) {
|
|
27884
|
-
const childrenToClone = Array.from(slottedContentContainer.childNodes);
|
|
27885
|
-
if (childrenToClone.length > 0) {
|
|
27886
|
-
const hasMeaningfulNode = childrenToClone.some(node => {
|
|
27887
|
-
var _a;
|
|
27888
|
-
return node.nodeType === Node.ELEMENT_NODE ||
|
|
27889
|
-
(node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
|
|
27890
|
-
});
|
|
27891
|
-
if (hasMeaningfulNode) {
|
|
27892
|
-
hasSlottedContent = true;
|
|
27893
|
-
childrenToClone.forEach((node /*, index*/) => {
|
|
27894
|
-
var _a;
|
|
27895
|
-
if (node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '')) {
|
|
27896
|
-
this.contentDiv.appendChild(node.cloneNode(true));
|
|
27897
|
-
}
|
|
27898
|
-
});
|
|
27899
|
-
}
|
|
27900
|
-
}
|
|
27901
|
-
}
|
|
27902
|
-
if (!hasSlottedContent && typeof this.content === 'string' && this.content.trim() !== '') {
|
|
27903
|
-
this.contentDiv.textContent = this.content;
|
|
27904
|
-
}
|
|
28440
|
+
const initialCopy = this.copySlottedContent();
|
|
28441
|
+
this.lastCopiedHtml = this.strippedHtml(initialCopy);
|
|
28442
|
+
this.contentDiv.append(...Array.from(initialCopy.childNodes));
|
|
27905
28443
|
this.portalEl.appendChild(this.contentDiv);
|
|
27906
28444
|
document.body.appendChild(this.portalEl);
|
|
27907
28445
|
this.repositionPortal().catch(error => {
|
|
@@ -27924,8 +28462,93 @@ class PdsTooltip {
|
|
|
27924
28462
|
if (this.triggerEl !== null && this.portalEl.id !== '') {
|
|
27925
28463
|
this.triggerEl.setAttribute('aria-describedby', this.portalEl.id);
|
|
27926
28464
|
}
|
|
28465
|
+
this.startContentSync();
|
|
28466
|
+
}
|
|
28467
|
+
/**
|
|
28468
|
+
* The host's own content slot wrapper. Matched among direct children only, so a nested
|
|
28469
|
+
* pds-tooltip inside the trigger slot isn't mistaken for this one's.
|
|
28470
|
+
*/
|
|
28471
|
+
get contentSlotWrapper() {
|
|
28472
|
+
return Array.from(this.el.children).find((child) => child.matches('.pds-tooltip__content-slot-wrapper'));
|
|
28473
|
+
}
|
|
28474
|
+
/**
|
|
28475
|
+
* Copies the slotted content (or the `content` prop's text) into a detached container. The
|
|
28476
|
+
* portal holds copies so the framework that owns the slotted nodes keeps them.
|
|
28477
|
+
*/
|
|
28478
|
+
copySlottedContent() {
|
|
28479
|
+
var _a, _b;
|
|
28480
|
+
const copy = document.createElement('div');
|
|
28481
|
+
const slottedContentContainer = (_a = this.contentSlotWrapper) === null || _a === void 0 ? void 0 : _a.querySelector('[slot="content"]');
|
|
28482
|
+
const meaningfulNodes = Array.from((_b = slottedContentContainer === null || slottedContentContainer === void 0 ? void 0 : slottedContentContainer.childNodes) !== null && _b !== void 0 ? _b : []).filter(node => {
|
|
28483
|
+
var _a;
|
|
28484
|
+
return node.nodeType === Node.ELEMENT_NODE ||
|
|
28485
|
+
(node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
|
|
28486
|
+
});
|
|
28487
|
+
meaningfulNodes.forEach(node => copy.appendChild(node.cloneNode(true)));
|
|
28488
|
+
if (meaningfulNodes.length === 0 && typeof this.content === 'string' && this.content.trim() !== '') {
|
|
28489
|
+
copy.textContent = this.content;
|
|
28490
|
+
}
|
|
28491
|
+
return copy;
|
|
28492
|
+
}
|
|
28493
|
+
/**
|
|
28494
|
+
* While the tooltip is open, keeps the portal's copy in step with the slotted content at any
|
|
28495
|
+
* depth: content that loads or re-renders after opening shows without reopening. Changes are
|
|
28496
|
+
* batched to one re-copy per animation frame, and a re-copy that matches the last one shown is
|
|
28497
|
+
* dropped, so screen readers aren't re-announced, iframes don't reload and the tooltip isn't
|
|
28498
|
+
* repositioned for nothing. Only the hidden slot wrapper is observed, so copying into the portal
|
|
28499
|
+
* can't trigger another sync.
|
|
28500
|
+
*/
|
|
28501
|
+
startContentSync() {
|
|
28502
|
+
const contentSlotWrapper = this.contentSlotWrapper;
|
|
28503
|
+
if (contentSlotWrapper === undefined || typeof MutationObserver === 'undefined')
|
|
28504
|
+
return;
|
|
28505
|
+
this.slotMutationObserver = new MutationObserver(this.scheduleContentSync);
|
|
28506
|
+
this.slotMutationObserver.observe(contentSlotWrapper, {
|
|
28507
|
+
childList: true,
|
|
28508
|
+
subtree: true,
|
|
28509
|
+
attributes: true,
|
|
28510
|
+
characterData: true,
|
|
28511
|
+
});
|
|
28512
|
+
}
|
|
28513
|
+
/**
|
|
28514
|
+
* A copy's serialized HTML with Stencil's own hydration and scope classes removed from every
|
|
28515
|
+
* `pds-*` descendant, so a nested component finishing hydration (or re-hydrating once reconnected
|
|
28516
|
+
* inside the portal) isn't mistaken for a real content change. Without this, that class-only
|
|
28517
|
+
* difference fails the equality check above and triggers a recopy that replaces still-loaded
|
|
28518
|
+
* nodes — reloading any iframe or media the slotted content held.
|
|
28519
|
+
*/
|
|
28520
|
+
strippedHtml(root) {
|
|
28521
|
+
const clone = root.cloneNode(true);
|
|
28522
|
+
clone.querySelectorAll('*').forEach((el) => {
|
|
28523
|
+
// isStencilClass is host-scoped (its own doc: "another sc- class may be a consumer's"), so it
|
|
28524
|
+
// only applies to pds-* elements — the same check keepPineHydrated makes before using it.
|
|
28525
|
+
if (!el.localName.startsWith('pds-'))
|
|
28526
|
+
return;
|
|
28527
|
+
// Not `el.className`: on an SVG element that's an SVGAnimatedString, not a string,
|
|
28528
|
+
// so classNamesOf would silently drop its classes from the comparison. The `class`
|
|
28529
|
+
// attribute is a plain string on every element, SVG included.
|
|
28530
|
+
const kept = classNamesOf(el.getAttribute('class') || '').filter((name) => !isStencilClass(el, name));
|
|
28531
|
+
if (kept.length === 0) {
|
|
28532
|
+
el.removeAttribute('class');
|
|
28533
|
+
}
|
|
28534
|
+
else {
|
|
28535
|
+
el.setAttribute('class', kept.join(' '));
|
|
28536
|
+
}
|
|
28537
|
+
});
|
|
28538
|
+
return clone.innerHTML;
|
|
28539
|
+
}
|
|
28540
|
+
stopContentSync() {
|
|
28541
|
+
if (this.slotMutationObserver !== null) {
|
|
28542
|
+
this.slotMutationObserver.disconnect();
|
|
28543
|
+
this.slotMutationObserver = null;
|
|
28544
|
+
}
|
|
28545
|
+
if (this.contentSyncFrame !== null) {
|
|
28546
|
+
cancelAnimationFrame(this.contentSyncFrame);
|
|
28547
|
+
this.contentSyncFrame = null;
|
|
28548
|
+
}
|
|
27927
28549
|
}
|
|
27928
28550
|
removePortal() {
|
|
28551
|
+
this.stopContentSync();
|
|
27929
28552
|
// Stop Floating UI's autoUpdate
|
|
27930
28553
|
if (this.stopAutoUpdate !== null) {
|
|
27931
28554
|
this.stopAutoUpdate();
|
|
@@ -27957,12 +28580,13 @@ class PdsTooltip {
|
|
|
27957
28580
|
this.triggerEl.removeAttribute('aria-describedby');
|
|
27958
28581
|
}
|
|
27959
28582
|
this.contentDiv = null;
|
|
28583
|
+
this.lastCopiedHtml = null;
|
|
27960
28584
|
}
|
|
27961
28585
|
render() {
|
|
27962
28586
|
const hostId = this.componentId || undefined;
|
|
27963
|
-
return (hAsync(Host, { key: '
|
|
28587
|
+
return (hAsync(Host, { key: '067eda3089732c6a23032bb087182e6dcd0330fa', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '54f6f233c937f048f119df969630af530b10de25', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
|
|
27964
28588
|
/* focusin/out bubble; ensure keyboard users see tooltips */
|
|
27965
|
-
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '
|
|
28589
|
+
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: 'f8019985ad9fd27deb388e35c43bf2e227ff9c02' })), hAsync("div", { key: '072c4e578aebb99cd213901369a57d7c74734ad9', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: '22bc45dfb56567f53a608ce2033b062363793450', name: "content" }))));
|
|
27966
28590
|
}
|
|
27967
28591
|
get el() { return getElement(this); }
|
|
27968
28592
|
static get watchers() { return {
|