@pine-ds/core 4.8.0 → 4.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/attributes.js +1 -1
- package/components/floating-ui.dom.js +1 -1
- package/components/index.js +1 -1
- package/components/index2.js +1 -1
- package/components/keep-hydrated.js +1 -0
- package/components/mock-pds-modal.js +1 -1
- package/components/pds-alert.js +1 -1
- package/components/pds-avatar.js +1 -1
- package/components/pds-box2.js +1 -1
- package/components/pds-button2.js +1 -1
- package/components/pds-checkbox2.js +1 -1
- package/components/pds-chip2.js +1 -1
- package/components/pds-combobox.js +1 -1
- package/components/pds-container.js +1 -1
- package/components/pds-copytext.js +1 -1
- package/components/pds-datepicker.js +1 -1
- package/components/pds-divider.js +1 -1
- package/components/pds-drawer-content.js +1 -1
- package/components/pds-drawer-footer.js +1 -1
- package/components/pds-drawer-header.js +1 -1
- package/components/pds-drawer.js +1 -1
- package/components/pds-dropdown-menu-item.js +1 -1
- package/components/pds-dropdown-menu-separator.js +1 -1
- package/components/pds-dropdown-menu.js +1 -1
- package/components/pds-filter.js +1 -1
- package/components/pds-filters.js +1 -1
- package/components/pds-image.js +1 -1
- package/components/pds-input2.js +1 -1
- package/components/pds-link2.js +1 -1
- package/components/pds-loader2.js +1 -1
- package/components/pds-modal-content.js +1 -1
- package/components/pds-modal-footer.js +1 -1
- package/components/pds-modal-header.js +1 -1
- package/components/pds-modal2.js +1 -1
- package/components/pds-multiselect.js +1 -1
- package/components/pds-popover.js +1 -1
- package/components/pds-progress.js +1 -1
- package/components/pds-property.js +1 -1
- package/components/pds-radio-group.js +1 -1
- package/components/pds-radio.js +1 -1
- package/components/pds-row.js +1 -1
- package/components/pds-select.js +1 -1
- package/components/pds-sortable-item.js +1 -1
- package/components/pds-sortable.js +2 -2
- package/components/pds-switch.js +1 -1
- package/components/pds-table-body.js +1 -1
- package/components/pds-table-cell2.js +1 -1
- package/components/pds-table-head-cell2.js +1 -1
- package/components/pds-table-head.js +1 -1
- package/components/pds-table-row.js +1 -1
- package/components/pds-tabpanel.js +1 -1
- package/components/pds-tabs.js +1 -1
- package/components/pds-text2.js +1 -1
- package/components/pds-textarea.js +1 -1
- package/components/pds-toast.js +1 -1
- package/components/pds-tooltip.js +1 -1
- package/components/tabbable.js +1 -0
- package/dist/cjs/{attributes-BJ7KBHql.js → attributes-CW49XqaL.js} +1 -1
- package/dist/cjs/{floating-ui.dom-Dc8Anyel.js → floating-ui.dom-Dw41zbyY.js} +1 -0
- package/dist/cjs/{index-jl_Q819j.js → index-BsWY_xEJ.js} +1 -1
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/{keep-hydrated-CiXgkEYd.js → keep-hydrated-AKoh0DG4.js} +1 -0
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/cjs/mock-pds-modal.cjs.entry.js +3 -3
- package/dist/cjs/pds-accordion.cjs.entry.js +2 -2
- package/dist/cjs/pds-alert.cjs.entry.js +17 -4
- package/dist/cjs/pds-avatar.cjs.entry.js +21 -11
- package/dist/cjs/pds-box.cjs.entry.js +4 -4
- package/dist/cjs/pds-button.cjs.entry.js +57 -25
- package/dist/cjs/pds-checkbox.cjs.entry.js +15 -7
- package/dist/cjs/pds-chip.cjs.entry.js +6 -6
- 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 +6 -6
- package/dist/cjs/pds-datepicker.cjs.entry.js +5 -5
- 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 +3 -3
- package/dist/cjs/pds-filters.cjs.entry.js +3 -3
- package/dist/cjs/pds-icon.cjs.entry.js +2 -2
- package/dist/cjs/pds-image.cjs.entry.js +4 -4
- package/dist/cjs/pds-input.cjs.entry.js +5 -5
- package/dist/cjs/pds-link.cjs.entry.js +14 -5
- 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 +8 -88
- package/dist/cjs/pds-multiselect.cjs.entry.js +6 -6
- 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 +5 -5
- package/dist/cjs/pds-radio.cjs.entry.js +23 -10
- package/dist/cjs/pds-row.cjs.entry.js +4 -4
- package/dist/cjs/pds-select.cjs.entry.js +131 -20
- package/dist/cjs/pds-sortable-item.cjs.entry.js +4 -4
- package/dist/cjs/pds-sortable.cjs.entry.js +4 -4
- package/dist/cjs/pds-switch.cjs.entry.js +6 -6
- package/dist/cjs/pds-tab.cjs.entry.js +3 -3
- package/dist/cjs/pds-table-body.cjs.entry.js +3 -3
- package/dist/cjs/pds-table-cell.cjs.entry.js +6 -6
- package/dist/cjs/pds-table-head-cell.cjs.entry.js +4 -4
- package/dist/cjs/pds-table-head.cjs.entry.js +3 -3
- package/dist/cjs/pds-table-row.cjs.entry.js +3 -3
- package/dist/cjs/pds-table.cjs.entry.js +2 -2
- package/dist/cjs/pds-tabpanel.cjs.entry.js +4 -4
- package/dist/cjs/pds-tabs.cjs.entry.js +4 -4
- package/dist/cjs/pds-text.cjs.entry.js +5 -5
- package/dist/cjs/pds-textarea.cjs.entry.js +7 -7
- package/dist/cjs/pds-toast.cjs.entry.js +14 -8
- package/dist/cjs/pds-tooltip.cjs.entry.js +115 -44
- package/dist/cjs/pine-core.cjs.js +3 -3
- package/dist/cjs/tabbable-CddSt_Hi.js +85 -0
- package/dist/cjs/{truncation-tooltip-BtuiXLV0.js → truncation-tooltip-O5nQmXPw.js} +1 -1
- 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 +1 -1
- 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/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.js +34 -3
- package/dist/collection/components/pds-link/stories/pds-link.stories.js +3 -2
- package/dist/collection/components/pds-loader/pds-loader.js +1 -1
- package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js +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.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 +3 -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 +3 -3
- package/dist/collection/components/pds-radio-group/stories/pds-radio-group.stories.js +45 -0
- package/dist/collection/components/pds-row/pds-row.js +1 -1
- package/dist/collection/components/pds-select/pds-select.js +128 -17
- package/dist/collection/components/pds-select/stories/pds-select.stories.js +2 -2
- package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js +1 -1
- package/dist/collection/components/pds-sortable/pds-sortable.js +1 -1
- package/dist/collection/components/pds-switch/pds-switch.js +3 -3
- package/dist/collection/components/pds-table/pds-table-body/pds-table-body.js +1 -1
- package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js +2 -2
- package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js +1 -1
- package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js +2 -2
- package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js +1 -1
- package/dist/collection/components/pds-table/stories/pds-table.stories.js +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 +1 -1
- package/dist/collection/components/pds-textarea/pds-textarea.js +4 -4
- package/dist/collection/components/pds-textarea/stories/pds-textarea.stories.js +2 -2
- package/dist/collection/components/pds-toast/pds-toast.css +13 -0
- package/dist/collection/components/pds-toast/pds-toast.js +33 -5
- package/dist/collection/components/pds-toast/stories/pds-toast.stories.js +4 -1
- package/dist/collection/components/pds-tooltip/pds-tooltip.js +113 -41
- package/dist/collection/utils/aria-references.js +42 -0
- package/dist/collection/utils/tabbable.js +81 -0
- package/dist/docs.json +244 -7
- package/dist/esm/{attributes-WXw_I_uJ.js → attributes-DkeVeN0g.js} +1 -1
- package/dist/esm/{floating-ui.dom-BPqJgIq6.js → floating-ui.dom-Cuc0DYlm.js} +1 -1
- package/dist/esm/{index-Cw9J31qd.js → index-BFSwd-GQ.js} +1 -1
- package/dist/esm/{index-BWDu62Mo.js → index-m3pqpeWg.js} +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/{keep-hydrated-BLG6RDBt.js → keep-hydrated-BgNaWLoS.js} +1 -1
- package/dist/esm/loader.js +4 -4
- package/dist/esm/mock-pds-modal.entry.js +3 -3
- package/dist/esm/pds-accordion.entry.js +3 -3
- package/dist/esm/pds-alert.entry.js +17 -4
- package/dist/esm/pds-avatar.entry.js +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 +7 -7
- 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 +7 -7
- package/dist/esm/pds-datepicker.entry.js +6 -6
- package/dist/esm/pds-divider.entry.js +3 -3
- package/dist/esm/pds-drawer-content.entry.js +3 -3
- package/dist/esm/pds-drawer-footer.entry.js +3 -3
- package/dist/esm/pds-drawer-header.entry.js +3 -3
- package/dist/esm/pds-drawer.entry.js +4 -4
- package/dist/esm/pds-dropdown-menu-item.entry.js +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 +2 -2
- package/dist/esm/pds-image.entry.js +4 -4
- package/dist/esm/pds-input.entry.js +6 -6
- package/dist/esm/pds-link.entry.js +15 -6
- package/dist/esm/pds-loader.entry.js +4 -4
- package/dist/esm/pds-modal-content.entry.js +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 +6 -86
- package/dist/esm/pds-multiselect.entry.js +7 -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 +6 -6
- package/dist/esm/pds-radio.entry.js +24 -11
- package/dist/esm/pds-row.entry.js +4 -4
- package/dist/esm/pds-select.entry.js +132 -21
- package/dist/esm/pds-sortable-item.entry.js +5 -5
- package/dist/esm/pds-sortable.entry.js +4 -4
- package/dist/esm/pds-switch.entry.js +7 -7
- package/dist/esm/pds-tab.entry.js +3 -3
- package/dist/esm/pds-table-body.entry.js +3 -3
- package/dist/esm/pds-table-cell.entry.js +6 -6
- package/dist/esm/pds-table-head-cell.entry.js +5 -5
- package/dist/esm/pds-table-head.entry.js +3 -3
- package/dist/esm/pds-table-row.entry.js +3 -3
- package/dist/esm/pds-table.entry.js +2 -2
- package/dist/esm/pds-tabpanel.entry.js +4 -4
- package/dist/esm/pds-tabs.entry.js +4 -4
- package/dist/esm/pds-text.entry.js +5 -5
- package/dist/esm/pds-textarea.entry.js +8 -8
- package/dist/esm/pds-toast.entry.js +14 -8
- package/dist/esm/pds-tooltip.entry.js +115 -44
- package/dist/esm/pine-core.js +4 -4
- package/dist/esm/tabbable-DCKBKRUy.js +83 -0
- package/dist/esm/{truncation-tooltip-FaW67DiY.js → truncation-tooltip-D_gvhB9r.js} +1 -1
- package/dist/esm-es5/{attributes-WXw_I_uJ.js → attributes-DkeVeN0g.js} +1 -1
- package/dist/esm-es5/{floating-ui.dom-BPqJgIq6.js → floating-ui.dom-Cuc0DYlm.js} +1 -1
- package/dist/esm-es5/{index-Cw9J31qd.js → index-BFSwd-GQ.js} +2 -2
- package/dist/esm-es5/{index-BWDu62Mo.js → index-m3pqpeWg.js} +1 -1
- package/dist/esm-es5/index.js +1 -1
- package/dist/esm-es5/{keep-hydrated-BLG6RDBt.js → keep-hydrated-BgNaWLoS.js} +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mock-pds-modal.entry.js +1 -1
- package/dist/esm-es5/pds-accordion.entry.js +1 -1
- package/dist/esm-es5/pds-alert.entry.js +1 -1
- package/dist/esm-es5/pds-avatar.entry.js +1 -1
- package/dist/esm-es5/pds-box.entry.js +1 -1
- package/dist/esm-es5/pds-button.entry.js +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js +1 -1
- package/dist/esm-es5/pds-chip.entry.js +1 -1
- package/dist/esm-es5/pds-combobox.entry.js +2 -2
- package/dist/esm-es5/pds-container.entry.js +1 -1
- package/dist/esm-es5/pds-copytext.entry.js +1 -1
- package/dist/esm-es5/pds-datepicker.entry.js +1 -1
- package/dist/esm-es5/pds-divider.entry.js +1 -1
- package/dist/esm-es5/pds-drawer-content.entry.js +1 -1
- package/dist/esm-es5/pds-drawer-footer.entry.js +1 -1
- package/dist/esm-es5/pds-drawer-header.entry.js +1 -1
- package/dist/esm-es5/pds-drawer.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu-item.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu-separator.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu.entry.js +1 -1
- package/dist/esm-es5/pds-filter.entry.js +1 -1
- package/dist/esm-es5/pds-filters.entry.js +1 -1
- package/dist/esm-es5/pds-icon.entry.js +1 -1
- package/dist/esm-es5/pds-image.entry.js +1 -1
- package/dist/esm-es5/pds-input.entry.js +1 -1
- package/dist/esm-es5/pds-link.entry.js +1 -1
- package/dist/esm-es5/pds-loader.entry.js +1 -1
- package/dist/esm-es5/pds-modal-content.entry.js +1 -1
- package/dist/esm-es5/pds-modal-footer.entry.js +1 -1
- package/dist/esm-es5/pds-modal-header.entry.js +1 -1
- package/dist/esm-es5/pds-modal.entry.js +1 -1
- package/dist/esm-es5/pds-multiselect.entry.js +1 -1
- package/dist/esm-es5/pds-popover.entry.js +1 -1
- package/dist/esm-es5/pds-progress.entry.js +1 -1
- package/dist/esm-es5/pds-property.entry.js +1 -1
- package/dist/esm-es5/pds-radio-group.entry.js +1 -1
- package/dist/esm-es5/pds-radio.entry.js +1 -1
- package/dist/esm-es5/pds-row.entry.js +1 -1
- package/dist/esm-es5/pds-select.entry.js +1 -1
- package/dist/esm-es5/pds-sortable-item.entry.js +1 -1
- package/dist/esm-es5/pds-sortable.entry.js +2 -2
- package/dist/esm-es5/pds-switch.entry.js +1 -1
- package/dist/esm-es5/pds-tab.entry.js +1 -1
- package/dist/esm-es5/pds-table-body.entry.js +1 -1
- package/dist/esm-es5/pds-table-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-head.entry.js +1 -1
- package/dist/esm-es5/pds-table-row.entry.js +1 -1
- package/dist/esm-es5/pds-table.entry.js +1 -1
- package/dist/esm-es5/pds-tabpanel.entry.js +1 -1
- package/dist/esm-es5/pds-tabs.entry.js +1 -1
- package/dist/esm-es5/pds-text.entry.js +1 -1
- package/dist/esm-es5/pds-textarea.entry.js +1 -1
- package/dist/esm-es5/pds-toast.entry.js +1 -1
- package/dist/esm-es5/pds-tooltip.entry.js +1 -1
- package/dist/esm-es5/pine-core.js +1 -1
- package/dist/esm-es5/tabbable-DCKBKRUy.js +1 -0
- package/dist/esm-es5/{truncation-tooltip-FaW67DiY.js → truncation-tooltip-D_gvhB9r.js} +1 -1
- package/dist/pine-core/index.esm.js +1 -1
- package/dist/pine-core/p-001d4b86.entry.js +1 -0
- package/dist/pine-core/p-06279b93.system.entry.js +1 -0
- package/dist/pine-core/{p-b75b0d09.system.entry.js → p-0790dd0d.system.entry.js} +1 -1
- package/dist/pine-core/p-079c39d1.entry.js +1 -0
- package/dist/pine-core/{p-158b2f51.entry.js → p-07b4524e.entry.js} +1 -1
- package/dist/pine-core/{p-4bfc8b3e.system.entry.js → p-08bbd3e6.system.entry.js} +1 -1
- package/dist/pine-core/{p-d3d69ca4.system.entry.js → p-0bd61097.system.entry.js} +1 -1
- package/dist/pine-core/p-0c60f577.system.entry.js +1 -0
- package/dist/pine-core/{p-acca5f7b.system.entry.js → p-110b4051.system.entry.js} +1 -1
- package/dist/pine-core/p-11e7d660.entry.js +1 -0
- package/dist/pine-core/p-14d872d3.entry.js +1 -0
- package/dist/pine-core/p-17fc76e7.system.entry.js +1 -0
- package/dist/pine-core/{p-0913f696.system.entry.js → p-1e5648bf.system.entry.js} +1 -1
- package/dist/pine-core/{p-ef13f665.system.entry.js → p-22ae92f7.system.entry.js} +1 -1
- package/dist/pine-core/p-239774c9.entry.js +1 -0
- package/dist/pine-core/{p-0b71ecb6.system.entry.js → p-25bf2f26.system.entry.js} +2 -2
- package/dist/pine-core/{p-719542e1.system.entry.js → p-272b24ad.system.entry.js} +1 -1
- package/dist/pine-core/{p-d2c91e7a.entry.js → p-2c0047cd.entry.js} +1 -1
- package/dist/pine-core/p-2d5b1deb.entry.js +1 -0
- package/dist/pine-core/{p-c97bfac9.entry.js → p-3556f6ad.entry.js} +1 -1
- package/dist/pine-core/{p-BGLP3keB.js → p-35s7h-dk.js} +1 -1
- package/dist/pine-core/{p-3c977d8d.system.entry.js → p-38b87aa2.system.entry.js} +1 -1
- package/dist/pine-core/{p-25ea48d1.entry.js → p-3afb1208.entry.js} +1 -1
- package/dist/pine-core/{p-9df5e204.entry.js → p-3b5b8f73.entry.js} +1 -1
- package/dist/pine-core/{p-8c8cc079.system.entry.js → p-3cc19ea8.system.entry.js} +1 -1
- package/dist/pine-core/{p-ca4ee736.system.entry.js → p-3ce7e72e.system.entry.js} +1 -1
- package/dist/pine-core/p-3f62581a.system.entry.js +1 -0
- package/dist/pine-core/p-414faecf.entry.js +1 -0
- package/dist/pine-core/p-463a29fa.entry.js +1 -0
- package/dist/pine-core/{p-f029b7da.system.entry.js → p-4ee44585.system.entry.js} +1 -1
- package/dist/pine-core/p-50af67ea.system.entry.js +1 -0
- package/dist/pine-core/p-5133e8be.system.entry.js +1 -0
- package/dist/pine-core/p-55fce29e.entry.js +1 -0
- package/dist/pine-core/{p-77395d62.system.entry.js → p-568a9a79.system.entry.js} +1 -1
- package/dist/pine-core/{p-5cfd4d41.system.entry.js → p-5967d9fa.system.entry.js} +1 -1
- package/dist/pine-core/{p-5870b092.system.entry.js → p-5c46553f.system.entry.js} +1 -1
- package/dist/pine-core/{p-ea340c55.system.entry.js → p-5ce5836e.system.entry.js} +1 -1
- package/dist/pine-core/p-5f3242c8.system.entry.js +1 -0
- package/dist/pine-core/{p-80e6f3a0.system.entry.js → p-60d27247.system.entry.js} +1 -1
- package/dist/pine-core/{p-90d5edc6.entry.js → p-60e3b1af.entry.js} +1 -1
- package/dist/pine-core/{p-ca0a8f5c.entry.js → p-64283f7b.entry.js} +1 -1
- package/dist/pine-core/p-6602b4d0.entry.js +1 -0
- package/dist/pine-core/p-6845867f.system.entry.js +1 -0
- package/dist/pine-core/{p-332590c7.system.entry.js → p-68fdfb8f.system.entry.js} +1 -1
- package/dist/pine-core/p-6b6ae1be.entry.js +1 -0
- package/dist/pine-core/{p-e5420660.entry.js → p-6d64e6c7.entry.js} +1 -1
- package/dist/pine-core/{p-121612a7.system.entry.js → p-6dad76cb.system.entry.js} +1 -1
- package/dist/pine-core/p-6f34ad9c.entry.js +1 -0
- package/dist/pine-core/{p-55224683.entry.js → p-7073146f.entry.js} +1 -1
- package/dist/pine-core/{p-f1702281.entry.js → p-735b3631.entry.js} +1 -1
- package/dist/pine-core/p-7a14473e.entry.js +1 -0
- package/dist/pine-core/{p-9880d251.system.entry.js → p-7a19477e.system.entry.js} +1 -1
- package/dist/pine-core/{p-ea8f5d29.entry.js → p-7d3a20ba.entry.js} +1 -1
- package/dist/pine-core/{p-a939b471.entry.js → p-7fcf3d37.entry.js} +1 -1
- package/dist/pine-core/{p-26642718.entry.js → p-87642228.entry.js} +1 -1
- package/dist/pine-core/{p-62433f32.entry.js → p-89fefe36.entry.js} +1 -1
- package/dist/pine-core/{p-cccfe60f.system.entry.js → p-8b97dd57.system.entry.js} +1 -1
- package/dist/pine-core/{p-0092444c.system.entry.js → p-9201b497.system.entry.js} +1 -1
- package/dist/pine-core/{p-631f5bcc.entry.js → p-92a8cf7d.entry.js} +1 -1
- package/dist/pine-core/{p-e836a041.entry.js → p-94597b73.entry.js} +1 -1
- package/dist/pine-core/p-9713d6a5.system.entry.js +1 -0
- package/dist/pine-core/p-97be00f4.system.entry.js +1 -0
- package/dist/pine-core/{p-2ac2457b.system.entry.js → p-98843402.system.entry.js} +1 -1
- package/dist/pine-core/{p-b914dde8.entry.js → p-98cc327b.entry.js} +2 -2
- package/dist/pine-core/p-9a8971e2.system.entry.js +1 -0
- package/dist/pine-core/p-9a8d2985.system.entry.js +3 -0
- package/dist/pine-core/{p-ee0e30bf.system.entry.js → p-9dbc017f.system.entry.js} +1 -1
- package/dist/pine-core/p-9fbcba0d.entry.js +1 -0
- package/dist/pine-core/p-9fe4a64a.entry.js +1 -0
- package/dist/pine-core/{p-COtCa1Md.system.js → p-BNTlHhoO.system.js} +1 -1
- package/dist/pine-core/p-BZ1l3LGl.system.js +1 -0
- package/dist/pine-core/p-BgNaWLoS.js +1 -0
- package/dist/pine-core/{p-CmSJytt1.js → p-BplEmwUQ.js} +2 -2
- package/dist/pine-core/{p-Cy8cvR7I.system.js → p-CANeE7Ss.system.js} +1 -1
- package/dist/pine-core/{p-XW4H0W6i.system.js → p-CNXspDYs.system.js} +1 -1
- package/dist/pine-core/{p-jrkGLEPe.js → p-CirzxZ33.js} +1 -1
- package/dist/pine-core/{p-CGRdQc49.system.js → p-CjRCtzPD.system.js} +2 -2
- package/dist/pine-core/{p-BPqJgIq6.js → p-Cuc0DYlm.js} +1 -1
- package/dist/pine-core/{p-D04W0cAO.system.js → p-D52aRqFx.system.js} +1 -1
- package/dist/pine-core/p-DCKBKRUy.js +1 -0
- package/dist/pine-core/p-DXO1yd32.system.js +1 -0
- package/dist/pine-core/{p-ClDiSG97.system.js → p-DaCT2ssj.system.js} +1 -1
- package/dist/pine-core/{p-295f64ea.entry.js → p-a2078add.entry.js} +1 -1
- package/dist/pine-core/{p-f3067d90.system.entry.js → p-a48b025a.system.entry.js} +1 -1
- package/dist/pine-core/{p-9713fb36.entry.js → p-a7d25143.entry.js} +1 -1
- package/dist/pine-core/{p-9dcd2cdb.entry.js → p-ad3b1ec3.entry.js} +1 -1
- package/dist/pine-core/p-b017eb99.system.entry.js +1 -0
- package/dist/pine-core/p-b037dcbd.system.entry.js +1 -0
- package/dist/pine-core/{p-db17c626.system.entry.js → p-b243767b.system.entry.js} +1 -1
- package/dist/pine-core/{p-0af0d752.system.entry.js → p-b33ad96e.system.entry.js} +1 -1
- package/dist/pine-core/p-b6edfdfe.entry.js +2 -0
- package/dist/pine-core/{p-8191498f.system.entry.js → p-b7cbd913.system.entry.js} +1 -1
- package/dist/pine-core/{p-8f531063.entry.js → p-b9d71b76.entry.js} +1 -1
- package/dist/pine-core/p-bcf57566.entry.js +1 -0
- package/dist/pine-core/{p-4fd454f6.entry.js → p-bda7e3be.entry.js} +1 -1
- package/dist/pine-core/{p-bdac8f2b.entry.js → p-bdde1e53.entry.js} +1 -1
- package/dist/pine-core/{p-cb6a3e4c.system.entry.js → p-be3b4f12.system.entry.js} +1 -1
- package/dist/pine-core/{p-b1548a20.entry.js → p-bfdfbe9f.entry.js} +1 -1
- package/dist/pine-core/{p-8e3ff75d.entry.js → p-c02a32ec.entry.js} +1 -1
- package/dist/pine-core/p-c1da80e5.entry.js +1 -0
- package/dist/pine-core/{p-eaf85be6.system.entry.js → p-c233866c.system.entry.js} +1 -1
- package/dist/pine-core/{p-ecc7a531.system.entry.js → p-cb560aab.system.entry.js} +1 -1
- package/dist/pine-core/{p-8c588ca0.entry.js → p-ce554098.entry.js} +1 -1
- package/dist/pine-core/p-ced6a814.system.entry.js +1 -0
- package/dist/pine-core/{p-9aaedded.entry.js → p-d7930540.entry.js} +1 -1
- package/dist/pine-core/{p-11d98408.system.entry.js → p-d7db749a.system.entry.js} +1 -1
- package/dist/pine-core/{p-7a5b21d2.system.entry.js → p-d8bedb58.system.entry.js} +1 -1
- package/dist/pine-core/{p-1dc5a7e0.system.entry.js → p-d9243653.system.entry.js} +1 -1
- package/dist/pine-core/{p-9ab95438.entry.js → p-d94ebe84.entry.js} +1 -1
- package/dist/pine-core/{p-9109b90a.entry.js → p-de176bd9.entry.js} +1 -1
- package/dist/pine-core/{p-57a2f927.entry.js → p-dea2a254.entry.js} +1 -1
- package/dist/pine-core/p-dfadfcd1.entry.js +1 -0
- package/dist/pine-core/{p-047433a4.system.entry.js → p-e1fdd53a.system.entry.js} +1 -1
- package/dist/pine-core/{p-8987fd45.system.entry.js → p-e70cb112.system.entry.js} +1 -1
- package/dist/pine-core/{p-b9d145f8.system.entry.js → p-e9a53a88.system.entry.js} +1 -1
- package/dist/pine-core/p-eb93cc6e.entry.js +1 -0
- package/dist/pine-core/{p-4d03d1e2.system.entry.js → p-ebf0c51b.system.entry.js} +1 -1
- package/dist/pine-core/p-ebf74c43.system.entry.js +1 -0
- package/dist/pine-core/{p-138b278b.entry.js → p-ee449a4b.entry.js} +1 -1
- package/dist/pine-core/p-ef4d8fea.entry.js +1 -0
- package/dist/pine-core/p-f09f27ab.system.entry.js +1 -0
- package/dist/pine-core/{p-c483997a.entry.js → p-f2c487e6.entry.js} +1 -1
- package/dist/pine-core/p-f549f2bc.entry.js +1 -0
- package/dist/pine-core/{p-717323e4.entry.js → p-fc743f6e.entry.js} +1 -1
- package/dist/pine-core/{p-BWDu62Mo.js → p-m3pqpeWg.js} +1 -1
- package/dist/pine-core/p-wXfuz0Bd.system.js +1 -0
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/pine-core/pine-core.js +1 -1
- package/dist/types/components/pds-alert/pds-alert.d.ts +10 -0
- package/dist/types/components/pds-avatar/pds-avatar.d.ts +8 -0
- package/dist/types/components/pds-button/pds-button.d.ts +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-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-select/pds-select.d.ts +32 -4
- package/dist/types/components/pds-toast/pds-toast.d.ts +9 -0
- package/dist/types/components/pds-tooltip/pds-tooltip.d.ts +31 -0
- package/dist/types/components.d.ts +96 -8
- package/dist/types/utils/aria-references.d.ts +24 -0
- package/dist/types/utils/tabbable.d.ts +2 -0
- package/dist/vscode.html-data.json +79 -7
- package/hydrate/index.js +724 -337
- package/hydrate/index.mjs +724 -337
- package/package.json +2 -2
- 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-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-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-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-73f931a1.entry.js +0 -1
- package/dist/pine-core/p-75ee0403.entry.js +0 -1
- package/dist/pine-core/p-7a287635.system.entry.js +0 -1
- package/dist/pine-core/p-86040cac.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-8cc302aa.system.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-BLG6RDBt.js +0 -1
- package/dist/pine-core/p-BR5nujVX.system.js +0 -1
- package/dist/pine-core/p-CuSNnuFu.system.js +0 -1
- package/dist/pine-core/p-a0960b3d.system.entry.js +0 -1
- package/dist/pine-core/p-a1230a74.system.entry.js +0 -1
- package/dist/pine-core/p-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-ea4d4741.system.entry.js +0 -1
package/hydrate/index.mjs
CHANGED
|
@@ -5730,7 +5730,7 @@ class MockPdsModal {
|
|
|
5730
5730
|
'pds-modal__backdrop': true,
|
|
5731
5731
|
'open': this.open,
|
|
5732
5732
|
};
|
|
5733
|
-
return (hAsync("div", { key: '
|
|
5733
|
+
return (hAsync("div", { key: '6e165638f8f4699fa242f3045155c392f9f529b2', class: backdropClasses }, hAsync("div", { key: 'f4b8db3093a6fbe24be8035a826e8289815e4afb', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, hAsync("div", { key: 'fa846f66e539ea0d1b73820abb991fdb02902499', class: "pds-modal__header" }, hAsync("slot", { key: '0faaa6858fecd9d0c48c7f183d4f2101c1bed785', name: "header" })), hAsync("div", { key: 'a896fba9494fcdee9dde7e0d9f7baf708095ee6f', class: "pds-modal-content" }, hAsync("slot", { key: '4091e70b2a744c36c8249aa8664937d227145c14' })), hAsync("div", { key: 'cbf4bdd80cc3575d8c7e2e0e2078e28c4f185920', class: "pds-modal__footer" }, hAsync("slot", { key: '56ed3a26c36fd70d7ec9f033951d1b1d9e044957', name: "footer" })))));
|
|
5734
5734
|
}
|
|
5735
5735
|
get el() { return getElement(this); }
|
|
5736
5736
|
static get style() { return pdsModalCss$1(); }
|
|
@@ -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,
|
|
@@ -9489,7 +9555,7 @@ class PdsChip {
|
|
|
9489
9555
|
const hostClass = this.classNames();
|
|
9490
9556
|
const hostStyles = this.hostStyles;
|
|
9491
9557
|
this.hostKeeper.record(hostClass, hostStyles);
|
|
9492
|
-
return (hAsync(Host, { key: '
|
|
9558
|
+
return (hAsync(Host, { key: '0e67ea3700e8a8e1ad3049b6eafced6934262335', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
|
|
9493
9559
|
}
|
|
9494
9560
|
get el() { return getElement(this); }
|
|
9495
9561
|
static get style() { return pdsChipTokensCss() + pdsChipCss(); }
|
|
@@ -11199,7 +11265,7 @@ class FlyoutController {
|
|
|
11199
11265
|
}
|
|
11200
11266
|
}
|
|
11201
11267
|
|
|
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)}`;
|
|
11268
|
+
const pdsComboboxCss = () => `:host{display:block}:host([truncate]){display:block;min-width:0}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-950)}.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled){border-color:var(--pine-color-border-danger)}.pds-combobox__input.pds-combobox__input--invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:calc(var(--pine-z-index-raised) - 1)}.pds-combobox__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error pds-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-combobox__listbox{background:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-background-muted)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-background-muted)}.pds-combobox__option--disabled,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger,.pds-combobox__group-back--disabled>.pds-combobox__group-back-trigger,.pds-combobox__group--disabled>.pds-combobox__group-label{color:var(--pine-color-text-disabled)}.pds-combobox__option--disabled{cursor:not-allowed}.pds-combobox__option--disabled .pds-combobox__option-chip,.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper{opacity:0.5}.pds-combobox__option-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__option-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--truncate .pds-combobox__option-label{-ms-flex:1 1 auto;flex:1 1 auto;overflow-wrap:normal}.pds-combobox__listbox--truncate .pds-combobox__option-check{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group{list-style:none;-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150)}.pds-combobox__group:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group-list{list-style:none;margin:0;padding:0}.pds-combobox__listbox--grouped .pds-combobox__group-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs)}.pds-combobox__group-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__group-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__group-row{list-style:none;position:relative}.pds-combobox__group-row-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.pds-combobox__group-row-trigger,.pds-combobox__group-row--has-selection>.pds-combobox__group-row-trigger,.pds-combobox__group-row--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-back--highlighted>.pds-combobox__group-row-trigger{background:var(--pine-color-background-muted)}.pds-combobox__listbox--pointer-hover .pds-combobox__group-row-trigger:hover{background:var(--pine-color-background-muted)}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out{overflow-x:hidden}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out:dir(rtl){--pds-combobox-drill-from:var(--pine-dimension-sm)}.pds-combobox__listbox--drill-out,.pds-combobox__listbox--drill-in:dir(rtl){--pds-combobox-drill-from:calc(var(--pine-dimension-sm) * -1)}.pds-combobox__listbox--drill-in .pds-combobox__drill-in-options>li,.pds-combobox__listbox--drill-in .pds-combobox__group-back-trigger,.pds-combobox__listbox--drill-out>li{-webkit-animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}@keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__group-row-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0}.pds-combobox__group-row-caret{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--grouped,.pds-combobox__flyout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);padding:var(--pine-dimension-2xs)}.pds-combobox__flyout{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;overflow-y:auto;position:fixed;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1}.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:0}.pds-combobox__listbox-options{-ms-flex:1;flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-combobox__listbox-options.pds-combobox__listbox--grouped{padding:var(--pine-dimension-2xs)}.pds-combobox__panel-search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-sm)}.pds-combobox__panel-search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:0;flex-shrink:0}.pds-combobox__panel-search:focus-within{border-block-end-color:var(--pine-color-border-active)}.pds-combobox__panel-search-input{background:transparent;border:0;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:0;outline:none;padding:0}.pds-combobox__panel-search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none}.pds-combobox__group-back-trigger{-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in.pds-combobox__listbox--grouped{-webkit-padding-before:0;padding-block-start:0}.pds-combobox__listbox-options--drilled-in:focus{outline:none}.pds-combobox__listbox-options--drilled-in:focus .pds-combobox__group-back-trigger{border-block-end-color:var(--pine-color-border-active)}:where(.pds-combobox__listbox-options--drilled-in) .pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay);-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);border-radius:0;color:var(--pine-color-text-strong);font:var(--pine-typography-body);inset-block-start:0;letter-spacing:var(--pine-letter-spacing);margin-inline:calc(var(--pine-dimension-2xs) * -1);padding:var(--pine-dimension-sm);position:-webkit-sticky;position:sticky;z-index:1}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none;margin:0;padding:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}:host(.pds-combobox-dropdown-portal) .pds-combobox__listbox{position:fixed;z-index:var(--pine-z-index-priority)}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;text-align:start}.pds-combobox__button-trigger-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__button-trigger-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger--truncate{max-width:100%}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-label{overflow-wrap:normal}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-chevron{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger-text,.pds-combobox__listbox--truncate .pds-combobox__option-text{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150)}.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder{color:var(--pine-color-text-muted)}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:"";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}`;
|
|
11203
11269
|
|
|
11204
11270
|
/**
|
|
11205
11271
|
* @slot option - Option elements for the combobox dropdown
|
|
@@ -11340,6 +11406,13 @@ class PdsCombobox {
|
|
|
11340
11406
|
* @default 'pill'
|
|
11341
11407
|
*/
|
|
11342
11408
|
this.triggerShape = 'pill';
|
|
11409
|
+
/**
|
|
11410
|
+
* Determines whether the button trigger's label and the option labels should truncate and display with an ellipsis.
|
|
11411
|
+
* When a label overflows, a `title` showing the full label will appear on hover.
|
|
11412
|
+
* Chip options, custom layouts and group rows aren't affected.
|
|
11413
|
+
* @defaultValue false
|
|
11414
|
+
*/
|
|
11415
|
+
this.truncate = false;
|
|
11343
11416
|
/**
|
|
11344
11417
|
* The sentiment for the chip trigger. Matches Pine chip sentiments.
|
|
11345
11418
|
* @default 'neutral'
|
|
@@ -11636,10 +11709,15 @@ class PdsCombobox {
|
|
|
11636
11709
|
if (this.usesPanelSearch)
|
|
11637
11710
|
this.restoreFocusToTrigger();
|
|
11638
11711
|
};
|
|
11712
|
+
this.onButtonTriggerMouseEnter = (event) => {
|
|
11713
|
+
this.syncTitle(event.currentTarget, '.pds-combobox__button-trigger-text');
|
|
11714
|
+
};
|
|
11639
11715
|
// Event handler for mouse enter on option
|
|
11640
11716
|
this.onOptionMouseEnter = (event) => {
|
|
11641
|
-
const
|
|
11642
|
-
this.
|
|
11717
|
+
const row = event.currentTarget;
|
|
11718
|
+
if (this.truncate)
|
|
11719
|
+
this.syncTitle(row, '.pds-combobox__option-text');
|
|
11720
|
+
this.highlightedIndex = Number(row.getAttribute('data-option-index'));
|
|
11643
11721
|
this.keyboardNavigating = false;
|
|
11644
11722
|
};
|
|
11645
11723
|
this.onGroupRowMouseEnter = (event) => {
|
|
@@ -11929,6 +12007,19 @@ class PdsCombobox {
|
|
|
11929
12007
|
this.focusPanel(panelFocusEl);
|
|
11930
12008
|
}
|
|
11931
12009
|
}
|
|
12010
|
+
// A `title` only while the text is cut, measured on hover. On the span, not the option or trigger,
|
|
12011
|
+
// so it isn't read again as their description.
|
|
12012
|
+
syncTitle(el, selector) {
|
|
12013
|
+
const text = el.querySelector(selector);
|
|
12014
|
+
if (!text)
|
|
12015
|
+
return;
|
|
12016
|
+
if (text.scrollWidth > text.clientWidth) {
|
|
12017
|
+
text.title = text.textContent || '';
|
|
12018
|
+
}
|
|
12019
|
+
else {
|
|
12020
|
+
text.removeAttribute('title');
|
|
12021
|
+
}
|
|
12022
|
+
}
|
|
11932
12023
|
/**
|
|
11933
12024
|
* Scrolls just enough to show `el`, as `scrollIntoView({ block: 'nearest' })` does. In the drill-in
|
|
11934
12025
|
* panel it scrolls the list alone, and never sideways: while a drill-in slide offsets a row past
|
|
@@ -13330,6 +13421,7 @@ class PdsCombobox {
|
|
|
13330
13421
|
'pds-combobox__listbox--drill-in': this.drillDirection === 'in',
|
|
13331
13422
|
'pds-combobox__listbox--drill-out': this.drillDirection === 'out',
|
|
13332
13423
|
'pds-combobox__listbox--pointer-hover': this.pointerCanHover,
|
|
13424
|
+
'pds-combobox__listbox--truncate': this.truncate,
|
|
13333
13425
|
}, onAnimationEnd: this.onDrillAnimationEnd, onPointerMove: this.onPanelPointer, onPointerDown: this.onPanelPointer, role: this.showsGroupedPanel ? 'tree' : 'listbox', id: this.listboxId, "aria-label": this.label || 'Options', "aria-multiselectable": "false",
|
|
13334
13426
|
// Focusable but out of the tab order with panel search, so it can take focus when a
|
|
13335
13427
|
// drilled-in group hides the field. Dropping it while focused would blur the list and close.
|
|
@@ -13501,9 +13593,10 @@ class PdsCombobox {
|
|
|
13501
13593
|
/** An option's text, after its `data-icon` when it has one. */
|
|
13502
13594
|
renderOptionLabel(option) {
|
|
13503
13595
|
const icon = optionIconOf(option);
|
|
13596
|
+
const label = this.truncate ? (hAsync("span", { key: this.getOptionLabel(option), class: "pds-combobox__option-text" }, this.getOptionLabel(option))) : this.getOptionLabel(option);
|
|
13504
13597
|
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" }),
|
|
13598
|
+
return label;
|
|
13599
|
+
return (hAsync("span", { class: "pds-combobox__option-label" }, hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }), label));
|
|
13507
13600
|
}
|
|
13508
13601
|
/** The grouped panel's rows, in the order the panel draws them and the keyboard moves through. */
|
|
13509
13602
|
panelEntries() {
|
|
@@ -13591,7 +13684,9 @@ class PdsCombobox {
|
|
|
13591
13684
|
'pds-combobox__button-trigger-label--with-icon': icon !== null,
|
|
13592
13685
|
} }, icon !== null && (
|
|
13593
13686
|
// `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.
|
|
13687
|
+
hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.truncate ? (
|
|
13688
|
+
// Keyed so a new label drops a stale `title`.
|
|
13689
|
+
hAsync("span", { key: this.selectedLabel || this.placeholder, class: "pds-combobox__button-trigger-text" }, this.selectedLabel || this.placeholder)) : (this.selectedLabel || this.placeholder)));
|
|
13595
13690
|
}
|
|
13596
13691
|
/** The selection's icon for the button trigger: the option's own, or else its group's. */
|
|
13597
13692
|
get selectedIcon() {
|
|
@@ -13723,16 +13818,17 @@ class PdsCombobox {
|
|
|
13723
13818
|
'pds-combobox__button-trigger',
|
|
13724
13819
|
`pds-combobox__button-trigger--${this.triggerVariant}`,
|
|
13725
13820
|
this.triggerShape === 'input' && 'pds-combobox__button-trigger--input-shape',
|
|
13821
|
+
this.truncate && 'pds-combobox__button-trigger--truncate',
|
|
13726
13822
|
]
|
|
13727
13823
|
.filter(Boolean)
|
|
13728
13824
|
.join(' ');
|
|
13729
|
-
return (hAsync(Host, { key: '
|
|
13825
|
+
return (hAsync(Host, { key: '2786062989bc490e87ea382b5c80f7e2758c1a8a', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: 'b3b272a99528d725a52d3092a3650efacaf54b34', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (hAsync("label", { key: '8e2e0021e1f60cddfe41b918406c7d76659fbff1', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (hAsync("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, hAsync("input", { ref: el => {
|
|
13730
13826
|
this.inputEl = el;
|
|
13731
13827
|
this.triggerEl = el;
|
|
13732
13828
|
}, class: {
|
|
13733
13829
|
'pds-combobox__input': true,
|
|
13734
13830
|
'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: '
|
|
13831
|
+
}, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, onMouseEnter: this.truncate ? this.onButtonTriggerMouseEnter : undefined, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: '2216779564fa3f4efd1b4d0972ac045fa0851078', style: { display: 'none' } }, hAsync("slot", { key: '77b344d7301193f435949cbe2be2b28e1d7f6602', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
|
|
13736
13832
|
hAsync("span", { key: "drill-status", class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : ''),
|
|
13737
13833
|
// Its own region: sharing one, revealing a row then opening it would leave the text the
|
|
13738
13834
|
// same, and opening the group would go unannounced.
|
|
@@ -13803,6 +13899,7 @@ class PdsCombobox {
|
|
|
13803
13899
|
"triggerWidth": [1, "trigger-width"],
|
|
13804
13900
|
"triggerVariant": [1, "trigger-variant"],
|
|
13805
13901
|
"triggerShape": [1, "trigger-shape"],
|
|
13902
|
+
"truncate": [516],
|
|
13806
13903
|
"chipSentiment": [1, "chip-sentiment"],
|
|
13807
13904
|
"chipLarge": [4, "chip-large"],
|
|
13808
13905
|
"chipIcon": [1, "chip-icon"],
|
|
@@ -13839,7 +13936,7 @@ class PdsCombobox {
|
|
|
13839
13936
|
},
|
|
13840
13937
|
"$listeners$": undefined,
|
|
13841
13938
|
"$lazyBundleId$": "-",
|
|
13842
|
-
"$attrsToReflect$": [["name", "name"]]
|
|
13939
|
+
"$attrsToReflect$": [["name", "name"], ["truncate", "truncate"]]
|
|
13843
13940
|
}; }
|
|
13844
13941
|
}
|
|
13845
13942
|
|
|
@@ -13872,7 +13969,7 @@ class PdsContainer {
|
|
|
13872
13969
|
hostStyle['--pine-container-max-width'] = customSize;
|
|
13873
13970
|
if (!this.centered)
|
|
13874
13971
|
hostStyle['margin-inline'] = '0';
|
|
13875
|
-
return (hAsync(Host, { key: '
|
|
13972
|
+
return (hAsync(Host, { key: '8a01369c4d1817dd083b1ac714ff7c02920f817e', class: { [`pds-container--${this.size}`]: isNamed }, style: Object.keys(hostStyle).length ? hostStyle : undefined }, hAsync(Tag, { key: '7428cb0040896dc11004065cf91ae9d3c3a99c49', part: "container" }, hAsync("slot", { key: '5a5b5bbc87c03afc23f1c9a0523fced8c0795efb' }))));
|
|
13876
13973
|
}
|
|
13877
13974
|
static get style() { return pdsContainerCss(); }
|
|
13878
13975
|
static get cmpMeta() { return {
|
|
@@ -13997,7 +14094,7 @@ class PdsCopytext {
|
|
|
13997
14094
|
render() {
|
|
13998
14095
|
const hostClass = this.classNames();
|
|
13999
14096
|
this.hostKeeper.record(hostClass);
|
|
14000
|
-
return (hAsync(Host, { key: '
|
|
14097
|
+
return (hAsync(Host, { key: '35d74eaecedd432f7852545522f9ce72396f9ab9', class: hostClass, id: this.componentId }, hAsync("pds-button", { key: '9550ce2fb21166e9726b08b5928036244c7b729e', type: "button", variant: "unstyled", onClick: this.handleClick }, hAsync("span", { key: '47af45448759c911ca4ca03d0158088289b622e0', ref: (el) => this.valueSpanEl = el }, this.value), hAsync("pds-icon", { key: '3ddab7c3e7063843cd606ffb19481cae3792db43', "aria-hidden": "true", icon: copy, size: "16px" }))));
|
|
14001
14098
|
}
|
|
14002
14099
|
get el() { return getElement(this); }
|
|
14003
14100
|
static get watchers() { return {
|
|
@@ -15999,14 +16096,14 @@ class PdsDatepicker {
|
|
|
15999
16096
|
}
|
|
16000
16097
|
render() {
|
|
16001
16098
|
const locale = this.resolvedLocale;
|
|
16002
|
-
return (hAsync(Host, { key: '
|
|
16099
|
+
return (hAsync(Host, { key: 'a761f0ca6eeedcac3e4bd90760aa9781cd37dcdc', class: { 'pds-datepicker--range': this.range, 'pds-datepicker--time': this.timePicker }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, hAsync("pds-input", { key: '2eb04f9fd4e2f7a2437145d250c629c2cc8a0bf6', ref: (el) => (this.inputEl = el), componentId: this.baseId, label: this.label, hideLabel: this.hideLabel, helperMessage: this.helperMessage, errorMessage: this.errorMessage, invalid: this.invalid || !!this.textError || !!this.valueError(), disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.fieldPlaceholder, fullWidth: this.fullWidth, autocomplete: "off", value: this.text, onClick: this.onFieldClick, onPdsInput: this.onTextInput, onPdsChange: this.onTextChange, onPdsKeyDown: this.onTextKeyDown, onPdsFocus: this.stopInnerEvent, onPdsBlur: this.stopInnerEvent }, this.clearable && !!this.value && this.isInteractive && (hAsync("button", {
|
|
16003
16100
|
// Keyed, as is the calendar button: when Clear appears after a pick, the focused
|
|
16004
16101
|
// calendar button must stay that button rather than be reused as Clear.
|
|
16005
16102
|
key: "clear", slot: "suffix", type: "button", class: "pds-datepicker__clear", ref: (el) => (this.clearEl = el), "aria-label": this.label ? `${this.clearLabel} ${this.label}` : this.clearLabel,
|
|
16006
16103
|
// Out of the tab order, as a native search field's clear button is: Tab from a field
|
|
16007
16104
|
// just emptied would land on it as the change removes it, dropping focus to the page.
|
|
16008
16105
|
tabindex: "-1", onMouseDown: this.onClearMouseDown, onClick: this.onClearClick
|
|
16009
|
-
}, hAsync("pds-icon", { key: '
|
|
16106
|
+
}, hAsync("pds-icon", { key: '98c325fbba8ea78b2d409bc77099db3206738508', icon: remove, "aria-hidden": "true" }))), hAsync("button", { key: "trigger", slot: "suffix", type: "button", class: "pds-datepicker__trigger", ref: (el) => (this.triggerEl = el), "aria-label": this.triggerAccessibleName(locale), "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', disabled: !this.isInteractive, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, hAsync("pds-icon", { key: 'cb8483febe1b485058b7bb4271b749981a7747a1', icon: calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
|
|
16010
16107
|
}
|
|
16011
16108
|
static get formAssociated() { return true; }
|
|
16012
16109
|
get el() { return getElement(this); }
|
|
@@ -16148,7 +16245,7 @@ class PdsDivider {
|
|
|
16148
16245
|
return classNames.join(' ');
|
|
16149
16246
|
}
|
|
16150
16247
|
render() {
|
|
16151
|
-
return (hAsync(Host, { key: '
|
|
16248
|
+
return (hAsync(Host, { key: '072cc8552bd33c4a00d216f15a5a848cfc97fd92', id: this.componentId }, this.hasLabel ? (hAsync("div", { class: this.classNames(), role: "separator", "aria-label": this.label }, hAsync("span", { class: "pds-divider__label", part: "label", "aria-hidden": "true" }, this.label))) : (hAsync("hr", { class: this.classNames() }))));
|
|
16152
16249
|
}
|
|
16153
16250
|
static get style() { return pdsDividerCss(); }
|
|
16154
16251
|
static get cmpMeta() { return {
|
|
@@ -16344,11 +16441,11 @@ class PdsDrawer {
|
|
|
16344
16441
|
this.open = false;
|
|
16345
16442
|
}
|
|
16346
16443
|
render() {
|
|
16347
|
-
return (hAsync(Host, { key: '
|
|
16444
|
+
return (hAsync(Host, { key: '7cf13256457914e48e8fde422832a2a52ee0c13b', class: {
|
|
16348
16445
|
'pds-drawer': true,
|
|
16349
16446
|
[`pds-drawer--${this.side}`]: true,
|
|
16350
16447
|
[`pds-drawer--${this.size}`]: true,
|
|
16351
|
-
} }, hAsync("pds-modal", { key: '
|
|
16448
|
+
} }, hAsync("pds-modal", { key: 'd4ceb5b4c0b03930aa3d001ae1bbbfbf449bde33', class: { 'pds-drawer__modal': true, 'pds-drawer__modal--modal': this.modal }, ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: !this.modal, backdropDismiss: this.lightDismiss, disableInitialFocus: !this.modal && this.initialFocus === 'none' }, hAsync("slot", { key: '41bfdea76282b333ca6950048999cb9d94e69438' }))));
|
|
16352
16449
|
}
|
|
16353
16450
|
get el() { return getElement(this); }
|
|
16354
16451
|
static get style() { return pdsDrawerCss(); }
|
|
@@ -16389,7 +16486,7 @@ class PdsDrawerContent {
|
|
|
16389
16486
|
unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
|
|
16390
16487
|
}
|
|
16391
16488
|
render() {
|
|
16392
|
-
return (hAsync("div", { key: '
|
|
16489
|
+
return (hAsync("div", { key: 'b15b087506c1292f9d67e531e8d935069749c09d', class: "pds-drawer-content" }, hAsync("slot", { key: '9c60ca75c7905e7e994f9c41eee213b962afb833' })));
|
|
16393
16490
|
}
|
|
16394
16491
|
get el() { return getElement(this); }
|
|
16395
16492
|
static get style() { return pdsDrawerContentCss(); }
|
|
@@ -16417,7 +16514,7 @@ class PdsDrawerFooter {
|
|
|
16417
16514
|
unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
|
|
16418
16515
|
}
|
|
16419
16516
|
render() {
|
|
16420
|
-
return (hAsync("footer", { key: '
|
|
16517
|
+
return (hAsync("footer", { key: 'a4eec0aff617c605b94f8d3b9ec1e2d98cded6fb', class: "pds-drawer__footer" }, hAsync("slot", { key: '6dc379c940e37edfd05d99728be9dff58ca1d717' })));
|
|
16421
16518
|
}
|
|
16422
16519
|
get el() { return getElement(this); }
|
|
16423
16520
|
static get style() { return pdsDrawerFooterCss(); }
|
|
@@ -16445,7 +16542,7 @@ class PdsDrawerHeader {
|
|
|
16445
16542
|
unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
|
|
16446
16543
|
}
|
|
16447
16544
|
render() {
|
|
16448
|
-
return (hAsync("header", { key: '
|
|
16545
|
+
return (hAsync("header", { key: '6b9338e5dbf7a7e580c11b28c95ca53693528382', class: "pds-drawer__header" }, hAsync("slot", { key: '0990fbcf94c0c438b98cf1e8945f1e2fd9aa33dc' })));
|
|
16449
16546
|
}
|
|
16450
16547
|
get el() { return getElement(this); }
|
|
16451
16548
|
static get style() { return pdsDrawerHeaderCss(); }
|
|
@@ -16817,7 +16914,7 @@ class PdsDropdownMenu {
|
|
|
16817
16914
|
}
|
|
16818
16915
|
}
|
|
16819
16916
|
render() {
|
|
16820
|
-
return (hAsync(Host, { key: '
|
|
16917
|
+
return (hAsync(Host, { key: '0ed3d8ee889a5423ca9de66a86791d084f75abf0', id: this.componentId }, hAsync("slot", { key: '6bab71652d6afe094075623d3a48641a4d89b232', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), hAsync("pds-box", { key: 'fcef0667f999ae5b8cd03eb94a0db0be7be502cb', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, hAsync("div", { key: 'c78d5bd7e48c5483b12171341271f9132f4b2ff9', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, hAsync("slot", { key: '6464994260720d6046da548f4aad0896965cc47c', name: "header", onSlotchange: this.handleHeaderSlotChange })), hAsync("div", { key: '3e97dfc4e1911f91ce8917faf981d436e71e5c24', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, hAsync("slot", { key: 'dfd77a8b73df5ce9eef3e661d3f9501cb8bfdba2', onSlotchange: this.handleSlotChange })))));
|
|
16821
16918
|
}
|
|
16822
16919
|
get host() { return getElement(this); }
|
|
16823
16920
|
static get style() { return pdsDropdownMenuCss(); }
|
|
@@ -16924,7 +17021,7 @@ class PdsDropdownMenuItem {
|
|
|
16924
17021
|
}, role: "menuitem", "aria-disabled": "true", part: "button", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleInformationalKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("slot", null)));
|
|
16925
17022
|
}
|
|
16926
17023
|
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: {
|
|
17024
|
+
return (hAsync("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, externalLabel: this.externalLabel, target: this.target, class: {
|
|
16928
17025
|
'pds-dropdown-menu-item__content': true,
|
|
16929
17026
|
'has-focus': this.hasFocus
|
|
16930
17027
|
}, 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 +17032,7 @@ class PdsDropdownMenuItem {
|
|
|
16935
17032
|
}, tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, hAsync("slot", null)));
|
|
16936
17033
|
}
|
|
16937
17034
|
render() {
|
|
16938
|
-
return (hAsync(Host, { key: '
|
|
17035
|
+
return (hAsync(Host, { key: 'a69947d99160783919f711d7c53e0592694f9565', id: this.componentId, class: {
|
|
16939
17036
|
'is-disabled': this.disabled,
|
|
16940
17037
|
'is-informational': this.informational,
|
|
16941
17038
|
'destructive': !this.disabled && !this.informational && this.destructive
|
|
@@ -16957,6 +17054,7 @@ class PdsDropdownMenuItem {
|
|
|
16957
17054
|
"href": [1],
|
|
16958
17055
|
"informational": [516],
|
|
16959
17056
|
"external": [516],
|
|
17057
|
+
"externalLabel": [1, "external-label"],
|
|
16960
17058
|
"target": [513],
|
|
16961
17059
|
"hasFocus": [32],
|
|
16962
17060
|
"clickItem": [64]
|
|
@@ -16979,7 +17077,7 @@ class PdsDropdownMenuSeparator {
|
|
|
16979
17077
|
this.disabled = false;
|
|
16980
17078
|
}
|
|
16981
17079
|
render() {
|
|
16982
|
-
return (hAsync(Host, { key: '
|
|
17080
|
+
return (hAsync(Host, { key: '72f29c5015d2379d9986c90ec966f34f41298226', id: this.componentId }, hAsync("hr", { key: '72c2155d0fbee6346f3f38997009a7d9e14ad0c8' })));
|
|
16983
17081
|
}
|
|
16984
17082
|
static get style() { return pdsDropdownMenuSeparatorCss(); }
|
|
16985
17083
|
static get cmpMeta() { return {
|
|
@@ -17559,7 +17657,7 @@ class PdsFilter {
|
|
|
17559
17657
|
return null;
|
|
17560
17658
|
}
|
|
17561
17659
|
render() {
|
|
17562
|
-
return (hAsync(Host, { key: '
|
|
17660
|
+
return (hAsync(Host, { key: '9b2286e9a0d7f88b7f6bc90f8444185cfec832c8', id: this.componentId }, hAsync("button", { key: '968953600d615f2739757a91422dafdb817c9a6f', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, hAsync("span", { key: 'ee479f7e510ffcb54f7857cb7d1345f2a5c1d76a', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (hAsync("span", { key: 'e98aa8b915a2460f3c7d49e20ec7d43853ee5f9f', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (hAsync("div", { key: '3084babfba2d96880b2829a60d2ef00140a6813b', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, hAsync("slot", { key: 'e901488be75a18bedc6b2c42be5c398fd2cf2a29' })))));
|
|
17563
17661
|
}
|
|
17564
17662
|
get el() { return getElement(this); }
|
|
17565
17663
|
static get style() { return pdsFilterCss(); }
|
|
@@ -17591,7 +17689,7 @@ class PdsFilters {
|
|
|
17591
17689
|
registerInstance(this, hostRef);
|
|
17592
17690
|
}
|
|
17593
17691
|
render() {
|
|
17594
|
-
return (hAsync(Host, { key: '
|
|
17692
|
+
return (hAsync(Host, { key: '6f785fc222e3b5b7cf932f704b56aa7f1f52ead3', id: this.componentId }, hAsync("div", { key: '0ffd2894cdeb1e632228b4c3fa523069dcffa4b2', class: "pds-filters" }, hAsync("slot", { key: 'a3f42dedcda1b0fec78a33793d085791d9b9fc5c' }))));
|
|
17595
17693
|
}
|
|
17596
17694
|
static get style() { return pdsFiltersCss(); }
|
|
17597
17695
|
static get cmpMeta() { return {
|
|
@@ -18087,9 +18185,9 @@ class PdsImage {
|
|
|
18087
18185
|
this.loading = 'eager';
|
|
18088
18186
|
}
|
|
18089
18187
|
render() {
|
|
18090
|
-
return (hAsync(Host, { key: '
|
|
18188
|
+
return (hAsync(Host, { key: '6d2d48c468c39f53d67e63999dd83f3ad61053b5', class: {
|
|
18091
18189
|
'pds-image': true,
|
|
18092
|
-
}, id: this.componentId }, hAsync("img", { key: '
|
|
18190
|
+
}, id: this.componentId }, hAsync("img", { key: '393cc584586e37e8d5b602fbdcda1783bf80cf9b', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
|
|
18093
18191
|
}
|
|
18094
18192
|
static get style() { return pdsImageCss(); }
|
|
18095
18193
|
static get cmpMeta() { return {
|
|
@@ -18409,10 +18507,10 @@ class PdsInput {
|
|
|
18409
18507
|
'has-prepend': this.hasPrepend,
|
|
18410
18508
|
'has-append': this.hasAppend,
|
|
18411
18509
|
};
|
|
18412
|
-
return (hAsync(Host, { key: '
|
|
18510
|
+
return (hAsync(Host, { key: '1706e29a68d25a8bb83c36d6bddace04a448f6f5', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, hAsync("div", { key: '1488b6ea995c4ffc4068757f566494c0ac073950', class: "pds-input" }, label && (hAsync("div", { key: 'e2fe4e461e626648ec51882e92e02fea179e3e13', class: {
|
|
18413
18511
|
'pds-input__label-wrapper': true,
|
|
18414
18512
|
'visually-hidden': this.hideLabel,
|
|
18415
|
-
} }, hAsync("label", { key: '
|
|
18513
|
+
} }, hAsync("label", { key: 'c926a6fbb3130afdc6c86d509b92fb6650391c4b', htmlFor: componentId, class: "pds-input__label" }, hAsync("span", { key: 'dbbaf9d0db49f949f69f1faf848e7c6193e32793' }, label, this.required && hAsync("span", { key: '42e6325a0f5ee276ed92cf2eb71942c268c3d1aa', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), hAsync("div", { key: '4715743733f2d7d3e4edf9ac4ab6d69ffde04d00', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), hAsync("input", Object.assign({ key: '438ac0fc6d497a8227c83e628d29d4633ffc208a', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (hAsync("p", { key: '43b5c3a332072f19a38be316565602932c61504d', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (hAsync("p", { key: '54fd4fc2dcbc645377edbe4d04cfd82c7d1591e8', class: "pds-input__error-message", id: messageId(componentId, 'error') }, hAsync("pds-icon", { key: '2bd509a575ec5c7a548955dd7f706d7c1d42557e', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
|
|
18416
18514
|
}
|
|
18417
18515
|
static get formAssociated() { return true; }
|
|
18418
18516
|
get el() { return getElement(this); }
|
|
@@ -18468,6 +18566,8 @@ class PdsInput {
|
|
|
18468
18566
|
|
|
18469
18567
|
const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color, var(--pds-context-link-color, var(--pine-color-text)));display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick);position:relative}.pds-link:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:none}:host([color=secondary]) .pds-link{color:var(--pine-color-text-primary)}:host([color=secondary]) .pds-link:hover{color:var(--pine-color-text-inverse-secondary)}:host([color=accent]) .pds-link{color:var(--pine-color-accent)}:host([color=accent]) .pds-link:hover{color:var(--pine-color-accent-hover)}:host([color=danger]) .pds-link{color:var(--pine-color-danger)}:host([color=danger]) .pds-link:hover{color:var(--pine-color-danger-hover)}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:underline}:host([active]) .pds-link{color:var(--pds-context-link-color, var(--pine-color-text-strong));text-decoration:underline}:host([active]) .pds-link:hover{color:var(--pds-context-link-color-hover, var(--pine-color-text-strong));text-decoration:underline}`;
|
|
18470
18568
|
|
|
18569
|
+
// Used when `externalLabel` is unset; an empty string hides the icon instead.
|
|
18570
|
+
const DEFAULT_EXTERNAL_LABEL = '(opens in a new tab)';
|
|
18471
18571
|
/**
|
|
18472
18572
|
* @part link - Link element styles.
|
|
18473
18573
|
* @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.
|
|
@@ -18521,11 +18621,18 @@ class PdsLink {
|
|
|
18521
18621
|
return linkStyles;
|
|
18522
18622
|
}
|
|
18523
18623
|
render() {
|
|
18624
|
+
var _a;
|
|
18524
18625
|
const targetValue = this.target || (this.external ? '_blank' : undefined);
|
|
18525
18626
|
const showExternalIcon = this.external;
|
|
18526
|
-
const
|
|
18527
|
-
|
|
18528
|
-
|
|
18627
|
+
const opensInNewTab = targetValue === '_blank';
|
|
18628
|
+
const relValue = opensInNewTab ? 'noopener noreferrer' : undefined;
|
|
18629
|
+
// A `target` other than _blank overrides `external`, and then the label
|
|
18630
|
+
// would be false, so the icon is decorative there, as it is when the
|
|
18631
|
+
// label is empty.
|
|
18632
|
+
const externalLabel = (_a = this.externalLabel) !== null && _a !== void 0 ? _a : DEFAULT_EXTERNAL_LABEL;
|
|
18633
|
+
const externalIconLabel = opensInNewTab && externalLabel !== '' ? externalLabel : undefined;
|
|
18634
|
+
return (hAsync("a", { key: 'ae7928aa6dce42657545a1d17581818d3724746f', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, hAsync("slot", { key: 'e61374c58fddec869f2f5dda54634a0b1ba9f345' }, this.href), showExternalIcon &&
|
|
18635
|
+
hAsync("pds-icon", { key: '161657146e5f3ce360480c573ea8f14c9012cb1f', icon: launch, size: this.fontSize, "aria-label": externalIconLabel, "aria-hidden": externalIconLabel === undefined ? 'true' : undefined })));
|
|
18529
18636
|
}
|
|
18530
18637
|
static get style() { return pdsLinkCss(); }
|
|
18531
18638
|
static get cmpMeta() { return {
|
|
@@ -18537,6 +18644,7 @@ class PdsLink {
|
|
|
18537
18644
|
"download": [1],
|
|
18538
18645
|
"componentId": [1, "component-id"],
|
|
18539
18646
|
"external": [4],
|
|
18647
|
+
"externalLabel": [1, "external-label"],
|
|
18540
18648
|
"target": [1],
|
|
18541
18649
|
"variant": [1],
|
|
18542
18650
|
"fontSize": [1, "font-size"],
|
|
@@ -18624,7 +18732,7 @@ class PdsLoader {
|
|
|
18624
18732
|
'aria-live': 'polite',
|
|
18625
18733
|
};
|
|
18626
18734
|
this.hostKeeper.record(hostClass, {}, hostAttributes);
|
|
18627
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
18735
|
+
return (hAsync(Host, Object.assign({ key: 'eaf8a64d5c2e37349ed2d2426a6c6bf1df68005f', class: hostClass }, hostAttributes), this.variant === 'spinner' && (hAsync("div", { key: '216143117aabd29ca52c56cd7951a27f9742e466', class: "pds-loader--spinner" }, hAsync("svg", { key: '9c9db37e883fb3a4ba5e0c7c173a5d7a76cdadda', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, hAsync("defs", { key: '8f65f537290ea2dd96b66343324851d243fec3dd' }, hAsync("linearGradient", { key: '8b1a53bcc9401b98dafa805cae8e417af7646bfd', id: "spinner-secondHalf" }, hAsync("stop", { key: 'f06605f7180e9c07d5eb4c9dbadcdb87cee0dd70', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), hAsync("stop", { key: '0bf492e4d5578bd0d98a2f7570a1dd21ca2ecf3d', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), hAsync("linearGradient", { key: '6c7038c158d786866a408063b07b236bf17cefc1', id: "spinner-firstHalf" }, hAsync("stop", { key: '916502c73bc4b78368bb210aed318537841917b9', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), hAsync("stop", { key: '2d20708106bb3a685fbaf4bdcf099684a36359c0', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), hAsync("g", { key: '93165f80e7d5155b3dc8f2fc62e326bec7604c57', class: "pds-loader__spinner-path" }, hAsync("path", { key: '4b1e39a899aadf9d4b4cbf954c783c1103c43c24', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), hAsync("path", { key: '0aa1683dc97e2a01cc076a52a4883388c1d09c6f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), hAsync("path", { key: '9839fb9e0b473814d3b10eb27f7be87990b6c088', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (hAsync("div", { key: 'd83e4625ea2d41a545a98e08edb3033b83e7eb5b', class: "pds-loader--typing" }, hAsync("span", { key: '2e793f3f5b17cb7709c8fc89e2054d7cd77fafd4' }), hAsync("span", { key: 'c266ad3b8edf6c1cc392c544027f7cfd543b711c' }), hAsync("span", { key: '061f9e3030cce603e50e8d86d3aa5036800c1324' }))), hAsync("div", { key: '747c1c6c28136cfb9ba9dac0d4944bc6281af075', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, hAsync("slot", { key: '5eb5a5710deafa10bd269429edff0ac677546cf5', name: "label" }, "Loading..."))));
|
|
18628
18736
|
}
|
|
18629
18737
|
get el() { return getElement(this); }
|
|
18630
18738
|
static get watchers() { return {
|
|
@@ -18648,12 +18756,6 @@ class PdsLoader {
|
|
|
18648
18756
|
}; }
|
|
18649
18757
|
}
|
|
18650
18758
|
|
|
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
18759
|
const TABBABLE = [
|
|
18658
18760
|
'a[href]',
|
|
18659
18761
|
'area[href]',
|
|
@@ -18735,6 +18837,13 @@ function tabbableIn(root) {
|
|
|
18735
18837
|
});
|
|
18736
18838
|
return oneRadioPerGroup(visible);
|
|
18737
18839
|
}
|
|
18840
|
+
|
|
18841
|
+
const pdsModalCss = () => `.pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop[aria-modal=false]{overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop[aria-modal=false]{-webkit-backdrop-filter:none;backdrop-filter:none}.pds-modal__backdrop[aria-modal=false]::before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);content:"";inset:0;position:fixed;z-index:-1}}.pds-modal__backdrop.open{opacity:1;-webkit-transition-timing-function:var(--pine-motion-easing-out);transition-timing-function:var(--pine-motion-easing-out);visibility:visible}.pds-modal{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--custom{max-width:var(--pds-modal-max-width, 700px)}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}`;
|
|
18842
|
+
|
|
18843
|
+
const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
|
|
18844
|
+
const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
|
|
18845
|
+
/\d/.test(value) &&
|
|
18846
|
+
(typeof CSS === 'undefined' || CSS.supports('max-width', value));
|
|
18738
18847
|
/** Whether `node` is `ancestor` or inside it, crossing shadow roots, which `Node.contains` doesn't. */
|
|
18739
18848
|
function containsComposed(ancestor, node) {
|
|
18740
18849
|
for (let current = node; current; current = current instanceof ShadowRoot ? current.host : current.parentNode) {
|
|
@@ -19297,14 +19406,14 @@ class PdsModal {
|
|
|
19297
19406
|
}
|
|
19298
19407
|
render() {
|
|
19299
19408
|
const [sizeClass = 'md', customSize] = this.resolveSize();
|
|
19300
|
-
return (hAsync("dialog", { key: '
|
|
19409
|
+
return (hAsync("dialog", { key: 'cd574868a46b69185e2058c60374dbec34677732', class: {
|
|
19301
19410
|
'pds-modal__backdrop': true,
|
|
19302
19411
|
'open': this.open
|
|
19303
|
-
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: '
|
|
19412
|
+
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: '8c50fb4810b4bb07d62348fed44df30b14a52acd', class: {
|
|
19304
19413
|
'pds-modal': true,
|
|
19305
19414
|
[`pds-modal--${sizeClass}`]: true,
|
|
19306
19415
|
'pds-modal--scrollable': this.scrollable
|
|
19307
|
-
}, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '
|
|
19416
|
+
}, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '25a71c95dfeff4648a28edef21bf510b1743ed7c' }))));
|
|
19308
19417
|
}
|
|
19309
19418
|
get el() { return getElement(this); }
|
|
19310
19419
|
static get watchers() { return {
|
|
@@ -19523,10 +19632,10 @@ class PdsModalContent {
|
|
|
19523
19632
|
render() {
|
|
19524
19633
|
// Only apply max-height style if it's not 'none'
|
|
19525
19634
|
const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
|
|
19526
|
-
return (hAsync(Host, { key: '
|
|
19635
|
+
return (hAsync(Host, { key: 'b4200778f186c45a1917646ba2e0e4e623959951' }, hAsync("div", { key: '39eaaf228e5441f5c0fd628c47be079fb4e07e0f', class: {
|
|
19527
19636
|
'pds-modal-content': true,
|
|
19528
19637
|
[`pds-modal-content--border-${this.border}`]: true
|
|
19529
|
-
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '
|
|
19638
|
+
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: 'ac31a9b81941b8b3abbac3a67c25bacaa54e6840' }))));
|
|
19530
19639
|
}
|
|
19531
19640
|
get el() { return getElement(this); }
|
|
19532
19641
|
static get style() { return pdsModalContentCss(); }
|
|
@@ -19557,7 +19666,7 @@ class PdsModalFooter {
|
|
|
19557
19666
|
unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
|
|
19558
19667
|
}
|
|
19559
19668
|
render() {
|
|
19560
|
-
return (hAsync("footer", { key: '
|
|
19669
|
+
return (hAsync("footer", { key: 'c0d50408471355d80759112e63f58c8a34fb7906', class: "pds-modal__footer" }, hAsync("slot", { key: '6566d446457be8b57e37bf1542a5863b0018d233' })));
|
|
19561
19670
|
}
|
|
19562
19671
|
get el() { return getElement(this); }
|
|
19563
19672
|
static get style() { return pdsModalFooterCss(); }
|
|
@@ -19585,7 +19694,7 @@ class PdsModalHeader {
|
|
|
19585
19694
|
unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
|
|
19586
19695
|
}
|
|
19587
19696
|
render() {
|
|
19588
|
-
return (hAsync("header", { key: '
|
|
19697
|
+
return (hAsync("header", { key: 'eb295ff36fd23b7965296b6dfcfcf783a32079a0', class: "pds-modal__header" }, hAsync("slot", { key: '9c97566ff79f8d9b233d814395d5a7e893751a06' })));
|
|
19589
19698
|
}
|
|
19590
19699
|
get el() { return getElement(this); }
|
|
19591
19700
|
static get style() { return pdsModalHeaderCss(); }
|
|
@@ -20864,10 +20973,10 @@ class PdsMultiselect {
|
|
|
20864
20973
|
}
|
|
20865
20974
|
render() {
|
|
20866
20975
|
const hasSelections = this.selectedItems.length > 0;
|
|
20867
|
-
return (hAsync(Host, { key: '
|
|
20976
|
+
return (hAsync(Host, { key: 'a92086af75e20b9b37b147365bfa517d96021700', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: 'd49e0442e3a348248e5ac3b37afc9f128b34956b', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: '41a081803dfd784e20a7135ecf5f5c4657908dd1', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
|
|
20868
20977
|
'pds-multiselect__label': true,
|
|
20869
20978
|
'visually-hidden': this.hideLabel,
|
|
20870
|
-
} }, this.label)), hAsync("div", { key: '
|
|
20979
|
+
} }, this.label)), hAsync("div", { key: '0e3c8a3aaf7c70b4ff71972c29b8d5599f62ec97', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (hAsync("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
|
|
20871
20980
|
'pds-multiselect__trigger': true,
|
|
20872
20981
|
'pds-multiselect__trigger--open': this.isOpen,
|
|
20873
20982
|
'pds-multiselect__trigger--disabled': this.disabled,
|
|
@@ -20883,7 +20992,7 @@ class PdsMultiselect {
|
|
|
20883
20992
|
}, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hAsync("span", { class: {
|
|
20884
20993
|
'pds-multiselect__trigger-text': true,
|
|
20885
20994
|
'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: '
|
|
20995
|
+
} }, this.getTriggerText()), hAsync("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: 'd5cddc1d3374d94ecf0cce1bcaf7c7125bf3128d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: 'e3cb958b6fd2b1e138b769de0f53be1b8564902d', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: 'f6c2a30cc192391973d9b22fbb6732ce387832ac', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'f437effafaa383b81aec7b5bf635598c8b0075b8', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: 'f1e747137f2dc7cad3d4e1ff8fc293401e3173e1', style: { display: 'none' } }, hAsync("slot", { key: 'f337137b3ca5983dc6641361101f6d19c972778c' })))));
|
|
20887
20996
|
}
|
|
20888
20997
|
static get formAssociated() { return true; }
|
|
20889
20998
|
get el() { return getElement(this); }
|
|
@@ -21021,7 +21130,7 @@ const cssEscape = (value) => {
|
|
|
21021
21130
|
return result;
|
|
21022
21131
|
};
|
|
21023
21132
|
|
|
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}`;
|
|
21133
|
+
const pdsPopoverCss = () => `:host{--sizing-max-width-default:352px;display:inline-block}:host .pds-popover__trigger-wrapper{display:inline-block}:host .pds-popover__tab-guard{opacity:0;outline:none;pointer-events:none;position:fixed}:host .pds-popover__content-slot-wrapper{display:none}`;
|
|
21025
21134
|
|
|
21026
21135
|
/** Open popovers that close on Escape, in the order they opened: Escape goes to the last one it applies to. */
|
|
21027
21136
|
const popoversTakingEscape = [];
|
|
@@ -21029,6 +21138,24 @@ const popoversTakingEscape = [];
|
|
|
21029
21138
|
const HOVER_OPEN_DELAY_MS = 120;
|
|
21030
21139
|
/** Leaving the trigger and panel waits this long before closing, which covers the gap between them. */
|
|
21031
21140
|
const HOVER_CLOSE_DELAY_MS = 200;
|
|
21141
|
+
/**
|
|
21142
|
+
* floating-ui reporting viewport coordinates, as `position: fixed` uses without a containing block. Its own
|
|
21143
|
+
* containing-block check misses a backdrop filter in WebKit, so handlePopoverPositioning corrects for one itself.
|
|
21144
|
+
*/
|
|
21145
|
+
const viewportPlatform = Object.assign(Object.assign({}, platform), { getOffsetParent: () => window });
|
|
21146
|
+
/**
|
|
21147
|
+
* Where `top: 0; left: 0` puts a fixed element beside the given one. An empty probe is measured instead of the
|
|
21148
|
+
* element, whose own transforms, such as an entrance animation, would otherwise read as part of the offset.
|
|
21149
|
+
*/
|
|
21150
|
+
const containingBlockOrigin = (element) => {
|
|
21151
|
+
var _a;
|
|
21152
|
+
const probe = document.createElement('div');
|
|
21153
|
+
probe.style.cssText = 'all: initial; position: fixed; top: 0; left: 0;';
|
|
21154
|
+
(_a = element.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(probe, element);
|
|
21155
|
+
const { top, left } = probe.getBoundingClientRect();
|
|
21156
|
+
probe.remove();
|
|
21157
|
+
return { top, left };
|
|
21158
|
+
};
|
|
21032
21159
|
/** The focused element, followed down through shadow roots to the control that has focus. */
|
|
21033
21160
|
function deepActiveElement() {
|
|
21034
21161
|
var _a;
|
|
@@ -21037,6 +21164,27 @@ function deepActiveElement() {
|
|
|
21037
21164
|
active = active.shadowRoot.activeElement;
|
|
21038
21165
|
return active;
|
|
21039
21166
|
}
|
|
21167
|
+
/** `node`, or the shadow host it sits in, lifted until it shares a tree with `other` or reaches the document. */
|
|
21168
|
+
function liftToTreeOf(node, other) {
|
|
21169
|
+
let current = node;
|
|
21170
|
+
while (current.getRootNode() !== other.getRootNode() && current.getRootNode() instanceof ShadowRoot) {
|
|
21171
|
+
current = current.getRootNode().host;
|
|
21172
|
+
}
|
|
21173
|
+
return current;
|
|
21174
|
+
}
|
|
21175
|
+
/**
|
|
21176
|
+
* Where `node` sits relative to `ref`, as `compareDocumentPosition` reports it. Whichever of the two
|
|
21177
|
+
* is inside a shadow root is lifted to its host first, so a control inside a component compares too.
|
|
21178
|
+
*/
|
|
21179
|
+
function positionAcrossTrees(ref, node) {
|
|
21180
|
+
const lifted = liftToTreeOf(node, ref);
|
|
21181
|
+
return liftToTreeOf(ref, lifted).compareDocumentPosition(lifted);
|
|
21182
|
+
}
|
|
21183
|
+
const isPosition = (position, flag) => (position & Node.DOCUMENT_POSITION_DISCONNECTED) === 0 && (position & flag) !== 0;
|
|
21184
|
+
/** The popover each panel belongs to, so a popover inside another one's panel can find it. */
|
|
21185
|
+
const panelOwners = new WeakMap();
|
|
21186
|
+
/** Floating layers Pine components put at the end of the page or of a dialog, as a popover does its panel. */
|
|
21187
|
+
const FLOATING_LAYERS = '.pds-popover, .pds-datepicker-calendar-portal, .pds-combobox-dropdown-portal';
|
|
21040
21188
|
/**
|
|
21041
21189
|
* @slot trigger - The trigger element for the popover
|
|
21042
21190
|
* @slot (default) - The content to display inside the popover
|
|
@@ -21076,14 +21224,21 @@ class PdsPopover {
|
|
|
21076
21224
|
*/
|
|
21077
21225
|
this.portalEl = null;
|
|
21078
21226
|
/**
|
|
21079
|
-
*
|
|
21227
|
+
* Stops floating-ui's autoUpdate, which repositions the open panel as its trigger or the page moves or resizes
|
|
21080
21228
|
*/
|
|
21081
|
-
this.
|
|
21229
|
+
this.stopAutoUpdate = null;
|
|
21082
21230
|
/**
|
|
21083
|
-
*
|
|
21231
|
+
* Counts positioning runs, so a run that resolves after a newer one started is dropped
|
|
21084
21232
|
*/
|
|
21085
|
-
this.
|
|
21086
|
-
|
|
21233
|
+
this.positioningRun = 0;
|
|
21234
|
+
/**
|
|
21235
|
+
* The latest positioning run, which pdsPopoverOpen waits for so the panel's side is set when it fires
|
|
21236
|
+
*/
|
|
21237
|
+
this.positioning = Promise.resolve();
|
|
21238
|
+
/**
|
|
21239
|
+
* Set while show() waits to emit pdsPopoverOpen, so a hide() in the meantime emits it first
|
|
21240
|
+
*/
|
|
21241
|
+
this.openEventPending = false;
|
|
21087
21242
|
/**
|
|
21088
21243
|
* Track moved nodes and their placeholders for restoration
|
|
21089
21244
|
*/
|
|
@@ -21104,6 +21259,18 @@ class PdsPopover {
|
|
|
21104
21259
|
* How far the pointer was from the panel at its last move after leaving the trigger
|
|
21105
21260
|
*/
|
|
21106
21261
|
this.panelDistance = Infinity;
|
|
21262
|
+
/**
|
|
21263
|
+
* Stands in for the panel in the Tab order, right after the trigger, while the popover is open
|
|
21264
|
+
*/
|
|
21265
|
+
this.tabGuardEl = null;
|
|
21266
|
+
/**
|
|
21267
|
+
* Set while focus passes through the guard on its way out of the panel
|
|
21268
|
+
*/
|
|
21269
|
+
this.leavingPanel = false;
|
|
21270
|
+
/**
|
|
21271
|
+
* The direction of the Tab key being handled, until its default action has run
|
|
21272
|
+
*/
|
|
21273
|
+
this.tabDirection = null;
|
|
21107
21274
|
/**
|
|
21108
21275
|
* Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
|
|
21109
21276
|
* @defaultValue "show"
|
|
@@ -21157,6 +21324,9 @@ class PdsPopover {
|
|
|
21157
21324
|
else {
|
|
21158
21325
|
this.triggerEl = null;
|
|
21159
21326
|
}
|
|
21327
|
+
// autoUpdate watches the trigger it started with, so an open popover starts it again on the new one.
|
|
21328
|
+
if (this.active)
|
|
21329
|
+
this.addScrollAndResizeListeners();
|
|
21160
21330
|
this.observeTrigger();
|
|
21161
21331
|
};
|
|
21162
21332
|
/**
|
|
@@ -21274,6 +21444,59 @@ class PdsPopover {
|
|
|
21274
21444
|
event.stopPropagation();
|
|
21275
21445
|
}
|
|
21276
21446
|
};
|
|
21447
|
+
// At the end of the body or of a dialog, the panel would come last in the Tab order. The guard
|
|
21448
|
+
// after the trigger takes its place there, while the panel has a control for it to lead to.
|
|
21449
|
+
this.syncTabGuard = (event) => {
|
|
21450
|
+
if (event.key !== 'Tab')
|
|
21451
|
+
return;
|
|
21452
|
+
this.releasePanel();
|
|
21453
|
+
this.tabDirection = event.shiftKey ? 'backward' : 'forward';
|
|
21454
|
+
setTimeout(this.endTabKey);
|
|
21455
|
+
// Read on each Tab, as the panel's content can arrive after it opens.
|
|
21456
|
+
const guarding = this.guardedTabbables().length > 0;
|
|
21457
|
+
if (this.tabGuardEl != null)
|
|
21458
|
+
this.tabGuardEl.tabIndex = guarding ? 0 : -1;
|
|
21459
|
+
// Inert for this key press, the panel is reached only through the guard, either way round. A
|
|
21460
|
+
// control in another floating layer, such as a nested popover's panel, may move focus back into it.
|
|
21461
|
+
const focused = deepActiveElement();
|
|
21462
|
+
if (guarding && !containsComposed$1(this.portalEl, focused) && !closest$1(FLOATING_LAYERS, focused !== null && focused !== void 0 ? focused : document)) {
|
|
21463
|
+
this.portalEl.inert = true;
|
|
21464
|
+
}
|
|
21465
|
+
};
|
|
21466
|
+
this.endTabKey = () => {
|
|
21467
|
+
this.tabDirection = null;
|
|
21468
|
+
this.releasePanel();
|
|
21469
|
+
};
|
|
21470
|
+
this.handleTabGuardFocus = (event) => {
|
|
21471
|
+
if (this.leavingPanel)
|
|
21472
|
+
return;
|
|
21473
|
+
// An inert panel's controls aren't tabbable, so the guard would find none to send focus to.
|
|
21474
|
+
this.releasePanel();
|
|
21475
|
+
const tabbables = this.guardedTabbables();
|
|
21476
|
+
// A Tab press says which end of the panel focus comes in at; without one, where it came from does.
|
|
21477
|
+
const from = event.relatedTarget;
|
|
21478
|
+
const backward = this.tabDirection != null ? this.tabDirection === 'backward' : from != null && this.isAfterPopover(from);
|
|
21479
|
+
const target = backward ? tabbables[tabbables.length - 1] : tabbables[0];
|
|
21480
|
+
// Focus can reach the guard without a Tab keydown here (from a frame, or assistive tech) after
|
|
21481
|
+
// the panel's controls are gone. The trigger is the nearest visible place for it.
|
|
21482
|
+
if (target == null)
|
|
21483
|
+
this.returnFocusToTrigger();
|
|
21484
|
+
else
|
|
21485
|
+
target.focus();
|
|
21486
|
+
};
|
|
21487
|
+
this.handleTabFromPanel = (event) => {
|
|
21488
|
+
if (event.key !== 'Tab' || event.defaultPrevented || this.tabGuardEl == null)
|
|
21489
|
+
return;
|
|
21490
|
+
const tabbables = this.guardedTabbables();
|
|
21491
|
+
const edge = event.shiftKey ? tabbables[0] : tabbables[tabbables.length - 1];
|
|
21492
|
+
if (edge == null || deepActiveElement() !== edge)
|
|
21493
|
+
return;
|
|
21494
|
+
this.leavePanel(edge, event.shiftKey);
|
|
21495
|
+
};
|
|
21496
|
+
this.releasePanel = () => {
|
|
21497
|
+
if (this.portalEl != null)
|
|
21498
|
+
this.portalEl.inert = false;
|
|
21499
|
+
};
|
|
21277
21500
|
}
|
|
21278
21501
|
openOnChanged() {
|
|
21279
21502
|
this.pin();
|
|
@@ -21309,8 +21532,6 @@ class PdsPopover {
|
|
|
21309
21532
|
// Bind event handlers for cleanup
|
|
21310
21533
|
this.boundClickOutsideHandler = this.handleClickOutside.bind(this);
|
|
21311
21534
|
this.boundEscapeKeyHandler = this.handleEscapeKey.bind(this);
|
|
21312
|
-
this.boundScrollHandler = this.handleScroll.bind(this);
|
|
21313
|
-
this.boundResizeHandler = this.handleResize.bind(this);
|
|
21314
21535
|
// Create portal element
|
|
21315
21536
|
this.createPortal();
|
|
21316
21537
|
this.hasLoaded = true;
|
|
@@ -21409,11 +21630,12 @@ class PdsPopover {
|
|
|
21409
21630
|
// is in now, if any.
|
|
21410
21631
|
if (this.active) {
|
|
21411
21632
|
this.placePortal();
|
|
21412
|
-
|
|
21633
|
+
// autoUpdate listens to the scroll containers around where the trigger was, so it starts again.
|
|
21634
|
+
this.addScrollAndResizeListeners();
|
|
21413
21635
|
}
|
|
21414
21636
|
}
|
|
21415
21637
|
disconnectedCallback() {
|
|
21416
|
-
var _a;
|
|
21638
|
+
var _a, _b;
|
|
21417
21639
|
// Moved in one operation (a DOM morph, or a framework reparenting it), the popover is
|
|
21418
21640
|
// already back in the page. Its portal is outside the popover, so it stays open, with focus
|
|
21419
21641
|
// where it was; connectedCallback moves it to follow the popover.
|
|
@@ -21428,6 +21650,7 @@ class PdsPopover {
|
|
|
21428
21650
|
this.restorePortalContent();
|
|
21429
21651
|
this.active = false;
|
|
21430
21652
|
this.linkTriggerToPortal();
|
|
21653
|
+
this.emitOpenEvent();
|
|
21431
21654
|
this.pdsPopoverClose.emit({
|
|
21432
21655
|
componentId: this.componentId,
|
|
21433
21656
|
popoverType: this.popoverType,
|
|
@@ -21444,32 +21667,20 @@ class PdsPopover {
|
|
|
21444
21667
|
this.removeLightDismissListeners();
|
|
21445
21668
|
this.removeScrollAndResizeListeners();
|
|
21446
21669
|
document.removeEventListener('submit', this.handleSubmitFromPanel, true);
|
|
21447
|
-
|
|
21448
|
-
this.
|
|
21670
|
+
document.removeEventListener('keydown', this.syncTabGuard, true);
|
|
21671
|
+
(_b = this.tabGuardEl) === null || _b === void 0 ? void 0 : _b.removeAttribute('tabindex');
|
|
21449
21672
|
this.clearHoverTimers();
|
|
21450
21673
|
this.hoverOpened = false;
|
|
21451
21674
|
// Remove portal from DOM
|
|
21452
21675
|
this.removePortal();
|
|
21453
21676
|
}
|
|
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
21677
|
createPortal() {
|
|
21468
21678
|
var _a;
|
|
21469
21679
|
if (this.portalEl !== null)
|
|
21470
21680
|
return;
|
|
21471
21681
|
this.portalEl = document.createElement('div');
|
|
21472
21682
|
this.portalEl.className = 'pds-popover';
|
|
21683
|
+
panelOwners.set(this.portalEl, this);
|
|
21473
21684
|
// Apply all styles inline since portal is outside shadow DOM
|
|
21474
21685
|
this.portalEl.style.position = 'fixed';
|
|
21475
21686
|
this.portalEl.style.zIndex = 'var(--pine-z-index-raised)';
|
|
@@ -21496,6 +21707,7 @@ class PdsPopover {
|
|
|
21496
21707
|
// This is done after appending to ensure it's part of the document and can access CSS variables
|
|
21497
21708
|
this.addPortalFocusStyles();
|
|
21498
21709
|
this.listenForHover(this.portalEl);
|
|
21710
|
+
this.portalEl.addEventListener('keydown', this.handleTabFromPanel);
|
|
21499
21711
|
}
|
|
21500
21712
|
/**
|
|
21501
21713
|
* Adds Pine design system focus styles and dark mode border to the portal element
|
|
@@ -21629,15 +21841,10 @@ class PdsPopover {
|
|
|
21629
21841
|
this.portalEl.style.display = 'block';
|
|
21630
21842
|
this.portalEl.style.opacity = '1';
|
|
21631
21843
|
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)
|
|
21844
|
+
// Position the popover now, and again whenever its trigger or the page moves or resizes
|
|
21639
21845
|
this.addScrollAndResizeListeners();
|
|
21640
21846
|
document.addEventListener('submit', this.handleSubmitFromPanel, true);
|
|
21847
|
+
document.addEventListener('keydown', this.syncTabGuard, true);
|
|
21641
21848
|
// Add document listeners for light dismiss and escape key (auto type only), or for the escape
|
|
21642
21849
|
// key alone while hover holds a manual popover open
|
|
21643
21850
|
if (this.popoverType === 'auto') {
|
|
@@ -21648,7 +21855,20 @@ class PdsPopover {
|
|
|
21648
21855
|
popoversTakingEscape.push(this);
|
|
21649
21856
|
document.addEventListener('keydown', this.boundEscapeKeyHandler);
|
|
21650
21857
|
}
|
|
21651
|
-
// Emit open event
|
|
21858
|
+
// Emit open event once the panel is positioned, with the side it took already on it. A reconnect, a
|
|
21859
|
+
// trigger swap or another show() can start a newer run meanwhile, which drops this one, so wait for the latest.
|
|
21860
|
+
this.openEventPending = true;
|
|
21861
|
+
let positioning;
|
|
21862
|
+
do {
|
|
21863
|
+
positioning = this.positioning;
|
|
21864
|
+
await positioning;
|
|
21865
|
+
} while (positioning !== this.positioning);
|
|
21866
|
+
this.emitOpenEvent();
|
|
21867
|
+
}
|
|
21868
|
+
emitOpenEvent() {
|
|
21869
|
+
if (!this.openEventPending)
|
|
21870
|
+
return;
|
|
21871
|
+
this.openEventPending = false;
|
|
21652
21872
|
this.pdsPopoverOpen.emit({
|
|
21653
21873
|
componentId: this.componentId,
|
|
21654
21874
|
popoverType: this.popoverType,
|
|
@@ -21658,6 +21878,7 @@ class PdsPopover {
|
|
|
21658
21878
|
* Closes the popover programmatically
|
|
21659
21879
|
*/
|
|
21660
21880
|
async hide() {
|
|
21881
|
+
var _a;
|
|
21661
21882
|
this.clearHoverTimers();
|
|
21662
21883
|
if (!this.active || !this.portalEl)
|
|
21663
21884
|
return;
|
|
@@ -21673,6 +21894,7 @@ class PdsPopover {
|
|
|
21673
21894
|
// Hide portal. The dark-mode border set in a shadow root is worked out again on the next open.
|
|
21674
21895
|
this.portalEl.style.border = '';
|
|
21675
21896
|
this.portalEl.removeAttribute('data-pds-popover-open');
|
|
21897
|
+
this.portalEl.removeAttribute('data-pds-popover-placement');
|
|
21676
21898
|
this.portalEl.style.display = 'none';
|
|
21677
21899
|
this.portalEl.style.opacity = '0';
|
|
21678
21900
|
this.portalEl.style.visibility = 'hidden';
|
|
@@ -21686,8 +21908,11 @@ class PdsPopover {
|
|
|
21686
21908
|
this.removeLightDismissListeners();
|
|
21687
21909
|
this.removeScrollAndResizeListeners();
|
|
21688
21910
|
document.removeEventListener('submit', this.handleSubmitFromPanel, true);
|
|
21689
|
-
|
|
21690
|
-
this.
|
|
21911
|
+
document.removeEventListener('keydown', this.syncTabGuard, true);
|
|
21912
|
+
(_a = this.tabGuardEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('tabindex');
|
|
21913
|
+
this.releasePanel();
|
|
21914
|
+
// Closed before its first position resolved, it still announces the open before the close.
|
|
21915
|
+
this.emitOpenEvent();
|
|
21691
21916
|
// Emit close event
|
|
21692
21917
|
this.pdsPopoverClose.emit({
|
|
21693
21918
|
componentId: this.componentId,
|
|
@@ -21699,10 +21924,10 @@ class PdsPopover {
|
|
|
21699
21924
|
*/
|
|
21700
21925
|
async toggle() {
|
|
21701
21926
|
if (this.active) {
|
|
21702
|
-
this.hide();
|
|
21927
|
+
await this.hide();
|
|
21703
21928
|
}
|
|
21704
21929
|
else {
|
|
21705
|
-
this.show();
|
|
21930
|
+
await this.show();
|
|
21706
21931
|
}
|
|
21707
21932
|
}
|
|
21708
21933
|
/**
|
|
@@ -21786,19 +22011,62 @@ class PdsPopover {
|
|
|
21786
22011
|
document.removeEventListener('click', this.boundClickOutsideHandler, true);
|
|
21787
22012
|
document.removeEventListener('keydown', this.boundEscapeKeyHandler);
|
|
21788
22013
|
}
|
|
22014
|
+
/**
|
|
22015
|
+
* The panel's controls that Tab reaches through the guard. None when the panel sits right after
|
|
22016
|
+
* the popover, in a dialog, where it's already next in the Tab order.
|
|
22017
|
+
*/
|
|
22018
|
+
guardedTabbables() {
|
|
22019
|
+
if (this.portalEl == null || this.el.nextElementSibling === this.portalEl)
|
|
22020
|
+
return [];
|
|
22021
|
+
return tabbableIn(this.portalEl);
|
|
22022
|
+
}
|
|
22023
|
+
isAfterPopover(node) {
|
|
22024
|
+
if (containsComposed$1(this.el, node))
|
|
22025
|
+
return false;
|
|
22026
|
+
return isPosition(positionAcrossTrees(this.el, node), Node.DOCUMENT_POSITION_FOLLOWING);
|
|
22027
|
+
}
|
|
22028
|
+
/**
|
|
22029
|
+
* Moves focus to the guard without preventing the Tab, so the browser's Tab carries on from there.
|
|
22030
|
+
* Inert until then, the panel can't be where it lands.
|
|
22031
|
+
*/
|
|
22032
|
+
leavePanel(edge, backward) {
|
|
22033
|
+
var _a, _b;
|
|
22034
|
+
this.leavingPanel = true;
|
|
22035
|
+
(_a = this.tabGuardEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
22036
|
+
this.leavingPanel = false;
|
|
22037
|
+
this.portalEl.inert = true;
|
|
22038
|
+
setTimeout(() => this.finishLeavingPanel(edge));
|
|
22039
|
+
// Last in another popover's panel, the guard hands the Tab on to that popover's own guard.
|
|
22040
|
+
const outer = panelOwners.get(closest$1('.pds-popover', this.el));
|
|
22041
|
+
const outerTabbables = (_b = outer === null || outer === void 0 ? void 0 : outer.guardedTabbables()) !== null && _b !== void 0 ? _b : [];
|
|
22042
|
+
if (!backward && outerTabbables[outerTabbables.length - 1] === this.tabGuardEl)
|
|
22043
|
+
outer.leavePanel(edge, false);
|
|
22044
|
+
}
|
|
22045
|
+
// With nowhere for the browser's Tab to go, focus would stay on the invisible guard.
|
|
22046
|
+
finishLeavingPanel(edge) {
|
|
22047
|
+
var _a;
|
|
22048
|
+
this.releasePanel();
|
|
22049
|
+
if (this.active && ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === this.tabGuardEl)
|
|
22050
|
+
edge.focus();
|
|
22051
|
+
}
|
|
21789
22052
|
/**
|
|
21790
22053
|
* Adds scroll and resize listeners for repositioning
|
|
21791
22054
|
*/
|
|
21792
22055
|
addScrollAndResizeListeners() {
|
|
21793
|
-
|
|
21794
|
-
|
|
22056
|
+
this.removeScrollAndResizeListeners();
|
|
22057
|
+
if (this.triggerEl == null || this.portalEl == null)
|
|
22058
|
+
return;
|
|
22059
|
+
this.stopAutoUpdate = autoUpdate(this.triggerEl, this.portalEl, () => {
|
|
22060
|
+
this.positioning = this.handlePopoverPositioning().catch(error => console.warn('pds-popover: failed to position the panel', error));
|
|
22061
|
+
});
|
|
21795
22062
|
}
|
|
21796
22063
|
/**
|
|
21797
22064
|
* Removes scroll and resize listeners
|
|
21798
22065
|
*/
|
|
21799
22066
|
removeScrollAndResizeListeners() {
|
|
21800
|
-
|
|
21801
|
-
|
|
22067
|
+
var _a;
|
|
22068
|
+
(_a = this.stopAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
22069
|
+
this.stopAutoUpdate = null;
|
|
21802
22070
|
}
|
|
21803
22071
|
/**
|
|
21804
22072
|
* Handles clicks outside the popover for light dismiss (auto type only)
|
|
@@ -21862,122 +22130,38 @@ class PdsPopover {
|
|
|
21862
22130
|
this.hide();
|
|
21863
22131
|
}
|
|
21864
22132
|
/**
|
|
21865
|
-
*
|
|
21866
|
-
|
|
21867
|
-
handleScroll() {
|
|
21868
|
-
if (!this.active)
|
|
21869
|
-
return;
|
|
21870
|
-
if (this.scrollDebounceTimer !== null) {
|
|
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)
|
|
22133
|
+
* Positions the popover relative to its trigger element, flipping to the opposite side when only that side has
|
|
22134
|
+
* room and shifting to stay 8px inside the viewport. The side it takes goes on the panel's `data-pds-popover-placement`.
|
|
21880
22135
|
*/
|
|
21881
|
-
|
|
21882
|
-
|
|
21883
|
-
|
|
21884
|
-
if (this.
|
|
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;
|
|
22136
|
+
async handlePopoverPositioning() {
|
|
22137
|
+
// Counted before the guards, so a run still in flight is dropped even when this one can't position.
|
|
22138
|
+
const run = ++this.positioningRun;
|
|
22139
|
+
if (this.triggerEl == null || this.portalEl == null)
|
|
21903
22140
|
return;
|
|
21904
|
-
}
|
|
21905
|
-
const triggerRect = this.triggerEl.getBoundingClientRect();
|
|
21906
|
-
const popoverRect = this.portalEl.getBoundingClientRect();
|
|
21907
22141
|
// Safety check: ensure trigger has valid dimensions (is rendered and visible)
|
|
21908
|
-
|
|
21909
|
-
|
|
22142
|
+
const triggerRect = this.triggerEl.getBoundingClientRect();
|
|
22143
|
+
if (triggerRect.width === 0 || triggerRect.height === 0)
|
|
21910
22144
|
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`;
|
|
22145
|
+
const portal = this.portalEl;
|
|
22146
|
+
const { x: left, y: top, placement } = await computePosition(this.triggerEl, portal, {
|
|
22147
|
+
placement: this.placement,
|
|
22148
|
+
strategy: 'fixed',
|
|
22149
|
+
// With no room on either side, stay on the preferred side: the side that overflows less can still push
|
|
22150
|
+
// a tall panel's start above the viewport.
|
|
22151
|
+
middleware: [offset(8), flip({ fallbackStrategy: 'initialPlacement' }), shift({ padding: 8 })],
|
|
22152
|
+
platform: viewportPlatform,
|
|
22153
|
+
});
|
|
22154
|
+
if (!this.active || run !== this.positioningRun || portal !== this.portalEl)
|
|
22155
|
+
return;
|
|
22156
|
+
portal.setAttribute('data-pds-popover-placement', placement);
|
|
21967
22157
|
// `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
|
|
22158
|
+
// as a modal dialog does with its backdrop filter. Offset by however far that block's corner is from the viewport's.
|
|
22159
|
+
const origin = containingBlockOrigin(portal);
|
|
22160
|
+
portal.style.top = `${top - origin.top}px`;
|
|
22161
|
+
portal.style.left = `${left - origin.left}px`;
|
|
21978
22162
|
}
|
|
21979
22163
|
render() {
|
|
21980
|
-
return (hAsync(Host, { key: '
|
|
22164
|
+
return (hAsync(Host, { key: '85422eb7544a4795ce78b51684b7224a5d856a4e', id: this.componentId }, hAsync("span", { key: '6fe9c827ed4d46ca723d6013f296faf80ba31366', class: "pds-popover__trigger-wrapper" }, hAsync("slot", { key: '970d1974d2be1451e670a36e7d2ccdc5979595bb', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), hAsync("span", { key: '0c76f76286a30d8e6e948bd0abab3317b3673aa6', class: "pds-popover__tab-guard", ref: (el) => (this.tabGuardEl = el !== null && el !== void 0 ? el : null), onFocus: this.handleTabGuardFocus }), hAsync("div", { key: '692c45e93899e74a3d5970f3a3625f6115ab63b0', class: "pds-popover__content-slot-wrapper" }, hAsync("slot", { key: 'f1566e0eb1eb08626f2a8285447702ce96b09f4d', onSlotchange: this.handleContentSlotChange }))));
|
|
21981
22165
|
}
|
|
21982
22166
|
get el() { return getElement(this); }
|
|
21983
22167
|
static get watchers() { return {
|
|
@@ -22050,7 +22234,7 @@ class PdsProgress {
|
|
|
22050
22234
|
const normalizedFillColor = normalizeColorValue$1(this.fillColor);
|
|
22051
22235
|
const hostClass = this.animated ? { 'is-animated': this.animated } : '';
|
|
22052
22236
|
this.hostKeeper.record(hostClass);
|
|
22053
|
-
return (hAsync(Host, { key: '
|
|
22237
|
+
return (hAsync(Host, { key: '6d2151cdd1f65b33a7478e5ac12df711d8252d1f', class: hostClass }, hAsync("div", { key: '4a902c6c7d51fe8e8a778e1fa24bdbf95d625b1f', class: "pds-progress" }, hAsync("label", { key: 'c50955234a7eee05cdf47531e25b4413f206e416', class: "pds-progress__label", htmlFor: this.componentId }, this.label), hAsync("progress", { key: 'c54ad90f7b3fcf3368afca4c5618949f1a370114', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && hAsync("div", { key: '6b3e3f42f04a516ef7992d1f8bc967be432f55bb', class: "pds-progress__percentage" }, this.percent, "%")));
|
|
22054
22238
|
}
|
|
22055
22239
|
get el() { return getElement(this); }
|
|
22056
22240
|
static get style() { return pdsProgressCss(); }
|
|
@@ -22085,7 +22269,7 @@ class PdsProperty {
|
|
|
22085
22269
|
this.icon = 'star';
|
|
22086
22270
|
}
|
|
22087
22271
|
render() {
|
|
22088
|
-
return (hAsync(Host, { key: '
|
|
22272
|
+
return (hAsync(Host, { key: '198ffd747b7a84a6f58a1b072890fc8bd3ed93aa', id: this.componentId }, hAsync("pds-box", { key: 'be71f3d96efea0a45f357d888f71dbe5ad8b68d6', "align-items": "center", gap: "xs" }, hAsync("pds-icon", { key: '1a52407e00b158d5e6a515ad4b07ed3407d31f75', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), hAsync("slot", { key: '46ac5019b27bdd079c7853abeef8f7c240d19c2c' }))));
|
|
22089
22273
|
}
|
|
22090
22274
|
static get style() { return pdsPropertyCss(); }
|
|
22091
22275
|
static get cmpMeta() { return {
|
|
@@ -22103,10 +22287,10 @@ class PdsProperty {
|
|
|
22103
22287
|
|
|
22104
22288
|
const labelCss$3 = () => `.sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
|
|
22105
22289
|
|
|
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)}`;
|
|
22290
|
+
const pdsRadioCss = () => `.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-text-primary);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__content-wrapper.sc-pds-radio{-ms-flex:1;flex:1;min-width:0;overflow-wrap:anywhere}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio::after{cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);cursor:pointer;font:var(--pine-typography-body);min-block-size:var(--pine-dimension-xl);padding:0 var(--pine-dimension-sm);-webkit-transition:border-color var(--pine-motion-duration-fast) ease;transition:border-color var(--pine-motion-duration-fast) ease}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio span.sc-pds-radio{min-width:0;overflow-wrap:anywhere}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:hover{border-color:var(--pine-color-text)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:checked){border-color:var(--pine-color-text-active);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:focus-visible){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-label-disabled);cursor:not-allowed}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled:checked){border-color:var(--pine-color-text-label-disabled);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-label-disabled);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-label-disabled)}@media (forced-colors: active){.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled){border-color:GrayText}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled:checked){border-color:GrayText;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}.pds-radio--pill.sc-pds-radio-h .pds-radio__message.sc-pds-radio{-webkit-margin-start:0;margin-inline-start:0}`;
|
|
22107
22291
|
|
|
22108
22292
|
/**
|
|
22109
|
-
* @slot image - Custom image content to display instead of the default radio input
|
|
22293
|
+
* @slot image - Custom image content to display instead of the default radio input. Ignored when `variant` is `pill`.
|
|
22110
22294
|
* @part image-container - The container for the image
|
|
22111
22295
|
* @lightDom renders-markup
|
|
22112
22296
|
*/
|
|
@@ -22128,7 +22312,7 @@ class PdsRadio {
|
|
|
22128
22312
|
*/
|
|
22129
22313
|
this.disabled = false;
|
|
22130
22314
|
/**
|
|
22131
|
-
* Adds a border around the radio component for better visual separation.
|
|
22315
|
+
* Adds a border around the radio component for better visual separation. Ignored when `variant` is `pill`.
|
|
22132
22316
|
* @defaultValue false
|
|
22133
22317
|
*/
|
|
22134
22318
|
this.hasBorder = false;
|
|
@@ -22142,6 +22326,11 @@ class PdsRadio {
|
|
|
22142
22326
|
* @defaultValue false
|
|
22143
22327
|
*/
|
|
22144
22328
|
this.required = false;
|
|
22329
|
+
/**
|
|
22330
|
+
* Sets the style variant of the radio. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
|
|
22331
|
+
* @defaultValue default
|
|
22332
|
+
*/
|
|
22333
|
+
this.variant = 'default';
|
|
22145
22334
|
this.handleRadioChange = (e) => {
|
|
22146
22335
|
if (this.disabled) {
|
|
22147
22336
|
return;
|
|
@@ -22163,6 +22352,9 @@ class PdsRadio {
|
|
|
22163
22352
|
hasImage() {
|
|
22164
22353
|
return this._hasImage;
|
|
22165
22354
|
}
|
|
22355
|
+
isPill() {
|
|
22356
|
+
return this.variant === 'pill';
|
|
22357
|
+
}
|
|
22166
22358
|
classNames() {
|
|
22167
22359
|
const classNames = [];
|
|
22168
22360
|
if (this.invalid) {
|
|
@@ -22171,10 +22363,14 @@ class PdsRadio {
|
|
|
22171
22363
|
if (this.disabled) {
|
|
22172
22364
|
classNames.push('is-disabled');
|
|
22173
22365
|
}
|
|
22174
|
-
|
|
22366
|
+
// A pill is its own bordered shape, so has-border doesn't stack a card around it.
|
|
22367
|
+
if (this.hasBorder && !this.isPill()) {
|
|
22175
22368
|
classNames.push('has-border');
|
|
22176
22369
|
}
|
|
22177
|
-
if (this.
|
|
22370
|
+
if (this.isPill()) {
|
|
22371
|
+
classNames.push('pds-radio--pill');
|
|
22372
|
+
}
|
|
22373
|
+
if (this.hasImage() && !this.isPill()) {
|
|
22178
22374
|
classNames.push('has-image');
|
|
22179
22375
|
}
|
|
22180
22376
|
return classNames.join(' ');
|
|
@@ -22204,13 +22400,14 @@ class PdsRadio {
|
|
|
22204
22400
|
}
|
|
22205
22401
|
render() {
|
|
22206
22402
|
const renderLabelAndMessages = () => [
|
|
22207
|
-
hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: '
|
|
22403
|
+
hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: 'fdd83248666907fa25c5406cdedcd0e6f8d45f50', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() || this.isPill() ? 'visually-hidden' : '' }), hAsync("span", { key: '73166ffd57cdb1f3b9e2b61fe880216b23a6510b', class: this.hideLabel && !this.isPill() ? 'visually-hidden' : '' }, this.label)),
|
|
22208
22404
|
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: '
|
|
22405
|
+
this.errorMessage && (hAsync("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'e5bca81578382181b6fce61fa6830fd60e54234a', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))
|
|
22210
22406
|
];
|
|
22211
22407
|
const hostClass = this.classNames();
|
|
22212
22408
|
this.hostKeeper.record(hostClass);
|
|
22213
|
-
|
|
22409
|
+
const showImage = this.hasImage() && !this.isPill();
|
|
22410
|
+
return (hAsync(Host, { key: '4cf39a988cc7642234ff62e7fa2f0d08b09e7d25', class: hostClass }, showImage && (hAsync("div", { key: '7a88d32f896ad4696ea46b13f9ef01e7df0a1c3e', class: "pds-radio__image-container", part: "image-container" }, hAsync("slot", { key: 'eb8399263443d36ab91c0875602d0dc31f036058', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), showImage ? (hAsync("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
|
|
22214
22411
|
}
|
|
22215
22412
|
get el() { return getElement(this); }
|
|
22216
22413
|
static get style() { return labelCss$3() + pdsRadioCss(); }
|
|
@@ -22230,6 +22427,7 @@ class PdsRadio {
|
|
|
22230
22427
|
"name": [1],
|
|
22231
22428
|
"required": [4],
|
|
22232
22429
|
"value": [1],
|
|
22430
|
+
"variant": [1],
|
|
22233
22431
|
"_hasImage": [32]
|
|
22234
22432
|
},
|
|
22235
22433
|
"$listeners$": undefined,
|
|
@@ -22402,13 +22600,13 @@ class PdsRadioGroup {
|
|
|
22402
22600
|
render() {
|
|
22403
22601
|
const gapValue = this.getGapValue();
|
|
22404
22602
|
const ariaDescribedBy = this.getAriaDescribedBy();
|
|
22405
|
-
return (hAsync(Host, { key: '
|
|
22603
|
+
return (hAsync(Host, { key: 'aaf53113f06a0f49706e53735701fba64e79cb4d', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
|
|
22406
22604
|
'--pds-radio-group-gap': gapValue,
|
|
22407
|
-
} }, this.groupLabel && (hAsync("div", { key: '
|
|
22605
|
+
} }, this.groupLabel && (hAsync("div", { key: '4be5e43146bf348929e45498107862aaca161644', class: "pds-radio-group__label" }, this.groupLabel)), hAsync("div", { key: 'b4a1b870c1a7167b8dcbcf0a11808bbd9a8cec4e', class: {
|
|
22408
22606
|
'pds-radio-group__radios': true,
|
|
22409
22607
|
'pds-radio-group__radios--row': this.direction === 'row',
|
|
22410
22608
|
'pds-radio-group__radios--column': this.direction === 'column',
|
|
22411
|
-
} }, hAsync("slot", { key: '
|
|
22609
|
+
} }, hAsync("slot", { key: '2d841cc69c35a4f9da933bbb33c1384ca343e077', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (hAsync("div", { key: 'a09bb9e739570c06dc1907cb4e2dceecca36f7d3', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("div", { key: 'b8fe891cc4b8683d18c19b3b4ddb70212185b954', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '9a15d81d8303eeb5a928b96c760f6b15e536e0dc', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
|
|
22412
22610
|
}
|
|
22413
22611
|
get el() { return getElement(this); }
|
|
22414
22612
|
static get watchers() { return {
|
|
@@ -22517,7 +22715,7 @@ class PdsRow {
|
|
|
22517
22715
|
'min-height': this.minHeight,
|
|
22518
22716
|
}));
|
|
22519
22717
|
this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
|
|
22520
|
-
return hAsync(Host, { key: '
|
|
22718
|
+
return hAsync(Host, { key: '589ee3251a4ee1d7824c8e2fa3e214de5466c3db', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
|
|
22521
22719
|
}
|
|
22522
22720
|
get el() { return getElement(this); }
|
|
22523
22721
|
static get style() { return pdsRowCss(); }
|
|
@@ -22547,6 +22745,25 @@ const labelCss$2 = () => `:host{display:inline-block}:host([aria-disabled=true])
|
|
|
22547
22745
|
|
|
22548
22746
|
const pdsSelectCss = () => `:host{--pds-select-background:var(--pine-color-background-container);--pds-select-border:var(--pine-border);--pds-select-border-radius:var(--pine-dimension-125);--pds-select-border-radius-start-end:var(--pine-dimension-125);--pds-select-border-radius-start-start:var(--pine-dimension-125);--pds-select-border-radius-end-end:var(--pine-dimension-125);--pds-select-border-radius-end-start:var(--pine-dimension-125);--pds-select-min-height:36px;--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger)}:host .hidden,:host :host([hidden]){display:none}.pds-select{color:var(--pine-color-text);display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:"label label" "field field" "message message";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}.pds-select__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-area:label;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--pds-select-background);border:var(--pds-select-border);border-end-end-radius:var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));border-end-start-radius:var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));border-start-end-radius:var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));border-start-start-radius:var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));color:var(--pine-color-text);font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-select-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);-webkit-padding-end:var(--pine-dimension-450);padding-inline-end:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-color-red-950)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-disabled) .pds-select__select-icon{color:var(--pine-color-text-disabled)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) :host(.is-invalid) select{background-color:var(--pine-color-red-950)}:host(.is-invalid) select:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-accent);color:var(--pine-color-text-accent)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:hover:not(:disabled){border-color:var(--pine-color-accent-hover)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:focus-visible{outline-color:var(--pine-color-focus-ring)}:host([highlight]:not(.is-disabled):not(.is-invalid)) .pds-select__select-icon{color:var(--pine-color-text-accent)}.pds-select__error-message,.pds-select__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-select__error-message{color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-select__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:var(--pds-select-min-height);pointer-events:none;position:relative;z-index:calc(var(--pine-z-index-raised) - 1)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
|
|
22549
22747
|
|
|
22748
|
+
/** The tags of an option list in order, optgroup contents included: equal shapes can be patched in place. */
|
|
22749
|
+
const shapeOf = (items) => items.map((item) => item.tagName + (item.tagName === 'OPTGROUP' ? `(${shapeOf(Array.from(item.children))})` : '')).join();
|
|
22750
|
+
/** Brings an existing option or optgroup up to date with its copy, keeping the element itself. */
|
|
22751
|
+
const patchInPlace = (target, copy) => {
|
|
22752
|
+
Array.from(target.attributes).forEach(({ name }) => {
|
|
22753
|
+
if (!copy.hasAttribute(name))
|
|
22754
|
+
target.removeAttribute(name);
|
|
22755
|
+
});
|
|
22756
|
+
Array.from(copy.attributes).forEach(({ name, value }) => {
|
|
22757
|
+
if (target.getAttribute(name) !== value)
|
|
22758
|
+
target.setAttribute(name, value);
|
|
22759
|
+
});
|
|
22760
|
+
if (copy.tagName === 'OPTGROUP') {
|
|
22761
|
+
Array.from(copy.children).forEach((child, index) => patchInPlace(target.children[index], child));
|
|
22762
|
+
}
|
|
22763
|
+
else if (target.textContent !== copy.textContent) {
|
|
22764
|
+
target.textContent = copy.textContent;
|
|
22765
|
+
}
|
|
22766
|
+
};
|
|
22550
22767
|
/**
|
|
22551
22768
|
* @slot action - Content to be displayed in the label area, typically for help icons or links
|
|
22552
22769
|
*/
|
|
@@ -22558,6 +22775,9 @@ class PdsSelect {
|
|
|
22558
22775
|
this.pdsFocus = createEvent(this, "pdsFocus");
|
|
22559
22776
|
this.pdsKeyDown = createEvent(this, "pdsKeyDown");
|
|
22560
22777
|
this._type = 'select-one';
|
|
22778
|
+
this.optionObserver = null;
|
|
22779
|
+
this.optionSyncFrame = null;
|
|
22780
|
+
this.hasHadOptions = false;
|
|
22561
22781
|
this.hostKeeper = new HostStylingKeeper();
|
|
22562
22782
|
/**
|
|
22563
22783
|
* Indicates whether or not the select field is disabled.
|
|
@@ -22574,6 +22794,16 @@ class PdsSelect {
|
|
|
22574
22794
|
* @defaultValue false
|
|
22575
22795
|
*/
|
|
22576
22796
|
this.required = false;
|
|
22797
|
+
/**
|
|
22798
|
+
* Whether a mutation is inside an option or optgroup. The host's own attributes and children
|
|
22799
|
+
* (top-level adds and removes reach `slotchange`) and the action slot's content are not.
|
|
22800
|
+
*/
|
|
22801
|
+
this.touchesOption = ({ target }) => {
|
|
22802
|
+
// Not just TEXT_NODE: characterData also reports comment nodes, and a Comment has no
|
|
22803
|
+
// .closest() — treating anything non-Element as a Text node crashed on one.
|
|
22804
|
+
const element = target.nodeType === Node.ELEMENT_NODE ? target : target.parentElement;
|
|
22805
|
+
return target !== this.el && (element === null || element === void 0 ? void 0 : element.closest('option, optgroup')) != null;
|
|
22806
|
+
};
|
|
22577
22807
|
/**
|
|
22578
22808
|
* Emits an event on input change.
|
|
22579
22809
|
*/
|
|
@@ -22600,25 +22830,47 @@ class PdsSelect {
|
|
|
22600
22830
|
this.pdsKeyDown.emit(ev);
|
|
22601
22831
|
};
|
|
22602
22832
|
/**
|
|
22603
|
-
*
|
|
22604
|
-
*
|
|
22605
|
-
*
|
|
22606
|
-
*
|
|
22833
|
+
* Copies the slotted <option> and <optgroup> elements into the inner select, then
|
|
22834
|
+
* reselects the current value. Runs on `slotchange` and when a slotted option changes
|
|
22835
|
+
* (see startOptionSync).
|
|
22836
|
+
*
|
|
22837
|
+
* Nothing happens when the copies match what the select already holds. When only text or
|
|
22838
|
+
* attributes changed, the select's own options are updated in place rather than replaced,
|
|
22839
|
+
* so an open picker keeps its highlight, a multiple select keeps its range anchor, and a
|
|
22840
|
+
* screen reader keeps its place. Selecting programmatically fires no change event, so a
|
|
22841
|
+
* copy never emits `pdsSelectChange`.
|
|
22607
22842
|
*/
|
|
22608
22843
|
this.handleSlotChange = () => {
|
|
22609
|
-
|
|
22610
|
-
this.
|
|
22611
|
-
|
|
22612
|
-
|
|
22613
|
-
|
|
22614
|
-
|
|
22615
|
-
|
|
22616
|
-
|
|
22617
|
-
|
|
22618
|
-
|
|
22619
|
-
|
|
22620
|
-
|
|
22844
|
+
var _a;
|
|
22845
|
+
const slot = (_a = this.slotContainer) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
|
|
22846
|
+
if (slot === null || slot === undefined || this.selectEl === undefined)
|
|
22847
|
+
return;
|
|
22848
|
+
const copies = slot.assignedElements({ flatten: true })
|
|
22849
|
+
.filter((item) => ['OPTION', 'OPTGROUP'].includes(item.tagName))
|
|
22850
|
+
.map((item) => item.cloneNode(true));
|
|
22851
|
+
const current = Array.from(this.selectEl.children);
|
|
22852
|
+
// The very first copy populates an empty select, where falling back to the first option (like
|
|
22853
|
+
// a native select) is correct; the no-match blank state is for options changing under a value
|
|
22854
|
+
// that was already showing selected. Tracked separately from the select's current emptiness:
|
|
22855
|
+
// an async reload that clears options before the next set lands would otherwise look like a
|
|
22856
|
+
// first render again, and the no-match state must still apply once that next set arrives.
|
|
22857
|
+
const hadOptions = this.hasHadOptions;
|
|
22858
|
+
if (copies.length > 0)
|
|
22859
|
+
this.hasHadOptions = true;
|
|
22860
|
+
const markup = (items) => items.map((item) => item.outerHTML).join('');
|
|
22861
|
+
if (markup(copies) === markup(current))
|
|
22862
|
+
return;
|
|
22863
|
+
if (shapeOf(copies) === shapeOf(current)) {
|
|
22864
|
+
copies.forEach((copy, index) => patchInPlace(current[index], copy));
|
|
22865
|
+
}
|
|
22866
|
+
else {
|
|
22867
|
+
this.selectEl.innerHTML = '';
|
|
22868
|
+
copies.forEach((copy) => this.selectEl.appendChild(copy));
|
|
22869
|
+
}
|
|
22621
22870
|
this.updateSelectedOption();
|
|
22871
|
+
if (hadOptions)
|
|
22872
|
+
this.showNoSelectionWithoutMatch();
|
|
22873
|
+
this.updateFormValue();
|
|
22622
22874
|
};
|
|
22623
22875
|
}
|
|
22624
22876
|
/**
|
|
@@ -22647,9 +22899,16 @@ class PdsSelect {
|
|
|
22647
22899
|
}
|
|
22648
22900
|
// Expose type property on the element instance to match native form element behavior
|
|
22649
22901
|
exposeTypeProperty(this.el, () => this._type);
|
|
22902
|
+
// Reconnected after a move: componentDidLoad won't run again, and options may have changed
|
|
22903
|
+
// while it was out of the document.
|
|
22904
|
+
if (this.selectEl !== undefined) {
|
|
22905
|
+
this.startOptionSync();
|
|
22906
|
+
this.scheduleOptionSync();
|
|
22907
|
+
}
|
|
22650
22908
|
}
|
|
22651
22909
|
disconnectedCallback() {
|
|
22652
22910
|
this.hostKeeper.disconnect();
|
|
22911
|
+
this.stopOptionSync();
|
|
22653
22912
|
}
|
|
22654
22913
|
componentWillLoad() {
|
|
22655
22914
|
// Set initial type based on multiple prop
|
|
@@ -22659,6 +22918,43 @@ class PdsSelect {
|
|
|
22659
22918
|
componentDidLoad() {
|
|
22660
22919
|
// Set initial form value
|
|
22661
22920
|
this.updateFormValue();
|
|
22921
|
+
// Stencil holds componentDidLoad until the shadow root's pds-icon has loaded, so options can
|
|
22922
|
+
// change between the first slotchange copy and here with nothing observing yet — the same gap
|
|
22923
|
+
// the reconnect path closes with a catch-up sync.
|
|
22924
|
+
this.startOptionSync();
|
|
22925
|
+
this.scheduleOptionSync();
|
|
22926
|
+
}
|
|
22927
|
+
/**
|
|
22928
|
+
* Keeps the inner select in step with the slotted options. `slotchange` only fires when
|
|
22929
|
+
* top-level options are added or removed, so an option's text, value or disabled state
|
|
22930
|
+
* changing, or an option added inside an optgroup, would otherwise never reach the select.
|
|
22931
|
+
* Changes are batched into one copy per animation frame.
|
|
22932
|
+
*/
|
|
22933
|
+
startOptionSync() {
|
|
22934
|
+
if (this.optionObserver !== null || typeof MutationObserver === 'undefined' || !this.el.isConnected)
|
|
22935
|
+
return;
|
|
22936
|
+
this.optionObserver = new MutationObserver((mutations) => {
|
|
22937
|
+
if (mutations.some(this.touchesOption))
|
|
22938
|
+
this.scheduleOptionSync();
|
|
22939
|
+
});
|
|
22940
|
+
this.optionObserver.observe(this.el, { childList: true, subtree: true, attributes: true, characterData: true });
|
|
22941
|
+
}
|
|
22942
|
+
scheduleOptionSync() {
|
|
22943
|
+
if (this.optionSyncFrame !== null)
|
|
22944
|
+
return;
|
|
22945
|
+
this.optionSyncFrame = requestAnimationFrame(() => {
|
|
22946
|
+
this.optionSyncFrame = null;
|
|
22947
|
+
this.handleSlotChange();
|
|
22948
|
+
});
|
|
22949
|
+
}
|
|
22950
|
+
stopOptionSync() {
|
|
22951
|
+
var _a;
|
|
22952
|
+
(_a = this.optionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
22953
|
+
this.optionObserver = null;
|
|
22954
|
+
if (this.optionSyncFrame !== null) {
|
|
22955
|
+
cancelAnimationFrame(this.optionSyncFrame);
|
|
22956
|
+
this.optionSyncFrame = null;
|
|
22957
|
+
}
|
|
22662
22958
|
}
|
|
22663
22959
|
/**
|
|
22664
22960
|
* Updates the selected option in the select element based on the current value.
|
|
@@ -22684,6 +22980,19 @@ class PdsSelect {
|
|
|
22684
22980
|
});
|
|
22685
22981
|
}
|
|
22686
22982
|
}
|
|
22983
|
+
/**
|
|
22984
|
+
* After a copy that changes an existing option set, a value whose option was renamed or removed
|
|
22985
|
+
* has nothing to select. Like a native select, show nothing selected rather than the first
|
|
22986
|
+
* option; the value itself is kept, with no change event.
|
|
22987
|
+
*/
|
|
22988
|
+
showNoSelectionWithoutMatch() {
|
|
22989
|
+
var _a;
|
|
22990
|
+
const wanted = [].concat((_a = this.value) !== null && _a !== void 0 ? _a : []).filter((value) => value !== '');
|
|
22991
|
+
const options = Array.from(this.selectEl.options);
|
|
22992
|
+
if (wanted.length > 0 && !options.some((option) => wanted.includes(option.value))) {
|
|
22993
|
+
this.selectEl.selectedIndex = -1;
|
|
22994
|
+
}
|
|
22995
|
+
}
|
|
22687
22996
|
getHelperMessage() {
|
|
22688
22997
|
return this.helperMessage && (hAsync("p", { class: "pds-select__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage));
|
|
22689
22998
|
}
|
|
@@ -22789,7 +23098,7 @@ class PdsSelect {
|
|
|
22789
23098
|
'has-action': hasAction && !this.hideLabel ? 'true' : null,
|
|
22790
23099
|
};
|
|
22791
23100
|
this.hostKeeper.record(hostClass, {}, hostAttributes);
|
|
22792
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
23101
|
+
return (hAsync(Host, Object.assign({ key: '37c2c3b72c13c3c4e3d81da29ddddc86a7300d70', class: hostClass }, hostAttributes), hAsync("div", { key: 'ff1c311dca6fc25813e5473d0e8daff4dc12e807', class: "pds-select" }, !this.hideLabel && (hAsync("div", { key: '77db17b0beb1fefabb26ffe1df0e5f03a0515996', class: "pds-select__label-wrapper" }, hAsync("label", { key: 'c4dcba3bc148aada4a3afcca0a30c64a630e441f', htmlFor: this.componentId }, hAsync("span", { key: '0fc3424ec1961d3b216c0fabb80cb8acee37f1a2', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), hAsync("select", { key: 'ff343a6653ccd081021cb669a428c780d0162e8b', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), hAsync("div", { key: '86fed1916c3b13d079492581a7c6bb621012a4a5', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, hAsync("slot", { key: 'abe06eeef5be13b716573c8a806d6b7795edc65f', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && hAsync("pds-icon", { key: '68c958666828f77114f2edeedb667070106046fa', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
|
|
22793
23102
|
}
|
|
22794
23103
|
static get formAssociated() { return true; }
|
|
22795
23104
|
get el() { return getElement(this); }
|
|
@@ -25548,7 +25857,7 @@ class PdsSortable {
|
|
|
25548
25857
|
render() {
|
|
25549
25858
|
const classNames = this.classNames();
|
|
25550
25859
|
this.hostKeeper.record(classNames);
|
|
25551
|
-
return (hAsync(Host, { key: '
|
|
25860
|
+
return (hAsync(Host, { key: '6e9e7b769f57ebfd81541fbecbe17b3fb4ad3e47', class: classNames, id: this.componentId }, hAsync("slot", { key: 'c9466a216862c0a3e578f3fcfc1ac1e26146722b' })));
|
|
25552
25861
|
}
|
|
25553
25862
|
get el() { return getElement(this); }
|
|
25554
25863
|
static get watchers() { return {
|
|
@@ -25623,7 +25932,7 @@ class PdsSortableItem {
|
|
|
25623
25932
|
}
|
|
25624
25933
|
render() {
|
|
25625
25934
|
this.hostKeeper.record('pds-sortable-item');
|
|
25626
|
-
return (hAsync(Host, { key: '
|
|
25935
|
+
return (hAsync(Host, { key: 'c6b5402a54179d4e7caed3cc81874977d2d6c677', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (hAsync("div", { key: 'cd2d85286bcb3e47f76e4571d609d91f932b717b', class: "pds-sortable-item__handle" }, hAsync("pds-icon", { key: '97e2e155283d86921f40198637abf596d6cc86e0', "aria-hidden": "true", icon: handle }))), hAsync("slot", { key: '99743c8e5be45ca76f276b47688843a621c8ded5' }), this.enableActions && (hAsync("div", { key: '7cb1a8b99658d72067ccae036b2bc0276b8cf02e', class: "pds-sortable-item__actions" }, hAsync("slot", { key: 'f9b3b7d1cc10ac077f65ec2cafac7a372deae511', name: "sortable-item-actions" })))));
|
|
25627
25936
|
}
|
|
25628
25937
|
get el() { return getElement(this); }
|
|
25629
25938
|
static get style() { return pdsSortableItemCss(); }
|
|
@@ -25758,9 +26067,9 @@ class PdsSwitch {
|
|
|
25758
26067
|
const hostClass = this.switchClassNames();
|
|
25759
26068
|
const ariaDisabled = this.disabled ? 'true' : null;
|
|
25760
26069
|
this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
|
|
25761
|
-
return (hAsync(Host, { key: '
|
|
25762
|
-
hAsync("div", { key: '
|
|
25763
|
-
hAsync("div", { key: '
|
|
26070
|
+
return (hAsync(Host, { key: '0fa5beb83232b381ea5cdfa82d143afcb69eb4e1', class: hostClass, "aria-disabled": ariaDisabled }, hAsync("label", { key: 'df5d08344d11cb334ef69a432d1c02557caacc96', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '6908b328f0e2da2085ffbffe0d1e4d09f2c6fd86', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), hAsync("span", { key: '1108ab3eae63a371f9e9b80f011211cba8287b67', class: this.hideLabel ? 'visually-hidden' : '' }, hAsync("slot", { key: '8aac1d9b81deab92e1e27c06debf2b87bc697874', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
|
|
26071
|
+
hAsync("div", { key: 'ef829fb6bc66060805a144995f60e2bebb915615', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
26072
|
+
hAsync("div", { key: '42ad678cc2179b4a26ed09151de41c2293b98011', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '8dc0b29b522247762010edb3b1e8e5fc8c8788fa', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
|
|
25764
26073
|
}
|
|
25765
26074
|
static get formAssociated() { return true; }
|
|
25766
26075
|
get el() { return getElement(this); }
|
|
@@ -26184,7 +26493,7 @@ class PdsTableBody {
|
|
|
26184
26493
|
registerInstance(this, hostRef);
|
|
26185
26494
|
}
|
|
26186
26495
|
render() {
|
|
26187
|
-
return (hAsync(Host, { key: '
|
|
26496
|
+
return (hAsync(Host, { key: '4f1cba9505f56ff1ab0a19f9a88318d66a02eacc', role: "rowgroup", part: "body" }, hAsync("slot", { key: 'ea0c620a15fcbe2915189e870d0815c5cbffdf8c' })));
|
|
26188
26497
|
}
|
|
26189
26498
|
static get style() { return pdsTableBodyCss(); }
|
|
26190
26499
|
static get cmpMeta() { return {
|
|
@@ -26342,11 +26651,11 @@ class PdsTableCell {
|
|
|
26342
26651
|
return classNames.join(' ');
|
|
26343
26652
|
}
|
|
26344
26653
|
render() {
|
|
26345
|
-
return (hAsync(Host, { key: '
|
|
26654
|
+
return (hAsync(Host, { key: 'fd84150bcb9bd5d2029624394d4f69b0a7234bc0', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
|
|
26346
26655
|
this.tableRef.fixedColumn &&
|
|
26347
26656
|
this.tableRef.selectable
|
|
26348
26657
|
? { '--fixed-cell-position': '40px' }
|
|
26349
|
-
: {} }, hAsync("slot", { key: '
|
|
26658
|
+
: {} }, hAsync("slot", { key: '9256f033ec58b9cb2acc74d705acc9726507668b' })));
|
|
26350
26659
|
}
|
|
26351
26660
|
get hostElement() { return getElement(this); }
|
|
26352
26661
|
static get watchers() { return {
|
|
@@ -26415,7 +26724,7 @@ class PdsTableHead {
|
|
|
26415
26724
|
}
|
|
26416
26725
|
}
|
|
26417
26726
|
render() {
|
|
26418
|
-
return (hAsync(Host, { key: '
|
|
26727
|
+
return (hAsync(Host, { key: '4fb8d7bf4a9b0bce672208651c0600fbc94214af', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-head-cell", { key: '20b86146540208178bd63bd136e14e5534c7ec76', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (hAsync("pds-checkbox", { key: 'fa8054dd7ee36c6401e9eeb9c962a820d3a02558', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" })))), hAsync("slot", { key: 'a0000270ae6ed1cab1c6e802ccc53ba0de3e54c9' })));
|
|
26419
26728
|
}
|
|
26420
26729
|
get hostElement() { return getElement(this); }
|
|
26421
26730
|
static get style() { return pdsTableHeadCss(); }
|
|
@@ -26636,11 +26945,11 @@ class PdsTableHeadCell {
|
|
|
26636
26945
|
return classNames.join(' ');
|
|
26637
26946
|
}
|
|
26638
26947
|
render() {
|
|
26639
|
-
return (hAsync(Host, { key: '
|
|
26948
|
+
return (hAsync(Host, { key: 'd609309180968913315c1428d0403c3974a4bfc0', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
|
|
26640
26949
|
this.tableRef.fixedColumn &&
|
|
26641
26950
|
this.tableRef.selectable
|
|
26642
26951
|
? { '--fixed-cell-position': '40px' }
|
|
26643
|
-
: {} }, hAsync("slot", { key: '
|
|
26952
|
+
: {} }, hAsync("slot", { key: '7aff5994fe4c5250ce83516960183dbd9ffa9c69' }), this.sortable && this.isActive && (hAsync("pds-icon", { key: '0a7b99ab2c56ea0cfb3aa6f810bf802422a29bef', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon", "aria-hidden": "true" }))));
|
|
26644
26953
|
}
|
|
26645
26954
|
get hostElement() { return getElement(this); }
|
|
26646
26955
|
static get style() { return pdsTableHeadCellCss(); }
|
|
@@ -26806,7 +27115,7 @@ class PdsTableRow {
|
|
|
26806
27115
|
}
|
|
26807
27116
|
}
|
|
26808
27117
|
render() {
|
|
26809
|
-
return (hAsync(Host, { key: '
|
|
27118
|
+
return (hAsync(Host, { key: 'dc956e7253971bdadc003448822a83953ed4658f', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-cell", { key: '1f119c5036ab1d27c5138106968a40492222b6f3', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, hAsync("pds-checkbox", { key: 'f7a3534eceeabe478fb85e6e476f814e03988cfb', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), hAsync("slot", { key: '287c0fe2c39bac5df7a977e31290aeddd0cd46b3' })));
|
|
26810
27119
|
}
|
|
26811
27120
|
get hostElement() { return getElement(this); }
|
|
26812
27121
|
static get style() { return pdsTableRowCss(); }
|
|
@@ -26860,7 +27169,7 @@ class PdsTabpanel {
|
|
|
26860
27169
|
// The docs show consumers omitting `slot`, so server HTML doesn't carry it — a DOM morph
|
|
26861
27170
|
// that strips it (and the stretch-active class) leaves this panel unslotted. Put both back.
|
|
26862
27171
|
this.hostKeeper.record(hostClass, {}, { slot: 'tabpanels' });
|
|
26863
|
-
return (hAsync(Host, { key: '
|
|
27172
|
+
return (hAsync(Host, { key: 'b649c0f9e0c103a2d7dad43b7db0a092194b4ba0', slot: "tabpanels", class: hostClass || undefined }, hAsync("div", { key: 'a578722d33f7d04726185e393771838870833984', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, hAsync("slot", { key: '2ebe5745c444563333ee175bb3a1f7401ba77ec1' }))));
|
|
26864
27173
|
}
|
|
26865
27174
|
get el() { return getElement(this); }
|
|
26866
27175
|
static get style() { return pdsTabpanelCss(); }
|
|
@@ -27159,7 +27468,7 @@ class PdsTabs {
|
|
|
27159
27468
|
// Only the classes: `active-tab-name` backs the mutable activeTabName prop, so a morph that drops
|
|
27160
27469
|
// it is a prop change, not a strip.
|
|
27161
27470
|
this.hostKeeper.record(hostClass);
|
|
27162
|
-
return (hAsync(Host, { key: '
|
|
27471
|
+
return (hAsync(Host, { key: '08ac02be358bebbd95dd5edca30cd99789445f50', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, hAsync("slot", { key: '02395c056f80f46f1fa9117eafde68ef170b4188', name: "tabpanels" })));
|
|
27163
27472
|
}
|
|
27164
27473
|
get el() { return getElement(this); }
|
|
27165
27474
|
static get style() { return pdsTabsCss(); }
|
|
@@ -27293,7 +27602,7 @@ class PdsText {
|
|
|
27293
27602
|
? `pds-text--decoration-${this.decoration}`
|
|
27294
27603
|
: ''}
|
|
27295
27604
|
`;
|
|
27296
|
-
return (hAsync(Tag, { key: '
|
|
27605
|
+
return (hAsync(Tag, { key: 'b79a6e67f11024cb025cb26bbf77231547bd63a4', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: 'ae1f8ca39899894541eac3c07fb21ead4ab98f40' })));
|
|
27297
27606
|
}
|
|
27298
27607
|
get el() { return getElement(this); }
|
|
27299
27608
|
static get watchers() { return {
|
|
@@ -27639,10 +27948,10 @@ class PdsTextarea {
|
|
|
27639
27948
|
}
|
|
27640
27949
|
render() {
|
|
27641
27950
|
const value = this.getValue();
|
|
27642
|
-
return (hAsync(Host, { key: '
|
|
27643
|
-
hAsync("div", { key: '
|
|
27644
|
-
hAsync("p", { key: '
|
|
27645
|
-
hAsync("p", { key: '
|
|
27951
|
+
return (hAsync(Host, { key: '76e445d135191df3090620f2c2eaf6ed8d7eb9cb', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '836815333b0ca925bc205a4b8b25086fe82fcedc', class: "pds-textarea" }, this.label &&
|
|
27952
|
+
hAsync("div", { key: 'e8633457c994d3387ec277fd9945afb2c653d27a', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '977bb1c171b68242ab06e01ef94ecc4e4cb26880', htmlFor: this.componentId }, hAsync("span", { key: 'ef87433d6524296b3153e8d04e6406c9287e3f2e', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '92952c76f5f4a87da4953f792a9a5589d7765451', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: 'a61f39d0e299cb6b3e6d1beed37805ad9a71b579', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
|
|
27953
|
+
hAsync("p", { key: '811065b7ce7b45d902d821dbceb25fef4231db94', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
|
|
27954
|
+
hAsync("p", { key: 'f95f566b79215a4a128fe92c02be244219f843e5', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '08f649e4b32551d59d60b978262cd7beaa99e08d', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
|
|
27646
27955
|
}
|
|
27647
27956
|
static get formAssociated() { return true; }
|
|
27648
27957
|
get el() { return getElement(this); }
|
|
@@ -27690,7 +27999,7 @@ class PdsTextarea {
|
|
|
27690
27999
|
}; }
|
|
27691
28000
|
}
|
|
27692
28001
|
|
|
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;}`;
|
|
28002
|
+
const pdsToastCss = () => `:host{--animation-duration:var(--pine-motion-duration-slow);--animation-timing:var(--pine-motion-easing-in-out);--padding-inline:var(--pine-dimension-md);--padding-inline-desktop:var(--pine-dimension-2xl);--sizing-height-default:68px;--sizing-min-width:calc(var(--sizing-total-width) - (var(--padding-inline) * 2));--sizing-min-width-desktop:calc(var(--sizing-total-width) - (var(--padding-inline-desktop) * 2));--sizing-total-width:350px;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;font:var(--pine-typography-body-medium)}.pds-toast{-ms-flex-align:center;align-items:center;-webkit-animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);background-color:var(--pine-color-primary);border-radius:var(--pine-dimension-xs);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);display:-ms-flexbox;display:flex;height:var(--sizing-height-default);-ms-flex-pack:start;justify-content:flex-start;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);max-width:90vw;min-width:var(--sizing-min-width);padding:0 var(--padding-inline);position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (max-width: 767px){.pds-toast{height:36px;max-width:calc(100vw - var(--pine-dimension-2xs) * 2);min-width:auto;padding-inline:var(--pine-dimension-2xs)}}.pds-toast--danger{background-color:var(--pine-color-danger)}.pds-toast--loading .pds-toast__loader{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);position:relative}.pds-toast--loading .pds-toast__loader-spinner{-webkit-animation:pds-toast-rotate 2s linear infinite;animation:pds-toast-rotate 2s linear infinite;height:20px;width:20px}.pds-toast--loading .pds-toast__loader-path{-webkit-animation:pds-toast-dash 1.5s ease-in-out infinite;animation:pds-toast-dash 1.5s ease-in-out infinite;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}.pds-toast__icon{color:var(--pine-color-text-primary);display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-toast__message{font:var(--pine-typography-body-sm-medium);-webkit-margin-end:auto;margin-inline-end:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-toast__message ::slotted(a){color:var(--pine-color-text-primary);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs);opacity:0.7;text-decoration:underline}.pds-toast__message ::slotted(a):hover,.pds-toast__message ::slotted(a):focus-visible{opacity:1}.pds-toast__message ::slotted(a):focus-visible{outline:2px solid var(--pine-color-text-primary);outline-offset:2px}.pds-toast__button{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);color:inherit;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);opacity:0.7;padding:0;white-space:nowrap}.pds-toast__button:hover,.pds-toast__button:focus{opacity:1}.pds-toast__button:focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-dimension-2xs)}@-webkit-keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}:host([hidden]) .pds-toast,.pds-toast--animating-out{-webkit-animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;pointer-events:none;}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
|
|
27694
28003
|
|
|
27695
28004
|
/** Fallback when computed `--animation-duration` is unavailable (matches `--pine-motion-duration-slow`). */
|
|
27696
28005
|
const TOAST_DISMISS_ANIMATION_MS = 300;
|
|
@@ -27812,17 +28121,23 @@ class PdsToast {
|
|
|
27812
28121
|
if (this.type === 'loading') {
|
|
27813
28122
|
return (hAsync("div", { class: "pds-toast__loader" }, hAsync("svg", { class: "pds-toast__loader-spinner", viewBox: "25 25 50 50", "aria-hidden": "true" }, hAsync("circle", { class: "pds-toast__loader-path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }))));
|
|
27814
28123
|
}
|
|
27815
|
-
//
|
|
27816
|
-
|
|
28124
|
+
// Decorative: inside role="alert" an icon name would be read out with the
|
|
28125
|
+
// message. Severity is announced as text instead (see severityLabel).
|
|
28126
|
+
return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon", "aria-hidden": "true" });
|
|
28127
|
+
}
|
|
28128
|
+
severityText() {
|
|
28129
|
+
var _a;
|
|
28130
|
+
return (_a = this.severityLabel) !== null && _a !== void 0 ? _a : (this.type === 'danger' ? 'Error' : undefined);
|
|
27817
28131
|
}
|
|
27818
28132
|
render() {
|
|
27819
|
-
|
|
28133
|
+
const severity = this.severityText();
|
|
28134
|
+
return (hAsync(Host, { key: '4c4077add1843ab84674dfa49fb963df55f1c432', hidden: !this.isVisible }, hAsync("div", { key: '0d819ac123de625604d3b1aa0f9391366b4d0289', class: {
|
|
27820
28135
|
'pds-toast': true,
|
|
27821
28136
|
[`pds-toast--${this.type}`]: this.type !== 'default',
|
|
27822
28137
|
'pds-toast--animating-out': this.isAnimatingOut
|
|
27823
|
-
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '
|
|
28138
|
+
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), severity && hAsync("span", { key: 'f75fb422797082e99acb85432c1b50cf702d7afc', class: "visually-hidden" }, severity), hAsync("span", { key: '3d9f03d96dbda41c72d2c2cc492b1422928d573f', class: "pds-toast__message" }, hAsync("slot", { key: 'affc7e4cb592735ec396fa90a9405f25b389e4bd' })), this.dismissible && (hAsync("button", { key: '0c4ef459dda09b8a196eed7ee28383995d959b11', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
|
|
27824
28139
|
this.dismiss();
|
|
27825
|
-
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '
|
|
28140
|
+
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '1b26a6a842868a5b1e55b7110c755edc7f830ba5', name: "remove", "aria-hidden": "true" }))))));
|
|
27826
28141
|
}
|
|
27827
28142
|
get el() { return getElement(this); }
|
|
27828
28143
|
static get watchers() { return {
|
|
@@ -27841,6 +28156,7 @@ class PdsToast {
|
|
|
27841
28156
|
"icon": [1],
|
|
27842
28157
|
"type": [1],
|
|
27843
28158
|
"dismissLabel": [1, "dismiss-label"],
|
|
28159
|
+
"severityLabel": [1, "severity-label"],
|
|
27844
28160
|
"isVisible": [32],
|
|
27845
28161
|
"isAnimatingOut": [32],
|
|
27846
28162
|
"dismiss": [64]
|
|
@@ -27870,7 +28186,9 @@ class PdsTooltip {
|
|
|
27870
28186
|
this.resolvedPlacement = 'right';
|
|
27871
28187
|
this.triggerEl = null;
|
|
27872
28188
|
this.contentDiv = null;
|
|
28189
|
+
this.lastCopiedHtml = null;
|
|
27873
28190
|
this.slotMutationObserver = null;
|
|
28191
|
+
this.contentSyncFrame = null;
|
|
27874
28192
|
this.currentPathname = '';
|
|
27875
28193
|
this.pathnameCheckInterval = null;
|
|
27876
28194
|
this.stopAutoUpdate = null;
|
|
@@ -27937,6 +28255,25 @@ class PdsTooltip {
|
|
|
27937
28255
|
this.handleSpaNavigation();
|
|
27938
28256
|
}
|
|
27939
28257
|
};
|
|
28258
|
+
this.scheduleContentSync = () => {
|
|
28259
|
+
if (this.contentSyncFrame !== null)
|
|
28260
|
+
return;
|
|
28261
|
+
this.contentSyncFrame = requestAnimationFrame(() => {
|
|
28262
|
+
this.contentSyncFrame = null;
|
|
28263
|
+
if (this.portalEl === null || this.contentDiv === null)
|
|
28264
|
+
return;
|
|
28265
|
+
const copy = this.copySlottedContent();
|
|
28266
|
+
const strippedCopy = this.strippedHtml(copy);
|
|
28267
|
+
if (strippedCopy === this.lastCopiedHtml)
|
|
28268
|
+
return;
|
|
28269
|
+
this.lastCopiedHtml = strippedCopy;
|
|
28270
|
+
this.contentDiv.textContent = '';
|
|
28271
|
+
this.contentDiv.append(...Array.from(copy.childNodes));
|
|
28272
|
+
this.repositionPortal().catch(error => {
|
|
28273
|
+
console.warn('Failed to reposition tooltip after a content change:', error);
|
|
28274
|
+
});
|
|
28275
|
+
});
|
|
28276
|
+
};
|
|
27940
28277
|
}
|
|
27941
28278
|
handleOpenToggle(newValue, oldValue) {
|
|
27942
28279
|
if (newValue === false && oldValue === true) {
|
|
@@ -27951,16 +28288,6 @@ class PdsTooltip {
|
|
|
27951
28288
|
window.addEventListener('pageshow', this.handlePageShow);
|
|
27952
28289
|
this.currentPathname = window.location.pathname;
|
|
27953
28290
|
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
28291
|
// no return; Stencil ignores teardown functions here
|
|
27965
28292
|
}
|
|
27966
28293
|
connectedCallback() {
|
|
@@ -27968,10 +28295,6 @@ class PdsTooltip {
|
|
|
27968
28295
|
}
|
|
27969
28296
|
disconnectedCallback() {
|
|
27970
28297
|
window.removeEventListener('pageshow', this.handlePageShow);
|
|
27971
|
-
if (this.slotMutationObserver !== null) {
|
|
27972
|
-
this.slotMutationObserver.disconnect();
|
|
27973
|
-
this.slotMutationObserver = null;
|
|
27974
|
-
}
|
|
27975
28298
|
// Ensure global listeners/intervals are removed if still present
|
|
27976
28299
|
if (this.portalEl !== null) {
|
|
27977
28300
|
this.removePortal();
|
|
@@ -28114,31 +28437,9 @@ class PdsTooltip {
|
|
|
28114
28437
|
this.contentDiv.className = 'pds-tooltip__content';
|
|
28115
28438
|
this.contentDiv.setAttribute('aria-hidden', this.opened ? 'false' : 'true');
|
|
28116
28439
|
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
|
-
}
|
|
28440
|
+
const initialCopy = this.copySlottedContent();
|
|
28441
|
+
this.lastCopiedHtml = this.strippedHtml(initialCopy);
|
|
28442
|
+
this.contentDiv.append(...Array.from(initialCopy.childNodes));
|
|
28142
28443
|
this.portalEl.appendChild(this.contentDiv);
|
|
28143
28444
|
document.body.appendChild(this.portalEl);
|
|
28144
28445
|
this.repositionPortal().catch(error => {
|
|
@@ -28161,8 +28462,93 @@ class PdsTooltip {
|
|
|
28161
28462
|
if (this.triggerEl !== null && this.portalEl.id !== '') {
|
|
28162
28463
|
this.triggerEl.setAttribute('aria-describedby', this.portalEl.id);
|
|
28163
28464
|
}
|
|
28465
|
+
this.startContentSync();
|
|
28466
|
+
}
|
|
28467
|
+
/**
|
|
28468
|
+
* The host's own content slot wrapper. Matched among direct children only, so a nested
|
|
28469
|
+
* pds-tooltip inside the trigger slot isn't mistaken for this one's.
|
|
28470
|
+
*/
|
|
28471
|
+
get contentSlotWrapper() {
|
|
28472
|
+
return Array.from(this.el.children).find((child) => child.matches('.pds-tooltip__content-slot-wrapper'));
|
|
28473
|
+
}
|
|
28474
|
+
/**
|
|
28475
|
+
* Copies the slotted content (or the `content` prop's text) into a detached container. The
|
|
28476
|
+
* portal holds copies so the framework that owns the slotted nodes keeps them.
|
|
28477
|
+
*/
|
|
28478
|
+
copySlottedContent() {
|
|
28479
|
+
var _a, _b;
|
|
28480
|
+
const copy = document.createElement('div');
|
|
28481
|
+
const slottedContentContainer = (_a = this.contentSlotWrapper) === null || _a === void 0 ? void 0 : _a.querySelector('[slot="content"]');
|
|
28482
|
+
const meaningfulNodes = Array.from((_b = slottedContentContainer === null || slottedContentContainer === void 0 ? void 0 : slottedContentContainer.childNodes) !== null && _b !== void 0 ? _b : []).filter(node => {
|
|
28483
|
+
var _a;
|
|
28484
|
+
return node.nodeType === Node.ELEMENT_NODE ||
|
|
28485
|
+
(node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
|
|
28486
|
+
});
|
|
28487
|
+
meaningfulNodes.forEach(node => copy.appendChild(node.cloneNode(true)));
|
|
28488
|
+
if (meaningfulNodes.length === 0 && typeof this.content === 'string' && this.content.trim() !== '') {
|
|
28489
|
+
copy.textContent = this.content;
|
|
28490
|
+
}
|
|
28491
|
+
return copy;
|
|
28492
|
+
}
|
|
28493
|
+
/**
|
|
28494
|
+
* While the tooltip is open, keeps the portal's copy in step with the slotted content at any
|
|
28495
|
+
* depth: content that loads or re-renders after opening shows without reopening. Changes are
|
|
28496
|
+
* batched to one re-copy per animation frame, and a re-copy that matches the last one shown is
|
|
28497
|
+
* dropped, so screen readers aren't re-announced, iframes don't reload and the tooltip isn't
|
|
28498
|
+
* repositioned for nothing. Only the hidden slot wrapper is observed, so copying into the portal
|
|
28499
|
+
* can't trigger another sync.
|
|
28500
|
+
*/
|
|
28501
|
+
startContentSync() {
|
|
28502
|
+
const contentSlotWrapper = this.contentSlotWrapper;
|
|
28503
|
+
if (contentSlotWrapper === undefined || typeof MutationObserver === 'undefined')
|
|
28504
|
+
return;
|
|
28505
|
+
this.slotMutationObserver = new MutationObserver(this.scheduleContentSync);
|
|
28506
|
+
this.slotMutationObserver.observe(contentSlotWrapper, {
|
|
28507
|
+
childList: true,
|
|
28508
|
+
subtree: true,
|
|
28509
|
+
attributes: true,
|
|
28510
|
+
characterData: true,
|
|
28511
|
+
});
|
|
28512
|
+
}
|
|
28513
|
+
/**
|
|
28514
|
+
* A copy's serialized HTML with Stencil's own hydration and scope classes removed from every
|
|
28515
|
+
* `pds-*` descendant, so a nested component finishing hydration (or re-hydrating once reconnected
|
|
28516
|
+
* inside the portal) isn't mistaken for a real content change. Without this, that class-only
|
|
28517
|
+
* difference fails the equality check above and triggers a recopy that replaces still-loaded
|
|
28518
|
+
* nodes — reloading any iframe or media the slotted content held.
|
|
28519
|
+
*/
|
|
28520
|
+
strippedHtml(root) {
|
|
28521
|
+
const clone = root.cloneNode(true);
|
|
28522
|
+
clone.querySelectorAll('*').forEach((el) => {
|
|
28523
|
+
// isStencilClass is host-scoped (its own doc: "another sc- class may be a consumer's"), so it
|
|
28524
|
+
// only applies to pds-* elements — the same check keepPineHydrated makes before using it.
|
|
28525
|
+
if (!el.localName.startsWith('pds-'))
|
|
28526
|
+
return;
|
|
28527
|
+
// Not `el.className`: on an SVG element that's an SVGAnimatedString, not a string,
|
|
28528
|
+
// so classNamesOf would silently drop its classes from the comparison. The `class`
|
|
28529
|
+
// attribute is a plain string on every element, SVG included.
|
|
28530
|
+
const kept = classNamesOf(el.getAttribute('class') || '').filter((name) => !isStencilClass(el, name));
|
|
28531
|
+
if (kept.length === 0) {
|
|
28532
|
+
el.removeAttribute('class');
|
|
28533
|
+
}
|
|
28534
|
+
else {
|
|
28535
|
+
el.setAttribute('class', kept.join(' '));
|
|
28536
|
+
}
|
|
28537
|
+
});
|
|
28538
|
+
return clone.innerHTML;
|
|
28539
|
+
}
|
|
28540
|
+
stopContentSync() {
|
|
28541
|
+
if (this.slotMutationObserver !== null) {
|
|
28542
|
+
this.slotMutationObserver.disconnect();
|
|
28543
|
+
this.slotMutationObserver = null;
|
|
28544
|
+
}
|
|
28545
|
+
if (this.contentSyncFrame !== null) {
|
|
28546
|
+
cancelAnimationFrame(this.contentSyncFrame);
|
|
28547
|
+
this.contentSyncFrame = null;
|
|
28548
|
+
}
|
|
28164
28549
|
}
|
|
28165
28550
|
removePortal() {
|
|
28551
|
+
this.stopContentSync();
|
|
28166
28552
|
// Stop Floating UI's autoUpdate
|
|
28167
28553
|
if (this.stopAutoUpdate !== null) {
|
|
28168
28554
|
this.stopAutoUpdate();
|
|
@@ -28194,12 +28580,13 @@ class PdsTooltip {
|
|
|
28194
28580
|
this.triggerEl.removeAttribute('aria-describedby');
|
|
28195
28581
|
}
|
|
28196
28582
|
this.contentDiv = null;
|
|
28583
|
+
this.lastCopiedHtml = null;
|
|
28197
28584
|
}
|
|
28198
28585
|
render() {
|
|
28199
28586
|
const hostId = this.componentId || undefined;
|
|
28200
|
-
return (hAsync(Host, { key: '
|
|
28587
|
+
return (hAsync(Host, { key: '067eda3089732c6a23032bb087182e6dcd0330fa', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '54f6f233c937f048f119df969630af530b10de25', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
|
|
28201
28588
|
/* focusin/out bubble; ensure keyboard users see tooltips */
|
|
28202
|
-
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '
|
|
28589
|
+
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: 'f8019985ad9fd27deb388e35c43bf2e227ff9c02' })), hAsync("div", { key: '072c4e578aebb99cd213901369a57d7c74734ad9', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: '22bc45dfb56567f53a608ce2033b062363793450', name: "content" }))));
|
|
28203
28590
|
}
|
|
28204
28591
|
get el() { return getElement(this); }
|
|
28205
28592
|
static get watchers() { return {
|