@pine-ds/core 4.8.0 → 4.9.1
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-icon2.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/portal-target.js +1 -0
- 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-Do70atou.js → index-BDnbr0DK.js} +1 -1
- package/dist/cjs/{index-jl_Q819j.js → index-D9iJuJCP.js} +13 -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 +4 -4
- 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 +22 -12
- package/dist/cjs/pds-box.cjs.entry.js +4 -4
- package/dist/cjs/pds-button.cjs.entry.js +58 -26
- package/dist/cjs/pds-checkbox.cjs.entry.js +16 -8
- package/dist/cjs/pds-chip.cjs.entry.js +9 -11
- package/dist/cjs/pds-combobox.cjs.entry.js +41 -11
- package/dist/cjs/pds-container.cjs.entry.js +3 -3
- package/dist/cjs/pds-copytext.cjs.entry.js +8 -7
- package/dist/cjs/pds-datepicker.cjs.entry.js +8 -45
- 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 +4 -4
- package/dist/cjs/pds-dropdown-menu-separator.cjs.entry.js +3 -3
- package/dist/cjs/pds-dropdown-menu.cjs.entry.js +5 -5
- 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 +55 -22
- 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 +16 -7
- package/dist/cjs/pds-loader.cjs.entry.js +4 -4
- package/dist/cjs/pds-modal-content.cjs.entry.js +4 -4
- 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 +13 -7
- package/dist/cjs/pds-popover.cjs.entry.js +230 -153
- 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 +67 -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 +7 -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 +31 -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 +128 -46
- package/dist/cjs/pine-core.cjs.js +3 -3
- package/dist/cjs/portal-target-e8WQ6dLx.js +70 -0
- package/dist/cjs/tabbable-BrrrGvdG.js +86 -0
- package/dist/cjs/{truncation-tooltip-BtuiXLV0.js → truncation-tooltip-DdB78RIe.js} +44 -4
- 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 +41 -9
- 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 +13 -23
- 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 -5
- package/dist/collection/components/pds-combobox/pds-combobox.css +33 -0
- package/dist/collection/components/pds-combobox/pds-combobox.js +60 -7
- 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/calendar-portal.js +1 -38
- package/dist/collection/components/pds-datepicker/pds-datepicker.js +2 -2
- 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.js +24 -2
- 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 +1 -1
- 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.css +1 -1
- package/dist/collection/components/pds-link/pds-link.js +34 -3
- package/dist/collection/components/pds-link/stories/pds-link.stories.js +51 -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 +2 -2
- 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.css +1 -1
- package/dist/collection/components/pds-modal/pds-modal.js +4 -84
- package/dist/collection/components/pds-modal/test/mock-pds-modal.js +1 -1
- package/dist/collection/components/pds-multiselect/pds-multiselect.js +9 -3
- package/dist/collection/components/pds-popover/pds-popover.css +6 -0
- package/dist/collection/components/pds-popover/pds-popover.js +226 -149
- 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 +65 -4
- 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 +3 -3
- 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 +28 -3
- package/dist/collection/components/pds-text/stories/pds-text.stories.js +16 -0
- 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.css +11 -0
- package/dist/collection/components/pds-tooltip/pds-tooltip.js +125 -42
- package/dist/collection/components/pds-tooltip/stories/pds-tooltip.stories.js +30 -0
- package/dist/collection/utils/aria-references.js +42 -0
- package/dist/collection/utils/portal-target.js +64 -0
- package/dist/collection/utils/tabbable.js +82 -0
- package/dist/collection/utils/truncation-tooltip.js +42 -3
- package/dist/docs.json +245 -8
- 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-4_RRPJTO.js} +13 -2
- package/dist/esm/{index-BWDu62Mo.js → index-DvN3tyZp.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 +4 -4
- 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 +22 -12
- package/dist/esm/pds-box.entry.js +4 -4
- package/dist/esm/pds-button.entry.js +58 -26
- package/dist/esm/pds-checkbox.entry.js +16 -8
- package/dist/esm/pds-chip.entry.js +8 -10
- package/dist/esm/pds-combobox.entry.js +41 -11
- package/dist/esm/pds-container.entry.js +3 -3
- package/dist/esm/pds-copytext.entry.js +8 -7
- package/dist/esm/pds-datepicker.entry.js +7 -44
- 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 +4 -4
- package/dist/esm/pds-dropdown-menu-separator.entry.js +3 -3
- package/dist/esm/pds-dropdown-menu.entry.js +5 -5
- 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 +55 -22
- 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 +16 -7
- package/dist/esm/pds-loader.entry.js +4 -4
- package/dist/esm/pds-modal-content.entry.js +4 -4
- 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 +13 -7
- package/dist/esm/pds-popover.entry.js +230 -153
- 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 +67 -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 +7 -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 +31 -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 +128 -46
- package/dist/esm/pine-core.js +4 -4
- package/dist/esm/portal-target-CKRzRKdO.js +66 -0
- package/dist/esm/tabbable-C6ZWpp3v.js +84 -0
- package/dist/esm/{truncation-tooltip-FaW67DiY.js → truncation-tooltip-CRSdYzpA.js} +44 -5
- 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-4_RRPJTO.js} +2 -2
- package/dist/esm-es5/{index-BWDu62Mo.js → index-DvN3tyZp.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/portal-target-CKRzRKdO.js +1 -0
- package/dist/esm-es5/tabbable-C6ZWpp3v.js +1 -0
- package/dist/esm-es5/truncation-tooltip-CRSdYzpA.js +1 -0
- package/dist/pine-core/index.esm.js +1 -1
- package/dist/pine-core/{p-9880d251.system.entry.js → p-01f1cdaf.system.entry.js} +1 -1
- package/dist/pine-core/{p-138b278b.entry.js → p-07323107.entry.js} +1 -1
- package/dist/pine-core/p-08b8e941.entry.js +1 -0
- package/dist/pine-core/p-0d5f0ab5.system.entry.js +1 -0
- package/dist/pine-core/{p-8c8cc079.system.entry.js → p-1415c988.system.entry.js} +1 -1
- package/dist/pine-core/{p-9109b90a.entry.js → p-143b33a6.entry.js} +1 -1
- package/dist/pine-core/{p-b9d145f8.system.entry.js → p-14dedf01.system.entry.js} +1 -1
- package/dist/pine-core/{p-80e6f3a0.system.entry.js → p-19cf1d91.system.entry.js} +1 -1
- package/dist/pine-core/p-1ca8d183.entry.js +1 -0
- package/dist/pine-core/p-1cc39908.system.entry.js +1 -0
- package/dist/pine-core/p-1e3ef425.entry.js +1 -0
- package/dist/pine-core/{p-b914dde8.entry.js → p-1f62bb71.entry.js} +2 -2
- package/dist/pine-core/p-20079552.system.entry.js +1 -0
- package/dist/pine-core/p-2a18852f.entry.js +1 -0
- package/dist/pine-core/{p-ca4ee736.system.entry.js → p-2b9622c1.system.entry.js} +1 -1
- package/dist/pine-core/p-2dd30d12.entry.js +1 -0
- package/dist/pine-core/{p-cccfe60f.system.entry.js → p-3306dc5a.system.entry.js} +1 -1
- package/dist/pine-core/{p-BGLP3keB.js → p-35s7h-dk.js} +1 -1
- package/dist/pine-core/{p-8c588ca0.entry.js → p-3610cb3b.entry.js} +1 -1
- package/dist/pine-core/p-37718637.entry.js +1 -0
- package/dist/pine-core/p-383d84f4.entry.js +2 -0
- package/dist/pine-core/p-39276663.entry.js +1 -0
- package/dist/pine-core/{p-62433f32.entry.js → p-39e57657.entry.js} +1 -1
- package/dist/pine-core/p-3c229091.entry.js +1 -0
- package/dist/pine-core/p-3d34b967.system.entry.js +1 -0
- package/dist/pine-core/p-3e30a761.entry.js +1 -0
- package/dist/pine-core/{p-7a5b21d2.system.entry.js → p-3f8bd3fb.system.entry.js} +1 -1
- package/dist/pine-core/p-42d43c3f.system.entry.js +1 -0
- package/dist/pine-core/{p-f029b7da.system.entry.js → p-42f70f93.system.entry.js} +1 -1
- package/dist/pine-core/{p-d3d69ca4.system.entry.js → p-4a90b9c8.system.entry.js} +1 -1
- package/dist/pine-core/{p-ca0a8f5c.entry.js → p-4cfe922b.entry.js} +1 -1
- package/dist/pine-core/p-4d1a8803.entry.js +1 -0
- package/dist/pine-core/p-4d47023c.system.entry.js +1 -0
- package/dist/pine-core/p-4d98bc0c.system.entry.js +1 -0
- package/dist/pine-core/{p-c97bfac9.entry.js → p-50ddadbf.entry.js} +1 -1
- package/dist/pine-core/{p-0913f696.system.entry.js → p-548bce53.system.entry.js} +1 -1
- package/dist/pine-core/p-54f1e86f.system.entry.js +1 -0
- package/dist/pine-core/{p-631f5bcc.entry.js → p-590df41a.entry.js} +1 -1
- package/dist/pine-core/p-5946203c.entry.js +1 -0
- package/dist/pine-core/{p-11d98408.system.entry.js → p-5f181694.system.entry.js} +1 -1
- package/dist/pine-core/p-60a30975.system.entry.js +1 -0
- package/dist/pine-core/{p-9ab95438.entry.js → p-61cfdbb2.entry.js} +1 -1
- package/dist/pine-core/p-62aa6a78.system.entry.js +1 -0
- package/dist/pine-core/{p-ecc7a531.system.entry.js → p-63f85859.system.entry.js} +1 -1
- package/dist/pine-core/p-64bcb378.entry.js +1 -0
- package/dist/pine-core/{p-bdac8f2b.entry.js → p-67999353.entry.js} +1 -1
- package/dist/pine-core/{p-cb6a3e4c.system.entry.js → p-67f795d5.system.entry.js} +1 -1
- package/dist/pine-core/p-6a1aa8d3.entry.js +1 -0
- package/dist/pine-core/p-6f4ab1ea.system.entry.js +1 -0
- package/dist/pine-core/{p-acca5f7b.system.entry.js → p-724baba3.system.entry.js} +1 -1
- package/dist/pine-core/p-72659a0e.system.entry.js +1 -0
- package/dist/pine-core/{p-4bfc8b3e.system.entry.js → p-73efb1ed.system.entry.js} +1 -1
- package/dist/pine-core/p-7a51f15e.entry.js +1 -0
- package/dist/pine-core/p-7b978fff.system.entry.js +1 -0
- package/dist/pine-core/p-8436cbfb.entry.js +1 -0
- package/dist/pine-core/p-849ec281.system.entry.js +1 -0
- package/dist/pine-core/p-87a32ded.system.entry.js +1 -0
- package/dist/pine-core/p-89d38a82.system.entry.js +1 -0
- package/dist/pine-core/p-8ade17ce.entry.js +1 -0
- package/dist/pine-core/{p-4d03d1e2.system.entry.js → p-8afd5f5b.system.entry.js} +1 -1
- package/dist/pine-core/p-8e7f75e6.entry.js +1 -0
- package/dist/pine-core/{p-8f531063.entry.js → p-8fb520df.entry.js} +1 -1
- package/dist/pine-core/{p-9df5e204.entry.js → p-92115e88.entry.js} +1 -1
- package/dist/pine-core/p-93fd7dd8.system.entry.js +1 -0
- package/dist/pine-core/p-947582e1.entry.js +1 -0
- package/dist/pine-core/{p-2ac2457b.system.entry.js → p-94c9b7d1.system.entry.js} +1 -1
- package/dist/pine-core/p-973c3ac0.entry.js +1 -0
- package/dist/pine-core/p-97653e60.entry.js +1 -0
- package/dist/pine-core/{p-55224683.entry.js → p-97b73359.entry.js} +1 -1
- package/dist/pine-core/{p-b1548a20.entry.js → p-99530cb5.entry.js} +1 -1
- package/dist/pine-core/p-9a776443.entry.js +1 -0
- package/dist/pine-core/p-9b32727a.system.entry.js +1 -0
- package/dist/pine-core/{p-CGRdQc49.system.js → p-BK1sLRfg.system.js} +2 -2
- 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-C6ZWpp3v.js +1 -0
- package/dist/pine-core/{p-Cy8cvR7I.system.js → p-CANeE7Ss.system.js} +1 -1
- package/dist/pine-core/p-CKRzRKdO.js +1 -0
- package/dist/pine-core/{p-XW4H0W6i.system.js → p-CNXspDYs.system.js} +1 -1
- package/dist/pine-core/{p-BPqJgIq6.js → p-Cuc0DYlm.js} +1 -1
- package/dist/pine-core/p-DQyF6v9Q.system.js +1 -0
- package/dist/pine-core/{p-BWDu62Mo.js → p-DvN3tyZp.js} +1 -1
- package/dist/pine-core/p-DwQ5Tjis.js +1 -0
- package/dist/pine-core/{p-CmSJytt1.js → p-M31tvpDN.js} +2 -2
- package/dist/pine-core/p-XK45dzWR.system.js +1 -0
- package/dist/pine-core/{p-1dc5a7e0.system.entry.js → p-a09c9c5e.system.entry.js} +1 -1
- package/dist/pine-core/p-a4ce12ef.entry.js +1 -0
- package/dist/pine-core/{p-57a2f927.entry.js → p-a594c41f.entry.js} +1 -1
- package/dist/pine-core/p-a9d96e22.entry.js +1 -0
- package/dist/pine-core/{p-047433a4.system.entry.js → p-ad5208a4.system.entry.js} +1 -1
- package/dist/pine-core/p-b3d4f97a.system.entry.js +3 -0
- package/dist/pine-core/{p-0b71ecb6.system.entry.js → p-bcc378ba.system.entry.js} +2 -2
- package/dist/pine-core/p-bd7dc317.system.entry.js +1 -0
- package/dist/pine-core/p-beb7a430.entry.js +1 -0
- package/dist/pine-core/p-bfa34194.entry.js +1 -0
- package/dist/pine-core/{p-5870b092.system.entry.js → p-c2afe4f3.system.entry.js} +1 -1
- package/dist/pine-core/p-c5e1eb3c.system.entry.js +1 -0
- package/dist/pine-core/p-c7a53c4f.entry.js +1 -0
- package/dist/pine-core/{p-5cfd4d41.system.entry.js → p-c8a0b562.system.entry.js} +1 -1
- package/dist/pine-core/{p-f1702281.entry.js → p-c9ae7964.entry.js} +1 -1
- package/dist/pine-core/{p-db17c626.system.entry.js → p-cb9baf78.system.entry.js} +1 -1
- package/dist/pine-core/{p-e5420660.entry.js → p-ce9fa14b.entry.js} +1 -1
- package/dist/pine-core/{p-332590c7.system.entry.js → p-d018dc60.system.entry.js} +1 -1
- package/dist/pine-core/p-d47b2a6a.system.entry.js +1 -0
- package/dist/pine-core/{p-b75b0d09.system.entry.js → p-d48fe5a0.system.entry.js} +1 -1
- package/dist/pine-core/p-d6f338e0.entry.js +1 -0
- package/dist/pine-core/{p-8191498f.system.entry.js → p-d920d759.system.entry.js} +1 -1
- package/dist/pine-core/{p-26642718.entry.js → p-d9719e37.entry.js} +1 -1
- package/dist/pine-core/{p-c483997a.entry.js → p-db7fb5a3.entry.js} +1 -1
- package/dist/pine-core/{p-9713fb36.entry.js → p-e1d1b5d8.entry.js} +1 -1
- package/dist/pine-core/p-e3de6a1d.entry.js +1 -0
- package/dist/pine-core/{p-d2c91e7a.entry.js → p-e7002cee.entry.js} +1 -1
- package/dist/pine-core/{p-86040cac.system.entry.js → p-e82f758f.system.entry.js} +1 -1
- package/dist/pine-core/p-e84fa9ed.entry.js +1 -0
- package/dist/pine-core/{p-ee0e30bf.system.entry.js → p-eb4f0daa.system.entry.js} +1 -1
- package/dist/pine-core/p-eeYeEogd.system.js +1 -0
- package/dist/pine-core/{p-0af0d752.system.entry.js → p-eecd9ad8.system.entry.js} +1 -1
- package/dist/pine-core/p-ef0eba9b.system.entry.js +1 -0
- package/dist/pine-core/p-ef3a855f.system.entry.js +1 -0
- package/dist/pine-core/{p-717323e4.entry.js → p-f018af99.entry.js} +1 -1
- package/dist/pine-core/{p-121612a7.system.entry.js → p-f11cce27.system.entry.js} +1 -1
- package/dist/pine-core/{p-4fd454f6.entry.js → p-f6f4fd42.entry.js} +1 -1
- package/dist/pine-core/{p-a939b471.entry.js → p-f71d71ca.entry.js} +1 -1
- package/dist/pine-core/p-f9063262.system.entry.js +1 -0
- package/dist/pine-core/p-f99bd77f.entry.js +1 -0
- package/dist/pine-core/{p-ClDiSG97.system.js → p-vFsJv75D.system.js} +1 -1
- package/dist/pine-core/p-wB2y8gR7.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 +2 -2
- 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-datepicker/calendar-portal.d.ts +0 -7
- package/dist/types/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.d.ts +7 -0
- package/dist/types/components/pds-link/pds-link.d.ts +8 -0
- package/dist/types/components/pds-popover/pds-popover.d.ts +44 -20
- package/dist/types/components/pds-radio/pds-radio.d.ts +9 -3
- package/dist/types/components/pds-radio-group/pds-radio-group.d.ts +8 -0
- package/dist/types/components/pds-select/pds-select.d.ts +32 -4
- package/dist/types/components/pds-text/pds-text.d.ts +4 -0
- package/dist/types/components/pds-toast/pds-toast.d.ts +9 -0
- package/dist/types/components/pds-tooltip/pds-tooltip.d.ts +32 -0
- package/dist/types/components.d.ts +98 -10
- package/dist/types/utils/aria-references.d.ts +24 -0
- package/dist/types/utils/portal-target.d.ts +17 -0
- package/dist/types/utils/tabbable.d.ts +2 -0
- package/dist/types/utils/truncation-tooltip.d.ts +5 -2
- package/dist/vscode.html-data.json +82 -10
- package/hydrate/index.js +971 -408
- package/hydrate/index.mjs +971 -408
- package/package.json +2 -2
- package/dist/esm-es5/truncation-tooltip-FaW67DiY.js +0 -1
- package/dist/pine-core/p-0092444c.system.entry.js +0 -1
- package/dist/pine-core/p-00a50de5.system.entry.js +0 -3
- package/dist/pine-core/p-049f126a.entry.js +0 -1
- package/dist/pine-core/p-089c3e60.entry.js +0 -1
- package/dist/pine-core/p-158b2f51.entry.js +0 -1
- package/dist/pine-core/p-17f97f1a.entry.js +0 -1
- package/dist/pine-core/p-19ba2788.system.entry.js +0 -1
- package/dist/pine-core/p-208c7dbf.entry.js +0 -1
- package/dist/pine-core/p-25ea48d1.entry.js +0 -1
- package/dist/pine-core/p-295f64ea.entry.js +0 -1
- package/dist/pine-core/p-29cd4113.system.entry.js +0 -1
- package/dist/pine-core/p-2cb5483a.system.entry.js +0 -1
- package/dist/pine-core/p-36cb4bf6.entry.js +0 -1
- package/dist/pine-core/p-3c977d8d.system.entry.js +0 -1
- package/dist/pine-core/p-3d51891a.entry.js +0 -1
- package/dist/pine-core/p-432d5ec7.entry.js +0 -1
- package/dist/pine-core/p-44f546ae.entry.js +0 -1
- package/dist/pine-core/p-5442d983.system.entry.js +0 -1
- package/dist/pine-core/p-5833a072.system.entry.js +0 -1
- package/dist/pine-core/p-602c197f.entry.js +0 -1
- package/dist/pine-core/p-719542e1.system.entry.js +0 -1
- package/dist/pine-core/p-73f931a1.entry.js +0 -1
- package/dist/pine-core/p-75ee0403.entry.js +0 -1
- package/dist/pine-core/p-77395d62.system.entry.js +0 -1
- package/dist/pine-core/p-7a287635.system.entry.js +0 -1
- package/dist/pine-core/p-875b0436.system.entry.js +0 -1
- package/dist/pine-core/p-884cb31d.system.entry.js +0 -1
- package/dist/pine-core/p-8987fd45.system.entry.js +0 -1
- package/dist/pine-core/p-8cc302aa.system.entry.js +0 -1
- package/dist/pine-core/p-8e3ff75d.entry.js +0 -1
- package/dist/pine-core/p-90d5edc6.entry.js +0 -1
- package/dist/pine-core/p-91f60173.entry.js +0 -1
- package/dist/pine-core/p-9265497e.system.entry.js +0 -1
- package/dist/pine-core/p-94593f20.system.entry.js +0 -1
- package/dist/pine-core/p-99459e27.entry.js +0 -1
- package/dist/pine-core/p-99fdf70f.entry.js +0 -1
- package/dist/pine-core/p-9aaedded.entry.js +0 -1
- package/dist/pine-core/p-9dcd2cdb.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-D04W0cAO.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-a826f290.entry.js +0 -1
- package/dist/pine-core/p-acce8eb2.entry.js +0 -1
- package/dist/pine-core/p-aff411d0.entry.js +0 -1
- package/dist/pine-core/p-b182f806.entry.js +0 -2
- package/dist/pine-core/p-bb68431a.entry.js +0 -1
- package/dist/pine-core/p-be9b6e63.system.entry.js +0 -1
- package/dist/pine-core/p-bf30dec0.entry.js +0 -1
- package/dist/pine-core/p-c4e12f0a.entry.js +0 -1
- package/dist/pine-core/p-e0917a26.entry.js +0 -1
- package/dist/pine-core/p-e836a041.entry.js +0 -1
- package/dist/pine-core/p-ea340c55.system.entry.js +0 -1
- package/dist/pine-core/p-ea4d4741.system.entry.js +0 -1
- package/dist/pine-core/p-ea8f5d29.entry.js +0 -1
- package/dist/pine-core/p-eaf85be6.system.entry.js +0 -1
- package/dist/pine-core/p-ef13f665.system.entry.js +0 -1
- package/dist/pine-core/p-f3067d90.system.entry.js +0 -1
- package/dist/pine-core/p-jrkGLEPe.js +0 -1
package/hydrate/index.mjs
CHANGED
|
@@ -5646,7 +5646,7 @@ var setScopedSSR = (opts) => {
|
|
|
5646
5646
|
var needsScopedSSR = () => scopedSSR;
|
|
5647
5647
|
var scopedSSR = false;
|
|
5648
5648
|
|
|
5649
|
-
const pdsModalCss$1 = () => `.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}`;
|
|
5649
|
+
const pdsModalCss$1 = () => `.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 .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}`;
|
|
5650
5650
|
|
|
5651
5651
|
/**
|
|
5652
5652
|
* Mock PdsModal component for testing purposes
|
|
@@ -5730,7 +5730,7 @@ class MockPdsModal {
|
|
|
5730
5730
|
'pds-modal__backdrop': true,
|
|
5731
5731
|
'open': this.open,
|
|
5732
5732
|
};
|
|
5733
|
-
return (hAsync("div", { key: '
|
|
5733
|
+
return (hAsync("div", { key: '6e165638f8f4699fa242f3045155c392f9f529b2', class: backdropClasses }, hAsync("div", { key: 'f4b8db3093a6fbe24be8035a826e8289815e4afb', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, hAsync("div", { key: 'fa846f66e539ea0d1b73820abb991fdb02902499', class: "pds-modal__header" }, hAsync("slot", { key: '0faaa6858fecd9d0c48c7f183d4f2101c1bed785', name: "header" })), hAsync("div", { key: 'a896fba9494fcdee9dde7e0d9f7baf708095ee6f', class: "pds-modal-content" }, hAsync("slot", { key: '4091e70b2a744c36c8249aa8664937d227145c14' })), hAsync("div", { key: 'cbf4bdd80cc3575d8c7e2e0e2078e28c4f185920', class: "pds-modal__footer" }, hAsync("slot", { key: '56ed3a26c36fd70d7ec9f033951d1b1d9e044957', name: "footer" })))));
|
|
5734
5734
|
}
|
|
5735
5735
|
get el() { return getElement(this); }
|
|
5736
5736
|
static get style() { return pdsModalCss$1(); }
|
|
@@ -5752,7 +5752,7 @@ class MockPdsModal {
|
|
|
5752
5752
|
}; }
|
|
5753
5753
|
}
|
|
5754
5754
|
|
|
5755
|
-
/* pds-icons v10.
|
|
5755
|
+
/* pds-icons v10.8.0, ES Modules */
|
|
5756
5756
|
|
|
5757
5757
|
const addCircle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m11-5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1'/></svg>";
|
|
5758
5758
|
const calendarSimple = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M8 1a1 1 0 0 1 1 1v1h6V2a1 1 0 1 1 2 0v1.002c.476.003.891.013 1.252.042.562.046 1.079.145 1.564.392a4 4 0 0 1 1.748 1.748c.247.485.346 1.002.392 1.564C22 7.29 22 7.954 22 8.758v8.483c0 .805 0 1.47-.044 2.01-.046.563-.145 1.08-.392 1.565a4 4 0 0 1-1.748 1.748c-.485.247-1.002.346-1.564.392-.541.044-1.206.044-2.01.044H7.758c-.805 0-1.47 0-2.01-.044-.563-.046-1.08-.145-1.565-.392a4 4 0 0 1-1.748-1.748c-.247-.485-.346-1.002-.392-1.564C2 18.71 2 18.046 2 17.242V8.758c0-.805 0-1.47.044-2.01.046-.563.145-1.08.392-1.565a4 4 0 0 1 1.748-1.748c.485-.247 1.002-.346 1.564-.392.361-.03.777-.04 1.252-.042V2a1 1 0 0 1 1-1M7 5.002c-.446.003-.795.012-1.089.036-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819C4 7.361 4 7.943 4 8.8V9h16v-.2c0-.857 0-1.439-.038-1.889-.035-.438-.1-.663-.18-.819a2 2 0 0 0-.874-.874c-.156-.08-.38-.145-.819-.18A15 15 0 0 0 17 5.002V6a1 1 0 1 1-2 0V5H9v1a1 1 0 1 1-2 0zM20 11H4v6.2c0 .857 0 1.439.038 1.889.035.438.1.663.18.819a2 2 0 0 0 .874.874c.156.08.38.145.819.18C6.361 21 6.943 21 7.8 21h8.4c.857 0 1.439 0 1.889-.038.438-.035.663-.1.819-.18a2 2 0 0 0 .874-.874c.08-.156.145-.38.18-.819.037-.45.038-1.032.038-1.889z'/></svg>";
|
|
@@ -5830,8 +5830,16 @@ class PdsAccordion {
|
|
|
5830
5830
|
|
|
5831
5831
|
const pdsAlertTokensCss = () => `:host{--pine-alert-color-background:var(--pine-color-grey-150);--pine-alert-color-border:var(--pine-color-grey-300);--pine-alert-color-dismiss:var(--pine-color-grey-900);--pine-alert-color-dismiss-hover:var(--pine-color-grey-300);--pine-alert-color-icon:var(--pine-color-grey-700);--pine-alert-color-link:var(--pine-color-grey-900);--pine-alert-color-link-hover:var(--pine-color-grey-950);--pine-alert-color-text:var(--pine-color-grey-950);--pine-alert-color-danger-background:var(--pine-color-red-150);--pine-alert-color-danger-border:var(--pine-color-red-300);--pine-alert-color-danger-dismiss:var(--pine-color-red-900);--pine-alert-color-danger-dismiss-hover:var(--pine-color-red-300);--pine-alert-color-danger-icon:var(--pine-color-red-700);--pine-alert-color-danger-link:var(--pine-color-red-900);--pine-alert-color-danger-link-hover:var(--pine-color-red-950);--pine-alert-color-danger-text:var(--pine-color-red-950);--pine-alert-color-info-background:var(--pine-color-blue-150);--pine-alert-color-info-border:var(--pine-color-blue-300);--pine-alert-color-info-dismiss:var(--pine-color-blue-900);--pine-alert-color-info-dismiss-hover:var(--pine-color-blue-300);--pine-alert-color-info-icon:var(--pine-color-blue-700);--pine-alert-color-info-link:var(--pine-color-blue-900);--pine-alert-color-info-link-hover:var(--pine-color-blue-950);--pine-alert-color-info-text:var(--pine-color-blue-950);--pine-alert-color-success-background:var(--pine-color-green-150);--pine-alert-color-success-border:var(--pine-color-green-300);--pine-alert-color-success-dismiss:var(--pine-color-green-900);--pine-alert-color-success-dismiss-hover:var(--pine-color-green-300);--pine-alert-color-success-icon:var(--pine-color-green-700);--pine-alert-color-success-link:var(--pine-color-green-900);--pine-alert-color-success-link-hover:var(--pine-color-green-950);--pine-alert-color-success-text:var(--pine-color-green-950);--pine-alert-color-warning-background:var(--pine-color-yellow-150);--pine-alert-color-warning-border:var(--pine-color-yellow-300);--pine-alert-color-warning-dismiss:var(--pine-color-yellow-900);--pine-alert-color-warning-dismiss-hover:var(--pine-color-yellow-300);--pine-alert-color-warning-icon:var(--pine-color-yellow-700);--pine-alert-color-warning-link:var(--pine-color-yellow-900);--pine-alert-color-warning-link-hover:var(--pine-color-yellow-950);--pine-alert-color-warning-text:var(--pine-color-yellow-950)}:host-context([data-theme=dark]){--pine-alert-color-background:var(--pine-color-grey-800);--pine-alert-color-border:var(--pine-color-grey-600);--pine-alert-color-dismiss:var(--pine-color-grey-200);--pine-alert-color-dismiss-hover:var(--pine-color-grey-700);--pine-alert-color-icon:var(--pine-color-grey-300);--pine-alert-color-link:var(--pine-color-grey-300);--pine-alert-color-link-hover:var(--pine-color-grey-050);--pine-alert-color-text:var(--pine-color-grey-100);--pine-alert-color-danger-background:var(--pine-color-red-900);--pine-alert-color-danger-border:var(--pine-color-red-800);--pine-alert-color-danger-dismiss:var(--pine-color-red-200);--pine-alert-color-danger-dismiss-hover:var(--pine-color-red-800);--pine-alert-color-danger-icon:var(--pine-color-red-400);--pine-alert-color-danger-link:var(--pine-color-red-300);--pine-alert-color-danger-link-hover:var(--pine-color-red-200);--pine-alert-color-danger-text:var(--pine-color-red-100);--pine-alert-color-info-background:var(--pine-color-blue-900);--pine-alert-color-info-border:var(--pine-color-blue-800);--pine-alert-color-info-dismiss:var(--pine-color-blue-200);--pine-alert-color-info-dismiss-hover:var(--pine-color-blue-800);--pine-alert-color-info-icon:var(--pine-color-blue-400);--pine-alert-color-info-link:var(--pine-color-blue-300);--pine-alert-color-info-link-hover:var(--pine-color-blue-200);--pine-alert-color-info-text:var(--pine-color-blue-100);--pine-alert-color-success-background:var(--pine-color-green-900);--pine-alert-color-success-border:var(--pine-color-green-800);--pine-alert-color-success-dismiss:var(--pine-color-green-200);--pine-alert-color-success-dismiss-hover:var(--pine-color-green-800);--pine-alert-color-success-icon:var(--pine-color-green-400);--pine-alert-color-success-link:var(--pine-color-green-300);--pine-alert-color-success-link-hover:var(--pine-color-green-200);--pine-alert-color-success-text:var(--pine-color-green-100);--pine-alert-color-warning-background:var(--pine-color-yellow-900);--pine-alert-color-warning-border:var(--pine-color-yellow-800);--pine-alert-color-warning-dismiss:var(--pine-color-yellow-200);--pine-alert-color-warning-dismiss-hover:var(--pine-color-yellow-800);--pine-alert-color-warning-icon:var(--pine-color-yellow-400);--pine-alert-color-warning-link:var(--pine-color-yellow-300);--pine-alert-color-warning-link-hover:var(--pine-color-yellow-200);--pine-alert-color-warning-text:var(--pine-color-yellow-100)}`;
|
|
5832
5832
|
|
|
5833
|
-
const pdsAlertCss = () => `:host{--pds-context-link-color:var(--pine-alert-color-link);--pds-context-link-color-hover:var(--pine-alert-color-link-hover);display:block;line-height:1;width:100%}:host([variant=danger]){--pds-context-link-color:var(--pine-alert-color-danger-link);--pds-context-link-color-hover:var(--pine-alert-color-danger-link-hover)}:host([variant=info]){--pds-context-link-color:var(--pine-alert-color-info-link);--pds-context-link-color-hover:var(--pine-alert-color-info-link-hover)}:host([variant=success]){--pds-context-link-color:var(--pine-alert-color-success-link);--pds-context-link-color-hover:var(--pine-alert-color-success-link-hover)}:host([variant=warning]){--pds-context-link-color:var(--pine-alert-color-warning-link);--pds-context-link-color-hover:var(--pine-alert-color-warning-link-hover)}.pds-alert__container{--pds-alert-icon-size:var(--pine-dimension-sm);--pds-alert-border-dismiss-outline:2px solid var(--pds-alert-color-dismiss);--pds-alert-background:var(--pine-alert-color-background);--pds-alert-border-color:var(--pine-alert-color-border);--pds-alert-color-icon:var(--pine-alert-color-icon);--pds-alert-color-text:var(--pine-alert-color-text);--pds-alert-color-dismiss:var(--pine-alert-color-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-dismiss-hover);padding:var(--pine-dimension-250)}.pds-alert__container--danger{--pds-alert-background:var(--pine-alert-color-danger-background);--pds-alert-border-color:var(--pine-alert-color-danger-border);--pds-alert-color-icon:var(--pine-alert-color-danger-icon);--pds-alert-color-text:var(--pine-alert-color-danger-text);--pds-alert-color-dismiss:var(--pine-alert-color-danger-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-danger-dismiss-hover)}.pds-alert__container--info{--pds-alert-background:var(--pine-alert-color-info-background);--pds-alert-border-color:var(--pine-alert-color-info-border);--pds-alert-color-icon:var(--pine-alert-color-info-icon);--pds-alert-color-text:var(--pine-alert-color-info-text);--pds-alert-color-dismiss:var(--pine-alert-color-info-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-info-dismiss-hover)}.pds-alert__container--success{--pds-alert-background:var(--pine-alert-color-success-background);--pds-alert-border-color:var(--pine-alert-color-success-border);--pds-alert-color-icon:var(--pine-alert-color-success-icon);--pds-alert-color-text:var(--pine-alert-color-success-text);--pds-alert-color-dismiss:var(--pine-alert-color-success-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-success-dismiss-hover)}.pds-alert__container--warning{--pds-alert-background:var(--pine-alert-color-warning-background);--pds-alert-border-color:var(--pine-alert-color-warning-border);--pds-alert-color-icon:var(--pine-alert-color-warning-icon);--pds-alert-color-text:var(--pine-alert-color-warning-text);--pds-alert-color-dismiss:var(--pine-alert-color-warning-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-warning-dismiss-hover)}.pds-alert__icon{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-alert__icon--small{-webkit-margin-before:0;margin-block-start:0}.pds-alert__content-wrapper{-ms-flex:1;flex:1;min-width:0;overflow:hidden;width:100%}.pds-alert__dismiss{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;height:var(--pine-dimension-250);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs);width:var(--pine-dimension-250)}.pds-alert__dismiss:hover{background:var(--pds-alert-background-dismiss-hover);opacity:0.8}.pds-alert__dismiss:focus-visible{outline:var(--pds-alert-border-dismiss-outline)}.pds-alert__description--small{-ms-flex:1 1 auto;flex:1 1 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-alert__actions{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-alert__actions--small{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}`;
|
|
5833
|
+
const pdsAlertCss = () => `:host{--pds-context-link-color:var(--pine-alert-color-link);--pds-context-link-color-hover:var(--pine-alert-color-link-hover);display:block;line-height:1;width:100%}:host([variant=danger]){--pds-context-link-color:var(--pine-alert-color-danger-link);--pds-context-link-color-hover:var(--pine-alert-color-danger-link-hover)}:host([variant=info]){--pds-context-link-color:var(--pine-alert-color-info-link);--pds-context-link-color-hover:var(--pine-alert-color-info-link-hover)}:host([variant=success]){--pds-context-link-color:var(--pine-alert-color-success-link);--pds-context-link-color-hover:var(--pine-alert-color-success-link-hover)}:host([variant=warning]){--pds-context-link-color:var(--pine-alert-color-warning-link);--pds-context-link-color-hover:var(--pine-alert-color-warning-link-hover)}.pds-alert__container{--pds-alert-icon-size:var(--pine-dimension-sm);--pds-alert-border-dismiss-outline:2px solid var(--pds-alert-color-dismiss);--pds-alert-background:var(--pine-alert-color-background);--pds-alert-border-color:var(--pine-alert-color-border);--pds-alert-color-icon:var(--pine-alert-color-icon);--pds-alert-color-text:var(--pine-alert-color-text);--pds-alert-color-dismiss:var(--pine-alert-color-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-dismiss-hover);padding:var(--pine-dimension-250)}.pds-alert__container--danger{--pds-alert-background:var(--pine-alert-color-danger-background);--pds-alert-border-color:var(--pine-alert-color-danger-border);--pds-alert-color-icon:var(--pine-alert-color-danger-icon);--pds-alert-color-text:var(--pine-alert-color-danger-text);--pds-alert-color-dismiss:var(--pine-alert-color-danger-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-danger-dismiss-hover)}.pds-alert__container--info{--pds-alert-background:var(--pine-alert-color-info-background);--pds-alert-border-color:var(--pine-alert-color-info-border);--pds-alert-color-icon:var(--pine-alert-color-info-icon);--pds-alert-color-text:var(--pine-alert-color-info-text);--pds-alert-color-dismiss:var(--pine-alert-color-info-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-info-dismiss-hover)}.pds-alert__container--success{--pds-alert-background:var(--pine-alert-color-success-background);--pds-alert-border-color:var(--pine-alert-color-success-border);--pds-alert-color-icon:var(--pine-alert-color-success-icon);--pds-alert-color-text:var(--pine-alert-color-success-text);--pds-alert-color-dismiss:var(--pine-alert-color-success-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-success-dismiss-hover)}.pds-alert__container--warning{--pds-alert-background:var(--pine-alert-color-warning-background);--pds-alert-border-color:var(--pine-alert-color-warning-border);--pds-alert-color-icon:var(--pine-alert-color-warning-icon);--pds-alert-color-text:var(--pine-alert-color-warning-text);--pds-alert-color-dismiss:var(--pine-alert-color-warning-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-warning-dismiss-hover)}.pds-alert__icon{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-alert__icon--small{-webkit-margin-before:0;margin-block-start:0}.pds-alert__content-wrapper{-ms-flex:1;flex:1;min-width:0;overflow:hidden;width:100%}.pds-alert__dismiss{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;height:var(--pine-dimension-250);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs);width:var(--pine-dimension-250)}.pds-alert__dismiss:hover{background:var(--pds-alert-background-dismiss-hover);opacity:0.8}.pds-alert__dismiss:focus-visible{outline:var(--pds-alert-border-dismiss-outline)}.pds-alert__description--small{-ms-flex:1 1 auto;flex:1 1 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-alert__actions{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-alert__actions--small{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
|
|
5834
5834
|
|
|
5835
|
+
// What each variant announces when `severityLabel` isn't set. The `default`
|
|
5836
|
+
// variant has no severity.
|
|
5837
|
+
const SEVERITY_LABELS = {
|
|
5838
|
+
danger: 'Error',
|
|
5839
|
+
info: 'Info',
|
|
5840
|
+
success: 'Success',
|
|
5841
|
+
warning: 'Warning',
|
|
5842
|
+
};
|
|
5835
5843
|
/**
|
|
5836
5844
|
* @slot actions - Slot for alert actions.
|
|
5837
5845
|
* @part dismiss
|
|
@@ -5885,7 +5893,12 @@ class PdsAlert {
|
|
|
5885
5893
|
}
|
|
5886
5894
|
return (hAsync("div", null, hAsync("pds-text", { class: "pds-alert__description", color: "var(--pds-alert-color-text)", tag: "p" }, hAsync("slot", null)), this.hasActionsContent && this.renderActions(false)));
|
|
5887
5895
|
}
|
|
5896
|
+
severityText() {
|
|
5897
|
+
var _a;
|
|
5898
|
+
return (_a = this.severityLabel) !== null && _a !== void 0 ? _a : SEVERITY_LABELS[this.variant];
|
|
5899
|
+
}
|
|
5888
5900
|
render() {
|
|
5901
|
+
const severity = this.severityText();
|
|
5889
5902
|
const iconMap = {
|
|
5890
5903
|
danger: 'warning-filled',
|
|
5891
5904
|
default: 'info-circle-filled',
|
|
@@ -5895,7 +5908,7 @@ class PdsAlert {
|
|
|
5895
5908
|
};
|
|
5896
5909
|
// Get the icon name based on the current variant
|
|
5897
5910
|
const iconName = iconMap[this.variant] || iconMap.default;
|
|
5898
|
-
return (hAsync(Host, { key: '
|
|
5911
|
+
return (hAsync(Host, { key: 'd487419289ef352f63e7861fb21f42aa243ee526', class: "pds-alert", id: this.componentId, variant: this.variant }, hAsync("pds-box", { key: '0ecd6e25d4163d41055be53e88f6d332e56e1ed8', class: `pds-alert__container pds-alert__container--${this.variant}`, "background-color": "var(--pds-alert-background)", "border-color": "var(--pds-alert-border-color)", "border-radius": "md", border: true, display: "block" }, hAsync("pds-box", { key: '4cca87bd3b9758e9830eddec25c9fd3e8c06a44d', gap: "sm", display: "flex", "align-items": this.small ? "center" : undefined }, severity && hAsync("span", { key: 'b076475ed4a0bc2db09df84d6530db0e4e098daf', class: "visually-hidden" }, severity), !this.hideIcon && (hAsync("pds-icon", { key: 'e8efc683c4f84e22fac8729c0c476c817b33f3e6', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)", "aria-hidden": "true" })), hAsync("pds-box", { key: 'f3ff29ce778f2e8bfb0d0a3e6a732714ce22e8ad', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (hAsync("pds-text", { key: 'c00d44fe496e8aae699ac740428e6e523c0c8d0a', class: "pds-alert__heading", color: "var(--pds-alert-color-text)", size: "h5", tag: "h3", weight: "medium" }, this.heading)), this.renderContent()), this.dismissible && (hAsync("button", { key: 'd770590cecc3b27e1dd2750bbdfa07209dbb017d', class: "pds-alert__dismiss", type: "button", part: "dismiss", "aria-label": this.dismissLabel, onClick: this.handleCloseClick }, hAsync("pds-icon", { key: '9d79c27c829662dbeecb30dfad806f345eeb6c67', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
|
|
5899
5912
|
}
|
|
5900
5913
|
get el() { return getElement(this); }
|
|
5901
5914
|
static get style() { return pdsAlertTokensCss() + pdsAlertCss(); }
|
|
@@ -5910,6 +5923,7 @@ class PdsAlert {
|
|
|
5910
5923
|
"hideIcon": [4, "hide-icon"],
|
|
5911
5924
|
"variant": [1],
|
|
5912
5925
|
"dismissLabel": [1, "dismiss-label"],
|
|
5926
|
+
"severityLabel": [1, "severity-label"],
|
|
5913
5927
|
"hasActionsContent": [32]
|
|
5914
5928
|
},
|
|
5915
5929
|
"$listeners$": undefined,
|
|
@@ -5961,6 +5975,8 @@ function restoreReflectedDefault(el, attr, value, defaultValue) {
|
|
|
5961
5975
|
|
|
5962
5976
|
const pdsAvatarCss = () => `:host{display:inline-block}div{--color-background-container:var(--pine-color-background-container-hover);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-dimension-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-none)}.pds-avatar__button:focus-visible{outline:var(--pine-outline-focus)}.pds-avatar__badge{background-color:transparent;border:var(--pine-dimension-none);border-color:transparent;border-radius:var(--pine-border-radius-round);inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);position:absolute}:host([status=online]){--pds-avatar-status-color:var(--pine-color-green-500)}:host([status=away]){--pds-avatar-status-color:var(--pine-color-yellow-500)}:host([status=offline]){--pds-avatar-status-color:var(--pine-color-background-inset-emphasized)}.pds-avatar__status{background-color:var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized));block-size:28%;border-radius:var(--pine-border-radius-full);-webkit-box-shadow:0 0 0 var(--pine-border-width-thick) var(--pine-color-background-container);box-shadow:0 0 0 var(--pine-border-width-thick) var(--pine-color-background-container);inline-size:28%;inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);min-block-size:var(--pine-dimension-100);min-inline-size:var(--pine-dimension-100);position:absolute}:host(.pds-avatar--status-ring) div{-webkit-box-shadow:0 0 0 var(--pine-border-width-thick) var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized));box-shadow:0 0 0 var(--pine-border-width-thick) var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized))}img{border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.pds-avatar__initials{color:var(--pine-color-brand);fill:var(--pine-color-brand);font-size:var(--pine-font-size-085);font-weight:var(--pine-font-weight-semi-bold);height:100%;text-align:center;width:100%}.pds-avatar__initials text{text-anchor:middle}`;
|
|
5963
5977
|
|
|
5978
|
+
// Used when `badgeLabel` is unset; an empty string hides the badge instead.
|
|
5979
|
+
const DEFAULT_BADGE_LABEL = 'Verified';
|
|
5964
5980
|
/**
|
|
5965
5981
|
* @part asset-wrapper
|
|
5966
5982
|
* @part button
|
|
@@ -6040,14 +6056,22 @@ class PdsAvatar {
|
|
|
6040
6056
|
:
|
|
6041
6057
|
this.renderAssetWrapper());
|
|
6042
6058
|
};
|
|
6043
|
-
this.renderBadge = () =>
|
|
6044
|
-
|
|
6045
|
-
|
|
6046
|
-
|
|
6047
|
-
//
|
|
6048
|
-
|
|
6049
|
-
|
|
6050
|
-
|
|
6059
|
+
this.renderBadge = () => {
|
|
6060
|
+
var _a;
|
|
6061
|
+
// Inside the dropdown trigger the button's aria-label is the name, so the
|
|
6062
|
+
// badge is decorative there, as the status dot is. An empty label is
|
|
6063
|
+
// decorative too, rather than an image with no name.
|
|
6064
|
+
const badgeLabel = (_a = this.badgeLabel) !== null && _a !== void 0 ? _a : DEFAULT_BADGE_LABEL;
|
|
6065
|
+
const label = this.dropdown || badgeLabel === '' ? undefined : badgeLabel;
|
|
6066
|
+
return (
|
|
6067
|
+
// `badge` and `status` share the bottom-end corner; `status` wins so the
|
|
6068
|
+
// presence dot is never painted over the badge.
|
|
6069
|
+
this.badge && !this.status
|
|
6070
|
+
// Percentage is average size of icon in relation to total avatar size
|
|
6071
|
+
// of all preset sizes found in Figma.
|
|
6072
|
+
// Used to allow icons to scale to container size
|
|
6073
|
+
&& hAsync("pds-icon", { color: "var(--pine-color-purple-600)", class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%", "aria-label": label, "aria-hidden": label === undefined ? 'true' : undefined }));
|
|
6074
|
+
};
|
|
6051
6075
|
this.renderStatus = () => {
|
|
6052
6076
|
var _a;
|
|
6053
6077
|
if (!this.status)
|
|
@@ -6102,7 +6126,7 @@ class PdsAvatar {
|
|
|
6102
6126
|
}
|
|
6103
6127
|
}
|
|
6104
6128
|
render() {
|
|
6105
|
-
return (hAsync(Host, { key: '
|
|
6129
|
+
return (hAsync(Host, { key: '0942c1fff94d0d8138143cbddf80aea1d09e34a9', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
|
|
6106
6130
|
}
|
|
6107
6131
|
get el() { return getElement(this); }
|
|
6108
6132
|
static get watchers() { return {
|
|
@@ -6120,6 +6144,7 @@ class PdsAvatar {
|
|
|
6120
6144
|
"$members$": {
|
|
6121
6145
|
"alt": [1],
|
|
6122
6146
|
"badge": [4],
|
|
6147
|
+
"badgeLabel": [1, "badge-label"],
|
|
6123
6148
|
"componentId": [1, "component-id"],
|
|
6124
6149
|
"dropdown": [4],
|
|
6125
6150
|
"image": [1],
|
|
@@ -6582,7 +6607,7 @@ class PdsBox {
|
|
|
6582
6607
|
const normalizedBorder = normalizeColorValue$1(this.borderColor);
|
|
6583
6608
|
const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (normalizedBackground && { '--color-background-box': normalizedBackground })), (normalizedBorder && { '--color-border-box': normalizedBorder })), (this.minHeight && { '--sizing-min-height-box': this.minHeight })), (this.minWidth && { '--sizing-min-width-box': this.minWidth })), (this.flex && !['none', 'grow', 'shrink'].includes(this.flex) && { 'flex': this.flex }));
|
|
6584
6609
|
this.hostKeeper.record(boxClasses, boxInlineStyles);
|
|
6585
|
-
return (hAsync(Host, { key: '
|
|
6610
|
+
return (hAsync(Host, { key: 'c791a8d413b47629c619424bebf9d9c4acc4d9f3', class: boxClasses, style: boxInlineStyles }));
|
|
6586
6611
|
}
|
|
6587
6612
|
get el() { return getElement(this); }
|
|
6588
6613
|
static get style() { return pdsBoxCss(); }
|
|
@@ -6719,6 +6744,49 @@ class PdsBox {
|
|
|
6719
6744
|
}; }
|
|
6720
6745
|
}
|
|
6721
6746
|
|
|
6747
|
+
/**
|
|
6748
|
+
* The ARIA attributes that take ID references, and the element-reflection property each is forwarded
|
|
6749
|
+
* through. An ID on a host can't reach an element inside its shadow root, so a component that
|
|
6750
|
+
* delegates focus forwards the elements the IDs point at instead. A browser without ARIA element
|
|
6751
|
+
* reflection gets none of them.
|
|
6752
|
+
*/
|
|
6753
|
+
const ARIA_REFERENCE_PROPERTIES = {
|
|
6754
|
+
'aria-controls': 'ariaControlsElements',
|
|
6755
|
+
'aria-describedby': 'ariaDescribedByElements',
|
|
6756
|
+
'aria-labelledby': 'ariaLabelledByElements',
|
|
6757
|
+
};
|
|
6758
|
+
const ARIA_REFERENCE_ATTRIBUTES = Object.keys(ARIA_REFERENCE_PROPERTIES);
|
|
6759
|
+
/**
|
|
6760
|
+
* Finds an element by ID in the host's tree, then in each shadow root that contains it, so a host
|
|
6761
|
+
* inside another component's shadow root still reaches, say, a popover portal on document.body.
|
|
6762
|
+
* The closest root wins when an ID repeats.
|
|
6763
|
+
*/
|
|
6764
|
+
const findInAncestorRoots = (host, id) => {
|
|
6765
|
+
let root = host.getRootNode();
|
|
6766
|
+
while (root instanceof ShadowRoot) {
|
|
6767
|
+
const found = root.getElementById(id);
|
|
6768
|
+
if (found)
|
|
6769
|
+
return found;
|
|
6770
|
+
root = root.host.getRootNode();
|
|
6771
|
+
}
|
|
6772
|
+
return root instanceof Document ? root.getElementById(id) : null;
|
|
6773
|
+
};
|
|
6774
|
+
/**
|
|
6775
|
+
* Points the target's reflected ARIA properties at the elements the host's ID-reference attributes
|
|
6776
|
+
* name, or clears them. Run it again whenever the attributes or the referenced elements may have
|
|
6777
|
+
* changed: element references don't follow an ID to a node added or replaced later.
|
|
6778
|
+
*/
|
|
6779
|
+
const forwardAriaReferences = (host, target) => {
|
|
6780
|
+
Object.entries(ARIA_REFERENCE_PROPERTIES).forEach(([attribute, property]) => {
|
|
6781
|
+
var _a, _b;
|
|
6782
|
+
if (!(property in target))
|
|
6783
|
+
return;
|
|
6784
|
+
const ids = (_b = (_a = host.getAttribute(attribute)) === null || _a === void 0 ? void 0 : _a.split(/\s+/).filter(Boolean)) !== null && _b !== void 0 ? _b : [];
|
|
6785
|
+
const referenced = ids.map((id) => findInAncestorRoots(host, id)).filter((el) => el !== null);
|
|
6786
|
+
target[property] = referenced.length > 0 ? referenced : null;
|
|
6787
|
+
});
|
|
6788
|
+
};
|
|
6789
|
+
|
|
6722
6790
|
const pdsButtonCss = () => `:host{--pds-button-background:var(--pds-button-color-background-default);--pds-button-border:var(--pine-border);--pds-button-border-radius:var(--pine-border-radius-full);--pds-button-border-radius-start-end:var(--pine-border-radius-full);--pds-button-border-radius-start-start:var(--pine-border-radius-full);--pds-button-border-radius-end-end:var(--pine-border-radius-full);--pds-button-border-radius-end-start:var(--pine-border-radius-full);--pds-button-min-height:var(--pine-dimension-450);--pds-button-outline-offset:var(--pine-border-width);--pds-button-color-border-default:transparent;--pds-button-color-border-disabled:transparent;--pds-button-color-border-focus:transparent;--pds-button-color-border-hover:transparent;--button-loader-color:var(--pds-button-color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) a,:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([full-width=true]) .pds-button__content{-ms-flex-pack:center;justify-content:center;text-align:center}:host([loading=true]){cursor:wait;pointer-events:none}:host([aria-disabled=true]){pointer-events:none}.pds-button{--pds-loader-color:var(--pds-button-color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--pds-button-background, var(--pds-button-color-background-default));border:var(--pds-button-border);border-color:var(--pds-button-color-border-default);border-radius:var(--pds-button-border-radius);border-end-end-radius:var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));border-end-start-radius:var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));border-start-end-radius:var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));border-start-start-radius:var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pds-button-color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-button-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);position:relative;text-decoration:none}.pds-button pds-icon{color:currentColor;fill:currentColor}.pds-button:hover{background-color:var(--pds-button-color-background-hover);border-color:var(--pds-button-color-border-hover)}.pds-button:focus-visible{border-color:var(--pds-button-color-border-focus);-webkit-box-shadow:var(--pds-button-box-shadow-focus, none);box-shadow:var(--pds-button-box-shadow-focus, none);outline:var(--pds-button-outline-focus, var(--pine-outline-focus));outline-offset:var(--pds-button-outline-offset)}.pds-button:disabled{background-color:var(--pds-button-color-background-disabled);border-color:var(--pds-button-color-border-disabled);color:var(--pds-button-color-text-disabled);pointer-events:none}.pds-button--primary{--pds-button-color-background-default:var(--pine-color-primary);--pds-button-color-background-hover:var(--pine-color-primary-hover);--pds-button-color-background-disabled:var(--pine-color-primary-disabled);--pds-button-color-border-default:var(--pine-color-primary);--pds-button-color-border-hover:var(--pine-color-primary-hover);--pds-button-color-text-default:var(--pine-color-text-primary);--pds-button-color-text-disabled:var(--pine-color-text-primary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--pds-button-color-background-default:var(--pine-color-accent);--pds-button-color-background-hover:var(--pine-color-accent-hover);--pds-button-color-background-disabled:var(--pine-color-accent-disabled);--pds-button-color-border-default:var(--pine-color-accent);--pds-button-color-border-hover:var(--pine-color-accent-hover);--pds-button-color-text-default:var(--pine-color-text-primary);--pds-button-color-text-disabled:var(--pine-color-text-accent-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--pds-button-color-background-default:var(--pine-color-danger);--pds-button-color-background-hover:var(--pine-color-danger-hover);--pds-button-color-background-disabled:var(--pine-color-danger-disabled);--pds-button-color-border-default:var(--pine-color-danger);--pds-button-color-border-hover:var(--pine-color-danger-hover);--pds-button-color-text-default:var(--pine-color-white);--pds-button-color-text-disabled:var(--pine-color-text-danger-disabled);--pds-button-color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-button--secondary,.pds-button--disclosure{--pds-button-color-background-default:var(--pine-color-secondary);--pds-button-color-background-hover:var(--pine-color-secondary-hover);--pds-button-color-background-disabled:var(--pine-color-secondary-disabled);--pds-button-color-border-disabled:var(--pine-color-border-disabled);--pds-button-color-border-focus:var(--pine-color-border);--pds-button-color-border-hover:var(--pine-color-border-hover);--pds-button-color-border-default:var(--pine-color-border);--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-disabled:var(--pine-color-text-secondary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--tertiary{--pds-button-color-background-default:transparent;--pds-button-color-background-hover:var(--pine-color-background-muted);--pds-button-color-background-disabled:transparent;--pds-button-color-border-default:transparent;--pds-button-color-border-hover:var(--pine-color-background-muted);--pds-button-color-border-disabled:transparent;--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-disabled:var(--pine-color-text-secondary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--filter{--pds-button-color-background-default:var(--pine-color-background-container);--pds-button-color-background-hover:var(--pine-color-background-subtle);--pds-button-color-background-disabled:var(--pine-color-white);--pds-button-color-border-default:transparent;--pds-button-color-border-hover:transparent;--pds-button-color-border-focus:transparent;--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-hover:var(--pine-color-text-hover);--pds-button-color-text-disabled:var(--pine-color-text-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary);--pds-button-border-radius:var(--pine-dimension-125);--pds-button-border-radius-start-end:var(--pine-dimension-125);--pds-button-border-radius-start-start:var(--pine-dimension-125);--pds-button-border-radius-end-end:var(--pine-dimension-125);--pds-button-border-radius-end-start:var(--pine-dimension-125);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-button--filter:disabled{background-color:var(--pine-color-background-container)}.pds-button--filter:hover{color:var(--pds-button-color-text-hover)}.pds-button--unstyled{--pds-button-color-background-default:transparent;--pds-button-color-background-hover:transparent;--pds-button-color-background-disabled:transparent;--pds-button-color-text-default:var(--pine-color-text);--button-loader-color:var(--pine-color-text);border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-xs);position:relative;width:100%}.pds-button__icon{display:-ms-inline-flexbox;display:inline-flex}.pds-button__icon--empty{display:none}.pds-button__text{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}.pds-button__icon--hidden,.pds-button__text--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}.pds-button--small{min-height:var(--pine-dimension-400);padding:calc(var(--pine-dimension-2xs) - var(--pine-border-width)) var(--pine-dimension-sm)}.pds-button--micro{font-size:var(--pine-font-size-085);min-height:var(--pine-dimension-300);padding:var(--pine-dimension-025) var(--pine-dimension-xs)}.pds-button--icon-only{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);height:var(--button-dimension);-ms-flex-pack:center;justify-content:center;min-height:var(--button-dimension);min-width:var(--button-dimension);padding:var(--pine-dimension-xs);width:var(--button-dimension)}.pds-button--icon-only .pds-button__content{height:100%;-ms-flex-pack:center;justify-content:center;width:100%}.pds-button--icon-only .pds-button__text--hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-button--icon-only.pds-button--small{height:var(--pine-dimension-400);min-height:var(--pine-dimension-400);min-width:var(--pine-dimension-400);padding:var(--pine-dimension-2xs);width:var(--pine-dimension-400)}.pds-button--icon-only.pds-button--micro{height:var(--pine-dimension-300);min-height:var(--pine-dimension-300);min-width:var(--pine-dimension-300);padding:var(--pine-dimension-3xs);width:var(--pine-dimension-300)}`;
|
|
6723
6791
|
|
|
6724
6792
|
const FORWARDED_ARIA_ATTRIBUTES = ['aria-current', 'aria-expanded', 'aria-haspopup', 'aria-label', 'aria-pressed'];
|
|
@@ -6790,7 +6858,12 @@ class PdsButton {
|
|
|
6790
6858
|
if (FORWARDED_ARIA_ATTRIBUTES.some((name) => forwarded[name] !== this.forwardedAria[name])) {
|
|
6791
6859
|
this.forwardedAria = forwarded;
|
|
6792
6860
|
}
|
|
6793
|
-
this.
|
|
6861
|
+
this.forwardAriaReferences();
|
|
6862
|
+
};
|
|
6863
|
+
// A hint added after the button, or replaced by a framework or a DOM morph, is picked up by the
|
|
6864
|
+
// time focus reaches the button and it's announced.
|
|
6865
|
+
this.handleFocusIn = () => {
|
|
6866
|
+
this.forwardAriaReferences();
|
|
6794
6867
|
};
|
|
6795
6868
|
this.handleStartSlotChange = (event) => {
|
|
6796
6869
|
this.hasStartContent = event.target.assignedElements({ flatten: true }).length > 0;
|
|
@@ -6833,7 +6906,7 @@ class PdsButton {
|
|
|
6833
6906
|
// Consumers, popovers and menus set these on the host, often after render, but only the inner element is announced.
|
|
6834
6907
|
this.hostAriaObserver = new MutationObserver(this.syncHostAria);
|
|
6835
6908
|
this.hostAriaObserver.observe(this.el, {
|
|
6836
|
-
attributeFilter: FORWARDED_ARIA_ATTRIBUTES.concat(
|
|
6909
|
+
attributeFilter: FORWARDED_ARIA_ATTRIBUTES.concat(ARIA_REFERENCE_ATTRIBUTES),
|
|
6837
6910
|
});
|
|
6838
6911
|
}
|
|
6839
6912
|
disconnectedCallback() {
|
|
@@ -6842,7 +6915,7 @@ class PdsButton {
|
|
|
6842
6915
|
this.hostAriaObserver = undefined;
|
|
6843
6916
|
}
|
|
6844
6917
|
componentDidRender() {
|
|
6845
|
-
this.
|
|
6918
|
+
this.forwardAriaReferences();
|
|
6846
6919
|
}
|
|
6847
6920
|
/**
|
|
6848
6921
|
* Listen for Enter key presses on form inputs to trigger submit
|
|
@@ -6893,25 +6966,9 @@ class PdsButton {
|
|
|
6893
6966
|
}
|
|
6894
6967
|
}
|
|
6895
6968
|
}
|
|
6896
|
-
|
|
6897
|
-
|
|
6898
|
-
|
|
6899
|
-
if (!this.contentEl || !('ariaControlsElements' in this.contentEl))
|
|
6900
|
-
return;
|
|
6901
|
-
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 : [];
|
|
6902
|
-
const controlled = ids.map((id) => this.findInAncestorRoots(id)).filter((el) => el !== null);
|
|
6903
|
-
this.contentEl.ariaControlsElements = controlled.length > 0 ? controlled : null;
|
|
6904
|
-
}
|
|
6905
|
-
// A trigger inside another component's shadow root still controls a popover portal on document.body.
|
|
6906
|
-
findInAncestorRoots(id) {
|
|
6907
|
-
let root = this.el.getRootNode();
|
|
6908
|
-
while (root instanceof ShadowRoot) {
|
|
6909
|
-
const found = root.getElementById(id);
|
|
6910
|
-
if (found)
|
|
6911
|
-
return found;
|
|
6912
|
-
root = root.host.getRootNode();
|
|
6913
|
-
}
|
|
6914
|
-
return root instanceof Document ? root.getElementById(id) : null;
|
|
6969
|
+
forwardAriaReferences() {
|
|
6970
|
+
if (this.contentEl)
|
|
6971
|
+
forwardAriaReferences(this.el, this.contentEl);
|
|
6915
6972
|
}
|
|
6916
6973
|
classNames() {
|
|
6917
6974
|
const classNames = ['pds-button'];
|
|
@@ -6971,7 +7028,7 @@ class PdsButton {
|
|
|
6971
7028
|
// Hide text when loading or iconOnly is true
|
|
6972
7029
|
const hideText = this.loading || this.iconOnly;
|
|
6973
7030
|
const content = (hAsync("div", { class: "pds-button__content", part: "button-content" }, this.renderStartContent(), hAsync("span", { class: `pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`, part: "button-text" }, hAsync("slot", null)), this.loading && (hAsync("span", { class: "pds-button__loader" }, hAsync("pds-loader", { "is-loading": true, size: "var(--pine-font-size-body-2xl)", variant: "spinner", exportparts: "loader-svg" }, "Loading..."))), this.renderEndContent()));
|
|
6974
|
-
return (hAsync(Host, Object.assign({ "aria-disabled": this.disabled ? 'true' : null }, (this.componentId != null ? { id: this.componentId } : {}), { onClick: this.handleClick, variant: this.variant }), hAsync(ContentElement, Object.assign({}, attributes()), content)));
|
|
7031
|
+
return (hAsync(Host, Object.assign({ "aria-disabled": this.disabled ? 'true' : null }, (this.componentId != null ? { id: this.componentId } : {}), { onClick: this.handleClick, onFocusin: this.handleFocusIn, variant: this.variant }), hAsync(ContentElement, Object.assign({}, attributes()), content)));
|
|
6975
7032
|
}
|
|
6976
7033
|
static get delegatesFocus() { return true; }
|
|
6977
7034
|
get el() { return getElement(this); }
|
|
@@ -7068,7 +7125,7 @@ const isSpecTest = () => {
|
|
|
7068
7125
|
|
|
7069
7126
|
const labelCss$5 = () => `:host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
|
|
7070
7127
|
|
|
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)}`;
|
|
7128
|
+
const pdsCheckboxCss = () => `:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--pine-color-text-primary);-webkit-border-after:var(--pine-border-width-none);border-block-end:var(--pine-border-width-none);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);-ms-flex:none;flex:none;height:var(--pine-dimension-sm);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:1px solid var(--pine-color-text-primary);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -60%) rotate(43deg);transform:translate(-50%, -60%) rotate(43deg);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-border)}input:disabled+label{cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{outline:var(--pine-outline-focus)}:host-context([dir=rtl]) input:checked::after{-webkit-transform:translate(-50%, -60%) rotate(-43deg);transform:translate(-50%, -60%) rotate(-43deg)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}:host(.has-label-slot) label{-ms-flex-align:center;align-items:center}:host(.has-label-slot) label,:host(.has-label-slot) label>span{min-width:0}:host(.has-label-slot) input{-webkit-margin-before:0;margin-block-start:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-checkbox__message--error{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-checkbox__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}:host(.pds-checkbox--pill){position:relative}:host(.pds-checkbox--pill) label{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);cursor:pointer;font:var(--pine-typography-body);min-block-size:var(--pine-dimension-xl);padding:0 var(--pine-dimension-sm);-webkit-transition:border-color var(--pine-motion-duration-fast) ease;transition:border-color var(--pine-motion-duration-fast) ease}:host(.pds-checkbox--pill) label span{min-width:0;overflow-wrap:anywhere}:host(.pds-checkbox--pill) label:hover{border-color:var(--pine-color-text)}:host(.pds-checkbox--pill) label:has(input:checked){border-color:var(--pine-color-text-active);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active)}:host(.pds-checkbox--pill) label:has(input:focus-visible){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}:host(.pds-checkbox--pill) label:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host(.pds-checkbox--pill) label:has(input:disabled:checked){border-color:var(--pine-color-text-disabled);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled)}@media (forced-colors: active){:host(.pds-checkbox--pill) label:has(input:disabled){border-color:GrayText}:host(.pds-checkbox--pill) label:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}:host(.pds-checkbox--pill) label:has(input:disabled:checked){border-color:GrayText;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}:host(.pds-checkbox--pill) .pds-checkbox__message{-webkit-margin-start:0;margin-inline-start:0}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label{border-color:var(--pine-color-border-danger);color:var(--pine-color-text-active)}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked){border-color:var(--pine-color-border-danger);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger)}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:focus-visible){outline:var(--pine-outline-focus-danger)}@media (forced-colors: active){:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}`;
|
|
7072
7129
|
|
|
7073
7130
|
/**
|
|
7074
7131
|
* @slot label - Content displayed as the checkbox label in place of the `label` text. Clicking it toggles the checkbox.
|
|
@@ -7086,6 +7143,11 @@ class PdsCheckbox {
|
|
|
7086
7143
|
* It determines whether or not the checkbox is checked.
|
|
7087
7144
|
*/
|
|
7088
7145
|
this.checked = false;
|
|
7146
|
+
/**
|
|
7147
|
+
* Sets the style variant of the checkbox. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
|
|
7148
|
+
* @defaultValue default
|
|
7149
|
+
*/
|
|
7150
|
+
this.variant = 'default';
|
|
7089
7151
|
this.handleCheckboxChange = (e) => {
|
|
7090
7152
|
if (this.disabled) {
|
|
7091
7153
|
return;
|
|
@@ -7125,6 +7187,9 @@ class PdsCheckbox {
|
|
|
7125
7187
|
if (this.hasLabelSlot) {
|
|
7126
7188
|
classNames.push('has-label-slot');
|
|
7127
7189
|
}
|
|
7190
|
+
if (this.variant === 'pill') {
|
|
7191
|
+
classNames.push('pds-checkbox--pill');
|
|
7192
|
+
}
|
|
7128
7193
|
return classNames.join(' ');
|
|
7129
7194
|
}
|
|
7130
7195
|
connectedCallback() {
|
|
@@ -7187,9 +7252,9 @@ class PdsCheckbox {
|
|
|
7187
7252
|
render() {
|
|
7188
7253
|
const hostClass = this.classNames();
|
|
7189
7254
|
this.hostKeeper.record(hostClass);
|
|
7190
|
-
return (hAsync(Host, { key: '
|
|
7191
|
-
hAsync("div", { key: '
|
|
7192
|
-
hAsync("div", { key: '
|
|
7255
|
+
return (hAsync(Host, { key: '8e9185653796f250ad425350b9adc1f65fd047c1', class: hostClass }, hAsync("label", { key: 'e17bab4b96b4ffc716e311ecea488a3025e1551c', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '8af9bbc3dbe18409532e95b4b490eab4aabc8762', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput, class: this.variant === 'pill' ? 'visually-hidden' : undefined }, this.inheritedAttributes)), hAsync("span", { key: '1e4d9a826b6b5ec429ae47096d4aede3af43d110', class: this.hideLabel && this.variant !== 'pill' ? 'visually-hidden' : '' }, hAsync("slot", { key: '7b10c7d1e018be4afe019cb56e82a5ec7a638de8', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
|
|
7256
|
+
hAsync("div", { key: 'c5455322eb07bf73805a17c28bf6acc1b5384337', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
7257
|
+
hAsync("div", { key: '0f7c8ec00362c31b1c5bd11c185c6e7bfc177f22', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'f6eccfaac90505903aee379f2fc28b5735d8c4a9', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
|
|
7193
7258
|
}
|
|
7194
7259
|
static get formAssociated() { return true; }
|
|
7195
7260
|
get el() { return getElement(this); }
|
|
@@ -7217,6 +7282,7 @@ class PdsCheckbox {
|
|
|
7217
7282
|
"name": [1],
|
|
7218
7283
|
"required": [4],
|
|
7219
7284
|
"value": [1],
|
|
7285
|
+
"variant": [1],
|
|
7220
7286
|
"hasLabelSlot": [32]
|
|
7221
7287
|
},
|
|
7222
7288
|
"$listeners$": undefined,
|
|
@@ -8930,6 +8996,74 @@ const computePosition = (reference, floating, options) => {
|
|
|
8930
8996
|
});
|
|
8931
8997
|
};
|
|
8932
8998
|
|
|
8999
|
+
/**
|
|
9000
|
+
* The native `<dialog>` or open `popover` (as pds-filter's) an element sits in, so a popup portaled
|
|
9001
|
+
* there shares its top layer and a click in it isn't outside it; otherwise `document.body`.
|
|
9002
|
+
* `closest()` stops at shadow boundaries and misses one that only wraps slotted content, so this
|
|
9003
|
+
* walks assigned slots and shadow hosts, as pds-combobox does. `isHost` picks which ancestor counts.
|
|
9004
|
+
*/
|
|
9005
|
+
function findPortalTarget(from, isHost = isOpenDialogOrPopover) {
|
|
9006
|
+
const seen = new Set();
|
|
9007
|
+
let current = from;
|
|
9008
|
+
while (current && !seen.has(current)) {
|
|
9009
|
+
seen.add(current);
|
|
9010
|
+
if (current.nodeType === Node.ELEMENT_NODE && isHost(current)) {
|
|
9011
|
+
return current;
|
|
9012
|
+
}
|
|
9013
|
+
const assigned = current.nodeType === Node.ELEMENT_NODE ? current.assignedSlot : null;
|
|
9014
|
+
if (assigned) {
|
|
9015
|
+
current = assigned;
|
|
9016
|
+
continue;
|
|
9017
|
+
}
|
|
9018
|
+
const parent = current.parentNode;
|
|
9019
|
+
current = parent instanceof ShadowRoot ? parent.host : parent;
|
|
9020
|
+
}
|
|
9021
|
+
return document.body;
|
|
9022
|
+
}
|
|
9023
|
+
/**
|
|
9024
|
+
* A modal dialog or open popover, which paints in the top layer above anything in the body, that
|
|
9025
|
+
* sits in the document itself: the document's stylesheets don't reach into a shadow root.
|
|
9026
|
+
*/
|
|
9027
|
+
function isTopLayerInDocument(el) {
|
|
9028
|
+
if (el.getRootNode() !== el.ownerDocument)
|
|
9029
|
+
return false;
|
|
9030
|
+
return matchesSafely(el, ':modal') || matchesSafely(el, ':popover-open');
|
|
9031
|
+
}
|
|
9032
|
+
/**
|
|
9033
|
+
* Calls `onClose` once `host` leaves the top layer (its dialog closes or its popover hides), and
|
|
9034
|
+
* returns a function that stops listening.
|
|
9035
|
+
*/
|
|
9036
|
+
function onTopLayerClose(host, onClose) {
|
|
9037
|
+
const check = () => {
|
|
9038
|
+
if (!isTopLayerInDocument(host))
|
|
9039
|
+
onClose();
|
|
9040
|
+
};
|
|
9041
|
+
host.addEventListener('close', check);
|
|
9042
|
+
host.addEventListener('toggle', check);
|
|
9043
|
+
return () => {
|
|
9044
|
+
host.removeEventListener('close', check);
|
|
9045
|
+
host.removeEventListener('toggle', check);
|
|
9046
|
+
};
|
|
9047
|
+
}
|
|
9048
|
+
function isOpenDialogOrPopover(el) {
|
|
9049
|
+
// Only an open dialog: inside a closed one, the popup would be hidden with it.
|
|
9050
|
+
if (el.localName === 'dialog')
|
|
9051
|
+
return el.open;
|
|
9052
|
+
return el.hasAttribute('popover') && matchesSafely(el, ':popover-open');
|
|
9053
|
+
}
|
|
9054
|
+
function matchesSafely(el, selector) {
|
|
9055
|
+
try {
|
|
9056
|
+
return el.matches(selector);
|
|
9057
|
+
}
|
|
9058
|
+
catch (_a) {
|
|
9059
|
+
// A browser without the selector (no Popover API, or no :modal): no top layer to share.
|
|
9060
|
+
return false;
|
|
9061
|
+
}
|
|
9062
|
+
}
|
|
9063
|
+
|
|
9064
|
+
// Controls that clipped text can sit inside that already take focus, so the text adds no tab stop of its own.
|
|
9065
|
+
// Not any `[tabindex]`: a focusable scroll region full of chips would show every chip's tooltip at once.
|
|
9066
|
+
const FOCUSABLE_WRAPPER = 'a[href], button, summary, pds-button, pds-link, pds-tab, pds-dropdown-menu-item, [role="option"]';
|
|
8933
9067
|
/** CSS class prefix used for truncation tooltip portal elements */
|
|
8934
9068
|
const TOOLTIP_CLASS = 'pds-truncation-tooltip';
|
|
8935
9069
|
/**
|
|
@@ -8939,7 +9073,8 @@ const TOOLTIP_CLASS = 'pds-truncation-tooltip';
|
|
|
8939
9073
|
*
|
|
8940
9074
|
* Z-Index Strategy:
|
|
8941
9075
|
* Uses --pine-z-index-nuclear (9999) to ensure tooltips appear above all other UI elements.
|
|
8942
|
-
* This is necessary because tooltips are portaled to document.body
|
|
9076
|
+
* This is necessary because tooltips are portaled to document.body, or into the modal dialog or
|
|
9077
|
+
* open popover around the host (the top layer, which no z-index reaches from the body), and must overlay:
|
|
8943
9078
|
* - Modal dialogs
|
|
8944
9079
|
* - Dropdown menus
|
|
8945
9080
|
* - Other floating UI elements
|
|
@@ -8979,6 +9114,15 @@ function injectStyles() {
|
|
|
8979
9114
|
opacity: 1;
|
|
8980
9115
|
visibility: visible;
|
|
8981
9116
|
}
|
|
9117
|
+
:is(dialog, [popover]) > .${TOOLTIP_CLASS} {
|
|
9118
|
+
font-style: normal;
|
|
9119
|
+
font-weight: normal;
|
|
9120
|
+
text-align: start;
|
|
9121
|
+
text-indent: 0;
|
|
9122
|
+
text-transform: none;
|
|
9123
|
+
white-space: normal;
|
|
9124
|
+
word-spacing: normal;
|
|
9125
|
+
}
|
|
8982
9126
|
`;
|
|
8983
9127
|
document.head.appendChild(style);
|
|
8984
9128
|
}
|
|
@@ -9005,7 +9149,8 @@ function isFocusVisible(el) {
|
|
|
9005
9149
|
*
|
|
9006
9150
|
* When the element's text overflows, hovering the host element or giving it
|
|
9007
9151
|
* keyboard focus will display a tooltip showing the full text content. The
|
|
9008
|
-
* tooltip is rendered as a portal on document.body
|
|
9152
|
+
* tooltip is rendered as a portal on document.body, or in the modal dialog or open popover around
|
|
9153
|
+
* the host, and positioned with Floating UI.
|
|
9009
9154
|
*
|
|
9010
9155
|
* Also owns the element's `tabindex` while it is clipped — see syncTabIndex.
|
|
9011
9156
|
*
|
|
@@ -9015,6 +9160,7 @@ function setupTruncationTooltip(options) {
|
|
|
9015
9160
|
const { hostEl, contentEl, getTooltipText, placement = 'top', reference = hostEl, manageTabIndex = true, focusEl = hostEl } = options;
|
|
9016
9161
|
injectStyles();
|
|
9017
9162
|
let portalEl = null;
|
|
9163
|
+
let stopWatchingPortalHost = null;
|
|
9018
9164
|
let isHovering = false;
|
|
9019
9165
|
let isHoveringPortal = false;
|
|
9020
9166
|
let isFocused = false;
|
|
@@ -9093,7 +9239,11 @@ function setupTruncationTooltip(options) {
|
|
|
9093
9239
|
contentDiv.className = `${TOOLTIP_CLASS}__content`;
|
|
9094
9240
|
contentDiv.textContent = text.trim();
|
|
9095
9241
|
portalEl.appendChild(contentDiv);
|
|
9096
|
-
|
|
9242
|
+
const portalHost = findPortalTarget(hostEl, isTopLayerInDocument);
|
|
9243
|
+
portalHost.appendChild(portalEl);
|
|
9244
|
+
// Closing that host moves no pointer, so a tooltip opened by touch would outlive it unseen.
|
|
9245
|
+
if (portalHost !== document.body)
|
|
9246
|
+
stopWatchingPortalHost = onTopLayerClose(portalHost, closeWithPortalHost);
|
|
9097
9247
|
// Allow the user to hover into the tooltip to select/copy text
|
|
9098
9248
|
portalEl.addEventListener('mouseenter', handlePortalMouseEnter);
|
|
9099
9249
|
portalEl.addEventListener('mouseleave', handlePortalMouseLeave);
|
|
@@ -9132,6 +9282,10 @@ function setupTruncationTooltip(options) {
|
|
|
9132
9282
|
}
|
|
9133
9283
|
}
|
|
9134
9284
|
function removePortal() {
|
|
9285
|
+
if (stopWatchingPortalHost !== null) {
|
|
9286
|
+
stopWatchingPortalHost();
|
|
9287
|
+
stopWatchingPortalHost = null;
|
|
9288
|
+
}
|
|
9135
9289
|
if (portalEl) {
|
|
9136
9290
|
portalEl.removeEventListener('mouseenter', handlePortalMouseEnter);
|
|
9137
9291
|
portalEl.removeEventListener('mouseleave', handlePortalMouseLeave);
|
|
@@ -9165,6 +9319,14 @@ function setupTruncationTooltip(options) {
|
|
|
9165
9319
|
return;
|
|
9166
9320
|
removePortal();
|
|
9167
9321
|
}
|
|
9322
|
+
// Hover and focus can't outlast a host that's no longer shown, so none of them keeps it open.
|
|
9323
|
+
function closeWithPortalHost() {
|
|
9324
|
+
isHovering = false;
|
|
9325
|
+
isHoveringPortal = false;
|
|
9326
|
+
isFocused = false;
|
|
9327
|
+
cancelHideTimeout();
|
|
9328
|
+
removePortal();
|
|
9329
|
+
}
|
|
9168
9330
|
/**
|
|
9169
9331
|
* Schedules tooltip removal after a short delay.
|
|
9170
9332
|
*
|
|
@@ -9196,11 +9358,18 @@ function setupTruncationTooltip(options) {
|
|
|
9196
9358
|
isHoveringPortal = false;
|
|
9197
9359
|
scheduleHide();
|
|
9198
9360
|
}
|
|
9361
|
+
// A second tab stop inside focusEl, such as another clipped text, bubbles its focus here too. Its event.target is
|
|
9362
|
+
// retargeted to the stop's outermost element in focusEl's tree, which sits beside hostEl rather than around or in it.
|
|
9363
|
+
function isFocusForHost(target) {
|
|
9364
|
+
return focusEl === hostEl || target === focusEl || target.contains(hostEl) || hostEl.contains(target);
|
|
9365
|
+
}
|
|
9199
9366
|
// Keyboard focus only: focus from a click would pin the tooltip open after the pointer leaves.
|
|
9200
9367
|
// Events from inside a shadow root arrive retargeted to its host, so test the innermost target.
|
|
9201
9368
|
function showForVisibleFocus(event) {
|
|
9202
9369
|
if (!isFocusVisible(event.composedPath()[0]))
|
|
9203
9370
|
return;
|
|
9371
|
+
if (!isFocusForHost(event.target))
|
|
9372
|
+
return;
|
|
9204
9373
|
isFocused = true;
|
|
9205
9374
|
showTooltip();
|
|
9206
9375
|
}
|
|
@@ -9260,9 +9429,6 @@ const SENTIMENT_DOT_COLORS = {
|
|
|
9260
9429
|
success: 'var(--pine-chip-color-success-dot)',
|
|
9261
9430
|
warning: 'var(--pine-chip-color-warning-dot)',
|
|
9262
9431
|
};
|
|
9263
|
-
// Controls a chip can sit inside that already take focus, so a clipped label adds no tab stop of its own.
|
|
9264
|
-
// Not any `[tabindex]`: a focusable scroll region full of chips would show every chip's tooltip at once.
|
|
9265
|
-
const FOCUSABLE_WRAPPER = 'a[href], button, summary, pds-button, pds-link, pds-tab, pds-dropdown-menu-item, [role="option"]';
|
|
9266
9432
|
// Beside the listbox and level with the option, so the tooltip never covers the other options.
|
|
9267
9433
|
function besideListbox(wrapper) {
|
|
9268
9434
|
const option = (wrapper === null || wrapper === void 0 ? void 0 : wrapper.matches('[role="option"]')) ? wrapper : null;
|
|
@@ -9489,7 +9655,7 @@ class PdsChip {
|
|
|
9489
9655
|
const hostClass = this.classNames();
|
|
9490
9656
|
const hostStyles = this.hostStyles;
|
|
9491
9657
|
this.hostKeeper.record(hostClass, hostStyles);
|
|
9492
|
-
return (hAsync(Host, { key: '
|
|
9658
|
+
return (hAsync(Host, { key: 'b5afded680c3fa09523a7928d13c2a566a8a504c', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
|
|
9493
9659
|
}
|
|
9494
9660
|
get el() { return getElement(this); }
|
|
9495
9661
|
static get style() { return pdsChipTokensCss() + pdsChipCss(); }
|
|
@@ -11199,7 +11365,7 @@ class FlyoutController {
|
|
|
11199
11365
|
}
|
|
11200
11366
|
}
|
|
11201
11367
|
|
|
11202
|
-
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)}`;
|
|
11368
|
+
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)}`;
|
|
11203
11369
|
|
|
11204
11370
|
/**
|
|
11205
11371
|
* @slot option - Option elements for the combobox dropdown
|
|
@@ -11340,6 +11506,13 @@ class PdsCombobox {
|
|
|
11340
11506
|
* @default 'pill'
|
|
11341
11507
|
*/
|
|
11342
11508
|
this.triggerShape = 'pill';
|
|
11509
|
+
/**
|
|
11510
|
+
* Determines whether the button trigger's label and the option labels should truncate and display with an ellipsis.
|
|
11511
|
+
* When a label overflows, a `title` showing the full label will appear on hover.
|
|
11512
|
+
* Chip options, custom layouts and group rows aren't affected.
|
|
11513
|
+
* @defaultValue false
|
|
11514
|
+
*/
|
|
11515
|
+
this.truncate = false;
|
|
11343
11516
|
/**
|
|
11344
11517
|
* The sentiment for the chip trigger. Matches Pine chip sentiments.
|
|
11345
11518
|
* @default 'neutral'
|
|
@@ -11636,10 +11809,15 @@ class PdsCombobox {
|
|
|
11636
11809
|
if (this.usesPanelSearch)
|
|
11637
11810
|
this.restoreFocusToTrigger();
|
|
11638
11811
|
};
|
|
11812
|
+
this.onButtonTriggerMouseEnter = (event) => {
|
|
11813
|
+
this.syncTitle(event.currentTarget, '.pds-combobox__button-trigger-text');
|
|
11814
|
+
};
|
|
11639
11815
|
// Event handler for mouse enter on option
|
|
11640
11816
|
this.onOptionMouseEnter = (event) => {
|
|
11641
|
-
const
|
|
11642
|
-
this.
|
|
11817
|
+
const row = event.currentTarget;
|
|
11818
|
+
if (this.truncate)
|
|
11819
|
+
this.syncTitle(row, '.pds-combobox__option-text');
|
|
11820
|
+
this.highlightedIndex = Number(row.getAttribute('data-option-index'));
|
|
11643
11821
|
this.keyboardNavigating = false;
|
|
11644
11822
|
};
|
|
11645
11823
|
this.onGroupRowMouseEnter = (event) => {
|
|
@@ -11929,6 +12107,19 @@ class PdsCombobox {
|
|
|
11929
12107
|
this.focusPanel(panelFocusEl);
|
|
11930
12108
|
}
|
|
11931
12109
|
}
|
|
12110
|
+
// A `title` only while the text is cut, measured on hover. On the span, not the option or trigger,
|
|
12111
|
+
// so it isn't read again as their description.
|
|
12112
|
+
syncTitle(el, selector) {
|
|
12113
|
+
const text = el.querySelector(selector);
|
|
12114
|
+
if (!text)
|
|
12115
|
+
return;
|
|
12116
|
+
if (text.scrollWidth > text.clientWidth) {
|
|
12117
|
+
text.title = text.textContent || '';
|
|
12118
|
+
}
|
|
12119
|
+
else {
|
|
12120
|
+
text.removeAttribute('title');
|
|
12121
|
+
}
|
|
12122
|
+
}
|
|
11932
12123
|
/**
|
|
11933
12124
|
* Scrolls just enough to show `el`, as `scrollIntoView({ block: 'nearest' })` does. In the drill-in
|
|
11934
12125
|
* panel it scrolls the list alone, and never sideways: while a drill-in slide offsets a row past
|
|
@@ -13330,6 +13521,7 @@ class PdsCombobox {
|
|
|
13330
13521
|
'pds-combobox__listbox--drill-in': this.drillDirection === 'in',
|
|
13331
13522
|
'pds-combobox__listbox--drill-out': this.drillDirection === 'out',
|
|
13332
13523
|
'pds-combobox__listbox--pointer-hover': this.pointerCanHover,
|
|
13524
|
+
'pds-combobox__listbox--truncate': this.truncate,
|
|
13333
13525
|
}, 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",
|
|
13334
13526
|
// Focusable but out of the tab order with panel search, so it can take focus when a
|
|
13335
13527
|
// drilled-in group hides the field. Dropping it while focused would blur the list and close.
|
|
@@ -13501,9 +13693,10 @@ class PdsCombobox {
|
|
|
13501
13693
|
/** An option's text, after its `data-icon` when it has one. */
|
|
13502
13694
|
renderOptionLabel(option) {
|
|
13503
13695
|
const icon = optionIconOf(option);
|
|
13696
|
+
const label = this.truncate ? (hAsync("span", { key: this.getOptionLabel(option), class: "pds-combobox__option-text" }, this.getOptionLabel(option))) : this.getOptionLabel(option);
|
|
13504
13697
|
if (icon === null)
|
|
13505
|
-
return
|
|
13506
|
-
return (hAsync("span", { class: "pds-combobox__option-label" }, hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }),
|
|
13698
|
+
return label;
|
|
13699
|
+
return (hAsync("span", { class: "pds-combobox__option-label" }, hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }), label));
|
|
13507
13700
|
}
|
|
13508
13701
|
/** The grouped panel's rows, in the order the panel draws them and the keyboard moves through. */
|
|
13509
13702
|
panelEntries() {
|
|
@@ -13591,7 +13784,9 @@ class PdsCombobox {
|
|
|
13591
13784
|
'pds-combobox__button-trigger-label--with-icon': icon !== null,
|
|
13592
13785
|
} }, icon !== null && (
|
|
13593
13786
|
// `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
|
|
13594
|
-
hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.
|
|
13787
|
+
hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.truncate ? (
|
|
13788
|
+
// Keyed so a new label drops a stale `title`.
|
|
13789
|
+
hAsync("span", { key: this.selectedLabel || this.placeholder, class: "pds-combobox__button-trigger-text" }, this.selectedLabel || this.placeholder)) : (this.selectedLabel || this.placeholder)));
|
|
13595
13790
|
}
|
|
13596
13791
|
/** The selection's icon for the button trigger: the option's own, or else its group's. */
|
|
13597
13792
|
get selectedIcon() {
|
|
@@ -13723,16 +13918,17 @@ class PdsCombobox {
|
|
|
13723
13918
|
'pds-combobox__button-trigger',
|
|
13724
13919
|
`pds-combobox__button-trigger--${this.triggerVariant}`,
|
|
13725
13920
|
this.triggerShape === 'input' && 'pds-combobox__button-trigger--input-shape',
|
|
13921
|
+
this.truncate && 'pds-combobox__button-trigger--truncate',
|
|
13726
13922
|
]
|
|
13727
13923
|
.filter(Boolean)
|
|
13728
13924
|
.join(' ');
|
|
13729
|
-
return (hAsync(Host, { key: '
|
|
13925
|
+
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 => {
|
|
13730
13926
|
this.inputEl = el;
|
|
13731
13927
|
this.triggerEl = el;
|
|
13732
13928
|
}, class: {
|
|
13733
13929
|
'pds-combobox__input': true,
|
|
13734
13930
|
'pds-combobox__input--invalid': this.isInvalid(),
|
|
13735
|
-
}, 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: '
|
|
13931
|
+
}, 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' && [
|
|
13736
13932
|
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 : ''),
|
|
13737
13933
|
// Its own region: sharing one, revealing a row then opening it would leave the text the
|
|
13738
13934
|
// same, and opening the group would go unannounced.
|
|
@@ -13803,6 +13999,7 @@ class PdsCombobox {
|
|
|
13803
13999
|
"triggerWidth": [1, "trigger-width"],
|
|
13804
14000
|
"triggerVariant": [1, "trigger-variant"],
|
|
13805
14001
|
"triggerShape": [1, "trigger-shape"],
|
|
14002
|
+
"truncate": [516],
|
|
13806
14003
|
"chipSentiment": [1, "chip-sentiment"],
|
|
13807
14004
|
"chipLarge": [4, "chip-large"],
|
|
13808
14005
|
"chipIcon": [1, "chip-icon"],
|
|
@@ -13839,7 +14036,7 @@ class PdsCombobox {
|
|
|
13839
14036
|
},
|
|
13840
14037
|
"$listeners$": undefined,
|
|
13841
14038
|
"$lazyBundleId$": "-",
|
|
13842
|
-
"$attrsToReflect$": [["name", "name"]]
|
|
14039
|
+
"$attrsToReflect$": [["name", "name"], ["truncate", "truncate"]]
|
|
13843
14040
|
}; }
|
|
13844
14041
|
}
|
|
13845
14042
|
|
|
@@ -13872,7 +14069,7 @@ class PdsContainer {
|
|
|
13872
14069
|
hostStyle['--pine-container-max-width'] = customSize;
|
|
13873
14070
|
if (!this.centered)
|
|
13874
14071
|
hostStyle['margin-inline'] = '0';
|
|
13875
|
-
return (hAsync(Host, { key: '
|
|
14072
|
+
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' }))));
|
|
13876
14073
|
}
|
|
13877
14074
|
static get style() { return pdsContainerCss(); }
|
|
13878
14075
|
static get cmpMeta() { return {
|
|
@@ -13997,7 +14194,7 @@ class PdsCopytext {
|
|
|
13997
14194
|
render() {
|
|
13998
14195
|
const hostClass = this.classNames();
|
|
13999
14196
|
this.hostKeeper.record(hostClass);
|
|
14000
|
-
return (hAsync(Host, { key: '
|
|
14197
|
+
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" }))));
|
|
14001
14198
|
}
|
|
14002
14199
|
get el() { return getElement(this); }
|
|
14003
14200
|
static get watchers() { return {
|
|
@@ -14318,44 +14515,6 @@ class CalendarPortal {
|
|
|
14318
14515
|
}
|
|
14319
14516
|
}
|
|
14320
14517
|
CalendarPortal.className = 'pds-datepicker-calendar-portal';
|
|
14321
|
-
/**
|
|
14322
|
-
* The native `<dialog>` or open `popover` (as pds-filter's) the datepicker sits in, so the
|
|
14323
|
-
* calendar shares its top layer and a click in it isn't outside it; otherwise `document.body`.
|
|
14324
|
-
* `closest()` stops at shadow boundaries and misses one that only wraps slotted content, so this
|
|
14325
|
-
* walks assigned slots and shadow hosts, as pds-combobox does.
|
|
14326
|
-
*/
|
|
14327
|
-
function findPortalTarget(from) {
|
|
14328
|
-
const seen = new Set();
|
|
14329
|
-
let current = from;
|
|
14330
|
-
while (current && !seen.has(current)) {
|
|
14331
|
-
seen.add(current);
|
|
14332
|
-
if (current.nodeType === Node.ELEMENT_NODE && isTopLayerHost(current)) {
|
|
14333
|
-
return current;
|
|
14334
|
-
}
|
|
14335
|
-
const assigned = current.nodeType === Node.ELEMENT_NODE ? current.assignedSlot : null;
|
|
14336
|
-
if (assigned) {
|
|
14337
|
-
current = assigned;
|
|
14338
|
-
continue;
|
|
14339
|
-
}
|
|
14340
|
-
const parent = current.parentNode;
|
|
14341
|
-
current = parent instanceof ShadowRoot ? parent.host : parent;
|
|
14342
|
-
}
|
|
14343
|
-
return document.body;
|
|
14344
|
-
}
|
|
14345
|
-
function isTopLayerHost(el) {
|
|
14346
|
-
// Only an open dialog: inside a closed one, the calendar would be hidden with it.
|
|
14347
|
-
if (el.localName === 'dialog')
|
|
14348
|
-
return el.open;
|
|
14349
|
-
if (!el.hasAttribute('popover'))
|
|
14350
|
-
return false;
|
|
14351
|
-
try {
|
|
14352
|
-
return el.matches(':popover-open');
|
|
14353
|
-
}
|
|
14354
|
-
catch (_a) {
|
|
14355
|
-
// A browser without the Popover API: no top layer to share.
|
|
14356
|
-
return false;
|
|
14357
|
-
}
|
|
14358
|
-
}
|
|
14359
14518
|
|
|
14360
14519
|
const DEFAULT_LABELS = {
|
|
14361
14520
|
'today': 'Today',
|
|
@@ -15999,14 +16158,14 @@ class PdsDatepicker {
|
|
|
15999
16158
|
}
|
|
16000
16159
|
render() {
|
|
16001
16160
|
const locale = this.resolvedLocale;
|
|
16002
|
-
return (hAsync(Host, { key: '
|
|
16161
|
+
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", {
|
|
16003
16162
|
// Keyed, as is the calendar button: when Clear appears after a pick, the focused
|
|
16004
16163
|
// calendar button must stay that button rather than be reused as Clear.
|
|
16005
16164
|
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,
|
|
16006
16165
|
// Out of the tab order, as a native search field's clear button is: Tab from a field
|
|
16007
16166
|
// just emptied would land on it as the change removes it, dropping focus to the page.
|
|
16008
16167
|
tabindex: "-1", onMouseDown: this.onClearMouseDown, onClick: this.onClearClick
|
|
16009
|
-
}, hAsync("pds-icon", { key: '
|
|
16168
|
+
}, 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)));
|
|
16010
16169
|
}
|
|
16011
16170
|
static get formAssociated() { return true; }
|
|
16012
16171
|
get el() { return getElement(this); }
|
|
@@ -16148,7 +16307,7 @@ class PdsDivider {
|
|
|
16148
16307
|
return classNames.join(' ');
|
|
16149
16308
|
}
|
|
16150
16309
|
render() {
|
|
16151
|
-
return (hAsync(Host, { key: '
|
|
16310
|
+
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() }))));
|
|
16152
16311
|
}
|
|
16153
16312
|
static get style() { return pdsDividerCss(); }
|
|
16154
16313
|
static get cmpMeta() { return {
|
|
@@ -16344,11 +16503,11 @@ class PdsDrawer {
|
|
|
16344
16503
|
this.open = false;
|
|
16345
16504
|
}
|
|
16346
16505
|
render() {
|
|
16347
|
-
return (hAsync(Host, { key: '
|
|
16506
|
+
return (hAsync(Host, { key: '7cf13256457914e48e8fde422832a2a52ee0c13b', class: {
|
|
16348
16507
|
'pds-drawer': true,
|
|
16349
16508
|
[`pds-drawer--${this.side}`]: true,
|
|
16350
16509
|
[`pds-drawer--${this.size}`]: true,
|
|
16351
|
-
} }, hAsync("pds-modal", { key: '
|
|
16510
|
+
} }, 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' }))));
|
|
16352
16511
|
}
|
|
16353
16512
|
get el() { return getElement(this); }
|
|
16354
16513
|
static get style() { return pdsDrawerCss(); }
|
|
@@ -16389,7 +16548,7 @@ class PdsDrawerContent {
|
|
|
16389
16548
|
unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
|
|
16390
16549
|
}
|
|
16391
16550
|
render() {
|
|
16392
|
-
return (hAsync("div", { key: '
|
|
16551
|
+
return (hAsync("div", { key: 'b15b087506c1292f9d67e531e8d935069749c09d', class: "pds-drawer-content" }, hAsync("slot", { key: '9c60ca75c7905e7e994f9c41eee213b962afb833' })));
|
|
16393
16552
|
}
|
|
16394
16553
|
get el() { return getElement(this); }
|
|
16395
16554
|
static get style() { return pdsDrawerContentCss(); }
|
|
@@ -16417,7 +16576,7 @@ class PdsDrawerFooter {
|
|
|
16417
16576
|
unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
|
|
16418
16577
|
}
|
|
16419
16578
|
render() {
|
|
16420
|
-
return (hAsync("footer", { key: '
|
|
16579
|
+
return (hAsync("footer", { key: 'a4eec0aff617c605b94f8d3b9ec1e2d98cded6fb', class: "pds-drawer__footer" }, hAsync("slot", { key: '6dc379c940e37edfd05d99728be9dff58ca1d717' })));
|
|
16421
16580
|
}
|
|
16422
16581
|
get el() { return getElement(this); }
|
|
16423
16582
|
static get style() { return pdsDrawerFooterCss(); }
|
|
@@ -16445,7 +16604,7 @@ class PdsDrawerHeader {
|
|
|
16445
16604
|
unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
|
|
16446
16605
|
}
|
|
16447
16606
|
render() {
|
|
16448
|
-
return (hAsync("header", { key: '
|
|
16607
|
+
return (hAsync("header", { key: '6b9338e5dbf7a7e580c11b28c95ca53693528382', class: "pds-drawer__header" }, hAsync("slot", { key: '0990fbcf94c0c438b98cf1e8945f1e2fd9aa33dc' })));
|
|
16449
16608
|
}
|
|
16450
16609
|
get el() { return getElement(this); }
|
|
16451
16610
|
static get style() { return pdsDrawerHeaderCss(); }
|
|
@@ -16817,7 +16976,7 @@ class PdsDropdownMenu {
|
|
|
16817
16976
|
}
|
|
16818
16977
|
}
|
|
16819
16978
|
render() {
|
|
16820
|
-
return (hAsync(Host, { key: '
|
|
16979
|
+
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 })))));
|
|
16821
16980
|
}
|
|
16822
16981
|
get host() { return getElement(this); }
|
|
16823
16982
|
static get style() { return pdsDropdownMenuCss(); }
|
|
@@ -16924,7 +17083,7 @@ class PdsDropdownMenuItem {
|
|
|
16924
17083
|
}, role: "menuitem", "aria-disabled": "true", part: "button", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleInformationalKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("slot", null)));
|
|
16925
17084
|
}
|
|
16926
17085
|
if (this.href != null) {
|
|
16927
|
-
return (hAsync("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, target: this.target, class: {
|
|
17086
|
+
return (hAsync("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, externalLabel: this.externalLabel, target: this.target, class: {
|
|
16928
17087
|
'pds-dropdown-menu-item__content': true,
|
|
16929
17088
|
'has-focus': this.hasFocus
|
|
16930
17089
|
}, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-disabled": this.disabled ? 'true' : null }, hAsync("slot", null)));
|
|
@@ -16935,7 +17094,7 @@ class PdsDropdownMenuItem {
|
|
|
16935
17094
|
}, 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)));
|
|
16936
17095
|
}
|
|
16937
17096
|
render() {
|
|
16938
|
-
return (hAsync(Host, { key: '
|
|
17097
|
+
return (hAsync(Host, { key: 'a69947d99160783919f711d7c53e0592694f9565', id: this.componentId, class: {
|
|
16939
17098
|
'is-disabled': this.disabled,
|
|
16940
17099
|
'is-informational': this.informational,
|
|
16941
17100
|
'destructive': !this.disabled && !this.informational && this.destructive
|
|
@@ -16957,6 +17116,7 @@ class PdsDropdownMenuItem {
|
|
|
16957
17116
|
"href": [1],
|
|
16958
17117
|
"informational": [516],
|
|
16959
17118
|
"external": [516],
|
|
17119
|
+
"externalLabel": [1, "external-label"],
|
|
16960
17120
|
"target": [513],
|
|
16961
17121
|
"hasFocus": [32],
|
|
16962
17122
|
"clickItem": [64]
|
|
@@ -16979,7 +17139,7 @@ class PdsDropdownMenuSeparator {
|
|
|
16979
17139
|
this.disabled = false;
|
|
16980
17140
|
}
|
|
16981
17141
|
render() {
|
|
16982
|
-
return (hAsync(Host, { key: '
|
|
17142
|
+
return (hAsync(Host, { key: '72f29c5015d2379d9986c90ec966f34f41298226', id: this.componentId }, hAsync("hr", { key: '72c2155d0fbee6346f3f38997009a7d9e14ad0c8' })));
|
|
16983
17143
|
}
|
|
16984
17144
|
static get style() { return pdsDropdownMenuSeparatorCss(); }
|
|
16985
17145
|
static get cmpMeta() { return {
|
|
@@ -17559,7 +17719,7 @@ class PdsFilter {
|
|
|
17559
17719
|
return null;
|
|
17560
17720
|
}
|
|
17561
17721
|
render() {
|
|
17562
|
-
return (hAsync(Host, { key: '
|
|
17722
|
+
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' })))));
|
|
17563
17723
|
}
|
|
17564
17724
|
get el() { return getElement(this); }
|
|
17565
17725
|
static get style() { return pdsFilterCss(); }
|
|
@@ -17591,7 +17751,7 @@ class PdsFilters {
|
|
|
17591
17751
|
registerInstance(this, hostRef);
|
|
17592
17752
|
}
|
|
17593
17753
|
render() {
|
|
17594
|
-
return (hAsync(Host, { key: '
|
|
17754
|
+
return (hAsync(Host, { key: '6f785fc222e3b5b7cf932f704b56aa7f1f52ead3', id: this.componentId }, hAsync("div", { key: '0ffd2894cdeb1e632228b4c3fa523069dcffa4b2', class: "pds-filters" }, hAsync("slot", { key: 'a3f42dedcda1b0fec78a33793d085791d9b9fc5c' }))));
|
|
17595
17755
|
}
|
|
17596
17756
|
static get style() { return pdsFiltersCss(); }
|
|
17597
17757
|
static get cmpMeta() { return {
|
|
@@ -17842,12 +18002,16 @@ const pdsIconContent = new Map();
|
|
|
17842
18002
|
|
|
17843
18003
|
const pdsIconCss = () => `:host{--dimension-icon-height:16px;--dimension-icon-width:16px;--color-icon-fill:currentColor;contain:strict;display:inline-block;fill:var(--color-icon-fill);-ms-flex-negative:0;flex-shrink:0;height:var(--dimension-icon-height);width:var(--dimension-icon-width)}:host .pdsicon{fill:var(--color-icon-fill)}.pds-icon-fill-none{fill:none}.icon-inner,.pds-icon,svg{display:block;height:100%;width:100%}:host(.flip-rtl):host-context([dir=rtl]) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.flip-rtl:dir(rtl)) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.flip-rtl:dir(ltr)) .icon-inner{-webkit-transform:scaleX(1);transform:scaleX(1)}`;
|
|
17844
18004
|
|
|
18005
|
+
// The attributes that give an icon its own accessible name.
|
|
18006
|
+
const NAMING_ATTRIBUTES = ['aria-label', 'aria-labelledby'];
|
|
17845
18007
|
class PdsIcon {
|
|
17846
18008
|
constructor(hostRef) {
|
|
17847
18009
|
registerInstance(this, hostRef);
|
|
17848
18010
|
this.didLoadIcon = false;
|
|
17849
18011
|
this.iconName = null;
|
|
18012
|
+
this.warnedUnnamedFocusable = false;
|
|
17850
18013
|
this.inheritedAttributes = {}; // eslint-disable-line @typescript-eslint/no-explicit-any
|
|
18014
|
+
this.isFocusable = false;
|
|
17851
18015
|
this.isVisible = false;
|
|
17852
18016
|
/**
|
|
17853
18017
|
* The size of the icon. This can be
|
|
@@ -17856,10 +18020,6 @@ class PdsIcon {
|
|
|
17856
18020
|
*
|
|
17857
18021
|
*/
|
|
17858
18022
|
this.size = 'regular';
|
|
17859
|
-
this.hasAriaHidden = () => {
|
|
17860
|
-
const { el } = this;
|
|
17861
|
-
return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';
|
|
17862
|
-
};
|
|
17863
18023
|
}
|
|
17864
18024
|
iconSize() {
|
|
17865
18025
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -17898,9 +18058,9 @@ class PdsIcon {
|
|
|
17898
18058
|
}, 500);
|
|
17899
18059
|
}
|
|
17900
18060
|
componentWillLoad() {
|
|
17901
|
-
this.inheritedAttributes = inheritAttributes(this.el,
|
|
18061
|
+
this.inheritedAttributes = inheritAttributes(this.el, NAMING_ATTRIBUTES);
|
|
18062
|
+
this.isFocusable = this.el.hasAttribute('tabindex');
|
|
17902
18063
|
this.setCSSVariables();
|
|
17903
|
-
this.setupInitialAriaLabel();
|
|
17904
18064
|
}
|
|
17905
18065
|
setCSSVariables() {
|
|
17906
18066
|
var _a;
|
|
@@ -17909,6 +18069,7 @@ class PdsIcon {
|
|
|
17909
18069
|
this.el.style.setProperty(`--color-icon-fill`, (_a = normalizeColorValue(this.color)) !== null && _a !== void 0 ? _a : 'currentColor');
|
|
17910
18070
|
}
|
|
17911
18071
|
connectedCallback() {
|
|
18072
|
+
this.observeNamingAttributes();
|
|
17912
18073
|
// Handle re-connection during client-side navigation
|
|
17913
18074
|
if (!this.isVisible && !this.svgContent) {
|
|
17914
18075
|
this.waitUntilVisible(this.el, '50px', () => {
|
|
@@ -17927,14 +18088,16 @@ class PdsIcon {
|
|
|
17927
18088
|
this.io.disconnect();
|
|
17928
18089
|
this.io = undefined;
|
|
17929
18090
|
}
|
|
18091
|
+
if (this.mo) {
|
|
18092
|
+
this.mo.disconnect();
|
|
18093
|
+
this.mo = undefined;
|
|
18094
|
+
}
|
|
17930
18095
|
}
|
|
17931
18096
|
updateStyles() {
|
|
17932
18097
|
this.setCSSVariables();
|
|
17933
18098
|
}
|
|
17934
18099
|
onIconPropertyChange() {
|
|
17935
18100
|
this.loadIcon();
|
|
17936
|
-
// Update aria-label when icon properties change
|
|
17937
|
-
this.setupInitialAriaLabel();
|
|
17938
18101
|
}
|
|
17939
18102
|
loadIcon() {
|
|
17940
18103
|
// Reset load state when URL changes
|
|
@@ -17944,26 +18107,34 @@ class PdsIcon {
|
|
|
17944
18107
|
this.iconName = getName(this.name, this.icon);
|
|
17945
18108
|
}
|
|
17946
18109
|
render() {
|
|
17947
|
-
const {
|
|
18110
|
+
const { flipRtl, iconName, inheritedAttributes } = this;
|
|
17948
18111
|
const shouldIconAutoFlip = iconName
|
|
17949
18112
|
? shouldRtlFlipIcon(iconName, this.el) && flipRtl !== false
|
|
17950
18113
|
: false;
|
|
17951
18114
|
const shouldFlip = flipRtl || shouldIconAutoFlip;
|
|
17952
|
-
//
|
|
17953
|
-
|
|
17954
|
-
|
|
18115
|
+
// An icon is decorative unless the author names it. A decorative icon is hidden
|
|
18116
|
+
// from assistive technology, so it contributes nothing to the accessible name of
|
|
18117
|
+
// the button or link it sits inside. Naming it from `name` instead would put an
|
|
18118
|
+
// icon id ("rocket-tone") into that control's name, where neither a screen reader
|
|
18119
|
+
// nor a page-inspecting agent can tell it apart from the real label.
|
|
18120
|
+
//
|
|
18121
|
+
// A focusable icon stays exposed even without a name: hiding something that
|
|
18122
|
+
// takes focus leaves keyboard users on an element a screen reader can't see.
|
|
18123
|
+
const isNamed = NAMING_ATTRIBUTES.some((attr) => inheritedAttributes[attr] !== undefined);
|
|
18124
|
+
const isDecorative = !isNamed && !this.isFocusable;
|
|
18125
|
+
return (hAsync(Host
|
|
18126
|
+
// undefined, not null: null would strip an aria-hidden the author set on a
|
|
18127
|
+
// named icon once the component re-renders.
|
|
18128
|
+
, Object.assign({ key: '6597475535756e7174072dc25c982137724d439d', "aria-hidden": isDecorative ? 'true' : undefined, alt: "", role: isDecorative ? null : 'img', class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'flip-rtl': shouldFlip, 'icon-rtl': shouldFlip && isRTL(this.el) }) }, inheritedAttributes), (hAsync("div", { class: "icon-inner" }))));
|
|
17955
18129
|
}
|
|
17956
18130
|
/*****
|
|
17957
18131
|
* Private Methods
|
|
17958
18132
|
****/
|
|
17959
|
-
|
|
17960
|
-
|
|
17961
|
-
|
|
17962
|
-
|
|
17963
|
-
|
|
17964
|
-
this.ariaLabel = iconName.replace(/\-/g, ' ');
|
|
17965
|
-
}
|
|
17966
|
-
}
|
|
18133
|
+
// The hide/expose decision reads the naming attributes and tabindex, which can
|
|
18134
|
+
// change after load (a React prop going from undefined to a string, or
|
|
18135
|
+
// setAttribute from script). Re-read them when they do.
|
|
18136
|
+
observeNamingAttributes() {
|
|
18137
|
+
return;
|
|
17967
18138
|
}
|
|
17968
18139
|
waitUntilVisible(el, rootMargin, cb) {
|
|
17969
18140
|
{
|
|
@@ -18050,7 +18221,8 @@ class PdsIcon {
|
|
|
18050
18221
|
"name": [513],
|
|
18051
18222
|
"size": [513],
|
|
18052
18223
|
"src": [1],
|
|
18053
|
-
"
|
|
18224
|
+
"inheritedAttributes": [32],
|
|
18225
|
+
"isFocusable": [32],
|
|
18054
18226
|
"isVisible": [32],
|
|
18055
18227
|
"svgContent": [32]
|
|
18056
18228
|
},
|
|
@@ -18087,9 +18259,9 @@ class PdsImage {
|
|
|
18087
18259
|
this.loading = 'eager';
|
|
18088
18260
|
}
|
|
18089
18261
|
render() {
|
|
18090
|
-
return (hAsync(Host, { key: '
|
|
18262
|
+
return (hAsync(Host, { key: '6d2d48c468c39f53d67e63999dd83f3ad61053b5', class: {
|
|
18091
18263
|
'pds-image': true,
|
|
18092
|
-
}, id: this.componentId }, hAsync("img", { key: '
|
|
18264
|
+
}, 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 })));
|
|
18093
18265
|
}
|
|
18094
18266
|
static get style() { return pdsImageCss(); }
|
|
18095
18267
|
static get cmpMeta() { return {
|
|
@@ -18409,10 +18581,10 @@ class PdsInput {
|
|
|
18409
18581
|
'has-prepend': this.hasPrepend,
|
|
18410
18582
|
'has-append': this.hasAppend,
|
|
18411
18583
|
};
|
|
18412
|
-
return (hAsync(Host, { key: '
|
|
18584
|
+
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: {
|
|
18413
18585
|
'pds-input__label-wrapper': true,
|
|
18414
18586
|
'visually-hidden': this.hideLabel,
|
|
18415
|
-
} }, hAsync("label", { key: '
|
|
18587
|
+
} }, 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)))));
|
|
18416
18588
|
}
|
|
18417
18589
|
static get formAssociated() { return true; }
|
|
18418
18590
|
get el() { return getElement(this); }
|
|
@@ -18466,8 +18638,10 @@ class PdsInput {
|
|
|
18466
18638
|
}; }
|
|
18467
18639
|
}
|
|
18468
18640
|
|
|
18469
|
-
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)
|
|
18641
|
+
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);isolation:isolate;outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}.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}`;
|
|
18470
18642
|
|
|
18643
|
+
// Used when `externalLabel` is unset; an empty string hides the icon instead.
|
|
18644
|
+
const DEFAULT_EXTERNAL_LABEL = '(opens in a new tab)';
|
|
18471
18645
|
/**
|
|
18472
18646
|
* @part link - Link element styles.
|
|
18473
18647
|
* @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.
|
|
@@ -18521,11 +18695,18 @@ class PdsLink {
|
|
|
18521
18695
|
return linkStyles;
|
|
18522
18696
|
}
|
|
18523
18697
|
render() {
|
|
18698
|
+
var _a;
|
|
18524
18699
|
const targetValue = this.target || (this.external ? '_blank' : undefined);
|
|
18525
18700
|
const showExternalIcon = this.external;
|
|
18526
|
-
const
|
|
18527
|
-
|
|
18528
|
-
|
|
18701
|
+
const opensInNewTab = targetValue === '_blank';
|
|
18702
|
+
const relValue = opensInNewTab ? 'noopener noreferrer' : undefined;
|
|
18703
|
+
// A `target` other than _blank overrides `external`, and then the label
|
|
18704
|
+
// would be false, so the icon is decorative there, as it is when the
|
|
18705
|
+
// label is empty.
|
|
18706
|
+
const externalLabel = (_a = this.externalLabel) !== null && _a !== void 0 ? _a : DEFAULT_EXTERNAL_LABEL;
|
|
18707
|
+
const externalIconLabel = opensInNewTab && externalLabel !== '' ? externalLabel : undefined;
|
|
18708
|
+
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 &&
|
|
18709
|
+
hAsync("pds-icon", { key: '161657146e5f3ce360480c573ea8f14c9012cb1f', icon: launch, size: this.fontSize, "aria-label": externalIconLabel, "aria-hidden": externalIconLabel === undefined ? 'true' : undefined })));
|
|
18529
18710
|
}
|
|
18530
18711
|
static get style() { return pdsLinkCss(); }
|
|
18531
18712
|
static get cmpMeta() { return {
|
|
@@ -18537,6 +18718,7 @@ class PdsLink {
|
|
|
18537
18718
|
"download": [1],
|
|
18538
18719
|
"componentId": [1, "component-id"],
|
|
18539
18720
|
"external": [4],
|
|
18721
|
+
"externalLabel": [1, "external-label"],
|
|
18540
18722
|
"target": [1],
|
|
18541
18723
|
"variant": [1],
|
|
18542
18724
|
"fontSize": [1, "font-size"],
|
|
@@ -18624,7 +18806,7 @@ class PdsLoader {
|
|
|
18624
18806
|
'aria-live': 'polite',
|
|
18625
18807
|
};
|
|
18626
18808
|
this.hostKeeper.record(hostClass, {}, hostAttributes);
|
|
18627
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
18809
|
+
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..."))));
|
|
18628
18810
|
}
|
|
18629
18811
|
get el() { return getElement(this); }
|
|
18630
18812
|
static get watchers() { return {
|
|
@@ -18648,12 +18830,6 @@ class PdsLoader {
|
|
|
18648
18830
|
}; }
|
|
18649
18831
|
}
|
|
18650
18832
|
|
|
18651
|
-
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}`;
|
|
18652
|
-
|
|
18653
|
-
const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
|
|
18654
|
-
const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
|
|
18655
|
-
/\d/.test(value) &&
|
|
18656
|
-
(typeof CSS === 'undefined' || CSS.supports('max-width', value));
|
|
18657
18833
|
const TABBABLE = [
|
|
18658
18834
|
'a[href]',
|
|
18659
18835
|
'area[href]',
|
|
@@ -18680,7 +18856,8 @@ function collectTabbable(root, found) {
|
|
|
18680
18856
|
const isTabStop = (el) => { var _a; return el.tabIndex >= 0 || (el.isContentEditable && !el.hasAttribute('tabindex') && !((_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.isContentEditable)); };
|
|
18681
18857
|
function visitTabbable(el, found) {
|
|
18682
18858
|
var _a, _b, _c, _d;
|
|
18683
|
-
|
|
18859
|
+
// A tooltip portaled into a dialog only describes the control that has focus; it's never a stop of its own.
|
|
18860
|
+
if (el.hasAttribute('inert') || el.getAttribute('role') === 'tooltip')
|
|
18684
18861
|
return;
|
|
18685
18862
|
if (el.localName === 'slot') {
|
|
18686
18863
|
const slot = el;
|
|
@@ -18735,6 +18912,13 @@ function tabbableIn(root) {
|
|
|
18735
18912
|
});
|
|
18736
18913
|
return oneRadioPerGroup(visible);
|
|
18737
18914
|
}
|
|
18915
|
+
|
|
18916
|
+
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 .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}`;
|
|
18917
|
+
|
|
18918
|
+
const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
|
|
18919
|
+
const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
|
|
18920
|
+
/\d/.test(value) &&
|
|
18921
|
+
(typeof CSS === 'undefined' || CSS.supports('max-width', value));
|
|
18738
18922
|
/** Whether `node` is `ancestor` or inside it, crossing shadow roots, which `Node.contains` doesn't. */
|
|
18739
18923
|
function containsComposed(ancestor, node) {
|
|
18740
18924
|
for (let current = node; current; current = current instanceof ShadowRoot ? current.host : current.parentNode) {
|
|
@@ -19297,14 +19481,14 @@ class PdsModal {
|
|
|
19297
19481
|
}
|
|
19298
19482
|
render() {
|
|
19299
19483
|
const [sizeClass = 'md', customSize] = this.resolveSize();
|
|
19300
|
-
return (hAsync("dialog", { key: '
|
|
19484
|
+
return (hAsync("dialog", { key: 'cd574868a46b69185e2058c60374dbec34677732', class: {
|
|
19301
19485
|
'pds-modal__backdrop': true,
|
|
19302
19486
|
'open': this.open
|
|
19303
|
-
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: '
|
|
19487
|
+
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: '8c50fb4810b4bb07d62348fed44df30b14a52acd', class: {
|
|
19304
19488
|
'pds-modal': true,
|
|
19305
19489
|
[`pds-modal--${sizeClass}`]: true,
|
|
19306
19490
|
'pds-modal--scrollable': this.scrollable
|
|
19307
|
-
}, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '
|
|
19491
|
+
}, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '25a71c95dfeff4648a28edef21bf510b1743ed7c' }))));
|
|
19308
19492
|
}
|
|
19309
19493
|
get el() { return getElement(this); }
|
|
19310
19494
|
static get watchers() { return {
|
|
@@ -19523,10 +19707,10 @@ class PdsModalContent {
|
|
|
19523
19707
|
render() {
|
|
19524
19708
|
// Only apply max-height style if it's not 'none'
|
|
19525
19709
|
const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
|
|
19526
|
-
return (hAsync(Host, { key: '
|
|
19710
|
+
return (hAsync(Host, { key: 'b4200778f186c45a1917646ba2e0e4e623959951' }, hAsync("div", { key: '39eaaf228e5441f5c0fd628c47be079fb4e07e0f', class: {
|
|
19527
19711
|
'pds-modal-content': true,
|
|
19528
19712
|
[`pds-modal-content--border-${this.border}`]: true
|
|
19529
|
-
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '
|
|
19713
|
+
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: 'ac31a9b81941b8b3abbac3a67c25bacaa54e6840' }))));
|
|
19530
19714
|
}
|
|
19531
19715
|
get el() { return getElement(this); }
|
|
19532
19716
|
static get style() { return pdsModalContentCss(); }
|
|
@@ -19557,7 +19741,7 @@ class PdsModalFooter {
|
|
|
19557
19741
|
unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
|
|
19558
19742
|
}
|
|
19559
19743
|
render() {
|
|
19560
|
-
return (hAsync("footer", { key: '
|
|
19744
|
+
return (hAsync("footer", { key: 'c0d50408471355d80759112e63f58c8a34fb7906', class: "pds-modal__footer" }, hAsync("slot", { key: '6566d446457be8b57e37bf1542a5863b0018d233' })));
|
|
19561
19745
|
}
|
|
19562
19746
|
get el() { return getElement(this); }
|
|
19563
19747
|
static get style() { return pdsModalFooterCss(); }
|
|
@@ -19585,7 +19769,7 @@ class PdsModalHeader {
|
|
|
19585
19769
|
unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
|
|
19586
19770
|
}
|
|
19587
19771
|
render() {
|
|
19588
|
-
return (hAsync("header", { key: '
|
|
19772
|
+
return (hAsync("header", { key: 'eb295ff36fd23b7965296b6dfcfcf783a32079a0', class: "pds-modal__header" }, hAsync("slot", { key: '9c97566ff79f8d9b233d814395d5a7e893751a06' })));
|
|
19589
19773
|
}
|
|
19590
19774
|
get el() { return getElement(this); }
|
|
19591
19775
|
static get style() { return pdsModalHeaderCss(); }
|
|
@@ -19906,6 +20090,12 @@ class PdsMultiselect {
|
|
|
19906
20090
|
}
|
|
19907
20091
|
else {
|
|
19908
20092
|
this.closeDropdown();
|
|
20093
|
+
// Tab would move on to an option's checkbox, which closing removes, dropping focus to the page.
|
|
20094
|
+
// Land on the trigger instead, as Escape does; Shift+Tab already reaches it.
|
|
20095
|
+
const trigger = e.shiftKey ? undefined : this.activeTriggerEl;
|
|
20096
|
+
trigger === null || trigger === void 0 ? void 0 : trigger.focus();
|
|
20097
|
+
if (trigger === null || trigger === void 0 ? void 0 : trigger.matches(':focus'))
|
|
20098
|
+
e.preventDefault();
|
|
19909
20099
|
}
|
|
19910
20100
|
break;
|
|
19911
20101
|
}
|
|
@@ -20864,10 +21054,10 @@ class PdsMultiselect {
|
|
|
20864
21054
|
}
|
|
20865
21055
|
render() {
|
|
20866
21056
|
const hasSelections = this.selectedItems.length > 0;
|
|
20867
|
-
return (hAsync(Host, { key: '
|
|
21057
|
+
return (hAsync(Host, { key: '8f1ce5ef092285ce7c0855643fae76a4ec86ee17', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: 'c14c3d52c1d55fb33a89f1a25055728215a1e4ab', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: 'aacd3339b0db2048b31fbc5963f7232bbff78efe', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
|
|
20868
21058
|
'pds-multiselect__label': true,
|
|
20869
21059
|
'visually-hidden': this.hideLabel,
|
|
20870
|
-
} }, this.label)), hAsync("div", { key: '
|
|
21060
|
+
} }, this.label)), hAsync("div", { key: '5e1ef76aa5d46798519e5ac885bfa1c8d7c7106c', 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: {
|
|
20871
21061
|
'pds-multiselect__trigger': true,
|
|
20872
21062
|
'pds-multiselect__trigger--open': this.isOpen,
|
|
20873
21063
|
'pds-multiselect__trigger--disabled': this.disabled,
|
|
@@ -20883,7 +21073,7 @@ class PdsMultiselect {
|
|
|
20883
21073
|
}, 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: {
|
|
20884
21074
|
'pds-multiselect__trigger-text': true,
|
|
20885
21075
|
'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
|
|
20886
|
-
} }, 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: '
|
|
21076
|
+
} }, 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: '590045e4769812a1a2f7a97580d21d95dbe4e872', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: '419f4349b7cb17260f03d2bdcfd777561a62de42', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: 'b922af14c83348607aa9aaaefe9b03b39e71bd42', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'bd08726adf14a42f2ecf0cdfcd390e5639f9fd96', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: '42ad7905fb1816ccdd29b6aa438779929804b368', style: { display: 'none' } }, hAsync("slot", { key: '4f3bf380e93d216790efb0a5de85d6479862350e' })))));
|
|
20887
21077
|
}
|
|
20888
21078
|
static get formAssociated() { return true; }
|
|
20889
21079
|
get el() { return getElement(this); }
|
|
@@ -21021,7 +21211,7 @@ const cssEscape = (value) => {
|
|
|
21021
21211
|
return result;
|
|
21022
21212
|
};
|
|
21023
21213
|
|
|
21024
|
-
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}`;
|
|
21214
|
+
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}`;
|
|
21025
21215
|
|
|
21026
21216
|
/** Open popovers that close on Escape, in the order they opened: Escape goes to the last one it applies to. */
|
|
21027
21217
|
const popoversTakingEscape = [];
|
|
@@ -21029,6 +21219,24 @@ const popoversTakingEscape = [];
|
|
|
21029
21219
|
const HOVER_OPEN_DELAY_MS = 120;
|
|
21030
21220
|
/** Leaving the trigger and panel waits this long before closing, which covers the gap between them. */
|
|
21031
21221
|
const HOVER_CLOSE_DELAY_MS = 200;
|
|
21222
|
+
/**
|
|
21223
|
+
* floating-ui reporting viewport coordinates, as `position: fixed` uses without a containing block. Its own
|
|
21224
|
+
* containing-block check misses a backdrop filter in WebKit, so handlePopoverPositioning corrects for one itself.
|
|
21225
|
+
*/
|
|
21226
|
+
const viewportPlatform = Object.assign(Object.assign({}, platform), { getOffsetParent: () => window });
|
|
21227
|
+
/**
|
|
21228
|
+
* Where `top: 0; left: 0` puts a fixed element beside the given one. An empty probe is measured instead of the
|
|
21229
|
+
* element, whose own transforms, such as an entrance animation, would otherwise read as part of the offset.
|
|
21230
|
+
*/
|
|
21231
|
+
const containingBlockOrigin = (element) => {
|
|
21232
|
+
var _a;
|
|
21233
|
+
const probe = document.createElement('div');
|
|
21234
|
+
probe.style.cssText = 'all: initial; position: fixed; top: 0; left: 0;';
|
|
21235
|
+
(_a = element.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(probe, element);
|
|
21236
|
+
const { top, left } = probe.getBoundingClientRect();
|
|
21237
|
+
probe.remove();
|
|
21238
|
+
return { top, left };
|
|
21239
|
+
};
|
|
21032
21240
|
/** The focused element, followed down through shadow roots to the control that has focus. */
|
|
21033
21241
|
function deepActiveElement() {
|
|
21034
21242
|
var _a;
|
|
@@ -21037,6 +21245,27 @@ function deepActiveElement() {
|
|
|
21037
21245
|
active = active.shadowRoot.activeElement;
|
|
21038
21246
|
return active;
|
|
21039
21247
|
}
|
|
21248
|
+
/** `node`, or the shadow host it sits in, lifted until it shares a tree with `other` or reaches the document. */
|
|
21249
|
+
function liftToTreeOf(node, other) {
|
|
21250
|
+
let current = node;
|
|
21251
|
+
while (current.getRootNode() !== other.getRootNode() && current.getRootNode() instanceof ShadowRoot) {
|
|
21252
|
+
current = current.getRootNode().host;
|
|
21253
|
+
}
|
|
21254
|
+
return current;
|
|
21255
|
+
}
|
|
21256
|
+
/**
|
|
21257
|
+
* Where `node` sits relative to `ref`, as `compareDocumentPosition` reports it. Whichever of the two
|
|
21258
|
+
* is inside a shadow root is lifted to its host first, so a control inside a component compares too.
|
|
21259
|
+
*/
|
|
21260
|
+
function positionAcrossTrees(ref, node) {
|
|
21261
|
+
const lifted = liftToTreeOf(node, ref);
|
|
21262
|
+
return liftToTreeOf(ref, lifted).compareDocumentPosition(lifted);
|
|
21263
|
+
}
|
|
21264
|
+
const isPosition = (position, flag) => (position & Node.DOCUMENT_POSITION_DISCONNECTED) === 0 && (position & flag) !== 0;
|
|
21265
|
+
/** The popover each panel belongs to, so a popover inside another one's panel can find it. */
|
|
21266
|
+
const panelOwners = new WeakMap();
|
|
21267
|
+
/** Floating layers Pine components put at the end of the page or of a dialog, as a popover does its panel. */
|
|
21268
|
+
const FLOATING_LAYERS = '.pds-popover, .pds-datepicker-calendar-portal, .pds-combobox-dropdown-portal';
|
|
21040
21269
|
/**
|
|
21041
21270
|
* @slot trigger - The trigger element for the popover
|
|
21042
21271
|
* @slot (default) - The content to display inside the popover
|
|
@@ -21076,14 +21305,21 @@ class PdsPopover {
|
|
|
21076
21305
|
*/
|
|
21077
21306
|
this.portalEl = null;
|
|
21078
21307
|
/**
|
|
21079
|
-
*
|
|
21308
|
+
* Stops floating-ui's autoUpdate, which repositions the open panel as its trigger or the page moves or resizes
|
|
21309
|
+
*/
|
|
21310
|
+
this.stopAutoUpdate = null;
|
|
21311
|
+
/**
|
|
21312
|
+
* Counts positioning runs, so a run that resolves after a newer one started is dropped
|
|
21313
|
+
*/
|
|
21314
|
+
this.positioningRun = 0;
|
|
21315
|
+
/**
|
|
21316
|
+
* The latest positioning run, which pdsPopoverOpen waits for so the panel's side is set when it fires
|
|
21080
21317
|
*/
|
|
21081
|
-
this.
|
|
21318
|
+
this.positioning = Promise.resolve();
|
|
21082
21319
|
/**
|
|
21083
|
-
*
|
|
21320
|
+
* Set while show() waits to emit pdsPopoverOpen, so a hide() in the meantime emits it first
|
|
21084
21321
|
*/
|
|
21085
|
-
this.
|
|
21086
|
-
this.resizeDebounceTimer = null;
|
|
21322
|
+
this.openEventPending = false;
|
|
21087
21323
|
/**
|
|
21088
21324
|
* Track moved nodes and their placeholders for restoration
|
|
21089
21325
|
*/
|
|
@@ -21104,6 +21340,18 @@ class PdsPopover {
|
|
|
21104
21340
|
* How far the pointer was from the panel at its last move after leaving the trigger
|
|
21105
21341
|
*/
|
|
21106
21342
|
this.panelDistance = Infinity;
|
|
21343
|
+
/**
|
|
21344
|
+
* Stands in for the panel in the Tab order, right after the trigger, while the popover is open
|
|
21345
|
+
*/
|
|
21346
|
+
this.tabGuardEl = null;
|
|
21347
|
+
/**
|
|
21348
|
+
* Set while focus passes through the guard on its way out of the panel
|
|
21349
|
+
*/
|
|
21350
|
+
this.leavingPanel = false;
|
|
21351
|
+
/**
|
|
21352
|
+
* The direction of the Tab key being handled, until its default action has run
|
|
21353
|
+
*/
|
|
21354
|
+
this.tabDirection = null;
|
|
21107
21355
|
/**
|
|
21108
21356
|
* Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
|
|
21109
21357
|
* @defaultValue "show"
|
|
@@ -21157,6 +21405,9 @@ class PdsPopover {
|
|
|
21157
21405
|
else {
|
|
21158
21406
|
this.triggerEl = null;
|
|
21159
21407
|
}
|
|
21408
|
+
// autoUpdate watches the trigger it started with, so an open popover starts it again on the new one.
|
|
21409
|
+
if (this.active)
|
|
21410
|
+
this.addScrollAndResizeListeners();
|
|
21160
21411
|
this.observeTrigger();
|
|
21161
21412
|
};
|
|
21162
21413
|
/**
|
|
@@ -21274,6 +21525,59 @@ class PdsPopover {
|
|
|
21274
21525
|
event.stopPropagation();
|
|
21275
21526
|
}
|
|
21276
21527
|
};
|
|
21528
|
+
// At the end of the body or of a dialog, the panel would come last in the Tab order. The guard
|
|
21529
|
+
// after the trigger takes its place there, while the panel has a control for it to lead to.
|
|
21530
|
+
this.syncTabGuard = (event) => {
|
|
21531
|
+
if (event.key !== 'Tab')
|
|
21532
|
+
return;
|
|
21533
|
+
this.releasePanel();
|
|
21534
|
+
this.tabDirection = event.shiftKey ? 'backward' : 'forward';
|
|
21535
|
+
setTimeout(this.endTabKey);
|
|
21536
|
+
// Read on each Tab, as the panel's content can arrive after it opens.
|
|
21537
|
+
const guarding = this.guardedTabbables().length > 0;
|
|
21538
|
+
if (this.tabGuardEl != null)
|
|
21539
|
+
this.tabGuardEl.tabIndex = guarding ? 0 : -1;
|
|
21540
|
+
// Inert for this key press, the panel is reached only through the guard, either way round. A
|
|
21541
|
+
// control in another floating layer, such as a nested popover's panel, may move focus back into it.
|
|
21542
|
+
const focused = deepActiveElement();
|
|
21543
|
+
if (guarding && !containsComposed$1(this.portalEl, focused) && !closest$1(FLOATING_LAYERS, focused !== null && focused !== void 0 ? focused : document)) {
|
|
21544
|
+
this.portalEl.inert = true;
|
|
21545
|
+
}
|
|
21546
|
+
};
|
|
21547
|
+
this.endTabKey = () => {
|
|
21548
|
+
this.tabDirection = null;
|
|
21549
|
+
this.releasePanel();
|
|
21550
|
+
};
|
|
21551
|
+
this.handleTabGuardFocus = (event) => {
|
|
21552
|
+
if (this.leavingPanel)
|
|
21553
|
+
return;
|
|
21554
|
+
// An inert panel's controls aren't tabbable, so the guard would find none to send focus to.
|
|
21555
|
+
this.releasePanel();
|
|
21556
|
+
const tabbables = this.guardedTabbables();
|
|
21557
|
+
// A Tab press says which end of the panel focus comes in at; without one, where it came from does.
|
|
21558
|
+
const from = event.relatedTarget;
|
|
21559
|
+
const backward = this.tabDirection != null ? this.tabDirection === 'backward' : from != null && this.isAfterPopover(from);
|
|
21560
|
+
const target = backward ? tabbables[tabbables.length - 1] : tabbables[0];
|
|
21561
|
+
// Focus can reach the guard without a Tab keydown here (from a frame, or assistive tech) after
|
|
21562
|
+
// the panel's controls are gone. The trigger is the nearest visible place for it.
|
|
21563
|
+
if (target == null)
|
|
21564
|
+
this.returnFocusToTrigger();
|
|
21565
|
+
else
|
|
21566
|
+
target.focus();
|
|
21567
|
+
};
|
|
21568
|
+
this.handleTabFromPanel = (event) => {
|
|
21569
|
+
if (event.key !== 'Tab' || event.defaultPrevented || this.tabGuardEl == null)
|
|
21570
|
+
return;
|
|
21571
|
+
const tabbables = this.guardedTabbables();
|
|
21572
|
+
const edge = event.shiftKey ? tabbables[0] : tabbables[tabbables.length - 1];
|
|
21573
|
+
if (edge == null || deepActiveElement() !== edge)
|
|
21574
|
+
return;
|
|
21575
|
+
this.leavePanel(edge, event.shiftKey);
|
|
21576
|
+
};
|
|
21577
|
+
this.releasePanel = () => {
|
|
21578
|
+
if (this.portalEl != null)
|
|
21579
|
+
this.portalEl.inert = false;
|
|
21580
|
+
};
|
|
21277
21581
|
}
|
|
21278
21582
|
openOnChanged() {
|
|
21279
21583
|
this.pin();
|
|
@@ -21309,8 +21613,6 @@ class PdsPopover {
|
|
|
21309
21613
|
// Bind event handlers for cleanup
|
|
21310
21614
|
this.boundClickOutsideHandler = this.handleClickOutside.bind(this);
|
|
21311
21615
|
this.boundEscapeKeyHandler = this.handleEscapeKey.bind(this);
|
|
21312
|
-
this.boundScrollHandler = this.handleScroll.bind(this);
|
|
21313
|
-
this.boundResizeHandler = this.handleResize.bind(this);
|
|
21314
21616
|
// Create portal element
|
|
21315
21617
|
this.createPortal();
|
|
21316
21618
|
this.hasLoaded = true;
|
|
@@ -21409,11 +21711,12 @@ class PdsPopover {
|
|
|
21409
21711
|
// is in now, if any.
|
|
21410
21712
|
if (this.active) {
|
|
21411
21713
|
this.placePortal();
|
|
21412
|
-
|
|
21714
|
+
// autoUpdate listens to the scroll containers around where the trigger was, so it starts again.
|
|
21715
|
+
this.addScrollAndResizeListeners();
|
|
21413
21716
|
}
|
|
21414
21717
|
}
|
|
21415
21718
|
disconnectedCallback() {
|
|
21416
|
-
var _a;
|
|
21719
|
+
var _a, _b;
|
|
21417
21720
|
// Moved in one operation (a DOM morph, or a framework reparenting it), the popover is
|
|
21418
21721
|
// already back in the page. Its portal is outside the popover, so it stays open, with focus
|
|
21419
21722
|
// where it was; connectedCallback moves it to follow the popover.
|
|
@@ -21428,6 +21731,7 @@ class PdsPopover {
|
|
|
21428
21731
|
this.restorePortalContent();
|
|
21429
21732
|
this.active = false;
|
|
21430
21733
|
this.linkTriggerToPortal();
|
|
21734
|
+
this.emitOpenEvent();
|
|
21431
21735
|
this.pdsPopoverClose.emit({
|
|
21432
21736
|
componentId: this.componentId,
|
|
21433
21737
|
popoverType: this.popoverType,
|
|
@@ -21444,32 +21748,20 @@ class PdsPopover {
|
|
|
21444
21748
|
this.removeLightDismissListeners();
|
|
21445
21749
|
this.removeScrollAndResizeListeners();
|
|
21446
21750
|
document.removeEventListener('submit', this.handleSubmitFromPanel, true);
|
|
21447
|
-
|
|
21448
|
-
this.
|
|
21751
|
+
document.removeEventListener('keydown', this.syncTabGuard, true);
|
|
21752
|
+
(_b = this.tabGuardEl) === null || _b === void 0 ? void 0 : _b.removeAttribute('tabindex');
|
|
21449
21753
|
this.clearHoverTimers();
|
|
21450
21754
|
this.hoverOpened = false;
|
|
21451
21755
|
// Remove portal from DOM
|
|
21452
21756
|
this.removePortal();
|
|
21453
21757
|
}
|
|
21454
|
-
/**
|
|
21455
|
-
* Clears any pending debounce timers
|
|
21456
|
-
*/
|
|
21457
|
-
clearDebounceTimers() {
|
|
21458
|
-
if (this.scrollDebounceTimer !== null) {
|
|
21459
|
-
clearTimeout(this.scrollDebounceTimer);
|
|
21460
|
-
this.scrollDebounceTimer = null;
|
|
21461
|
-
}
|
|
21462
|
-
if (this.resizeDebounceTimer !== null) {
|
|
21463
|
-
clearTimeout(this.resizeDebounceTimer);
|
|
21464
|
-
this.resizeDebounceTimer = null;
|
|
21465
|
-
}
|
|
21466
|
-
}
|
|
21467
21758
|
createPortal() {
|
|
21468
21759
|
var _a;
|
|
21469
21760
|
if (this.portalEl !== null)
|
|
21470
21761
|
return;
|
|
21471
21762
|
this.portalEl = document.createElement('div');
|
|
21472
21763
|
this.portalEl.className = 'pds-popover';
|
|
21764
|
+
panelOwners.set(this.portalEl, this);
|
|
21473
21765
|
// Apply all styles inline since portal is outside shadow DOM
|
|
21474
21766
|
this.portalEl.style.position = 'fixed';
|
|
21475
21767
|
this.portalEl.style.zIndex = 'var(--pine-z-index-raised)';
|
|
@@ -21496,6 +21788,7 @@ class PdsPopover {
|
|
|
21496
21788
|
// This is done after appending to ensure it's part of the document and can access CSS variables
|
|
21497
21789
|
this.addPortalFocusStyles();
|
|
21498
21790
|
this.listenForHover(this.portalEl);
|
|
21791
|
+
this.portalEl.addEventListener('keydown', this.handleTabFromPanel);
|
|
21499
21792
|
}
|
|
21500
21793
|
/**
|
|
21501
21794
|
* Adds Pine design system focus styles and dark mode border to the portal element
|
|
@@ -21629,15 +21922,10 @@ class PdsPopover {
|
|
|
21629
21922
|
this.portalEl.style.display = 'block';
|
|
21630
21923
|
this.portalEl.style.opacity = '1';
|
|
21631
21924
|
this.portalEl.style.visibility = 'visible';
|
|
21632
|
-
// Position the popover
|
|
21633
|
-
requestAnimationFrame(() => {
|
|
21634
|
-
if (!this.isComponentMounted)
|
|
21635
|
-
return;
|
|
21636
|
-
this.handlePopoverPositioning();
|
|
21637
|
-
});
|
|
21638
|
-
// Add scroll and resize listeners for repositioning (always)
|
|
21925
|
+
// Position the popover now, and again whenever its trigger or the page moves or resizes
|
|
21639
21926
|
this.addScrollAndResizeListeners();
|
|
21640
21927
|
document.addEventListener('submit', this.handleSubmitFromPanel, true);
|
|
21928
|
+
document.addEventListener('keydown', this.syncTabGuard, true);
|
|
21641
21929
|
// Add document listeners for light dismiss and escape key (auto type only), or for the escape
|
|
21642
21930
|
// key alone while hover holds a manual popover open
|
|
21643
21931
|
if (this.popoverType === 'auto') {
|
|
@@ -21648,7 +21936,20 @@ class PdsPopover {
|
|
|
21648
21936
|
popoversTakingEscape.push(this);
|
|
21649
21937
|
document.addEventListener('keydown', this.boundEscapeKeyHandler);
|
|
21650
21938
|
}
|
|
21651
|
-
// Emit open event
|
|
21939
|
+
// Emit open event once the panel is positioned, with the side it took already on it. A reconnect, a
|
|
21940
|
+
// trigger swap or another show() can start a newer run meanwhile, which drops this one, so wait for the latest.
|
|
21941
|
+
this.openEventPending = true;
|
|
21942
|
+
let positioning;
|
|
21943
|
+
do {
|
|
21944
|
+
positioning = this.positioning;
|
|
21945
|
+
await positioning;
|
|
21946
|
+
} while (positioning !== this.positioning);
|
|
21947
|
+
this.emitOpenEvent();
|
|
21948
|
+
}
|
|
21949
|
+
emitOpenEvent() {
|
|
21950
|
+
if (!this.openEventPending)
|
|
21951
|
+
return;
|
|
21952
|
+
this.openEventPending = false;
|
|
21652
21953
|
this.pdsPopoverOpen.emit({
|
|
21653
21954
|
componentId: this.componentId,
|
|
21654
21955
|
popoverType: this.popoverType,
|
|
@@ -21658,6 +21959,7 @@ class PdsPopover {
|
|
|
21658
21959
|
* Closes the popover programmatically
|
|
21659
21960
|
*/
|
|
21660
21961
|
async hide() {
|
|
21962
|
+
var _a;
|
|
21661
21963
|
this.clearHoverTimers();
|
|
21662
21964
|
if (!this.active || !this.portalEl)
|
|
21663
21965
|
return;
|
|
@@ -21673,6 +21975,7 @@ class PdsPopover {
|
|
|
21673
21975
|
// Hide portal. The dark-mode border set in a shadow root is worked out again on the next open.
|
|
21674
21976
|
this.portalEl.style.border = '';
|
|
21675
21977
|
this.portalEl.removeAttribute('data-pds-popover-open');
|
|
21978
|
+
this.portalEl.removeAttribute('data-pds-popover-placement');
|
|
21676
21979
|
this.portalEl.style.display = 'none';
|
|
21677
21980
|
this.portalEl.style.opacity = '0';
|
|
21678
21981
|
this.portalEl.style.visibility = 'hidden';
|
|
@@ -21686,8 +21989,11 @@ class PdsPopover {
|
|
|
21686
21989
|
this.removeLightDismissListeners();
|
|
21687
21990
|
this.removeScrollAndResizeListeners();
|
|
21688
21991
|
document.removeEventListener('submit', this.handleSubmitFromPanel, true);
|
|
21689
|
-
|
|
21690
|
-
this.
|
|
21992
|
+
document.removeEventListener('keydown', this.syncTabGuard, true);
|
|
21993
|
+
(_a = this.tabGuardEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('tabindex');
|
|
21994
|
+
this.releasePanel();
|
|
21995
|
+
// Closed before its first position resolved, it still announces the open before the close.
|
|
21996
|
+
this.emitOpenEvent();
|
|
21691
21997
|
// Emit close event
|
|
21692
21998
|
this.pdsPopoverClose.emit({
|
|
21693
21999
|
componentId: this.componentId,
|
|
@@ -21699,10 +22005,10 @@ class PdsPopover {
|
|
|
21699
22005
|
*/
|
|
21700
22006
|
async toggle() {
|
|
21701
22007
|
if (this.active) {
|
|
21702
|
-
this.hide();
|
|
22008
|
+
await this.hide();
|
|
21703
22009
|
}
|
|
21704
22010
|
else {
|
|
21705
|
-
this.show();
|
|
22011
|
+
await this.show();
|
|
21706
22012
|
}
|
|
21707
22013
|
}
|
|
21708
22014
|
/**
|
|
@@ -21786,19 +22092,62 @@ class PdsPopover {
|
|
|
21786
22092
|
document.removeEventListener('click', this.boundClickOutsideHandler, true);
|
|
21787
22093
|
document.removeEventListener('keydown', this.boundEscapeKeyHandler);
|
|
21788
22094
|
}
|
|
22095
|
+
/**
|
|
22096
|
+
* The panel's controls that Tab reaches through the guard. None when the panel sits right after
|
|
22097
|
+
* the popover, in a dialog, where it's already next in the Tab order.
|
|
22098
|
+
*/
|
|
22099
|
+
guardedTabbables() {
|
|
22100
|
+
if (this.portalEl == null || this.el.nextElementSibling === this.portalEl)
|
|
22101
|
+
return [];
|
|
22102
|
+
return tabbableIn(this.portalEl);
|
|
22103
|
+
}
|
|
22104
|
+
isAfterPopover(node) {
|
|
22105
|
+
if (containsComposed$1(this.el, node))
|
|
22106
|
+
return false;
|
|
22107
|
+
return isPosition(positionAcrossTrees(this.el, node), Node.DOCUMENT_POSITION_FOLLOWING);
|
|
22108
|
+
}
|
|
22109
|
+
/**
|
|
22110
|
+
* Moves focus to the guard without preventing the Tab, so the browser's Tab carries on from there.
|
|
22111
|
+
* Inert until then, the panel can't be where it lands.
|
|
22112
|
+
*/
|
|
22113
|
+
leavePanel(edge, backward) {
|
|
22114
|
+
var _a, _b;
|
|
22115
|
+
this.leavingPanel = true;
|
|
22116
|
+
(_a = this.tabGuardEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
22117
|
+
this.leavingPanel = false;
|
|
22118
|
+
this.portalEl.inert = true;
|
|
22119
|
+
setTimeout(() => this.finishLeavingPanel(edge));
|
|
22120
|
+
// Last in another popover's panel, the guard hands the Tab on to that popover's own guard.
|
|
22121
|
+
const outer = panelOwners.get(closest$1('.pds-popover', this.el));
|
|
22122
|
+
const outerTabbables = (_b = outer === null || outer === void 0 ? void 0 : outer.guardedTabbables()) !== null && _b !== void 0 ? _b : [];
|
|
22123
|
+
if (!backward && outerTabbables[outerTabbables.length - 1] === this.tabGuardEl)
|
|
22124
|
+
outer.leavePanel(edge, false);
|
|
22125
|
+
}
|
|
22126
|
+
// With nowhere for the browser's Tab to go, focus would stay on the invisible guard.
|
|
22127
|
+
finishLeavingPanel(edge) {
|
|
22128
|
+
var _a;
|
|
22129
|
+
this.releasePanel();
|
|
22130
|
+
if (this.active && ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === this.tabGuardEl)
|
|
22131
|
+
edge.focus();
|
|
22132
|
+
}
|
|
21789
22133
|
/**
|
|
21790
22134
|
* Adds scroll and resize listeners for repositioning
|
|
21791
22135
|
*/
|
|
21792
22136
|
addScrollAndResizeListeners() {
|
|
21793
|
-
|
|
21794
|
-
|
|
22137
|
+
this.removeScrollAndResizeListeners();
|
|
22138
|
+
if (this.triggerEl == null || this.portalEl == null)
|
|
22139
|
+
return;
|
|
22140
|
+
this.stopAutoUpdate = autoUpdate(this.triggerEl, this.portalEl, () => {
|
|
22141
|
+
this.positioning = this.handlePopoverPositioning().catch(error => console.warn('pds-popover: failed to position the panel', error));
|
|
22142
|
+
});
|
|
21795
22143
|
}
|
|
21796
22144
|
/**
|
|
21797
22145
|
* Removes scroll and resize listeners
|
|
21798
22146
|
*/
|
|
21799
22147
|
removeScrollAndResizeListeners() {
|
|
21800
|
-
|
|
21801
|
-
|
|
22148
|
+
var _a;
|
|
22149
|
+
(_a = this.stopAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
22150
|
+
this.stopAutoUpdate = null;
|
|
21802
22151
|
}
|
|
21803
22152
|
/**
|
|
21804
22153
|
* Handles clicks outside the popover for light dismiss (auto type only)
|
|
@@ -21862,122 +22211,38 @@ class PdsPopover {
|
|
|
21862
22211
|
this.hide();
|
|
21863
22212
|
}
|
|
21864
22213
|
/**
|
|
21865
|
-
*
|
|
22214
|
+
* Positions the popover relative to its trigger element, flipping to the opposite side when only that side has
|
|
22215
|
+
* room and shifting to stay 8px inside the viewport. The side it takes goes on the panel's `data-pds-popover-placement`.
|
|
21866
22216
|
*/
|
|
21867
|
-
|
|
21868
|
-
|
|
21869
|
-
|
|
21870
|
-
if (this.
|
|
21871
|
-
clearTimeout(this.scrollDebounceTimer);
|
|
21872
|
-
}
|
|
21873
|
-
this.scrollDebounceTimer = setTimeout(() => {
|
|
21874
|
-
this.handlePopoverPositioning();
|
|
21875
|
-
this.scrollDebounceTimer = null;
|
|
21876
|
-
}, 10); // 10ms debounce for smooth repositioning
|
|
21877
|
-
}
|
|
21878
|
-
/**
|
|
21879
|
-
* Handles resize events to reposition the popover (debounced for performance)
|
|
21880
|
-
*/
|
|
21881
|
-
handleResize() {
|
|
21882
|
-
if (!this.active)
|
|
21883
|
-
return;
|
|
21884
|
-
if (this.resizeDebounceTimer !== null) {
|
|
21885
|
-
clearTimeout(this.resizeDebounceTimer);
|
|
21886
|
-
}
|
|
21887
|
-
this.resizeDebounceTimer = setTimeout(() => {
|
|
21888
|
-
this.handlePopoverPositioning();
|
|
21889
|
-
this.resizeDebounceTimer = null;
|
|
21890
|
-
}, 100); // 100ms debounce for resize
|
|
21891
|
-
}
|
|
21892
|
-
/**
|
|
21893
|
-
* Positions the popover relative to its trigger element
|
|
21894
|
-
*/
|
|
21895
|
-
handlePopoverPositioning() {
|
|
21896
|
-
// Prevent repositioning loops
|
|
21897
|
-
if (this.isRepositioning) {
|
|
21898
|
-
return;
|
|
21899
|
-
}
|
|
21900
|
-
this.isRepositioning = true;
|
|
21901
|
-
if (this.triggerEl == null || this.portalEl == null) {
|
|
21902
|
-
this.isRepositioning = false;
|
|
22217
|
+
async handlePopoverPositioning() {
|
|
22218
|
+
// Counted before the guards, so a run still in flight is dropped even when this one can't position.
|
|
22219
|
+
const run = ++this.positioningRun;
|
|
22220
|
+
if (this.triggerEl == null || this.portalEl == null)
|
|
21903
22221
|
return;
|
|
21904
|
-
}
|
|
21905
|
-
const triggerRect = this.triggerEl.getBoundingClientRect();
|
|
21906
|
-
const popoverRect = this.portalEl.getBoundingClientRect();
|
|
21907
22222
|
// Safety check: ensure trigger has valid dimensions (is rendered and visible)
|
|
21908
|
-
|
|
21909
|
-
|
|
22223
|
+
const triggerRect = this.triggerEl.getBoundingClientRect();
|
|
22224
|
+
if (triggerRect.width === 0 || triggerRect.height === 0)
|
|
21910
22225
|
return;
|
|
21911
|
-
|
|
21912
|
-
|
|
21913
|
-
|
|
21914
|
-
|
|
21915
|
-
|
|
21916
|
-
|
|
21917
|
-
|
|
21918
|
-
|
|
21919
|
-
|
|
21920
|
-
|
|
21921
|
-
|
|
21922
|
-
|
|
21923
|
-
break;
|
|
21924
|
-
case 'top-end':
|
|
21925
|
-
top = triggerRect.top - popoverRect.height - offset;
|
|
21926
|
-
left = triggerRect.right - popoverRect.width;
|
|
21927
|
-
break;
|
|
21928
|
-
case 'right':
|
|
21929
|
-
top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
|
|
21930
|
-
left = triggerRect.right + offset;
|
|
21931
|
-
break;
|
|
21932
|
-
case 'right-start':
|
|
21933
|
-
top = triggerRect.top;
|
|
21934
|
-
left = triggerRect.right + offset;
|
|
21935
|
-
break;
|
|
21936
|
-
case 'right-end':
|
|
21937
|
-
top = triggerRect.bottom - popoverRect.height;
|
|
21938
|
-
left = triggerRect.right + offset;
|
|
21939
|
-
break;
|
|
21940
|
-
case 'bottom':
|
|
21941
|
-
top = triggerRect.bottom + offset;
|
|
21942
|
-
left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
|
|
21943
|
-
break;
|
|
21944
|
-
case 'bottom-start':
|
|
21945
|
-
top = triggerRect.bottom + offset;
|
|
21946
|
-
left = triggerRect.left;
|
|
21947
|
-
break;
|
|
21948
|
-
case 'bottom-end':
|
|
21949
|
-
top = triggerRect.bottom + offset;
|
|
21950
|
-
left = triggerRect.right - popoverRect.width;
|
|
21951
|
-
break;
|
|
21952
|
-
case 'left':
|
|
21953
|
-
top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
|
|
21954
|
-
left = triggerRect.left - popoverRect.width - offset;
|
|
21955
|
-
break;
|
|
21956
|
-
case 'left-start':
|
|
21957
|
-
top = triggerRect.top;
|
|
21958
|
-
left = triggerRect.left - popoverRect.width - offset;
|
|
21959
|
-
break;
|
|
21960
|
-
case 'left-end':
|
|
21961
|
-
top = triggerRect.bottom - popoverRect.height;
|
|
21962
|
-
left = triggerRect.left - popoverRect.width - offset;
|
|
21963
|
-
break;
|
|
21964
|
-
}
|
|
21965
|
-
this.portalEl.style.top = `${top}px`;
|
|
21966
|
-
this.portalEl.style.left = `${left}px`;
|
|
22226
|
+
const portal = this.portalEl;
|
|
22227
|
+
const { x: left, y: top, placement } = await computePosition(this.triggerEl, portal, {
|
|
22228
|
+
placement: this.placement,
|
|
22229
|
+
strategy: 'fixed',
|
|
22230
|
+
// With no room on either side, stay on the preferred side: the side that overflows less can still push
|
|
22231
|
+
// a tall panel's start above the viewport.
|
|
22232
|
+
middleware: [offset(8), flip({ fallbackStrategy: 'initialPlacement' }), shift({ padding: 8 })],
|
|
22233
|
+
platform: viewportPlatform,
|
|
22234
|
+
});
|
|
22235
|
+
if (!this.active || run !== this.positioningRun || portal !== this.portalEl)
|
|
22236
|
+
return;
|
|
22237
|
+
portal.setAttribute('data-pds-popover-placement', placement);
|
|
21967
22238
|
// `position: fixed` measures from the viewport unless an ancestor becomes its containing block,
|
|
21968
|
-
// as a modal dialog does with its backdrop filter.
|
|
21969
|
-
const
|
|
21970
|
-
|
|
21971
|
-
|
|
21972
|
-
this.portalEl.style.left = `${2 * left - placed.left}px`;
|
|
21973
|
-
}
|
|
21974
|
-
// Reset the repositioning guard after a short delay
|
|
21975
|
-
setTimeout(() => {
|
|
21976
|
-
this.isRepositioning = false;
|
|
21977
|
-
}, 16); // ~1 frame at 60fps
|
|
22239
|
+
// as a modal dialog does with its backdrop filter. Offset by however far that block's corner is from the viewport's.
|
|
22240
|
+
const origin = containingBlockOrigin(portal);
|
|
22241
|
+
portal.style.top = `${top - origin.top}px`;
|
|
22242
|
+
portal.style.left = `${left - origin.left}px`;
|
|
21978
22243
|
}
|
|
21979
22244
|
render() {
|
|
21980
|
-
return (hAsync(Host, { key: '
|
|
22245
|
+
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 }))));
|
|
21981
22246
|
}
|
|
21982
22247
|
get el() { return getElement(this); }
|
|
21983
22248
|
static get watchers() { return {
|
|
@@ -22050,7 +22315,7 @@ class PdsProgress {
|
|
|
22050
22315
|
const normalizedFillColor = normalizeColorValue$1(this.fillColor);
|
|
22051
22316
|
const hostClass = this.animated ? { 'is-animated': this.animated } : '';
|
|
22052
22317
|
this.hostKeeper.record(hostClass);
|
|
22053
|
-
return (hAsync(Host, { key: '
|
|
22318
|
+
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, "%")));
|
|
22054
22319
|
}
|
|
22055
22320
|
get el() { return getElement(this); }
|
|
22056
22321
|
static get style() { return pdsProgressCss(); }
|
|
@@ -22085,7 +22350,7 @@ class PdsProperty {
|
|
|
22085
22350
|
this.icon = 'star';
|
|
22086
22351
|
}
|
|
22087
22352
|
render() {
|
|
22088
|
-
return (hAsync(Host, { key: '
|
|
22353
|
+
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' }))));
|
|
22089
22354
|
}
|
|
22090
22355
|
static get style() { return pdsPropertyCss(); }
|
|
22091
22356
|
static get cmpMeta() { return {
|
|
@@ -22103,10 +22368,10 @@ class PdsProperty {
|
|
|
22103
22368
|
|
|
22104
22369
|
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)}`;
|
|
22105
22370
|
|
|
22106
|
-
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)}`;
|
|
22371
|
+
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}`;
|
|
22107
22372
|
|
|
22108
22373
|
/**
|
|
22109
|
-
* @slot image - Custom image content to display instead of the default radio input
|
|
22374
|
+
* @slot image - Custom image content to display instead of the default radio input. Ignored when `variant` is `pill`.
|
|
22110
22375
|
* @part image-container - The container for the image
|
|
22111
22376
|
* @lightDom renders-markup
|
|
22112
22377
|
*/
|
|
@@ -22128,7 +22393,7 @@ class PdsRadio {
|
|
|
22128
22393
|
*/
|
|
22129
22394
|
this.disabled = false;
|
|
22130
22395
|
/**
|
|
22131
|
-
* Adds a border around the radio component for better visual separation.
|
|
22396
|
+
* Adds a border around the radio component for better visual separation. Ignored when `variant` is `pill`.
|
|
22132
22397
|
* @defaultValue false
|
|
22133
22398
|
*/
|
|
22134
22399
|
this.hasBorder = false;
|
|
@@ -22142,6 +22407,11 @@ class PdsRadio {
|
|
|
22142
22407
|
* @defaultValue false
|
|
22143
22408
|
*/
|
|
22144
22409
|
this.required = false;
|
|
22410
|
+
/**
|
|
22411
|
+
* 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.
|
|
22412
|
+
* @defaultValue default
|
|
22413
|
+
*/
|
|
22414
|
+
this.variant = 'default';
|
|
22145
22415
|
this.handleRadioChange = (e) => {
|
|
22146
22416
|
if (this.disabled) {
|
|
22147
22417
|
return;
|
|
@@ -22163,6 +22433,9 @@ class PdsRadio {
|
|
|
22163
22433
|
hasImage() {
|
|
22164
22434
|
return this._hasImage;
|
|
22165
22435
|
}
|
|
22436
|
+
isPill() {
|
|
22437
|
+
return this.variant === 'pill';
|
|
22438
|
+
}
|
|
22166
22439
|
classNames() {
|
|
22167
22440
|
const classNames = [];
|
|
22168
22441
|
if (this.invalid) {
|
|
@@ -22171,10 +22444,14 @@ class PdsRadio {
|
|
|
22171
22444
|
if (this.disabled) {
|
|
22172
22445
|
classNames.push('is-disabled');
|
|
22173
22446
|
}
|
|
22174
|
-
|
|
22447
|
+
// A pill is its own bordered shape, so has-border doesn't stack a card around it.
|
|
22448
|
+
if (this.hasBorder && !this.isPill()) {
|
|
22175
22449
|
classNames.push('has-border');
|
|
22176
22450
|
}
|
|
22177
|
-
if (this.
|
|
22451
|
+
if (this.isPill()) {
|
|
22452
|
+
classNames.push('pds-radio--pill');
|
|
22453
|
+
}
|
|
22454
|
+
if (this.hasImage() && !this.isPill()) {
|
|
22178
22455
|
classNames.push('has-image');
|
|
22179
22456
|
}
|
|
22180
22457
|
return classNames.join(' ');
|
|
@@ -22204,13 +22481,14 @@ class PdsRadio {
|
|
|
22204
22481
|
}
|
|
22205
22482
|
render() {
|
|
22206
22483
|
const renderLabelAndMessages = () => [
|
|
22207
|
-
hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: '
|
|
22484
|
+
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)),
|
|
22208
22485
|
this.helperMessage && (hAsync("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
|
|
22209
|
-
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: '
|
|
22486
|
+
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))
|
|
22210
22487
|
];
|
|
22211
22488
|
const hostClass = this.classNames();
|
|
22212
22489
|
this.hostKeeper.record(hostClass);
|
|
22213
|
-
|
|
22490
|
+
const showImage = this.hasImage() && !this.isPill();
|
|
22491
|
+
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())));
|
|
22214
22492
|
}
|
|
22215
22493
|
get el() { return getElement(this); }
|
|
22216
22494
|
static get style() { return labelCss$3() + pdsRadioCss(); }
|
|
@@ -22230,6 +22508,7 @@ class PdsRadio {
|
|
|
22230
22508
|
"name": [1],
|
|
22231
22509
|
"required": [4],
|
|
22232
22510
|
"value": [1],
|
|
22511
|
+
"variant": [1],
|
|
22233
22512
|
"_hasImage": [32]
|
|
22234
22513
|
},
|
|
22235
22514
|
"$listeners$": undefined,
|
|
@@ -22273,6 +22552,7 @@ class PdsRadioGroup {
|
|
|
22273
22552
|
* @defaultValue false
|
|
22274
22553
|
*/
|
|
22275
22554
|
this.required = false;
|
|
22555
|
+
this.hostKeeper = new HostStylingKeeper();
|
|
22276
22556
|
}
|
|
22277
22557
|
handlePropsChange() {
|
|
22278
22558
|
this.updateChildRadios();
|
|
@@ -22324,6 +22604,29 @@ class PdsRadioGroup {
|
|
|
22324
22604
|
}
|
|
22325
22605
|
});
|
|
22326
22606
|
}
|
|
22607
|
+
connectedCallback() {
|
|
22608
|
+
this.hostKeeper.connect(this.el);
|
|
22609
|
+
// A name set while the group was detached never reaches the observer.
|
|
22610
|
+
this.syncName();
|
|
22611
|
+
if (typeof MutationObserver === 'undefined')
|
|
22612
|
+
return;
|
|
22613
|
+
// Consumers can name the group after render (a prop change, an i18n swap, a morph); re-render so their name wins.
|
|
22614
|
+
this.hostAriaObserver = new MutationObserver(() => this.syncName());
|
|
22615
|
+
this.hostAriaObserver.observe(this.el, { attributeFilter: ['aria-label', 'aria-labelledby'] });
|
|
22616
|
+
}
|
|
22617
|
+
disconnectedCallback() {
|
|
22618
|
+
var _a;
|
|
22619
|
+
this.hostKeeper.disconnect();
|
|
22620
|
+
(_a = this.hostAriaObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
22621
|
+
this.hostAriaObserver = undefined;
|
|
22622
|
+
}
|
|
22623
|
+
// Re-renders only when the group's name would change, so its own aria-labelledby write doesn't loop back.
|
|
22624
|
+
syncName() {
|
|
22625
|
+
if (this._groupId === undefined)
|
|
22626
|
+
return;
|
|
22627
|
+
if (this.getAriaLabelledBy() !== this.renderedLabelledBy)
|
|
22628
|
+
;
|
|
22629
|
+
}
|
|
22327
22630
|
componentWillLoad() {
|
|
22328
22631
|
// Generate stable group ID once during initialization
|
|
22329
22632
|
// This ensures DOM stability and accessibility relationships remain consistent across re-renders
|
|
@@ -22337,6 +22640,18 @@ class PdsRadioGroup {
|
|
|
22337
22640
|
: `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
|
|
22338
22641
|
this._groupId = `radio-group-${uniqueId}`;
|
|
22339
22642
|
}
|
|
22643
|
+
// A restored or cloned host still carries the id and ARIA references an earlier instance wrote, pointing at
|
|
22644
|
+
// that instance's label and messages. Drop them so this render writes its own: on first load, Stencil keeps a
|
|
22645
|
+
// host attribute that's already there.
|
|
22646
|
+
const previousId = this.el.getAttribute('id');
|
|
22647
|
+
if (previousId && previousId !== this._groupId) {
|
|
22648
|
+
['aria-labelledby', 'aria-describedby'].forEach((name) => {
|
|
22649
|
+
var _a, _b;
|
|
22650
|
+
const ids = (_b = (_a = this.el.getAttribute(name)) === null || _a === void 0 ? void 0 : _a.split(/\s+/)) !== null && _b !== void 0 ? _b : [];
|
|
22651
|
+
if (ids.some((id) => id.startsWith(`${previousId}__`)))
|
|
22652
|
+
this.el.removeAttribute(name);
|
|
22653
|
+
});
|
|
22654
|
+
}
|
|
22340
22655
|
}
|
|
22341
22656
|
componentDidLoad() {
|
|
22342
22657
|
if (!this.name) {
|
|
@@ -22389,6 +22704,20 @@ class PdsRadioGroup {
|
|
|
22389
22704
|
// Otherwise, assume it's a dimension token like "100", "200", etc.
|
|
22390
22705
|
return `var(--pine-dimension-${this.gap})`;
|
|
22391
22706
|
}
|
|
22707
|
+
get labelId() {
|
|
22708
|
+
return `${this._groupId}__label`;
|
|
22709
|
+
}
|
|
22710
|
+
// Names the group from its visible label, unless the consumer named it with their own aria-label or aria-labelledby.
|
|
22711
|
+
// A blank aria-label (an empty translation, say) names nothing, so it falls back to groupLabel.
|
|
22712
|
+
getAriaLabelledBy() {
|
|
22713
|
+
var _a;
|
|
22714
|
+
const hostLabelledBy = this.el.getAttribute('aria-labelledby');
|
|
22715
|
+
if ((hostLabelledBy === null || hostLabelledBy === void 0 ? void 0 : hostLabelledBy.trim()) && hostLabelledBy !== this.labelId)
|
|
22716
|
+
return hostLabelledBy;
|
|
22717
|
+
if ((_a = this.el.getAttribute('aria-label')) === null || _a === void 0 ? void 0 : _a.trim())
|
|
22718
|
+
return undefined;
|
|
22719
|
+
return this.groupLabel ? this.labelId : undefined;
|
|
22720
|
+
}
|
|
22392
22721
|
getAriaDescribedBy() {
|
|
22393
22722
|
const messageIds = [];
|
|
22394
22723
|
if (this.errorMessage) {
|
|
@@ -22402,13 +22731,23 @@ class PdsRadioGroup {
|
|
|
22402
22731
|
render() {
|
|
22403
22732
|
const gapValue = this.getGapValue();
|
|
22404
22733
|
const ariaDescribedBy = this.getAriaDescribedBy();
|
|
22405
|
-
|
|
22734
|
+
const ariaLabelledBy = this.getAriaLabelledBy();
|
|
22735
|
+
const hostClass = this.classNames();
|
|
22736
|
+
this.renderedLabelledBy = ariaLabelledBy;
|
|
22737
|
+
// A DOM morph strips what the component wrote on its host; put back its role, name and description.
|
|
22738
|
+
// Only its own aria-labelledby, so a consumer's that the server dropped stays dropped.
|
|
22739
|
+
this.hostKeeper.record(hostClass, { '--pds-radio-group-gap': gapValue }, {
|
|
22740
|
+
role: 'radiogroup',
|
|
22741
|
+
'aria-describedby': ariaDescribedBy,
|
|
22742
|
+
'aria-labelledby': ariaLabelledBy === this.labelId ? ariaLabelledBy : undefined,
|
|
22743
|
+
});
|
|
22744
|
+
return (hAsync(Host, { key: '0fe381f99dddae0aeb9189a13b0e2195f1c79886', class: hostClass, id: this._groupId, role: "radiogroup", "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, style: {
|
|
22406
22745
|
'--pds-radio-group-gap': gapValue,
|
|
22407
|
-
} }, this.groupLabel && (hAsync("div", { key: '
|
|
22746
|
+
} }, this.groupLabel && (hAsync("div", { key: '4967dc22fa0265dbfbabf94a49b182b8c06d0bd5', class: "pds-radio-group__label", id: this.labelId }, this.groupLabel)), hAsync("div", { key: '7a782a6920de7eda76ab0060c7512f093671ad41', class: {
|
|
22408
22747
|
'pds-radio-group__radios': true,
|
|
22409
22748
|
'pds-radio-group__radios--row': this.direction === 'row',
|
|
22410
22749
|
'pds-radio-group__radios--column': this.direction === 'column',
|
|
22411
|
-
} }, hAsync("slot", { key: '
|
|
22750
|
+
} }, hAsync("slot", { key: '48a8d2d74961a402e3a1b053b2f0314e74b4b289', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (hAsync("div", { key: '58db96d62b8d89f03ab245990d2d6bbd3b1b5f85', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("div", { key: 'ad3aafe5f7ed45853c36b537525a8fff68452f55', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '80ce92868703c5e01434e7e83a7668e320bcbee1', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
|
|
22412
22751
|
}
|
|
22413
22752
|
get el() { return getElement(this); }
|
|
22414
22753
|
static get watchers() { return {
|
|
@@ -22517,7 +22856,7 @@ class PdsRow {
|
|
|
22517
22856
|
'min-height': this.minHeight,
|
|
22518
22857
|
}));
|
|
22519
22858
|
this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
|
|
22520
|
-
return hAsync(Host, { key: '
|
|
22859
|
+
return hAsync(Host, { key: '589ee3251a4ee1d7824c8e2fa3e214de5466c3db', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
|
|
22521
22860
|
}
|
|
22522
22861
|
get el() { return getElement(this); }
|
|
22523
22862
|
static get style() { return pdsRowCss(); }
|
|
@@ -22547,6 +22886,25 @@ const labelCss$2 = () => `:host{display:inline-block}:host([aria-disabled=true])
|
|
|
22547
22886
|
|
|
22548
22887
|
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}`;
|
|
22549
22888
|
|
|
22889
|
+
/** The tags of an option list in order, optgroup contents included: equal shapes can be patched in place. */
|
|
22890
|
+
const shapeOf = (items) => items.map((item) => item.tagName + (item.tagName === 'OPTGROUP' ? `(${shapeOf(Array.from(item.children))})` : '')).join();
|
|
22891
|
+
/** Brings an existing option or optgroup up to date with its copy, keeping the element itself. */
|
|
22892
|
+
const patchInPlace = (target, copy) => {
|
|
22893
|
+
Array.from(target.attributes).forEach(({ name }) => {
|
|
22894
|
+
if (!copy.hasAttribute(name))
|
|
22895
|
+
target.removeAttribute(name);
|
|
22896
|
+
});
|
|
22897
|
+
Array.from(copy.attributes).forEach(({ name, value }) => {
|
|
22898
|
+
if (target.getAttribute(name) !== value)
|
|
22899
|
+
target.setAttribute(name, value);
|
|
22900
|
+
});
|
|
22901
|
+
if (copy.tagName === 'OPTGROUP') {
|
|
22902
|
+
Array.from(copy.children).forEach((child, index) => patchInPlace(target.children[index], child));
|
|
22903
|
+
}
|
|
22904
|
+
else if (target.textContent !== copy.textContent) {
|
|
22905
|
+
target.textContent = copy.textContent;
|
|
22906
|
+
}
|
|
22907
|
+
};
|
|
22550
22908
|
/**
|
|
22551
22909
|
* @slot action - Content to be displayed in the label area, typically for help icons or links
|
|
22552
22910
|
*/
|
|
@@ -22558,6 +22916,9 @@ class PdsSelect {
|
|
|
22558
22916
|
this.pdsFocus = createEvent(this, "pdsFocus");
|
|
22559
22917
|
this.pdsKeyDown = createEvent(this, "pdsKeyDown");
|
|
22560
22918
|
this._type = 'select-one';
|
|
22919
|
+
this.optionObserver = null;
|
|
22920
|
+
this.optionSyncFrame = null;
|
|
22921
|
+
this.hasHadOptions = false;
|
|
22561
22922
|
this.hostKeeper = new HostStylingKeeper();
|
|
22562
22923
|
/**
|
|
22563
22924
|
* Indicates whether or not the select field is disabled.
|
|
@@ -22574,6 +22935,16 @@ class PdsSelect {
|
|
|
22574
22935
|
* @defaultValue false
|
|
22575
22936
|
*/
|
|
22576
22937
|
this.required = false;
|
|
22938
|
+
/**
|
|
22939
|
+
* Whether a mutation is inside an option or optgroup. The host's own attributes and children
|
|
22940
|
+
* (top-level adds and removes reach `slotchange`) and the action slot's content are not.
|
|
22941
|
+
*/
|
|
22942
|
+
this.touchesOption = ({ target }) => {
|
|
22943
|
+
// Not just TEXT_NODE: characterData also reports comment nodes, and a Comment has no
|
|
22944
|
+
// .closest() — treating anything non-Element as a Text node crashed on one.
|
|
22945
|
+
const element = target.nodeType === Node.ELEMENT_NODE ? target : target.parentElement;
|
|
22946
|
+
return target !== this.el && (element === null || element === void 0 ? void 0 : element.closest('option, optgroup')) != null;
|
|
22947
|
+
};
|
|
22577
22948
|
/**
|
|
22578
22949
|
* Emits an event on input change.
|
|
22579
22950
|
*/
|
|
@@ -22600,25 +22971,47 @@ class PdsSelect {
|
|
|
22600
22971
|
this.pdsKeyDown.emit(ev);
|
|
22601
22972
|
};
|
|
22602
22973
|
/**
|
|
22603
|
-
*
|
|
22604
|
-
*
|
|
22605
|
-
*
|
|
22606
|
-
*
|
|
22974
|
+
* Copies the slotted <option> and <optgroup> elements into the inner select, then
|
|
22975
|
+
* reselects the current value. Runs on `slotchange` and when a slotted option changes
|
|
22976
|
+
* (see startOptionSync).
|
|
22977
|
+
*
|
|
22978
|
+
* Nothing happens when the copies match what the select already holds. When only text or
|
|
22979
|
+
* attributes changed, the select's own options are updated in place rather than replaced,
|
|
22980
|
+
* so an open picker keeps its highlight, a multiple select keeps its range anchor, and a
|
|
22981
|
+
* screen reader keeps its place. Selecting programmatically fires no change event, so a
|
|
22982
|
+
* copy never emits `pdsSelectChange`.
|
|
22607
22983
|
*/
|
|
22608
22984
|
this.handleSlotChange = () => {
|
|
22609
|
-
|
|
22610
|
-
this.
|
|
22611
|
-
|
|
22612
|
-
|
|
22613
|
-
|
|
22614
|
-
|
|
22615
|
-
|
|
22616
|
-
|
|
22617
|
-
|
|
22618
|
-
|
|
22619
|
-
|
|
22620
|
-
|
|
22985
|
+
var _a;
|
|
22986
|
+
const slot = (_a = this.slotContainer) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
|
|
22987
|
+
if (slot === null || slot === undefined || this.selectEl === undefined)
|
|
22988
|
+
return;
|
|
22989
|
+
const copies = slot.assignedElements({ flatten: true })
|
|
22990
|
+
.filter((item) => ['OPTION', 'OPTGROUP'].includes(item.tagName))
|
|
22991
|
+
.map((item) => item.cloneNode(true));
|
|
22992
|
+
const current = Array.from(this.selectEl.children);
|
|
22993
|
+
// The very first copy populates an empty select, where falling back to the first option (like
|
|
22994
|
+
// a native select) is correct; the no-match blank state is for options changing under a value
|
|
22995
|
+
// that was already showing selected. Tracked separately from the select's current emptiness:
|
|
22996
|
+
// an async reload that clears options before the next set lands would otherwise look like a
|
|
22997
|
+
// first render again, and the no-match state must still apply once that next set arrives.
|
|
22998
|
+
const hadOptions = this.hasHadOptions;
|
|
22999
|
+
if (copies.length > 0)
|
|
23000
|
+
this.hasHadOptions = true;
|
|
23001
|
+
const markup = (items) => items.map((item) => item.outerHTML).join('');
|
|
23002
|
+
if (markup(copies) === markup(current))
|
|
23003
|
+
return;
|
|
23004
|
+
if (shapeOf(copies) === shapeOf(current)) {
|
|
23005
|
+
copies.forEach((copy, index) => patchInPlace(current[index], copy));
|
|
23006
|
+
}
|
|
23007
|
+
else {
|
|
23008
|
+
this.selectEl.innerHTML = '';
|
|
23009
|
+
copies.forEach((copy) => this.selectEl.appendChild(copy));
|
|
23010
|
+
}
|
|
22621
23011
|
this.updateSelectedOption();
|
|
23012
|
+
if (hadOptions)
|
|
23013
|
+
this.showNoSelectionWithoutMatch();
|
|
23014
|
+
this.updateFormValue();
|
|
22622
23015
|
};
|
|
22623
23016
|
}
|
|
22624
23017
|
/**
|
|
@@ -22647,9 +23040,16 @@ class PdsSelect {
|
|
|
22647
23040
|
}
|
|
22648
23041
|
// Expose type property on the element instance to match native form element behavior
|
|
22649
23042
|
exposeTypeProperty(this.el, () => this._type);
|
|
23043
|
+
// Reconnected after a move: componentDidLoad won't run again, and options may have changed
|
|
23044
|
+
// while it was out of the document.
|
|
23045
|
+
if (this.selectEl !== undefined) {
|
|
23046
|
+
this.startOptionSync();
|
|
23047
|
+
this.scheduleOptionSync();
|
|
23048
|
+
}
|
|
22650
23049
|
}
|
|
22651
23050
|
disconnectedCallback() {
|
|
22652
23051
|
this.hostKeeper.disconnect();
|
|
23052
|
+
this.stopOptionSync();
|
|
22653
23053
|
}
|
|
22654
23054
|
componentWillLoad() {
|
|
22655
23055
|
// Set initial type based on multiple prop
|
|
@@ -22659,6 +23059,43 @@ class PdsSelect {
|
|
|
22659
23059
|
componentDidLoad() {
|
|
22660
23060
|
// Set initial form value
|
|
22661
23061
|
this.updateFormValue();
|
|
23062
|
+
// Stencil holds componentDidLoad until the shadow root's pds-icon has loaded, so options can
|
|
23063
|
+
// change between the first slotchange copy and here with nothing observing yet — the same gap
|
|
23064
|
+
// the reconnect path closes with a catch-up sync.
|
|
23065
|
+
this.startOptionSync();
|
|
23066
|
+
this.scheduleOptionSync();
|
|
23067
|
+
}
|
|
23068
|
+
/**
|
|
23069
|
+
* Keeps the inner select in step with the slotted options. `slotchange` only fires when
|
|
23070
|
+
* top-level options are added or removed, so an option's text, value or disabled state
|
|
23071
|
+
* changing, or an option added inside an optgroup, would otherwise never reach the select.
|
|
23072
|
+
* Changes are batched into one copy per animation frame.
|
|
23073
|
+
*/
|
|
23074
|
+
startOptionSync() {
|
|
23075
|
+
if (this.optionObserver !== null || typeof MutationObserver === 'undefined' || !this.el.isConnected)
|
|
23076
|
+
return;
|
|
23077
|
+
this.optionObserver = new MutationObserver((mutations) => {
|
|
23078
|
+
if (mutations.some(this.touchesOption))
|
|
23079
|
+
this.scheduleOptionSync();
|
|
23080
|
+
});
|
|
23081
|
+
this.optionObserver.observe(this.el, { childList: true, subtree: true, attributes: true, characterData: true });
|
|
23082
|
+
}
|
|
23083
|
+
scheduleOptionSync() {
|
|
23084
|
+
if (this.optionSyncFrame !== null)
|
|
23085
|
+
return;
|
|
23086
|
+
this.optionSyncFrame = requestAnimationFrame(() => {
|
|
23087
|
+
this.optionSyncFrame = null;
|
|
23088
|
+
this.handleSlotChange();
|
|
23089
|
+
});
|
|
23090
|
+
}
|
|
23091
|
+
stopOptionSync() {
|
|
23092
|
+
var _a;
|
|
23093
|
+
(_a = this.optionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
23094
|
+
this.optionObserver = null;
|
|
23095
|
+
if (this.optionSyncFrame !== null) {
|
|
23096
|
+
cancelAnimationFrame(this.optionSyncFrame);
|
|
23097
|
+
this.optionSyncFrame = null;
|
|
23098
|
+
}
|
|
22662
23099
|
}
|
|
22663
23100
|
/**
|
|
22664
23101
|
* Updates the selected option in the select element based on the current value.
|
|
@@ -22684,6 +23121,19 @@ class PdsSelect {
|
|
|
22684
23121
|
});
|
|
22685
23122
|
}
|
|
22686
23123
|
}
|
|
23124
|
+
/**
|
|
23125
|
+
* After a copy that changes an existing option set, a value whose option was renamed or removed
|
|
23126
|
+
* has nothing to select. Like a native select, show nothing selected rather than the first
|
|
23127
|
+
* option; the value itself is kept, with no change event.
|
|
23128
|
+
*/
|
|
23129
|
+
showNoSelectionWithoutMatch() {
|
|
23130
|
+
var _a;
|
|
23131
|
+
const wanted = [].concat((_a = this.value) !== null && _a !== void 0 ? _a : []).filter((value) => value !== '');
|
|
23132
|
+
const options = Array.from(this.selectEl.options);
|
|
23133
|
+
if (wanted.length > 0 && !options.some((option) => wanted.includes(option.value))) {
|
|
23134
|
+
this.selectEl.selectedIndex = -1;
|
|
23135
|
+
}
|
|
23136
|
+
}
|
|
22687
23137
|
getHelperMessage() {
|
|
22688
23138
|
return this.helperMessage && (hAsync("p", { class: "pds-select__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage));
|
|
22689
23139
|
}
|
|
@@ -22789,7 +23239,7 @@ class PdsSelect {
|
|
|
22789
23239
|
'has-action': hasAction && !this.hideLabel ? 'true' : null,
|
|
22790
23240
|
};
|
|
22791
23241
|
this.hostKeeper.record(hostClass, {}, hostAttributes);
|
|
22792
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
23242
|
+
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 }))));
|
|
22793
23243
|
}
|
|
22794
23244
|
static get formAssociated() { return true; }
|
|
22795
23245
|
get el() { return getElement(this); }
|
|
@@ -25548,7 +25998,7 @@ class PdsSortable {
|
|
|
25548
25998
|
render() {
|
|
25549
25999
|
const classNames = this.classNames();
|
|
25550
26000
|
this.hostKeeper.record(classNames);
|
|
25551
|
-
return (hAsync(Host, { key: '
|
|
26001
|
+
return (hAsync(Host, { key: '6e9e7b769f57ebfd81541fbecbe17b3fb4ad3e47', class: classNames, id: this.componentId }, hAsync("slot", { key: 'c9466a216862c0a3e578f3fcfc1ac1e26146722b' })));
|
|
25552
26002
|
}
|
|
25553
26003
|
get el() { return getElement(this); }
|
|
25554
26004
|
static get watchers() { return {
|
|
@@ -25623,7 +26073,7 @@ class PdsSortableItem {
|
|
|
25623
26073
|
}
|
|
25624
26074
|
render() {
|
|
25625
26075
|
this.hostKeeper.record('pds-sortable-item');
|
|
25626
|
-
return (hAsync(Host, { key: '
|
|
26076
|
+
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" })))));
|
|
25627
26077
|
}
|
|
25628
26078
|
get el() { return getElement(this); }
|
|
25629
26079
|
static get style() { return pdsSortableItemCss(); }
|
|
@@ -25758,9 +26208,9 @@ class PdsSwitch {
|
|
|
25758
26208
|
const hostClass = this.switchClassNames();
|
|
25759
26209
|
const ariaDisabled = this.disabled ? 'true' : null;
|
|
25760
26210
|
this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
|
|
25761
|
-
return (hAsync(Host, { key: '
|
|
25762
|
-
hAsync("div", { key: '
|
|
25763
|
-
hAsync("div", { key: '
|
|
26211
|
+
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 &&
|
|
26212
|
+
hAsync("div", { key: 'ef829fb6bc66060805a144995f60e2bebb915615', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
26213
|
+
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)));
|
|
25764
26214
|
}
|
|
25765
26215
|
static get formAssociated() { return true; }
|
|
25766
26216
|
get el() { return getElement(this); }
|
|
@@ -26184,7 +26634,7 @@ class PdsTableBody {
|
|
|
26184
26634
|
registerInstance(this, hostRef);
|
|
26185
26635
|
}
|
|
26186
26636
|
render() {
|
|
26187
|
-
return (hAsync(Host, { key: '
|
|
26637
|
+
return (hAsync(Host, { key: '4f1cba9505f56ff1ab0a19f9a88318d66a02eacc', role: "rowgroup", part: "body" }, hAsync("slot", { key: 'ea0c620a15fcbe2915189e870d0815c5cbffdf8c' })));
|
|
26188
26638
|
}
|
|
26189
26639
|
static get style() { return pdsTableBodyCss(); }
|
|
26190
26640
|
static get cmpMeta() { return {
|
|
@@ -26342,11 +26792,11 @@ class PdsTableCell {
|
|
|
26342
26792
|
return classNames.join(' ');
|
|
26343
26793
|
}
|
|
26344
26794
|
render() {
|
|
26345
|
-
return (hAsync(Host, { key: '
|
|
26795
|
+
return (hAsync(Host, { key: 'fd84150bcb9bd5d2029624394d4f69b0a7234bc0', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
|
|
26346
26796
|
this.tableRef.fixedColumn &&
|
|
26347
26797
|
this.tableRef.selectable
|
|
26348
26798
|
? { '--fixed-cell-position': '40px' }
|
|
26349
|
-
: {} }, hAsync("slot", { key: '
|
|
26799
|
+
: {} }, hAsync("slot", { key: '9256f033ec58b9cb2acc74d705acc9726507668b' })));
|
|
26350
26800
|
}
|
|
26351
26801
|
get hostElement() { return getElement(this); }
|
|
26352
26802
|
static get watchers() { return {
|
|
@@ -26415,7 +26865,7 @@ class PdsTableHead {
|
|
|
26415
26865
|
}
|
|
26416
26866
|
}
|
|
26417
26867
|
render() {
|
|
26418
|
-
return (hAsync(Host, { key: '
|
|
26868
|
+
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' })));
|
|
26419
26869
|
}
|
|
26420
26870
|
get hostElement() { return getElement(this); }
|
|
26421
26871
|
static get style() { return pdsTableHeadCss(); }
|
|
@@ -26636,11 +27086,11 @@ class PdsTableHeadCell {
|
|
|
26636
27086
|
return classNames.join(' ');
|
|
26637
27087
|
}
|
|
26638
27088
|
render() {
|
|
26639
|
-
return (hAsync(Host, { key: '
|
|
27089
|
+
return (hAsync(Host, { key: 'd609309180968913315c1428d0403c3974a4bfc0', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
|
|
26640
27090
|
this.tableRef.fixedColumn &&
|
|
26641
27091
|
this.tableRef.selectable
|
|
26642
27092
|
? { '--fixed-cell-position': '40px' }
|
|
26643
|
-
: {} }, hAsync("slot", { key: '
|
|
27093
|
+
: {} }, 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" }))));
|
|
26644
27094
|
}
|
|
26645
27095
|
get hostElement() { return getElement(this); }
|
|
26646
27096
|
static get style() { return pdsTableHeadCellCss(); }
|
|
@@ -26806,7 +27256,7 @@ class PdsTableRow {
|
|
|
26806
27256
|
}
|
|
26807
27257
|
}
|
|
26808
27258
|
render() {
|
|
26809
|
-
return (hAsync(Host, { key: '
|
|
27259
|
+
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' })));
|
|
26810
27260
|
}
|
|
26811
27261
|
get hostElement() { return getElement(this); }
|
|
26812
27262
|
static get style() { return pdsTableRowCss(); }
|
|
@@ -26860,7 +27310,7 @@ class PdsTabpanel {
|
|
|
26860
27310
|
// The docs show consumers omitting `slot`, so server HTML doesn't carry it — a DOM morph
|
|
26861
27311
|
// that strips it (and the stretch-active class) leaves this panel unslotted. Put both back.
|
|
26862
27312
|
this.hostKeeper.record(hostClass, {}, { slot: 'tabpanels' });
|
|
26863
|
-
return (hAsync(Host, { key: '
|
|
27313
|
+
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' }))));
|
|
26864
27314
|
}
|
|
26865
27315
|
get el() { return getElement(this); }
|
|
26866
27316
|
static get style() { return pdsTabpanelCss(); }
|
|
@@ -27159,7 +27609,7 @@ class PdsTabs {
|
|
|
27159
27609
|
// Only the classes: `active-tab-name` backs the mutable activeTabName prop, so a morph that drops
|
|
27160
27610
|
// it is a prop change, not a strip.
|
|
27161
27611
|
this.hostKeeper.record(hostClass);
|
|
27162
|
-
return (hAsync(Host, { key: '
|
|
27612
|
+
return (hAsync(Host, { key: '08ac02be358bebbd95dd5edca30cd99789445f50', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, hAsync("slot", { key: '02395c056f80f46f1fa9117eafde68ef170b4188', name: "tabpanels" })));
|
|
27163
27613
|
}
|
|
27164
27614
|
get el() { return getElement(this); }
|
|
27165
27615
|
static get style() { return pdsTabsCss(); }
|
|
@@ -27203,6 +27653,9 @@ const TEXT_SIZES = [
|
|
|
27203
27653
|
|
|
27204
27654
|
const pdsTextCss = () => `:host{display:inline}:host([decoration=underline-dotted])>*{-webkit-text-decoration-color:var(--pine-color-text-tertiary);text-decoration-color:var(--pine-color-text-tertiary);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-decoration-thickness:12%;text-underline-offset:0.3rem;text-underline-position:under}:host([decoration=strikethrough])>*{text-decoration:line-through}h1{font:var(--pine-typography-heading-1);letter-spacing:var(--pine-letter-spacing-heading-1)}h2{font:var(--pine-typography-heading-2);letter-spacing:var(--pine-letter-spacing-heading-2)}h3{font:var(--pine-typography-heading-3);letter-spacing:var(--pine-letter-spacing-heading-3)}h4{font:var(--pine-typography-heading-4);letter-spacing:var(--pine-letter-spacing-heading-4)}h5{font:var(--pine-typography-heading-5);letter-spacing:var(--pine-letter-spacing-heading-5)}h6{font:var(--pine-typography-heading-6);letter-spacing:var(--pine-letter-spacing-heading-6)}code,em,p,pre,strong{font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing)}code,pre{font-family:monospace;letter-spacing:0;line-height:1}em{font-style:normal}strong{font-weight:bolder}:host([truncate]){display:block;min-width:0}:host([truncate])>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([italic])>*{font-style:italic}.pds-text{color:var(--color, var(--pine-color-text));margin:var(--pine-dimension-none)}.pds-text--size-2xl{font-size:var(--pine-font-size-body-2xl)}.pds-text--size-xl{font-size:var(--pine-font-size-body-xl)}.pds-text--size-lg{font-size:var(--pine-font-size-body-lg)}.pds-text--size-md{font-size:var(--pine-font-size-body-md)}.pds-text--size-sm{font-size:var(--pine-font-size-body-sm)}.pds-text--size-xs{font-size:var(--pine-font-size-body-xs)}.pds-text--size-2xs{font-size:var(--pine-font-size-body-2xs)}.pds-text--size-h1{font-size:var(--pine-font-size-heading-1)}.pds-text--size-h2{font-size:var(--pine-font-size-heading-2)}.pds-text--size-h3{font-size:var(--pine-font-size-heading-3)}.pds-text--size-h4{font-size:var(--pine-font-size-heading-4)}.pds-text--size-h5{font-size:var(--pine-font-size-heading-5)}.pds-text--size-h6{font-size:var(--pine-font-size-heading-6)}.pds-text--weight-extra-light{font-weight:var(--pine-font-weight-extra-light)}.pds-text--weight-light{font-weight:var(--pine-font-weight-light)}.pds-text--weight-regular{font-weight:var(--pine-font-weight-regular)}.pds-text--weight-medium{font-weight:var(--pine-font-weight-medium)}.pds-text--weight-semibold{font-weight:var(--pine-font-weight-semi-bold)}.pds-text--weight-bold{font-weight:var(--pine-font-weight-bold)}.pds-text--gutter-2xl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}.pds-text--gutter-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-text--gutter-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-text--gutter-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-text--gutter-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-text--gutter-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-text--gutter-2xs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-text--align-start{text-align:start}.pds-text--align-center{text-align:center}.pds-text--align-end{text-align:end}.pds-text--align-justify{text-align:justify}`;
|
|
27205
27655
|
|
|
27656
|
+
// Re-runs setup for each text bound to its wrapping control, keyed by host, so a truncated
|
|
27657
|
+
// text that joins the same control later can take that control's focus away from it.
|
|
27658
|
+
const textsUsingWrapper = new WeakMap();
|
|
27206
27659
|
/**
|
|
27207
27660
|
* @part content - The text content container
|
|
27208
27661
|
*/
|
|
@@ -27257,17 +27710,39 @@ class PdsText {
|
|
|
27257
27710
|
this.destroyTruncationTooltip();
|
|
27258
27711
|
}
|
|
27259
27712
|
initTruncationTooltip() {
|
|
27713
|
+
var _a;
|
|
27260
27714
|
// Clean up any existing tooltip before setting up a new one
|
|
27261
27715
|
this.destroyTruncationTooltip();
|
|
27262
27716
|
if (this.contentEl) {
|
|
27717
|
+
const wrapper = this.el.closest(FOCUSABLE_WRAPPER);
|
|
27718
|
+
// A pds-chip with a max width binds its tooltip to the wrapper too.
|
|
27719
|
+
const others = wrapper === null ? [] : wrapper.querySelectorAll('pds-text, pds-chip');
|
|
27720
|
+
// One focus on a shared wrapper would open every clipped text's tooltip at once, so texts sharing one each keep
|
|
27721
|
+
// their own stop, and a text bound before this one joined lets go: this one's focus bubbles to the wrapper too.
|
|
27722
|
+
let sharesWrapper = false;
|
|
27723
|
+
for (let i = 0; i < others.length; i++) {
|
|
27724
|
+
const other = others[i];
|
|
27725
|
+
// The property counts too: setting `truncate` runs setup before the next render reflects the attribute.
|
|
27726
|
+
if (other !== this.el && (other.truncate || other.maxWidth || other.hasAttribute('truncate') || other.hasAttribute('max-width'))) {
|
|
27727
|
+
sharesWrapper = true;
|
|
27728
|
+
(_a = textsUsingWrapper.get(other)) === null || _a === void 0 ? void 0 : _a();
|
|
27729
|
+
}
|
|
27730
|
+
}
|
|
27731
|
+
const usesWrapper = wrapper !== null && !sharesWrapper;
|
|
27263
27732
|
this.truncationCleanup = setupTruncationTooltip({
|
|
27264
27733
|
hostEl: this.el,
|
|
27265
27734
|
contentEl: this.contentEl,
|
|
27266
27735
|
getTooltipText: () => this.el.textContent || '',
|
|
27736
|
+
// A wrapping link or button already takes focus, so its focus reveals the text instead of a nested tab stop.
|
|
27737
|
+
manageTabIndex: !usesWrapper,
|
|
27738
|
+
focusEl: usesWrapper ? wrapper : this.el,
|
|
27267
27739
|
});
|
|
27740
|
+
if (usesWrapper)
|
|
27741
|
+
textsUsingWrapper.set(this.el, () => this.initTruncationTooltip());
|
|
27268
27742
|
}
|
|
27269
27743
|
}
|
|
27270
27744
|
destroyTruncationTooltip() {
|
|
27745
|
+
textsUsingWrapper.delete(this.el);
|
|
27271
27746
|
if (this.truncationCleanup) {
|
|
27272
27747
|
this.truncationCleanup();
|
|
27273
27748
|
this.truncationCleanup = null;
|
|
@@ -27293,7 +27768,7 @@ class PdsText {
|
|
|
27293
27768
|
? `pds-text--decoration-${this.decoration}`
|
|
27294
27769
|
: ''}
|
|
27295
27770
|
`;
|
|
27296
|
-
return (hAsync(Tag, { key: '
|
|
27771
|
+
return (hAsync(Tag, { key: '30566c7810d3fd7f76ae281ae6d9a7e66803f0a3', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: 'f5113458aa9295803fc1c0bc552f9f92602cacba' })));
|
|
27297
27772
|
}
|
|
27298
27773
|
get el() { return getElement(this); }
|
|
27299
27774
|
static get watchers() { return {
|
|
@@ -27639,10 +28114,10 @@ class PdsTextarea {
|
|
|
27639
28114
|
}
|
|
27640
28115
|
render() {
|
|
27641
28116
|
const value = this.getValue();
|
|
27642
|
-
return (hAsync(Host, { key: '
|
|
27643
|
-
hAsync("div", { key: '
|
|
27644
|
-
hAsync("p", { key: '
|
|
27645
|
-
hAsync("p", { key: '
|
|
28117
|
+
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 &&
|
|
28118
|
+
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 &&
|
|
28119
|
+
hAsync("p", { key: '811065b7ce7b45d902d821dbceb25fef4231db94', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
|
|
28120
|
+
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))));
|
|
27646
28121
|
}
|
|
27647
28122
|
static get formAssociated() { return true; }
|
|
27648
28123
|
get el() { return getElement(this); }
|
|
@@ -27690,7 +28165,7 @@ class PdsTextarea {
|
|
|
27690
28165
|
}; }
|
|
27691
28166
|
}
|
|
27692
28167
|
|
|
27693
|
-
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;}`;
|
|
28168
|
+
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}`;
|
|
27694
28169
|
|
|
27695
28170
|
/** Fallback when computed `--animation-duration` is unavailable (matches `--pine-motion-duration-slow`). */
|
|
27696
28171
|
const TOAST_DISMISS_ANIMATION_MS = 300;
|
|
@@ -27812,17 +28287,23 @@ class PdsToast {
|
|
|
27812
28287
|
if (this.type === 'loading') {
|
|
27813
28288
|
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" }))));
|
|
27814
28289
|
}
|
|
27815
|
-
//
|
|
27816
|
-
|
|
28290
|
+
// Decorative: inside role="alert" an icon name would be read out with the
|
|
28291
|
+
// message. Severity is announced as text instead (see severityLabel).
|
|
28292
|
+
return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon", "aria-hidden": "true" });
|
|
28293
|
+
}
|
|
28294
|
+
severityText() {
|
|
28295
|
+
var _a;
|
|
28296
|
+
return (_a = this.severityLabel) !== null && _a !== void 0 ? _a : (this.type === 'danger' ? 'Error' : undefined);
|
|
27817
28297
|
}
|
|
27818
28298
|
render() {
|
|
27819
|
-
|
|
28299
|
+
const severity = this.severityText();
|
|
28300
|
+
return (hAsync(Host, { key: '4c4077add1843ab84674dfa49fb963df55f1c432', hidden: !this.isVisible }, hAsync("div", { key: '0d819ac123de625604d3b1aa0f9391366b4d0289', class: {
|
|
27820
28301
|
'pds-toast': true,
|
|
27821
28302
|
[`pds-toast--${this.type}`]: this.type !== 'default',
|
|
27822
28303
|
'pds-toast--animating-out': this.isAnimatingOut
|
|
27823
|
-
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '
|
|
28304
|
+
}, 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: () => {
|
|
27824
28305
|
this.dismiss();
|
|
27825
|
-
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '
|
|
28306
|
+
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '1b26a6a842868a5b1e55b7110c755edc7f830ba5', name: "remove", "aria-hidden": "true" }))))));
|
|
27826
28307
|
}
|
|
27827
28308
|
get el() { return getElement(this); }
|
|
27828
28309
|
static get watchers() { return {
|
|
@@ -27841,6 +28322,7 @@ class PdsToast {
|
|
|
27841
28322
|
"icon": [1],
|
|
27842
28323
|
"type": [1],
|
|
27843
28324
|
"dismissLabel": [1, "dismiss-label"],
|
|
28325
|
+
"severityLabel": [1, "severity-label"],
|
|
27844
28326
|
"isVisible": [32],
|
|
27845
28327
|
"isAnimatingOut": [32],
|
|
27846
28328
|
"dismiss": [64]
|
|
@@ -27851,7 +28333,7 @@ class PdsToast {
|
|
|
27851
28333
|
}; }
|
|
27852
28334
|
}
|
|
27853
28335
|
|
|
27854
|
-
const pdsTooltipCss = () => `.pds-tooltip{--tooltip-border-width-arrow-down:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-left:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-right:var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-border-width-arrow-up:0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-sizing-arrow:6px;--tooltip-sizing-arrow-offset:14px;--tooltip-dimension-max-width:320px}.pds-tooltip__content{background-color:var(--pine-color-primary);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);max-width:var(--tooltip-dimension-max-width);opacity:0;padding:var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);position:relative;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:var(--pine-z-index-raised)}.pds-tooltip.pds-tooltip--has-html-content .pds-tooltip__content{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--tooltip-border-width-arrow-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);bottom:var(--tooltip-sizing-arrow-offset);left:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:initial;right:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);bottom:var(--tooltip-sizing-arrow-offset);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:50%;top:calc(var(--tooltip-sizing-arrow) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:initial;right:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}`;
|
|
28336
|
+
const pdsTooltipCss = () => `.pds-tooltip{--tooltip-border-width-arrow-down:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-left:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-right:var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-border-width-arrow-up:0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-sizing-arrow:6px;--tooltip-sizing-arrow-offset:14px;--tooltip-dimension-max-width:320px}:is(dialog,[popover])>.pds-tooltip{font-style:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0;text-transform:none;white-space:normal;word-spacing:normal}.pds-tooltip__content{background-color:var(--pine-color-primary);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);max-width:var(--tooltip-dimension-max-width);opacity:0;padding:var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);position:relative;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:var(--pine-z-index-raised)}.pds-tooltip.pds-tooltip--has-html-content .pds-tooltip__content{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--tooltip-border-width-arrow-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);bottom:var(--tooltip-sizing-arrow-offset);left:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:initial;right:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);bottom:var(--tooltip-sizing-arrow-offset);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:50%;top:calc(var(--tooltip-sizing-arrow) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:initial;right:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}`;
|
|
27855
28337
|
|
|
27856
28338
|
/**
|
|
27857
28339
|
* @slot (default) - The tooltip's target element
|
|
@@ -27870,10 +28352,13 @@ class PdsTooltip {
|
|
|
27870
28352
|
this.resolvedPlacement = 'right';
|
|
27871
28353
|
this.triggerEl = null;
|
|
27872
28354
|
this.contentDiv = null;
|
|
28355
|
+
this.lastCopiedHtml = null;
|
|
27873
28356
|
this.slotMutationObserver = null;
|
|
28357
|
+
this.contentSyncFrame = null;
|
|
27874
28358
|
this.currentPathname = '';
|
|
27875
28359
|
this.pathnameCheckInterval = null;
|
|
27876
28360
|
this.stopAutoUpdate = null;
|
|
28361
|
+
this.stopWatchingPortalHost = null;
|
|
27877
28362
|
/**
|
|
27878
28363
|
* Determines whether or not the tooltip has an arrow
|
|
27879
28364
|
* @defaultValue true
|
|
@@ -27937,6 +28422,25 @@ class PdsTooltip {
|
|
|
27937
28422
|
this.handleSpaNavigation();
|
|
27938
28423
|
}
|
|
27939
28424
|
};
|
|
28425
|
+
this.scheduleContentSync = () => {
|
|
28426
|
+
if (this.contentSyncFrame !== null)
|
|
28427
|
+
return;
|
|
28428
|
+
this.contentSyncFrame = requestAnimationFrame(() => {
|
|
28429
|
+
this.contentSyncFrame = null;
|
|
28430
|
+
if (this.portalEl === null || this.contentDiv === null)
|
|
28431
|
+
return;
|
|
28432
|
+
const copy = this.copySlottedContent();
|
|
28433
|
+
const strippedCopy = this.strippedHtml(copy);
|
|
28434
|
+
if (strippedCopy === this.lastCopiedHtml)
|
|
28435
|
+
return;
|
|
28436
|
+
this.lastCopiedHtml = strippedCopy;
|
|
28437
|
+
this.contentDiv.textContent = '';
|
|
28438
|
+
this.contentDiv.append(...Array.from(copy.childNodes));
|
|
28439
|
+
this.repositionPortal().catch(error => {
|
|
28440
|
+
console.warn('Failed to reposition tooltip after a content change:', error);
|
|
28441
|
+
});
|
|
28442
|
+
});
|
|
28443
|
+
};
|
|
27940
28444
|
}
|
|
27941
28445
|
handleOpenToggle(newValue, oldValue) {
|
|
27942
28446
|
if (newValue === false && oldValue === true) {
|
|
@@ -27951,16 +28455,6 @@ class PdsTooltip {
|
|
|
27951
28455
|
window.addEventListener('pageshow', this.handlePageShow);
|
|
27952
28456
|
this.currentPathname = window.location.pathname;
|
|
27953
28457
|
this.triggerEl = this.el.querySelector('.pds-tooltip__trigger');
|
|
27954
|
-
const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');
|
|
27955
|
-
if (contentSlotWrapper !== null) {
|
|
27956
|
-
this.slotMutationObserver = new MutationObserver(() => {
|
|
27957
|
-
if (this.opened && this.portalEl !== null) {
|
|
27958
|
-
this.removePortal();
|
|
27959
|
-
this.createPortal();
|
|
27960
|
-
}
|
|
27961
|
-
});
|
|
27962
|
-
this.slotMutationObserver.observe(contentSlotWrapper, { childList: true, subtree: false });
|
|
27963
|
-
}
|
|
27964
28458
|
// no return; Stencil ignores teardown functions here
|
|
27965
28459
|
}
|
|
27966
28460
|
connectedCallback() {
|
|
@@ -27968,10 +28462,6 @@ class PdsTooltip {
|
|
|
27968
28462
|
}
|
|
27969
28463
|
disconnectedCallback() {
|
|
27970
28464
|
window.removeEventListener('pageshow', this.handlePageShow);
|
|
27971
|
-
if (this.slotMutationObserver !== null) {
|
|
27972
|
-
this.slotMutationObserver.disconnect();
|
|
27973
|
-
this.slotMutationObserver = null;
|
|
27974
|
-
}
|
|
27975
28465
|
// Ensure global listeners/intervals are removed if still present
|
|
27976
28466
|
if (this.portalEl !== null) {
|
|
27977
28467
|
this.removePortal();
|
|
@@ -28114,33 +28604,16 @@ class PdsTooltip {
|
|
|
28114
28604
|
this.contentDiv.className = 'pds-tooltip__content';
|
|
28115
28605
|
this.contentDiv.setAttribute('aria-hidden', this.opened ? 'false' : 'true');
|
|
28116
28606
|
this.contentDiv.setAttribute('aria-live', this.opened ? 'polite' : 'off');
|
|
28117
|
-
const
|
|
28118
|
-
|
|
28119
|
-
|
|
28120
|
-
if (slottedContentContainer !== null) {
|
|
28121
|
-
const childrenToClone = Array.from(slottedContentContainer.childNodes);
|
|
28122
|
-
if (childrenToClone.length > 0) {
|
|
28123
|
-
const hasMeaningfulNode = childrenToClone.some(node => {
|
|
28124
|
-
var _a;
|
|
28125
|
-
return node.nodeType === Node.ELEMENT_NODE ||
|
|
28126
|
-
(node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
|
|
28127
|
-
});
|
|
28128
|
-
if (hasMeaningfulNode) {
|
|
28129
|
-
hasSlottedContent = true;
|
|
28130
|
-
childrenToClone.forEach((node /*, index*/) => {
|
|
28131
|
-
var _a;
|
|
28132
|
-
if (node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '')) {
|
|
28133
|
-
this.contentDiv.appendChild(node.cloneNode(true));
|
|
28134
|
-
}
|
|
28135
|
-
});
|
|
28136
|
-
}
|
|
28137
|
-
}
|
|
28138
|
-
}
|
|
28139
|
-
if (!hasSlottedContent && typeof this.content === 'string' && this.content.trim() !== '') {
|
|
28140
|
-
this.contentDiv.textContent = this.content;
|
|
28141
|
-
}
|
|
28607
|
+
const initialCopy = this.copySlottedContent();
|
|
28608
|
+
this.lastCopiedHtml = this.strippedHtml(initialCopy);
|
|
28609
|
+
this.contentDiv.append(...Array.from(initialCopy.childNodes));
|
|
28142
28610
|
this.portalEl.appendChild(this.contentDiv);
|
|
28143
|
-
|
|
28611
|
+
// Nothing in the body paints above a modal dialog or open popover, so the portal goes inside one.
|
|
28612
|
+
const portalHost = findPortalTarget(this.el, isTopLayerInDocument);
|
|
28613
|
+
portalHost.appendChild(this.portalEl);
|
|
28614
|
+
// Closing that host moves no pointer, so a tooltip opened by touch would outlive it unseen.
|
|
28615
|
+
if (portalHost !== document.body)
|
|
28616
|
+
this.stopWatchingPortalHost = onTopLayerClose(portalHost, this.handleHide);
|
|
28144
28617
|
this.repositionPortal().catch(error => {
|
|
28145
28618
|
console.warn('Failed to position tooltip on creation:', error);
|
|
28146
28619
|
});
|
|
@@ -28161,13 +28634,102 @@ class PdsTooltip {
|
|
|
28161
28634
|
if (this.triggerEl !== null && this.portalEl.id !== '') {
|
|
28162
28635
|
this.triggerEl.setAttribute('aria-describedby', this.portalEl.id);
|
|
28163
28636
|
}
|
|
28637
|
+
this.startContentSync();
|
|
28638
|
+
}
|
|
28639
|
+
/**
|
|
28640
|
+
* The host's own content slot wrapper. Matched among direct children only, so a nested
|
|
28641
|
+
* pds-tooltip inside the trigger slot isn't mistaken for this one's.
|
|
28642
|
+
*/
|
|
28643
|
+
get contentSlotWrapper() {
|
|
28644
|
+
return Array.from(this.el.children).find((child) => child.matches('.pds-tooltip__content-slot-wrapper'));
|
|
28645
|
+
}
|
|
28646
|
+
/**
|
|
28647
|
+
* Copies the slotted content (or the `content` prop's text) into a detached container. The
|
|
28648
|
+
* portal holds copies so the framework that owns the slotted nodes keeps them.
|
|
28649
|
+
*/
|
|
28650
|
+
copySlottedContent() {
|
|
28651
|
+
var _a, _b;
|
|
28652
|
+
const copy = document.createElement('div');
|
|
28653
|
+
const slottedContentContainer = (_a = this.contentSlotWrapper) === null || _a === void 0 ? void 0 : _a.querySelector('[slot="content"]');
|
|
28654
|
+
const meaningfulNodes = Array.from((_b = slottedContentContainer === null || slottedContentContainer === void 0 ? void 0 : slottedContentContainer.childNodes) !== null && _b !== void 0 ? _b : []).filter(node => {
|
|
28655
|
+
var _a;
|
|
28656
|
+
return node.nodeType === Node.ELEMENT_NODE ||
|
|
28657
|
+
(node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
|
|
28658
|
+
});
|
|
28659
|
+
meaningfulNodes.forEach(node => copy.appendChild(node.cloneNode(true)));
|
|
28660
|
+
if (meaningfulNodes.length === 0 && typeof this.content === 'string' && this.content.trim() !== '') {
|
|
28661
|
+
copy.textContent = this.content;
|
|
28662
|
+
}
|
|
28663
|
+
return copy;
|
|
28664
|
+
}
|
|
28665
|
+
/**
|
|
28666
|
+
* While the tooltip is open, keeps the portal's copy in step with the slotted content at any
|
|
28667
|
+
* depth: content that loads or re-renders after opening shows without reopening. Changes are
|
|
28668
|
+
* batched to one re-copy per animation frame, and a re-copy that matches the last one shown is
|
|
28669
|
+
* dropped, so screen readers aren't re-announced, iframes don't reload and the tooltip isn't
|
|
28670
|
+
* repositioned for nothing. Only the hidden slot wrapper is observed, so copying into the portal
|
|
28671
|
+
* can't trigger another sync.
|
|
28672
|
+
*/
|
|
28673
|
+
startContentSync() {
|
|
28674
|
+
const contentSlotWrapper = this.contentSlotWrapper;
|
|
28675
|
+
if (contentSlotWrapper === undefined || typeof MutationObserver === 'undefined')
|
|
28676
|
+
return;
|
|
28677
|
+
this.slotMutationObserver = new MutationObserver(this.scheduleContentSync);
|
|
28678
|
+
this.slotMutationObserver.observe(contentSlotWrapper, {
|
|
28679
|
+
childList: true,
|
|
28680
|
+
subtree: true,
|
|
28681
|
+
attributes: true,
|
|
28682
|
+
characterData: true,
|
|
28683
|
+
});
|
|
28684
|
+
}
|
|
28685
|
+
/**
|
|
28686
|
+
* A copy's serialized HTML with Stencil's own hydration and scope classes removed from every
|
|
28687
|
+
* `pds-*` descendant, so a nested component finishing hydration (or re-hydrating once reconnected
|
|
28688
|
+
* inside the portal) isn't mistaken for a real content change. Without this, that class-only
|
|
28689
|
+
* difference fails the equality check above and triggers a recopy that replaces still-loaded
|
|
28690
|
+
* nodes — reloading any iframe or media the slotted content held.
|
|
28691
|
+
*/
|
|
28692
|
+
strippedHtml(root) {
|
|
28693
|
+
const clone = root.cloneNode(true);
|
|
28694
|
+
clone.querySelectorAll('*').forEach((el) => {
|
|
28695
|
+
// isStencilClass is host-scoped (its own doc: "another sc- class may be a consumer's"), so it
|
|
28696
|
+
// only applies to pds-* elements — the same check keepPineHydrated makes before using it.
|
|
28697
|
+
if (!el.localName.startsWith('pds-'))
|
|
28698
|
+
return;
|
|
28699
|
+
// Not `el.className`: on an SVG element that's an SVGAnimatedString, not a string,
|
|
28700
|
+
// so classNamesOf would silently drop its classes from the comparison. The `class`
|
|
28701
|
+
// attribute is a plain string on every element, SVG included.
|
|
28702
|
+
const kept = classNamesOf(el.getAttribute('class') || '').filter((name) => !isStencilClass(el, name));
|
|
28703
|
+
if (kept.length === 0) {
|
|
28704
|
+
el.removeAttribute('class');
|
|
28705
|
+
}
|
|
28706
|
+
else {
|
|
28707
|
+
el.setAttribute('class', kept.join(' '));
|
|
28708
|
+
}
|
|
28709
|
+
});
|
|
28710
|
+
return clone.innerHTML;
|
|
28711
|
+
}
|
|
28712
|
+
stopContentSync() {
|
|
28713
|
+
if (this.slotMutationObserver !== null) {
|
|
28714
|
+
this.slotMutationObserver.disconnect();
|
|
28715
|
+
this.slotMutationObserver = null;
|
|
28716
|
+
}
|
|
28717
|
+
if (this.contentSyncFrame !== null) {
|
|
28718
|
+
cancelAnimationFrame(this.contentSyncFrame);
|
|
28719
|
+
this.contentSyncFrame = null;
|
|
28720
|
+
}
|
|
28164
28721
|
}
|
|
28165
28722
|
removePortal() {
|
|
28723
|
+
this.stopContentSync();
|
|
28166
28724
|
// Stop Floating UI's autoUpdate
|
|
28167
28725
|
if (this.stopAutoUpdate !== null) {
|
|
28168
28726
|
this.stopAutoUpdate();
|
|
28169
28727
|
this.stopAutoUpdate = null;
|
|
28170
28728
|
}
|
|
28729
|
+
if (this.stopWatchingPortalHost !== null) {
|
|
28730
|
+
this.stopWatchingPortalHost();
|
|
28731
|
+
this.stopWatchingPortalHost = null;
|
|
28732
|
+
}
|
|
28171
28733
|
// Stop pathname change detection
|
|
28172
28734
|
if (this.pathnameCheckInterval !== null) {
|
|
28173
28735
|
clearInterval(this.pathnameCheckInterval);
|
|
@@ -28194,12 +28756,13 @@ class PdsTooltip {
|
|
|
28194
28756
|
this.triggerEl.removeAttribute('aria-describedby');
|
|
28195
28757
|
}
|
|
28196
28758
|
this.contentDiv = null;
|
|
28759
|
+
this.lastCopiedHtml = null;
|
|
28197
28760
|
}
|
|
28198
28761
|
render() {
|
|
28199
28762
|
const hostId = this.componentId || undefined;
|
|
28200
|
-
return (hAsync(Host, { key: '
|
|
28763
|
+
return (hAsync(Host, { key: '475ff12d4be035e3effa894353e7948b42a23489', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '3375dfb5bb86ba373bc5d617f4a53171505631d1', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
|
|
28201
28764
|
/* focusin/out bubble; ensure keyboard users see tooltips */
|
|
28202
|
-
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '
|
|
28765
|
+
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: 'a3392ad415f5ac7f3883100bf914484ffcc8e536' })), hAsync("div", { key: '774ac2c4808e96649b1536569aaf8cf8a6e3abc2', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: '672c64b4acdb365623885ac2105a9b90b1dcfa6b', name: "content" }))));
|
|
28203
28766
|
}
|
|
28204
28767
|
get el() { return getElement(this); }
|
|
28205
28768
|
static get watchers() { return {
|