@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.js
CHANGED
|
@@ -5732,7 +5732,7 @@ class MockPdsModal {
|
|
|
5732
5732
|
'pds-modal__backdrop': true,
|
|
5733
5733
|
'open': this.open,
|
|
5734
5734
|
};
|
|
5735
|
-
return (hAsync("div", { key: '
|
|
5735
|
+
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" })))));
|
|
5736
5736
|
}
|
|
5737
5737
|
get el() { return getElement(this); }
|
|
5738
5738
|
static get style() { return pdsModalCss$1(); }
|
|
@@ -5754,7 +5754,7 @@ class MockPdsModal {
|
|
|
5754
5754
|
}; }
|
|
5755
5755
|
}
|
|
5756
5756
|
|
|
5757
|
-
/* pds-icons v10.
|
|
5757
|
+
/* pds-icons v10.7.0, ES Modules */
|
|
5758
5758
|
|
|
5759
5759
|
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>";
|
|
5760
5760
|
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>";
|
|
@@ -5832,8 +5832,16 @@ class PdsAccordion {
|
|
|
5832
5832
|
|
|
5833
5833
|
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)}`;
|
|
5834
5834
|
|
|
5835
|
-
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}`;
|
|
5835
|
+
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}`;
|
|
5836
5836
|
|
|
5837
|
+
// What each variant announces when `severityLabel` isn't set. The `default`
|
|
5838
|
+
// variant has no severity.
|
|
5839
|
+
const SEVERITY_LABELS = {
|
|
5840
|
+
danger: 'Error',
|
|
5841
|
+
info: 'Info',
|
|
5842
|
+
success: 'Success',
|
|
5843
|
+
warning: 'Warning',
|
|
5844
|
+
};
|
|
5837
5845
|
/**
|
|
5838
5846
|
* @slot actions - Slot for alert actions.
|
|
5839
5847
|
* @part dismiss
|
|
@@ -5887,7 +5895,12 @@ class PdsAlert {
|
|
|
5887
5895
|
}
|
|
5888
5896
|
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)));
|
|
5889
5897
|
}
|
|
5898
|
+
severityText() {
|
|
5899
|
+
var _a;
|
|
5900
|
+
return (_a = this.severityLabel) !== null && _a !== void 0 ? _a : SEVERITY_LABELS[this.variant];
|
|
5901
|
+
}
|
|
5890
5902
|
render() {
|
|
5903
|
+
const severity = this.severityText();
|
|
5891
5904
|
const iconMap = {
|
|
5892
5905
|
danger: 'warning-filled',
|
|
5893
5906
|
default: 'info-circle-filled',
|
|
@@ -5897,7 +5910,7 @@ class PdsAlert {
|
|
|
5897
5910
|
};
|
|
5898
5911
|
// Get the icon name based on the current variant
|
|
5899
5912
|
const iconName = iconMap[this.variant] || iconMap.default;
|
|
5900
|
-
return (hAsync(Host, { key: '
|
|
5913
|
+
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)" })))))));
|
|
5901
5914
|
}
|
|
5902
5915
|
get el() { return getElement(this); }
|
|
5903
5916
|
static get style() { return pdsAlertTokensCss() + pdsAlertCss(); }
|
|
@@ -5912,6 +5925,7 @@ class PdsAlert {
|
|
|
5912
5925
|
"hideIcon": [4, "hide-icon"],
|
|
5913
5926
|
"variant": [1],
|
|
5914
5927
|
"dismissLabel": [1, "dismiss-label"],
|
|
5928
|
+
"severityLabel": [1, "severity-label"],
|
|
5915
5929
|
"hasActionsContent": [32]
|
|
5916
5930
|
},
|
|
5917
5931
|
"$listeners$": undefined,
|
|
@@ -5963,6 +5977,8 @@ function restoreReflectedDefault(el, attr, value, defaultValue) {
|
|
|
5963
5977
|
|
|
5964
5978
|
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}`;
|
|
5965
5979
|
|
|
5980
|
+
// Used when `badgeLabel` is unset; an empty string hides the badge instead.
|
|
5981
|
+
const DEFAULT_BADGE_LABEL = 'Verified';
|
|
5966
5982
|
/**
|
|
5967
5983
|
* @part asset-wrapper
|
|
5968
5984
|
* @part button
|
|
@@ -6042,14 +6058,22 @@ class PdsAvatar {
|
|
|
6042
6058
|
:
|
|
6043
6059
|
this.renderAssetWrapper());
|
|
6044
6060
|
};
|
|
6045
|
-
this.renderBadge = () =>
|
|
6046
|
-
|
|
6047
|
-
|
|
6048
|
-
|
|
6049
|
-
//
|
|
6050
|
-
|
|
6051
|
-
|
|
6052
|
-
|
|
6061
|
+
this.renderBadge = () => {
|
|
6062
|
+
var _a;
|
|
6063
|
+
// Inside the dropdown trigger the button's aria-label is the name, so the
|
|
6064
|
+
// badge is decorative there, as the status dot is. An empty label is
|
|
6065
|
+
// decorative too, rather than an image with no name.
|
|
6066
|
+
const badgeLabel = (_a = this.badgeLabel) !== null && _a !== void 0 ? _a : DEFAULT_BADGE_LABEL;
|
|
6067
|
+
const label = this.dropdown || badgeLabel === '' ? undefined : badgeLabel;
|
|
6068
|
+
return (
|
|
6069
|
+
// `badge` and `status` share the bottom-end corner; `status` wins so the
|
|
6070
|
+
// presence dot is never painted over the badge.
|
|
6071
|
+
this.badge && !this.status
|
|
6072
|
+
// Percentage is average size of icon in relation to total avatar size
|
|
6073
|
+
// of all preset sizes found in Figma.
|
|
6074
|
+
// Used to allow icons to scale to container size
|
|
6075
|
+
&& 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 }));
|
|
6076
|
+
};
|
|
6053
6077
|
this.renderStatus = () => {
|
|
6054
6078
|
var _a;
|
|
6055
6079
|
if (!this.status)
|
|
@@ -6072,7 +6096,7 @@ class PdsAvatar {
|
|
|
6072
6096
|
// Percentage is average size of icon in relation to total avatar size
|
|
6073
6097
|
// of all preset sizes found in Figma.
|
|
6074
6098
|
// Used to allow icons to scale to container size
|
|
6075
|
-
return hAsync("pds-icon", { color: "var(--pine-color-brand)", icon: userFilled, size: "33.53%" });
|
|
6099
|
+
return hAsync("pds-icon", { color: "var(--pine-color-brand)", icon: userFilled, size: "33.53%", "aria-hidden": "true" });
|
|
6076
6100
|
};
|
|
6077
6101
|
this.classNames = () => ({
|
|
6078
6102
|
'pds-avatar': true,
|
|
@@ -6104,7 +6128,7 @@ class PdsAvatar {
|
|
|
6104
6128
|
}
|
|
6105
6129
|
}
|
|
6106
6130
|
render() {
|
|
6107
|
-
return (hAsync(Host, { key: '
|
|
6131
|
+
return (hAsync(Host, { key: '0942c1fff94d0d8138143cbddf80aea1d09e34a9', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
|
|
6108
6132
|
}
|
|
6109
6133
|
get el() { return getElement(this); }
|
|
6110
6134
|
static get watchers() { return {
|
|
@@ -6122,6 +6146,7 @@ class PdsAvatar {
|
|
|
6122
6146
|
"$members$": {
|
|
6123
6147
|
"alt": [1],
|
|
6124
6148
|
"badge": [4],
|
|
6149
|
+
"badgeLabel": [1, "badge-label"],
|
|
6125
6150
|
"componentId": [1, "component-id"],
|
|
6126
6151
|
"dropdown": [4],
|
|
6127
6152
|
"image": [1],
|
|
@@ -6584,7 +6609,7 @@ class PdsBox {
|
|
|
6584
6609
|
const normalizedBorder = normalizeColorValue$1(this.borderColor);
|
|
6585
6610
|
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 }));
|
|
6586
6611
|
this.hostKeeper.record(boxClasses, boxInlineStyles);
|
|
6587
|
-
return (hAsync(Host, { key: '
|
|
6612
|
+
return (hAsync(Host, { key: 'c791a8d413b47629c619424bebf9d9c4acc4d9f3', class: boxClasses, style: boxInlineStyles }));
|
|
6588
6613
|
}
|
|
6589
6614
|
get el() { return getElement(this); }
|
|
6590
6615
|
static get style() { return pdsBoxCss(); }
|
|
@@ -6721,8 +6746,52 @@ class PdsBox {
|
|
|
6721
6746
|
}; }
|
|
6722
6747
|
}
|
|
6723
6748
|
|
|
6749
|
+
/**
|
|
6750
|
+
* The ARIA attributes that take ID references, and the element-reflection property each is forwarded
|
|
6751
|
+
* through. An ID on a host can't reach an element inside its shadow root, so a component that
|
|
6752
|
+
* delegates focus forwards the elements the IDs point at instead. A browser without ARIA element
|
|
6753
|
+
* reflection gets none of them.
|
|
6754
|
+
*/
|
|
6755
|
+
const ARIA_REFERENCE_PROPERTIES = {
|
|
6756
|
+
'aria-controls': 'ariaControlsElements',
|
|
6757
|
+
'aria-describedby': 'ariaDescribedByElements',
|
|
6758
|
+
'aria-labelledby': 'ariaLabelledByElements',
|
|
6759
|
+
};
|
|
6760
|
+
const ARIA_REFERENCE_ATTRIBUTES = Object.keys(ARIA_REFERENCE_PROPERTIES);
|
|
6761
|
+
/**
|
|
6762
|
+
* Finds an element by ID in the host's tree, then in each shadow root that contains it, so a host
|
|
6763
|
+
* inside another component's shadow root still reaches, say, a popover portal on document.body.
|
|
6764
|
+
* The closest root wins when an ID repeats.
|
|
6765
|
+
*/
|
|
6766
|
+
const findInAncestorRoots = (host, id) => {
|
|
6767
|
+
let root = host.getRootNode();
|
|
6768
|
+
while (root instanceof ShadowRoot) {
|
|
6769
|
+
const found = root.getElementById(id);
|
|
6770
|
+
if (found)
|
|
6771
|
+
return found;
|
|
6772
|
+
root = root.host.getRootNode();
|
|
6773
|
+
}
|
|
6774
|
+
return root instanceof Document ? root.getElementById(id) : null;
|
|
6775
|
+
};
|
|
6776
|
+
/**
|
|
6777
|
+
* Points the target's reflected ARIA properties at the elements the host's ID-reference attributes
|
|
6778
|
+
* name, or clears them. Run it again whenever the attributes or the referenced elements may have
|
|
6779
|
+
* changed: element references don't follow an ID to a node added or replaced later.
|
|
6780
|
+
*/
|
|
6781
|
+
const forwardAriaReferences = (host, target) => {
|
|
6782
|
+
Object.entries(ARIA_REFERENCE_PROPERTIES).forEach(([attribute, property]) => {
|
|
6783
|
+
var _a, _b;
|
|
6784
|
+
if (!(property in target))
|
|
6785
|
+
return;
|
|
6786
|
+
const ids = (_b = (_a = host.getAttribute(attribute)) === null || _a === void 0 ? void 0 : _a.split(/\s+/).filter(Boolean)) !== null && _b !== void 0 ? _b : [];
|
|
6787
|
+
const referenced = ids.map((id) => findInAncestorRoots(host, id)).filter((el) => el !== null);
|
|
6788
|
+
target[property] = referenced.length > 0 ? referenced : null;
|
|
6789
|
+
});
|
|
6790
|
+
};
|
|
6791
|
+
|
|
6724
6792
|
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)}`;
|
|
6725
6793
|
|
|
6794
|
+
const FORWARDED_ARIA_ATTRIBUTES = ['aria-current', 'aria-expanded', 'aria-haspopup', 'aria-label', 'aria-pressed'];
|
|
6726
6795
|
/**
|
|
6727
6796
|
* @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).
|
|
6728
6797
|
* @part button-content - Exposes the button content for styling.
|
|
@@ -6781,12 +6850,22 @@ class PdsButton {
|
|
|
6781
6850
|
this.variant = 'primary';
|
|
6782
6851
|
this.hasStartContent = false;
|
|
6783
6852
|
this.hasEndContent = false;
|
|
6784
|
-
this.
|
|
6785
|
-
|
|
6786
|
-
|
|
6787
|
-
|
|
6788
|
-
|
|
6789
|
-
this.
|
|
6853
|
+
this.forwardedAria = {};
|
|
6854
|
+
// Copied rather than moved: frameworks and DOM morphs put host attributes back on every update,
|
|
6855
|
+
// so taking them off the host would fight each one.
|
|
6856
|
+
this.syncHostAria = () => {
|
|
6857
|
+
const forwarded = {};
|
|
6858
|
+
FORWARDED_ARIA_ATTRIBUTES.forEach((name) => (forwarded[name] = this.el.getAttribute(name)));
|
|
6859
|
+
// A new object always re-renders, and frameworks re-set unchanged attributes on every render of their own.
|
|
6860
|
+
if (FORWARDED_ARIA_ATTRIBUTES.some((name) => forwarded[name] !== this.forwardedAria[name])) {
|
|
6861
|
+
this.forwardedAria = forwarded;
|
|
6862
|
+
}
|
|
6863
|
+
this.forwardAriaReferences();
|
|
6864
|
+
};
|
|
6865
|
+
// A hint added after the button, or replaced by a framework or a DOM morph, is picked up by the
|
|
6866
|
+
// time focus reaches the button and it's announced.
|
|
6867
|
+
this.handleFocusIn = () => {
|
|
6868
|
+
this.forwardAriaReferences();
|
|
6790
6869
|
};
|
|
6791
6870
|
this.handleStartSlotChange = (event) => {
|
|
6792
6871
|
this.hasStartContent = event.target.assignedElements({ flatten: true }).length > 0;
|
|
@@ -6823,22 +6902,22 @@ class PdsButton {
|
|
|
6823
6902
|
};
|
|
6824
6903
|
}
|
|
6825
6904
|
connectedCallback() {
|
|
6826
|
-
this.
|
|
6905
|
+
this.syncHostAria();
|
|
6827
6906
|
if (typeof MutationObserver === 'undefined')
|
|
6828
6907
|
return;
|
|
6829
|
-
//
|
|
6830
|
-
this.
|
|
6831
|
-
this.
|
|
6832
|
-
attributeFilter:
|
|
6908
|
+
// Consumers, popovers and menus set these on the host, often after render, but only the inner element is announced.
|
|
6909
|
+
this.hostAriaObserver = new MutationObserver(this.syncHostAria);
|
|
6910
|
+
this.hostAriaObserver.observe(this.el, {
|
|
6911
|
+
attributeFilter: FORWARDED_ARIA_ATTRIBUTES.concat(ARIA_REFERENCE_ATTRIBUTES),
|
|
6833
6912
|
});
|
|
6834
6913
|
}
|
|
6835
6914
|
disconnectedCallback() {
|
|
6836
6915
|
var _a;
|
|
6837
|
-
(_a = this.
|
|
6838
|
-
this.
|
|
6916
|
+
(_a = this.hostAriaObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
6917
|
+
this.hostAriaObserver = undefined;
|
|
6839
6918
|
}
|
|
6840
6919
|
componentDidRender() {
|
|
6841
|
-
this.
|
|
6920
|
+
this.forwardAriaReferences();
|
|
6842
6921
|
}
|
|
6843
6922
|
/**
|
|
6844
6923
|
* Listen for Enter key presses on form inputs to trigger submit
|
|
@@ -6889,25 +6968,9 @@ class PdsButton {
|
|
|
6889
6968
|
}
|
|
6890
6969
|
}
|
|
6891
6970
|
}
|
|
6892
|
-
|
|
6893
|
-
|
|
6894
|
-
|
|
6895
|
-
if (!this.contentEl || !('ariaControlsElements' in this.contentEl))
|
|
6896
|
-
return;
|
|
6897
|
-
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 : [];
|
|
6898
|
-
const controlled = ids.map((id) => this.findInAncestorRoots(id)).filter((el) => el !== null);
|
|
6899
|
-
this.contentEl.ariaControlsElements = controlled.length > 0 ? controlled : null;
|
|
6900
|
-
}
|
|
6901
|
-
// A trigger inside another component's shadow root still controls a popover portal on document.body.
|
|
6902
|
-
findInAncestorRoots(id) {
|
|
6903
|
-
let root = this.el.getRootNode();
|
|
6904
|
-
while (root instanceof ShadowRoot) {
|
|
6905
|
-
const found = root.getElementById(id);
|
|
6906
|
-
if (found)
|
|
6907
|
-
return found;
|
|
6908
|
-
root = root.host.getRootNode();
|
|
6909
|
-
}
|
|
6910
|
-
return root instanceof Document ? root.getElementById(id) : null;
|
|
6971
|
+
forwardAriaReferences() {
|
|
6972
|
+
if (this.contentEl)
|
|
6973
|
+
forwardAriaReferences(this.el, this.contentEl);
|
|
6911
6974
|
}
|
|
6912
6975
|
classNames() {
|
|
6913
6976
|
const classNames = ['pds-button'];
|
|
@@ -6953,16 +7016,13 @@ class PdsButton {
|
|
|
6953
7016
|
}
|
|
6954
7017
|
render() {
|
|
6955
7018
|
// Common props for both button and anchor elements
|
|
6956
|
-
const commonProps = {
|
|
6957
|
-
'aria-expanded': this.triggerExpanded,
|
|
6958
|
-
'aria-haspopup': this.triggerHasPopup,
|
|
6959
|
-
class: this.classNames(),
|
|
6960
|
-
part: 'button',
|
|
6961
|
-
ref: (el) => (this.contentEl = el),
|
|
6962
|
-
};
|
|
7019
|
+
const commonProps = Object.assign(Object.assign({}, this.forwardedAria), { class: this.classNames(), part: 'button', ref: (el) => (this.contentEl = el) });
|
|
6963
7020
|
const attributes = () => {
|
|
6964
7021
|
if (this.href) {
|
|
6965
|
-
return Object.assign(Object.assign({}, commonProps), {
|
|
7022
|
+
return Object.assign(Object.assign({}, commonProps), {
|
|
7023
|
+
// ARIA allows aria-pressed only on buttons, so a link never gets it.
|
|
7024
|
+
'aria-pressed': null, download: this.download, href: this.disabled ? null : this.href, target: this.target
|
|
7025
|
+
});
|
|
6966
7026
|
}
|
|
6967
7027
|
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 });
|
|
6968
7028
|
};
|
|
@@ -6970,7 +7030,7 @@ class PdsButton {
|
|
|
6970
7030
|
// Hide text when loading or iconOnly is true
|
|
6971
7031
|
const hideText = this.loading || this.iconOnly;
|
|
6972
7032
|
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()));
|
|
6973
|
-
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)));
|
|
7033
|
+
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)));
|
|
6974
7034
|
}
|
|
6975
7035
|
static get delegatesFocus() { return true; }
|
|
6976
7036
|
get el() { return getElement(this); }
|
|
@@ -6995,8 +7055,7 @@ class PdsButton {
|
|
|
6995
7055
|
"variant": [1],
|
|
6996
7056
|
"hasStartContent": [32],
|
|
6997
7057
|
"hasEndContent": [32],
|
|
6998
|
-
"
|
|
6999
|
-
"triggerHasPopup": [32]
|
|
7058
|
+
"forwardedAria": [32]
|
|
7000
7059
|
},
|
|
7001
7060
|
"$listeners$": [[16, "keydown", "handleFormKeyDown"]],
|
|
7002
7061
|
"$lazyBundleId$": "-",
|
|
@@ -7068,7 +7127,7 @@ const isSpecTest = () => {
|
|
|
7068
7127
|
|
|
7069
7128
|
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)}`;
|
|
7070
7129
|
|
|
7071
|
-
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)}`;
|
|
7130
|
+
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)))}}`;
|
|
7072
7131
|
|
|
7073
7132
|
/**
|
|
7074
7133
|
* @slot label - Content displayed as the checkbox label in place of the `label` text. Clicking it toggles the checkbox.
|
|
@@ -7086,6 +7145,11 @@ class PdsCheckbox {
|
|
|
7086
7145
|
* It determines whether or not the checkbox is checked.
|
|
7087
7146
|
*/
|
|
7088
7147
|
this.checked = false;
|
|
7148
|
+
/**
|
|
7149
|
+
* 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.
|
|
7150
|
+
* @defaultValue default
|
|
7151
|
+
*/
|
|
7152
|
+
this.variant = 'default';
|
|
7089
7153
|
this.handleCheckboxChange = (e) => {
|
|
7090
7154
|
if (this.disabled) {
|
|
7091
7155
|
return;
|
|
@@ -7125,6 +7189,9 @@ class PdsCheckbox {
|
|
|
7125
7189
|
if (this.hasLabelSlot) {
|
|
7126
7190
|
classNames.push('has-label-slot');
|
|
7127
7191
|
}
|
|
7192
|
+
if (this.variant === 'pill') {
|
|
7193
|
+
classNames.push('pds-checkbox--pill');
|
|
7194
|
+
}
|
|
7128
7195
|
return classNames.join(' ');
|
|
7129
7196
|
}
|
|
7130
7197
|
connectedCallback() {
|
|
@@ -7187,9 +7254,9 @@ class PdsCheckbox {
|
|
|
7187
7254
|
render() {
|
|
7188
7255
|
const hostClass = this.classNames();
|
|
7189
7256
|
this.hostKeeper.record(hostClass);
|
|
7190
|
-
return (hAsync(Host, { key: '
|
|
7191
|
-
hAsync("div", { key: '
|
|
7192
|
-
hAsync("div", { key: '
|
|
7257
|
+
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 &&
|
|
7258
|
+
hAsync("div", { key: 'c5455322eb07bf73805a17c28bf6acc1b5384337', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
7259
|
+
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)));
|
|
7193
7260
|
}
|
|
7194
7261
|
static get formAssociated() { return true; }
|
|
7195
7262
|
get el() { return getElement(this); }
|
|
@@ -7217,6 +7284,7 @@ class PdsCheckbox {
|
|
|
7217
7284
|
"name": [1],
|
|
7218
7285
|
"required": [4],
|
|
7219
7286
|
"value": [1],
|
|
7287
|
+
"variant": [1],
|
|
7220
7288
|
"hasLabelSlot": [32]
|
|
7221
7289
|
},
|
|
7222
7290
|
"$listeners$": undefined,
|
|
@@ -8988,12 +9056,24 @@ function injectStyles() {
|
|
|
8988
9056
|
function isOverflowing(el) {
|
|
8989
9057
|
return el.scrollWidth > el.clientWidth;
|
|
8990
9058
|
}
|
|
9059
|
+
/**
|
|
9060
|
+
* Engines without `:focus-visible` throw on the selector, so there every
|
|
9061
|
+
* focus counts as visible rather than none.
|
|
9062
|
+
*/
|
|
9063
|
+
function isFocusVisible(el) {
|
|
9064
|
+
try {
|
|
9065
|
+
return el.matches(':focus-visible');
|
|
9066
|
+
}
|
|
9067
|
+
catch (_a) {
|
|
9068
|
+
return true;
|
|
9069
|
+
}
|
|
9070
|
+
}
|
|
8991
9071
|
/**
|
|
8992
9072
|
* Sets up automatic tooltip behavior for a truncated element.
|
|
8993
9073
|
*
|
|
8994
|
-
* When the element's text overflows, hovering
|
|
8995
|
-
* will display a tooltip showing the full text content. The
|
|
8996
|
-
* rendered as a portal on document.body and positioned with Floating UI.
|
|
9074
|
+
* When the element's text overflows, hovering the host element or giving it
|
|
9075
|
+
* keyboard focus will display a tooltip showing the full text content. The
|
|
9076
|
+
* tooltip is rendered as a portal on document.body and positioned with Floating UI.
|
|
8997
9077
|
*
|
|
8998
9078
|
* Also owns the element's `tabindex` while it is clipped — see syncTabIndex.
|
|
8999
9079
|
*
|
|
@@ -9184,18 +9264,30 @@ function setupTruncationTooltip(options) {
|
|
|
9184
9264
|
isHoveringPortal = false;
|
|
9185
9265
|
scheduleHide();
|
|
9186
9266
|
}
|
|
9187
|
-
|
|
9267
|
+
// Keyboard focus only: focus from a click would pin the tooltip open after the pointer leaves.
|
|
9268
|
+
// Events from inside a shadow root arrive retargeted to its host, so test the innermost target.
|
|
9269
|
+
function showForVisibleFocus(event) {
|
|
9270
|
+
if (!isFocusVisible(event.composedPath()[0]))
|
|
9271
|
+
return;
|
|
9188
9272
|
isFocused = true;
|
|
9189
9273
|
showTooltip();
|
|
9190
9274
|
}
|
|
9275
|
+
// A key press after a click makes focus visible in place, with no new focusin. keyup, not
|
|
9276
|
+
// keydown, so Tab's focus move lands first; Escape asks to dismiss, never to reveal.
|
|
9277
|
+
function handleKeyUp(event) {
|
|
9278
|
+
if (isFocused || event.key === 'Escape')
|
|
9279
|
+
return;
|
|
9280
|
+
showForVisibleFocus(event);
|
|
9281
|
+
}
|
|
9191
9282
|
function handleFocusOut() {
|
|
9192
9283
|
isFocused = false;
|
|
9193
9284
|
scheduleHide();
|
|
9194
9285
|
}
|
|
9195
9286
|
hostEl.addEventListener('mouseenter', handleMouseEnter);
|
|
9196
9287
|
hostEl.addEventListener('mouseleave', handleMouseLeave);
|
|
9197
|
-
focusEl.addEventListener('focusin',
|
|
9288
|
+
focusEl.addEventListener('focusin', showForVisibleFocus);
|
|
9198
9289
|
focusEl.addEventListener('focusout', handleFocusOut);
|
|
9290
|
+
focusEl.addEventListener('keyup', handleKeyUp);
|
|
9199
9291
|
// Return cleanup function
|
|
9200
9292
|
return () => {
|
|
9201
9293
|
disposed = true;
|
|
@@ -9215,8 +9307,9 @@ function setupTruncationTooltip(options) {
|
|
|
9215
9307
|
}
|
|
9216
9308
|
hostEl.removeEventListener('mouseenter', handleMouseEnter);
|
|
9217
9309
|
hostEl.removeEventListener('mouseleave', handleMouseLeave);
|
|
9218
|
-
focusEl.removeEventListener('focusin',
|
|
9310
|
+
focusEl.removeEventListener('focusin', showForVisibleFocus);
|
|
9219
9311
|
focusEl.removeEventListener('focusout', handleFocusOut);
|
|
9312
|
+
focusEl.removeEventListener('keyup', handleKeyUp);
|
|
9220
9313
|
removePortal();
|
|
9221
9314
|
};
|
|
9222
9315
|
}
|
|
@@ -9458,13 +9551,13 @@ class PdsChip {
|
|
|
9458
9551
|
'aria-label': this.dismissLabel,
|
|
9459
9552
|
};
|
|
9460
9553
|
};
|
|
9461
|
-
return (hAsync(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), hAsync("pds-icon", { icon: remove, size: this.iconSize })));
|
|
9554
|
+
return (hAsync(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), hAsync("pds-icon", { icon: remove, size: this.iconSize, "aria-hidden": "true" })));
|
|
9462
9555
|
}
|
|
9463
9556
|
render() {
|
|
9464
9557
|
const hostClass = this.classNames();
|
|
9465
9558
|
const hostStyles = this.hostStyles;
|
|
9466
9559
|
this.hostKeeper.record(hostClass, hostStyles);
|
|
9467
|
-
return (hAsync(Host, { key: '
|
|
9560
|
+
return (hAsync(Host, { key: '0e67ea3700e8a8e1ad3049b6eafced6934262335', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
|
|
9468
9561
|
}
|
|
9469
9562
|
get el() { return getElement(this); }
|
|
9470
9563
|
static get style() { return pdsChipTokensCss() + pdsChipCss(); }
|
|
@@ -11174,7 +11267,7 @@ class FlyoutController {
|
|
|
11174
11267
|
}
|
|
11175
11268
|
}
|
|
11176
11269
|
|
|
11177
|
-
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)}`;
|
|
11270
|
+
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)}`;
|
|
11178
11271
|
|
|
11179
11272
|
/**
|
|
11180
11273
|
* @slot option - Option elements for the combobox dropdown
|
|
@@ -11315,6 +11408,13 @@ class PdsCombobox {
|
|
|
11315
11408
|
* @default 'pill'
|
|
11316
11409
|
*/
|
|
11317
11410
|
this.triggerShape = 'pill';
|
|
11411
|
+
/**
|
|
11412
|
+
* Determines whether the button trigger's label and the option labels should truncate and display with an ellipsis.
|
|
11413
|
+
* When a label overflows, a `title` showing the full label will appear on hover.
|
|
11414
|
+
* Chip options, custom layouts and group rows aren't affected.
|
|
11415
|
+
* @defaultValue false
|
|
11416
|
+
*/
|
|
11417
|
+
this.truncate = false;
|
|
11318
11418
|
/**
|
|
11319
11419
|
* The sentiment for the chip trigger. Matches Pine chip sentiments.
|
|
11320
11420
|
* @default 'neutral'
|
|
@@ -11611,10 +11711,15 @@ class PdsCombobox {
|
|
|
11611
11711
|
if (this.usesPanelSearch)
|
|
11612
11712
|
this.restoreFocusToTrigger();
|
|
11613
11713
|
};
|
|
11714
|
+
this.onButtonTriggerMouseEnter = (event) => {
|
|
11715
|
+
this.syncTitle(event.currentTarget, '.pds-combobox__button-trigger-text');
|
|
11716
|
+
};
|
|
11614
11717
|
// Event handler for mouse enter on option
|
|
11615
11718
|
this.onOptionMouseEnter = (event) => {
|
|
11616
|
-
const
|
|
11617
|
-
this.
|
|
11719
|
+
const row = event.currentTarget;
|
|
11720
|
+
if (this.truncate)
|
|
11721
|
+
this.syncTitle(row, '.pds-combobox__option-text');
|
|
11722
|
+
this.highlightedIndex = Number(row.getAttribute('data-option-index'));
|
|
11618
11723
|
this.keyboardNavigating = false;
|
|
11619
11724
|
};
|
|
11620
11725
|
this.onGroupRowMouseEnter = (event) => {
|
|
@@ -11904,6 +12009,19 @@ class PdsCombobox {
|
|
|
11904
12009
|
this.focusPanel(panelFocusEl);
|
|
11905
12010
|
}
|
|
11906
12011
|
}
|
|
12012
|
+
// A `title` only while the text is cut, measured on hover. On the span, not the option or trigger,
|
|
12013
|
+
// so it isn't read again as their description.
|
|
12014
|
+
syncTitle(el, selector) {
|
|
12015
|
+
const text = el.querySelector(selector);
|
|
12016
|
+
if (!text)
|
|
12017
|
+
return;
|
|
12018
|
+
if (text.scrollWidth > text.clientWidth) {
|
|
12019
|
+
text.title = text.textContent || '';
|
|
12020
|
+
}
|
|
12021
|
+
else {
|
|
12022
|
+
text.removeAttribute('title');
|
|
12023
|
+
}
|
|
12024
|
+
}
|
|
11907
12025
|
/**
|
|
11908
12026
|
* Scrolls just enough to show `el`, as `scrollIntoView({ block: 'nearest' })` does. In the drill-in
|
|
11909
12027
|
* panel it scrolls the list alone, and never sideways: while a drill-in slide offsets a row past
|
|
@@ -13305,6 +13423,7 @@ class PdsCombobox {
|
|
|
13305
13423
|
'pds-combobox__listbox--drill-in': this.drillDirection === 'in',
|
|
13306
13424
|
'pds-combobox__listbox--drill-out': this.drillDirection === 'out',
|
|
13307
13425
|
'pds-combobox__listbox--pointer-hover': this.pointerCanHover,
|
|
13426
|
+
'pds-combobox__listbox--truncate': this.truncate,
|
|
13308
13427
|
}, 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",
|
|
13309
13428
|
// Focusable but out of the tab order with panel search, so it can take focus when a
|
|
13310
13429
|
// drilled-in group hides the field. Dropping it while focused would blur the list and close.
|
|
@@ -13471,14 +13590,15 @@ class PdsCombobox {
|
|
|
13471
13590
|
'pds-combobox__option--layout': isLayout,
|
|
13472
13591
|
'pds-combobox__option--chip': isChip,
|
|
13473
13592
|
'pds-combobox__option--disabled': isDisabled,
|
|
13474
|
-
}, "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" })));
|
|
13593
|
+
}, "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" })));
|
|
13475
13594
|
}
|
|
13476
13595
|
/** An option's text, after its `data-icon` when it has one. */
|
|
13477
13596
|
renderOptionLabel(option) {
|
|
13478
13597
|
const icon = optionIconOf(option);
|
|
13598
|
+
const label = this.truncate ? (hAsync("span", { key: this.getOptionLabel(option), class: "pds-combobox__option-text" }, this.getOptionLabel(option))) : this.getOptionLabel(option);
|
|
13479
13599
|
if (icon === null)
|
|
13480
|
-
return
|
|
13481
|
-
return (hAsync("span", { class: "pds-combobox__option-label" }, hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }),
|
|
13600
|
+
return label;
|
|
13601
|
+
return (hAsync("span", { class: "pds-combobox__option-label" }, hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }), label));
|
|
13482
13602
|
}
|
|
13483
13603
|
/** The grouped panel's rows, in the order the panel draws them and the keyboard moves through. */
|
|
13484
13604
|
panelEntries() {
|
|
@@ -13566,7 +13686,9 @@ class PdsCombobox {
|
|
|
13566
13686
|
'pds-combobox__button-trigger-label--with-icon': icon !== null,
|
|
13567
13687
|
} }, icon !== null && (
|
|
13568
13688
|
// `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
|
|
13569
|
-
hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.
|
|
13689
|
+
hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.truncate ? (
|
|
13690
|
+
// Keyed so a new label drops a stale `title`.
|
|
13691
|
+
hAsync("span", { key: this.selectedLabel || this.placeholder, class: "pds-combobox__button-trigger-text" }, this.selectedLabel || this.placeholder)) : (this.selectedLabel || this.placeholder)));
|
|
13570
13692
|
}
|
|
13571
13693
|
/** The selection's icon for the button trigger: the option's own, or else its group's. */
|
|
13572
13694
|
get selectedIcon() {
|
|
@@ -13670,7 +13792,7 @@ class PdsCombobox {
|
|
|
13670
13792
|
}
|
|
13671
13793
|
// Helper method to render chip trigger default content
|
|
13672
13794
|
renderChipTriggerDefaultContent() {
|
|
13673
|
-
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));
|
|
13795
|
+
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));
|
|
13674
13796
|
}
|
|
13675
13797
|
// Helper method to render option as chip (new automatic approach)
|
|
13676
13798
|
renderOptionChip(option) {
|
|
@@ -13698,16 +13820,17 @@ class PdsCombobox {
|
|
|
13698
13820
|
'pds-combobox__button-trigger',
|
|
13699
13821
|
`pds-combobox__button-trigger--${this.triggerVariant}`,
|
|
13700
13822
|
this.triggerShape === 'input' && 'pds-combobox__button-trigger--input-shape',
|
|
13823
|
+
this.truncate && 'pds-combobox__button-trigger--truncate',
|
|
13701
13824
|
]
|
|
13702
13825
|
.filter(Boolean)
|
|
13703
13826
|
.join(' ');
|
|
13704
|
-
return (hAsync(Host, { key: '
|
|
13827
|
+
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 => {
|
|
13705
13828
|
this.inputEl = el;
|
|
13706
13829
|
this.triggerEl = el;
|
|
13707
13830
|
}, class: {
|
|
13708
13831
|
'pds-combobox__input': true,
|
|
13709
13832
|
'pds-combobox__input--invalid': this.isInvalid(),
|
|
13710
|
-
}, 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: '
|
|
13833
|
+
}, 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' && [
|
|
13711
13834
|
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 : ''),
|
|
13712
13835
|
// Its own region: sharing one, revealing a row then opening it would leave the text the
|
|
13713
13836
|
// same, and opening the group would go unannounced.
|
|
@@ -13778,6 +13901,7 @@ class PdsCombobox {
|
|
|
13778
13901
|
"triggerWidth": [1, "trigger-width"],
|
|
13779
13902
|
"triggerVariant": [1, "trigger-variant"],
|
|
13780
13903
|
"triggerShape": [1, "trigger-shape"],
|
|
13904
|
+
"truncate": [516],
|
|
13781
13905
|
"chipSentiment": [1, "chip-sentiment"],
|
|
13782
13906
|
"chipLarge": [4, "chip-large"],
|
|
13783
13907
|
"chipIcon": [1, "chip-icon"],
|
|
@@ -13814,7 +13938,7 @@ class PdsCombobox {
|
|
|
13814
13938
|
},
|
|
13815
13939
|
"$listeners$": undefined,
|
|
13816
13940
|
"$lazyBundleId$": "-",
|
|
13817
|
-
"$attrsToReflect$": [["name", "name"]]
|
|
13941
|
+
"$attrsToReflect$": [["name", "name"], ["truncate", "truncate"]]
|
|
13818
13942
|
}; }
|
|
13819
13943
|
}
|
|
13820
13944
|
|
|
@@ -13847,7 +13971,7 @@ class PdsContainer {
|
|
|
13847
13971
|
hostStyle['--pine-container-max-width'] = customSize;
|
|
13848
13972
|
if (!this.centered)
|
|
13849
13973
|
hostStyle['margin-inline'] = '0';
|
|
13850
|
-
return (hAsync(Host, { key: '
|
|
13974
|
+
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' }))));
|
|
13851
13975
|
}
|
|
13852
13976
|
static get style() { return pdsContainerCss(); }
|
|
13853
13977
|
static get cmpMeta() { return {
|
|
@@ -13972,7 +14096,7 @@ class PdsCopytext {
|
|
|
13972
14096
|
render() {
|
|
13973
14097
|
const hostClass = this.classNames();
|
|
13974
14098
|
this.hostKeeper.record(hostClass);
|
|
13975
|
-
return (hAsync(Host, { key: '
|
|
14099
|
+
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" }))));
|
|
13976
14100
|
}
|
|
13977
14101
|
get el() { return getElement(this); }
|
|
13978
14102
|
static get watchers() { return {
|
|
@@ -15974,14 +16098,14 @@ class PdsDatepicker {
|
|
|
15974
16098
|
}
|
|
15975
16099
|
render() {
|
|
15976
16100
|
const locale = this.resolvedLocale;
|
|
15977
|
-
return (hAsync(Host, { key: '
|
|
16101
|
+
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", {
|
|
15978
16102
|
// Keyed, as is the calendar button: when Clear appears after a pick, the focused
|
|
15979
16103
|
// calendar button must stay that button rather than be reused as Clear.
|
|
15980
16104
|
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,
|
|
15981
16105
|
// Out of the tab order, as a native search field's clear button is: Tab from a field
|
|
15982
16106
|
// just emptied would land on it as the change removes it, dropping focus to the page.
|
|
15983
16107
|
tabindex: "-1", onMouseDown: this.onClearMouseDown, onClick: this.onClearClick
|
|
15984
|
-
}, hAsync("pds-icon", { key: '
|
|
16108
|
+
}, 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)));
|
|
15985
16109
|
}
|
|
15986
16110
|
static get formAssociated() { return true; }
|
|
15987
16111
|
get el() { return getElement(this); }
|
|
@@ -16123,7 +16247,7 @@ class PdsDivider {
|
|
|
16123
16247
|
return classNames.join(' ');
|
|
16124
16248
|
}
|
|
16125
16249
|
render() {
|
|
16126
|
-
return (hAsync(Host, { key: '
|
|
16250
|
+
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() }))));
|
|
16127
16251
|
}
|
|
16128
16252
|
static get style() { return pdsDividerCss(); }
|
|
16129
16253
|
static get cmpMeta() { return {
|
|
@@ -16319,11 +16443,11 @@ class PdsDrawer {
|
|
|
16319
16443
|
this.open = false;
|
|
16320
16444
|
}
|
|
16321
16445
|
render() {
|
|
16322
|
-
return (hAsync(Host, { key: '
|
|
16446
|
+
return (hAsync(Host, { key: '7cf13256457914e48e8fde422832a2a52ee0c13b', class: {
|
|
16323
16447
|
'pds-drawer': true,
|
|
16324
16448
|
[`pds-drawer--${this.side}`]: true,
|
|
16325
16449
|
[`pds-drawer--${this.size}`]: true,
|
|
16326
|
-
} }, hAsync("pds-modal", { key: '
|
|
16450
|
+
} }, 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' }))));
|
|
16327
16451
|
}
|
|
16328
16452
|
get el() { return getElement(this); }
|
|
16329
16453
|
static get style() { return pdsDrawerCss(); }
|
|
@@ -16364,7 +16488,7 @@ class PdsDrawerContent {
|
|
|
16364
16488
|
unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
|
|
16365
16489
|
}
|
|
16366
16490
|
render() {
|
|
16367
|
-
return (hAsync("div", { key: '
|
|
16491
|
+
return (hAsync("div", { key: 'b15b087506c1292f9d67e531e8d935069749c09d', class: "pds-drawer-content" }, hAsync("slot", { key: '9c60ca75c7905e7e994f9c41eee213b962afb833' })));
|
|
16368
16492
|
}
|
|
16369
16493
|
get el() { return getElement(this); }
|
|
16370
16494
|
static get style() { return pdsDrawerContentCss(); }
|
|
@@ -16392,7 +16516,7 @@ class PdsDrawerFooter {
|
|
|
16392
16516
|
unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
|
|
16393
16517
|
}
|
|
16394
16518
|
render() {
|
|
16395
|
-
return (hAsync("footer", { key: '
|
|
16519
|
+
return (hAsync("footer", { key: 'a4eec0aff617c605b94f8d3b9ec1e2d98cded6fb', class: "pds-drawer__footer" }, hAsync("slot", { key: '6dc379c940e37edfd05d99728be9dff58ca1d717' })));
|
|
16396
16520
|
}
|
|
16397
16521
|
get el() { return getElement(this); }
|
|
16398
16522
|
static get style() { return pdsDrawerFooterCss(); }
|
|
@@ -16420,7 +16544,7 @@ class PdsDrawerHeader {
|
|
|
16420
16544
|
unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
|
|
16421
16545
|
}
|
|
16422
16546
|
render() {
|
|
16423
|
-
return (hAsync("header", { key: '
|
|
16547
|
+
return (hAsync("header", { key: '6b9338e5dbf7a7e580c11b28c95ca53693528382', class: "pds-drawer__header" }, hAsync("slot", { key: '0990fbcf94c0c438b98cf1e8945f1e2fd9aa33dc' })));
|
|
16424
16548
|
}
|
|
16425
16549
|
get el() { return getElement(this); }
|
|
16426
16550
|
static get style() { return pdsDrawerHeaderCss(); }
|
|
@@ -16636,11 +16760,11 @@ class PdsDropdownMenu {
|
|
|
16636
16760
|
if (tagName === 'pds-dropdown-menu-item') {
|
|
16637
16761
|
// For pds-dropdown-menu-item, focus the inner element
|
|
16638
16762
|
const menuItem = item;
|
|
16639
|
-
const
|
|
16763
|
+
const innerControl = (_a = menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [role="menuitem"]');
|
|
16640
16764
|
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'))
|
|
16641
16765
|
|| ((_e = menuItem.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('a'));
|
|
16642
|
-
if (
|
|
16643
|
-
|
|
16766
|
+
if (innerControl) {
|
|
16767
|
+
innerControl.focus();
|
|
16644
16768
|
}
|
|
16645
16769
|
else if (innerLink) {
|
|
16646
16770
|
innerLink.focus();
|
|
@@ -16792,7 +16916,7 @@ class PdsDropdownMenu {
|
|
|
16792
16916
|
}
|
|
16793
16917
|
}
|
|
16794
16918
|
render() {
|
|
16795
|
-
return (hAsync(Host, { key: '
|
|
16919
|
+
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 })))));
|
|
16796
16920
|
}
|
|
16797
16921
|
get host() { return getElement(this); }
|
|
16798
16922
|
static get style() { return pdsDropdownMenuCss(); }
|
|
@@ -16811,10 +16935,10 @@ class PdsDropdownMenu {
|
|
|
16811
16935
|
}; }
|
|
16812
16936
|
}
|
|
16813
16937
|
|
|
16814
|
-
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)}`;
|
|
16938
|
+
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)}`;
|
|
16815
16939
|
|
|
16816
16940
|
/**
|
|
16817
|
-
* @part button
|
|
16941
|
+
* @part button - Exposes the item's inner element for styling. Appears on button and informational items, not on links.
|
|
16818
16942
|
*/
|
|
16819
16943
|
class PdsDropdownMenuItem {
|
|
16820
16944
|
constructor(hostRef) {
|
|
@@ -16830,9 +16954,17 @@ class PdsDropdownMenuItem {
|
|
|
16830
16954
|
* @defaultValue false
|
|
16831
16955
|
*/
|
|
16832
16956
|
this.disabled = false;
|
|
16957
|
+
/**
|
|
16958
|
+
* It determines whether or not the dropdown-item is informational: text that the arrow keys
|
|
16959
|
+
* reach but that can't be activated. Takes precedence over `href` and `destructive`.
|
|
16960
|
+
* Screen readers announce it as dimmed or unavailable, the same way as a disabled item.
|
|
16961
|
+
* @defaultValue false
|
|
16962
|
+
*/
|
|
16963
|
+
this.informational = false;
|
|
16833
16964
|
/**
|
|
16834
16965
|
* Determines whether the link should open in a new tab and display an external icon.
|
|
16835
16966
|
* This is a simpler alternative to using `target="_blank"` for the common case.
|
|
16967
|
+
* Ignored when `informational` is set.
|
|
16836
16968
|
* @defaultValue false
|
|
16837
16969
|
*/
|
|
16838
16970
|
this.external = false;
|
|
@@ -16843,6 +16975,12 @@ class PdsDropdownMenuItem {
|
|
|
16843
16975
|
this.handleBlur = () => {
|
|
16844
16976
|
this.hasFocus = false;
|
|
16845
16977
|
};
|
|
16978
|
+
// Space would otherwise scroll the page, since nothing in the item takes the key.
|
|
16979
|
+
this.handleInformationalKeyDown = (event) => {
|
|
16980
|
+
if (event.key === ' ') {
|
|
16981
|
+
event.preventDefault();
|
|
16982
|
+
}
|
|
16983
|
+
};
|
|
16846
16984
|
this.handleKeyDown = (event) => {
|
|
16847
16985
|
// Handle keyboard events
|
|
16848
16986
|
if (!this.disabled && (event.key === 'Enter')) {
|
|
@@ -16864,6 +17002,8 @@ class PdsDropdownMenuItem {
|
|
|
16864
17002
|
;
|
|
16865
17003
|
handleClick() {
|
|
16866
17004
|
var _a;
|
|
17005
|
+
if (this.informational)
|
|
17006
|
+
return;
|
|
16867
17007
|
// Filter only pds-dropdown-menu-item elements and find the index of the current item
|
|
16868
17008
|
const menuItems = Array.from(this.host.parentNode.children).filter((child) => child.tagName.toLowerCase() === 'pds-dropdown-menu-item');
|
|
16869
17009
|
const itemIndex = menuItems.indexOf(this.host);
|
|
@@ -16876,8 +17016,14 @@ class PdsDropdownMenuItem {
|
|
|
16876
17016
|
});
|
|
16877
17017
|
}
|
|
16878
17018
|
renderElement() {
|
|
17019
|
+
if (this.informational) {
|
|
17020
|
+
return (hAsync("div", { class: {
|
|
17021
|
+
'pds-dropdown-menu-item__content': true,
|
|
17022
|
+
'has-focus': this.hasFocus
|
|
17023
|
+
}, role: "menuitem", "aria-disabled": "true", part: "button", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleInformationalKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("slot", null)));
|
|
17024
|
+
}
|
|
16879
17025
|
if (this.href != null) {
|
|
16880
|
-
return (hAsync("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, target: this.target, class: {
|
|
17026
|
+
return (hAsync("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, externalLabel: this.externalLabel, target: this.target, class: {
|
|
16881
17027
|
'pds-dropdown-menu-item__content': true,
|
|
16882
17028
|
'has-focus': this.hasFocus
|
|
16883
17029
|
}, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-disabled": this.disabled ? 'true' : null }, hAsync("slot", null)));
|
|
@@ -16888,7 +17034,14 @@ class PdsDropdownMenuItem {
|
|
|
16888
17034
|
}, 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)));
|
|
16889
17035
|
}
|
|
16890
17036
|
render() {
|
|
16891
|
-
return (hAsync(Host, { key: '
|
|
17037
|
+
return (hAsync(Host, { key: 'a69947d99160783919f711d7c53e0592694f9565', id: this.componentId, class: {
|
|
17038
|
+
'is-disabled': this.disabled,
|
|
17039
|
+
'is-informational': this.informational,
|
|
17040
|
+
'destructive': !this.disabled && !this.informational && this.destructive
|
|
17041
|
+
}, onClick: () => !this.disabled && this.handleClick(), role: "none",
|
|
17042
|
+
// ARIA ignores role="none" on focusable elements, so a focusable host would sit between
|
|
17043
|
+
// the menu and the informational menuitem as an unexpected child.
|
|
17044
|
+
tabIndex: this.informational ? null : -1, "aria-disabled": this.disabled && !this.informational ? 'true' : null }, this.renderElement()));
|
|
16892
17045
|
}
|
|
16893
17046
|
get host() { return getElement(this); }
|
|
16894
17047
|
static get style() { return pdsDropdownMenuItemCss(); }
|
|
@@ -16901,14 +17054,16 @@ class PdsDropdownMenuItem {
|
|
|
16901
17054
|
"disabled": [516],
|
|
16902
17055
|
"download": [1],
|
|
16903
17056
|
"href": [1],
|
|
17057
|
+
"informational": [516],
|
|
16904
17058
|
"external": [516],
|
|
17059
|
+
"externalLabel": [1, "external-label"],
|
|
16905
17060
|
"target": [513],
|
|
16906
17061
|
"hasFocus": [32],
|
|
16907
17062
|
"clickItem": [64]
|
|
16908
17063
|
},
|
|
16909
17064
|
"$listeners$": undefined,
|
|
16910
17065
|
"$lazyBundleId$": "-",
|
|
16911
|
-
"$attrsToReflect$": [["disabled", "disabled"], ["external", "external"], ["target", "target"]]
|
|
17066
|
+
"$attrsToReflect$": [["disabled", "disabled"], ["informational", "informational"], ["external", "external"], ["target", "target"]]
|
|
16912
17067
|
}; }
|
|
16913
17068
|
}
|
|
16914
17069
|
|
|
@@ -16924,7 +17079,7 @@ class PdsDropdownMenuSeparator {
|
|
|
16924
17079
|
this.disabled = false;
|
|
16925
17080
|
}
|
|
16926
17081
|
render() {
|
|
16927
|
-
return (hAsync(Host, { key: '
|
|
17082
|
+
return (hAsync(Host, { key: '72f29c5015d2379d9986c90ec966f34f41298226', id: this.componentId }, hAsync("hr", { key: '72c2155d0fbee6346f3f38997009a7d9e14ad0c8' })));
|
|
16928
17083
|
}
|
|
16929
17084
|
static get style() { return pdsDropdownMenuSeparatorCss(); }
|
|
16930
17085
|
static get cmpMeta() { return {
|
|
@@ -17504,7 +17659,7 @@ class PdsFilter {
|
|
|
17504
17659
|
return null;
|
|
17505
17660
|
}
|
|
17506
17661
|
render() {
|
|
17507
|
-
return (hAsync(Host, { key: '
|
|
17662
|
+
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' })))));
|
|
17508
17663
|
}
|
|
17509
17664
|
get el() { return getElement(this); }
|
|
17510
17665
|
static get style() { return pdsFilterCss(); }
|
|
@@ -17536,7 +17691,7 @@ class PdsFilters {
|
|
|
17536
17691
|
registerInstance(this, hostRef);
|
|
17537
17692
|
}
|
|
17538
17693
|
render() {
|
|
17539
|
-
return (hAsync(Host, { key: '
|
|
17694
|
+
return (hAsync(Host, { key: '6f785fc222e3b5b7cf932f704b56aa7f1f52ead3', id: this.componentId }, hAsync("div", { key: '0ffd2894cdeb1e632228b4c3fa523069dcffa4b2', class: "pds-filters" }, hAsync("slot", { key: 'a3f42dedcda1b0fec78a33793d085791d9b9fc5c' }))));
|
|
17540
17695
|
}
|
|
17541
17696
|
static get style() { return pdsFiltersCss(); }
|
|
17542
17697
|
static get cmpMeta() { return {
|
|
@@ -18032,9 +18187,9 @@ class PdsImage {
|
|
|
18032
18187
|
this.loading = 'eager';
|
|
18033
18188
|
}
|
|
18034
18189
|
render() {
|
|
18035
|
-
return (hAsync(Host, { key: '
|
|
18190
|
+
return (hAsync(Host, { key: '6d2d48c468c39f53d67e63999dd83f3ad61053b5', class: {
|
|
18036
18191
|
'pds-image': true,
|
|
18037
|
-
}, id: this.componentId }, hAsync("img", { key: '
|
|
18192
|
+
}, 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 })));
|
|
18038
18193
|
}
|
|
18039
18194
|
static get style() { return pdsImageCss(); }
|
|
18040
18195
|
static get cmpMeta() { return {
|
|
@@ -18354,10 +18509,10 @@ class PdsInput {
|
|
|
18354
18509
|
'has-prepend': this.hasPrepend,
|
|
18355
18510
|
'has-append': this.hasAppend,
|
|
18356
18511
|
};
|
|
18357
|
-
return (hAsync(Host, { key: '
|
|
18512
|
+
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: {
|
|
18358
18513
|
'pds-input__label-wrapper': true,
|
|
18359
18514
|
'visually-hidden': this.hideLabel,
|
|
18360
|
-
} }, hAsync("label", { key: '
|
|
18515
|
+
} }, 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)))));
|
|
18361
18516
|
}
|
|
18362
18517
|
static get formAssociated() { return true; }
|
|
18363
18518
|
get el() { return getElement(this); }
|
|
@@ -18413,6 +18568,8 @@ class PdsInput {
|
|
|
18413
18568
|
|
|
18414
18569
|
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}`;
|
|
18415
18570
|
|
|
18571
|
+
// Used when `externalLabel` is unset; an empty string hides the icon instead.
|
|
18572
|
+
const DEFAULT_EXTERNAL_LABEL = '(opens in a new tab)';
|
|
18416
18573
|
/**
|
|
18417
18574
|
* @part link - Link element styles.
|
|
18418
18575
|
* @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.
|
|
@@ -18466,11 +18623,18 @@ class PdsLink {
|
|
|
18466
18623
|
return linkStyles;
|
|
18467
18624
|
}
|
|
18468
18625
|
render() {
|
|
18626
|
+
var _a;
|
|
18469
18627
|
const targetValue = this.target || (this.external ? '_blank' : undefined);
|
|
18470
18628
|
const showExternalIcon = this.external;
|
|
18471
|
-
const
|
|
18472
|
-
|
|
18473
|
-
|
|
18629
|
+
const opensInNewTab = targetValue === '_blank';
|
|
18630
|
+
const relValue = opensInNewTab ? 'noopener noreferrer' : undefined;
|
|
18631
|
+
// A `target` other than _blank overrides `external`, and then the label
|
|
18632
|
+
// would be false, so the icon is decorative there, as it is when the
|
|
18633
|
+
// label is empty.
|
|
18634
|
+
const externalLabel = (_a = this.externalLabel) !== null && _a !== void 0 ? _a : DEFAULT_EXTERNAL_LABEL;
|
|
18635
|
+
const externalIconLabel = opensInNewTab && externalLabel !== '' ? externalLabel : undefined;
|
|
18636
|
+
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 &&
|
|
18637
|
+
hAsync("pds-icon", { key: '161657146e5f3ce360480c573ea8f14c9012cb1f', icon: launch, size: this.fontSize, "aria-label": externalIconLabel, "aria-hidden": externalIconLabel === undefined ? 'true' : undefined })));
|
|
18474
18638
|
}
|
|
18475
18639
|
static get style() { return pdsLinkCss(); }
|
|
18476
18640
|
static get cmpMeta() { return {
|
|
@@ -18482,6 +18646,7 @@ class PdsLink {
|
|
|
18482
18646
|
"download": [1],
|
|
18483
18647
|
"componentId": [1, "component-id"],
|
|
18484
18648
|
"external": [4],
|
|
18649
|
+
"externalLabel": [1, "external-label"],
|
|
18485
18650
|
"target": [1],
|
|
18486
18651
|
"variant": [1],
|
|
18487
18652
|
"fontSize": [1, "font-size"],
|
|
@@ -18569,7 +18734,7 @@ class PdsLoader {
|
|
|
18569
18734
|
'aria-live': 'polite',
|
|
18570
18735
|
};
|
|
18571
18736
|
this.hostKeeper.record(hostClass, {}, hostAttributes);
|
|
18572
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
18737
|
+
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..."))));
|
|
18573
18738
|
}
|
|
18574
18739
|
get el() { return getElement(this); }
|
|
18575
18740
|
static get watchers() { return {
|
|
@@ -18593,12 +18758,6 @@ class PdsLoader {
|
|
|
18593
18758
|
}; }
|
|
18594
18759
|
}
|
|
18595
18760
|
|
|
18596
|
-
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}`;
|
|
18597
|
-
|
|
18598
|
-
const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
|
|
18599
|
-
const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
|
|
18600
|
-
/\d/.test(value) &&
|
|
18601
|
-
(typeof CSS === 'undefined' || CSS.supports('max-width', value));
|
|
18602
18761
|
const TABBABLE = [
|
|
18603
18762
|
'a[href]',
|
|
18604
18763
|
'area[href]',
|
|
@@ -18680,6 +18839,13 @@ function tabbableIn(root) {
|
|
|
18680
18839
|
});
|
|
18681
18840
|
return oneRadioPerGroup(visible);
|
|
18682
18841
|
}
|
|
18842
|
+
|
|
18843
|
+
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}`;
|
|
18844
|
+
|
|
18845
|
+
const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
|
|
18846
|
+
const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
|
|
18847
|
+
/\d/.test(value) &&
|
|
18848
|
+
(typeof CSS === 'undefined' || CSS.supports('max-width', value));
|
|
18683
18849
|
/** Whether `node` is `ancestor` or inside it, crossing shadow roots, which `Node.contains` doesn't. */
|
|
18684
18850
|
function containsComposed(ancestor, node) {
|
|
18685
18851
|
for (let current = node; current; current = current instanceof ShadowRoot ? current.host : current.parentNode) {
|
|
@@ -18695,7 +18861,7 @@ function containsComposed(ancestor, node) {
|
|
|
18695
18861
|
*/
|
|
18696
18862
|
const openModals = new Map();
|
|
18697
18863
|
let openSequence = 0;
|
|
18698
|
-
/** Whether an open
|
|
18864
|
+
/** Whether the panel of an open popover that takes Escape sits in `root`, including inside shadow roots under it. */
|
|
18699
18865
|
function hasOpenPopover(root) {
|
|
18700
18866
|
if (root.querySelector('[data-pds-popover-open]'))
|
|
18701
18867
|
return true;
|
|
@@ -19242,14 +19408,14 @@ class PdsModal {
|
|
|
19242
19408
|
}
|
|
19243
19409
|
render() {
|
|
19244
19410
|
const [sizeClass = 'md', customSize] = this.resolveSize();
|
|
19245
|
-
return (hAsync("dialog", { key: '
|
|
19411
|
+
return (hAsync("dialog", { key: 'cd574868a46b69185e2058c60374dbec34677732', class: {
|
|
19246
19412
|
'pds-modal__backdrop': true,
|
|
19247
19413
|
'open': this.open
|
|
19248
|
-
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: '
|
|
19414
|
+
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: '8c50fb4810b4bb07d62348fed44df30b14a52acd', class: {
|
|
19249
19415
|
'pds-modal': true,
|
|
19250
19416
|
[`pds-modal--${sizeClass}`]: true,
|
|
19251
19417
|
'pds-modal--scrollable': this.scrollable
|
|
19252
|
-
}, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '
|
|
19418
|
+
}, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '25a71c95dfeff4648a28edef21bf510b1743ed7c' }))));
|
|
19253
19419
|
}
|
|
19254
19420
|
get el() { return getElement(this); }
|
|
19255
19421
|
static get watchers() { return {
|
|
@@ -19300,6 +19466,21 @@ class PdsModalContent {
|
|
|
19300
19466
|
* Tracks whether the border prop was explicitly set by the user
|
|
19301
19467
|
*/
|
|
19302
19468
|
this.userSetBorder = false;
|
|
19469
|
+
this.hasLoaded = false;
|
|
19470
|
+
/**
|
|
19471
|
+
* Handle scroll events
|
|
19472
|
+
*/
|
|
19473
|
+
this.handleScroll = () => {
|
|
19474
|
+
this.updateBorders();
|
|
19475
|
+
};
|
|
19476
|
+
/**
|
|
19477
|
+
* Handle resize events
|
|
19478
|
+
*/
|
|
19479
|
+
this.handleResize = () => {
|
|
19480
|
+
this.calculateMaxHeight();
|
|
19481
|
+
// Update borders after resize as content scrollability might change
|
|
19482
|
+
setTimeout(() => this.updateBorders(), 50);
|
|
19483
|
+
};
|
|
19303
19484
|
}
|
|
19304
19485
|
// Unwraps a nested .pds-modal-content left by a page-cache (Turbo, bfcache) reconnect.
|
|
19305
19486
|
componentDidRender() {
|
|
@@ -19313,43 +19494,30 @@ class PdsModalContent {
|
|
|
19313
19494
|
this.userSetBorder = hasBorderAttribute || this.border !== 'none';
|
|
19314
19495
|
}
|
|
19315
19496
|
componentDidLoad() {
|
|
19497
|
+
this.hasLoaded = true;
|
|
19316
19498
|
this.calculateMaxHeight();
|
|
19317
|
-
// Set up resize listener
|
|
19318
|
-
window.addEventListener('resize', this.handleResize.bind(this));
|
|
19319
|
-
// Only set up scroll listener for border updates if borders are managed automatically
|
|
19320
19499
|
if (!this.userSetBorder) {
|
|
19321
|
-
|
|
19322
|
-
|
|
19323
|
-
this.el.addEventListener('scroll', this.handleScroll.bind(this));
|
|
19324
|
-
// Initial border update after everything is set up
|
|
19325
|
-
setTimeout(() => this.updateBorders(), 100);
|
|
19326
|
-
}, 100);
|
|
19500
|
+
// Initial border update after everything is set up
|
|
19501
|
+
setTimeout(() => this.updateBorders(), 200);
|
|
19327
19502
|
}
|
|
19328
19503
|
}
|
|
19504
|
+
// Here rather than in componentDidLoad, which runs once: content taken out of the page and put
|
|
19505
|
+
// back (a DOM morph or a framework moving it) gets its listeners and header/footer observer back.
|
|
19506
|
+
connectedCallback() {
|
|
19507
|
+
window.addEventListener('resize', this.handleResize);
|
|
19508
|
+
// The scroll happens on the component element itself (this.el), not the inner div
|
|
19509
|
+
this.el.addEventListener('scroll', this.handleScroll);
|
|
19510
|
+
if (this.hasLoaded)
|
|
19511
|
+
this.calculateMaxHeight();
|
|
19512
|
+
}
|
|
19329
19513
|
disconnectedCallback() {
|
|
19330
|
-
window.removeEventListener('resize', this.handleResize
|
|
19331
|
-
|
|
19332
|
-
if (!this.userSetBorder) {
|
|
19333
|
-
this.el.removeEventListener('scroll', this.handleScroll.bind(this));
|
|
19334
|
-
}
|
|
19514
|
+
window.removeEventListener('resize', this.handleResize);
|
|
19515
|
+
this.el.removeEventListener('scroll', this.handleScroll);
|
|
19335
19516
|
if (this.mutationObserver) {
|
|
19336
19517
|
this.mutationObserver.disconnect();
|
|
19518
|
+
this.mutationObserver = undefined;
|
|
19337
19519
|
}
|
|
19338
19520
|
}
|
|
19339
|
-
/**
|
|
19340
|
-
* Handle scroll events
|
|
19341
|
-
*/
|
|
19342
|
-
handleScroll() {
|
|
19343
|
-
this.updateBorders();
|
|
19344
|
-
}
|
|
19345
|
-
/**
|
|
19346
|
-
* Handle resize events
|
|
19347
|
-
*/
|
|
19348
|
-
handleResize() {
|
|
19349
|
-
this.calculateMaxHeight();
|
|
19350
|
-
// Update borders after resize as content scrollability might change
|
|
19351
|
-
setTimeout(() => this.updateBorders(), 50);
|
|
19352
|
-
}
|
|
19353
19521
|
/**
|
|
19354
19522
|
* Updates border visibility based on scroll state (only if not user-defined)
|
|
19355
19523
|
*/
|
|
@@ -19466,10 +19634,10 @@ class PdsModalContent {
|
|
|
19466
19634
|
render() {
|
|
19467
19635
|
// Only apply max-height style if it's not 'none'
|
|
19468
19636
|
const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
|
|
19469
|
-
return (hAsync(Host, { key: '
|
|
19637
|
+
return (hAsync(Host, { key: 'b4200778f186c45a1917646ba2e0e4e623959951' }, hAsync("div", { key: '39eaaf228e5441f5c0fd628c47be079fb4e07e0f', class: {
|
|
19470
19638
|
'pds-modal-content': true,
|
|
19471
19639
|
[`pds-modal-content--border-${this.border}`]: true
|
|
19472
|
-
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '
|
|
19640
|
+
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: 'ac31a9b81941b8b3abbac3a67c25bacaa54e6840' }))));
|
|
19473
19641
|
}
|
|
19474
19642
|
get el() { return getElement(this); }
|
|
19475
19643
|
static get style() { return pdsModalContentCss(); }
|
|
@@ -19500,7 +19668,7 @@ class PdsModalFooter {
|
|
|
19500
19668
|
unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
|
|
19501
19669
|
}
|
|
19502
19670
|
render() {
|
|
19503
|
-
return (hAsync("footer", { key: '
|
|
19671
|
+
return (hAsync("footer", { key: 'c0d50408471355d80759112e63f58c8a34fb7906', class: "pds-modal__footer" }, hAsync("slot", { key: '6566d446457be8b57e37bf1542a5863b0018d233' })));
|
|
19504
19672
|
}
|
|
19505
19673
|
get el() { return getElement(this); }
|
|
19506
19674
|
static get style() { return pdsModalFooterCss(); }
|
|
@@ -19528,7 +19696,7 @@ class PdsModalHeader {
|
|
|
19528
19696
|
unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
|
|
19529
19697
|
}
|
|
19530
19698
|
render() {
|
|
19531
|
-
return (hAsync("header", { key: '
|
|
19699
|
+
return (hAsync("header", { key: 'eb295ff36fd23b7965296b6dfcfcf783a32079a0', class: "pds-modal__header" }, hAsync("slot", { key: '9c97566ff79f8d9b233d814395d5a7e893751a06' })));
|
|
19532
19700
|
}
|
|
19533
19701
|
get el() { return getElement(this); }
|
|
19534
19702
|
static get style() { return pdsModalHeaderCss(); }
|
|
@@ -20725,7 +20893,7 @@ class PdsMultiselect {
|
|
|
20725
20893
|
'pds-multiselect__option--selected': isSelected,
|
|
20726
20894
|
'pds-multiselect__option--create': isCreateOption,
|
|
20727
20895
|
'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
|
|
20728
|
-
}, 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)));
|
|
20896
|
+
}, 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)));
|
|
20729
20897
|
}
|
|
20730
20898
|
renderOptionAction(option, optionId, isHighlighted) {
|
|
20731
20899
|
var _a;
|
|
@@ -20748,7 +20916,7 @@ class PdsMultiselect {
|
|
|
20748
20916
|
const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
|
|
20749
20917
|
const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
|
|
20750
20918
|
const hasSlottedFooter = !!this.el.querySelector('[slot="footer"]');
|
|
20751
|
-
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) => {
|
|
20919
|
+
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) => {
|
|
20752
20920
|
if (item.type === 'group') {
|
|
20753
20921
|
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)))));
|
|
20754
20922
|
}
|
|
@@ -20807,10 +20975,10 @@ class PdsMultiselect {
|
|
|
20807
20975
|
}
|
|
20808
20976
|
render() {
|
|
20809
20977
|
const hasSelections = this.selectedItems.length > 0;
|
|
20810
|
-
return (hAsync(Host, { key: '
|
|
20978
|
+
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: {
|
|
20811
20979
|
'pds-multiselect__label': true,
|
|
20812
20980
|
'visually-hidden': this.hideLabel,
|
|
20813
|
-
} }, this.label)), hAsync("div", { key: '
|
|
20981
|
+
} }, 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: {
|
|
20814
20982
|
'pds-multiselect__trigger': true,
|
|
20815
20983
|
'pds-multiselect__trigger--open': this.isOpen,
|
|
20816
20984
|
'pds-multiselect__trigger--disabled': this.disabled,
|
|
@@ -20826,7 +20994,7 @@ class PdsMultiselect {
|
|
|
20826
20994
|
}, 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: {
|
|
20827
20995
|
'pds-multiselect__trigger-text': true,
|
|
20828
20996
|
'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
|
|
20829
|
-
} }, 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: '
|
|
20997
|
+
} }, 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' })))));
|
|
20830
20998
|
}
|
|
20831
20999
|
static get formAssociated() { return true; }
|
|
20832
21000
|
get el() { return getElement(this); }
|
|
@@ -20964,10 +21132,32 @@ const cssEscape = (value) => {
|
|
|
20964
21132
|
return result;
|
|
20965
21133
|
};
|
|
20966
21134
|
|
|
20967
|
-
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}`;
|
|
21135
|
+
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}`;
|
|
20968
21136
|
|
|
20969
|
-
/** Open
|
|
20970
|
-
const
|
|
21137
|
+
/** Open popovers that close on Escape, in the order they opened: Escape goes to the last one it applies to. */
|
|
21138
|
+
const popoversTakingEscape = [];
|
|
21139
|
+
/** Hovering the trigger waits this long before opening, so a pointer passing over it doesn't open it. */
|
|
21140
|
+
const HOVER_OPEN_DELAY_MS = 120;
|
|
21141
|
+
/** Leaving the trigger and panel waits this long before closing, which covers the gap between them. */
|
|
21142
|
+
const HOVER_CLOSE_DELAY_MS = 200;
|
|
21143
|
+
/**
|
|
21144
|
+
* floating-ui reporting viewport coordinates, as `position: fixed` uses without a containing block. Its own
|
|
21145
|
+
* containing-block check misses a backdrop filter in WebKit, so handlePopoverPositioning corrects for one itself.
|
|
21146
|
+
*/
|
|
21147
|
+
const viewportPlatform = Object.assign(Object.assign({}, platform), { getOffsetParent: () => window });
|
|
21148
|
+
/**
|
|
21149
|
+
* Where `top: 0; left: 0` puts a fixed element beside the given one. An empty probe is measured instead of the
|
|
21150
|
+
* element, whose own transforms, such as an entrance animation, would otherwise read as part of the offset.
|
|
21151
|
+
*/
|
|
21152
|
+
const containingBlockOrigin = (element) => {
|
|
21153
|
+
var _a;
|
|
21154
|
+
const probe = document.createElement('div');
|
|
21155
|
+
probe.style.cssText = 'all: initial; position: fixed; top: 0; left: 0;';
|
|
21156
|
+
(_a = element.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(probe, element);
|
|
21157
|
+
const { top, left } = probe.getBoundingClientRect();
|
|
21158
|
+
probe.remove();
|
|
21159
|
+
return { top, left };
|
|
21160
|
+
};
|
|
20971
21161
|
/** The focused element, followed down through shadow roots to the control that has focus. */
|
|
20972
21162
|
function deepActiveElement() {
|
|
20973
21163
|
var _a;
|
|
@@ -20976,6 +21166,27 @@ function deepActiveElement() {
|
|
|
20976
21166
|
active = active.shadowRoot.activeElement;
|
|
20977
21167
|
return active;
|
|
20978
21168
|
}
|
|
21169
|
+
/** `node`, or the shadow host it sits in, lifted until it shares a tree with `other` or reaches the document. */
|
|
21170
|
+
function liftToTreeOf(node, other) {
|
|
21171
|
+
let current = node;
|
|
21172
|
+
while (current.getRootNode() !== other.getRootNode() && current.getRootNode() instanceof ShadowRoot) {
|
|
21173
|
+
current = current.getRootNode().host;
|
|
21174
|
+
}
|
|
21175
|
+
return current;
|
|
21176
|
+
}
|
|
21177
|
+
/**
|
|
21178
|
+
* Where `node` sits relative to `ref`, as `compareDocumentPosition` reports it. Whichever of the two
|
|
21179
|
+
* is inside a shadow root is lifted to its host first, so a control inside a component compares too.
|
|
21180
|
+
*/
|
|
21181
|
+
function positionAcrossTrees(ref, node) {
|
|
21182
|
+
const lifted = liftToTreeOf(node, ref);
|
|
21183
|
+
return liftToTreeOf(ref, lifted).compareDocumentPosition(lifted);
|
|
21184
|
+
}
|
|
21185
|
+
const isPosition = (position, flag) => (position & Node.DOCUMENT_POSITION_DISCONNECTED) === 0 && (position & flag) !== 0;
|
|
21186
|
+
/** The popover each panel belongs to, so a popover inside another one's panel can find it. */
|
|
21187
|
+
const panelOwners = new WeakMap();
|
|
21188
|
+
/** Floating layers Pine components put at the end of the page or of a dialog, as a popover does its panel. */
|
|
21189
|
+
const FLOATING_LAYERS = '.pds-popover, .pds-datepicker-calendar-portal, .pds-combobox-dropdown-portal';
|
|
20979
21190
|
/**
|
|
20980
21191
|
* @slot trigger - The trigger element for the popover
|
|
20981
21192
|
* @slot (default) - The content to display inside the popover
|
|
@@ -21015,14 +21226,21 @@ class PdsPopover {
|
|
|
21015
21226
|
*/
|
|
21016
21227
|
this.portalEl = null;
|
|
21017
21228
|
/**
|
|
21018
|
-
*
|
|
21229
|
+
* Stops floating-ui's autoUpdate, which repositions the open panel as its trigger or the page moves or resizes
|
|
21230
|
+
*/
|
|
21231
|
+
this.stopAutoUpdate = null;
|
|
21232
|
+
/**
|
|
21233
|
+
* Counts positioning runs, so a run that resolves after a newer one started is dropped
|
|
21019
21234
|
*/
|
|
21020
|
-
this.
|
|
21235
|
+
this.positioningRun = 0;
|
|
21021
21236
|
/**
|
|
21022
|
-
*
|
|
21237
|
+
* The latest positioning run, which pdsPopoverOpen waits for so the panel's side is set when it fires
|
|
21023
21238
|
*/
|
|
21024
|
-
this.
|
|
21025
|
-
|
|
21239
|
+
this.positioning = Promise.resolve();
|
|
21240
|
+
/**
|
|
21241
|
+
* Set while show() waits to emit pdsPopoverOpen, so a hide() in the meantime emits it first
|
|
21242
|
+
*/
|
|
21243
|
+
this.openEventPending = false;
|
|
21026
21244
|
/**
|
|
21027
21245
|
* Track moved nodes and their placeholders for restoration
|
|
21028
21246
|
*/
|
|
@@ -21031,11 +21249,41 @@ class PdsPopover {
|
|
|
21031
21249
|
* Timestamp when popover was opened (for preventing immediate close)
|
|
21032
21250
|
*/
|
|
21033
21251
|
this.openTimestamp = 0;
|
|
21252
|
+
/**
|
|
21253
|
+
* Set while hover holds the popover open, until a click pins it or it closes
|
|
21254
|
+
*/
|
|
21255
|
+
this.hoverOpened = false;
|
|
21256
|
+
/**
|
|
21257
|
+
* Set when the pointer left while focus was in the panel, so focus leaving it closes it instead
|
|
21258
|
+
*/
|
|
21259
|
+
this.closeWhenFocusLeaves = false;
|
|
21260
|
+
/**
|
|
21261
|
+
* How far the pointer was from the panel at its last move after leaving the trigger
|
|
21262
|
+
*/
|
|
21263
|
+
this.panelDistance = Infinity;
|
|
21264
|
+
/**
|
|
21265
|
+
* Stands in for the panel in the Tab order, right after the trigger, while the popover is open
|
|
21266
|
+
*/
|
|
21267
|
+
this.tabGuardEl = null;
|
|
21268
|
+
/**
|
|
21269
|
+
* Set while focus passes through the guard on its way out of the panel
|
|
21270
|
+
*/
|
|
21271
|
+
this.leavingPanel = false;
|
|
21272
|
+
/**
|
|
21273
|
+
* The direction of the Tab key being handled, until its default action has run
|
|
21274
|
+
*/
|
|
21275
|
+
this.tabDirection = null;
|
|
21034
21276
|
/**
|
|
21035
21277
|
* Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
|
|
21036
21278
|
* @defaultValue "show"
|
|
21037
21279
|
*/
|
|
21038
21280
|
this.popoverTargetAction = 'show';
|
|
21281
|
+
/**
|
|
21282
|
+
* Determines how the popover opens. With `hover`, it also opens when the pointer rests on the trigger and closes
|
|
21283
|
+
* when the pointer leaves, until a click on the trigger keeps it open. Enter or Space on the trigger opens it either way.
|
|
21284
|
+
* @defaultValue "click"
|
|
21285
|
+
*/
|
|
21286
|
+
this.openOn = 'click';
|
|
21039
21287
|
/**
|
|
21040
21288
|
* Determines the type of popover. Auto popovers can be "light dismissed" by clicking outside of the popover.
|
|
21041
21289
|
* Manual popovers require the consumer to handle the visibility of the popover.
|
|
@@ -21046,6 +21294,11 @@ class PdsPopover {
|
|
|
21046
21294
|
* @defaultValue 352
|
|
21047
21295
|
*/
|
|
21048
21296
|
this.maxWidth = 352;
|
|
21297
|
+
/**
|
|
21298
|
+
* Sets the padding of the popover content
|
|
21299
|
+
* @defaultValue "md"
|
|
21300
|
+
*/
|
|
21301
|
+
this.padding = 'md';
|
|
21049
21302
|
/**
|
|
21050
21303
|
* Determines the preferred position of the popover
|
|
21051
21304
|
* @defaultValue "right"
|
|
@@ -21060,6 +21313,7 @@ class PdsPopover {
|
|
|
21060
21313
|
// Clean up previous trigger's event listener if it exists
|
|
21061
21314
|
if (this.triggerEl != null) {
|
|
21062
21315
|
this.triggerEl.removeEventListener('click', this.handleTriggerClick);
|
|
21316
|
+
this.stopListeningForHover(this.triggerEl);
|
|
21063
21317
|
}
|
|
21064
21318
|
if (assignedElements.length > 0) {
|
|
21065
21319
|
// Use the first assigned element as the trigger
|
|
@@ -21067,10 +21321,14 @@ class PdsPopover {
|
|
|
21067
21321
|
this.linkTriggerToPortal();
|
|
21068
21322
|
// Attach click listener to handle popover visibility
|
|
21069
21323
|
this.triggerEl.addEventListener('click', this.handleTriggerClick);
|
|
21324
|
+
this.listenForHover(this.triggerEl);
|
|
21070
21325
|
}
|
|
21071
21326
|
else {
|
|
21072
21327
|
this.triggerEl = null;
|
|
21073
21328
|
}
|
|
21329
|
+
// autoUpdate watches the trigger it started with, so an open popover starts it again on the new one.
|
|
21330
|
+
if (this.active)
|
|
21331
|
+
this.addScrollAndResizeListeners();
|
|
21074
21332
|
this.observeTrigger();
|
|
21075
21333
|
};
|
|
21076
21334
|
/**
|
|
@@ -21093,6 +21351,13 @@ class PdsPopover {
|
|
|
21093
21351
|
if (!anchorWithHref) {
|
|
21094
21352
|
event.preventDefault();
|
|
21095
21353
|
}
|
|
21354
|
+
if (this.openOn === 'hover' && this.popoverTargetAction !== 'hide') {
|
|
21355
|
+
const heldByHover = this.hoverOpened;
|
|
21356
|
+
this.pin();
|
|
21357
|
+
// Pinning, not toggling: the hover before a click has already opened it.
|
|
21358
|
+
if (heldByHover)
|
|
21359
|
+
return;
|
|
21360
|
+
}
|
|
21096
21361
|
// Execute the appropriate action based on popoverTargetAction prop
|
|
21097
21362
|
switch (this.popoverTargetAction) {
|
|
21098
21363
|
case 'show':
|
|
@@ -21107,6 +21372,60 @@ class PdsPopover {
|
|
|
21107
21372
|
break;
|
|
21108
21373
|
}
|
|
21109
21374
|
};
|
|
21375
|
+
// A tap sends touch pointer events and then a click, so touch takes the click path alone.
|
|
21376
|
+
this.handleHoverEnter = (event) => {
|
|
21377
|
+
if (event.pointerType === 'touch')
|
|
21378
|
+
return;
|
|
21379
|
+
this.clearHoverTimers();
|
|
21380
|
+
if (this.active)
|
|
21381
|
+
return;
|
|
21382
|
+
this.hoverOpenTimer = setTimeout(() => {
|
|
21383
|
+
this.hoverOpenTimer = undefined;
|
|
21384
|
+
if (this.active || this.portalEl == null)
|
|
21385
|
+
return;
|
|
21386
|
+
this.hoverOpened = true;
|
|
21387
|
+
this.show();
|
|
21388
|
+
}, HOVER_OPEN_DELAY_MS);
|
|
21389
|
+
};
|
|
21390
|
+
this.handleHoverLeave = (event) => {
|
|
21391
|
+
if (event.pointerType === 'touch')
|
|
21392
|
+
return;
|
|
21393
|
+
this.clearHoverTimers();
|
|
21394
|
+
if (!this.hoverOpened)
|
|
21395
|
+
return;
|
|
21396
|
+
this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
|
|
21397
|
+
if (event.currentTarget !== this.triggerEl)
|
|
21398
|
+
return;
|
|
21399
|
+
this.panelDistance = this.distanceToPanel(event);
|
|
21400
|
+
document.addEventListener('pointermove', this.handleMoveTowardPanel);
|
|
21401
|
+
};
|
|
21402
|
+
// A slow diagonal from the trigger to a panel shorter than it runs beside the panel for longer
|
|
21403
|
+
// than the close delay, so each move that brings the pointer closer starts the delay again.
|
|
21404
|
+
this.handleMoveTowardPanel = (event) => {
|
|
21405
|
+
const distance = this.distanceToPanel(event);
|
|
21406
|
+
if (distance < this.panelDistance) {
|
|
21407
|
+
clearTimeout(this.hoverCloseTimer);
|
|
21408
|
+
this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
|
|
21409
|
+
}
|
|
21410
|
+
this.panelDistance = distance;
|
|
21411
|
+
};
|
|
21412
|
+
this.handleHoverFocusOut = (event) => {
|
|
21413
|
+
if (!this.closeWhenFocusLeaves || containsComposed$1(this.portalEl, event.relatedTarget))
|
|
21414
|
+
return;
|
|
21415
|
+
this.closeWhenFocusLeaves = false;
|
|
21416
|
+
this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
|
|
21417
|
+
};
|
|
21418
|
+
this.closeFromHover = () => {
|
|
21419
|
+
this.clearHoverTimers();
|
|
21420
|
+
if (!this.hoverOpened)
|
|
21421
|
+
return;
|
|
21422
|
+
// Content shown on hover stays while focus is in it (WCAG 1.4.13).
|
|
21423
|
+
if (containsComposed$1(this.portalEl, deepActiveElement())) {
|
|
21424
|
+
this.closeWhenFocusLeaves = true;
|
|
21425
|
+
return;
|
|
21426
|
+
}
|
|
21427
|
+
this.hide();
|
|
21428
|
+
};
|
|
21110
21429
|
/** The focus style copied into a shadow root the panel opened in, which `document.head` can't reach. */
|
|
21111
21430
|
this.shadowFocusStyle = null;
|
|
21112
21431
|
/** The dialog the panel was opened in, closed along with it. */
|
|
@@ -21127,6 +21446,85 @@ class PdsPopover {
|
|
|
21127
21446
|
event.stopPropagation();
|
|
21128
21447
|
}
|
|
21129
21448
|
};
|
|
21449
|
+
// At the end of the body or of a dialog, the panel would come last in the Tab order. The guard
|
|
21450
|
+
// after the trigger takes its place there, while the panel has a control for it to lead to.
|
|
21451
|
+
this.syncTabGuard = (event) => {
|
|
21452
|
+
if (event.key !== 'Tab')
|
|
21453
|
+
return;
|
|
21454
|
+
this.releasePanel();
|
|
21455
|
+
this.tabDirection = event.shiftKey ? 'backward' : 'forward';
|
|
21456
|
+
setTimeout(this.endTabKey);
|
|
21457
|
+
// Read on each Tab, as the panel's content can arrive after it opens.
|
|
21458
|
+
const guarding = this.guardedTabbables().length > 0;
|
|
21459
|
+
if (this.tabGuardEl != null)
|
|
21460
|
+
this.tabGuardEl.tabIndex = guarding ? 0 : -1;
|
|
21461
|
+
// Inert for this key press, the panel is reached only through the guard, either way round. A
|
|
21462
|
+
// control in another floating layer, such as a nested popover's panel, may move focus back into it.
|
|
21463
|
+
const focused = deepActiveElement();
|
|
21464
|
+
if (guarding && !containsComposed$1(this.portalEl, focused) && !closest$1(FLOATING_LAYERS, focused !== null && focused !== void 0 ? focused : document)) {
|
|
21465
|
+
this.portalEl.inert = true;
|
|
21466
|
+
}
|
|
21467
|
+
};
|
|
21468
|
+
this.endTabKey = () => {
|
|
21469
|
+
this.tabDirection = null;
|
|
21470
|
+
this.releasePanel();
|
|
21471
|
+
};
|
|
21472
|
+
this.handleTabGuardFocus = (event) => {
|
|
21473
|
+
if (this.leavingPanel)
|
|
21474
|
+
return;
|
|
21475
|
+
// An inert panel's controls aren't tabbable, so the guard would find none to send focus to.
|
|
21476
|
+
this.releasePanel();
|
|
21477
|
+
const tabbables = this.guardedTabbables();
|
|
21478
|
+
// A Tab press says which end of the panel focus comes in at; without one, where it came from does.
|
|
21479
|
+
const from = event.relatedTarget;
|
|
21480
|
+
const backward = this.tabDirection != null ? this.tabDirection === 'backward' : from != null && this.isAfterPopover(from);
|
|
21481
|
+
const target = backward ? tabbables[tabbables.length - 1] : tabbables[0];
|
|
21482
|
+
// Focus can reach the guard without a Tab keydown here (from a frame, or assistive tech) after
|
|
21483
|
+
// the panel's controls are gone. The trigger is the nearest visible place for it.
|
|
21484
|
+
if (target == null)
|
|
21485
|
+
this.returnFocusToTrigger();
|
|
21486
|
+
else
|
|
21487
|
+
target.focus();
|
|
21488
|
+
};
|
|
21489
|
+
this.handleTabFromPanel = (event) => {
|
|
21490
|
+
if (event.key !== 'Tab' || event.defaultPrevented || this.tabGuardEl == null)
|
|
21491
|
+
return;
|
|
21492
|
+
const tabbables = this.guardedTabbables();
|
|
21493
|
+
const edge = event.shiftKey ? tabbables[0] : tabbables[tabbables.length - 1];
|
|
21494
|
+
if (edge == null || deepActiveElement() !== edge)
|
|
21495
|
+
return;
|
|
21496
|
+
this.leavePanel(edge, event.shiftKey);
|
|
21497
|
+
};
|
|
21498
|
+
this.releasePanel = () => {
|
|
21499
|
+
if (this.portalEl != null)
|
|
21500
|
+
this.portalEl.inert = false;
|
|
21501
|
+
};
|
|
21502
|
+
}
|
|
21503
|
+
openOnChanged() {
|
|
21504
|
+
this.pin();
|
|
21505
|
+
this.stopListeningForHover(this.triggerEl);
|
|
21506
|
+
this.stopListeningForHover(this.portalEl);
|
|
21507
|
+
// Out of the page, connectedCallback binds them when it comes back.
|
|
21508
|
+
if (!this.isComponentMounted)
|
|
21509
|
+
return;
|
|
21510
|
+
this.listenForHover(this.triggerEl);
|
|
21511
|
+
this.listenForHover(this.portalEl);
|
|
21512
|
+
}
|
|
21513
|
+
applyPadding() {
|
|
21514
|
+
if (this.portalEl != null)
|
|
21515
|
+
this.portalEl.style.padding = this.paddingToken();
|
|
21516
|
+
}
|
|
21517
|
+
paddingToken() {
|
|
21518
|
+
switch (this.padding) {
|
|
21519
|
+
case 'none':
|
|
21520
|
+
return 'var(--pine-dimension-none)';
|
|
21521
|
+
case 'xs':
|
|
21522
|
+
return 'var(--pine-dimension-xs)';
|
|
21523
|
+
case 'sm':
|
|
21524
|
+
return 'var(--pine-dimension-sm)';
|
|
21525
|
+
default:
|
|
21526
|
+
return 'var(--pine-dimension-md)';
|
|
21527
|
+
}
|
|
21130
21528
|
}
|
|
21131
21529
|
restorePlacementDefault(newValue) {
|
|
21132
21530
|
this.placement = restoreReflectedDefault(this.el, 'placement', newValue, 'right');
|
|
@@ -21136,8 +21534,6 @@ class PdsPopover {
|
|
|
21136
21534
|
// Bind event handlers for cleanup
|
|
21137
21535
|
this.boundClickOutsideHandler = this.handleClickOutside.bind(this);
|
|
21138
21536
|
this.boundEscapeKeyHandler = this.handleEscapeKey.bind(this);
|
|
21139
|
-
this.boundScrollHandler = this.handleScroll.bind(this);
|
|
21140
|
-
this.boundResizeHandler = this.handleResize.bind(this);
|
|
21141
21537
|
// Create portal element
|
|
21142
21538
|
this.createPortal();
|
|
21143
21539
|
this.hasLoaded = true;
|
|
@@ -21178,6 +21574,48 @@ class PdsPopover {
|
|
|
21178
21574
|
// Skips values already in place, so the trigger observer's own callback doesn't loop.
|
|
21179
21575
|
return setAttributesIfChanged(this.triggerEl, { 'aria-expanded': String(this.active), 'aria-controls': this.portalEl.id });
|
|
21180
21576
|
}
|
|
21577
|
+
listenForHover(el) {
|
|
21578
|
+
if (this.openOn !== 'hover' || el == null)
|
|
21579
|
+
return;
|
|
21580
|
+
el.addEventListener('pointerenter', this.handleHoverEnter);
|
|
21581
|
+
el.addEventListener('pointerleave', this.handleHoverLeave);
|
|
21582
|
+
el.addEventListener('focusout', this.handleHoverFocusOut);
|
|
21583
|
+
}
|
|
21584
|
+
stopListeningForHover(el) {
|
|
21585
|
+
if (el == null)
|
|
21586
|
+
return;
|
|
21587
|
+
el.removeEventListener('pointerenter', this.handleHoverEnter);
|
|
21588
|
+
el.removeEventListener('pointerleave', this.handleHoverLeave);
|
|
21589
|
+
el.removeEventListener('focusout', this.handleHoverFocusOut);
|
|
21590
|
+
}
|
|
21591
|
+
distanceToPanel({ clientX, clientY }) {
|
|
21592
|
+
const panel = this.portalEl.getBoundingClientRect();
|
|
21593
|
+
return Math.hypot(Math.max(panel.left - clientX, 0, clientX - panel.right), Math.max(panel.top - clientY, 0, clientY - panel.bottom));
|
|
21594
|
+
}
|
|
21595
|
+
/**
|
|
21596
|
+
* Keeps a popover that hover opened open, closing from then on as one opened by a click does. A
|
|
21597
|
+
* manual one gives up Escape again, which it took only while hover held it.
|
|
21598
|
+
*/
|
|
21599
|
+
pin() {
|
|
21600
|
+
var _a;
|
|
21601
|
+
this.clearHoverTimers();
|
|
21602
|
+
if (!this.hoverOpened)
|
|
21603
|
+
return;
|
|
21604
|
+
this.hoverOpened = false;
|
|
21605
|
+
if (this.popoverType === 'auto')
|
|
21606
|
+
return;
|
|
21607
|
+
this.forgetOpen();
|
|
21608
|
+
(_a = this.portalEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-pds-popover-open');
|
|
21609
|
+
document.removeEventListener('keydown', this.boundEscapeKeyHandler);
|
|
21610
|
+
}
|
|
21611
|
+
clearHoverTimers() {
|
|
21612
|
+
clearTimeout(this.hoverOpenTimer);
|
|
21613
|
+
clearTimeout(this.hoverCloseTimer);
|
|
21614
|
+
this.hoverOpenTimer = undefined;
|
|
21615
|
+
this.hoverCloseTimer = undefined;
|
|
21616
|
+
this.closeWhenFocusLeaves = false;
|
|
21617
|
+
document.removeEventListener('pointermove', this.handleMoveTowardPanel);
|
|
21618
|
+
}
|
|
21181
21619
|
// componentDidLoad doesn't run again when a popover comes back, so rebuild whatever
|
|
21182
21620
|
// disconnectedCallback tore down. Each step is a no-op when nothing was.
|
|
21183
21621
|
connectedCallback() {
|
|
@@ -21187,17 +21625,19 @@ class PdsPopover {
|
|
|
21187
21625
|
this.isComponentMounted = true;
|
|
21188
21626
|
this.createPortal();
|
|
21189
21627
|
(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.handleTriggerClick);
|
|
21628
|
+
this.listenForHover(this.triggerEl);
|
|
21190
21629
|
this.observeTrigger();
|
|
21191
21630
|
this.linkTriggerToPortal();
|
|
21192
21631
|
// Still open after a move: the trigger moved, so the portal follows it, into the dialog it
|
|
21193
21632
|
// is in now, if any.
|
|
21194
21633
|
if (this.active) {
|
|
21195
21634
|
this.placePortal();
|
|
21196
|
-
|
|
21635
|
+
// autoUpdate listens to the scroll containers around where the trigger was, so it starts again.
|
|
21636
|
+
this.addScrollAndResizeListeners();
|
|
21197
21637
|
}
|
|
21198
21638
|
}
|
|
21199
21639
|
disconnectedCallback() {
|
|
21200
|
-
var _a;
|
|
21640
|
+
var _a, _b;
|
|
21201
21641
|
// Moved in one operation (a DOM morph, or a framework reparenting it), the popover is
|
|
21202
21642
|
// already back in the page. Its portal is outside the popover, so it stays open, with focus
|
|
21203
21643
|
// where it was; connectedCallback moves it to follow the popover.
|
|
@@ -21212,6 +21652,7 @@ class PdsPopover {
|
|
|
21212
21652
|
this.restorePortalContent();
|
|
21213
21653
|
this.active = false;
|
|
21214
21654
|
this.linkTriggerToPortal();
|
|
21655
|
+
this.emitOpenEvent();
|
|
21215
21656
|
this.pdsPopoverClose.emit({
|
|
21216
21657
|
componentId: this.componentId,
|
|
21217
21658
|
popoverType: this.popoverType,
|
|
@@ -21221,36 +21662,27 @@ class PdsPopover {
|
|
|
21221
21662
|
if (this.triggerEl != null) {
|
|
21222
21663
|
this.triggerEl.removeEventListener('click', this.handleTriggerClick);
|
|
21223
21664
|
}
|
|
21665
|
+
this.stopListeningForHover(this.triggerEl);
|
|
21224
21666
|
(_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
21225
21667
|
this.triggerObserver = null;
|
|
21226
21668
|
// Clean up all event listeners
|
|
21227
21669
|
this.removeLightDismissListeners();
|
|
21228
21670
|
this.removeScrollAndResizeListeners();
|
|
21229
21671
|
document.removeEventListener('submit', this.handleSubmitFromPanel, true);
|
|
21230
|
-
|
|
21231
|
-
this.
|
|
21672
|
+
document.removeEventListener('keydown', this.syncTabGuard, true);
|
|
21673
|
+
(_b = this.tabGuardEl) === null || _b === void 0 ? void 0 : _b.removeAttribute('tabindex');
|
|
21674
|
+
this.clearHoverTimers();
|
|
21675
|
+
this.hoverOpened = false;
|
|
21232
21676
|
// Remove portal from DOM
|
|
21233
21677
|
this.removePortal();
|
|
21234
21678
|
}
|
|
21235
|
-
/**
|
|
21236
|
-
* Clears any pending debounce timers
|
|
21237
|
-
*/
|
|
21238
|
-
clearDebounceTimers() {
|
|
21239
|
-
if (this.scrollDebounceTimer !== null) {
|
|
21240
|
-
clearTimeout(this.scrollDebounceTimer);
|
|
21241
|
-
this.scrollDebounceTimer = null;
|
|
21242
|
-
}
|
|
21243
|
-
if (this.resizeDebounceTimer !== null) {
|
|
21244
|
-
clearTimeout(this.resizeDebounceTimer);
|
|
21245
|
-
this.resizeDebounceTimer = null;
|
|
21246
|
-
}
|
|
21247
|
-
}
|
|
21248
21679
|
createPortal() {
|
|
21249
21680
|
var _a;
|
|
21250
21681
|
if (this.portalEl !== null)
|
|
21251
21682
|
return;
|
|
21252
21683
|
this.portalEl = document.createElement('div');
|
|
21253
21684
|
this.portalEl.className = 'pds-popover';
|
|
21685
|
+
panelOwners.set(this.portalEl, this);
|
|
21254
21686
|
// Apply all styles inline since portal is outside shadow DOM
|
|
21255
21687
|
this.portalEl.style.position = 'fixed';
|
|
21256
21688
|
this.portalEl.style.zIndex = 'var(--pine-z-index-raised)';
|
|
@@ -21262,7 +21694,7 @@ class PdsPopover {
|
|
|
21262
21694
|
this.portalEl.style.borderRadius = 'var(--pine-dimension-125)';
|
|
21263
21695
|
this.portalEl.style.boxShadow = 'var(--pine-box-shadow-200)';
|
|
21264
21696
|
this.portalEl.style.margin = 'var(--pine-dimension-none)';
|
|
21265
|
-
this.portalEl.style.padding =
|
|
21697
|
+
this.portalEl.style.padding = this.paddingToken();
|
|
21266
21698
|
// Generate unique ID
|
|
21267
21699
|
if (!this.componentId) {
|
|
21268
21700
|
(_a = this.generatedPortalId) !== null && _a !== void 0 ? _a : (this.generatedPortalId = `pds-popover-portal-${PdsPopover.instanceCounter++}`);
|
|
@@ -21276,6 +21708,8 @@ class PdsPopover {
|
|
|
21276
21708
|
// Add global focus styles to match Pine design system
|
|
21277
21709
|
// This is done after appending to ensure it's part of the document and can access CSS variables
|
|
21278
21710
|
this.addPortalFocusStyles();
|
|
21711
|
+
this.listenForHover(this.portalEl);
|
|
21712
|
+
this.portalEl.addEventListener('keydown', this.handleTabFromPanel);
|
|
21279
21713
|
}
|
|
21280
21714
|
/**
|
|
21281
21715
|
* Adds Pine design system focus styles and dark mode border to the portal element
|
|
@@ -21403,27 +21837,40 @@ class PdsPopover {
|
|
|
21403
21837
|
// Update portal content with latest slot content
|
|
21404
21838
|
this.updatePortalContent();
|
|
21405
21839
|
// Show portal. The attribute tells a modal around it that this popover takes Escape first; only
|
|
21406
|
-
// an auto popover listens for Escape.
|
|
21407
|
-
if (this.popoverType === 'auto')
|
|
21840
|
+
// an auto popover, or one hover opened, listens for Escape.
|
|
21841
|
+
if (this.popoverType === 'auto' || this.hoverOpened)
|
|
21408
21842
|
this.portalEl.setAttribute('data-pds-popover-open', '');
|
|
21409
21843
|
this.portalEl.style.display = 'block';
|
|
21410
21844
|
this.portalEl.style.opacity = '1';
|
|
21411
21845
|
this.portalEl.style.visibility = 'visible';
|
|
21412
|
-
// Position the popover
|
|
21413
|
-
requestAnimationFrame(() => {
|
|
21414
|
-
if (!this.isComponentMounted)
|
|
21415
|
-
return;
|
|
21416
|
-
this.handlePopoverPositioning();
|
|
21417
|
-
});
|
|
21418
|
-
// Add scroll and resize listeners for repositioning (always)
|
|
21846
|
+
// Position the popover now, and again whenever its trigger or the page moves or resizes
|
|
21419
21847
|
this.addScrollAndResizeListeners();
|
|
21420
21848
|
document.addEventListener('submit', this.handleSubmitFromPanel, true);
|
|
21421
|
-
|
|
21849
|
+
document.addEventListener('keydown', this.syncTabGuard, true);
|
|
21850
|
+
// Add document listeners for light dismiss and escape key (auto type only), or for the escape
|
|
21851
|
+
// key alone while hover holds a manual popover open
|
|
21422
21852
|
if (this.popoverType === 'auto') {
|
|
21423
|
-
|
|
21853
|
+
popoversTakingEscape.push(this);
|
|
21424
21854
|
this.addLightDismissListeners();
|
|
21425
21855
|
}
|
|
21426
|
-
|
|
21856
|
+
else if (this.hoverOpened) {
|
|
21857
|
+
popoversTakingEscape.push(this);
|
|
21858
|
+
document.addEventListener('keydown', this.boundEscapeKeyHandler);
|
|
21859
|
+
}
|
|
21860
|
+
// Emit open event once the panel is positioned, with the side it took already on it. A reconnect, a
|
|
21861
|
+
// trigger swap or another show() can start a newer run meanwhile, which drops this one, so wait for the latest.
|
|
21862
|
+
this.openEventPending = true;
|
|
21863
|
+
let positioning;
|
|
21864
|
+
do {
|
|
21865
|
+
positioning = this.positioning;
|
|
21866
|
+
await positioning;
|
|
21867
|
+
} while (positioning !== this.positioning);
|
|
21868
|
+
this.emitOpenEvent();
|
|
21869
|
+
}
|
|
21870
|
+
emitOpenEvent() {
|
|
21871
|
+
if (!this.openEventPending)
|
|
21872
|
+
return;
|
|
21873
|
+
this.openEventPending = false;
|
|
21427
21874
|
this.pdsPopoverOpen.emit({
|
|
21428
21875
|
componentId: this.componentId,
|
|
21429
21876
|
popoverType: this.popoverType,
|
|
@@ -21433,9 +21880,12 @@ class PdsPopover {
|
|
|
21433
21880
|
* Closes the popover programmatically
|
|
21434
21881
|
*/
|
|
21435
21882
|
async hide() {
|
|
21883
|
+
var _a;
|
|
21884
|
+
this.clearHoverTimers();
|
|
21436
21885
|
if (!this.active || !this.portalEl)
|
|
21437
21886
|
return;
|
|
21438
21887
|
this.active = false;
|
|
21888
|
+
this.hoverOpened = false;
|
|
21439
21889
|
this.unwatchDialogClose();
|
|
21440
21890
|
// Restoring the content drops its focus to the body, so check where focus is first. In a
|
|
21441
21891
|
// shadow root, document.activeElement is only its host.
|
|
@@ -21446,6 +21896,7 @@ class PdsPopover {
|
|
|
21446
21896
|
// Hide portal. The dark-mode border set in a shadow root is worked out again on the next open.
|
|
21447
21897
|
this.portalEl.style.border = '';
|
|
21448
21898
|
this.portalEl.removeAttribute('data-pds-popover-open');
|
|
21899
|
+
this.portalEl.removeAttribute('data-pds-popover-placement');
|
|
21449
21900
|
this.portalEl.style.display = 'none';
|
|
21450
21901
|
this.portalEl.style.opacity = '0';
|
|
21451
21902
|
this.portalEl.style.visibility = 'hidden';
|
|
@@ -21459,8 +21910,11 @@ class PdsPopover {
|
|
|
21459
21910
|
this.removeLightDismissListeners();
|
|
21460
21911
|
this.removeScrollAndResizeListeners();
|
|
21461
21912
|
document.removeEventListener('submit', this.handleSubmitFromPanel, true);
|
|
21462
|
-
|
|
21463
|
-
this.
|
|
21913
|
+
document.removeEventListener('keydown', this.syncTabGuard, true);
|
|
21914
|
+
(_a = this.tabGuardEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('tabindex');
|
|
21915
|
+
this.releasePanel();
|
|
21916
|
+
// Closed before its first position resolved, it still announces the open before the close.
|
|
21917
|
+
this.emitOpenEvent();
|
|
21464
21918
|
// Emit close event
|
|
21465
21919
|
this.pdsPopoverClose.emit({
|
|
21466
21920
|
componentId: this.componentId,
|
|
@@ -21472,10 +21926,10 @@ class PdsPopover {
|
|
|
21472
21926
|
*/
|
|
21473
21927
|
async toggle() {
|
|
21474
21928
|
if (this.active) {
|
|
21475
|
-
this.hide();
|
|
21929
|
+
await this.hide();
|
|
21476
21930
|
}
|
|
21477
21931
|
else {
|
|
21478
|
-
this.show();
|
|
21932
|
+
await this.show();
|
|
21479
21933
|
}
|
|
21480
21934
|
}
|
|
21481
21935
|
/**
|
|
@@ -21514,9 +21968,9 @@ class PdsPopover {
|
|
|
21514
21968
|
this.portalEl.style.border = root instanceof ShadowRoot && closest$1('[data-theme="dark"]', this.el) ? 'var(--pine-border)' : '';
|
|
21515
21969
|
}
|
|
21516
21970
|
forgetOpen() {
|
|
21517
|
-
const index =
|
|
21971
|
+
const index = popoversTakingEscape.indexOf(this);
|
|
21518
21972
|
if (index >= 0)
|
|
21519
|
-
|
|
21973
|
+
popoversTakingEscape.splice(index, 1);
|
|
21520
21974
|
}
|
|
21521
21975
|
/**
|
|
21522
21976
|
* Whether an Escape is this popover's. One from a dialog the popover isn't in belongs to that
|
|
@@ -21559,19 +22013,62 @@ class PdsPopover {
|
|
|
21559
22013
|
document.removeEventListener('click', this.boundClickOutsideHandler, true);
|
|
21560
22014
|
document.removeEventListener('keydown', this.boundEscapeKeyHandler);
|
|
21561
22015
|
}
|
|
22016
|
+
/**
|
|
22017
|
+
* The panel's controls that Tab reaches through the guard. None when the panel sits right after
|
|
22018
|
+
* the popover, in a dialog, where it's already next in the Tab order.
|
|
22019
|
+
*/
|
|
22020
|
+
guardedTabbables() {
|
|
22021
|
+
if (this.portalEl == null || this.el.nextElementSibling === this.portalEl)
|
|
22022
|
+
return [];
|
|
22023
|
+
return tabbableIn(this.portalEl);
|
|
22024
|
+
}
|
|
22025
|
+
isAfterPopover(node) {
|
|
22026
|
+
if (containsComposed$1(this.el, node))
|
|
22027
|
+
return false;
|
|
22028
|
+
return isPosition(positionAcrossTrees(this.el, node), Node.DOCUMENT_POSITION_FOLLOWING);
|
|
22029
|
+
}
|
|
22030
|
+
/**
|
|
22031
|
+
* Moves focus to the guard without preventing the Tab, so the browser's Tab carries on from there.
|
|
22032
|
+
* Inert until then, the panel can't be where it lands.
|
|
22033
|
+
*/
|
|
22034
|
+
leavePanel(edge, backward) {
|
|
22035
|
+
var _a, _b;
|
|
22036
|
+
this.leavingPanel = true;
|
|
22037
|
+
(_a = this.tabGuardEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
22038
|
+
this.leavingPanel = false;
|
|
22039
|
+
this.portalEl.inert = true;
|
|
22040
|
+
setTimeout(() => this.finishLeavingPanel(edge));
|
|
22041
|
+
// Last in another popover's panel, the guard hands the Tab on to that popover's own guard.
|
|
22042
|
+
const outer = panelOwners.get(closest$1('.pds-popover', this.el));
|
|
22043
|
+
const outerTabbables = (_b = outer === null || outer === void 0 ? void 0 : outer.guardedTabbables()) !== null && _b !== void 0 ? _b : [];
|
|
22044
|
+
if (!backward && outerTabbables[outerTabbables.length - 1] === this.tabGuardEl)
|
|
22045
|
+
outer.leavePanel(edge, false);
|
|
22046
|
+
}
|
|
22047
|
+
// With nowhere for the browser's Tab to go, focus would stay on the invisible guard.
|
|
22048
|
+
finishLeavingPanel(edge) {
|
|
22049
|
+
var _a;
|
|
22050
|
+
this.releasePanel();
|
|
22051
|
+
if (this.active && ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === this.tabGuardEl)
|
|
22052
|
+
edge.focus();
|
|
22053
|
+
}
|
|
21562
22054
|
/**
|
|
21563
22055
|
* Adds scroll and resize listeners for repositioning
|
|
21564
22056
|
*/
|
|
21565
22057
|
addScrollAndResizeListeners() {
|
|
21566
|
-
|
|
21567
|
-
|
|
22058
|
+
this.removeScrollAndResizeListeners();
|
|
22059
|
+
if (this.triggerEl == null || this.portalEl == null)
|
|
22060
|
+
return;
|
|
22061
|
+
this.stopAutoUpdate = autoUpdate(this.triggerEl, this.portalEl, () => {
|
|
22062
|
+
this.positioning = this.handlePopoverPositioning().catch(error => console.warn('pds-popover: failed to position the panel', error));
|
|
22063
|
+
});
|
|
21568
22064
|
}
|
|
21569
22065
|
/**
|
|
21570
22066
|
* Removes scroll and resize listeners
|
|
21571
22067
|
*/
|
|
21572
22068
|
removeScrollAndResizeListeners() {
|
|
21573
|
-
|
|
21574
|
-
|
|
22069
|
+
var _a;
|
|
22070
|
+
(_a = this.stopAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
22071
|
+
this.stopAutoUpdate = null;
|
|
21575
22072
|
}
|
|
21576
22073
|
/**
|
|
21577
22074
|
* Handles clicks outside the popover for light dismiss (auto type only)
|
|
@@ -21625,7 +22122,7 @@ class PdsPopover {
|
|
|
21625
22122
|
return;
|
|
21626
22123
|
// Like the native Popover API, Escape closes only the top popover: the last one opened that
|
|
21627
22124
|
// it applies to. Every open popover hears it, so each checks whether it's that one.
|
|
21628
|
-
const top = [...
|
|
22125
|
+
const top = [...popoversTakingEscape].reverse().find(popover => popover.takesEscapeFrom(event));
|
|
21629
22126
|
if (top !== this)
|
|
21630
22127
|
return;
|
|
21631
22128
|
// Take the key, so the dialog or modal around it doesn't close too.
|
|
@@ -21635,125 +22132,47 @@ class PdsPopover {
|
|
|
21635
22132
|
this.hide();
|
|
21636
22133
|
}
|
|
21637
22134
|
/**
|
|
21638
|
-
*
|
|
21639
|
-
|
|
21640
|
-
handleScroll() {
|
|
21641
|
-
if (!this.active)
|
|
21642
|
-
return;
|
|
21643
|
-
if (this.scrollDebounceTimer !== null) {
|
|
21644
|
-
clearTimeout(this.scrollDebounceTimer);
|
|
21645
|
-
}
|
|
21646
|
-
this.scrollDebounceTimer = setTimeout(() => {
|
|
21647
|
-
this.handlePopoverPositioning();
|
|
21648
|
-
this.scrollDebounceTimer = null;
|
|
21649
|
-
}, 10); // 10ms debounce for smooth repositioning
|
|
21650
|
-
}
|
|
21651
|
-
/**
|
|
21652
|
-
* Handles resize events to reposition the popover (debounced for performance)
|
|
22135
|
+
* Positions the popover relative to its trigger element, flipping to the opposite side when only that side has
|
|
22136
|
+
* room and shifting to stay 8px inside the viewport. The side it takes goes on the panel's `data-pds-popover-placement`.
|
|
21653
22137
|
*/
|
|
21654
|
-
|
|
21655
|
-
|
|
21656
|
-
|
|
21657
|
-
if (this.
|
|
21658
|
-
clearTimeout(this.resizeDebounceTimer);
|
|
21659
|
-
}
|
|
21660
|
-
this.resizeDebounceTimer = setTimeout(() => {
|
|
21661
|
-
this.handlePopoverPositioning();
|
|
21662
|
-
this.resizeDebounceTimer = null;
|
|
21663
|
-
}, 100); // 100ms debounce for resize
|
|
21664
|
-
}
|
|
21665
|
-
/**
|
|
21666
|
-
* Positions the popover relative to its trigger element
|
|
21667
|
-
*/
|
|
21668
|
-
handlePopoverPositioning() {
|
|
21669
|
-
// Prevent repositioning loops
|
|
21670
|
-
if (this.isRepositioning) {
|
|
21671
|
-
return;
|
|
21672
|
-
}
|
|
21673
|
-
this.isRepositioning = true;
|
|
21674
|
-
if (this.triggerEl == null || this.portalEl == null) {
|
|
21675
|
-
this.isRepositioning = false;
|
|
22138
|
+
async handlePopoverPositioning() {
|
|
22139
|
+
// Counted before the guards, so a run still in flight is dropped even when this one can't position.
|
|
22140
|
+
const run = ++this.positioningRun;
|
|
22141
|
+
if (this.triggerEl == null || this.portalEl == null)
|
|
21676
22142
|
return;
|
|
21677
|
-
}
|
|
21678
|
-
const triggerRect = this.triggerEl.getBoundingClientRect();
|
|
21679
|
-
const popoverRect = this.portalEl.getBoundingClientRect();
|
|
21680
22143
|
// Safety check: ensure trigger has valid dimensions (is rendered and visible)
|
|
21681
|
-
|
|
21682
|
-
|
|
22144
|
+
const triggerRect = this.triggerEl.getBoundingClientRect();
|
|
22145
|
+
if (triggerRect.width === 0 || triggerRect.height === 0)
|
|
21683
22146
|
return;
|
|
21684
|
-
|
|
21685
|
-
|
|
21686
|
-
|
|
21687
|
-
|
|
21688
|
-
|
|
21689
|
-
|
|
21690
|
-
|
|
21691
|
-
|
|
21692
|
-
|
|
21693
|
-
|
|
21694
|
-
|
|
21695
|
-
|
|
21696
|
-
break;
|
|
21697
|
-
case 'top-end':
|
|
21698
|
-
top = triggerRect.top - popoverRect.height - offset;
|
|
21699
|
-
left = triggerRect.right - popoverRect.width;
|
|
21700
|
-
break;
|
|
21701
|
-
case 'right':
|
|
21702
|
-
top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
|
|
21703
|
-
left = triggerRect.right + offset;
|
|
21704
|
-
break;
|
|
21705
|
-
case 'right-start':
|
|
21706
|
-
top = triggerRect.top;
|
|
21707
|
-
left = triggerRect.right + offset;
|
|
21708
|
-
break;
|
|
21709
|
-
case 'right-end':
|
|
21710
|
-
top = triggerRect.bottom - popoverRect.height;
|
|
21711
|
-
left = triggerRect.right + offset;
|
|
21712
|
-
break;
|
|
21713
|
-
case 'bottom':
|
|
21714
|
-
top = triggerRect.bottom + offset;
|
|
21715
|
-
left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
|
|
21716
|
-
break;
|
|
21717
|
-
case 'bottom-start':
|
|
21718
|
-
top = triggerRect.bottom + offset;
|
|
21719
|
-
left = triggerRect.left;
|
|
21720
|
-
break;
|
|
21721
|
-
case 'bottom-end':
|
|
21722
|
-
top = triggerRect.bottom + offset;
|
|
21723
|
-
left = triggerRect.right - popoverRect.width;
|
|
21724
|
-
break;
|
|
21725
|
-
case 'left':
|
|
21726
|
-
top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
|
|
21727
|
-
left = triggerRect.left - popoverRect.width - offset;
|
|
21728
|
-
break;
|
|
21729
|
-
case 'left-start':
|
|
21730
|
-
top = triggerRect.top;
|
|
21731
|
-
left = triggerRect.left - popoverRect.width - offset;
|
|
21732
|
-
break;
|
|
21733
|
-
case 'left-end':
|
|
21734
|
-
top = triggerRect.bottom - popoverRect.height;
|
|
21735
|
-
left = triggerRect.left - popoverRect.width - offset;
|
|
21736
|
-
break;
|
|
21737
|
-
}
|
|
21738
|
-
this.portalEl.style.top = `${top}px`;
|
|
21739
|
-
this.portalEl.style.left = `${left}px`;
|
|
22147
|
+
const portal = this.portalEl;
|
|
22148
|
+
const { x: left, y: top, placement } = await computePosition(this.triggerEl, portal, {
|
|
22149
|
+
placement: this.placement,
|
|
22150
|
+
strategy: 'fixed',
|
|
22151
|
+
// With no room on either side, stay on the preferred side: the side that overflows less can still push
|
|
22152
|
+
// a tall panel's start above the viewport.
|
|
22153
|
+
middleware: [offset(8), flip({ fallbackStrategy: 'initialPlacement' }), shift({ padding: 8 })],
|
|
22154
|
+
platform: viewportPlatform,
|
|
22155
|
+
});
|
|
22156
|
+
if (!this.active || run !== this.positioningRun || portal !== this.portalEl)
|
|
22157
|
+
return;
|
|
22158
|
+
portal.setAttribute('data-pds-popover-placement', placement);
|
|
21740
22159
|
// `position: fixed` measures from the viewport unless an ancestor becomes its containing block,
|
|
21741
|
-
// as a modal dialog does with its backdrop filter.
|
|
21742
|
-
const
|
|
21743
|
-
|
|
21744
|
-
|
|
21745
|
-
this.portalEl.style.left = `${2 * left - placed.left}px`;
|
|
21746
|
-
}
|
|
21747
|
-
// Reset the repositioning guard after a short delay
|
|
21748
|
-
setTimeout(() => {
|
|
21749
|
-
this.isRepositioning = false;
|
|
21750
|
-
}, 16); // ~1 frame at 60fps
|
|
22160
|
+
// as a modal dialog does with its backdrop filter. Offset by however far that block's corner is from the viewport's.
|
|
22161
|
+
const origin = containingBlockOrigin(portal);
|
|
22162
|
+
portal.style.top = `${top - origin.top}px`;
|
|
22163
|
+
portal.style.left = `${left - origin.left}px`;
|
|
21751
22164
|
}
|
|
21752
22165
|
render() {
|
|
21753
|
-
return (hAsync(Host, { key: '
|
|
22166
|
+
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 }))));
|
|
21754
22167
|
}
|
|
21755
22168
|
get el() { return getElement(this); }
|
|
21756
22169
|
static get watchers() { return {
|
|
22170
|
+
"openOn": [{
|
|
22171
|
+
"openOnChanged": 0
|
|
22172
|
+
}],
|
|
22173
|
+
"padding": [{
|
|
22174
|
+
"applyPadding": 0
|
|
22175
|
+
}],
|
|
21757
22176
|
"placement": [{
|
|
21758
22177
|
"restorePlacementDefault": 0
|
|
21759
22178
|
}]
|
|
@@ -21764,9 +22183,11 @@ class PdsPopover {
|
|
|
21764
22183
|
"$tagName$": "pds-popover",
|
|
21765
22184
|
"$members$": {
|
|
21766
22185
|
"popoverTargetAction": [1, "popover-target-action"],
|
|
22186
|
+
"openOn": [1, "open-on"],
|
|
21767
22187
|
"popoverType": [1, "popover-type"],
|
|
21768
22188
|
"componentId": [1, "component-id"],
|
|
21769
22189
|
"maxWidth": [2, "max-width"],
|
|
22190
|
+
"padding": [1],
|
|
21770
22191
|
"placement": [1537],
|
|
21771
22192
|
"active": [32],
|
|
21772
22193
|
"show": [64],
|
|
@@ -21815,7 +22236,7 @@ class PdsProgress {
|
|
|
21815
22236
|
const normalizedFillColor = normalizeColorValue$1(this.fillColor);
|
|
21816
22237
|
const hostClass = this.animated ? { 'is-animated': this.animated } : '';
|
|
21817
22238
|
this.hostKeeper.record(hostClass);
|
|
21818
|
-
return (hAsync(Host, { key: '
|
|
22239
|
+
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, "%")));
|
|
21819
22240
|
}
|
|
21820
22241
|
get el() { return getElement(this); }
|
|
21821
22242
|
static get style() { return pdsProgressCss(); }
|
|
@@ -21850,7 +22271,7 @@ class PdsProperty {
|
|
|
21850
22271
|
this.icon = 'star';
|
|
21851
22272
|
}
|
|
21852
22273
|
render() {
|
|
21853
|
-
return (hAsync(Host, { key: '
|
|
22274
|
+
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' }))));
|
|
21854
22275
|
}
|
|
21855
22276
|
static get style() { return pdsPropertyCss(); }
|
|
21856
22277
|
static get cmpMeta() { return {
|
|
@@ -21868,10 +22289,10 @@ class PdsProperty {
|
|
|
21868
22289
|
|
|
21869
22290
|
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)}`;
|
|
21870
22291
|
|
|
21871
|
-
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)}`;
|
|
22292
|
+
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}`;
|
|
21872
22293
|
|
|
21873
22294
|
/**
|
|
21874
|
-
* @slot image - Custom image content to display instead of the default radio input
|
|
22295
|
+
* @slot image - Custom image content to display instead of the default radio input. Ignored when `variant` is `pill`.
|
|
21875
22296
|
* @part image-container - The container for the image
|
|
21876
22297
|
* @lightDom renders-markup
|
|
21877
22298
|
*/
|
|
@@ -21893,7 +22314,7 @@ class PdsRadio {
|
|
|
21893
22314
|
*/
|
|
21894
22315
|
this.disabled = false;
|
|
21895
22316
|
/**
|
|
21896
|
-
* Adds a border around the radio component for better visual separation.
|
|
22317
|
+
* Adds a border around the radio component for better visual separation. Ignored when `variant` is `pill`.
|
|
21897
22318
|
* @defaultValue false
|
|
21898
22319
|
*/
|
|
21899
22320
|
this.hasBorder = false;
|
|
@@ -21907,6 +22328,11 @@ class PdsRadio {
|
|
|
21907
22328
|
* @defaultValue false
|
|
21908
22329
|
*/
|
|
21909
22330
|
this.required = false;
|
|
22331
|
+
/**
|
|
22332
|
+
* 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.
|
|
22333
|
+
* @defaultValue default
|
|
22334
|
+
*/
|
|
22335
|
+
this.variant = 'default';
|
|
21910
22336
|
this.handleRadioChange = (e) => {
|
|
21911
22337
|
if (this.disabled) {
|
|
21912
22338
|
return;
|
|
@@ -21928,6 +22354,9 @@ class PdsRadio {
|
|
|
21928
22354
|
hasImage() {
|
|
21929
22355
|
return this._hasImage;
|
|
21930
22356
|
}
|
|
22357
|
+
isPill() {
|
|
22358
|
+
return this.variant === 'pill';
|
|
22359
|
+
}
|
|
21931
22360
|
classNames() {
|
|
21932
22361
|
const classNames = [];
|
|
21933
22362
|
if (this.invalid) {
|
|
@@ -21936,10 +22365,14 @@ class PdsRadio {
|
|
|
21936
22365
|
if (this.disabled) {
|
|
21937
22366
|
classNames.push('is-disabled');
|
|
21938
22367
|
}
|
|
21939
|
-
|
|
22368
|
+
// A pill is its own bordered shape, so has-border doesn't stack a card around it.
|
|
22369
|
+
if (this.hasBorder && !this.isPill()) {
|
|
21940
22370
|
classNames.push('has-border');
|
|
21941
22371
|
}
|
|
21942
|
-
if (this.
|
|
22372
|
+
if (this.isPill()) {
|
|
22373
|
+
classNames.push('pds-radio--pill');
|
|
22374
|
+
}
|
|
22375
|
+
if (this.hasImage() && !this.isPill()) {
|
|
21943
22376
|
classNames.push('has-image');
|
|
21944
22377
|
}
|
|
21945
22378
|
return classNames.join(' ');
|
|
@@ -21969,13 +22402,14 @@ class PdsRadio {
|
|
|
21969
22402
|
}
|
|
21970
22403
|
render() {
|
|
21971
22404
|
const renderLabelAndMessages = () => [
|
|
21972
|
-
hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: '
|
|
22405
|
+
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)),
|
|
21973
22406
|
this.helperMessage && (hAsync("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
|
|
21974
|
-
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: '
|
|
22407
|
+
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))
|
|
21975
22408
|
];
|
|
21976
22409
|
const hostClass = this.classNames();
|
|
21977
22410
|
this.hostKeeper.record(hostClass);
|
|
21978
|
-
|
|
22411
|
+
const showImage = this.hasImage() && !this.isPill();
|
|
22412
|
+
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())));
|
|
21979
22413
|
}
|
|
21980
22414
|
get el() { return getElement(this); }
|
|
21981
22415
|
static get style() { return labelCss$3() + pdsRadioCss(); }
|
|
@@ -21995,6 +22429,7 @@ class PdsRadio {
|
|
|
21995
22429
|
"name": [1],
|
|
21996
22430
|
"required": [4],
|
|
21997
22431
|
"value": [1],
|
|
22432
|
+
"variant": [1],
|
|
21998
22433
|
"_hasImage": [32]
|
|
21999
22434
|
},
|
|
22000
22435
|
"$listeners$": undefined,
|
|
@@ -22167,13 +22602,13 @@ class PdsRadioGroup {
|
|
|
22167
22602
|
render() {
|
|
22168
22603
|
const gapValue = this.getGapValue();
|
|
22169
22604
|
const ariaDescribedBy = this.getAriaDescribedBy();
|
|
22170
|
-
return (hAsync(Host, { key: '
|
|
22605
|
+
return (hAsync(Host, { key: 'aaf53113f06a0f49706e53735701fba64e79cb4d', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
|
|
22171
22606
|
'--pds-radio-group-gap': gapValue,
|
|
22172
|
-
} }, this.groupLabel && (hAsync("div", { key: '
|
|
22607
|
+
} }, this.groupLabel && (hAsync("div", { key: '4be5e43146bf348929e45498107862aaca161644', class: "pds-radio-group__label" }, this.groupLabel)), hAsync("div", { key: 'b4a1b870c1a7167b8dcbcf0a11808bbd9a8cec4e', class: {
|
|
22173
22608
|
'pds-radio-group__radios': true,
|
|
22174
22609
|
'pds-radio-group__radios--row': this.direction === 'row',
|
|
22175
22610
|
'pds-radio-group__radios--column': this.direction === 'column',
|
|
22176
|
-
} }, hAsync("slot", { key: '
|
|
22611
|
+
} }, 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))));
|
|
22177
22612
|
}
|
|
22178
22613
|
get el() { return getElement(this); }
|
|
22179
22614
|
static get watchers() { return {
|
|
@@ -22282,7 +22717,7 @@ class PdsRow {
|
|
|
22282
22717
|
'min-height': this.minHeight,
|
|
22283
22718
|
}));
|
|
22284
22719
|
this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
|
|
22285
|
-
return hAsync(Host, { key: '
|
|
22720
|
+
return hAsync(Host, { key: '589ee3251a4ee1d7824c8e2fa3e214de5466c3db', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
|
|
22286
22721
|
}
|
|
22287
22722
|
get el() { return getElement(this); }
|
|
22288
22723
|
static get style() { return pdsRowCss(); }
|
|
@@ -22312,6 +22747,25 @@ const labelCss$2 = () => `:host{display:inline-block}:host([aria-disabled=true])
|
|
|
22312
22747
|
|
|
22313
22748
|
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}`;
|
|
22314
22749
|
|
|
22750
|
+
/** The tags of an option list in order, optgroup contents included: equal shapes can be patched in place. */
|
|
22751
|
+
const shapeOf = (items) => items.map((item) => item.tagName + (item.tagName === 'OPTGROUP' ? `(${shapeOf(Array.from(item.children))})` : '')).join();
|
|
22752
|
+
/** Brings an existing option or optgroup up to date with its copy, keeping the element itself. */
|
|
22753
|
+
const patchInPlace = (target, copy) => {
|
|
22754
|
+
Array.from(target.attributes).forEach(({ name }) => {
|
|
22755
|
+
if (!copy.hasAttribute(name))
|
|
22756
|
+
target.removeAttribute(name);
|
|
22757
|
+
});
|
|
22758
|
+
Array.from(copy.attributes).forEach(({ name, value }) => {
|
|
22759
|
+
if (target.getAttribute(name) !== value)
|
|
22760
|
+
target.setAttribute(name, value);
|
|
22761
|
+
});
|
|
22762
|
+
if (copy.tagName === 'OPTGROUP') {
|
|
22763
|
+
Array.from(copy.children).forEach((child, index) => patchInPlace(target.children[index], child));
|
|
22764
|
+
}
|
|
22765
|
+
else if (target.textContent !== copy.textContent) {
|
|
22766
|
+
target.textContent = copy.textContent;
|
|
22767
|
+
}
|
|
22768
|
+
};
|
|
22315
22769
|
/**
|
|
22316
22770
|
* @slot action - Content to be displayed in the label area, typically for help icons or links
|
|
22317
22771
|
*/
|
|
@@ -22323,6 +22777,9 @@ class PdsSelect {
|
|
|
22323
22777
|
this.pdsFocus = createEvent(this, "pdsFocus");
|
|
22324
22778
|
this.pdsKeyDown = createEvent(this, "pdsKeyDown");
|
|
22325
22779
|
this._type = 'select-one';
|
|
22780
|
+
this.optionObserver = null;
|
|
22781
|
+
this.optionSyncFrame = null;
|
|
22782
|
+
this.hasHadOptions = false;
|
|
22326
22783
|
this.hostKeeper = new HostStylingKeeper();
|
|
22327
22784
|
/**
|
|
22328
22785
|
* Indicates whether or not the select field is disabled.
|
|
@@ -22339,6 +22796,16 @@ class PdsSelect {
|
|
|
22339
22796
|
* @defaultValue false
|
|
22340
22797
|
*/
|
|
22341
22798
|
this.required = false;
|
|
22799
|
+
/**
|
|
22800
|
+
* Whether a mutation is inside an option or optgroup. The host's own attributes and children
|
|
22801
|
+
* (top-level adds and removes reach `slotchange`) and the action slot's content are not.
|
|
22802
|
+
*/
|
|
22803
|
+
this.touchesOption = ({ target }) => {
|
|
22804
|
+
// Not just TEXT_NODE: characterData also reports comment nodes, and a Comment has no
|
|
22805
|
+
// .closest() — treating anything non-Element as a Text node crashed on one.
|
|
22806
|
+
const element = target.nodeType === Node.ELEMENT_NODE ? target : target.parentElement;
|
|
22807
|
+
return target !== this.el && (element === null || element === void 0 ? void 0 : element.closest('option, optgroup')) != null;
|
|
22808
|
+
};
|
|
22342
22809
|
/**
|
|
22343
22810
|
* Emits an event on input change.
|
|
22344
22811
|
*/
|
|
@@ -22365,25 +22832,47 @@ class PdsSelect {
|
|
|
22365
22832
|
this.pdsKeyDown.emit(ev);
|
|
22366
22833
|
};
|
|
22367
22834
|
/**
|
|
22368
|
-
*
|
|
22369
|
-
*
|
|
22370
|
-
*
|
|
22371
|
-
*
|
|
22835
|
+
* Copies the slotted <option> and <optgroup> elements into the inner select, then
|
|
22836
|
+
* reselects the current value. Runs on `slotchange` and when a slotted option changes
|
|
22837
|
+
* (see startOptionSync).
|
|
22838
|
+
*
|
|
22839
|
+
* Nothing happens when the copies match what the select already holds. When only text or
|
|
22840
|
+
* attributes changed, the select's own options are updated in place rather than replaced,
|
|
22841
|
+
* so an open picker keeps its highlight, a multiple select keeps its range anchor, and a
|
|
22842
|
+
* screen reader keeps its place. Selecting programmatically fires no change event, so a
|
|
22843
|
+
* copy never emits `pdsSelectChange`.
|
|
22372
22844
|
*/
|
|
22373
22845
|
this.handleSlotChange = () => {
|
|
22374
|
-
|
|
22375
|
-
this.
|
|
22376
|
-
|
|
22377
|
-
|
|
22378
|
-
|
|
22379
|
-
|
|
22380
|
-
|
|
22381
|
-
|
|
22382
|
-
|
|
22383
|
-
|
|
22384
|
-
|
|
22385
|
-
|
|
22846
|
+
var _a;
|
|
22847
|
+
const slot = (_a = this.slotContainer) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
|
|
22848
|
+
if (slot === null || slot === undefined || this.selectEl === undefined)
|
|
22849
|
+
return;
|
|
22850
|
+
const copies = slot.assignedElements({ flatten: true })
|
|
22851
|
+
.filter((item) => ['OPTION', 'OPTGROUP'].includes(item.tagName))
|
|
22852
|
+
.map((item) => item.cloneNode(true));
|
|
22853
|
+
const current = Array.from(this.selectEl.children);
|
|
22854
|
+
// The very first copy populates an empty select, where falling back to the first option (like
|
|
22855
|
+
// a native select) is correct; the no-match blank state is for options changing under a value
|
|
22856
|
+
// that was already showing selected. Tracked separately from the select's current emptiness:
|
|
22857
|
+
// an async reload that clears options before the next set lands would otherwise look like a
|
|
22858
|
+
// first render again, and the no-match state must still apply once that next set arrives.
|
|
22859
|
+
const hadOptions = this.hasHadOptions;
|
|
22860
|
+
if (copies.length > 0)
|
|
22861
|
+
this.hasHadOptions = true;
|
|
22862
|
+
const markup = (items) => items.map((item) => item.outerHTML).join('');
|
|
22863
|
+
if (markup(copies) === markup(current))
|
|
22864
|
+
return;
|
|
22865
|
+
if (shapeOf(copies) === shapeOf(current)) {
|
|
22866
|
+
copies.forEach((copy, index) => patchInPlace(current[index], copy));
|
|
22867
|
+
}
|
|
22868
|
+
else {
|
|
22869
|
+
this.selectEl.innerHTML = '';
|
|
22870
|
+
copies.forEach((copy) => this.selectEl.appendChild(copy));
|
|
22871
|
+
}
|
|
22386
22872
|
this.updateSelectedOption();
|
|
22873
|
+
if (hadOptions)
|
|
22874
|
+
this.showNoSelectionWithoutMatch();
|
|
22875
|
+
this.updateFormValue();
|
|
22387
22876
|
};
|
|
22388
22877
|
}
|
|
22389
22878
|
/**
|
|
@@ -22412,9 +22901,16 @@ class PdsSelect {
|
|
|
22412
22901
|
}
|
|
22413
22902
|
// Expose type property on the element instance to match native form element behavior
|
|
22414
22903
|
exposeTypeProperty(this.el, () => this._type);
|
|
22904
|
+
// Reconnected after a move: componentDidLoad won't run again, and options may have changed
|
|
22905
|
+
// while it was out of the document.
|
|
22906
|
+
if (this.selectEl !== undefined) {
|
|
22907
|
+
this.startOptionSync();
|
|
22908
|
+
this.scheduleOptionSync();
|
|
22909
|
+
}
|
|
22415
22910
|
}
|
|
22416
22911
|
disconnectedCallback() {
|
|
22417
22912
|
this.hostKeeper.disconnect();
|
|
22913
|
+
this.stopOptionSync();
|
|
22418
22914
|
}
|
|
22419
22915
|
componentWillLoad() {
|
|
22420
22916
|
// Set initial type based on multiple prop
|
|
@@ -22424,6 +22920,43 @@ class PdsSelect {
|
|
|
22424
22920
|
componentDidLoad() {
|
|
22425
22921
|
// Set initial form value
|
|
22426
22922
|
this.updateFormValue();
|
|
22923
|
+
// Stencil holds componentDidLoad until the shadow root's pds-icon has loaded, so options can
|
|
22924
|
+
// change between the first slotchange copy and here with nothing observing yet — the same gap
|
|
22925
|
+
// the reconnect path closes with a catch-up sync.
|
|
22926
|
+
this.startOptionSync();
|
|
22927
|
+
this.scheduleOptionSync();
|
|
22928
|
+
}
|
|
22929
|
+
/**
|
|
22930
|
+
* Keeps the inner select in step with the slotted options. `slotchange` only fires when
|
|
22931
|
+
* top-level options are added or removed, so an option's text, value or disabled state
|
|
22932
|
+
* changing, or an option added inside an optgroup, would otherwise never reach the select.
|
|
22933
|
+
* Changes are batched into one copy per animation frame.
|
|
22934
|
+
*/
|
|
22935
|
+
startOptionSync() {
|
|
22936
|
+
if (this.optionObserver !== null || typeof MutationObserver === 'undefined' || !this.el.isConnected)
|
|
22937
|
+
return;
|
|
22938
|
+
this.optionObserver = new MutationObserver((mutations) => {
|
|
22939
|
+
if (mutations.some(this.touchesOption))
|
|
22940
|
+
this.scheduleOptionSync();
|
|
22941
|
+
});
|
|
22942
|
+
this.optionObserver.observe(this.el, { childList: true, subtree: true, attributes: true, characterData: true });
|
|
22943
|
+
}
|
|
22944
|
+
scheduleOptionSync() {
|
|
22945
|
+
if (this.optionSyncFrame !== null)
|
|
22946
|
+
return;
|
|
22947
|
+
this.optionSyncFrame = requestAnimationFrame(() => {
|
|
22948
|
+
this.optionSyncFrame = null;
|
|
22949
|
+
this.handleSlotChange();
|
|
22950
|
+
});
|
|
22951
|
+
}
|
|
22952
|
+
stopOptionSync() {
|
|
22953
|
+
var _a;
|
|
22954
|
+
(_a = this.optionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
22955
|
+
this.optionObserver = null;
|
|
22956
|
+
if (this.optionSyncFrame !== null) {
|
|
22957
|
+
cancelAnimationFrame(this.optionSyncFrame);
|
|
22958
|
+
this.optionSyncFrame = null;
|
|
22959
|
+
}
|
|
22427
22960
|
}
|
|
22428
22961
|
/**
|
|
22429
22962
|
* Updates the selected option in the select element based on the current value.
|
|
@@ -22449,6 +22982,19 @@ class PdsSelect {
|
|
|
22449
22982
|
});
|
|
22450
22983
|
}
|
|
22451
22984
|
}
|
|
22985
|
+
/**
|
|
22986
|
+
* After a copy that changes an existing option set, a value whose option was renamed or removed
|
|
22987
|
+
* has nothing to select. Like a native select, show nothing selected rather than the first
|
|
22988
|
+
* option; the value itself is kept, with no change event.
|
|
22989
|
+
*/
|
|
22990
|
+
showNoSelectionWithoutMatch() {
|
|
22991
|
+
var _a;
|
|
22992
|
+
const wanted = [].concat((_a = this.value) !== null && _a !== void 0 ? _a : []).filter((value) => value !== '');
|
|
22993
|
+
const options = Array.from(this.selectEl.options);
|
|
22994
|
+
if (wanted.length > 0 && !options.some((option) => wanted.includes(option.value))) {
|
|
22995
|
+
this.selectEl.selectedIndex = -1;
|
|
22996
|
+
}
|
|
22997
|
+
}
|
|
22452
22998
|
getHelperMessage() {
|
|
22453
22999
|
return this.helperMessage && (hAsync("p", { class: "pds-select__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage));
|
|
22454
23000
|
}
|
|
@@ -22554,7 +23100,7 @@ class PdsSelect {
|
|
|
22554
23100
|
'has-action': hasAction && !this.hideLabel ? 'true' : null,
|
|
22555
23101
|
};
|
|
22556
23102
|
this.hostKeeper.record(hostClass, {}, hostAttributes);
|
|
22557
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
23103
|
+
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 }))));
|
|
22558
23104
|
}
|
|
22559
23105
|
static get formAssociated() { return true; }
|
|
22560
23106
|
get el() { return getElement(this); }
|
|
@@ -25313,7 +25859,7 @@ class PdsSortable {
|
|
|
25313
25859
|
render() {
|
|
25314
25860
|
const classNames = this.classNames();
|
|
25315
25861
|
this.hostKeeper.record(classNames);
|
|
25316
|
-
return (hAsync(Host, { key: '
|
|
25862
|
+
return (hAsync(Host, { key: '6e9e7b769f57ebfd81541fbecbe17b3fb4ad3e47', class: classNames, id: this.componentId }, hAsync("slot", { key: 'c9466a216862c0a3e578f3fcfc1ac1e26146722b' })));
|
|
25317
25863
|
}
|
|
25318
25864
|
get el() { return getElement(this); }
|
|
25319
25865
|
static get watchers() { return {
|
|
@@ -25388,7 +25934,7 @@ class PdsSortableItem {
|
|
|
25388
25934
|
}
|
|
25389
25935
|
render() {
|
|
25390
25936
|
this.hostKeeper.record('pds-sortable-item');
|
|
25391
|
-
return (hAsync(Host, { key: '
|
|
25937
|
+
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" })))));
|
|
25392
25938
|
}
|
|
25393
25939
|
get el() { return getElement(this); }
|
|
25394
25940
|
static get style() { return pdsSortableItemCss(); }
|
|
@@ -25523,9 +26069,9 @@ class PdsSwitch {
|
|
|
25523
26069
|
const hostClass = this.switchClassNames();
|
|
25524
26070
|
const ariaDisabled = this.disabled ? 'true' : null;
|
|
25525
26071
|
this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
|
|
25526
|
-
return (hAsync(Host, { key: '
|
|
25527
|
-
hAsync("div", { key: '
|
|
25528
|
-
hAsync("div", { key: '
|
|
26072
|
+
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 &&
|
|
26073
|
+
hAsync("div", { key: 'ef829fb6bc66060805a144995f60e2bebb915615', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
26074
|
+
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)));
|
|
25529
26075
|
}
|
|
25530
26076
|
static get formAssociated() { return true; }
|
|
25531
26077
|
get el() { return getElement(this); }
|
|
@@ -25949,7 +26495,7 @@ class PdsTableBody {
|
|
|
25949
26495
|
registerInstance(this, hostRef);
|
|
25950
26496
|
}
|
|
25951
26497
|
render() {
|
|
25952
|
-
return (hAsync(Host, { key: '
|
|
26498
|
+
return (hAsync(Host, { key: '4f1cba9505f56ff1ab0a19f9a88318d66a02eacc', role: "rowgroup", part: "body" }, hAsync("slot", { key: 'ea0c620a15fcbe2915189e870d0815c5cbffdf8c' })));
|
|
25953
26499
|
}
|
|
25954
26500
|
static get style() { return pdsTableBodyCss(); }
|
|
25955
26501
|
static get cmpMeta() { return {
|
|
@@ -26107,11 +26653,11 @@ class PdsTableCell {
|
|
|
26107
26653
|
return classNames.join(' ');
|
|
26108
26654
|
}
|
|
26109
26655
|
render() {
|
|
26110
|
-
return (hAsync(Host, { key: '
|
|
26656
|
+
return (hAsync(Host, { key: 'fd84150bcb9bd5d2029624394d4f69b0a7234bc0', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
|
|
26111
26657
|
this.tableRef.fixedColumn &&
|
|
26112
26658
|
this.tableRef.selectable
|
|
26113
26659
|
? { '--fixed-cell-position': '40px' }
|
|
26114
|
-
: {} }, hAsync("slot", { key: '
|
|
26660
|
+
: {} }, hAsync("slot", { key: '9256f033ec58b9cb2acc74d705acc9726507668b' })));
|
|
26115
26661
|
}
|
|
26116
26662
|
get hostElement() { return getElement(this); }
|
|
26117
26663
|
static get watchers() { return {
|
|
@@ -26180,7 +26726,7 @@ class PdsTableHead {
|
|
|
26180
26726
|
}
|
|
26181
26727
|
}
|
|
26182
26728
|
render() {
|
|
26183
|
-
return (hAsync(Host, { key: '
|
|
26729
|
+
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' })));
|
|
26184
26730
|
}
|
|
26185
26731
|
get hostElement() { return getElement(this); }
|
|
26186
26732
|
static get style() { return pdsTableHeadCss(); }
|
|
@@ -26401,11 +26947,11 @@ class PdsTableHeadCell {
|
|
|
26401
26947
|
return classNames.join(' ');
|
|
26402
26948
|
}
|
|
26403
26949
|
render() {
|
|
26404
|
-
return (hAsync(Host, { key: '
|
|
26950
|
+
return (hAsync(Host, { key: 'd609309180968913315c1428d0403c3974a4bfc0', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
|
|
26405
26951
|
this.tableRef.fixedColumn &&
|
|
26406
26952
|
this.tableRef.selectable
|
|
26407
26953
|
? { '--fixed-cell-position': '40px' }
|
|
26408
|
-
: {} }, hAsync("slot", { key: '
|
|
26954
|
+
: {} }, 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" }))));
|
|
26409
26955
|
}
|
|
26410
26956
|
get hostElement() { return getElement(this); }
|
|
26411
26957
|
static get style() { return pdsTableHeadCellCss(); }
|
|
@@ -26571,7 +27117,7 @@ class PdsTableRow {
|
|
|
26571
27117
|
}
|
|
26572
27118
|
}
|
|
26573
27119
|
render() {
|
|
26574
|
-
return (hAsync(Host, { key: '
|
|
27120
|
+
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' })));
|
|
26575
27121
|
}
|
|
26576
27122
|
get hostElement() { return getElement(this); }
|
|
26577
27123
|
static get style() { return pdsTableRowCss(); }
|
|
@@ -26625,7 +27171,7 @@ class PdsTabpanel {
|
|
|
26625
27171
|
// The docs show consumers omitting `slot`, so server HTML doesn't carry it — a DOM morph
|
|
26626
27172
|
// that strips it (and the stretch-active class) leaves this panel unslotted. Put both back.
|
|
26627
27173
|
this.hostKeeper.record(hostClass, {}, { slot: 'tabpanels' });
|
|
26628
|
-
return (hAsync(Host, { key: '
|
|
27174
|
+
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' }))));
|
|
26629
27175
|
}
|
|
26630
27176
|
get el() { return getElement(this); }
|
|
26631
27177
|
static get style() { return pdsTabpanelCss(); }
|
|
@@ -26924,7 +27470,7 @@ class PdsTabs {
|
|
|
26924
27470
|
// Only the classes: `active-tab-name` backs the mutable activeTabName prop, so a morph that drops
|
|
26925
27471
|
// it is a prop change, not a strip.
|
|
26926
27472
|
this.hostKeeper.record(hostClass);
|
|
26927
|
-
return (hAsync(Host, { key: '
|
|
27473
|
+
return (hAsync(Host, { key: '08ac02be358bebbd95dd5edca30cd99789445f50', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, hAsync("slot", { key: '02395c056f80f46f1fa9117eafde68ef170b4188', name: "tabpanels" })));
|
|
26928
27474
|
}
|
|
26929
27475
|
get el() { return getElement(this); }
|
|
26930
27476
|
static get style() { return pdsTabsCss(); }
|
|
@@ -27058,7 +27604,7 @@ class PdsText {
|
|
|
27058
27604
|
? `pds-text--decoration-${this.decoration}`
|
|
27059
27605
|
: ''}
|
|
27060
27606
|
`;
|
|
27061
|
-
return (hAsync(Tag, { key: '
|
|
27607
|
+
return (hAsync(Tag, { key: 'b79a6e67f11024cb025cb26bbf77231547bd63a4', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: 'ae1f8ca39899894541eac3c07fb21ead4ab98f40' })));
|
|
27062
27608
|
}
|
|
27063
27609
|
get el() { return getElement(this); }
|
|
27064
27610
|
static get watchers() { return {
|
|
@@ -27404,10 +27950,10 @@ class PdsTextarea {
|
|
|
27404
27950
|
}
|
|
27405
27951
|
render() {
|
|
27406
27952
|
const value = this.getValue();
|
|
27407
|
-
return (hAsync(Host, { key: '
|
|
27408
|
-
hAsync("div", { key: '
|
|
27409
|
-
hAsync("p", { key: '
|
|
27410
|
-
hAsync("p", { key: '
|
|
27953
|
+
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 &&
|
|
27954
|
+
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 &&
|
|
27955
|
+
hAsync("p", { key: '811065b7ce7b45d902d821dbceb25fef4231db94', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
|
|
27956
|
+
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))));
|
|
27411
27957
|
}
|
|
27412
27958
|
static get formAssociated() { return true; }
|
|
27413
27959
|
get el() { return getElement(this); }
|
|
@@ -27455,7 +28001,7 @@ class PdsTextarea {
|
|
|
27455
28001
|
}; }
|
|
27456
28002
|
}
|
|
27457
28003
|
|
|
27458
|
-
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;}`;
|
|
28004
|
+
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}`;
|
|
27459
28005
|
|
|
27460
28006
|
/** Fallback when computed `--animation-duration` is unavailable (matches `--pine-motion-duration-slow`). */
|
|
27461
28007
|
const TOAST_DISMISS_ANIMATION_MS = 300;
|
|
@@ -27577,17 +28123,23 @@ class PdsToast {
|
|
|
27577
28123
|
if (this.type === 'loading') {
|
|
27578
28124
|
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" }))));
|
|
27579
28125
|
}
|
|
27580
|
-
//
|
|
27581
|
-
|
|
28126
|
+
// Decorative: inside role="alert" an icon name would be read out with the
|
|
28127
|
+
// message. Severity is announced as text instead (see severityLabel).
|
|
28128
|
+
return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon", "aria-hidden": "true" });
|
|
28129
|
+
}
|
|
28130
|
+
severityText() {
|
|
28131
|
+
var _a;
|
|
28132
|
+
return (_a = this.severityLabel) !== null && _a !== void 0 ? _a : (this.type === 'danger' ? 'Error' : undefined);
|
|
27582
28133
|
}
|
|
27583
28134
|
render() {
|
|
27584
|
-
|
|
28135
|
+
const severity = this.severityText();
|
|
28136
|
+
return (hAsync(Host, { key: '4c4077add1843ab84674dfa49fb963df55f1c432', hidden: !this.isVisible }, hAsync("div", { key: '0d819ac123de625604d3b1aa0f9391366b4d0289', class: {
|
|
27585
28137
|
'pds-toast': true,
|
|
27586
28138
|
[`pds-toast--${this.type}`]: this.type !== 'default',
|
|
27587
28139
|
'pds-toast--animating-out': this.isAnimatingOut
|
|
27588
|
-
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '
|
|
28140
|
+
}, 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: () => {
|
|
27589
28141
|
this.dismiss();
|
|
27590
|
-
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '
|
|
28142
|
+
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '1b26a6a842868a5b1e55b7110c755edc7f830ba5', name: "remove", "aria-hidden": "true" }))))));
|
|
27591
28143
|
}
|
|
27592
28144
|
get el() { return getElement(this); }
|
|
27593
28145
|
static get watchers() { return {
|
|
@@ -27606,6 +28158,7 @@ class PdsToast {
|
|
|
27606
28158
|
"icon": [1],
|
|
27607
28159
|
"type": [1],
|
|
27608
28160
|
"dismissLabel": [1, "dismiss-label"],
|
|
28161
|
+
"severityLabel": [1, "severity-label"],
|
|
27609
28162
|
"isVisible": [32],
|
|
27610
28163
|
"isAnimatingOut": [32],
|
|
27611
28164
|
"dismiss": [64]
|
|
@@ -27635,7 +28188,9 @@ class PdsTooltip {
|
|
|
27635
28188
|
this.resolvedPlacement = 'right';
|
|
27636
28189
|
this.triggerEl = null;
|
|
27637
28190
|
this.contentDiv = null;
|
|
28191
|
+
this.lastCopiedHtml = null;
|
|
27638
28192
|
this.slotMutationObserver = null;
|
|
28193
|
+
this.contentSyncFrame = null;
|
|
27639
28194
|
this.currentPathname = '';
|
|
27640
28195
|
this.pathnameCheckInterval = null;
|
|
27641
28196
|
this.stopAutoUpdate = null;
|
|
@@ -27702,6 +28257,25 @@ class PdsTooltip {
|
|
|
27702
28257
|
this.handleSpaNavigation();
|
|
27703
28258
|
}
|
|
27704
28259
|
};
|
|
28260
|
+
this.scheduleContentSync = () => {
|
|
28261
|
+
if (this.contentSyncFrame !== null)
|
|
28262
|
+
return;
|
|
28263
|
+
this.contentSyncFrame = requestAnimationFrame(() => {
|
|
28264
|
+
this.contentSyncFrame = null;
|
|
28265
|
+
if (this.portalEl === null || this.contentDiv === null)
|
|
28266
|
+
return;
|
|
28267
|
+
const copy = this.copySlottedContent();
|
|
28268
|
+
const strippedCopy = this.strippedHtml(copy);
|
|
28269
|
+
if (strippedCopy === this.lastCopiedHtml)
|
|
28270
|
+
return;
|
|
28271
|
+
this.lastCopiedHtml = strippedCopy;
|
|
28272
|
+
this.contentDiv.textContent = '';
|
|
28273
|
+
this.contentDiv.append(...Array.from(copy.childNodes));
|
|
28274
|
+
this.repositionPortal().catch(error => {
|
|
28275
|
+
console.warn('Failed to reposition tooltip after a content change:', error);
|
|
28276
|
+
});
|
|
28277
|
+
});
|
|
28278
|
+
};
|
|
27705
28279
|
}
|
|
27706
28280
|
handleOpenToggle(newValue, oldValue) {
|
|
27707
28281
|
if (newValue === false && oldValue === true) {
|
|
@@ -27716,16 +28290,6 @@ class PdsTooltip {
|
|
|
27716
28290
|
window.addEventListener('pageshow', this.handlePageShow);
|
|
27717
28291
|
this.currentPathname = window.location.pathname;
|
|
27718
28292
|
this.triggerEl = this.el.querySelector('.pds-tooltip__trigger');
|
|
27719
|
-
const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');
|
|
27720
|
-
if (contentSlotWrapper !== null) {
|
|
27721
|
-
this.slotMutationObserver = new MutationObserver(() => {
|
|
27722
|
-
if (this.opened && this.portalEl !== null) {
|
|
27723
|
-
this.removePortal();
|
|
27724
|
-
this.createPortal();
|
|
27725
|
-
}
|
|
27726
|
-
});
|
|
27727
|
-
this.slotMutationObserver.observe(contentSlotWrapper, { childList: true, subtree: false });
|
|
27728
|
-
}
|
|
27729
28293
|
// no return; Stencil ignores teardown functions here
|
|
27730
28294
|
}
|
|
27731
28295
|
connectedCallback() {
|
|
@@ -27733,10 +28297,6 @@ class PdsTooltip {
|
|
|
27733
28297
|
}
|
|
27734
28298
|
disconnectedCallback() {
|
|
27735
28299
|
window.removeEventListener('pageshow', this.handlePageShow);
|
|
27736
|
-
if (this.slotMutationObserver !== null) {
|
|
27737
|
-
this.slotMutationObserver.disconnect();
|
|
27738
|
-
this.slotMutationObserver = null;
|
|
27739
|
-
}
|
|
27740
28300
|
// Ensure global listeners/intervals are removed if still present
|
|
27741
28301
|
if (this.portalEl !== null) {
|
|
27742
28302
|
this.removePortal();
|
|
@@ -27879,31 +28439,9 @@ class PdsTooltip {
|
|
|
27879
28439
|
this.contentDiv.className = 'pds-tooltip__content';
|
|
27880
28440
|
this.contentDiv.setAttribute('aria-hidden', this.opened ? 'false' : 'true');
|
|
27881
28441
|
this.contentDiv.setAttribute('aria-live', this.opened ? 'polite' : 'off');
|
|
27882
|
-
const
|
|
27883
|
-
|
|
27884
|
-
|
|
27885
|
-
if (slottedContentContainer !== null) {
|
|
27886
|
-
const childrenToClone = Array.from(slottedContentContainer.childNodes);
|
|
27887
|
-
if (childrenToClone.length > 0) {
|
|
27888
|
-
const hasMeaningfulNode = childrenToClone.some(node => {
|
|
27889
|
-
var _a;
|
|
27890
|
-
return node.nodeType === Node.ELEMENT_NODE ||
|
|
27891
|
-
(node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
|
|
27892
|
-
});
|
|
27893
|
-
if (hasMeaningfulNode) {
|
|
27894
|
-
hasSlottedContent = true;
|
|
27895
|
-
childrenToClone.forEach((node /*, index*/) => {
|
|
27896
|
-
var _a;
|
|
27897
|
-
if (node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '')) {
|
|
27898
|
-
this.contentDiv.appendChild(node.cloneNode(true));
|
|
27899
|
-
}
|
|
27900
|
-
});
|
|
27901
|
-
}
|
|
27902
|
-
}
|
|
27903
|
-
}
|
|
27904
|
-
if (!hasSlottedContent && typeof this.content === 'string' && this.content.trim() !== '') {
|
|
27905
|
-
this.contentDiv.textContent = this.content;
|
|
27906
|
-
}
|
|
28442
|
+
const initialCopy = this.copySlottedContent();
|
|
28443
|
+
this.lastCopiedHtml = this.strippedHtml(initialCopy);
|
|
28444
|
+
this.contentDiv.append(...Array.from(initialCopy.childNodes));
|
|
27907
28445
|
this.portalEl.appendChild(this.contentDiv);
|
|
27908
28446
|
document.body.appendChild(this.portalEl);
|
|
27909
28447
|
this.repositionPortal().catch(error => {
|
|
@@ -27926,8 +28464,93 @@ class PdsTooltip {
|
|
|
27926
28464
|
if (this.triggerEl !== null && this.portalEl.id !== '') {
|
|
27927
28465
|
this.triggerEl.setAttribute('aria-describedby', this.portalEl.id);
|
|
27928
28466
|
}
|
|
28467
|
+
this.startContentSync();
|
|
28468
|
+
}
|
|
28469
|
+
/**
|
|
28470
|
+
* The host's own content slot wrapper. Matched among direct children only, so a nested
|
|
28471
|
+
* pds-tooltip inside the trigger slot isn't mistaken for this one's.
|
|
28472
|
+
*/
|
|
28473
|
+
get contentSlotWrapper() {
|
|
28474
|
+
return Array.from(this.el.children).find((child) => child.matches('.pds-tooltip__content-slot-wrapper'));
|
|
28475
|
+
}
|
|
28476
|
+
/**
|
|
28477
|
+
* Copies the slotted content (or the `content` prop's text) into a detached container. The
|
|
28478
|
+
* portal holds copies so the framework that owns the slotted nodes keeps them.
|
|
28479
|
+
*/
|
|
28480
|
+
copySlottedContent() {
|
|
28481
|
+
var _a, _b;
|
|
28482
|
+
const copy = document.createElement('div');
|
|
28483
|
+
const slottedContentContainer = (_a = this.contentSlotWrapper) === null || _a === void 0 ? void 0 : _a.querySelector('[slot="content"]');
|
|
28484
|
+
const meaningfulNodes = Array.from((_b = slottedContentContainer === null || slottedContentContainer === void 0 ? void 0 : slottedContentContainer.childNodes) !== null && _b !== void 0 ? _b : []).filter(node => {
|
|
28485
|
+
var _a;
|
|
28486
|
+
return node.nodeType === Node.ELEMENT_NODE ||
|
|
28487
|
+
(node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
|
|
28488
|
+
});
|
|
28489
|
+
meaningfulNodes.forEach(node => copy.appendChild(node.cloneNode(true)));
|
|
28490
|
+
if (meaningfulNodes.length === 0 && typeof this.content === 'string' && this.content.trim() !== '') {
|
|
28491
|
+
copy.textContent = this.content;
|
|
28492
|
+
}
|
|
28493
|
+
return copy;
|
|
28494
|
+
}
|
|
28495
|
+
/**
|
|
28496
|
+
* While the tooltip is open, keeps the portal's copy in step with the slotted content at any
|
|
28497
|
+
* depth: content that loads or re-renders after opening shows without reopening. Changes are
|
|
28498
|
+
* batched to one re-copy per animation frame, and a re-copy that matches the last one shown is
|
|
28499
|
+
* dropped, so screen readers aren't re-announced, iframes don't reload and the tooltip isn't
|
|
28500
|
+
* repositioned for nothing. Only the hidden slot wrapper is observed, so copying into the portal
|
|
28501
|
+
* can't trigger another sync.
|
|
28502
|
+
*/
|
|
28503
|
+
startContentSync() {
|
|
28504
|
+
const contentSlotWrapper = this.contentSlotWrapper;
|
|
28505
|
+
if (contentSlotWrapper === undefined || typeof MutationObserver === 'undefined')
|
|
28506
|
+
return;
|
|
28507
|
+
this.slotMutationObserver = new MutationObserver(this.scheduleContentSync);
|
|
28508
|
+
this.slotMutationObserver.observe(contentSlotWrapper, {
|
|
28509
|
+
childList: true,
|
|
28510
|
+
subtree: true,
|
|
28511
|
+
attributes: true,
|
|
28512
|
+
characterData: true,
|
|
28513
|
+
});
|
|
28514
|
+
}
|
|
28515
|
+
/**
|
|
28516
|
+
* A copy's serialized HTML with Stencil's own hydration and scope classes removed from every
|
|
28517
|
+
* `pds-*` descendant, so a nested component finishing hydration (or re-hydrating once reconnected
|
|
28518
|
+
* inside the portal) isn't mistaken for a real content change. Without this, that class-only
|
|
28519
|
+
* difference fails the equality check above and triggers a recopy that replaces still-loaded
|
|
28520
|
+
* nodes — reloading any iframe or media the slotted content held.
|
|
28521
|
+
*/
|
|
28522
|
+
strippedHtml(root) {
|
|
28523
|
+
const clone = root.cloneNode(true);
|
|
28524
|
+
clone.querySelectorAll('*').forEach((el) => {
|
|
28525
|
+
// isStencilClass is host-scoped (its own doc: "another sc- class may be a consumer's"), so it
|
|
28526
|
+
// only applies to pds-* elements — the same check keepPineHydrated makes before using it.
|
|
28527
|
+
if (!el.localName.startsWith('pds-'))
|
|
28528
|
+
return;
|
|
28529
|
+
// Not `el.className`: on an SVG element that's an SVGAnimatedString, not a string,
|
|
28530
|
+
// so classNamesOf would silently drop its classes from the comparison. The `class`
|
|
28531
|
+
// attribute is a plain string on every element, SVG included.
|
|
28532
|
+
const kept = classNamesOf(el.getAttribute('class') || '').filter((name) => !isStencilClass(el, name));
|
|
28533
|
+
if (kept.length === 0) {
|
|
28534
|
+
el.removeAttribute('class');
|
|
28535
|
+
}
|
|
28536
|
+
else {
|
|
28537
|
+
el.setAttribute('class', kept.join(' '));
|
|
28538
|
+
}
|
|
28539
|
+
});
|
|
28540
|
+
return clone.innerHTML;
|
|
28541
|
+
}
|
|
28542
|
+
stopContentSync() {
|
|
28543
|
+
if (this.slotMutationObserver !== null) {
|
|
28544
|
+
this.slotMutationObserver.disconnect();
|
|
28545
|
+
this.slotMutationObserver = null;
|
|
28546
|
+
}
|
|
28547
|
+
if (this.contentSyncFrame !== null) {
|
|
28548
|
+
cancelAnimationFrame(this.contentSyncFrame);
|
|
28549
|
+
this.contentSyncFrame = null;
|
|
28550
|
+
}
|
|
27929
28551
|
}
|
|
27930
28552
|
removePortal() {
|
|
28553
|
+
this.stopContentSync();
|
|
27931
28554
|
// Stop Floating UI's autoUpdate
|
|
27932
28555
|
if (this.stopAutoUpdate !== null) {
|
|
27933
28556
|
this.stopAutoUpdate();
|
|
@@ -27959,12 +28582,13 @@ class PdsTooltip {
|
|
|
27959
28582
|
this.triggerEl.removeAttribute('aria-describedby');
|
|
27960
28583
|
}
|
|
27961
28584
|
this.contentDiv = null;
|
|
28585
|
+
this.lastCopiedHtml = null;
|
|
27962
28586
|
}
|
|
27963
28587
|
render() {
|
|
27964
28588
|
const hostId = this.componentId || undefined;
|
|
27965
|
-
return (hAsync(Host, { key: '
|
|
28589
|
+
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,
|
|
27966
28590
|
/* focusin/out bubble; ensure keyboard users see tooltips */
|
|
27967
|
-
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '
|
|
28591
|
+
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" }))));
|
|
27968
28592
|
}
|
|
27969
28593
|
get el() { return getElement(this); }
|
|
27970
28594
|
static get watchers() { return {
|