@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.js
CHANGED
|
@@ -5732,7 +5732,7 @@ class MockPdsModal {
|
|
|
5732
5732
|
'pds-modal__backdrop': true,
|
|
5733
5733
|
'open': this.open,
|
|
5734
5734
|
};
|
|
5735
|
-
return (hAsync("div", { key: '
|
|
5735
|
+
return (hAsync("div", { key: '6e165638f8f4699fa242f3045155c392f9f529b2', class: backdropClasses }, hAsync("div", { key: 'f4b8db3093a6fbe24be8035a826e8289815e4afb', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, hAsync("div", { key: 'fa846f66e539ea0d1b73820abb991fdb02902499', class: "pds-modal__header" }, hAsync("slot", { key: '0faaa6858fecd9d0c48c7f183d4f2101c1bed785', name: "header" })), hAsync("div", { key: 'a896fba9494fcdee9dde7e0d9f7baf708095ee6f', class: "pds-modal-content" }, hAsync("slot", { key: '4091e70b2a744c36c8249aa8664937d227145c14' })), hAsync("div", { key: 'cbf4bdd80cc3575d8c7e2e0e2078e28c4f185920', class: "pds-modal__footer" }, hAsync("slot", { key: '56ed3a26c36fd70d7ec9f033951d1b1d9e044957', name: "footer" })))));
|
|
5736
5736
|
}
|
|
5737
5737
|
get el() { return getElement(this); }
|
|
5738
5738
|
static get style() { return pdsModalCss$1(); }
|
|
@@ -5832,8 +5832,16 @@ class PdsAccordion {
|
|
|
5832
5832
|
|
|
5833
5833
|
const pdsAlertTokensCss = () => `:host{--pine-alert-color-background:var(--pine-color-grey-150);--pine-alert-color-border:var(--pine-color-grey-300);--pine-alert-color-dismiss:var(--pine-color-grey-900);--pine-alert-color-dismiss-hover:var(--pine-color-grey-300);--pine-alert-color-icon:var(--pine-color-grey-700);--pine-alert-color-link:var(--pine-color-grey-900);--pine-alert-color-link-hover:var(--pine-color-grey-950);--pine-alert-color-text:var(--pine-color-grey-950);--pine-alert-color-danger-background:var(--pine-color-red-150);--pine-alert-color-danger-border:var(--pine-color-red-300);--pine-alert-color-danger-dismiss:var(--pine-color-red-900);--pine-alert-color-danger-dismiss-hover:var(--pine-color-red-300);--pine-alert-color-danger-icon:var(--pine-color-red-700);--pine-alert-color-danger-link:var(--pine-color-red-900);--pine-alert-color-danger-link-hover:var(--pine-color-red-950);--pine-alert-color-danger-text:var(--pine-color-red-950);--pine-alert-color-info-background:var(--pine-color-blue-150);--pine-alert-color-info-border:var(--pine-color-blue-300);--pine-alert-color-info-dismiss:var(--pine-color-blue-900);--pine-alert-color-info-dismiss-hover:var(--pine-color-blue-300);--pine-alert-color-info-icon:var(--pine-color-blue-700);--pine-alert-color-info-link:var(--pine-color-blue-900);--pine-alert-color-info-link-hover:var(--pine-color-blue-950);--pine-alert-color-info-text:var(--pine-color-blue-950);--pine-alert-color-success-background:var(--pine-color-green-150);--pine-alert-color-success-border:var(--pine-color-green-300);--pine-alert-color-success-dismiss:var(--pine-color-green-900);--pine-alert-color-success-dismiss-hover:var(--pine-color-green-300);--pine-alert-color-success-icon:var(--pine-color-green-700);--pine-alert-color-success-link:var(--pine-color-green-900);--pine-alert-color-success-link-hover:var(--pine-color-green-950);--pine-alert-color-success-text:var(--pine-color-green-950);--pine-alert-color-warning-background:var(--pine-color-yellow-150);--pine-alert-color-warning-border:var(--pine-color-yellow-300);--pine-alert-color-warning-dismiss:var(--pine-color-yellow-900);--pine-alert-color-warning-dismiss-hover:var(--pine-color-yellow-300);--pine-alert-color-warning-icon:var(--pine-color-yellow-700);--pine-alert-color-warning-link:var(--pine-color-yellow-900);--pine-alert-color-warning-link-hover:var(--pine-color-yellow-950);--pine-alert-color-warning-text:var(--pine-color-yellow-950)}:host-context([data-theme=dark]){--pine-alert-color-background:var(--pine-color-grey-800);--pine-alert-color-border:var(--pine-color-grey-600);--pine-alert-color-dismiss:var(--pine-color-grey-200);--pine-alert-color-dismiss-hover:var(--pine-color-grey-700);--pine-alert-color-icon:var(--pine-color-grey-300);--pine-alert-color-link:var(--pine-color-grey-300);--pine-alert-color-link-hover:var(--pine-color-grey-050);--pine-alert-color-text:var(--pine-color-grey-100);--pine-alert-color-danger-background:var(--pine-color-red-900);--pine-alert-color-danger-border:var(--pine-color-red-800);--pine-alert-color-danger-dismiss:var(--pine-color-red-200);--pine-alert-color-danger-dismiss-hover:var(--pine-color-red-800);--pine-alert-color-danger-icon:var(--pine-color-red-400);--pine-alert-color-danger-link:var(--pine-color-red-300);--pine-alert-color-danger-link-hover:var(--pine-color-red-200);--pine-alert-color-danger-text:var(--pine-color-red-100);--pine-alert-color-info-background:var(--pine-color-blue-900);--pine-alert-color-info-border:var(--pine-color-blue-800);--pine-alert-color-info-dismiss:var(--pine-color-blue-200);--pine-alert-color-info-dismiss-hover:var(--pine-color-blue-800);--pine-alert-color-info-icon:var(--pine-color-blue-400);--pine-alert-color-info-link:var(--pine-color-blue-300);--pine-alert-color-info-link-hover:var(--pine-color-blue-200);--pine-alert-color-info-text:var(--pine-color-blue-100);--pine-alert-color-success-background:var(--pine-color-green-900);--pine-alert-color-success-border:var(--pine-color-green-800);--pine-alert-color-success-dismiss:var(--pine-color-green-200);--pine-alert-color-success-dismiss-hover:var(--pine-color-green-800);--pine-alert-color-success-icon:var(--pine-color-green-400);--pine-alert-color-success-link:var(--pine-color-green-300);--pine-alert-color-success-link-hover:var(--pine-color-green-200);--pine-alert-color-success-text:var(--pine-color-green-100);--pine-alert-color-warning-background:var(--pine-color-yellow-900);--pine-alert-color-warning-border:var(--pine-color-yellow-800);--pine-alert-color-warning-dismiss:var(--pine-color-yellow-200);--pine-alert-color-warning-dismiss-hover:var(--pine-color-yellow-800);--pine-alert-color-warning-icon:var(--pine-color-yellow-400);--pine-alert-color-warning-link:var(--pine-color-yellow-300);--pine-alert-color-warning-link-hover:var(--pine-color-yellow-200);--pine-alert-color-warning-text:var(--pine-color-yellow-100)}`;
|
|
5834
5834
|
|
|
5835
|
-
const pdsAlertCss = () => `:host{--pds-context-link-color:var(--pine-alert-color-link);--pds-context-link-color-hover:var(--pine-alert-color-link-hover);display:block;line-height:1;width:100%}:host([variant=danger]){--pds-context-link-color:var(--pine-alert-color-danger-link);--pds-context-link-color-hover:var(--pine-alert-color-danger-link-hover)}:host([variant=info]){--pds-context-link-color:var(--pine-alert-color-info-link);--pds-context-link-color-hover:var(--pine-alert-color-info-link-hover)}:host([variant=success]){--pds-context-link-color:var(--pine-alert-color-success-link);--pds-context-link-color-hover:var(--pine-alert-color-success-link-hover)}:host([variant=warning]){--pds-context-link-color:var(--pine-alert-color-warning-link);--pds-context-link-color-hover:var(--pine-alert-color-warning-link-hover)}.pds-alert__container{--pds-alert-icon-size:var(--pine-dimension-sm);--pds-alert-border-dismiss-outline:2px solid var(--pds-alert-color-dismiss);--pds-alert-background:var(--pine-alert-color-background);--pds-alert-border-color:var(--pine-alert-color-border);--pds-alert-color-icon:var(--pine-alert-color-icon);--pds-alert-color-text:var(--pine-alert-color-text);--pds-alert-color-dismiss:var(--pine-alert-color-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-dismiss-hover);padding:var(--pine-dimension-250)}.pds-alert__container--danger{--pds-alert-background:var(--pine-alert-color-danger-background);--pds-alert-border-color:var(--pine-alert-color-danger-border);--pds-alert-color-icon:var(--pine-alert-color-danger-icon);--pds-alert-color-text:var(--pine-alert-color-danger-text);--pds-alert-color-dismiss:var(--pine-alert-color-danger-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-danger-dismiss-hover)}.pds-alert__container--info{--pds-alert-background:var(--pine-alert-color-info-background);--pds-alert-border-color:var(--pine-alert-color-info-border);--pds-alert-color-icon:var(--pine-alert-color-info-icon);--pds-alert-color-text:var(--pine-alert-color-info-text);--pds-alert-color-dismiss:var(--pine-alert-color-info-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-info-dismiss-hover)}.pds-alert__container--success{--pds-alert-background:var(--pine-alert-color-success-background);--pds-alert-border-color:var(--pine-alert-color-success-border);--pds-alert-color-icon:var(--pine-alert-color-success-icon);--pds-alert-color-text:var(--pine-alert-color-success-text);--pds-alert-color-dismiss:var(--pine-alert-color-success-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-success-dismiss-hover)}.pds-alert__container--warning{--pds-alert-background:var(--pine-alert-color-warning-background);--pds-alert-border-color:var(--pine-alert-color-warning-border);--pds-alert-color-icon:var(--pine-alert-color-warning-icon);--pds-alert-color-text:var(--pine-alert-color-warning-text);--pds-alert-color-dismiss:var(--pine-alert-color-warning-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-warning-dismiss-hover)}.pds-alert__icon{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-alert__icon--small{-webkit-margin-before:0;margin-block-start:0}.pds-alert__content-wrapper{-ms-flex:1;flex:1;min-width:0;overflow:hidden;width:100%}.pds-alert__dismiss{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;height:var(--pine-dimension-250);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs);width:var(--pine-dimension-250)}.pds-alert__dismiss:hover{background:var(--pds-alert-background-dismiss-hover);opacity:0.8}.pds-alert__dismiss:focus-visible{outline:var(--pds-alert-border-dismiss-outline)}.pds-alert__description--small{-ms-flex:1 1 auto;flex:1 1 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-alert__actions{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-alert__actions--small{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}`;
|
|
5835
|
+
const pdsAlertCss = () => `:host{--pds-context-link-color:var(--pine-alert-color-link);--pds-context-link-color-hover:var(--pine-alert-color-link-hover);display:block;line-height:1;width:100%}:host([variant=danger]){--pds-context-link-color:var(--pine-alert-color-danger-link);--pds-context-link-color-hover:var(--pine-alert-color-danger-link-hover)}:host([variant=info]){--pds-context-link-color:var(--pine-alert-color-info-link);--pds-context-link-color-hover:var(--pine-alert-color-info-link-hover)}:host([variant=success]){--pds-context-link-color:var(--pine-alert-color-success-link);--pds-context-link-color-hover:var(--pine-alert-color-success-link-hover)}:host([variant=warning]){--pds-context-link-color:var(--pine-alert-color-warning-link);--pds-context-link-color-hover:var(--pine-alert-color-warning-link-hover)}.pds-alert__container{--pds-alert-icon-size:var(--pine-dimension-sm);--pds-alert-border-dismiss-outline:2px solid var(--pds-alert-color-dismiss);--pds-alert-background:var(--pine-alert-color-background);--pds-alert-border-color:var(--pine-alert-color-border);--pds-alert-color-icon:var(--pine-alert-color-icon);--pds-alert-color-text:var(--pine-alert-color-text);--pds-alert-color-dismiss:var(--pine-alert-color-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-dismiss-hover);padding:var(--pine-dimension-250)}.pds-alert__container--danger{--pds-alert-background:var(--pine-alert-color-danger-background);--pds-alert-border-color:var(--pine-alert-color-danger-border);--pds-alert-color-icon:var(--pine-alert-color-danger-icon);--pds-alert-color-text:var(--pine-alert-color-danger-text);--pds-alert-color-dismiss:var(--pine-alert-color-danger-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-danger-dismiss-hover)}.pds-alert__container--info{--pds-alert-background:var(--pine-alert-color-info-background);--pds-alert-border-color:var(--pine-alert-color-info-border);--pds-alert-color-icon:var(--pine-alert-color-info-icon);--pds-alert-color-text:var(--pine-alert-color-info-text);--pds-alert-color-dismiss:var(--pine-alert-color-info-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-info-dismiss-hover)}.pds-alert__container--success{--pds-alert-background:var(--pine-alert-color-success-background);--pds-alert-border-color:var(--pine-alert-color-success-border);--pds-alert-color-icon:var(--pine-alert-color-success-icon);--pds-alert-color-text:var(--pine-alert-color-success-text);--pds-alert-color-dismiss:var(--pine-alert-color-success-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-success-dismiss-hover)}.pds-alert__container--warning{--pds-alert-background:var(--pine-alert-color-warning-background);--pds-alert-border-color:var(--pine-alert-color-warning-border);--pds-alert-color-icon:var(--pine-alert-color-warning-icon);--pds-alert-color-text:var(--pine-alert-color-warning-text);--pds-alert-color-dismiss:var(--pine-alert-color-warning-dismiss);--pds-alert-background-dismiss-hover:var(--pine-alert-color-warning-dismiss-hover)}.pds-alert__icon{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-alert__icon--small{-webkit-margin-before:0;margin-block-start:0}.pds-alert__content-wrapper{-ms-flex:1;flex:1;min-width:0;overflow:hidden;width:100%}.pds-alert__dismiss{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;height:var(--pine-dimension-250);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs);width:var(--pine-dimension-250)}.pds-alert__dismiss:hover{background:var(--pds-alert-background-dismiss-hover);opacity:0.8}.pds-alert__dismiss:focus-visible{outline:var(--pds-alert-border-dismiss-outline)}.pds-alert__description--small{-ms-flex:1 1 auto;flex:1 1 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-alert__actions{-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm)}.pds-alert__actions--small{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
|
|
5836
5836
|
|
|
5837
|
+
// What each variant announces when `severityLabel` isn't set. The `default`
|
|
5838
|
+
// variant has no severity.
|
|
5839
|
+
const SEVERITY_LABELS = {
|
|
5840
|
+
danger: 'Error',
|
|
5841
|
+
info: 'Info',
|
|
5842
|
+
success: 'Success',
|
|
5843
|
+
warning: 'Warning',
|
|
5844
|
+
};
|
|
5837
5845
|
/**
|
|
5838
5846
|
* @slot actions - Slot for alert actions.
|
|
5839
5847
|
* @part dismiss
|
|
@@ -5887,7 +5895,12 @@ class PdsAlert {
|
|
|
5887
5895
|
}
|
|
5888
5896
|
return (hAsync("div", null, hAsync("pds-text", { class: "pds-alert__description", color: "var(--pds-alert-color-text)", tag: "p" }, hAsync("slot", null)), this.hasActionsContent && this.renderActions(false)));
|
|
5889
5897
|
}
|
|
5898
|
+
severityText() {
|
|
5899
|
+
var _a;
|
|
5900
|
+
return (_a = this.severityLabel) !== null && _a !== void 0 ? _a : SEVERITY_LABELS[this.variant];
|
|
5901
|
+
}
|
|
5890
5902
|
render() {
|
|
5903
|
+
const severity = this.severityText();
|
|
5891
5904
|
const iconMap = {
|
|
5892
5905
|
danger: 'warning-filled',
|
|
5893
5906
|
default: 'info-circle-filled',
|
|
@@ -5897,7 +5910,7 @@ class PdsAlert {
|
|
|
5897
5910
|
};
|
|
5898
5911
|
// Get the icon name based on the current variant
|
|
5899
5912
|
const iconName = iconMap[this.variant] || iconMap.default;
|
|
5900
|
-
return (hAsync(Host, { key: '
|
|
5913
|
+
return (hAsync(Host, { key: 'd487419289ef352f63e7861fb21f42aa243ee526', class: "pds-alert", id: this.componentId, variant: this.variant }, hAsync("pds-box", { key: '0ecd6e25d4163d41055be53e88f6d332e56e1ed8', class: `pds-alert__container pds-alert__container--${this.variant}`, "background-color": "var(--pds-alert-background)", "border-color": "var(--pds-alert-border-color)", "border-radius": "md", border: true, display: "block" }, hAsync("pds-box", { key: '4cca87bd3b9758e9830eddec25c9fd3e8c06a44d', gap: "sm", display: "flex", "align-items": this.small ? "center" : undefined }, severity && hAsync("span", { key: 'b076475ed4a0bc2db09df84d6530db0e4e098daf', class: "visually-hidden" }, severity), !this.hideIcon && (hAsync("pds-icon", { key: 'e8efc683c4f84e22fac8729c0c476c817b33f3e6', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)", "aria-hidden": "true" })), hAsync("pds-box", { key: 'f3ff29ce778f2e8bfb0d0a3e6a732714ce22e8ad', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (hAsync("pds-text", { key: 'c00d44fe496e8aae699ac740428e6e523c0c8d0a', class: "pds-alert__heading", color: "var(--pds-alert-color-text)", size: "h5", tag: "h3", weight: "medium" }, this.heading)), this.renderContent()), this.dismissible && (hAsync("button", { key: 'd770590cecc3b27e1dd2750bbdfa07209dbb017d', class: "pds-alert__dismiss", type: "button", part: "dismiss", "aria-label": this.dismissLabel, onClick: this.handleCloseClick }, hAsync("pds-icon", { key: '9d79c27c829662dbeecb30dfad806f345eeb6c67', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
|
|
5901
5914
|
}
|
|
5902
5915
|
get el() { return getElement(this); }
|
|
5903
5916
|
static get style() { return pdsAlertTokensCss() + pdsAlertCss(); }
|
|
@@ -5912,6 +5925,7 @@ class PdsAlert {
|
|
|
5912
5925
|
"hideIcon": [4, "hide-icon"],
|
|
5913
5926
|
"variant": [1],
|
|
5914
5927
|
"dismissLabel": [1, "dismiss-label"],
|
|
5928
|
+
"severityLabel": [1, "severity-label"],
|
|
5915
5929
|
"hasActionsContent": [32]
|
|
5916
5930
|
},
|
|
5917
5931
|
"$listeners$": undefined,
|
|
@@ -5963,6 +5977,8 @@ function restoreReflectedDefault(el, attr, value, defaultValue) {
|
|
|
5963
5977
|
|
|
5964
5978
|
const pdsAvatarCss = () => `:host{display:inline-block}div{--color-background-container:var(--pine-color-background-container-hover);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-dimension-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-none)}.pds-avatar__button:focus-visible{outline:var(--pine-outline-focus)}.pds-avatar__badge{background-color:transparent;border:var(--pine-dimension-none);border-color:transparent;border-radius:var(--pine-border-radius-round);inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);position:absolute}:host([status=online]){--pds-avatar-status-color:var(--pine-color-green-500)}:host([status=away]){--pds-avatar-status-color:var(--pine-color-yellow-500)}:host([status=offline]){--pds-avatar-status-color:var(--pine-color-background-inset-emphasized)}.pds-avatar__status{background-color:var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized));block-size:28%;border-radius:var(--pine-border-radius-full);-webkit-box-shadow:0 0 0 var(--pine-border-width-thick) var(--pine-color-background-container);box-shadow:0 0 0 var(--pine-border-width-thick) var(--pine-color-background-container);inline-size:28%;inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);min-block-size:var(--pine-dimension-100);min-inline-size:var(--pine-dimension-100);position:absolute}:host(.pds-avatar--status-ring) div{-webkit-box-shadow:0 0 0 var(--pine-border-width-thick) var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized));box-shadow:0 0 0 var(--pine-border-width-thick) var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized))}img{border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.pds-avatar__initials{color:var(--pine-color-brand);fill:var(--pine-color-brand);font-size:var(--pine-font-size-085);font-weight:var(--pine-font-weight-semi-bold);height:100%;text-align:center;width:100%}.pds-avatar__initials text{text-anchor:middle}`;
|
|
5965
5979
|
|
|
5980
|
+
// Used when `badgeLabel` is unset; an empty string hides the badge instead.
|
|
5981
|
+
const DEFAULT_BADGE_LABEL = 'Verified';
|
|
5966
5982
|
/**
|
|
5967
5983
|
* @part asset-wrapper
|
|
5968
5984
|
* @part button
|
|
@@ -6042,14 +6058,22 @@ class PdsAvatar {
|
|
|
6042
6058
|
:
|
|
6043
6059
|
this.renderAssetWrapper());
|
|
6044
6060
|
};
|
|
6045
|
-
this.renderBadge = () =>
|
|
6046
|
-
|
|
6047
|
-
|
|
6048
|
-
|
|
6049
|
-
//
|
|
6050
|
-
|
|
6051
|
-
|
|
6052
|
-
|
|
6061
|
+
this.renderBadge = () => {
|
|
6062
|
+
var _a;
|
|
6063
|
+
// Inside the dropdown trigger the button's aria-label is the name, so the
|
|
6064
|
+
// badge is decorative there, as the status dot is. An empty label is
|
|
6065
|
+
// decorative too, rather than an image with no name.
|
|
6066
|
+
const badgeLabel = (_a = this.badgeLabel) !== null && _a !== void 0 ? _a : DEFAULT_BADGE_LABEL;
|
|
6067
|
+
const label = this.dropdown || badgeLabel === '' ? undefined : badgeLabel;
|
|
6068
|
+
return (
|
|
6069
|
+
// `badge` and `status` share the bottom-end corner; `status` wins so the
|
|
6070
|
+
// presence dot is never painted over the badge.
|
|
6071
|
+
this.badge && !this.status
|
|
6072
|
+
// Percentage is average size of icon in relation to total avatar size
|
|
6073
|
+
// of all preset sizes found in Figma.
|
|
6074
|
+
// Used to allow icons to scale to container size
|
|
6075
|
+
&& hAsync("pds-icon", { color: "var(--pine-color-purple-600)", class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%", "aria-label": label, "aria-hidden": label === undefined ? 'true' : undefined }));
|
|
6076
|
+
};
|
|
6053
6077
|
this.renderStatus = () => {
|
|
6054
6078
|
var _a;
|
|
6055
6079
|
if (!this.status)
|
|
@@ -6104,7 +6128,7 @@ class PdsAvatar {
|
|
|
6104
6128
|
}
|
|
6105
6129
|
}
|
|
6106
6130
|
render() {
|
|
6107
|
-
return (hAsync(Host, { key: '
|
|
6131
|
+
return (hAsync(Host, { key: '0942c1fff94d0d8138143cbddf80aea1d09e34a9', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
|
|
6108
6132
|
}
|
|
6109
6133
|
get el() { return getElement(this); }
|
|
6110
6134
|
static get watchers() { return {
|
|
@@ -6122,6 +6146,7 @@ class PdsAvatar {
|
|
|
6122
6146
|
"$members$": {
|
|
6123
6147
|
"alt": [1],
|
|
6124
6148
|
"badge": [4],
|
|
6149
|
+
"badgeLabel": [1, "badge-label"],
|
|
6125
6150
|
"componentId": [1, "component-id"],
|
|
6126
6151
|
"dropdown": [4],
|
|
6127
6152
|
"image": [1],
|
|
@@ -6584,7 +6609,7 @@ class PdsBox {
|
|
|
6584
6609
|
const normalizedBorder = normalizeColorValue$1(this.borderColor);
|
|
6585
6610
|
const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (normalizedBackground && { '--color-background-box': normalizedBackground })), (normalizedBorder && { '--color-border-box': normalizedBorder })), (this.minHeight && { '--sizing-min-height-box': this.minHeight })), (this.minWidth && { '--sizing-min-width-box': this.minWidth })), (this.flex && !['none', 'grow', 'shrink'].includes(this.flex) && { 'flex': this.flex }));
|
|
6586
6611
|
this.hostKeeper.record(boxClasses, boxInlineStyles);
|
|
6587
|
-
return (hAsync(Host, { key: '
|
|
6612
|
+
return (hAsync(Host, { key: 'c791a8d413b47629c619424bebf9d9c4acc4d9f3', class: boxClasses, style: boxInlineStyles }));
|
|
6588
6613
|
}
|
|
6589
6614
|
get el() { return getElement(this); }
|
|
6590
6615
|
static get style() { return pdsBoxCss(); }
|
|
@@ -6721,6 +6746,49 @@ class PdsBox {
|
|
|
6721
6746
|
}; }
|
|
6722
6747
|
}
|
|
6723
6748
|
|
|
6749
|
+
/**
|
|
6750
|
+
* The ARIA attributes that take ID references, and the element-reflection property each is forwarded
|
|
6751
|
+
* through. An ID on a host can't reach an element inside its shadow root, so a component that
|
|
6752
|
+
* delegates focus forwards the elements the IDs point at instead. A browser without ARIA element
|
|
6753
|
+
* reflection gets none of them.
|
|
6754
|
+
*/
|
|
6755
|
+
const ARIA_REFERENCE_PROPERTIES = {
|
|
6756
|
+
'aria-controls': 'ariaControlsElements',
|
|
6757
|
+
'aria-describedby': 'ariaDescribedByElements',
|
|
6758
|
+
'aria-labelledby': 'ariaLabelledByElements',
|
|
6759
|
+
};
|
|
6760
|
+
const ARIA_REFERENCE_ATTRIBUTES = Object.keys(ARIA_REFERENCE_PROPERTIES);
|
|
6761
|
+
/**
|
|
6762
|
+
* Finds an element by ID in the host's tree, then in each shadow root that contains it, so a host
|
|
6763
|
+
* inside another component's shadow root still reaches, say, a popover portal on document.body.
|
|
6764
|
+
* The closest root wins when an ID repeats.
|
|
6765
|
+
*/
|
|
6766
|
+
const findInAncestorRoots = (host, id) => {
|
|
6767
|
+
let root = host.getRootNode();
|
|
6768
|
+
while (root instanceof ShadowRoot) {
|
|
6769
|
+
const found = root.getElementById(id);
|
|
6770
|
+
if (found)
|
|
6771
|
+
return found;
|
|
6772
|
+
root = root.host.getRootNode();
|
|
6773
|
+
}
|
|
6774
|
+
return root instanceof Document ? root.getElementById(id) : null;
|
|
6775
|
+
};
|
|
6776
|
+
/**
|
|
6777
|
+
* Points the target's reflected ARIA properties at the elements the host's ID-reference attributes
|
|
6778
|
+
* name, or clears them. Run it again whenever the attributes or the referenced elements may have
|
|
6779
|
+
* changed: element references don't follow an ID to a node added or replaced later.
|
|
6780
|
+
*/
|
|
6781
|
+
const forwardAriaReferences = (host, target) => {
|
|
6782
|
+
Object.entries(ARIA_REFERENCE_PROPERTIES).forEach(([attribute, property]) => {
|
|
6783
|
+
var _a, _b;
|
|
6784
|
+
if (!(property in target))
|
|
6785
|
+
return;
|
|
6786
|
+
const ids = (_b = (_a = host.getAttribute(attribute)) === null || _a === void 0 ? void 0 : _a.split(/\s+/).filter(Boolean)) !== null && _b !== void 0 ? _b : [];
|
|
6787
|
+
const referenced = ids.map((id) => findInAncestorRoots(host, id)).filter((el) => el !== null);
|
|
6788
|
+
target[property] = referenced.length > 0 ? referenced : null;
|
|
6789
|
+
});
|
|
6790
|
+
};
|
|
6791
|
+
|
|
6724
6792
|
const pdsButtonCss = () => `:host{--pds-button-background:var(--pds-button-color-background-default);--pds-button-border:var(--pine-border);--pds-button-border-radius:var(--pine-border-radius-full);--pds-button-border-radius-start-end:var(--pine-border-radius-full);--pds-button-border-radius-start-start:var(--pine-border-radius-full);--pds-button-border-radius-end-end:var(--pine-border-radius-full);--pds-button-border-radius-end-start:var(--pine-border-radius-full);--pds-button-min-height:var(--pine-dimension-450);--pds-button-outline-offset:var(--pine-border-width);--pds-button-color-border-default:transparent;--pds-button-color-border-disabled:transparent;--pds-button-color-border-focus:transparent;--pds-button-color-border-hover:transparent;--button-loader-color:var(--pds-button-color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) a,:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([full-width=true]) .pds-button__content{-ms-flex-pack:center;justify-content:center;text-align:center}:host([loading=true]){cursor:wait;pointer-events:none}:host([aria-disabled=true]){pointer-events:none}.pds-button{--pds-loader-color:var(--pds-button-color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--pds-button-background, var(--pds-button-color-background-default));border:var(--pds-button-border);border-color:var(--pds-button-color-border-default);border-radius:var(--pds-button-border-radius);border-end-end-radius:var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));border-end-start-radius:var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));border-start-end-radius:var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));border-start-start-radius:var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pds-button-color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-button-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);position:relative;text-decoration:none}.pds-button pds-icon{color:currentColor;fill:currentColor}.pds-button:hover{background-color:var(--pds-button-color-background-hover);border-color:var(--pds-button-color-border-hover)}.pds-button:focus-visible{border-color:var(--pds-button-color-border-focus);-webkit-box-shadow:var(--pds-button-box-shadow-focus, none);box-shadow:var(--pds-button-box-shadow-focus, none);outline:var(--pds-button-outline-focus, var(--pine-outline-focus));outline-offset:var(--pds-button-outline-offset)}.pds-button:disabled{background-color:var(--pds-button-color-background-disabled);border-color:var(--pds-button-color-border-disabled);color:var(--pds-button-color-text-disabled);pointer-events:none}.pds-button--primary{--pds-button-color-background-default:var(--pine-color-primary);--pds-button-color-background-hover:var(--pine-color-primary-hover);--pds-button-color-background-disabled:var(--pine-color-primary-disabled);--pds-button-color-border-default:var(--pine-color-primary);--pds-button-color-border-hover:var(--pine-color-primary-hover);--pds-button-color-text-default:var(--pine-color-text-primary);--pds-button-color-text-disabled:var(--pine-color-text-primary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--pds-button-color-background-default:var(--pine-color-accent);--pds-button-color-background-hover:var(--pine-color-accent-hover);--pds-button-color-background-disabled:var(--pine-color-accent-disabled);--pds-button-color-border-default:var(--pine-color-accent);--pds-button-color-border-hover:var(--pine-color-accent-hover);--pds-button-color-text-default:var(--pine-color-text-primary);--pds-button-color-text-disabled:var(--pine-color-text-accent-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--pds-button-color-background-default:var(--pine-color-danger);--pds-button-color-background-hover:var(--pine-color-danger-hover);--pds-button-color-background-disabled:var(--pine-color-danger-disabled);--pds-button-color-border-default:var(--pine-color-danger);--pds-button-color-border-hover:var(--pine-color-danger-hover);--pds-button-color-text-default:var(--pine-color-white);--pds-button-color-text-disabled:var(--pine-color-text-danger-disabled);--pds-button-color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-button--secondary,.pds-button--disclosure{--pds-button-color-background-default:var(--pine-color-secondary);--pds-button-color-background-hover:var(--pine-color-secondary-hover);--pds-button-color-background-disabled:var(--pine-color-secondary-disabled);--pds-button-color-border-disabled:var(--pine-color-border-disabled);--pds-button-color-border-focus:var(--pine-color-border);--pds-button-color-border-hover:var(--pine-color-border-hover);--pds-button-color-border-default:var(--pine-color-border);--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-disabled:var(--pine-color-text-secondary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--tertiary{--pds-button-color-background-default:transparent;--pds-button-color-background-hover:var(--pine-color-background-muted);--pds-button-color-background-disabled:transparent;--pds-button-color-border-default:transparent;--pds-button-color-border-hover:var(--pine-color-background-muted);--pds-button-color-border-disabled:transparent;--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-disabled:var(--pine-color-text-secondary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--filter{--pds-button-color-background-default:var(--pine-color-background-container);--pds-button-color-background-hover:var(--pine-color-background-subtle);--pds-button-color-background-disabled:var(--pine-color-white);--pds-button-color-border-default:transparent;--pds-button-color-border-hover:transparent;--pds-button-color-border-focus:transparent;--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-hover:var(--pine-color-text-hover);--pds-button-color-text-disabled:var(--pine-color-text-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary);--pds-button-border-radius:var(--pine-dimension-125);--pds-button-border-radius-start-end:var(--pine-dimension-125);--pds-button-border-radius-start-start:var(--pine-dimension-125);--pds-button-border-radius-end-end:var(--pine-dimension-125);--pds-button-border-radius-end-start:var(--pine-dimension-125);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-button--filter:disabled{background-color:var(--pine-color-background-container)}.pds-button--filter:hover{color:var(--pds-button-color-text-hover)}.pds-button--unstyled{--pds-button-color-background-default:transparent;--pds-button-color-background-hover:transparent;--pds-button-color-background-disabled:transparent;--pds-button-color-text-default:var(--pine-color-text);--button-loader-color:var(--pine-color-text);border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-xs);position:relative;width:100%}.pds-button__icon{display:-ms-inline-flexbox;display:inline-flex}.pds-button__icon--empty{display:none}.pds-button__text{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}.pds-button__icon--hidden,.pds-button__text--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}.pds-button--small{min-height:var(--pine-dimension-400);padding:calc(var(--pine-dimension-2xs) - var(--pine-border-width)) var(--pine-dimension-sm)}.pds-button--micro{font-size:var(--pine-font-size-085);min-height:var(--pine-dimension-300);padding:var(--pine-dimension-025) var(--pine-dimension-xs)}.pds-button--icon-only{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);height:var(--button-dimension);-ms-flex-pack:center;justify-content:center;min-height:var(--button-dimension);min-width:var(--button-dimension);padding:var(--pine-dimension-xs);width:var(--button-dimension)}.pds-button--icon-only .pds-button__content{height:100%;-ms-flex-pack:center;justify-content:center;width:100%}.pds-button--icon-only .pds-button__text--hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-button--icon-only.pds-button--small{height:var(--pine-dimension-400);min-height:var(--pine-dimension-400);min-width:var(--pine-dimension-400);padding:var(--pine-dimension-2xs);width:var(--pine-dimension-400)}.pds-button--icon-only.pds-button--micro{height:var(--pine-dimension-300);min-height:var(--pine-dimension-300);min-width:var(--pine-dimension-300);padding:var(--pine-dimension-3xs);width:var(--pine-dimension-300)}`;
|
|
6725
6793
|
|
|
6726
6794
|
const FORWARDED_ARIA_ATTRIBUTES = ['aria-current', 'aria-expanded', 'aria-haspopup', 'aria-label', 'aria-pressed'];
|
|
@@ -6792,7 +6860,12 @@ class PdsButton {
|
|
|
6792
6860
|
if (FORWARDED_ARIA_ATTRIBUTES.some((name) => forwarded[name] !== this.forwardedAria[name])) {
|
|
6793
6861
|
this.forwardedAria = forwarded;
|
|
6794
6862
|
}
|
|
6795
|
-
this.
|
|
6863
|
+
this.forwardAriaReferences();
|
|
6864
|
+
};
|
|
6865
|
+
// A hint added after the button, or replaced by a framework or a DOM morph, is picked up by the
|
|
6866
|
+
// time focus reaches the button and it's announced.
|
|
6867
|
+
this.handleFocusIn = () => {
|
|
6868
|
+
this.forwardAriaReferences();
|
|
6796
6869
|
};
|
|
6797
6870
|
this.handleStartSlotChange = (event) => {
|
|
6798
6871
|
this.hasStartContent = event.target.assignedElements({ flatten: true }).length > 0;
|
|
@@ -6835,7 +6908,7 @@ class PdsButton {
|
|
|
6835
6908
|
// Consumers, popovers and menus set these on the host, often after render, but only the inner element is announced.
|
|
6836
6909
|
this.hostAriaObserver = new MutationObserver(this.syncHostAria);
|
|
6837
6910
|
this.hostAriaObserver.observe(this.el, {
|
|
6838
|
-
attributeFilter: FORWARDED_ARIA_ATTRIBUTES.concat(
|
|
6911
|
+
attributeFilter: FORWARDED_ARIA_ATTRIBUTES.concat(ARIA_REFERENCE_ATTRIBUTES),
|
|
6839
6912
|
});
|
|
6840
6913
|
}
|
|
6841
6914
|
disconnectedCallback() {
|
|
@@ -6844,7 +6917,7 @@ class PdsButton {
|
|
|
6844
6917
|
this.hostAriaObserver = undefined;
|
|
6845
6918
|
}
|
|
6846
6919
|
componentDidRender() {
|
|
6847
|
-
this.
|
|
6920
|
+
this.forwardAriaReferences();
|
|
6848
6921
|
}
|
|
6849
6922
|
/**
|
|
6850
6923
|
* Listen for Enter key presses on form inputs to trigger submit
|
|
@@ -6895,25 +6968,9 @@ class PdsButton {
|
|
|
6895
6968
|
}
|
|
6896
6969
|
}
|
|
6897
6970
|
}
|
|
6898
|
-
|
|
6899
|
-
|
|
6900
|
-
|
|
6901
|
-
if (!this.contentEl || !('ariaControlsElements' in this.contentEl))
|
|
6902
|
-
return;
|
|
6903
|
-
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 : [];
|
|
6904
|
-
const controlled = ids.map((id) => this.findInAncestorRoots(id)).filter((el) => el !== null);
|
|
6905
|
-
this.contentEl.ariaControlsElements = controlled.length > 0 ? controlled : null;
|
|
6906
|
-
}
|
|
6907
|
-
// A trigger inside another component's shadow root still controls a popover portal on document.body.
|
|
6908
|
-
findInAncestorRoots(id) {
|
|
6909
|
-
let root = this.el.getRootNode();
|
|
6910
|
-
while (root instanceof ShadowRoot) {
|
|
6911
|
-
const found = root.getElementById(id);
|
|
6912
|
-
if (found)
|
|
6913
|
-
return found;
|
|
6914
|
-
root = root.host.getRootNode();
|
|
6915
|
-
}
|
|
6916
|
-
return root instanceof Document ? root.getElementById(id) : null;
|
|
6971
|
+
forwardAriaReferences() {
|
|
6972
|
+
if (this.contentEl)
|
|
6973
|
+
forwardAriaReferences(this.el, this.contentEl);
|
|
6917
6974
|
}
|
|
6918
6975
|
classNames() {
|
|
6919
6976
|
const classNames = ['pds-button'];
|
|
@@ -6973,7 +7030,7 @@ class PdsButton {
|
|
|
6973
7030
|
// Hide text when loading or iconOnly is true
|
|
6974
7031
|
const hideText = this.loading || this.iconOnly;
|
|
6975
7032
|
const content = (hAsync("div", { class: "pds-button__content", part: "button-content" }, this.renderStartContent(), hAsync("span", { class: `pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`, part: "button-text" }, hAsync("slot", null)), this.loading && (hAsync("span", { class: "pds-button__loader" }, hAsync("pds-loader", { "is-loading": true, size: "var(--pine-font-size-body-2xl)", variant: "spinner", exportparts: "loader-svg" }, "Loading..."))), this.renderEndContent()));
|
|
6976
|
-
return (hAsync(Host, Object.assign({ "aria-disabled": this.disabled ? 'true' : null }, (this.componentId != null ? { id: this.componentId } : {}), { onClick: this.handleClick, variant: this.variant }), hAsync(ContentElement, Object.assign({}, attributes()), content)));
|
|
7033
|
+
return (hAsync(Host, Object.assign({ "aria-disabled": this.disabled ? 'true' : null }, (this.componentId != null ? { id: this.componentId } : {}), { onClick: this.handleClick, onFocusin: this.handleFocusIn, variant: this.variant }), hAsync(ContentElement, Object.assign({}, attributes()), content)));
|
|
6977
7034
|
}
|
|
6978
7035
|
static get delegatesFocus() { return true; }
|
|
6979
7036
|
get el() { return getElement(this); }
|
|
@@ -7070,7 +7127,7 @@ const isSpecTest = () => {
|
|
|
7070
7127
|
|
|
7071
7128
|
const labelCss$5 = () => `:host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
|
|
7072
7129
|
|
|
7073
|
-
const pdsCheckboxCss = () => `:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--pine-color-text-primary);-webkit-border-after:var(--pine-border-width-none);border-block-end:var(--pine-border-width-none);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);-ms-flex:none;flex:none;height:var(--pine-dimension-sm);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:1px solid var(--pine-color-text-primary);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -60%) rotate(43deg);transform:translate(-50%, -60%) rotate(43deg);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-border)}input:disabled+label{cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{outline:var(--pine-outline-focus)}:host-context([dir=rtl]) input:checked::after{-webkit-transform:translate(-50%, -60%) rotate(-43deg);transform:translate(-50%, -60%) rotate(-43deg)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}:host(.has-label-slot) label{-ms-flex-align:center;align-items:center}:host(.has-label-slot) label,:host(.has-label-slot) label>span{min-width:0}:host(.has-label-slot) input{-webkit-margin-before:0;margin-block-start:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-checkbox__message--error{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-checkbox__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}`;
|
|
7130
|
+
const pdsCheckboxCss = () => `:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--pine-color-text-primary);-webkit-border-after:var(--pine-border-width-none);border-block-end:var(--pine-border-width-none);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);-ms-flex:none;flex:none;height:var(--pine-dimension-sm);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:1px solid var(--pine-color-text-primary);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -60%) rotate(43deg);transform:translate(-50%, -60%) rotate(43deg);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-border)}input:disabled+label{cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{outline:var(--pine-outline-focus)}:host-context([dir=rtl]) input:checked::after{-webkit-transform:translate(-50%, -60%) rotate(-43deg);transform:translate(-50%, -60%) rotate(-43deg)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}:host(.has-label-slot) label{-ms-flex-align:center;align-items:center}:host(.has-label-slot) label,:host(.has-label-slot) label>span{min-width:0}:host(.has-label-slot) input{-webkit-margin-before:0;margin-block-start:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-checkbox__message--error{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-checkbox__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}:host(.pds-checkbox--pill){position:relative}:host(.pds-checkbox--pill) label{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);cursor:pointer;font:var(--pine-typography-body);min-block-size:var(--pine-dimension-xl);padding:0 var(--pine-dimension-sm);-webkit-transition:border-color var(--pine-motion-duration-fast) ease;transition:border-color var(--pine-motion-duration-fast) ease}:host(.pds-checkbox--pill) label span{min-width:0;overflow-wrap:anywhere}:host(.pds-checkbox--pill) label:hover{border-color:var(--pine-color-text)}:host(.pds-checkbox--pill) label:has(input:checked){border-color:var(--pine-color-text-active);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active)}:host(.pds-checkbox--pill) label:has(input:focus-visible){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}:host(.pds-checkbox--pill) label:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host(.pds-checkbox--pill) label:has(input:disabled:checked){border-color:var(--pine-color-text-disabled);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled)}@media (forced-colors: active){:host(.pds-checkbox--pill) label:has(input:disabled){border-color:GrayText}:host(.pds-checkbox--pill) label:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}:host(.pds-checkbox--pill) label:has(input:disabled:checked){border-color:GrayText;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}:host(.pds-checkbox--pill) .pds-checkbox__message{-webkit-margin-start:0;margin-inline-start:0}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label{border-color:var(--pine-color-border-danger);color:var(--pine-color-text-active)}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked){border-color:var(--pine-color-border-danger);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger)}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:focus-visible){outline:var(--pine-outline-focus-danger)}@media (forced-colors: active){:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}`;
|
|
7074
7131
|
|
|
7075
7132
|
/**
|
|
7076
7133
|
* @slot label - Content displayed as the checkbox label in place of the `label` text. Clicking it toggles the checkbox.
|
|
@@ -7088,6 +7145,11 @@ class PdsCheckbox {
|
|
|
7088
7145
|
* It determines whether or not the checkbox is checked.
|
|
7089
7146
|
*/
|
|
7090
7147
|
this.checked = false;
|
|
7148
|
+
/**
|
|
7149
|
+
* Sets the style variant of the checkbox. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
|
|
7150
|
+
* @defaultValue default
|
|
7151
|
+
*/
|
|
7152
|
+
this.variant = 'default';
|
|
7091
7153
|
this.handleCheckboxChange = (e) => {
|
|
7092
7154
|
if (this.disabled) {
|
|
7093
7155
|
return;
|
|
@@ -7127,6 +7189,9 @@ class PdsCheckbox {
|
|
|
7127
7189
|
if (this.hasLabelSlot) {
|
|
7128
7190
|
classNames.push('has-label-slot');
|
|
7129
7191
|
}
|
|
7192
|
+
if (this.variant === 'pill') {
|
|
7193
|
+
classNames.push('pds-checkbox--pill');
|
|
7194
|
+
}
|
|
7130
7195
|
return classNames.join(' ');
|
|
7131
7196
|
}
|
|
7132
7197
|
connectedCallback() {
|
|
@@ -7189,9 +7254,9 @@ class PdsCheckbox {
|
|
|
7189
7254
|
render() {
|
|
7190
7255
|
const hostClass = this.classNames();
|
|
7191
7256
|
this.hostKeeper.record(hostClass);
|
|
7192
|
-
return (hAsync(Host, { key: '
|
|
7193
|
-
hAsync("div", { key: '
|
|
7194
|
-
hAsync("div", { key: '
|
|
7257
|
+
return (hAsync(Host, { key: '8e9185653796f250ad425350b9adc1f65fd047c1', class: hostClass }, hAsync("label", { key: 'e17bab4b96b4ffc716e311ecea488a3025e1551c', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '8af9bbc3dbe18409532e95b4b490eab4aabc8762', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput, class: this.variant === 'pill' ? 'visually-hidden' : undefined }, this.inheritedAttributes)), hAsync("span", { key: '1e4d9a826b6b5ec429ae47096d4aede3af43d110', class: this.hideLabel && this.variant !== 'pill' ? 'visually-hidden' : '' }, hAsync("slot", { key: '7b10c7d1e018be4afe019cb56e82a5ec7a638de8', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
|
|
7258
|
+
hAsync("div", { key: 'c5455322eb07bf73805a17c28bf6acc1b5384337', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
7259
|
+
hAsync("div", { key: '0f7c8ec00362c31b1c5bd11c185c6e7bfc177f22', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'f6eccfaac90505903aee379f2fc28b5735d8c4a9', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
|
|
7195
7260
|
}
|
|
7196
7261
|
static get formAssociated() { return true; }
|
|
7197
7262
|
get el() { return getElement(this); }
|
|
@@ -7219,6 +7284,7 @@ class PdsCheckbox {
|
|
|
7219
7284
|
"name": [1],
|
|
7220
7285
|
"required": [4],
|
|
7221
7286
|
"value": [1],
|
|
7287
|
+
"variant": [1],
|
|
7222
7288
|
"hasLabelSlot": [32]
|
|
7223
7289
|
},
|
|
7224
7290
|
"$listeners$": undefined,
|
|
@@ -9491,7 +9557,7 @@ class PdsChip {
|
|
|
9491
9557
|
const hostClass = this.classNames();
|
|
9492
9558
|
const hostStyles = this.hostStyles;
|
|
9493
9559
|
this.hostKeeper.record(hostClass, hostStyles);
|
|
9494
|
-
return (hAsync(Host, { key: '
|
|
9560
|
+
return (hAsync(Host, { key: '0e67ea3700e8a8e1ad3049b6eafced6934262335', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
|
|
9495
9561
|
}
|
|
9496
9562
|
get el() { return getElement(this); }
|
|
9497
9563
|
static get style() { return pdsChipTokensCss() + pdsChipCss(); }
|
|
@@ -11201,7 +11267,7 @@ class FlyoutController {
|
|
|
11201
11267
|
}
|
|
11202
11268
|
}
|
|
11203
11269
|
|
|
11204
|
-
const pdsComboboxCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-950)}.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled){border-color:var(--pine-color-border-danger)}.pds-combobox__input.pds-combobox__input--invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:calc(var(--pine-z-index-raised) - 1)}.pds-combobox__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error pds-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-combobox__listbox{background:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-background-muted)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-background-muted)}.pds-combobox__option--disabled,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger,.pds-combobox__group-back--disabled>.pds-combobox__group-back-trigger,.pds-combobox__group--disabled>.pds-combobox__group-label{color:var(--pine-color-text-disabled)}.pds-combobox__option--disabled{cursor:not-allowed}.pds-combobox__option--disabled .pds-combobox__option-chip,.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper{opacity:0.5}.pds-combobox__option-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__option-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group{list-style:none;-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150)}.pds-combobox__group:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group-list{list-style:none;margin:0;padding:0}.pds-combobox__listbox--grouped .pds-combobox__group-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs)}.pds-combobox__group-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__group-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__group-row{list-style:none;position:relative}.pds-combobox__group-row-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.pds-combobox__group-row-trigger,.pds-combobox__group-row--has-selection>.pds-combobox__group-row-trigger,.pds-combobox__group-row--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-back--highlighted>.pds-combobox__group-row-trigger{background:var(--pine-color-background-muted)}.pds-combobox__listbox--pointer-hover .pds-combobox__group-row-trigger:hover{background:var(--pine-color-background-muted)}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out{overflow-x:hidden}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out:dir(rtl){--pds-combobox-drill-from:var(--pine-dimension-sm)}.pds-combobox__listbox--drill-out,.pds-combobox__listbox--drill-in:dir(rtl){--pds-combobox-drill-from:calc(var(--pine-dimension-sm) * -1)}.pds-combobox__listbox--drill-in .pds-combobox__drill-in-options>li,.pds-combobox__listbox--drill-in .pds-combobox__group-back-trigger,.pds-combobox__listbox--drill-out>li{-webkit-animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}@keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__group-row-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0}.pds-combobox__group-row-caret{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--grouped,.pds-combobox__flyout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);padding:var(--pine-dimension-2xs)}.pds-combobox__flyout{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;overflow-y:auto;position:fixed;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1}.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:0}.pds-combobox__listbox-options{-ms-flex:1;flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-combobox__listbox-options.pds-combobox__listbox--grouped{padding:var(--pine-dimension-2xs)}.pds-combobox__panel-search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-sm)}.pds-combobox__panel-search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:0;flex-shrink:0}.pds-combobox__panel-search:focus-within{border-block-end-color:var(--pine-color-border-active)}.pds-combobox__panel-search-input{background:transparent;border:0;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:0;outline:none;padding:0}.pds-combobox__panel-search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none}.pds-combobox__group-back-trigger{-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in.pds-combobox__listbox--grouped{-webkit-padding-before:0;padding-block-start:0}.pds-combobox__listbox-options--drilled-in:focus{outline:none}.pds-combobox__listbox-options--drilled-in:focus .pds-combobox__group-back-trigger{border-block-end-color:var(--pine-color-border-active)}:where(.pds-combobox__listbox-options--drilled-in) .pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay);-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);border-radius:0;color:var(--pine-color-text-strong);font:var(--pine-typography-body);inset-block-start:0;letter-spacing:var(--pine-letter-spacing);margin-inline:calc(var(--pine-dimension-2xs) * -1);padding:var(--pine-dimension-sm);position:-webkit-sticky;position:sticky;z-index:1}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none;margin:0;padding:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}:host(.pds-combobox-dropdown-portal) .pds-combobox__listbox{position:fixed;z-index:var(--pine-z-index-priority)}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;text-align:start}.pds-combobox__button-trigger-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__button-trigger-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150)}.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder{color:var(--pine-color-text-muted)}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:"";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}`;
|
|
11270
|
+
const pdsComboboxCss = () => `:host{display:block}:host([truncate]){display:block;min-width:0}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-950)}.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled){border-color:var(--pine-color-border-danger)}.pds-combobox__input.pds-combobox__input--invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:calc(var(--pine-z-index-raised) - 1)}.pds-combobox__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error pds-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-combobox__listbox{background:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-background-muted)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-background-muted)}.pds-combobox__option--disabled,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger,.pds-combobox__group-back--disabled>.pds-combobox__group-back-trigger,.pds-combobox__group--disabled>.pds-combobox__group-label{color:var(--pine-color-text-disabled)}.pds-combobox__option--disabled{cursor:not-allowed}.pds-combobox__option--disabled .pds-combobox__option-chip,.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper{opacity:0.5}.pds-combobox__option-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__option-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--truncate .pds-combobox__option-label{-ms-flex:1 1 auto;flex:1 1 auto;overflow-wrap:normal}.pds-combobox__listbox--truncate .pds-combobox__option-check{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group{list-style:none;-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150)}.pds-combobox__group:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group-list{list-style:none;margin:0;padding:0}.pds-combobox__listbox--grouped .pds-combobox__group-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs)}.pds-combobox__group-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__group-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__group-row{list-style:none;position:relative}.pds-combobox__group-row-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.pds-combobox__group-row-trigger,.pds-combobox__group-row--has-selection>.pds-combobox__group-row-trigger,.pds-combobox__group-row--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-back--highlighted>.pds-combobox__group-row-trigger{background:var(--pine-color-background-muted)}.pds-combobox__listbox--pointer-hover .pds-combobox__group-row-trigger:hover{background:var(--pine-color-background-muted)}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out{overflow-x:hidden}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out:dir(rtl){--pds-combobox-drill-from:var(--pine-dimension-sm)}.pds-combobox__listbox--drill-out,.pds-combobox__listbox--drill-in:dir(rtl){--pds-combobox-drill-from:calc(var(--pine-dimension-sm) * -1)}.pds-combobox__listbox--drill-in .pds-combobox__drill-in-options>li,.pds-combobox__listbox--drill-in .pds-combobox__group-back-trigger,.pds-combobox__listbox--drill-out>li{-webkit-animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}@keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__group-row-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0}.pds-combobox__group-row-caret{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--grouped,.pds-combobox__flyout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);padding:var(--pine-dimension-2xs)}.pds-combobox__flyout{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;overflow-y:auto;position:fixed;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1}.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:0}.pds-combobox__listbox-options{-ms-flex:1;flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-combobox__listbox-options.pds-combobox__listbox--grouped{padding:var(--pine-dimension-2xs)}.pds-combobox__panel-search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-sm)}.pds-combobox__panel-search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:0;flex-shrink:0}.pds-combobox__panel-search:focus-within{border-block-end-color:var(--pine-color-border-active)}.pds-combobox__panel-search-input{background:transparent;border:0;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:0;outline:none;padding:0}.pds-combobox__panel-search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none}.pds-combobox__group-back-trigger{-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in.pds-combobox__listbox--grouped{-webkit-padding-before:0;padding-block-start:0}.pds-combobox__listbox-options--drilled-in:focus{outline:none}.pds-combobox__listbox-options--drilled-in:focus .pds-combobox__group-back-trigger{border-block-end-color:var(--pine-color-border-active)}:where(.pds-combobox__listbox-options--drilled-in) .pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay);-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);border-radius:0;color:var(--pine-color-text-strong);font:var(--pine-typography-body);inset-block-start:0;letter-spacing:var(--pine-letter-spacing);margin-inline:calc(var(--pine-dimension-2xs) * -1);padding:var(--pine-dimension-sm);position:-webkit-sticky;position:sticky;z-index:1}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none;margin:0;padding:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}:host(.pds-combobox-dropdown-portal) .pds-combobox__listbox{position:fixed;z-index:var(--pine-z-index-priority)}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;text-align:start}.pds-combobox__button-trigger-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__button-trigger-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger--truncate{max-width:100%}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-label{overflow-wrap:normal}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-chevron{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger-text,.pds-combobox__listbox--truncate .pds-combobox__option-text{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150)}.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder{color:var(--pine-color-text-muted)}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:"";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}`;
|
|
11205
11271
|
|
|
11206
11272
|
/**
|
|
11207
11273
|
* @slot option - Option elements for the combobox dropdown
|
|
@@ -11342,6 +11408,13 @@ class PdsCombobox {
|
|
|
11342
11408
|
* @default 'pill'
|
|
11343
11409
|
*/
|
|
11344
11410
|
this.triggerShape = 'pill';
|
|
11411
|
+
/**
|
|
11412
|
+
* Determines whether the button trigger's label and the option labels should truncate and display with an ellipsis.
|
|
11413
|
+
* When a label overflows, a `title` showing the full label will appear on hover.
|
|
11414
|
+
* Chip options, custom layouts and group rows aren't affected.
|
|
11415
|
+
* @defaultValue false
|
|
11416
|
+
*/
|
|
11417
|
+
this.truncate = false;
|
|
11345
11418
|
/**
|
|
11346
11419
|
* The sentiment for the chip trigger. Matches Pine chip sentiments.
|
|
11347
11420
|
* @default 'neutral'
|
|
@@ -11638,10 +11711,15 @@ class PdsCombobox {
|
|
|
11638
11711
|
if (this.usesPanelSearch)
|
|
11639
11712
|
this.restoreFocusToTrigger();
|
|
11640
11713
|
};
|
|
11714
|
+
this.onButtonTriggerMouseEnter = (event) => {
|
|
11715
|
+
this.syncTitle(event.currentTarget, '.pds-combobox__button-trigger-text');
|
|
11716
|
+
};
|
|
11641
11717
|
// Event handler for mouse enter on option
|
|
11642
11718
|
this.onOptionMouseEnter = (event) => {
|
|
11643
|
-
const
|
|
11644
|
-
this.
|
|
11719
|
+
const row = event.currentTarget;
|
|
11720
|
+
if (this.truncate)
|
|
11721
|
+
this.syncTitle(row, '.pds-combobox__option-text');
|
|
11722
|
+
this.highlightedIndex = Number(row.getAttribute('data-option-index'));
|
|
11645
11723
|
this.keyboardNavigating = false;
|
|
11646
11724
|
};
|
|
11647
11725
|
this.onGroupRowMouseEnter = (event) => {
|
|
@@ -11931,6 +12009,19 @@ class PdsCombobox {
|
|
|
11931
12009
|
this.focusPanel(panelFocusEl);
|
|
11932
12010
|
}
|
|
11933
12011
|
}
|
|
12012
|
+
// A `title` only while the text is cut, measured on hover. On the span, not the option or trigger,
|
|
12013
|
+
// so it isn't read again as their description.
|
|
12014
|
+
syncTitle(el, selector) {
|
|
12015
|
+
const text = el.querySelector(selector);
|
|
12016
|
+
if (!text)
|
|
12017
|
+
return;
|
|
12018
|
+
if (text.scrollWidth > text.clientWidth) {
|
|
12019
|
+
text.title = text.textContent || '';
|
|
12020
|
+
}
|
|
12021
|
+
else {
|
|
12022
|
+
text.removeAttribute('title');
|
|
12023
|
+
}
|
|
12024
|
+
}
|
|
11934
12025
|
/**
|
|
11935
12026
|
* Scrolls just enough to show `el`, as `scrollIntoView({ block: 'nearest' })` does. In the drill-in
|
|
11936
12027
|
* panel it scrolls the list alone, and never sideways: while a drill-in slide offsets a row past
|
|
@@ -13332,6 +13423,7 @@ class PdsCombobox {
|
|
|
13332
13423
|
'pds-combobox__listbox--drill-in': this.drillDirection === 'in',
|
|
13333
13424
|
'pds-combobox__listbox--drill-out': this.drillDirection === 'out',
|
|
13334
13425
|
'pds-combobox__listbox--pointer-hover': this.pointerCanHover,
|
|
13426
|
+
'pds-combobox__listbox--truncate': this.truncate,
|
|
13335
13427
|
}, onAnimationEnd: this.onDrillAnimationEnd, onPointerMove: this.onPanelPointer, onPointerDown: this.onPanelPointer, role: this.showsGroupedPanel ? 'tree' : 'listbox', id: this.listboxId, "aria-label": this.label || 'Options', "aria-multiselectable": "false",
|
|
13336
13428
|
// Focusable but out of the tab order with panel search, so it can take focus when a
|
|
13337
13429
|
// drilled-in group hides the field. Dropping it while focused would blur the list and close.
|
|
@@ -13503,9 +13595,10 @@ class PdsCombobox {
|
|
|
13503
13595
|
/** An option's text, after its `data-icon` when it has one. */
|
|
13504
13596
|
renderOptionLabel(option) {
|
|
13505
13597
|
const icon = optionIconOf(option);
|
|
13598
|
+
const label = this.truncate ? (hAsync("span", { key: this.getOptionLabel(option), class: "pds-combobox__option-text" }, this.getOptionLabel(option))) : this.getOptionLabel(option);
|
|
13506
13599
|
if (icon === null)
|
|
13507
|
-
return
|
|
13508
|
-
return (hAsync("span", { class: "pds-combobox__option-label" }, hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }),
|
|
13600
|
+
return label;
|
|
13601
|
+
return (hAsync("span", { class: "pds-combobox__option-label" }, hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }), label));
|
|
13509
13602
|
}
|
|
13510
13603
|
/** The grouped panel's rows, in the order the panel draws them and the keyboard moves through. */
|
|
13511
13604
|
panelEntries() {
|
|
@@ -13593,7 +13686,9 @@ class PdsCombobox {
|
|
|
13593
13686
|
'pds-combobox__button-trigger-label--with-icon': icon !== null,
|
|
13594
13687
|
} }, icon !== null && (
|
|
13595
13688
|
// `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
|
|
13596
|
-
hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.
|
|
13689
|
+
hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.truncate ? (
|
|
13690
|
+
// Keyed so a new label drops a stale `title`.
|
|
13691
|
+
hAsync("span", { key: this.selectedLabel || this.placeholder, class: "pds-combobox__button-trigger-text" }, this.selectedLabel || this.placeholder)) : (this.selectedLabel || this.placeholder)));
|
|
13597
13692
|
}
|
|
13598
13693
|
/** The selection's icon for the button trigger: the option's own, or else its group's. */
|
|
13599
13694
|
get selectedIcon() {
|
|
@@ -13725,16 +13820,17 @@ class PdsCombobox {
|
|
|
13725
13820
|
'pds-combobox__button-trigger',
|
|
13726
13821
|
`pds-combobox__button-trigger--${this.triggerVariant}`,
|
|
13727
13822
|
this.triggerShape === 'input' && 'pds-combobox__button-trigger--input-shape',
|
|
13823
|
+
this.truncate && 'pds-combobox__button-trigger--truncate',
|
|
13728
13824
|
]
|
|
13729
13825
|
.filter(Boolean)
|
|
13730
13826
|
.join(' ');
|
|
13731
|
-
return (hAsync(Host, { key: '
|
|
13827
|
+
return (hAsync(Host, { key: '2786062989bc490e87ea382b5c80f7e2758c1a8a', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: 'b3b272a99528d725a52d3092a3650efacaf54b34', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (hAsync("label", { key: '8e2e0021e1f60cddfe41b918406c7d76659fbff1', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (hAsync("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, hAsync("input", { ref: el => {
|
|
13732
13828
|
this.inputEl = el;
|
|
13733
13829
|
this.triggerEl = el;
|
|
13734
13830
|
}, class: {
|
|
13735
13831
|
'pds-combobox__input': true,
|
|
13736
13832
|
'pds-combobox__input--invalid': this.isInvalid(),
|
|
13737
|
-
}, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: '
|
|
13833
|
+
}, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, onMouseEnter: this.truncate ? this.onButtonTriggerMouseEnter : undefined, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: '2216779564fa3f4efd1b4d0972ac045fa0851078', style: { display: 'none' } }, hAsync("slot", { key: '77b344d7301193f435949cbe2be2b28e1d7f6602', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
|
|
13738
13834
|
hAsync("span", { key: "drill-status", class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : ''),
|
|
13739
13835
|
// Its own region: sharing one, revealing a row then opening it would leave the text the
|
|
13740
13836
|
// same, and opening the group would go unannounced.
|
|
@@ -13805,6 +13901,7 @@ class PdsCombobox {
|
|
|
13805
13901
|
"triggerWidth": [1, "trigger-width"],
|
|
13806
13902
|
"triggerVariant": [1, "trigger-variant"],
|
|
13807
13903
|
"triggerShape": [1, "trigger-shape"],
|
|
13904
|
+
"truncate": [516],
|
|
13808
13905
|
"chipSentiment": [1, "chip-sentiment"],
|
|
13809
13906
|
"chipLarge": [4, "chip-large"],
|
|
13810
13907
|
"chipIcon": [1, "chip-icon"],
|
|
@@ -13841,7 +13938,7 @@ class PdsCombobox {
|
|
|
13841
13938
|
},
|
|
13842
13939
|
"$listeners$": undefined,
|
|
13843
13940
|
"$lazyBundleId$": "-",
|
|
13844
|
-
"$attrsToReflect$": [["name", "name"]]
|
|
13941
|
+
"$attrsToReflect$": [["name", "name"], ["truncate", "truncate"]]
|
|
13845
13942
|
}; }
|
|
13846
13943
|
}
|
|
13847
13944
|
|
|
@@ -13874,7 +13971,7 @@ class PdsContainer {
|
|
|
13874
13971
|
hostStyle['--pine-container-max-width'] = customSize;
|
|
13875
13972
|
if (!this.centered)
|
|
13876
13973
|
hostStyle['margin-inline'] = '0';
|
|
13877
|
-
return (hAsync(Host, { key: '
|
|
13974
|
+
return (hAsync(Host, { key: '8a01369c4d1817dd083b1ac714ff7c02920f817e', class: { [`pds-container--${this.size}`]: isNamed }, style: Object.keys(hostStyle).length ? hostStyle : undefined }, hAsync(Tag, { key: '7428cb0040896dc11004065cf91ae9d3c3a99c49', part: "container" }, hAsync("slot", { key: '5a5b5bbc87c03afc23f1c9a0523fced8c0795efb' }))));
|
|
13878
13975
|
}
|
|
13879
13976
|
static get style() { return pdsContainerCss(); }
|
|
13880
13977
|
static get cmpMeta() { return {
|
|
@@ -13999,7 +14096,7 @@ class PdsCopytext {
|
|
|
13999
14096
|
render() {
|
|
14000
14097
|
const hostClass = this.classNames();
|
|
14001
14098
|
this.hostKeeper.record(hostClass);
|
|
14002
|
-
return (hAsync(Host, { key: '
|
|
14099
|
+
return (hAsync(Host, { key: '35d74eaecedd432f7852545522f9ce72396f9ab9', class: hostClass, id: this.componentId }, hAsync("pds-button", { key: '9550ce2fb21166e9726b08b5928036244c7b729e', type: "button", variant: "unstyled", onClick: this.handleClick }, hAsync("span", { key: '47af45448759c911ca4ca03d0158088289b622e0', ref: (el) => this.valueSpanEl = el }, this.value), hAsync("pds-icon", { key: '3ddab7c3e7063843cd606ffb19481cae3792db43', "aria-hidden": "true", icon: copy, size: "16px" }))));
|
|
14003
14100
|
}
|
|
14004
14101
|
get el() { return getElement(this); }
|
|
14005
14102
|
static get watchers() { return {
|
|
@@ -16001,14 +16098,14 @@ class PdsDatepicker {
|
|
|
16001
16098
|
}
|
|
16002
16099
|
render() {
|
|
16003
16100
|
const locale = this.resolvedLocale;
|
|
16004
|
-
return (hAsync(Host, { key: '
|
|
16101
|
+
return (hAsync(Host, { key: 'a761f0ca6eeedcac3e4bd90760aa9781cd37dcdc', class: { 'pds-datepicker--range': this.range, 'pds-datepicker--time': this.timePicker }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, hAsync("pds-input", { key: '2eb04f9fd4e2f7a2437145d250c629c2cc8a0bf6', ref: (el) => (this.inputEl = el), componentId: this.baseId, label: this.label, hideLabel: this.hideLabel, helperMessage: this.helperMessage, errorMessage: this.errorMessage, invalid: this.invalid || !!this.textError || !!this.valueError(), disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.fieldPlaceholder, fullWidth: this.fullWidth, autocomplete: "off", value: this.text, onClick: this.onFieldClick, onPdsInput: this.onTextInput, onPdsChange: this.onTextChange, onPdsKeyDown: this.onTextKeyDown, onPdsFocus: this.stopInnerEvent, onPdsBlur: this.stopInnerEvent }, this.clearable && !!this.value && this.isInteractive && (hAsync("button", {
|
|
16005
16102
|
// Keyed, as is the calendar button: when Clear appears after a pick, the focused
|
|
16006
16103
|
// calendar button must stay that button rather than be reused as Clear.
|
|
16007
16104
|
key: "clear", slot: "suffix", type: "button", class: "pds-datepicker__clear", ref: (el) => (this.clearEl = el), "aria-label": this.label ? `${this.clearLabel} ${this.label}` : this.clearLabel,
|
|
16008
16105
|
// Out of the tab order, as a native search field's clear button is: Tab from a field
|
|
16009
16106
|
// just emptied would land on it as the change removes it, dropping focus to the page.
|
|
16010
16107
|
tabindex: "-1", onMouseDown: this.onClearMouseDown, onClick: this.onClearClick
|
|
16011
|
-
}, hAsync("pds-icon", { key: '
|
|
16108
|
+
}, hAsync("pds-icon", { key: '98c325fbba8ea78b2d409bc77099db3206738508', icon: remove, "aria-hidden": "true" }))), hAsync("button", { key: "trigger", slot: "suffix", type: "button", class: "pds-datepicker__trigger", ref: (el) => (this.triggerEl = el), "aria-label": this.triggerAccessibleName(locale), "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', disabled: !this.isInteractive, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, hAsync("pds-icon", { key: 'cb8483febe1b485058b7bb4271b749981a7747a1', icon: calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
|
|
16012
16109
|
}
|
|
16013
16110
|
static get formAssociated() { return true; }
|
|
16014
16111
|
get el() { return getElement(this); }
|
|
@@ -16150,7 +16247,7 @@ class PdsDivider {
|
|
|
16150
16247
|
return classNames.join(' ');
|
|
16151
16248
|
}
|
|
16152
16249
|
render() {
|
|
16153
|
-
return (hAsync(Host, { key: '
|
|
16250
|
+
return (hAsync(Host, { key: '072cc8552bd33c4a00d216f15a5a848cfc97fd92', id: this.componentId }, this.hasLabel ? (hAsync("div", { class: this.classNames(), role: "separator", "aria-label": this.label }, hAsync("span", { class: "pds-divider__label", part: "label", "aria-hidden": "true" }, this.label))) : (hAsync("hr", { class: this.classNames() }))));
|
|
16154
16251
|
}
|
|
16155
16252
|
static get style() { return pdsDividerCss(); }
|
|
16156
16253
|
static get cmpMeta() { return {
|
|
@@ -16346,11 +16443,11 @@ class PdsDrawer {
|
|
|
16346
16443
|
this.open = false;
|
|
16347
16444
|
}
|
|
16348
16445
|
render() {
|
|
16349
|
-
return (hAsync(Host, { key: '
|
|
16446
|
+
return (hAsync(Host, { key: '7cf13256457914e48e8fde422832a2a52ee0c13b', class: {
|
|
16350
16447
|
'pds-drawer': true,
|
|
16351
16448
|
[`pds-drawer--${this.side}`]: true,
|
|
16352
16449
|
[`pds-drawer--${this.size}`]: true,
|
|
16353
|
-
} }, hAsync("pds-modal", { key: '
|
|
16450
|
+
} }, hAsync("pds-modal", { key: 'd4ceb5b4c0b03930aa3d001ae1bbbfbf449bde33', class: { 'pds-drawer__modal': true, 'pds-drawer__modal--modal': this.modal }, ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: !this.modal, backdropDismiss: this.lightDismiss, disableInitialFocus: !this.modal && this.initialFocus === 'none' }, hAsync("slot", { key: '41bfdea76282b333ca6950048999cb9d94e69438' }))));
|
|
16354
16451
|
}
|
|
16355
16452
|
get el() { return getElement(this); }
|
|
16356
16453
|
static get style() { return pdsDrawerCss(); }
|
|
@@ -16391,7 +16488,7 @@ class PdsDrawerContent {
|
|
|
16391
16488
|
unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
|
|
16392
16489
|
}
|
|
16393
16490
|
render() {
|
|
16394
|
-
return (hAsync("div", { key: '
|
|
16491
|
+
return (hAsync("div", { key: 'b15b087506c1292f9d67e531e8d935069749c09d', class: "pds-drawer-content" }, hAsync("slot", { key: '9c60ca75c7905e7e994f9c41eee213b962afb833' })));
|
|
16395
16492
|
}
|
|
16396
16493
|
get el() { return getElement(this); }
|
|
16397
16494
|
static get style() { return pdsDrawerContentCss(); }
|
|
@@ -16419,7 +16516,7 @@ class PdsDrawerFooter {
|
|
|
16419
16516
|
unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
|
|
16420
16517
|
}
|
|
16421
16518
|
render() {
|
|
16422
|
-
return (hAsync("footer", { key: '
|
|
16519
|
+
return (hAsync("footer", { key: 'a4eec0aff617c605b94f8d3b9ec1e2d98cded6fb', class: "pds-drawer__footer" }, hAsync("slot", { key: '6dc379c940e37edfd05d99728be9dff58ca1d717' })));
|
|
16423
16520
|
}
|
|
16424
16521
|
get el() { return getElement(this); }
|
|
16425
16522
|
static get style() { return pdsDrawerFooterCss(); }
|
|
@@ -16447,7 +16544,7 @@ class PdsDrawerHeader {
|
|
|
16447
16544
|
unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
|
|
16448
16545
|
}
|
|
16449
16546
|
render() {
|
|
16450
|
-
return (hAsync("header", { key: '
|
|
16547
|
+
return (hAsync("header", { key: '6b9338e5dbf7a7e580c11b28c95ca53693528382', class: "pds-drawer__header" }, hAsync("slot", { key: '0990fbcf94c0c438b98cf1e8945f1e2fd9aa33dc' })));
|
|
16451
16548
|
}
|
|
16452
16549
|
get el() { return getElement(this); }
|
|
16453
16550
|
static get style() { return pdsDrawerHeaderCss(); }
|
|
@@ -16819,7 +16916,7 @@ class PdsDropdownMenu {
|
|
|
16819
16916
|
}
|
|
16820
16917
|
}
|
|
16821
16918
|
render() {
|
|
16822
|
-
return (hAsync(Host, { key: '
|
|
16919
|
+
return (hAsync(Host, { key: '0ed3d8ee889a5423ca9de66a86791d084f75abf0', id: this.componentId }, hAsync("slot", { key: '6bab71652d6afe094075623d3a48641a4d89b232', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), hAsync("pds-box", { key: 'fcef0667f999ae5b8cd03eb94a0db0be7be502cb', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, hAsync("div", { key: 'c78d5bd7e48c5483b12171341271f9132f4b2ff9', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, hAsync("slot", { key: '6464994260720d6046da548f4aad0896965cc47c', name: "header", onSlotchange: this.handleHeaderSlotChange })), hAsync("div", { key: '3e97dfc4e1911f91ce8917faf981d436e71e5c24', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, hAsync("slot", { key: 'dfd77a8b73df5ce9eef3e661d3f9501cb8bfdba2', onSlotchange: this.handleSlotChange })))));
|
|
16823
16920
|
}
|
|
16824
16921
|
get host() { return getElement(this); }
|
|
16825
16922
|
static get style() { return pdsDropdownMenuCss(); }
|
|
@@ -16926,7 +17023,7 @@ class PdsDropdownMenuItem {
|
|
|
16926
17023
|
}, role: "menuitem", "aria-disabled": "true", part: "button", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleInformationalKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("slot", null)));
|
|
16927
17024
|
}
|
|
16928
17025
|
if (this.href != null) {
|
|
16929
|
-
return (hAsync("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, target: this.target, class: {
|
|
17026
|
+
return (hAsync("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, externalLabel: this.externalLabel, target: this.target, class: {
|
|
16930
17027
|
'pds-dropdown-menu-item__content': true,
|
|
16931
17028
|
'has-focus': this.hasFocus
|
|
16932
17029
|
}, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-disabled": this.disabled ? 'true' : null }, hAsync("slot", null)));
|
|
@@ -16937,7 +17034,7 @@ class PdsDropdownMenuItem {
|
|
|
16937
17034
|
}, tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, hAsync("slot", null)));
|
|
16938
17035
|
}
|
|
16939
17036
|
render() {
|
|
16940
|
-
return (hAsync(Host, { key: '
|
|
17037
|
+
return (hAsync(Host, { key: 'a69947d99160783919f711d7c53e0592694f9565', id: this.componentId, class: {
|
|
16941
17038
|
'is-disabled': this.disabled,
|
|
16942
17039
|
'is-informational': this.informational,
|
|
16943
17040
|
'destructive': !this.disabled && !this.informational && this.destructive
|
|
@@ -16959,6 +17056,7 @@ class PdsDropdownMenuItem {
|
|
|
16959
17056
|
"href": [1],
|
|
16960
17057
|
"informational": [516],
|
|
16961
17058
|
"external": [516],
|
|
17059
|
+
"externalLabel": [1, "external-label"],
|
|
16962
17060
|
"target": [513],
|
|
16963
17061
|
"hasFocus": [32],
|
|
16964
17062
|
"clickItem": [64]
|
|
@@ -16981,7 +17079,7 @@ class PdsDropdownMenuSeparator {
|
|
|
16981
17079
|
this.disabled = false;
|
|
16982
17080
|
}
|
|
16983
17081
|
render() {
|
|
16984
|
-
return (hAsync(Host, { key: '
|
|
17082
|
+
return (hAsync(Host, { key: '72f29c5015d2379d9986c90ec966f34f41298226', id: this.componentId }, hAsync("hr", { key: '72c2155d0fbee6346f3f38997009a7d9e14ad0c8' })));
|
|
16985
17083
|
}
|
|
16986
17084
|
static get style() { return pdsDropdownMenuSeparatorCss(); }
|
|
16987
17085
|
static get cmpMeta() { return {
|
|
@@ -17561,7 +17659,7 @@ class PdsFilter {
|
|
|
17561
17659
|
return null;
|
|
17562
17660
|
}
|
|
17563
17661
|
render() {
|
|
17564
|
-
return (hAsync(Host, { key: '
|
|
17662
|
+
return (hAsync(Host, { key: '9b2286e9a0d7f88b7f6bc90f8444185cfec832c8', id: this.componentId }, hAsync("button", { key: '968953600d615f2739757a91422dafdb817c9a6f', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, hAsync("span", { key: 'ee479f7e510ffcb54f7857cb7d1345f2a5c1d76a', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (hAsync("span", { key: 'e98aa8b915a2460f3c7d49e20ec7d43853ee5f9f', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (hAsync("div", { key: '3084babfba2d96880b2829a60d2ef00140a6813b', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, hAsync("slot", { key: 'e901488be75a18bedc6b2c42be5c398fd2cf2a29' })))));
|
|
17565
17663
|
}
|
|
17566
17664
|
get el() { return getElement(this); }
|
|
17567
17665
|
static get style() { return pdsFilterCss(); }
|
|
@@ -17593,7 +17691,7 @@ class PdsFilters {
|
|
|
17593
17691
|
registerInstance(this, hostRef);
|
|
17594
17692
|
}
|
|
17595
17693
|
render() {
|
|
17596
|
-
return (hAsync(Host, { key: '
|
|
17694
|
+
return (hAsync(Host, { key: '6f785fc222e3b5b7cf932f704b56aa7f1f52ead3', id: this.componentId }, hAsync("div", { key: '0ffd2894cdeb1e632228b4c3fa523069dcffa4b2', class: "pds-filters" }, hAsync("slot", { key: 'a3f42dedcda1b0fec78a33793d085791d9b9fc5c' }))));
|
|
17597
17695
|
}
|
|
17598
17696
|
static get style() { return pdsFiltersCss(); }
|
|
17599
17697
|
static get cmpMeta() { return {
|
|
@@ -18089,9 +18187,9 @@ class PdsImage {
|
|
|
18089
18187
|
this.loading = 'eager';
|
|
18090
18188
|
}
|
|
18091
18189
|
render() {
|
|
18092
|
-
return (hAsync(Host, { key: '
|
|
18190
|
+
return (hAsync(Host, { key: '6d2d48c468c39f53d67e63999dd83f3ad61053b5', class: {
|
|
18093
18191
|
'pds-image': true,
|
|
18094
|
-
}, id: this.componentId }, hAsync("img", { key: '
|
|
18192
|
+
}, id: this.componentId }, hAsync("img", { key: '393cc584586e37e8d5b602fbdcda1783bf80cf9b', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
|
|
18095
18193
|
}
|
|
18096
18194
|
static get style() { return pdsImageCss(); }
|
|
18097
18195
|
static get cmpMeta() { return {
|
|
@@ -18411,10 +18509,10 @@ class PdsInput {
|
|
|
18411
18509
|
'has-prepend': this.hasPrepend,
|
|
18412
18510
|
'has-append': this.hasAppend,
|
|
18413
18511
|
};
|
|
18414
|
-
return (hAsync(Host, { key: '
|
|
18512
|
+
return (hAsync(Host, { key: '1706e29a68d25a8bb83c36d6bddace04a448f6f5', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, hAsync("div", { key: '1488b6ea995c4ffc4068757f566494c0ac073950', class: "pds-input" }, label && (hAsync("div", { key: 'e2fe4e461e626648ec51882e92e02fea179e3e13', class: {
|
|
18415
18513
|
'pds-input__label-wrapper': true,
|
|
18416
18514
|
'visually-hidden': this.hideLabel,
|
|
18417
|
-
} }, hAsync("label", { key: '
|
|
18515
|
+
} }, hAsync("label", { key: 'c926a6fbb3130afdc6c86d509b92fb6650391c4b', htmlFor: componentId, class: "pds-input__label" }, hAsync("span", { key: 'dbbaf9d0db49f949f69f1faf848e7c6193e32793' }, label, this.required && hAsync("span", { key: '42e6325a0f5ee276ed92cf2eb71942c268c3d1aa', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), hAsync("div", { key: '4715743733f2d7d3e4edf9ac4ab6d69ffde04d00', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), hAsync("input", Object.assign({ key: '438ac0fc6d497a8227c83e628d29d4633ffc208a', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (hAsync("p", { key: '43b5c3a332072f19a38be316565602932c61504d', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (hAsync("p", { key: '54fd4fc2dcbc645377edbe4d04cfd82c7d1591e8', class: "pds-input__error-message", id: messageId(componentId, 'error') }, hAsync("pds-icon", { key: '2bd509a575ec5c7a548955dd7f706d7c1d42557e', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
|
|
18418
18516
|
}
|
|
18419
18517
|
static get formAssociated() { return true; }
|
|
18420
18518
|
get el() { return getElement(this); }
|
|
@@ -18470,6 +18568,8 @@ class PdsInput {
|
|
|
18470
18568
|
|
|
18471
18569
|
const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color, var(--pds-context-link-color, var(--pine-color-text)));display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick);position:relative}.pds-link:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:none}:host([color=secondary]) .pds-link{color:var(--pine-color-text-primary)}:host([color=secondary]) .pds-link:hover{color:var(--pine-color-text-inverse-secondary)}:host([color=accent]) .pds-link{color:var(--pine-color-accent)}:host([color=accent]) .pds-link:hover{color:var(--pine-color-accent-hover)}:host([color=danger]) .pds-link{color:var(--pine-color-danger)}:host([color=danger]) .pds-link:hover{color:var(--pine-color-danger-hover)}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:underline}:host([active]) .pds-link{color:var(--pds-context-link-color, var(--pine-color-text-strong));text-decoration:underline}:host([active]) .pds-link:hover{color:var(--pds-context-link-color-hover, var(--pine-color-text-strong));text-decoration:underline}`;
|
|
18472
18570
|
|
|
18571
|
+
// Used when `externalLabel` is unset; an empty string hides the icon instead.
|
|
18572
|
+
const DEFAULT_EXTERNAL_LABEL = '(opens in a new tab)';
|
|
18473
18573
|
/**
|
|
18474
18574
|
* @part link - Link element styles.
|
|
18475
18575
|
* @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.
|
|
@@ -18523,11 +18623,18 @@ class PdsLink {
|
|
|
18523
18623
|
return linkStyles;
|
|
18524
18624
|
}
|
|
18525
18625
|
render() {
|
|
18626
|
+
var _a;
|
|
18526
18627
|
const targetValue = this.target || (this.external ? '_blank' : undefined);
|
|
18527
18628
|
const showExternalIcon = this.external;
|
|
18528
|
-
const
|
|
18529
|
-
|
|
18530
|
-
|
|
18629
|
+
const opensInNewTab = targetValue === '_blank';
|
|
18630
|
+
const relValue = opensInNewTab ? 'noopener noreferrer' : undefined;
|
|
18631
|
+
// A `target` other than _blank overrides `external`, and then the label
|
|
18632
|
+
// would be false, so the icon is decorative there, as it is when the
|
|
18633
|
+
// label is empty.
|
|
18634
|
+
const externalLabel = (_a = this.externalLabel) !== null && _a !== void 0 ? _a : DEFAULT_EXTERNAL_LABEL;
|
|
18635
|
+
const externalIconLabel = opensInNewTab && externalLabel !== '' ? externalLabel : undefined;
|
|
18636
|
+
return (hAsync("a", { key: 'ae7928aa6dce42657545a1d17581818d3724746f', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, hAsync("slot", { key: 'e61374c58fddec869f2f5dda54634a0b1ba9f345' }, this.href), showExternalIcon &&
|
|
18637
|
+
hAsync("pds-icon", { key: '161657146e5f3ce360480c573ea8f14c9012cb1f', icon: launch, size: this.fontSize, "aria-label": externalIconLabel, "aria-hidden": externalIconLabel === undefined ? 'true' : undefined })));
|
|
18531
18638
|
}
|
|
18532
18639
|
static get style() { return pdsLinkCss(); }
|
|
18533
18640
|
static get cmpMeta() { return {
|
|
@@ -18539,6 +18646,7 @@ class PdsLink {
|
|
|
18539
18646
|
"download": [1],
|
|
18540
18647
|
"componentId": [1, "component-id"],
|
|
18541
18648
|
"external": [4],
|
|
18649
|
+
"externalLabel": [1, "external-label"],
|
|
18542
18650
|
"target": [1],
|
|
18543
18651
|
"variant": [1],
|
|
18544
18652
|
"fontSize": [1, "font-size"],
|
|
@@ -18626,7 +18734,7 @@ class PdsLoader {
|
|
|
18626
18734
|
'aria-live': 'polite',
|
|
18627
18735
|
};
|
|
18628
18736
|
this.hostKeeper.record(hostClass, {}, hostAttributes);
|
|
18629
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
18737
|
+
return (hAsync(Host, Object.assign({ key: 'eaf8a64d5c2e37349ed2d2426a6c6bf1df68005f', class: hostClass }, hostAttributes), this.variant === 'spinner' && (hAsync("div", { key: '216143117aabd29ca52c56cd7951a27f9742e466', class: "pds-loader--spinner" }, hAsync("svg", { key: '9c9db37e883fb3a4ba5e0c7c173a5d7a76cdadda', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, hAsync("defs", { key: '8f65f537290ea2dd96b66343324851d243fec3dd' }, hAsync("linearGradient", { key: '8b1a53bcc9401b98dafa805cae8e417af7646bfd', id: "spinner-secondHalf" }, hAsync("stop", { key: 'f06605f7180e9c07d5eb4c9dbadcdb87cee0dd70', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), hAsync("stop", { key: '0bf492e4d5578bd0d98a2f7570a1dd21ca2ecf3d', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), hAsync("linearGradient", { key: '6c7038c158d786866a408063b07b236bf17cefc1', id: "spinner-firstHalf" }, hAsync("stop", { key: '916502c73bc4b78368bb210aed318537841917b9', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), hAsync("stop", { key: '2d20708106bb3a685fbaf4bdcf099684a36359c0', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), hAsync("g", { key: '93165f80e7d5155b3dc8f2fc62e326bec7604c57', class: "pds-loader__spinner-path" }, hAsync("path", { key: '4b1e39a899aadf9d4b4cbf954c783c1103c43c24', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), hAsync("path", { key: '0aa1683dc97e2a01cc076a52a4883388c1d09c6f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), hAsync("path", { key: '9839fb9e0b473814d3b10eb27f7be87990b6c088', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (hAsync("div", { key: 'd83e4625ea2d41a545a98e08edb3033b83e7eb5b', class: "pds-loader--typing" }, hAsync("span", { key: '2e793f3f5b17cb7709c8fc89e2054d7cd77fafd4' }), hAsync("span", { key: 'c266ad3b8edf6c1cc392c544027f7cfd543b711c' }), hAsync("span", { key: '061f9e3030cce603e50e8d86d3aa5036800c1324' }))), hAsync("div", { key: '747c1c6c28136cfb9ba9dac0d4944bc6281af075', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, hAsync("slot", { key: '5eb5a5710deafa10bd269429edff0ac677546cf5', name: "label" }, "Loading..."))));
|
|
18630
18738
|
}
|
|
18631
18739
|
get el() { return getElement(this); }
|
|
18632
18740
|
static get watchers() { return {
|
|
@@ -18650,12 +18758,6 @@ class PdsLoader {
|
|
|
18650
18758
|
}; }
|
|
18651
18759
|
}
|
|
18652
18760
|
|
|
18653
|
-
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}`;
|
|
18654
|
-
|
|
18655
|
-
const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
|
|
18656
|
-
const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
|
|
18657
|
-
/\d/.test(value) &&
|
|
18658
|
-
(typeof CSS === 'undefined' || CSS.supports('max-width', value));
|
|
18659
18761
|
const TABBABLE = [
|
|
18660
18762
|
'a[href]',
|
|
18661
18763
|
'area[href]',
|
|
@@ -18737,6 +18839,13 @@ function tabbableIn(root) {
|
|
|
18737
18839
|
});
|
|
18738
18840
|
return oneRadioPerGroup(visible);
|
|
18739
18841
|
}
|
|
18842
|
+
|
|
18843
|
+
const pdsModalCss = () => `.pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop[aria-modal=false]{overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop[aria-modal=false]{-webkit-backdrop-filter:none;backdrop-filter:none}.pds-modal__backdrop[aria-modal=false]::before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);content:"";inset:0;position:fixed;z-index:-1}}.pds-modal__backdrop.open{opacity:1;-webkit-transition-timing-function:var(--pine-motion-easing-out);transition-timing-function:var(--pine-motion-easing-out);visibility:visible}.pds-modal{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--custom{max-width:var(--pds-modal-max-width, 700px)}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}`;
|
|
18844
|
+
|
|
18845
|
+
const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
|
|
18846
|
+
const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
|
|
18847
|
+
/\d/.test(value) &&
|
|
18848
|
+
(typeof CSS === 'undefined' || CSS.supports('max-width', value));
|
|
18740
18849
|
/** Whether `node` is `ancestor` or inside it, crossing shadow roots, which `Node.contains` doesn't. */
|
|
18741
18850
|
function containsComposed(ancestor, node) {
|
|
18742
18851
|
for (let current = node; current; current = current instanceof ShadowRoot ? current.host : current.parentNode) {
|
|
@@ -19299,14 +19408,14 @@ class PdsModal {
|
|
|
19299
19408
|
}
|
|
19300
19409
|
render() {
|
|
19301
19410
|
const [sizeClass = 'md', customSize] = this.resolveSize();
|
|
19302
|
-
return (hAsync("dialog", { key: '
|
|
19411
|
+
return (hAsync("dialog", { key: 'cd574868a46b69185e2058c60374dbec34677732', class: {
|
|
19303
19412
|
'pds-modal__backdrop': true,
|
|
19304
19413
|
'open': this.open
|
|
19305
|
-
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: '
|
|
19414
|
+
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: '8c50fb4810b4bb07d62348fed44df30b14a52acd', class: {
|
|
19306
19415
|
'pds-modal': true,
|
|
19307
19416
|
[`pds-modal--${sizeClass}`]: true,
|
|
19308
19417
|
'pds-modal--scrollable': this.scrollable
|
|
19309
|
-
}, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '
|
|
19418
|
+
}, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '25a71c95dfeff4648a28edef21bf510b1743ed7c' }))));
|
|
19310
19419
|
}
|
|
19311
19420
|
get el() { return getElement(this); }
|
|
19312
19421
|
static get watchers() { return {
|
|
@@ -19525,10 +19634,10 @@ class PdsModalContent {
|
|
|
19525
19634
|
render() {
|
|
19526
19635
|
// Only apply max-height style if it's not 'none'
|
|
19527
19636
|
const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
|
|
19528
|
-
return (hAsync(Host, { key: '
|
|
19637
|
+
return (hAsync(Host, { key: 'b4200778f186c45a1917646ba2e0e4e623959951' }, hAsync("div", { key: '39eaaf228e5441f5c0fd628c47be079fb4e07e0f', class: {
|
|
19529
19638
|
'pds-modal-content': true,
|
|
19530
19639
|
[`pds-modal-content--border-${this.border}`]: true
|
|
19531
|
-
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '
|
|
19640
|
+
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: 'ac31a9b81941b8b3abbac3a67c25bacaa54e6840' }))));
|
|
19532
19641
|
}
|
|
19533
19642
|
get el() { return getElement(this); }
|
|
19534
19643
|
static get style() { return pdsModalContentCss(); }
|
|
@@ -19559,7 +19668,7 @@ class PdsModalFooter {
|
|
|
19559
19668
|
unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
|
|
19560
19669
|
}
|
|
19561
19670
|
render() {
|
|
19562
|
-
return (hAsync("footer", { key: '
|
|
19671
|
+
return (hAsync("footer", { key: 'c0d50408471355d80759112e63f58c8a34fb7906', class: "pds-modal__footer" }, hAsync("slot", { key: '6566d446457be8b57e37bf1542a5863b0018d233' })));
|
|
19563
19672
|
}
|
|
19564
19673
|
get el() { return getElement(this); }
|
|
19565
19674
|
static get style() { return pdsModalFooterCss(); }
|
|
@@ -19587,7 +19696,7 @@ class PdsModalHeader {
|
|
|
19587
19696
|
unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
|
|
19588
19697
|
}
|
|
19589
19698
|
render() {
|
|
19590
|
-
return (hAsync("header", { key: '
|
|
19699
|
+
return (hAsync("header", { key: 'eb295ff36fd23b7965296b6dfcfcf783a32079a0', class: "pds-modal__header" }, hAsync("slot", { key: '9c97566ff79f8d9b233d814395d5a7e893751a06' })));
|
|
19591
19700
|
}
|
|
19592
19701
|
get el() { return getElement(this); }
|
|
19593
19702
|
static get style() { return pdsModalHeaderCss(); }
|
|
@@ -20866,10 +20975,10 @@ class PdsMultiselect {
|
|
|
20866
20975
|
}
|
|
20867
20976
|
render() {
|
|
20868
20977
|
const hasSelections = this.selectedItems.length > 0;
|
|
20869
|
-
return (hAsync(Host, { key: '
|
|
20978
|
+
return (hAsync(Host, { key: 'a92086af75e20b9b37b147365bfa517d96021700', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: 'd49e0442e3a348248e5ac3b37afc9f128b34956b', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: '41a081803dfd784e20a7135ecf5f5c4657908dd1', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
|
|
20870
20979
|
'pds-multiselect__label': true,
|
|
20871
20980
|
'visually-hidden': this.hideLabel,
|
|
20872
|
-
} }, this.label)), hAsync("div", { key: '
|
|
20981
|
+
} }, this.label)), hAsync("div", { key: '0e3c8a3aaf7c70b4ff71972c29b8d5599f62ec97', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (hAsync("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
|
|
20873
20982
|
'pds-multiselect__trigger': true,
|
|
20874
20983
|
'pds-multiselect__trigger--open': this.isOpen,
|
|
20875
20984
|
'pds-multiselect__trigger--disabled': this.disabled,
|
|
@@ -20885,7 +20994,7 @@ class PdsMultiselect {
|
|
|
20885
20994
|
}, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hAsync("span", { class: {
|
|
20886
20995
|
'pds-multiselect__trigger-text': true,
|
|
20887
20996
|
'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
|
|
20888
|
-
} }, this.getTriggerText()), hAsync("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '
|
|
20997
|
+
} }, this.getTriggerText()), hAsync("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: 'd5cddc1d3374d94ecf0cce1bcaf7c7125bf3128d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: 'e3cb958b6fd2b1e138b769de0f53be1b8564902d', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: 'f6c2a30cc192391973d9b22fbb6732ce387832ac', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'f437effafaa383b81aec7b5bf635598c8b0075b8', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: 'f1e747137f2dc7cad3d4e1ff8fc293401e3173e1', style: { display: 'none' } }, hAsync("slot", { key: 'f337137b3ca5983dc6641361101f6d19c972778c' })))));
|
|
20889
20998
|
}
|
|
20890
20999
|
static get formAssociated() { return true; }
|
|
20891
21000
|
get el() { return getElement(this); }
|
|
@@ -21023,7 +21132,7 @@ const cssEscape = (value) => {
|
|
|
21023
21132
|
return result;
|
|
21024
21133
|
};
|
|
21025
21134
|
|
|
21026
|
-
const pdsPopoverCss = () => `:host{--sizing-max-width-default:352px;display:inline-block}:host .pds-popover__trigger-wrapper{display:inline-block}:host .pds-popover__content-slot-wrapper{display:none}`;
|
|
21135
|
+
const pdsPopoverCss = () => `:host{--sizing-max-width-default:352px;display:inline-block}:host .pds-popover__trigger-wrapper{display:inline-block}:host .pds-popover__tab-guard{opacity:0;outline:none;pointer-events:none;position:fixed}:host .pds-popover__content-slot-wrapper{display:none}`;
|
|
21027
21136
|
|
|
21028
21137
|
/** Open popovers that close on Escape, in the order they opened: Escape goes to the last one it applies to. */
|
|
21029
21138
|
const popoversTakingEscape = [];
|
|
@@ -21031,6 +21140,24 @@ const popoversTakingEscape = [];
|
|
|
21031
21140
|
const HOVER_OPEN_DELAY_MS = 120;
|
|
21032
21141
|
/** Leaving the trigger and panel waits this long before closing, which covers the gap between them. */
|
|
21033
21142
|
const HOVER_CLOSE_DELAY_MS = 200;
|
|
21143
|
+
/**
|
|
21144
|
+
* floating-ui reporting viewport coordinates, as `position: fixed` uses without a containing block. Its own
|
|
21145
|
+
* containing-block check misses a backdrop filter in WebKit, so handlePopoverPositioning corrects for one itself.
|
|
21146
|
+
*/
|
|
21147
|
+
const viewportPlatform = Object.assign(Object.assign({}, platform), { getOffsetParent: () => window });
|
|
21148
|
+
/**
|
|
21149
|
+
* Where `top: 0; left: 0` puts a fixed element beside the given one. An empty probe is measured instead of the
|
|
21150
|
+
* element, whose own transforms, such as an entrance animation, would otherwise read as part of the offset.
|
|
21151
|
+
*/
|
|
21152
|
+
const containingBlockOrigin = (element) => {
|
|
21153
|
+
var _a;
|
|
21154
|
+
const probe = document.createElement('div');
|
|
21155
|
+
probe.style.cssText = 'all: initial; position: fixed; top: 0; left: 0;';
|
|
21156
|
+
(_a = element.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(probe, element);
|
|
21157
|
+
const { top, left } = probe.getBoundingClientRect();
|
|
21158
|
+
probe.remove();
|
|
21159
|
+
return { top, left };
|
|
21160
|
+
};
|
|
21034
21161
|
/** The focused element, followed down through shadow roots to the control that has focus. */
|
|
21035
21162
|
function deepActiveElement() {
|
|
21036
21163
|
var _a;
|
|
@@ -21039,6 +21166,27 @@ function deepActiveElement() {
|
|
|
21039
21166
|
active = active.shadowRoot.activeElement;
|
|
21040
21167
|
return active;
|
|
21041
21168
|
}
|
|
21169
|
+
/** `node`, or the shadow host it sits in, lifted until it shares a tree with `other` or reaches the document. */
|
|
21170
|
+
function liftToTreeOf(node, other) {
|
|
21171
|
+
let current = node;
|
|
21172
|
+
while (current.getRootNode() !== other.getRootNode() && current.getRootNode() instanceof ShadowRoot) {
|
|
21173
|
+
current = current.getRootNode().host;
|
|
21174
|
+
}
|
|
21175
|
+
return current;
|
|
21176
|
+
}
|
|
21177
|
+
/**
|
|
21178
|
+
* Where `node` sits relative to `ref`, as `compareDocumentPosition` reports it. Whichever of the two
|
|
21179
|
+
* is inside a shadow root is lifted to its host first, so a control inside a component compares too.
|
|
21180
|
+
*/
|
|
21181
|
+
function positionAcrossTrees(ref, node) {
|
|
21182
|
+
const lifted = liftToTreeOf(node, ref);
|
|
21183
|
+
return liftToTreeOf(ref, lifted).compareDocumentPosition(lifted);
|
|
21184
|
+
}
|
|
21185
|
+
const isPosition = (position, flag) => (position & Node.DOCUMENT_POSITION_DISCONNECTED) === 0 && (position & flag) !== 0;
|
|
21186
|
+
/** The popover each panel belongs to, so a popover inside another one's panel can find it. */
|
|
21187
|
+
const panelOwners = new WeakMap();
|
|
21188
|
+
/** Floating layers Pine components put at the end of the page or of a dialog, as a popover does its panel. */
|
|
21189
|
+
const FLOATING_LAYERS = '.pds-popover, .pds-datepicker-calendar-portal, .pds-combobox-dropdown-portal';
|
|
21042
21190
|
/**
|
|
21043
21191
|
* @slot trigger - The trigger element for the popover
|
|
21044
21192
|
* @slot (default) - The content to display inside the popover
|
|
@@ -21078,14 +21226,21 @@ class PdsPopover {
|
|
|
21078
21226
|
*/
|
|
21079
21227
|
this.portalEl = null;
|
|
21080
21228
|
/**
|
|
21081
|
-
*
|
|
21229
|
+
* Stops floating-ui's autoUpdate, which repositions the open panel as its trigger or the page moves or resizes
|
|
21082
21230
|
*/
|
|
21083
|
-
this.
|
|
21231
|
+
this.stopAutoUpdate = null;
|
|
21084
21232
|
/**
|
|
21085
|
-
*
|
|
21233
|
+
* Counts positioning runs, so a run that resolves after a newer one started is dropped
|
|
21086
21234
|
*/
|
|
21087
|
-
this.
|
|
21088
|
-
|
|
21235
|
+
this.positioningRun = 0;
|
|
21236
|
+
/**
|
|
21237
|
+
* The latest positioning run, which pdsPopoverOpen waits for so the panel's side is set when it fires
|
|
21238
|
+
*/
|
|
21239
|
+
this.positioning = Promise.resolve();
|
|
21240
|
+
/**
|
|
21241
|
+
* Set while show() waits to emit pdsPopoverOpen, so a hide() in the meantime emits it first
|
|
21242
|
+
*/
|
|
21243
|
+
this.openEventPending = false;
|
|
21089
21244
|
/**
|
|
21090
21245
|
* Track moved nodes and their placeholders for restoration
|
|
21091
21246
|
*/
|
|
@@ -21106,6 +21261,18 @@ class PdsPopover {
|
|
|
21106
21261
|
* How far the pointer was from the panel at its last move after leaving the trigger
|
|
21107
21262
|
*/
|
|
21108
21263
|
this.panelDistance = Infinity;
|
|
21264
|
+
/**
|
|
21265
|
+
* Stands in for the panel in the Tab order, right after the trigger, while the popover is open
|
|
21266
|
+
*/
|
|
21267
|
+
this.tabGuardEl = null;
|
|
21268
|
+
/**
|
|
21269
|
+
* Set while focus passes through the guard on its way out of the panel
|
|
21270
|
+
*/
|
|
21271
|
+
this.leavingPanel = false;
|
|
21272
|
+
/**
|
|
21273
|
+
* The direction of the Tab key being handled, until its default action has run
|
|
21274
|
+
*/
|
|
21275
|
+
this.tabDirection = null;
|
|
21109
21276
|
/**
|
|
21110
21277
|
* Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
|
|
21111
21278
|
* @defaultValue "show"
|
|
@@ -21159,6 +21326,9 @@ class PdsPopover {
|
|
|
21159
21326
|
else {
|
|
21160
21327
|
this.triggerEl = null;
|
|
21161
21328
|
}
|
|
21329
|
+
// autoUpdate watches the trigger it started with, so an open popover starts it again on the new one.
|
|
21330
|
+
if (this.active)
|
|
21331
|
+
this.addScrollAndResizeListeners();
|
|
21162
21332
|
this.observeTrigger();
|
|
21163
21333
|
};
|
|
21164
21334
|
/**
|
|
@@ -21276,6 +21446,59 @@ class PdsPopover {
|
|
|
21276
21446
|
event.stopPropagation();
|
|
21277
21447
|
}
|
|
21278
21448
|
};
|
|
21449
|
+
// At the end of the body or of a dialog, the panel would come last in the Tab order. The guard
|
|
21450
|
+
// after the trigger takes its place there, while the panel has a control for it to lead to.
|
|
21451
|
+
this.syncTabGuard = (event) => {
|
|
21452
|
+
if (event.key !== 'Tab')
|
|
21453
|
+
return;
|
|
21454
|
+
this.releasePanel();
|
|
21455
|
+
this.tabDirection = event.shiftKey ? 'backward' : 'forward';
|
|
21456
|
+
setTimeout(this.endTabKey);
|
|
21457
|
+
// Read on each Tab, as the panel's content can arrive after it opens.
|
|
21458
|
+
const guarding = this.guardedTabbables().length > 0;
|
|
21459
|
+
if (this.tabGuardEl != null)
|
|
21460
|
+
this.tabGuardEl.tabIndex = guarding ? 0 : -1;
|
|
21461
|
+
// Inert for this key press, the panel is reached only through the guard, either way round. A
|
|
21462
|
+
// control in another floating layer, such as a nested popover's panel, may move focus back into it.
|
|
21463
|
+
const focused = deepActiveElement();
|
|
21464
|
+
if (guarding && !containsComposed$1(this.portalEl, focused) && !closest$1(FLOATING_LAYERS, focused !== null && focused !== void 0 ? focused : document)) {
|
|
21465
|
+
this.portalEl.inert = true;
|
|
21466
|
+
}
|
|
21467
|
+
};
|
|
21468
|
+
this.endTabKey = () => {
|
|
21469
|
+
this.tabDirection = null;
|
|
21470
|
+
this.releasePanel();
|
|
21471
|
+
};
|
|
21472
|
+
this.handleTabGuardFocus = (event) => {
|
|
21473
|
+
if (this.leavingPanel)
|
|
21474
|
+
return;
|
|
21475
|
+
// An inert panel's controls aren't tabbable, so the guard would find none to send focus to.
|
|
21476
|
+
this.releasePanel();
|
|
21477
|
+
const tabbables = this.guardedTabbables();
|
|
21478
|
+
// A Tab press says which end of the panel focus comes in at; without one, where it came from does.
|
|
21479
|
+
const from = event.relatedTarget;
|
|
21480
|
+
const backward = this.tabDirection != null ? this.tabDirection === 'backward' : from != null && this.isAfterPopover(from);
|
|
21481
|
+
const target = backward ? tabbables[tabbables.length - 1] : tabbables[0];
|
|
21482
|
+
// Focus can reach the guard without a Tab keydown here (from a frame, or assistive tech) after
|
|
21483
|
+
// the panel's controls are gone. The trigger is the nearest visible place for it.
|
|
21484
|
+
if (target == null)
|
|
21485
|
+
this.returnFocusToTrigger();
|
|
21486
|
+
else
|
|
21487
|
+
target.focus();
|
|
21488
|
+
};
|
|
21489
|
+
this.handleTabFromPanel = (event) => {
|
|
21490
|
+
if (event.key !== 'Tab' || event.defaultPrevented || this.tabGuardEl == null)
|
|
21491
|
+
return;
|
|
21492
|
+
const tabbables = this.guardedTabbables();
|
|
21493
|
+
const edge = event.shiftKey ? tabbables[0] : tabbables[tabbables.length - 1];
|
|
21494
|
+
if (edge == null || deepActiveElement() !== edge)
|
|
21495
|
+
return;
|
|
21496
|
+
this.leavePanel(edge, event.shiftKey);
|
|
21497
|
+
};
|
|
21498
|
+
this.releasePanel = () => {
|
|
21499
|
+
if (this.portalEl != null)
|
|
21500
|
+
this.portalEl.inert = false;
|
|
21501
|
+
};
|
|
21279
21502
|
}
|
|
21280
21503
|
openOnChanged() {
|
|
21281
21504
|
this.pin();
|
|
@@ -21311,8 +21534,6 @@ class PdsPopover {
|
|
|
21311
21534
|
// Bind event handlers for cleanup
|
|
21312
21535
|
this.boundClickOutsideHandler = this.handleClickOutside.bind(this);
|
|
21313
21536
|
this.boundEscapeKeyHandler = this.handleEscapeKey.bind(this);
|
|
21314
|
-
this.boundScrollHandler = this.handleScroll.bind(this);
|
|
21315
|
-
this.boundResizeHandler = this.handleResize.bind(this);
|
|
21316
21537
|
// Create portal element
|
|
21317
21538
|
this.createPortal();
|
|
21318
21539
|
this.hasLoaded = true;
|
|
@@ -21411,11 +21632,12 @@ class PdsPopover {
|
|
|
21411
21632
|
// is in now, if any.
|
|
21412
21633
|
if (this.active) {
|
|
21413
21634
|
this.placePortal();
|
|
21414
|
-
|
|
21635
|
+
// autoUpdate listens to the scroll containers around where the trigger was, so it starts again.
|
|
21636
|
+
this.addScrollAndResizeListeners();
|
|
21415
21637
|
}
|
|
21416
21638
|
}
|
|
21417
21639
|
disconnectedCallback() {
|
|
21418
|
-
var _a;
|
|
21640
|
+
var _a, _b;
|
|
21419
21641
|
// Moved in one operation (a DOM morph, or a framework reparenting it), the popover is
|
|
21420
21642
|
// already back in the page. Its portal is outside the popover, so it stays open, with focus
|
|
21421
21643
|
// where it was; connectedCallback moves it to follow the popover.
|
|
@@ -21430,6 +21652,7 @@ class PdsPopover {
|
|
|
21430
21652
|
this.restorePortalContent();
|
|
21431
21653
|
this.active = false;
|
|
21432
21654
|
this.linkTriggerToPortal();
|
|
21655
|
+
this.emitOpenEvent();
|
|
21433
21656
|
this.pdsPopoverClose.emit({
|
|
21434
21657
|
componentId: this.componentId,
|
|
21435
21658
|
popoverType: this.popoverType,
|
|
@@ -21446,32 +21669,20 @@ class PdsPopover {
|
|
|
21446
21669
|
this.removeLightDismissListeners();
|
|
21447
21670
|
this.removeScrollAndResizeListeners();
|
|
21448
21671
|
document.removeEventListener('submit', this.handleSubmitFromPanel, true);
|
|
21449
|
-
|
|
21450
|
-
this.
|
|
21672
|
+
document.removeEventListener('keydown', this.syncTabGuard, true);
|
|
21673
|
+
(_b = this.tabGuardEl) === null || _b === void 0 ? void 0 : _b.removeAttribute('tabindex');
|
|
21451
21674
|
this.clearHoverTimers();
|
|
21452
21675
|
this.hoverOpened = false;
|
|
21453
21676
|
// Remove portal from DOM
|
|
21454
21677
|
this.removePortal();
|
|
21455
21678
|
}
|
|
21456
|
-
/**
|
|
21457
|
-
* Clears any pending debounce timers
|
|
21458
|
-
*/
|
|
21459
|
-
clearDebounceTimers() {
|
|
21460
|
-
if (this.scrollDebounceTimer !== null) {
|
|
21461
|
-
clearTimeout(this.scrollDebounceTimer);
|
|
21462
|
-
this.scrollDebounceTimer = null;
|
|
21463
|
-
}
|
|
21464
|
-
if (this.resizeDebounceTimer !== null) {
|
|
21465
|
-
clearTimeout(this.resizeDebounceTimer);
|
|
21466
|
-
this.resizeDebounceTimer = null;
|
|
21467
|
-
}
|
|
21468
|
-
}
|
|
21469
21679
|
createPortal() {
|
|
21470
21680
|
var _a;
|
|
21471
21681
|
if (this.portalEl !== null)
|
|
21472
21682
|
return;
|
|
21473
21683
|
this.portalEl = document.createElement('div');
|
|
21474
21684
|
this.portalEl.className = 'pds-popover';
|
|
21685
|
+
panelOwners.set(this.portalEl, this);
|
|
21475
21686
|
// Apply all styles inline since portal is outside shadow DOM
|
|
21476
21687
|
this.portalEl.style.position = 'fixed';
|
|
21477
21688
|
this.portalEl.style.zIndex = 'var(--pine-z-index-raised)';
|
|
@@ -21498,6 +21709,7 @@ class PdsPopover {
|
|
|
21498
21709
|
// This is done after appending to ensure it's part of the document and can access CSS variables
|
|
21499
21710
|
this.addPortalFocusStyles();
|
|
21500
21711
|
this.listenForHover(this.portalEl);
|
|
21712
|
+
this.portalEl.addEventListener('keydown', this.handleTabFromPanel);
|
|
21501
21713
|
}
|
|
21502
21714
|
/**
|
|
21503
21715
|
* Adds Pine design system focus styles and dark mode border to the portal element
|
|
@@ -21631,15 +21843,10 @@ class PdsPopover {
|
|
|
21631
21843
|
this.portalEl.style.display = 'block';
|
|
21632
21844
|
this.portalEl.style.opacity = '1';
|
|
21633
21845
|
this.portalEl.style.visibility = 'visible';
|
|
21634
|
-
// Position the popover
|
|
21635
|
-
requestAnimationFrame(() => {
|
|
21636
|
-
if (!this.isComponentMounted)
|
|
21637
|
-
return;
|
|
21638
|
-
this.handlePopoverPositioning();
|
|
21639
|
-
});
|
|
21640
|
-
// Add scroll and resize listeners for repositioning (always)
|
|
21846
|
+
// Position the popover now, and again whenever its trigger or the page moves or resizes
|
|
21641
21847
|
this.addScrollAndResizeListeners();
|
|
21642
21848
|
document.addEventListener('submit', this.handleSubmitFromPanel, true);
|
|
21849
|
+
document.addEventListener('keydown', this.syncTabGuard, true);
|
|
21643
21850
|
// Add document listeners for light dismiss and escape key (auto type only), or for the escape
|
|
21644
21851
|
// key alone while hover holds a manual popover open
|
|
21645
21852
|
if (this.popoverType === 'auto') {
|
|
@@ -21650,7 +21857,20 @@ class PdsPopover {
|
|
|
21650
21857
|
popoversTakingEscape.push(this);
|
|
21651
21858
|
document.addEventListener('keydown', this.boundEscapeKeyHandler);
|
|
21652
21859
|
}
|
|
21653
|
-
// Emit open event
|
|
21860
|
+
// Emit open event once the panel is positioned, with the side it took already on it. A reconnect, a
|
|
21861
|
+
// trigger swap or another show() can start a newer run meanwhile, which drops this one, so wait for the latest.
|
|
21862
|
+
this.openEventPending = true;
|
|
21863
|
+
let positioning;
|
|
21864
|
+
do {
|
|
21865
|
+
positioning = this.positioning;
|
|
21866
|
+
await positioning;
|
|
21867
|
+
} while (positioning !== this.positioning);
|
|
21868
|
+
this.emitOpenEvent();
|
|
21869
|
+
}
|
|
21870
|
+
emitOpenEvent() {
|
|
21871
|
+
if (!this.openEventPending)
|
|
21872
|
+
return;
|
|
21873
|
+
this.openEventPending = false;
|
|
21654
21874
|
this.pdsPopoverOpen.emit({
|
|
21655
21875
|
componentId: this.componentId,
|
|
21656
21876
|
popoverType: this.popoverType,
|
|
@@ -21660,6 +21880,7 @@ class PdsPopover {
|
|
|
21660
21880
|
* Closes the popover programmatically
|
|
21661
21881
|
*/
|
|
21662
21882
|
async hide() {
|
|
21883
|
+
var _a;
|
|
21663
21884
|
this.clearHoverTimers();
|
|
21664
21885
|
if (!this.active || !this.portalEl)
|
|
21665
21886
|
return;
|
|
@@ -21675,6 +21896,7 @@ class PdsPopover {
|
|
|
21675
21896
|
// Hide portal. The dark-mode border set in a shadow root is worked out again on the next open.
|
|
21676
21897
|
this.portalEl.style.border = '';
|
|
21677
21898
|
this.portalEl.removeAttribute('data-pds-popover-open');
|
|
21899
|
+
this.portalEl.removeAttribute('data-pds-popover-placement');
|
|
21678
21900
|
this.portalEl.style.display = 'none';
|
|
21679
21901
|
this.portalEl.style.opacity = '0';
|
|
21680
21902
|
this.portalEl.style.visibility = 'hidden';
|
|
@@ -21688,8 +21910,11 @@ class PdsPopover {
|
|
|
21688
21910
|
this.removeLightDismissListeners();
|
|
21689
21911
|
this.removeScrollAndResizeListeners();
|
|
21690
21912
|
document.removeEventListener('submit', this.handleSubmitFromPanel, true);
|
|
21691
|
-
|
|
21692
|
-
this.
|
|
21913
|
+
document.removeEventListener('keydown', this.syncTabGuard, true);
|
|
21914
|
+
(_a = this.tabGuardEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('tabindex');
|
|
21915
|
+
this.releasePanel();
|
|
21916
|
+
// Closed before its first position resolved, it still announces the open before the close.
|
|
21917
|
+
this.emitOpenEvent();
|
|
21693
21918
|
// Emit close event
|
|
21694
21919
|
this.pdsPopoverClose.emit({
|
|
21695
21920
|
componentId: this.componentId,
|
|
@@ -21701,10 +21926,10 @@ class PdsPopover {
|
|
|
21701
21926
|
*/
|
|
21702
21927
|
async toggle() {
|
|
21703
21928
|
if (this.active) {
|
|
21704
|
-
this.hide();
|
|
21929
|
+
await this.hide();
|
|
21705
21930
|
}
|
|
21706
21931
|
else {
|
|
21707
|
-
this.show();
|
|
21932
|
+
await this.show();
|
|
21708
21933
|
}
|
|
21709
21934
|
}
|
|
21710
21935
|
/**
|
|
@@ -21788,19 +22013,62 @@ class PdsPopover {
|
|
|
21788
22013
|
document.removeEventListener('click', this.boundClickOutsideHandler, true);
|
|
21789
22014
|
document.removeEventListener('keydown', this.boundEscapeKeyHandler);
|
|
21790
22015
|
}
|
|
22016
|
+
/**
|
|
22017
|
+
* The panel's controls that Tab reaches through the guard. None when the panel sits right after
|
|
22018
|
+
* the popover, in a dialog, where it's already next in the Tab order.
|
|
22019
|
+
*/
|
|
22020
|
+
guardedTabbables() {
|
|
22021
|
+
if (this.portalEl == null || this.el.nextElementSibling === this.portalEl)
|
|
22022
|
+
return [];
|
|
22023
|
+
return tabbableIn(this.portalEl);
|
|
22024
|
+
}
|
|
22025
|
+
isAfterPopover(node) {
|
|
22026
|
+
if (containsComposed$1(this.el, node))
|
|
22027
|
+
return false;
|
|
22028
|
+
return isPosition(positionAcrossTrees(this.el, node), Node.DOCUMENT_POSITION_FOLLOWING);
|
|
22029
|
+
}
|
|
22030
|
+
/**
|
|
22031
|
+
* Moves focus to the guard without preventing the Tab, so the browser's Tab carries on from there.
|
|
22032
|
+
* Inert until then, the panel can't be where it lands.
|
|
22033
|
+
*/
|
|
22034
|
+
leavePanel(edge, backward) {
|
|
22035
|
+
var _a, _b;
|
|
22036
|
+
this.leavingPanel = true;
|
|
22037
|
+
(_a = this.tabGuardEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
22038
|
+
this.leavingPanel = false;
|
|
22039
|
+
this.portalEl.inert = true;
|
|
22040
|
+
setTimeout(() => this.finishLeavingPanel(edge));
|
|
22041
|
+
// Last in another popover's panel, the guard hands the Tab on to that popover's own guard.
|
|
22042
|
+
const outer = panelOwners.get(closest$1('.pds-popover', this.el));
|
|
22043
|
+
const outerTabbables = (_b = outer === null || outer === void 0 ? void 0 : outer.guardedTabbables()) !== null && _b !== void 0 ? _b : [];
|
|
22044
|
+
if (!backward && outerTabbables[outerTabbables.length - 1] === this.tabGuardEl)
|
|
22045
|
+
outer.leavePanel(edge, false);
|
|
22046
|
+
}
|
|
22047
|
+
// With nowhere for the browser's Tab to go, focus would stay on the invisible guard.
|
|
22048
|
+
finishLeavingPanel(edge) {
|
|
22049
|
+
var _a;
|
|
22050
|
+
this.releasePanel();
|
|
22051
|
+
if (this.active && ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === this.tabGuardEl)
|
|
22052
|
+
edge.focus();
|
|
22053
|
+
}
|
|
21791
22054
|
/**
|
|
21792
22055
|
* Adds scroll and resize listeners for repositioning
|
|
21793
22056
|
*/
|
|
21794
22057
|
addScrollAndResizeListeners() {
|
|
21795
|
-
|
|
21796
|
-
|
|
22058
|
+
this.removeScrollAndResizeListeners();
|
|
22059
|
+
if (this.triggerEl == null || this.portalEl == null)
|
|
22060
|
+
return;
|
|
22061
|
+
this.stopAutoUpdate = autoUpdate(this.triggerEl, this.portalEl, () => {
|
|
22062
|
+
this.positioning = this.handlePopoverPositioning().catch(error => console.warn('pds-popover: failed to position the panel', error));
|
|
22063
|
+
});
|
|
21797
22064
|
}
|
|
21798
22065
|
/**
|
|
21799
22066
|
* Removes scroll and resize listeners
|
|
21800
22067
|
*/
|
|
21801
22068
|
removeScrollAndResizeListeners() {
|
|
21802
|
-
|
|
21803
|
-
|
|
22069
|
+
var _a;
|
|
22070
|
+
(_a = this.stopAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
22071
|
+
this.stopAutoUpdate = null;
|
|
21804
22072
|
}
|
|
21805
22073
|
/**
|
|
21806
22074
|
* Handles clicks outside the popover for light dismiss (auto type only)
|
|
@@ -21864,122 +22132,38 @@ class PdsPopover {
|
|
|
21864
22132
|
this.hide();
|
|
21865
22133
|
}
|
|
21866
22134
|
/**
|
|
21867
|
-
*
|
|
21868
|
-
|
|
21869
|
-
handleScroll() {
|
|
21870
|
-
if (!this.active)
|
|
21871
|
-
return;
|
|
21872
|
-
if (this.scrollDebounceTimer !== null) {
|
|
21873
|
-
clearTimeout(this.scrollDebounceTimer);
|
|
21874
|
-
}
|
|
21875
|
-
this.scrollDebounceTimer = setTimeout(() => {
|
|
21876
|
-
this.handlePopoverPositioning();
|
|
21877
|
-
this.scrollDebounceTimer = null;
|
|
21878
|
-
}, 10); // 10ms debounce for smooth repositioning
|
|
21879
|
-
}
|
|
21880
|
-
/**
|
|
21881
|
-
* Handles resize events to reposition the popover (debounced for performance)
|
|
22135
|
+
* Positions the popover relative to its trigger element, flipping to the opposite side when only that side has
|
|
22136
|
+
* room and shifting to stay 8px inside the viewport. The side it takes goes on the panel's `data-pds-popover-placement`.
|
|
21882
22137
|
*/
|
|
21883
|
-
|
|
21884
|
-
|
|
21885
|
-
|
|
21886
|
-
if (this.
|
|
21887
|
-
clearTimeout(this.resizeDebounceTimer);
|
|
21888
|
-
}
|
|
21889
|
-
this.resizeDebounceTimer = setTimeout(() => {
|
|
21890
|
-
this.handlePopoverPositioning();
|
|
21891
|
-
this.resizeDebounceTimer = null;
|
|
21892
|
-
}, 100); // 100ms debounce for resize
|
|
21893
|
-
}
|
|
21894
|
-
/**
|
|
21895
|
-
* Positions the popover relative to its trigger element
|
|
21896
|
-
*/
|
|
21897
|
-
handlePopoverPositioning() {
|
|
21898
|
-
// Prevent repositioning loops
|
|
21899
|
-
if (this.isRepositioning) {
|
|
21900
|
-
return;
|
|
21901
|
-
}
|
|
21902
|
-
this.isRepositioning = true;
|
|
21903
|
-
if (this.triggerEl == null || this.portalEl == null) {
|
|
21904
|
-
this.isRepositioning = false;
|
|
22138
|
+
async handlePopoverPositioning() {
|
|
22139
|
+
// Counted before the guards, so a run still in flight is dropped even when this one can't position.
|
|
22140
|
+
const run = ++this.positioningRun;
|
|
22141
|
+
if (this.triggerEl == null || this.portalEl == null)
|
|
21905
22142
|
return;
|
|
21906
|
-
}
|
|
21907
|
-
const triggerRect = this.triggerEl.getBoundingClientRect();
|
|
21908
|
-
const popoverRect = this.portalEl.getBoundingClientRect();
|
|
21909
22143
|
// Safety check: ensure trigger has valid dimensions (is rendered and visible)
|
|
21910
|
-
|
|
21911
|
-
|
|
22144
|
+
const triggerRect = this.triggerEl.getBoundingClientRect();
|
|
22145
|
+
if (triggerRect.width === 0 || triggerRect.height === 0)
|
|
21912
22146
|
return;
|
|
21913
|
-
|
|
21914
|
-
|
|
21915
|
-
|
|
21916
|
-
|
|
21917
|
-
|
|
21918
|
-
|
|
21919
|
-
|
|
21920
|
-
|
|
21921
|
-
|
|
21922
|
-
|
|
21923
|
-
|
|
21924
|
-
|
|
21925
|
-
break;
|
|
21926
|
-
case 'top-end':
|
|
21927
|
-
top = triggerRect.top - popoverRect.height - offset;
|
|
21928
|
-
left = triggerRect.right - popoverRect.width;
|
|
21929
|
-
break;
|
|
21930
|
-
case 'right':
|
|
21931
|
-
top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
|
|
21932
|
-
left = triggerRect.right + offset;
|
|
21933
|
-
break;
|
|
21934
|
-
case 'right-start':
|
|
21935
|
-
top = triggerRect.top;
|
|
21936
|
-
left = triggerRect.right + offset;
|
|
21937
|
-
break;
|
|
21938
|
-
case 'right-end':
|
|
21939
|
-
top = triggerRect.bottom - popoverRect.height;
|
|
21940
|
-
left = triggerRect.right + offset;
|
|
21941
|
-
break;
|
|
21942
|
-
case 'bottom':
|
|
21943
|
-
top = triggerRect.bottom + offset;
|
|
21944
|
-
left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
|
|
21945
|
-
break;
|
|
21946
|
-
case 'bottom-start':
|
|
21947
|
-
top = triggerRect.bottom + offset;
|
|
21948
|
-
left = triggerRect.left;
|
|
21949
|
-
break;
|
|
21950
|
-
case 'bottom-end':
|
|
21951
|
-
top = triggerRect.bottom + offset;
|
|
21952
|
-
left = triggerRect.right - popoverRect.width;
|
|
21953
|
-
break;
|
|
21954
|
-
case 'left':
|
|
21955
|
-
top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
|
|
21956
|
-
left = triggerRect.left - popoverRect.width - offset;
|
|
21957
|
-
break;
|
|
21958
|
-
case 'left-start':
|
|
21959
|
-
top = triggerRect.top;
|
|
21960
|
-
left = triggerRect.left - popoverRect.width - offset;
|
|
21961
|
-
break;
|
|
21962
|
-
case 'left-end':
|
|
21963
|
-
top = triggerRect.bottom - popoverRect.height;
|
|
21964
|
-
left = triggerRect.left - popoverRect.width - offset;
|
|
21965
|
-
break;
|
|
21966
|
-
}
|
|
21967
|
-
this.portalEl.style.top = `${top}px`;
|
|
21968
|
-
this.portalEl.style.left = `${left}px`;
|
|
22147
|
+
const portal = this.portalEl;
|
|
22148
|
+
const { x: left, y: top, placement } = await computePosition(this.triggerEl, portal, {
|
|
22149
|
+
placement: this.placement,
|
|
22150
|
+
strategy: 'fixed',
|
|
22151
|
+
// With no room on either side, stay on the preferred side: the side that overflows less can still push
|
|
22152
|
+
// a tall panel's start above the viewport.
|
|
22153
|
+
middleware: [offset(8), flip({ fallbackStrategy: 'initialPlacement' }), shift({ padding: 8 })],
|
|
22154
|
+
platform: viewportPlatform,
|
|
22155
|
+
});
|
|
22156
|
+
if (!this.active || run !== this.positioningRun || portal !== this.portalEl)
|
|
22157
|
+
return;
|
|
22158
|
+
portal.setAttribute('data-pds-popover-placement', placement);
|
|
21969
22159
|
// `position: fixed` measures from the viewport unless an ancestor becomes its containing block,
|
|
21970
|
-
// as a modal dialog does with its backdrop filter.
|
|
21971
|
-
const
|
|
21972
|
-
|
|
21973
|
-
|
|
21974
|
-
this.portalEl.style.left = `${2 * left - placed.left}px`;
|
|
21975
|
-
}
|
|
21976
|
-
// Reset the repositioning guard after a short delay
|
|
21977
|
-
setTimeout(() => {
|
|
21978
|
-
this.isRepositioning = false;
|
|
21979
|
-
}, 16); // ~1 frame at 60fps
|
|
22160
|
+
// as a modal dialog does with its backdrop filter. Offset by however far that block's corner is from the viewport's.
|
|
22161
|
+
const origin = containingBlockOrigin(portal);
|
|
22162
|
+
portal.style.top = `${top - origin.top}px`;
|
|
22163
|
+
portal.style.left = `${left - origin.left}px`;
|
|
21980
22164
|
}
|
|
21981
22165
|
render() {
|
|
21982
|
-
return (hAsync(Host, { key: '
|
|
22166
|
+
return (hAsync(Host, { key: '85422eb7544a4795ce78b51684b7224a5d856a4e', id: this.componentId }, hAsync("span", { key: '6fe9c827ed4d46ca723d6013f296faf80ba31366', class: "pds-popover__trigger-wrapper" }, hAsync("slot", { key: '970d1974d2be1451e670a36e7d2ccdc5979595bb', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), hAsync("span", { key: '0c76f76286a30d8e6e948bd0abab3317b3673aa6', class: "pds-popover__tab-guard", ref: (el) => (this.tabGuardEl = el !== null && el !== void 0 ? el : null), onFocus: this.handleTabGuardFocus }), hAsync("div", { key: '692c45e93899e74a3d5970f3a3625f6115ab63b0', class: "pds-popover__content-slot-wrapper" }, hAsync("slot", { key: 'f1566e0eb1eb08626f2a8285447702ce96b09f4d', onSlotchange: this.handleContentSlotChange }))));
|
|
21983
22167
|
}
|
|
21984
22168
|
get el() { return getElement(this); }
|
|
21985
22169
|
static get watchers() { return {
|
|
@@ -22052,7 +22236,7 @@ class PdsProgress {
|
|
|
22052
22236
|
const normalizedFillColor = normalizeColorValue$1(this.fillColor);
|
|
22053
22237
|
const hostClass = this.animated ? { 'is-animated': this.animated } : '';
|
|
22054
22238
|
this.hostKeeper.record(hostClass);
|
|
22055
|
-
return (hAsync(Host, { key: '
|
|
22239
|
+
return (hAsync(Host, { key: '6d2151cdd1f65b33a7478e5ac12df711d8252d1f', class: hostClass }, hAsync("div", { key: '4a902c6c7d51fe8e8a778e1fa24bdbf95d625b1f', class: "pds-progress" }, hAsync("label", { key: 'c50955234a7eee05cdf47531e25b4413f206e416', class: "pds-progress__label", htmlFor: this.componentId }, this.label), hAsync("progress", { key: 'c54ad90f7b3fcf3368afca4c5618949f1a370114', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && hAsync("div", { key: '6b3e3f42f04a516ef7992d1f8bc967be432f55bb', class: "pds-progress__percentage" }, this.percent, "%")));
|
|
22056
22240
|
}
|
|
22057
22241
|
get el() { return getElement(this); }
|
|
22058
22242
|
static get style() { return pdsProgressCss(); }
|
|
@@ -22087,7 +22271,7 @@ class PdsProperty {
|
|
|
22087
22271
|
this.icon = 'star';
|
|
22088
22272
|
}
|
|
22089
22273
|
render() {
|
|
22090
|
-
return (hAsync(Host, { key: '
|
|
22274
|
+
return (hAsync(Host, { key: '198ffd747b7a84a6f58a1b072890fc8bd3ed93aa', id: this.componentId }, hAsync("pds-box", { key: 'be71f3d96efea0a45f357d888f71dbe5ad8b68d6', "align-items": "center", gap: "xs" }, hAsync("pds-icon", { key: '1a52407e00b158d5e6a515ad4b07ed3407d31f75', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), hAsync("slot", { key: '46ac5019b27bdd079c7853abeef8f7c240d19c2c' }))));
|
|
22091
22275
|
}
|
|
22092
22276
|
static get style() { return pdsPropertyCss(); }
|
|
22093
22277
|
static get cmpMeta() { return {
|
|
@@ -22105,10 +22289,10 @@ class PdsProperty {
|
|
|
22105
22289
|
|
|
22106
22290
|
const labelCss$3 = () => `.sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
|
|
22107
22291
|
|
|
22108
|
-
const pdsRadioCss = () => `.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-text-primary);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__content-wrapper.sc-pds-radio{-ms-flex:1;flex:1;min-width:0;overflow-wrap:anywhere}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio::after{cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}`;
|
|
22292
|
+
const pdsRadioCss = () => `.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-text-primary);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__content-wrapper.sc-pds-radio{-ms-flex:1;flex:1;min-width:0;overflow-wrap:anywhere}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio::after{cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);cursor:pointer;font:var(--pine-typography-body);min-block-size:var(--pine-dimension-xl);padding:0 var(--pine-dimension-sm);-webkit-transition:border-color var(--pine-motion-duration-fast) ease;transition:border-color var(--pine-motion-duration-fast) ease}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio span.sc-pds-radio{min-width:0;overflow-wrap:anywhere}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:hover{border-color:var(--pine-color-text)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:checked){border-color:var(--pine-color-text-active);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:focus-visible){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-label-disabled);cursor:not-allowed}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled:checked){border-color:var(--pine-color-text-label-disabled);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-label-disabled);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-label-disabled)}@media (forced-colors: active){.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled){border-color:GrayText}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled:checked){border-color:GrayText;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}.pds-radio--pill.sc-pds-radio-h .pds-radio__message.sc-pds-radio{-webkit-margin-start:0;margin-inline-start:0}`;
|
|
22109
22293
|
|
|
22110
22294
|
/**
|
|
22111
|
-
* @slot image - Custom image content to display instead of the default radio input
|
|
22295
|
+
* @slot image - Custom image content to display instead of the default radio input. Ignored when `variant` is `pill`.
|
|
22112
22296
|
* @part image-container - The container for the image
|
|
22113
22297
|
* @lightDom renders-markup
|
|
22114
22298
|
*/
|
|
@@ -22130,7 +22314,7 @@ class PdsRadio {
|
|
|
22130
22314
|
*/
|
|
22131
22315
|
this.disabled = false;
|
|
22132
22316
|
/**
|
|
22133
|
-
* Adds a border around the radio component for better visual separation.
|
|
22317
|
+
* Adds a border around the radio component for better visual separation. Ignored when `variant` is `pill`.
|
|
22134
22318
|
* @defaultValue false
|
|
22135
22319
|
*/
|
|
22136
22320
|
this.hasBorder = false;
|
|
@@ -22144,6 +22328,11 @@ class PdsRadio {
|
|
|
22144
22328
|
* @defaultValue false
|
|
22145
22329
|
*/
|
|
22146
22330
|
this.required = false;
|
|
22331
|
+
/**
|
|
22332
|
+
* Sets the style variant of the radio. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
|
|
22333
|
+
* @defaultValue default
|
|
22334
|
+
*/
|
|
22335
|
+
this.variant = 'default';
|
|
22147
22336
|
this.handleRadioChange = (e) => {
|
|
22148
22337
|
if (this.disabled) {
|
|
22149
22338
|
return;
|
|
@@ -22165,6 +22354,9 @@ class PdsRadio {
|
|
|
22165
22354
|
hasImage() {
|
|
22166
22355
|
return this._hasImage;
|
|
22167
22356
|
}
|
|
22357
|
+
isPill() {
|
|
22358
|
+
return this.variant === 'pill';
|
|
22359
|
+
}
|
|
22168
22360
|
classNames() {
|
|
22169
22361
|
const classNames = [];
|
|
22170
22362
|
if (this.invalid) {
|
|
@@ -22173,10 +22365,14 @@ class PdsRadio {
|
|
|
22173
22365
|
if (this.disabled) {
|
|
22174
22366
|
classNames.push('is-disabled');
|
|
22175
22367
|
}
|
|
22176
|
-
|
|
22368
|
+
// A pill is its own bordered shape, so has-border doesn't stack a card around it.
|
|
22369
|
+
if (this.hasBorder && !this.isPill()) {
|
|
22177
22370
|
classNames.push('has-border');
|
|
22178
22371
|
}
|
|
22179
|
-
if (this.
|
|
22372
|
+
if (this.isPill()) {
|
|
22373
|
+
classNames.push('pds-radio--pill');
|
|
22374
|
+
}
|
|
22375
|
+
if (this.hasImage() && !this.isPill()) {
|
|
22180
22376
|
classNames.push('has-image');
|
|
22181
22377
|
}
|
|
22182
22378
|
return classNames.join(' ');
|
|
@@ -22206,13 +22402,14 @@ class PdsRadio {
|
|
|
22206
22402
|
}
|
|
22207
22403
|
render() {
|
|
22208
22404
|
const renderLabelAndMessages = () => [
|
|
22209
|
-
hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: '
|
|
22405
|
+
hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: 'fdd83248666907fa25c5406cdedcd0e6f8d45f50', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() || this.isPill() ? 'visually-hidden' : '' }), hAsync("span", { key: '73166ffd57cdb1f3b9e2b61fe880216b23a6510b', class: this.hideLabel && !this.isPill() ? 'visually-hidden' : '' }, this.label)),
|
|
22210
22406
|
this.helperMessage && (hAsync("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
|
|
22211
|
-
this.errorMessage && (hAsync("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '
|
|
22407
|
+
this.errorMessage && (hAsync("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'e5bca81578382181b6fce61fa6830fd60e54234a', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))
|
|
22212
22408
|
];
|
|
22213
22409
|
const hostClass = this.classNames();
|
|
22214
22410
|
this.hostKeeper.record(hostClass);
|
|
22215
|
-
|
|
22411
|
+
const showImage = this.hasImage() && !this.isPill();
|
|
22412
|
+
return (hAsync(Host, { key: '4cf39a988cc7642234ff62e7fa2f0d08b09e7d25', class: hostClass }, showImage && (hAsync("div", { key: '7a88d32f896ad4696ea46b13f9ef01e7df0a1c3e', class: "pds-radio__image-container", part: "image-container" }, hAsync("slot", { key: 'eb8399263443d36ab91c0875602d0dc31f036058', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), showImage ? (hAsync("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
|
|
22216
22413
|
}
|
|
22217
22414
|
get el() { return getElement(this); }
|
|
22218
22415
|
static get style() { return labelCss$3() + pdsRadioCss(); }
|
|
@@ -22232,6 +22429,7 @@ class PdsRadio {
|
|
|
22232
22429
|
"name": [1],
|
|
22233
22430
|
"required": [4],
|
|
22234
22431
|
"value": [1],
|
|
22432
|
+
"variant": [1],
|
|
22235
22433
|
"_hasImage": [32]
|
|
22236
22434
|
},
|
|
22237
22435
|
"$listeners$": undefined,
|
|
@@ -22404,13 +22602,13 @@ class PdsRadioGroup {
|
|
|
22404
22602
|
render() {
|
|
22405
22603
|
const gapValue = this.getGapValue();
|
|
22406
22604
|
const ariaDescribedBy = this.getAriaDescribedBy();
|
|
22407
|
-
return (hAsync(Host, { key: '
|
|
22605
|
+
return (hAsync(Host, { key: 'aaf53113f06a0f49706e53735701fba64e79cb4d', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
|
|
22408
22606
|
'--pds-radio-group-gap': gapValue,
|
|
22409
|
-
} }, this.groupLabel && (hAsync("div", { key: '
|
|
22607
|
+
} }, this.groupLabel && (hAsync("div", { key: '4be5e43146bf348929e45498107862aaca161644', class: "pds-radio-group__label" }, this.groupLabel)), hAsync("div", { key: 'b4a1b870c1a7167b8dcbcf0a11808bbd9a8cec4e', class: {
|
|
22410
22608
|
'pds-radio-group__radios': true,
|
|
22411
22609
|
'pds-radio-group__radios--row': this.direction === 'row',
|
|
22412
22610
|
'pds-radio-group__radios--column': this.direction === 'column',
|
|
22413
|
-
} }, hAsync("slot", { key: '
|
|
22611
|
+
} }, hAsync("slot", { key: '2d841cc69c35a4f9da933bbb33c1384ca343e077', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (hAsync("div", { key: 'a09bb9e739570c06dc1907cb4e2dceecca36f7d3', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("div", { key: 'b8fe891cc4b8683d18c19b3b4ddb70212185b954', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '9a15d81d8303eeb5a928b96c760f6b15e536e0dc', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
|
|
22414
22612
|
}
|
|
22415
22613
|
get el() { return getElement(this); }
|
|
22416
22614
|
static get watchers() { return {
|
|
@@ -22519,7 +22717,7 @@ class PdsRow {
|
|
|
22519
22717
|
'min-height': this.minHeight,
|
|
22520
22718
|
}));
|
|
22521
22719
|
this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
|
|
22522
|
-
return hAsync(Host, { key: '
|
|
22720
|
+
return hAsync(Host, { key: '589ee3251a4ee1d7824c8e2fa3e214de5466c3db', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
|
|
22523
22721
|
}
|
|
22524
22722
|
get el() { return getElement(this); }
|
|
22525
22723
|
static get style() { return pdsRowCss(); }
|
|
@@ -22549,6 +22747,25 @@ const labelCss$2 = () => `:host{display:inline-block}:host([aria-disabled=true])
|
|
|
22549
22747
|
|
|
22550
22748
|
const pdsSelectCss = () => `:host{--pds-select-background:var(--pine-color-background-container);--pds-select-border:var(--pine-border);--pds-select-border-radius:var(--pine-dimension-125);--pds-select-border-radius-start-end:var(--pine-dimension-125);--pds-select-border-radius-start-start:var(--pine-dimension-125);--pds-select-border-radius-end-end:var(--pine-dimension-125);--pds-select-border-radius-end-start:var(--pine-dimension-125);--pds-select-min-height:36px;--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger)}:host .hidden,:host :host([hidden]){display:none}.pds-select{color:var(--pine-color-text);display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:"label label" "field field" "message message";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}.pds-select__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-area:label;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--pds-select-background);border:var(--pds-select-border);border-end-end-radius:var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));border-end-start-radius:var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));border-start-end-radius:var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));border-start-start-radius:var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));color:var(--pine-color-text);font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-select-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);-webkit-padding-end:var(--pine-dimension-450);padding-inline-end:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-color-red-950)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-disabled) .pds-select__select-icon{color:var(--pine-color-text-disabled)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) :host(.is-invalid) select{background-color:var(--pine-color-red-950)}:host(.is-invalid) select:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-accent);color:var(--pine-color-text-accent)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:hover:not(:disabled){border-color:var(--pine-color-accent-hover)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:focus-visible{outline-color:var(--pine-color-focus-ring)}:host([highlight]:not(.is-disabled):not(.is-invalid)) .pds-select__select-icon{color:var(--pine-color-text-accent)}.pds-select__error-message,.pds-select__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-select__error-message{color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-select__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:var(--pds-select-min-height);pointer-events:none;position:relative;z-index:calc(var(--pine-z-index-raised) - 1)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
|
|
22551
22749
|
|
|
22750
|
+
/** The tags of an option list in order, optgroup contents included: equal shapes can be patched in place. */
|
|
22751
|
+
const shapeOf = (items) => items.map((item) => item.tagName + (item.tagName === 'OPTGROUP' ? `(${shapeOf(Array.from(item.children))})` : '')).join();
|
|
22752
|
+
/** Brings an existing option or optgroup up to date with its copy, keeping the element itself. */
|
|
22753
|
+
const patchInPlace = (target, copy) => {
|
|
22754
|
+
Array.from(target.attributes).forEach(({ name }) => {
|
|
22755
|
+
if (!copy.hasAttribute(name))
|
|
22756
|
+
target.removeAttribute(name);
|
|
22757
|
+
});
|
|
22758
|
+
Array.from(copy.attributes).forEach(({ name, value }) => {
|
|
22759
|
+
if (target.getAttribute(name) !== value)
|
|
22760
|
+
target.setAttribute(name, value);
|
|
22761
|
+
});
|
|
22762
|
+
if (copy.tagName === 'OPTGROUP') {
|
|
22763
|
+
Array.from(copy.children).forEach((child, index) => patchInPlace(target.children[index], child));
|
|
22764
|
+
}
|
|
22765
|
+
else if (target.textContent !== copy.textContent) {
|
|
22766
|
+
target.textContent = copy.textContent;
|
|
22767
|
+
}
|
|
22768
|
+
};
|
|
22552
22769
|
/**
|
|
22553
22770
|
* @slot action - Content to be displayed in the label area, typically for help icons or links
|
|
22554
22771
|
*/
|
|
@@ -22560,6 +22777,9 @@ class PdsSelect {
|
|
|
22560
22777
|
this.pdsFocus = createEvent(this, "pdsFocus");
|
|
22561
22778
|
this.pdsKeyDown = createEvent(this, "pdsKeyDown");
|
|
22562
22779
|
this._type = 'select-one';
|
|
22780
|
+
this.optionObserver = null;
|
|
22781
|
+
this.optionSyncFrame = null;
|
|
22782
|
+
this.hasHadOptions = false;
|
|
22563
22783
|
this.hostKeeper = new HostStylingKeeper();
|
|
22564
22784
|
/**
|
|
22565
22785
|
* Indicates whether or not the select field is disabled.
|
|
@@ -22576,6 +22796,16 @@ class PdsSelect {
|
|
|
22576
22796
|
* @defaultValue false
|
|
22577
22797
|
*/
|
|
22578
22798
|
this.required = false;
|
|
22799
|
+
/**
|
|
22800
|
+
* Whether a mutation is inside an option or optgroup. The host's own attributes and children
|
|
22801
|
+
* (top-level adds and removes reach `slotchange`) and the action slot's content are not.
|
|
22802
|
+
*/
|
|
22803
|
+
this.touchesOption = ({ target }) => {
|
|
22804
|
+
// Not just TEXT_NODE: characterData also reports comment nodes, and a Comment has no
|
|
22805
|
+
// .closest() — treating anything non-Element as a Text node crashed on one.
|
|
22806
|
+
const element = target.nodeType === Node.ELEMENT_NODE ? target : target.parentElement;
|
|
22807
|
+
return target !== this.el && (element === null || element === void 0 ? void 0 : element.closest('option, optgroup')) != null;
|
|
22808
|
+
};
|
|
22579
22809
|
/**
|
|
22580
22810
|
* Emits an event on input change.
|
|
22581
22811
|
*/
|
|
@@ -22602,25 +22832,47 @@ class PdsSelect {
|
|
|
22602
22832
|
this.pdsKeyDown.emit(ev);
|
|
22603
22833
|
};
|
|
22604
22834
|
/**
|
|
22605
|
-
*
|
|
22606
|
-
*
|
|
22607
|
-
*
|
|
22608
|
-
*
|
|
22835
|
+
* Copies the slotted <option> and <optgroup> elements into the inner select, then
|
|
22836
|
+
* reselects the current value. Runs on `slotchange` and when a slotted option changes
|
|
22837
|
+
* (see startOptionSync).
|
|
22838
|
+
*
|
|
22839
|
+
* Nothing happens when the copies match what the select already holds. When only text or
|
|
22840
|
+
* attributes changed, the select's own options are updated in place rather than replaced,
|
|
22841
|
+
* so an open picker keeps its highlight, a multiple select keeps its range anchor, and a
|
|
22842
|
+
* screen reader keeps its place. Selecting programmatically fires no change event, so a
|
|
22843
|
+
* copy never emits `pdsSelectChange`.
|
|
22609
22844
|
*/
|
|
22610
22845
|
this.handleSlotChange = () => {
|
|
22611
|
-
|
|
22612
|
-
this.
|
|
22613
|
-
|
|
22614
|
-
|
|
22615
|
-
|
|
22616
|
-
|
|
22617
|
-
|
|
22618
|
-
|
|
22619
|
-
|
|
22620
|
-
|
|
22621
|
-
|
|
22622
|
-
|
|
22846
|
+
var _a;
|
|
22847
|
+
const slot = (_a = this.slotContainer) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
|
|
22848
|
+
if (slot === null || slot === undefined || this.selectEl === undefined)
|
|
22849
|
+
return;
|
|
22850
|
+
const copies = slot.assignedElements({ flatten: true })
|
|
22851
|
+
.filter((item) => ['OPTION', 'OPTGROUP'].includes(item.tagName))
|
|
22852
|
+
.map((item) => item.cloneNode(true));
|
|
22853
|
+
const current = Array.from(this.selectEl.children);
|
|
22854
|
+
// The very first copy populates an empty select, where falling back to the first option (like
|
|
22855
|
+
// a native select) is correct; the no-match blank state is for options changing under a value
|
|
22856
|
+
// that was already showing selected. Tracked separately from the select's current emptiness:
|
|
22857
|
+
// an async reload that clears options before the next set lands would otherwise look like a
|
|
22858
|
+
// first render again, and the no-match state must still apply once that next set arrives.
|
|
22859
|
+
const hadOptions = this.hasHadOptions;
|
|
22860
|
+
if (copies.length > 0)
|
|
22861
|
+
this.hasHadOptions = true;
|
|
22862
|
+
const markup = (items) => items.map((item) => item.outerHTML).join('');
|
|
22863
|
+
if (markup(copies) === markup(current))
|
|
22864
|
+
return;
|
|
22865
|
+
if (shapeOf(copies) === shapeOf(current)) {
|
|
22866
|
+
copies.forEach((copy, index) => patchInPlace(current[index], copy));
|
|
22867
|
+
}
|
|
22868
|
+
else {
|
|
22869
|
+
this.selectEl.innerHTML = '';
|
|
22870
|
+
copies.forEach((copy) => this.selectEl.appendChild(copy));
|
|
22871
|
+
}
|
|
22623
22872
|
this.updateSelectedOption();
|
|
22873
|
+
if (hadOptions)
|
|
22874
|
+
this.showNoSelectionWithoutMatch();
|
|
22875
|
+
this.updateFormValue();
|
|
22624
22876
|
};
|
|
22625
22877
|
}
|
|
22626
22878
|
/**
|
|
@@ -22649,9 +22901,16 @@ class PdsSelect {
|
|
|
22649
22901
|
}
|
|
22650
22902
|
// Expose type property on the element instance to match native form element behavior
|
|
22651
22903
|
exposeTypeProperty(this.el, () => this._type);
|
|
22904
|
+
// Reconnected after a move: componentDidLoad won't run again, and options may have changed
|
|
22905
|
+
// while it was out of the document.
|
|
22906
|
+
if (this.selectEl !== undefined) {
|
|
22907
|
+
this.startOptionSync();
|
|
22908
|
+
this.scheduleOptionSync();
|
|
22909
|
+
}
|
|
22652
22910
|
}
|
|
22653
22911
|
disconnectedCallback() {
|
|
22654
22912
|
this.hostKeeper.disconnect();
|
|
22913
|
+
this.stopOptionSync();
|
|
22655
22914
|
}
|
|
22656
22915
|
componentWillLoad() {
|
|
22657
22916
|
// Set initial type based on multiple prop
|
|
@@ -22661,6 +22920,43 @@ class PdsSelect {
|
|
|
22661
22920
|
componentDidLoad() {
|
|
22662
22921
|
// Set initial form value
|
|
22663
22922
|
this.updateFormValue();
|
|
22923
|
+
// Stencil holds componentDidLoad until the shadow root's pds-icon has loaded, so options can
|
|
22924
|
+
// change between the first slotchange copy and here with nothing observing yet — the same gap
|
|
22925
|
+
// the reconnect path closes with a catch-up sync.
|
|
22926
|
+
this.startOptionSync();
|
|
22927
|
+
this.scheduleOptionSync();
|
|
22928
|
+
}
|
|
22929
|
+
/**
|
|
22930
|
+
* Keeps the inner select in step with the slotted options. `slotchange` only fires when
|
|
22931
|
+
* top-level options are added or removed, so an option's text, value or disabled state
|
|
22932
|
+
* changing, or an option added inside an optgroup, would otherwise never reach the select.
|
|
22933
|
+
* Changes are batched into one copy per animation frame.
|
|
22934
|
+
*/
|
|
22935
|
+
startOptionSync() {
|
|
22936
|
+
if (this.optionObserver !== null || typeof MutationObserver === 'undefined' || !this.el.isConnected)
|
|
22937
|
+
return;
|
|
22938
|
+
this.optionObserver = new MutationObserver((mutations) => {
|
|
22939
|
+
if (mutations.some(this.touchesOption))
|
|
22940
|
+
this.scheduleOptionSync();
|
|
22941
|
+
});
|
|
22942
|
+
this.optionObserver.observe(this.el, { childList: true, subtree: true, attributes: true, characterData: true });
|
|
22943
|
+
}
|
|
22944
|
+
scheduleOptionSync() {
|
|
22945
|
+
if (this.optionSyncFrame !== null)
|
|
22946
|
+
return;
|
|
22947
|
+
this.optionSyncFrame = requestAnimationFrame(() => {
|
|
22948
|
+
this.optionSyncFrame = null;
|
|
22949
|
+
this.handleSlotChange();
|
|
22950
|
+
});
|
|
22951
|
+
}
|
|
22952
|
+
stopOptionSync() {
|
|
22953
|
+
var _a;
|
|
22954
|
+
(_a = this.optionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
22955
|
+
this.optionObserver = null;
|
|
22956
|
+
if (this.optionSyncFrame !== null) {
|
|
22957
|
+
cancelAnimationFrame(this.optionSyncFrame);
|
|
22958
|
+
this.optionSyncFrame = null;
|
|
22959
|
+
}
|
|
22664
22960
|
}
|
|
22665
22961
|
/**
|
|
22666
22962
|
* Updates the selected option in the select element based on the current value.
|
|
@@ -22686,6 +22982,19 @@ class PdsSelect {
|
|
|
22686
22982
|
});
|
|
22687
22983
|
}
|
|
22688
22984
|
}
|
|
22985
|
+
/**
|
|
22986
|
+
* After a copy that changes an existing option set, a value whose option was renamed or removed
|
|
22987
|
+
* has nothing to select. Like a native select, show nothing selected rather than the first
|
|
22988
|
+
* option; the value itself is kept, with no change event.
|
|
22989
|
+
*/
|
|
22990
|
+
showNoSelectionWithoutMatch() {
|
|
22991
|
+
var _a;
|
|
22992
|
+
const wanted = [].concat((_a = this.value) !== null && _a !== void 0 ? _a : []).filter((value) => value !== '');
|
|
22993
|
+
const options = Array.from(this.selectEl.options);
|
|
22994
|
+
if (wanted.length > 0 && !options.some((option) => wanted.includes(option.value))) {
|
|
22995
|
+
this.selectEl.selectedIndex = -1;
|
|
22996
|
+
}
|
|
22997
|
+
}
|
|
22689
22998
|
getHelperMessage() {
|
|
22690
22999
|
return this.helperMessage && (hAsync("p", { class: "pds-select__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage));
|
|
22691
23000
|
}
|
|
@@ -22791,7 +23100,7 @@ class PdsSelect {
|
|
|
22791
23100
|
'has-action': hasAction && !this.hideLabel ? 'true' : null,
|
|
22792
23101
|
};
|
|
22793
23102
|
this.hostKeeper.record(hostClass, {}, hostAttributes);
|
|
22794
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
23103
|
+
return (hAsync(Host, Object.assign({ key: '37c2c3b72c13c3c4e3d81da29ddddc86a7300d70', class: hostClass }, hostAttributes), hAsync("div", { key: 'ff1c311dca6fc25813e5473d0e8daff4dc12e807', class: "pds-select" }, !this.hideLabel && (hAsync("div", { key: '77db17b0beb1fefabb26ffe1df0e5f03a0515996', class: "pds-select__label-wrapper" }, hAsync("label", { key: 'c4dcba3bc148aada4a3afcca0a30c64a630e441f', htmlFor: this.componentId }, hAsync("span", { key: '0fc3424ec1961d3b216c0fabb80cb8acee37f1a2', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), hAsync("select", { key: 'ff343a6653ccd081021cb669a428c780d0162e8b', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), hAsync("div", { key: '86fed1916c3b13d079492581a7c6bb621012a4a5', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, hAsync("slot", { key: 'abe06eeef5be13b716573c8a806d6b7795edc65f', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && hAsync("pds-icon", { key: '68c958666828f77114f2edeedb667070106046fa', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
|
|
22795
23104
|
}
|
|
22796
23105
|
static get formAssociated() { return true; }
|
|
22797
23106
|
get el() { return getElement(this); }
|
|
@@ -25550,7 +25859,7 @@ class PdsSortable {
|
|
|
25550
25859
|
render() {
|
|
25551
25860
|
const classNames = this.classNames();
|
|
25552
25861
|
this.hostKeeper.record(classNames);
|
|
25553
|
-
return (hAsync(Host, { key: '
|
|
25862
|
+
return (hAsync(Host, { key: '6e9e7b769f57ebfd81541fbecbe17b3fb4ad3e47', class: classNames, id: this.componentId }, hAsync("slot", { key: 'c9466a216862c0a3e578f3fcfc1ac1e26146722b' })));
|
|
25554
25863
|
}
|
|
25555
25864
|
get el() { return getElement(this); }
|
|
25556
25865
|
static get watchers() { return {
|
|
@@ -25625,7 +25934,7 @@ class PdsSortableItem {
|
|
|
25625
25934
|
}
|
|
25626
25935
|
render() {
|
|
25627
25936
|
this.hostKeeper.record('pds-sortable-item');
|
|
25628
|
-
return (hAsync(Host, { key: '
|
|
25937
|
+
return (hAsync(Host, { key: 'c6b5402a54179d4e7caed3cc81874977d2d6c677', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (hAsync("div", { key: 'cd2d85286bcb3e47f76e4571d609d91f932b717b', class: "pds-sortable-item__handle" }, hAsync("pds-icon", { key: '97e2e155283d86921f40198637abf596d6cc86e0', "aria-hidden": "true", icon: handle }))), hAsync("slot", { key: '99743c8e5be45ca76f276b47688843a621c8ded5' }), this.enableActions && (hAsync("div", { key: '7cb1a8b99658d72067ccae036b2bc0276b8cf02e', class: "pds-sortable-item__actions" }, hAsync("slot", { key: 'f9b3b7d1cc10ac077f65ec2cafac7a372deae511', name: "sortable-item-actions" })))));
|
|
25629
25938
|
}
|
|
25630
25939
|
get el() { return getElement(this); }
|
|
25631
25940
|
static get style() { return pdsSortableItemCss(); }
|
|
@@ -25760,9 +26069,9 @@ class PdsSwitch {
|
|
|
25760
26069
|
const hostClass = this.switchClassNames();
|
|
25761
26070
|
const ariaDisabled = this.disabled ? 'true' : null;
|
|
25762
26071
|
this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
|
|
25763
|
-
return (hAsync(Host, { key: '
|
|
25764
|
-
hAsync("div", { key: '
|
|
25765
|
-
hAsync("div", { key: '
|
|
26072
|
+
return (hAsync(Host, { key: '0fa5beb83232b381ea5cdfa82d143afcb69eb4e1', class: hostClass, "aria-disabled": ariaDisabled }, hAsync("label", { key: 'df5d08344d11cb334ef69a432d1c02557caacc96', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '6908b328f0e2da2085ffbffe0d1e4d09f2c6fd86', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), hAsync("span", { key: '1108ab3eae63a371f9e9b80f011211cba8287b67', class: this.hideLabel ? 'visually-hidden' : '' }, hAsync("slot", { key: '8aac1d9b81deab92e1e27c06debf2b87bc697874', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
|
|
26073
|
+
hAsync("div", { key: 'ef829fb6bc66060805a144995f60e2bebb915615', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
26074
|
+
hAsync("div", { key: '42ad678cc2179b4a26ed09151de41c2293b98011', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '8dc0b29b522247762010edb3b1e8e5fc8c8788fa', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
|
|
25766
26075
|
}
|
|
25767
26076
|
static get formAssociated() { return true; }
|
|
25768
26077
|
get el() { return getElement(this); }
|
|
@@ -26186,7 +26495,7 @@ class PdsTableBody {
|
|
|
26186
26495
|
registerInstance(this, hostRef);
|
|
26187
26496
|
}
|
|
26188
26497
|
render() {
|
|
26189
|
-
return (hAsync(Host, { key: '
|
|
26498
|
+
return (hAsync(Host, { key: '4f1cba9505f56ff1ab0a19f9a88318d66a02eacc', role: "rowgroup", part: "body" }, hAsync("slot", { key: 'ea0c620a15fcbe2915189e870d0815c5cbffdf8c' })));
|
|
26190
26499
|
}
|
|
26191
26500
|
static get style() { return pdsTableBodyCss(); }
|
|
26192
26501
|
static get cmpMeta() { return {
|
|
@@ -26344,11 +26653,11 @@ class PdsTableCell {
|
|
|
26344
26653
|
return classNames.join(' ');
|
|
26345
26654
|
}
|
|
26346
26655
|
render() {
|
|
26347
|
-
return (hAsync(Host, { key: '
|
|
26656
|
+
return (hAsync(Host, { key: 'fd84150bcb9bd5d2029624394d4f69b0a7234bc0', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
|
|
26348
26657
|
this.tableRef.fixedColumn &&
|
|
26349
26658
|
this.tableRef.selectable
|
|
26350
26659
|
? { '--fixed-cell-position': '40px' }
|
|
26351
|
-
: {} }, hAsync("slot", { key: '
|
|
26660
|
+
: {} }, hAsync("slot", { key: '9256f033ec58b9cb2acc74d705acc9726507668b' })));
|
|
26352
26661
|
}
|
|
26353
26662
|
get hostElement() { return getElement(this); }
|
|
26354
26663
|
static get watchers() { return {
|
|
@@ -26417,7 +26726,7 @@ class PdsTableHead {
|
|
|
26417
26726
|
}
|
|
26418
26727
|
}
|
|
26419
26728
|
render() {
|
|
26420
|
-
return (hAsync(Host, { key: '
|
|
26729
|
+
return (hAsync(Host, { key: '4fb8d7bf4a9b0bce672208651c0600fbc94214af', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-head-cell", { key: '20b86146540208178bd63bd136e14e5534c7ec76', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (hAsync("pds-checkbox", { key: 'fa8054dd7ee36c6401e9eeb9c962a820d3a02558', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" })))), hAsync("slot", { key: 'a0000270ae6ed1cab1c6e802ccc53ba0de3e54c9' })));
|
|
26421
26730
|
}
|
|
26422
26731
|
get hostElement() { return getElement(this); }
|
|
26423
26732
|
static get style() { return pdsTableHeadCss(); }
|
|
@@ -26638,11 +26947,11 @@ class PdsTableHeadCell {
|
|
|
26638
26947
|
return classNames.join(' ');
|
|
26639
26948
|
}
|
|
26640
26949
|
render() {
|
|
26641
|
-
return (hAsync(Host, { key: '
|
|
26950
|
+
return (hAsync(Host, { key: 'd609309180968913315c1428d0403c3974a4bfc0', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
|
|
26642
26951
|
this.tableRef.fixedColumn &&
|
|
26643
26952
|
this.tableRef.selectable
|
|
26644
26953
|
? { '--fixed-cell-position': '40px' }
|
|
26645
|
-
: {} }, hAsync("slot", { key: '
|
|
26954
|
+
: {} }, hAsync("slot", { key: '7aff5994fe4c5250ce83516960183dbd9ffa9c69' }), this.sortable && this.isActive && (hAsync("pds-icon", { key: '0a7b99ab2c56ea0cfb3aa6f810bf802422a29bef', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon", "aria-hidden": "true" }))));
|
|
26646
26955
|
}
|
|
26647
26956
|
get hostElement() { return getElement(this); }
|
|
26648
26957
|
static get style() { return pdsTableHeadCellCss(); }
|
|
@@ -26808,7 +27117,7 @@ class PdsTableRow {
|
|
|
26808
27117
|
}
|
|
26809
27118
|
}
|
|
26810
27119
|
render() {
|
|
26811
|
-
return (hAsync(Host, { key: '
|
|
27120
|
+
return (hAsync(Host, { key: 'dc956e7253971bdadc003448822a83953ed4658f', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-cell", { key: '1f119c5036ab1d27c5138106968a40492222b6f3', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, hAsync("pds-checkbox", { key: 'f7a3534eceeabe478fb85e6e476f814e03988cfb', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), hAsync("slot", { key: '287c0fe2c39bac5df7a977e31290aeddd0cd46b3' })));
|
|
26812
27121
|
}
|
|
26813
27122
|
get hostElement() { return getElement(this); }
|
|
26814
27123
|
static get style() { return pdsTableRowCss(); }
|
|
@@ -26862,7 +27171,7 @@ class PdsTabpanel {
|
|
|
26862
27171
|
// The docs show consumers omitting `slot`, so server HTML doesn't carry it — a DOM morph
|
|
26863
27172
|
// that strips it (and the stretch-active class) leaves this panel unslotted. Put both back.
|
|
26864
27173
|
this.hostKeeper.record(hostClass, {}, { slot: 'tabpanels' });
|
|
26865
|
-
return (hAsync(Host, { key: '
|
|
27174
|
+
return (hAsync(Host, { key: 'b649c0f9e0c103a2d7dad43b7db0a092194b4ba0', slot: "tabpanels", class: hostClass || undefined }, hAsync("div", { key: 'a578722d33f7d04726185e393771838870833984', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, hAsync("slot", { key: '2ebe5745c444563333ee175bb3a1f7401ba77ec1' }))));
|
|
26866
27175
|
}
|
|
26867
27176
|
get el() { return getElement(this); }
|
|
26868
27177
|
static get style() { return pdsTabpanelCss(); }
|
|
@@ -27161,7 +27470,7 @@ class PdsTabs {
|
|
|
27161
27470
|
// Only the classes: `active-tab-name` backs the mutable activeTabName prop, so a morph that drops
|
|
27162
27471
|
// it is a prop change, not a strip.
|
|
27163
27472
|
this.hostKeeper.record(hostClass);
|
|
27164
|
-
return (hAsync(Host, { key: '
|
|
27473
|
+
return (hAsync(Host, { key: '08ac02be358bebbd95dd5edca30cd99789445f50', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, hAsync("slot", { key: '02395c056f80f46f1fa9117eafde68ef170b4188', name: "tabpanels" })));
|
|
27165
27474
|
}
|
|
27166
27475
|
get el() { return getElement(this); }
|
|
27167
27476
|
static get style() { return pdsTabsCss(); }
|
|
@@ -27295,7 +27604,7 @@ class PdsText {
|
|
|
27295
27604
|
? `pds-text--decoration-${this.decoration}`
|
|
27296
27605
|
: ''}
|
|
27297
27606
|
`;
|
|
27298
|
-
return (hAsync(Tag, { key: '
|
|
27607
|
+
return (hAsync(Tag, { key: 'b79a6e67f11024cb025cb26bbf77231547bd63a4', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: 'ae1f8ca39899894541eac3c07fb21ead4ab98f40' })));
|
|
27299
27608
|
}
|
|
27300
27609
|
get el() { return getElement(this); }
|
|
27301
27610
|
static get watchers() { return {
|
|
@@ -27641,10 +27950,10 @@ class PdsTextarea {
|
|
|
27641
27950
|
}
|
|
27642
27951
|
render() {
|
|
27643
27952
|
const value = this.getValue();
|
|
27644
|
-
return (hAsync(Host, { key: '
|
|
27645
|
-
hAsync("div", { key: '
|
|
27646
|
-
hAsync("p", { key: '
|
|
27647
|
-
hAsync("p", { key: '
|
|
27953
|
+
return (hAsync(Host, { key: '76e445d135191df3090620f2c2eaf6ed8d7eb9cb', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '836815333b0ca925bc205a4b8b25086fe82fcedc', class: "pds-textarea" }, this.label &&
|
|
27954
|
+
hAsync("div", { key: 'e8633457c994d3387ec277fd9945afb2c653d27a', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '977bb1c171b68242ab06e01ef94ecc4e4cb26880', htmlFor: this.componentId }, hAsync("span", { key: 'ef87433d6524296b3153e8d04e6406c9287e3f2e', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '92952c76f5f4a87da4953f792a9a5589d7765451', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: 'a61f39d0e299cb6b3e6d1beed37805ad9a71b579', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
|
|
27955
|
+
hAsync("p", { key: '811065b7ce7b45d902d821dbceb25fef4231db94', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
|
|
27956
|
+
hAsync("p", { key: 'f95f566b79215a4a128fe92c02be244219f843e5', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '08f649e4b32551d59d60b978262cd7beaa99e08d', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
|
|
27648
27957
|
}
|
|
27649
27958
|
static get formAssociated() { return true; }
|
|
27650
27959
|
get el() { return getElement(this); }
|
|
@@ -27692,7 +28001,7 @@ class PdsTextarea {
|
|
|
27692
28001
|
}; }
|
|
27693
28002
|
}
|
|
27694
28003
|
|
|
27695
|
-
const pdsToastCss = () => `:host{--animation-duration:var(--pine-motion-duration-slow);--animation-timing:var(--pine-motion-easing-in-out);--padding-inline:var(--pine-dimension-md);--padding-inline-desktop:var(--pine-dimension-2xl);--sizing-height-default:68px;--sizing-min-width:calc(var(--sizing-total-width) - (var(--padding-inline) * 2));--sizing-min-width-desktop:calc(var(--sizing-total-width) - (var(--padding-inline-desktop) * 2));--sizing-total-width:350px;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;font:var(--pine-typography-body-medium)}.pds-toast{-ms-flex-align:center;align-items:center;-webkit-animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);background-color:var(--pine-color-primary);border-radius:var(--pine-dimension-xs);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);display:-ms-flexbox;display:flex;height:var(--sizing-height-default);-ms-flex-pack:start;justify-content:flex-start;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);max-width:90vw;min-width:var(--sizing-min-width);padding:0 var(--padding-inline);position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (max-width: 767px){.pds-toast{height:36px;max-width:calc(100vw - var(--pine-dimension-2xs) * 2);min-width:auto;padding-inline:var(--pine-dimension-2xs)}}.pds-toast--danger{background-color:var(--pine-color-danger)}.pds-toast--loading .pds-toast__loader{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);position:relative}.pds-toast--loading .pds-toast__loader-spinner{-webkit-animation:pds-toast-rotate 2s linear infinite;animation:pds-toast-rotate 2s linear infinite;height:20px;width:20px}.pds-toast--loading .pds-toast__loader-path{-webkit-animation:pds-toast-dash 1.5s ease-in-out infinite;animation:pds-toast-dash 1.5s ease-in-out infinite;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}.pds-toast__icon{color:var(--pine-color-text-primary);display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-toast__message{font:var(--pine-typography-body-sm-medium);-webkit-margin-end:auto;margin-inline-end:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-toast__message ::slotted(a){color:var(--pine-color-text-primary);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs);opacity:0.7;text-decoration:underline}.pds-toast__message ::slotted(a):hover,.pds-toast__message ::slotted(a):focus-visible{opacity:1}.pds-toast__message ::slotted(a):focus-visible{outline:2px solid var(--pine-color-text-primary);outline-offset:2px}.pds-toast__button{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);color:inherit;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);opacity:0.7;padding:0;white-space:nowrap}.pds-toast__button:hover,.pds-toast__button:focus{opacity:1}.pds-toast__button:focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-dimension-2xs)}@-webkit-keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}:host([hidden]) .pds-toast,.pds-toast--animating-out{-webkit-animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;pointer-events:none;}`;
|
|
28004
|
+
const pdsToastCss = () => `:host{--animation-duration:var(--pine-motion-duration-slow);--animation-timing:var(--pine-motion-easing-in-out);--padding-inline:var(--pine-dimension-md);--padding-inline-desktop:var(--pine-dimension-2xl);--sizing-height-default:68px;--sizing-min-width:calc(var(--sizing-total-width) - (var(--padding-inline) * 2));--sizing-min-width-desktop:calc(var(--sizing-total-width) - (var(--padding-inline-desktop) * 2));--sizing-total-width:350px;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;font:var(--pine-typography-body-medium)}.pds-toast{-ms-flex-align:center;align-items:center;-webkit-animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);background-color:var(--pine-color-primary);border-radius:var(--pine-dimension-xs);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);display:-ms-flexbox;display:flex;height:var(--sizing-height-default);-ms-flex-pack:start;justify-content:flex-start;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);max-width:90vw;min-width:var(--sizing-min-width);padding:0 var(--padding-inline);position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (max-width: 767px){.pds-toast{height:36px;max-width:calc(100vw - var(--pine-dimension-2xs) * 2);min-width:auto;padding-inline:var(--pine-dimension-2xs)}}.pds-toast--danger{background-color:var(--pine-color-danger)}.pds-toast--loading .pds-toast__loader{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);position:relative}.pds-toast--loading .pds-toast__loader-spinner{-webkit-animation:pds-toast-rotate 2s linear infinite;animation:pds-toast-rotate 2s linear infinite;height:20px;width:20px}.pds-toast--loading .pds-toast__loader-path{-webkit-animation:pds-toast-dash 1.5s ease-in-out infinite;animation:pds-toast-dash 1.5s ease-in-out infinite;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}.pds-toast__icon{color:var(--pine-color-text-primary);display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-toast__message{font:var(--pine-typography-body-sm-medium);-webkit-margin-end:auto;margin-inline-end:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-toast__message ::slotted(a){color:var(--pine-color-text-primary);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs);opacity:0.7;text-decoration:underline}.pds-toast__message ::slotted(a):hover,.pds-toast__message ::slotted(a):focus-visible{opacity:1}.pds-toast__message ::slotted(a):focus-visible{outline:2px solid var(--pine-color-text-primary);outline-offset:2px}.pds-toast__button{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);color:inherit;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);opacity:0.7;padding:0;white-space:nowrap}.pds-toast__button:hover,.pds-toast__button:focus{opacity:1}.pds-toast__button:focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-dimension-2xs)}@-webkit-keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}:host([hidden]) .pds-toast,.pds-toast--animating-out{-webkit-animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;pointer-events:none;}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
|
|
27696
28005
|
|
|
27697
28006
|
/** Fallback when computed `--animation-duration` is unavailable (matches `--pine-motion-duration-slow`). */
|
|
27698
28007
|
const TOAST_DISMISS_ANIMATION_MS = 300;
|
|
@@ -27814,17 +28123,23 @@ class PdsToast {
|
|
|
27814
28123
|
if (this.type === 'loading') {
|
|
27815
28124
|
return (hAsync("div", { class: "pds-toast__loader" }, hAsync("svg", { class: "pds-toast__loader-spinner", viewBox: "25 25 50 50", "aria-hidden": "true" }, hAsync("circle", { class: "pds-toast__loader-path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }))));
|
|
27816
28125
|
}
|
|
27817
|
-
//
|
|
27818
|
-
|
|
28126
|
+
// Decorative: inside role="alert" an icon name would be read out with the
|
|
28127
|
+
// message. Severity is announced as text instead (see severityLabel).
|
|
28128
|
+
return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon", "aria-hidden": "true" });
|
|
28129
|
+
}
|
|
28130
|
+
severityText() {
|
|
28131
|
+
var _a;
|
|
28132
|
+
return (_a = this.severityLabel) !== null && _a !== void 0 ? _a : (this.type === 'danger' ? 'Error' : undefined);
|
|
27819
28133
|
}
|
|
27820
28134
|
render() {
|
|
27821
|
-
|
|
28135
|
+
const severity = this.severityText();
|
|
28136
|
+
return (hAsync(Host, { key: '4c4077add1843ab84674dfa49fb963df55f1c432', hidden: !this.isVisible }, hAsync("div", { key: '0d819ac123de625604d3b1aa0f9391366b4d0289', class: {
|
|
27822
28137
|
'pds-toast': true,
|
|
27823
28138
|
[`pds-toast--${this.type}`]: this.type !== 'default',
|
|
27824
28139
|
'pds-toast--animating-out': this.isAnimatingOut
|
|
27825
|
-
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '
|
|
28140
|
+
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), severity && hAsync("span", { key: 'f75fb422797082e99acb85432c1b50cf702d7afc', class: "visually-hidden" }, severity), hAsync("span", { key: '3d9f03d96dbda41c72d2c2cc492b1422928d573f', class: "pds-toast__message" }, hAsync("slot", { key: 'affc7e4cb592735ec396fa90a9405f25b389e4bd' })), this.dismissible && (hAsync("button", { key: '0c4ef459dda09b8a196eed7ee28383995d959b11', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
|
|
27826
28141
|
this.dismiss();
|
|
27827
|
-
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '
|
|
28142
|
+
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '1b26a6a842868a5b1e55b7110c755edc7f830ba5', name: "remove", "aria-hidden": "true" }))))));
|
|
27828
28143
|
}
|
|
27829
28144
|
get el() { return getElement(this); }
|
|
27830
28145
|
static get watchers() { return {
|
|
@@ -27843,6 +28158,7 @@ class PdsToast {
|
|
|
27843
28158
|
"icon": [1],
|
|
27844
28159
|
"type": [1],
|
|
27845
28160
|
"dismissLabel": [1, "dismiss-label"],
|
|
28161
|
+
"severityLabel": [1, "severity-label"],
|
|
27846
28162
|
"isVisible": [32],
|
|
27847
28163
|
"isAnimatingOut": [32],
|
|
27848
28164
|
"dismiss": [64]
|
|
@@ -27872,7 +28188,9 @@ class PdsTooltip {
|
|
|
27872
28188
|
this.resolvedPlacement = 'right';
|
|
27873
28189
|
this.triggerEl = null;
|
|
27874
28190
|
this.contentDiv = null;
|
|
28191
|
+
this.lastCopiedHtml = null;
|
|
27875
28192
|
this.slotMutationObserver = null;
|
|
28193
|
+
this.contentSyncFrame = null;
|
|
27876
28194
|
this.currentPathname = '';
|
|
27877
28195
|
this.pathnameCheckInterval = null;
|
|
27878
28196
|
this.stopAutoUpdate = null;
|
|
@@ -27939,6 +28257,25 @@ class PdsTooltip {
|
|
|
27939
28257
|
this.handleSpaNavigation();
|
|
27940
28258
|
}
|
|
27941
28259
|
};
|
|
28260
|
+
this.scheduleContentSync = () => {
|
|
28261
|
+
if (this.contentSyncFrame !== null)
|
|
28262
|
+
return;
|
|
28263
|
+
this.contentSyncFrame = requestAnimationFrame(() => {
|
|
28264
|
+
this.contentSyncFrame = null;
|
|
28265
|
+
if (this.portalEl === null || this.contentDiv === null)
|
|
28266
|
+
return;
|
|
28267
|
+
const copy = this.copySlottedContent();
|
|
28268
|
+
const strippedCopy = this.strippedHtml(copy);
|
|
28269
|
+
if (strippedCopy === this.lastCopiedHtml)
|
|
28270
|
+
return;
|
|
28271
|
+
this.lastCopiedHtml = strippedCopy;
|
|
28272
|
+
this.contentDiv.textContent = '';
|
|
28273
|
+
this.contentDiv.append(...Array.from(copy.childNodes));
|
|
28274
|
+
this.repositionPortal().catch(error => {
|
|
28275
|
+
console.warn('Failed to reposition tooltip after a content change:', error);
|
|
28276
|
+
});
|
|
28277
|
+
});
|
|
28278
|
+
};
|
|
27942
28279
|
}
|
|
27943
28280
|
handleOpenToggle(newValue, oldValue) {
|
|
27944
28281
|
if (newValue === false && oldValue === true) {
|
|
@@ -27953,16 +28290,6 @@ class PdsTooltip {
|
|
|
27953
28290
|
window.addEventListener('pageshow', this.handlePageShow);
|
|
27954
28291
|
this.currentPathname = window.location.pathname;
|
|
27955
28292
|
this.triggerEl = this.el.querySelector('.pds-tooltip__trigger');
|
|
27956
|
-
const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');
|
|
27957
|
-
if (contentSlotWrapper !== null) {
|
|
27958
|
-
this.slotMutationObserver = new MutationObserver(() => {
|
|
27959
|
-
if (this.opened && this.portalEl !== null) {
|
|
27960
|
-
this.removePortal();
|
|
27961
|
-
this.createPortal();
|
|
27962
|
-
}
|
|
27963
|
-
});
|
|
27964
|
-
this.slotMutationObserver.observe(contentSlotWrapper, { childList: true, subtree: false });
|
|
27965
|
-
}
|
|
27966
28293
|
// no return; Stencil ignores teardown functions here
|
|
27967
28294
|
}
|
|
27968
28295
|
connectedCallback() {
|
|
@@ -27970,10 +28297,6 @@ class PdsTooltip {
|
|
|
27970
28297
|
}
|
|
27971
28298
|
disconnectedCallback() {
|
|
27972
28299
|
window.removeEventListener('pageshow', this.handlePageShow);
|
|
27973
|
-
if (this.slotMutationObserver !== null) {
|
|
27974
|
-
this.slotMutationObserver.disconnect();
|
|
27975
|
-
this.slotMutationObserver = null;
|
|
27976
|
-
}
|
|
27977
28300
|
// Ensure global listeners/intervals are removed if still present
|
|
27978
28301
|
if (this.portalEl !== null) {
|
|
27979
28302
|
this.removePortal();
|
|
@@ -28116,31 +28439,9 @@ class PdsTooltip {
|
|
|
28116
28439
|
this.contentDiv.className = 'pds-tooltip__content';
|
|
28117
28440
|
this.contentDiv.setAttribute('aria-hidden', this.opened ? 'false' : 'true');
|
|
28118
28441
|
this.contentDiv.setAttribute('aria-live', this.opened ? 'polite' : 'off');
|
|
28119
|
-
const
|
|
28120
|
-
|
|
28121
|
-
|
|
28122
|
-
if (slottedContentContainer !== null) {
|
|
28123
|
-
const childrenToClone = Array.from(slottedContentContainer.childNodes);
|
|
28124
|
-
if (childrenToClone.length > 0) {
|
|
28125
|
-
const hasMeaningfulNode = childrenToClone.some(node => {
|
|
28126
|
-
var _a;
|
|
28127
|
-
return node.nodeType === Node.ELEMENT_NODE ||
|
|
28128
|
-
(node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
|
|
28129
|
-
});
|
|
28130
|
-
if (hasMeaningfulNode) {
|
|
28131
|
-
hasSlottedContent = true;
|
|
28132
|
-
childrenToClone.forEach((node /*, index*/) => {
|
|
28133
|
-
var _a;
|
|
28134
|
-
if (node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '')) {
|
|
28135
|
-
this.contentDiv.appendChild(node.cloneNode(true));
|
|
28136
|
-
}
|
|
28137
|
-
});
|
|
28138
|
-
}
|
|
28139
|
-
}
|
|
28140
|
-
}
|
|
28141
|
-
if (!hasSlottedContent && typeof this.content === 'string' && this.content.trim() !== '') {
|
|
28142
|
-
this.contentDiv.textContent = this.content;
|
|
28143
|
-
}
|
|
28442
|
+
const initialCopy = this.copySlottedContent();
|
|
28443
|
+
this.lastCopiedHtml = this.strippedHtml(initialCopy);
|
|
28444
|
+
this.contentDiv.append(...Array.from(initialCopy.childNodes));
|
|
28144
28445
|
this.portalEl.appendChild(this.contentDiv);
|
|
28145
28446
|
document.body.appendChild(this.portalEl);
|
|
28146
28447
|
this.repositionPortal().catch(error => {
|
|
@@ -28163,8 +28464,93 @@ class PdsTooltip {
|
|
|
28163
28464
|
if (this.triggerEl !== null && this.portalEl.id !== '') {
|
|
28164
28465
|
this.triggerEl.setAttribute('aria-describedby', this.portalEl.id);
|
|
28165
28466
|
}
|
|
28467
|
+
this.startContentSync();
|
|
28468
|
+
}
|
|
28469
|
+
/**
|
|
28470
|
+
* The host's own content slot wrapper. Matched among direct children only, so a nested
|
|
28471
|
+
* pds-tooltip inside the trigger slot isn't mistaken for this one's.
|
|
28472
|
+
*/
|
|
28473
|
+
get contentSlotWrapper() {
|
|
28474
|
+
return Array.from(this.el.children).find((child) => child.matches('.pds-tooltip__content-slot-wrapper'));
|
|
28475
|
+
}
|
|
28476
|
+
/**
|
|
28477
|
+
* Copies the slotted content (or the `content` prop's text) into a detached container. The
|
|
28478
|
+
* portal holds copies so the framework that owns the slotted nodes keeps them.
|
|
28479
|
+
*/
|
|
28480
|
+
copySlottedContent() {
|
|
28481
|
+
var _a, _b;
|
|
28482
|
+
const copy = document.createElement('div');
|
|
28483
|
+
const slottedContentContainer = (_a = this.contentSlotWrapper) === null || _a === void 0 ? void 0 : _a.querySelector('[slot="content"]');
|
|
28484
|
+
const meaningfulNodes = Array.from((_b = slottedContentContainer === null || slottedContentContainer === void 0 ? void 0 : slottedContentContainer.childNodes) !== null && _b !== void 0 ? _b : []).filter(node => {
|
|
28485
|
+
var _a;
|
|
28486
|
+
return node.nodeType === Node.ELEMENT_NODE ||
|
|
28487
|
+
(node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
|
|
28488
|
+
});
|
|
28489
|
+
meaningfulNodes.forEach(node => copy.appendChild(node.cloneNode(true)));
|
|
28490
|
+
if (meaningfulNodes.length === 0 && typeof this.content === 'string' && this.content.trim() !== '') {
|
|
28491
|
+
copy.textContent = this.content;
|
|
28492
|
+
}
|
|
28493
|
+
return copy;
|
|
28494
|
+
}
|
|
28495
|
+
/**
|
|
28496
|
+
* While the tooltip is open, keeps the portal's copy in step with the slotted content at any
|
|
28497
|
+
* depth: content that loads or re-renders after opening shows without reopening. Changes are
|
|
28498
|
+
* batched to one re-copy per animation frame, and a re-copy that matches the last one shown is
|
|
28499
|
+
* dropped, so screen readers aren't re-announced, iframes don't reload and the tooltip isn't
|
|
28500
|
+
* repositioned for nothing. Only the hidden slot wrapper is observed, so copying into the portal
|
|
28501
|
+
* can't trigger another sync.
|
|
28502
|
+
*/
|
|
28503
|
+
startContentSync() {
|
|
28504
|
+
const contentSlotWrapper = this.contentSlotWrapper;
|
|
28505
|
+
if (contentSlotWrapper === undefined || typeof MutationObserver === 'undefined')
|
|
28506
|
+
return;
|
|
28507
|
+
this.slotMutationObserver = new MutationObserver(this.scheduleContentSync);
|
|
28508
|
+
this.slotMutationObserver.observe(contentSlotWrapper, {
|
|
28509
|
+
childList: true,
|
|
28510
|
+
subtree: true,
|
|
28511
|
+
attributes: true,
|
|
28512
|
+
characterData: true,
|
|
28513
|
+
});
|
|
28514
|
+
}
|
|
28515
|
+
/**
|
|
28516
|
+
* A copy's serialized HTML with Stencil's own hydration and scope classes removed from every
|
|
28517
|
+
* `pds-*` descendant, so a nested component finishing hydration (or re-hydrating once reconnected
|
|
28518
|
+
* inside the portal) isn't mistaken for a real content change. Without this, that class-only
|
|
28519
|
+
* difference fails the equality check above and triggers a recopy that replaces still-loaded
|
|
28520
|
+
* nodes — reloading any iframe or media the slotted content held.
|
|
28521
|
+
*/
|
|
28522
|
+
strippedHtml(root) {
|
|
28523
|
+
const clone = root.cloneNode(true);
|
|
28524
|
+
clone.querySelectorAll('*').forEach((el) => {
|
|
28525
|
+
// isStencilClass is host-scoped (its own doc: "another sc- class may be a consumer's"), so it
|
|
28526
|
+
// only applies to pds-* elements — the same check keepPineHydrated makes before using it.
|
|
28527
|
+
if (!el.localName.startsWith('pds-'))
|
|
28528
|
+
return;
|
|
28529
|
+
// Not `el.className`: on an SVG element that's an SVGAnimatedString, not a string,
|
|
28530
|
+
// so classNamesOf would silently drop its classes from the comparison. The `class`
|
|
28531
|
+
// attribute is a plain string on every element, SVG included.
|
|
28532
|
+
const kept = classNamesOf(el.getAttribute('class') || '').filter((name) => !isStencilClass(el, name));
|
|
28533
|
+
if (kept.length === 0) {
|
|
28534
|
+
el.removeAttribute('class');
|
|
28535
|
+
}
|
|
28536
|
+
else {
|
|
28537
|
+
el.setAttribute('class', kept.join(' '));
|
|
28538
|
+
}
|
|
28539
|
+
});
|
|
28540
|
+
return clone.innerHTML;
|
|
28541
|
+
}
|
|
28542
|
+
stopContentSync() {
|
|
28543
|
+
if (this.slotMutationObserver !== null) {
|
|
28544
|
+
this.slotMutationObserver.disconnect();
|
|
28545
|
+
this.slotMutationObserver = null;
|
|
28546
|
+
}
|
|
28547
|
+
if (this.contentSyncFrame !== null) {
|
|
28548
|
+
cancelAnimationFrame(this.contentSyncFrame);
|
|
28549
|
+
this.contentSyncFrame = null;
|
|
28550
|
+
}
|
|
28166
28551
|
}
|
|
28167
28552
|
removePortal() {
|
|
28553
|
+
this.stopContentSync();
|
|
28168
28554
|
// Stop Floating UI's autoUpdate
|
|
28169
28555
|
if (this.stopAutoUpdate !== null) {
|
|
28170
28556
|
this.stopAutoUpdate();
|
|
@@ -28196,12 +28582,13 @@ class PdsTooltip {
|
|
|
28196
28582
|
this.triggerEl.removeAttribute('aria-describedby');
|
|
28197
28583
|
}
|
|
28198
28584
|
this.contentDiv = null;
|
|
28585
|
+
this.lastCopiedHtml = null;
|
|
28199
28586
|
}
|
|
28200
28587
|
render() {
|
|
28201
28588
|
const hostId = this.componentId || undefined;
|
|
28202
|
-
return (hAsync(Host, { key: '
|
|
28589
|
+
return (hAsync(Host, { key: '067eda3089732c6a23032bb087182e6dcd0330fa', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '54f6f233c937f048f119df969630af530b10de25', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
|
|
28203
28590
|
/* focusin/out bubble; ensure keyboard users see tooltips */
|
|
28204
|
-
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '
|
|
28591
|
+
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: 'f8019985ad9fd27deb388e35c43bf2e227ff9c02' })), hAsync("div", { key: '072c4e578aebb99cd213901369a57d7c74734ad9', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: '22bc45dfb56567f53a608ce2033b062363793450', name: "content" }))));
|
|
28205
28592
|
}
|
|
28206
28593
|
get el() { return getElement(this); }
|
|
28207
28594
|
static get watchers() { return {
|