@pine-ds/core 4.1.0 → 4.3.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/index.d.ts +8 -0
- package/components/index.js +1 -1
- package/components/mock-pds-modal.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-copytext.js +1 -1
- package/components/pds-drawer-content.d.ts +11 -0
- package/components/pds-drawer-content.js +1 -0
- package/components/pds-drawer-footer.d.ts +11 -0
- package/components/pds-drawer-footer.js +1 -0
- package/components/pds-drawer-header.d.ts +11 -0
- package/components/pds-drawer-header.js +1 -0
- package/components/pds-drawer.d.ts +11 -0
- package/components/pds-drawer.js +1 -0
- package/components/pds-dropdown-menu-item.js +1 -1
- package/components/pds-dropdown-menu-separator.js +1 -1
- package/components/pds-dropdown-menu.js +1 -1
- package/components/pds-filter.js +1 -1
- package/components/pds-filters.js +1 -1
- package/components/pds-icon2.js +1 -1
- package/components/pds-image.js +1 -1
- package/components/pds-input.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-modal.js +1 -1
- package/components/pds-modal2.js +1 -0
- 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/truncation-tooltip.js +1 -1
- package/dist/cjs/{index-CuQil7H0.js → index-CaLa1zy9.js} +1 -1
- package/dist/cjs/{index-BMV0nzMk.js → index-DYvijwA6.js} +1 -1
- package/dist/cjs/index.cjs.js +20 -0
- package/dist/cjs/loader.cjs.js +2 -2
- 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 +1 -1
- package/dist/cjs/pds-avatar.cjs.entry.js +2 -2
- package/dist/cjs/pds-box.cjs.entry.js +2 -2
- package/dist/cjs/pds-button.cjs.entry.js +4 -4
- package/dist/cjs/pds-checkbox.cjs.entry.js +3 -3
- package/dist/cjs/pds-chip.cjs.entry.js +46 -12
- package/dist/cjs/pds-combobox.cjs.entry.js +3 -3
- package/dist/cjs/pds-container.cjs.entry.js +1 -1
- package/dist/cjs/pds-copytext.cjs.entry.js +8 -4
- package/dist/cjs/pds-divider.cjs.entry.js +1 -1
- package/dist/cjs/pds-drawer-content.cjs.entry.js +23 -0
- package/dist/cjs/pds-drawer-footer.cjs.entry.js +23 -0
- package/dist/cjs/pds-drawer-header.cjs.entry.js +23 -0
- package/dist/cjs/pds-drawer.cjs.entry.js +137 -0
- package/dist/cjs/pds-dropdown-menu-item.cjs.entry.js +2 -2
- package/dist/cjs/pds-dropdown-menu-separator.cjs.entry.js +2 -2
- package/dist/cjs/pds-dropdown-menu.cjs.entry.js +2 -2
- package/dist/cjs/pds-filter.cjs.entry.js +3 -3
- package/dist/cjs/pds-filters.cjs.entry.js +2 -2
- package/dist/cjs/pds-icon.cjs.entry.js +2 -2
- package/dist/cjs/pds-image.cjs.entry.js +3 -3
- package/dist/cjs/pds-input.cjs.entry.js +5 -5
- package/dist/cjs/pds-link.cjs.entry.js +5 -5
- package/dist/cjs/pds-loader.cjs.entry.js +2 -2
- package/dist/cjs/pds-modal-content.cjs.entry.js +3 -3
- package/dist/cjs/pds-modal-footer.cjs.entry.js +2 -2
- package/dist/cjs/pds-modal-header.cjs.entry.js +2 -2
- package/dist/cjs/pds-modal.cjs.entry.js +173 -14
- package/dist/cjs/pds-multiselect.cjs.entry.js +6 -6
- package/dist/cjs/pds-popover.cjs.entry.js +2 -2
- package/dist/cjs/pds-progress.cjs.entry.js +4 -2
- package/dist/cjs/pds-property.cjs.entry.js +2 -2
- package/dist/cjs/pds-radio-group.cjs.entry.js +5 -5
- package/dist/cjs/pds-radio.cjs.entry.js +6 -6
- package/dist/cjs/pds-row.cjs.entry.js +2 -2
- package/dist/cjs/pds-select.cjs.entry.js +3 -3
- package/dist/cjs/pds-sortable-item.cjs.entry.js +3 -3
- package/dist/cjs/pds-sortable.cjs.entry.js +2 -2
- package/dist/cjs/pds-switch.cjs.entry.js +6 -6
- package/dist/cjs/pds-tab.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-body.cjs.entry.js +2 -2
- package/dist/cjs/pds-table-cell.cjs.entry.js +4 -4
- package/dist/cjs/pds-table-head-cell.cjs.entry.js +4 -4
- package/dist/cjs/pds-table-head.cjs.entry.js +2 -2
- package/dist/cjs/pds-table-row.cjs.entry.js +2 -2
- package/dist/cjs/pds-table.cjs.entry.js +1 -1
- package/dist/cjs/pds-tabpanel.cjs.entry.js +2 -2
- package/dist/cjs/pds-tabs.cjs.entry.js +2 -2
- package/dist/cjs/pds-text.cjs.entry.js +7 -25
- package/dist/cjs/pds-textarea.cjs.entry.js +7 -7
- package/dist/cjs/pds-toast.cjs.entry.js +4 -4
- package/dist/cjs/pds-tooltip.cjs.entry.js +3 -3
- package/dist/cjs/pine-core.cjs.js +2 -2
- package/dist/cjs/{truncation-tooltip-CVzAha5B.js → truncation-tooltip-Bps7_rUy.js} +51 -1
- package/dist/cjs/{utils-7jx8T2mW.js → utils-KWALOgy9.js} +16 -2
- package/dist/collection/collection-manifest.json +4 -0
- package/dist/collection/components/pds-button/pds-button.css +1 -2
- package/dist/collection/components/pds-checkbox/pds-checkbox.css +6 -4
- package/dist/collection/components/pds-chip/pds-chip.css +60 -6
- package/dist/collection/components/pds-chip/pds-chip.js +82 -8
- package/dist/collection/components/pds-chip/pds-chip.tokens.css +16 -0
- package/dist/collection/components/pds-chip/stories/pds-chip.stories.js +39 -1
- package/dist/collection/components/pds-combobox/pds-combobox.css +1 -2
- package/dist/collection/components/pds-combobox/pds-combobox.js +1 -1
- package/dist/collection/components/pds-copytext/pds-copytext.js +5 -1
- package/dist/collection/components/pds-drawer/pds-drawer-content/pds-drawer-content.css +22 -0
- package/dist/collection/components/pds-drawer/pds-drawer-content/pds-drawer-content.js +29 -0
- package/dist/collection/components/pds-drawer/pds-drawer-footer/pds-drawer-footer.css +15 -0
- package/dist/collection/components/pds-drawer/pds-drawer-footer/pds-drawer-footer.js +23 -0
- package/dist/collection/components/pds-drawer/pds-drawer-header/pds-drawer-header.css +15 -0
- package/dist/collection/components/pds-drawer/pds-drawer-header/pds-drawer-header.js +23 -0
- package/dist/collection/components/pds-drawer/pds-drawer.css +36 -0
- package/dist/collection/components/pds-drawer/pds-drawer.js +362 -0
- package/dist/collection/components/pds-drawer/stories/pds-drawer.stories.js +72 -0
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js +1 -1
- 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-link/pds-link.js +2 -2
- package/dist/collection/components/pds-loader/pds-loader.js +1 -1
- package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js +2 -2
- package/dist/collection/components/pds-modal/pds-modal-footer/pds-modal-footer.js +1 -1
- package/dist/collection/components/pds-modal/pds-modal-header/pds-modal-header.js +1 -1
- package/dist/collection/components/pds-modal/pds-modal.css +4 -0
- package/dist/collection/components/pds-modal/pds-modal.js +209 -16
- package/dist/collection/components/pds-modal/stories/pds-modal.stories.js +14 -0
- 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.js +1 -1
- package/dist/collection/components/pds-progress/pds-progress.js +3 -1
- package/dist/collection/components/pds-property/pds-property.js +1 -1
- package/dist/collection/components/pds-radio/pds-radio.css +1 -2
- package/dist/collection/components/pds-radio/pds-radio.js +3 -3
- package/dist/collection/components/pds-radio-group/pds-radio-group.js +3 -3
- package/dist/collection/components/pds-row/pds-row.js +1 -1
- package/dist/collection/components/pds-select/pds-select.js +1 -1
- 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.css +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 +3 -3
- 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-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 +2 -2
- package/dist/collection/components/pds-textarea/pds-textarea.js +4 -4
- package/dist/collection/components/pds-toast/pds-toast.js +3 -3
- package/dist/collection/components/pds-tooltip/pds-tooltip.js +2 -2
- package/dist/collection/index.js +1 -0
- package/dist/collection/utils/test/reduced-motion.js +78 -0
- package/dist/collection/utils/truncation-tooltip.js +51 -1
- package/dist/collection/utils/utils.js +16 -2
- package/dist/docs.json +492 -15
- package/dist/esm/{index-Bu9gFIxM.js → index-BU1hN5Vy.js} +1 -1
- package/dist/esm/{index-CTLu1TM4.js → index-DcT8--Dn.js} +1 -1
- package/dist/esm/index.js +19 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mock-pds-modal.entry.js +3 -3
- package/dist/esm/pds-accordion.entry.js +2 -2
- package/dist/esm/pds-alert.entry.js +1 -1
- package/dist/esm/pds-avatar.entry.js +2 -2
- package/dist/esm/pds-box.entry.js +2 -2
- package/dist/esm/pds-button.entry.js +4 -4
- package/dist/esm/pds-checkbox.entry.js +3 -3
- package/dist/esm/pds-chip.entry.js +46 -12
- package/dist/esm/pds-combobox.entry.js +3 -3
- package/dist/esm/pds-container.entry.js +1 -1
- package/dist/esm/pds-copytext.entry.js +8 -4
- package/dist/esm/pds-divider.entry.js +1 -1
- package/dist/esm/pds-drawer-content.entry.js +21 -0
- package/dist/esm/pds-drawer-footer.entry.js +21 -0
- package/dist/esm/pds-drawer-header.entry.js +21 -0
- package/dist/esm/pds-drawer.entry.js +135 -0
- package/dist/esm/pds-dropdown-menu-item.entry.js +2 -2
- package/dist/esm/pds-dropdown-menu-separator.entry.js +2 -2
- package/dist/esm/pds-dropdown-menu.entry.js +2 -2
- package/dist/esm/pds-filter.entry.js +3 -3
- package/dist/esm/pds-filters.entry.js +2 -2
- package/dist/esm/pds-icon.entry.js +2 -2
- package/dist/esm/pds-image.entry.js +3 -3
- package/dist/esm/pds-input.entry.js +5 -5
- package/dist/esm/pds-link.entry.js +5 -5
- package/dist/esm/pds-loader.entry.js +2 -2
- package/dist/esm/pds-modal-content.entry.js +3 -3
- package/dist/esm/pds-modal-footer.entry.js +2 -2
- package/dist/esm/pds-modal-header.entry.js +2 -2
- package/dist/esm/pds-modal.entry.js +173 -14
- package/dist/esm/pds-multiselect.entry.js +6 -6
- package/dist/esm/pds-popover.entry.js +2 -2
- package/dist/esm/pds-progress.entry.js +4 -2
- package/dist/esm/pds-property.entry.js +2 -2
- package/dist/esm/pds-radio-group.entry.js +5 -5
- package/dist/esm/pds-radio.entry.js +6 -6
- package/dist/esm/pds-row.entry.js +2 -2
- package/dist/esm/pds-select.entry.js +3 -3
- package/dist/esm/pds-sortable-item.entry.js +3 -3
- package/dist/esm/pds-sortable.entry.js +2 -2
- package/dist/esm/pds-switch.entry.js +6 -6
- package/dist/esm/pds-tab.entry.js +1 -1
- package/dist/esm/pds-table-body.entry.js +2 -2
- package/dist/esm/pds-table-cell.entry.js +4 -4
- package/dist/esm/pds-table-head-cell.entry.js +4 -4
- package/dist/esm/pds-table-head.entry.js +2 -2
- package/dist/esm/pds-table-row.entry.js +2 -2
- package/dist/esm/pds-table.entry.js +1 -1
- package/dist/esm/pds-tabpanel.entry.js +2 -2
- package/dist/esm/pds-tabs.entry.js +2 -2
- package/dist/esm/pds-text.entry.js +5 -23
- package/dist/esm/pds-textarea.entry.js +7 -7
- package/dist/esm/pds-toast.entry.js +4 -4
- package/dist/esm/pds-tooltip.entry.js +3 -3
- package/dist/esm/pine-core.js +3 -3
- package/dist/esm/{truncation-tooltip-Blk4GigP.js → truncation-tooltip-CdtEBn_5.js} +51 -1
- package/dist/esm/{utils-tJa4KYNO.js → utils-u_0lxWnH.js} +16 -2
- package/dist/esm-es5/{index-CTLu1TM4.js → index-DcT8--Dn.js} +2 -2
- package/dist/esm-es5/index.js +1 -0
- 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-divider.entry.js +1 -1
- package/dist/esm-es5/pds-drawer-content.entry.js +1 -0
- package/dist/esm-es5/pds-drawer-footer.entry.js +1 -0
- package/dist/esm-es5/pds-drawer-header.entry.js +1 -0
- package/dist/esm-es5/pds-drawer.entry.js +1 -0
- 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/truncation-tooltip-CdtEBn_5.js +1 -0
- package/dist/pine-core/index.esm.js +1 -0
- package/dist/pine-core/p-003df3b3.entry.js +1 -0
- package/dist/pine-core/{p-92ef1608.system.entry.js → p-02452806.system.entry.js} +1 -1
- package/dist/pine-core/{p-5d585aa8.entry.js → p-026ee6de.entry.js} +1 -1
- package/dist/pine-core/{p-463eb0e6.system.entry.js → p-03f3fc92.system.entry.js} +1 -1
- package/dist/pine-core/p-06375326.system.entry.js +1 -0
- package/dist/pine-core/p-08196d6c.entry.js +1 -0
- package/dist/pine-core/{p-bf3afa16.system.entry.js → p-089606b8.system.entry.js} +1 -1
- package/dist/pine-core/p-12941e0d.entry.js +1 -0
- package/dist/pine-core/{p-3b9e77b3.entry.js → p-13bb89ff.entry.js} +1 -1
- package/dist/pine-core/{p-1649dd61.system.entry.js → p-15a0fa0a.system.entry.js} +1 -1
- package/dist/pine-core/{p-3050c66f.entry.js → p-1abae35f.entry.js} +1 -1
- package/dist/pine-core/p-1df5e088.entry.js +1 -0
- package/dist/pine-core/{p-460aa66f.system.entry.js → p-20753e42.system.entry.js} +1 -1
- package/dist/pine-core/{p-12ec8186.system.entry.js → p-24214ab9.system.entry.js} +1 -1
- package/dist/pine-core/p-250011ba.entry.js +1 -0
- package/dist/pine-core/{p-9b68669f.entry.js → p-2b420257.entry.js} +1 -1
- package/dist/pine-core/{p-86bc2a0c.entry.js → p-2bb101c2.entry.js} +1 -1
- package/dist/pine-core/{p-6089d811.entry.js → p-2dbc90ba.entry.js} +1 -1
- package/dist/pine-core/{p-2fd71a0c.entry.js → p-317337e4.entry.js} +1 -1
- package/dist/pine-core/{p-a9e54964.entry.js → p-32fc82c2.entry.js} +1 -1
- package/dist/pine-core/{p-714bfdbd.entry.js → p-35edd8b0.entry.js} +1 -1
- package/dist/pine-core/p-375eb7f4.entry.js +1 -0
- package/dist/pine-core/{p-e1653d75.system.entry.js → p-3b555f06.system.entry.js} +1 -1
- package/dist/pine-core/p-3b796898.entry.js +1 -0
- package/dist/pine-core/{p-c0753d9f.entry.js → p-3c5489ce.entry.js} +1 -1
- package/dist/pine-core/{p-8702635d.system.entry.js → p-3e868906.system.entry.js} +1 -1
- package/dist/pine-core/{p-eb4058ed.system.entry.js → p-441682f4.system.entry.js} +1 -1
- package/dist/pine-core/{p-7b1e3e91.entry.js → p-44222439.entry.js} +1 -1
- package/dist/pine-core/p-45d55983.entry.js +1 -0
- package/dist/pine-core/{p-544ccf67.entry.js → p-464f23e6.entry.js} +1 -1
- package/dist/pine-core/{p-aecaff12.entry.js → p-49c6112a.entry.js} +1 -1
- package/dist/pine-core/p-4bd57896.system.entry.js +1 -0
- package/dist/pine-core/{p-b0531455.entry.js → p-4cbb691f.entry.js} +1 -1
- package/dist/pine-core/{p-46f0dda5.system.entry.js → p-4ebdb90b.system.entry.js} +1 -1
- package/dist/pine-core/{p-b109de2e.entry.js → p-4f5aacd9.entry.js} +1 -1
- package/dist/pine-core/{p-9187c26c.system.entry.js → p-55532d56.system.entry.js} +1 -1
- package/dist/pine-core/{p-f35596cd.entry.js → p-558ac401.entry.js} +1 -1
- package/dist/pine-core/{p-c09dab1a.system.entry.js → p-57784f2f.system.entry.js} +1 -1
- package/dist/pine-core/p-5a8345e2.entry.js +1 -0
- package/dist/pine-core/{p-4923a3fe.entry.js → p-5c5bd609.entry.js} +1 -1
- package/dist/pine-core/p-5d2f95bd.entry.js +1 -0
- package/dist/pine-core/p-5f3d0c86.system.entry.js +1 -0
- package/dist/pine-core/{p-a3c4c0ee.entry.js → p-5f5339ab.entry.js} +1 -1
- package/dist/pine-core/{p-bfa640f4.system.entry.js → p-67fc26e5.system.entry.js} +1 -1
- package/dist/pine-core/p-6a6a767b.system.entry.js +1 -0
- package/dist/pine-core/p-6b260a97.entry.js +1 -0
- package/dist/pine-core/{p-d804d37b.system.entry.js → p-6b3d8c2b.system.entry.js} +1 -1
- package/dist/pine-core/p-6dabeebc.system.entry.js +3 -0
- package/dist/pine-core/{p-d157a33a.entry.js → p-70891202.entry.js} +1 -1
- package/dist/pine-core/p-70fb83d4.entry.js +1 -0
- package/dist/pine-core/{p-7a1971ec.entry.js → p-73c3a73f.entry.js} +1 -1
- package/dist/pine-core/p-73fa955a.system.entry.js +1 -0
- package/dist/pine-core/p-755e0b3c.system.entry.js +1 -0
- package/dist/pine-core/p-77082557.system.entry.js +1 -0
- package/dist/pine-core/{p-65557500.entry.js → p-7e4729e0.entry.js} +1 -1
- package/dist/pine-core/p-8b051229.entry.js +1 -0
- package/dist/pine-core/{p-c713ffc6.system.entry.js → p-8d1e7b3c.system.entry.js} +1 -1
- package/dist/pine-core/{p-63f5f66f.system.entry.js → p-8d8a8550.system.entry.js} +1 -1
- package/dist/pine-core/{p-2d4b9253.entry.js → p-93486f2e.entry.js} +1 -1
- package/dist/pine-core/{p-b255d3b7.entry.js → p-93ae562d.entry.js} +1 -1
- package/dist/pine-core/{p-ce79321b.system.entry.js → p-93c52e2b.system.entry.js} +1 -1
- package/dist/pine-core/{p-08151143.system.entry.js → p-95b8bece.system.entry.js} +1 -1
- package/dist/pine-core/{p-af4a24d9.entry.js → p-95defb53.entry.js} +1 -1
- package/dist/pine-core/{p-92c79ed4.system.entry.js → p-99f300ef.system.entry.js} +1 -1
- package/dist/pine-core/p-9d77f2f8.system.entry.js +1 -0
- package/dist/pine-core/p-9d902000.system.entry.js +1 -0
- package/dist/pine-core/p-9ef355b7.entry.js +1 -0
- package/dist/pine-core/p-B2nn1gSd.js +1 -0
- package/dist/pine-core/{p-CRCxGYgw.system.js → p-B2qvvB3q.system.js} +1 -1
- package/dist/pine-core/p-BI7Ml0VF.system.js +1 -0
- package/dist/pine-core/p-CJ8t3EBJ.system.js +2 -0
- package/dist/pine-core/p-DcT8--Dn.js +2 -0
- package/dist/pine-core/p-G3CPPJEt.system.js +1 -0
- package/dist/pine-core/p-a009ab10.system.entry.js +1 -0
- package/dist/pine-core/p-a616385b.system.entry.js +1 -0
- package/dist/pine-core/{p-bba759f8.system.entry.js → p-a6a269da.system.entry.js} +1 -1
- package/dist/pine-core/p-a8cd2ab5.entry.js +1 -0
- package/dist/pine-core/p-a8f1a48d.entry.js +1 -0
- package/dist/pine-core/p-b0becff3.system.entry.js +1 -0
- package/dist/pine-core/p-b45b8f8b.system.entry.js +1 -0
- package/dist/pine-core/{p-e16dfb32.system.entry.js → p-b53d9620.system.entry.js} +1 -1
- package/dist/pine-core/p-b85bb61d.system.entry.js +1 -0
- package/dist/pine-core/{p-ae296598.entry.js → p-b8a5597d.entry.js} +1 -1
- package/dist/pine-core/p-b9a857fc.system.entry.js +1 -0
- package/dist/pine-core/p-bd9b2931.system.entry.js +1 -0
- package/dist/pine-core/p-bdded57a.system.entry.js +1 -0
- package/dist/pine-core/{p-4dad0878.entry.js → p-bf025e38.entry.js} +1 -1
- package/dist/pine-core/{p-0fcda1ec.entry.js → p-c08b1697.entry.js} +1 -1
- package/dist/pine-core/p-c1a65082.entry.js +1 -0
- package/dist/pine-core/p-c1d1befb.system.entry.js +1 -0
- package/dist/pine-core/{p-1e952dbb.entry.js → p-c5b6b545.entry.js} +2 -2
- package/dist/pine-core/{p-ce63f726.system.entry.js → p-c6426e16.system.entry.js} +1 -1
- package/dist/pine-core/{p-d54af26c.system.entry.js → p-cfcb89d1.system.entry.js} +1 -1
- package/dist/pine-core/{p-aa208514.entry.js → p-d33d65f6.entry.js} +1 -1
- package/dist/pine-core/p-d70aa0c7.system.entry.js +1 -0
- package/dist/pine-core/{p-902b3e8b.system.entry.js → p-d9c1ee36.system.entry.js} +1 -1
- package/dist/pine-core/{p-e450eb27.system.entry.js → p-df285ece.system.entry.js} +1 -1
- package/dist/pine-core/{p-04a30a2d.system.entry.js → p-e039ebb6.system.entry.js} +1 -1
- package/dist/pine-core/{p-4d6944aa.entry.js → p-e055c543.entry.js} +1 -1
- package/dist/pine-core/{p-2af19aa7.entry.js → p-e08e4ca7.entry.js} +1 -1
- package/dist/pine-core/p-ea986474.system.entry.js +1 -0
- package/dist/pine-core/{p-afd07d5b.entry.js → p-ec04d4c3.entry.js} +1 -1
- package/dist/pine-core/p-ee114aef.entry.js +1 -0
- package/dist/pine-core/{p-d415bb01.entry.js → p-ee997fbf.entry.js} +2 -2
- package/dist/pine-core/{p-8e6a8a8e.entry.js → p-f1365550.entry.js} +1 -1
- package/dist/pine-core/{p-fcf91f14.system.entry.js → p-f26dcbc2.system.entry.js} +1 -1
- package/dist/pine-core/{p-cf72e9b1.system.entry.js → p-f5cf98be.system.entry.js} +1 -1
- package/dist/pine-core/{p-b17fa86a.system.entry.js → p-f682f08a.system.entry.js} +1 -1
- package/dist/pine-core/p-f89197c9.entry.js +1 -0
- package/dist/pine-core/p-f9f7101e.entry.js +1 -0
- package/dist/pine-core/{p-226232a7.system.entry.js → p-fa2a786d.system.entry.js} +1 -1
- package/dist/pine-core/{p-7c18e9e8.system.entry.js → p-fa8d3155.system.entry.js} +2 -2
- package/dist/pine-core/p-fb774f89.system.entry.js +1 -0
- package/dist/pine-core/{p-ba8bd9dc.system.entry.js → p-fbb72e66.system.entry.js} +1 -1
- package/dist/pine-core/pine-core.css +1 -1
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/pine-core/pine-core.js +1 -1
- package/dist/types/components/pds-chip/pds-chip.d.ts +12 -0
- package/dist/types/components/pds-drawer/pds-drawer-content/pds-drawer-content.d.ts +11 -0
- package/dist/types/components/pds-drawer/pds-drawer-footer/pds-drawer-footer.d.ts +5 -0
- package/dist/types/components/pds-drawer/pds-drawer-header/pds-drawer-header.d.ts +5 -0
- package/dist/types/components/pds-drawer/pds-drawer.d.ts +78 -0
- package/dist/types/components/pds-modal/pds-modal.d.ts +47 -2
- package/dist/types/components/pds-table/pds-table-cell/pds-table-cell.d.ts +2 -1
- package/dist/types/components/pds-text/pds-text.d.ts +2 -1
- package/dist/types/components.d.ts +253 -11
- package/dist/types/index.d.ts +1 -0
- package/dist/types/utils/test/reduced-motion.d.ts +30 -0
- package/dist/types/utils/truncation-tooltip.d.ts +12 -0
- package/dist/types/utils/types.d.ts +2 -1
- package/dist/types/utils/utils.d.ts +16 -1
- package/dist/vscode.html-data.json +169 -6
- package/hydrate/index.js +623 -115
- package/hydrate/index.mjs +623 -115
- package/package.json +7 -3
- package/dist/esm-es5/truncation-tooltip-Blk4GigP.js +0 -1
- package/dist/pine-core/p-056667f0.entry.js +0 -1
- package/dist/pine-core/p-0d73d473.entry.js +0 -1
- package/dist/pine-core/p-0e89a189.entry.js +0 -1
- package/dist/pine-core/p-1ba361cb.entry.js +0 -1
- package/dist/pine-core/p-210f0994.system.entry.js +0 -1
- package/dist/pine-core/p-222ff58e.system.entry.js +0 -1
- package/dist/pine-core/p-228a9068.system.entry.js +0 -1
- package/dist/pine-core/p-2e214db6.entry.js +0 -1
- package/dist/pine-core/p-33de0eb7.system.entry.js +0 -1
- package/dist/pine-core/p-3aec9079.entry.js +0 -1
- package/dist/pine-core/p-3cdc1a5b.entry.js +0 -1
- package/dist/pine-core/p-4faff617.entry.js +0 -1
- package/dist/pine-core/p-50e0f726.system.entry.js +0 -1
- package/dist/pine-core/p-520f7a5b.entry.js +0 -1
- package/dist/pine-core/p-53999cd6.system.entry.js +0 -1
- package/dist/pine-core/p-5c239f0a.entry.js +0 -1
- package/dist/pine-core/p-611f68b7.system.entry.js +0 -1
- package/dist/pine-core/p-7691a875.system.entry.js +0 -3
- package/dist/pine-core/p-85434de8.system.entry.js +0 -1
- package/dist/pine-core/p-897fe88c.entry.js +0 -1
- package/dist/pine-core/p-9487ff20.system.entry.js +0 -1
- package/dist/pine-core/p-9507eb49.system.entry.js +0 -1
- package/dist/pine-core/p-97198cb6.system.entry.js +0 -1
- package/dist/pine-core/p-9a7294e7.system.entry.js +0 -1
- package/dist/pine-core/p-9fd1e8f4.system.entry.js +0 -1
- package/dist/pine-core/p-BNSGedhN.js +0 -1
- package/dist/pine-core/p-CTLu1TM4.js +0 -2
- package/dist/pine-core/p-DAIsVNlL.system.js +0 -2
- package/dist/pine-core/p-Dr-FzkdE.system.js +0 -1
- package/dist/pine-core/p-YWpyar7R.system.js +0 -1
- package/dist/pine-core/p-a53222f7.entry.js +0 -1
- package/dist/pine-core/p-a7eabc0c.system.entry.js +0 -1
- package/dist/pine-core/p-a8ab4d9b.entry.js +0 -1
- package/dist/pine-core/p-b52deffb.entry.js +0 -1
- package/dist/pine-core/p-b6c2090f.system.entry.js +0 -1
- package/dist/pine-core/p-d27ef352.system.entry.js +0 -1
- package/dist/pine-core/p-e11795db.system.entry.js +0 -1
- package/dist/pine-core/p-f09ce49e.entry.js +0 -1
- package/dist/pine-core/p-f3683be8.entry.js +0 -1
- /package/dist/esm-es5/{index-Bu9gFIxM.js → index-BU1hN5Vy.js} +0 -0
- /package/dist/esm-es5/{utils-tJa4KYNO.js → utils-u_0lxWnH.js} +0 -0
- /package/dist/pine-core/{p-Bu9gFIxM.js → p-BU1hN5Vy.js} +0 -0
- /package/dist/pine-core/{p-BG6uGRQj.system.js → p-D_I-k33A.system.js} +0 -0
- /package/dist/pine-core/{p-Bjc6fc_Y.system.js → p-ctdGub9B.system.js} +0 -0
- /package/dist/pine-core/{p-tJa4KYNO.js → p-u_0lxWnH.js} +0 -0
package/hydrate/index.mjs
CHANGED
|
@@ -5444,7 +5444,7 @@ var setScopedSSR = (opts) => {
|
|
|
5444
5444
|
var needsScopedSSR = () => scopedSSR;
|
|
5445
5445
|
var scopedSSR = false;
|
|
5446
5446
|
|
|
5447
|
-
const pdsModalCss$1 = () => `.pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop.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--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}`;
|
|
5447
|
+
const pdsModalCss$1 = () => `.pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop.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}`;
|
|
5448
5448
|
|
|
5449
5449
|
/**
|
|
5450
5450
|
* Mock PdsModal component for testing purposes
|
|
@@ -5528,7 +5528,7 @@ class MockPdsModal {
|
|
|
5528
5528
|
'pds-modal__backdrop': true,
|
|
5529
5529
|
'open': this.open,
|
|
5530
5530
|
};
|
|
5531
|
-
return (hAsync("div", { key: '
|
|
5531
|
+
return (hAsync("div", { key: '1207382ec39e45f95449791cd9fbf3ad54a17564', class: backdropClasses }, hAsync("div", { key: '865cff8feaf031750e6763d60580f9060dfc0c91', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, hAsync("div", { key: 'b49ba7c717999b53578056ad35c4ec270dbdfd01', class: "pds-modal__header" }, hAsync("slot", { key: '2c06b0f0c4692f1991eb389a73b751d38796c1cf', name: "header" })), hAsync("div", { key: 'ca0e6f324db12de5bd0c21b53bf888ab44c0d34c', class: "pds-modal-content" }, hAsync("slot", { key: 'cef74e83f58195b574f9a290f748cecb2561668e' })), hAsync("div", { key: '65518e197e80fa0cd8ea8cbbd9bb10a064e251ca', class: "pds-modal__footer" }, hAsync("slot", { key: '8cd72b932b7c4d31cf9ecb8f0c37d9a5b5ca7594', name: "footer" })))));
|
|
5532
5532
|
}
|
|
5533
5533
|
get el() { return getElement(this); }
|
|
5534
5534
|
static get style() { return pdsModalCss$1(); }
|
|
@@ -5550,7 +5550,7 @@ class MockPdsModal {
|
|
|
5550
5550
|
}; }
|
|
5551
5551
|
}
|
|
5552
5552
|
|
|
5553
|
-
/* pds-icons v10.
|
|
5553
|
+
/* pds-icons v10.5.1, ES Modules */
|
|
5554
5554
|
|
|
5555
5555
|
const addCircle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m11-5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1'/></svg>";
|
|
5556
5556
|
const caretDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414'/></svg>";
|
|
@@ -5892,9 +5892,16 @@ const debounce = (func, wait = 0) => {
|
|
|
5892
5892
|
timer = setTimeout(func, wait, ...args);
|
|
5893
5893
|
};
|
|
5894
5894
|
};
|
|
5895
|
-
// Add shared color normalization utility to unify token handling across components
|
|
5896
5895
|
/**
|
|
5897
|
-
* Normalizes color values to ensure consistent CSS variable usage
|
|
5896
|
+
* Normalizes color values to ensure consistent CSS variable usage.
|
|
5897
|
+
*
|
|
5898
|
+
* This is the single low-level primitive for color-prop normalization in
|
|
5899
|
+
* Pine. A component with its own semantic-keyword set (e.g. pds-chip's
|
|
5900
|
+
* sentiment-to-dot-color map) should call this directly with its own
|
|
5901
|
+
* `semanticMap` rather than inventing a new normalization helper. Reach for
|
|
5902
|
+
* `setColor` below only when its specific text-role semantic set and
|
|
5903
|
+
* `--color` output key already match what the component needs.
|
|
5904
|
+
*
|
|
5898
5905
|
* @param value - Raw token (--token), CSS variable (var(--token)), semantic name, or literal color
|
|
5899
5906
|
* @param options.semanticMap - Optional mapping of semantic names to CSS variables
|
|
5900
5907
|
* @returns Normalized color value or undefined for invalid inputs
|
|
@@ -5919,6 +5926,13 @@ const normalizeColorValue = (value, options) => {
|
|
|
5919
5926
|
// Otherwise treat as literal CSS color value
|
|
5920
5927
|
return trimmed;
|
|
5921
5928
|
};
|
|
5929
|
+
/**
|
|
5930
|
+
* Convenience wrapper around `normalizeColorValue` for the common text-role
|
|
5931
|
+
* semantic set (primary/secondary/accent/etc.), returned as a `--color`
|
|
5932
|
+
* custom property. If a component needs a different semantic map or a
|
|
5933
|
+
* different custom-property name (e.g. pds-chip's dot/icon-specific tokens),
|
|
5934
|
+
* call `normalizeColorValue` directly instead of extending this function.
|
|
5935
|
+
*/
|
|
5922
5936
|
const setColor = (color, customColors) => {
|
|
5923
5937
|
// Return an empty object for empty/whitespace/undefined inputs to avoid invalid CSS styles
|
|
5924
5938
|
if (!color)
|
|
@@ -6225,7 +6239,7 @@ class PdsBox {
|
|
|
6225
6239
|
}; }
|
|
6226
6240
|
}
|
|
6227
6241
|
|
|
6228
|
-
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-white);--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)}`;
|
|
6242
|
+
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)}`;
|
|
6229
6243
|
|
|
6230
6244
|
/**
|
|
6231
6245
|
* @part button - Exposes the underlying button (or anchor) element for styling, including custom size, shape, or surface on icon-only placements (e.g. a compact square or inverse icon button).
|
|
@@ -6602,7 +6616,7 @@ const inheritAriaAttributes = (el, ignoreList) => {
|
|
|
6602
6616
|
|
|
6603
6617
|
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)}`;
|
|
6604
6618
|
|
|
6605
|
-
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: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-
|
|
6619
|
+
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)}.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)}`;
|
|
6606
6620
|
|
|
6607
6621
|
class PdsCheckbox {
|
|
6608
6622
|
constructor(hostRef) {
|
|
@@ -8420,10 +8434,12 @@ function isOverflowing(el) {
|
|
|
8420
8434
|
* will display a tooltip showing the full text content. The tooltip is
|
|
8421
8435
|
* rendered as a portal on document.body and positioned with Floating UI.
|
|
8422
8436
|
*
|
|
8437
|
+
* Also owns the element's `tabindex` while it is clipped — see syncTabIndex.
|
|
8438
|
+
*
|
|
8423
8439
|
* @returns A cleanup function that removes all listeners, observers, and DOM elements.
|
|
8424
8440
|
*/
|
|
8425
8441
|
function setupTruncationTooltip(options) {
|
|
8426
|
-
const { hostEl, contentEl, getTooltipText, placement = 'top' } = options;
|
|
8442
|
+
const { hostEl, contentEl, getTooltipText, placement = 'top', manageTabIndex = true } = options;
|
|
8427
8443
|
injectStyles();
|
|
8428
8444
|
let portalEl = null;
|
|
8429
8445
|
let isHovering = false;
|
|
@@ -8432,6 +8448,34 @@ function setupTruncationTooltip(options) {
|
|
|
8432
8448
|
let hideTimeout = null;
|
|
8433
8449
|
let resizeObserver = null;
|
|
8434
8450
|
let resizeDebounce = null;
|
|
8451
|
+
let ownsTabIndex = false;
|
|
8452
|
+
let disposed = false;
|
|
8453
|
+
/**
|
|
8454
|
+
* The tab stop exists only to give the tooltip a focusable anchor, so it
|
|
8455
|
+
* belongs on the element while the text is actually clipped and not a moment
|
|
8456
|
+
* longer. Deriving it from the caller's prop instead leaves a dead stop on
|
|
8457
|
+
* every element that opted into truncation but happens to fit — in a row of
|
|
8458
|
+
* chips that doubles the tab stops, half of them landing on a span with no
|
|
8459
|
+
* role, no name of its own, and nothing to reveal.
|
|
8460
|
+
*
|
|
8461
|
+
* Ownership is tracked rather than inferred from the value: if the consumer
|
|
8462
|
+
* already put a tabindex on the element (a roving -1, say), that is theirs
|
|
8463
|
+
* and we never touch it.
|
|
8464
|
+
*/
|
|
8465
|
+
function syncTabIndex() {
|
|
8466
|
+
if (!manageTabIndex)
|
|
8467
|
+
return;
|
|
8468
|
+
if (isOverflowing(contentEl)) {
|
|
8469
|
+
if (!ownsTabIndex && contentEl.hasAttribute('tabindex'))
|
|
8470
|
+
return;
|
|
8471
|
+
ownsTabIndex = true;
|
|
8472
|
+
contentEl.setAttribute('tabindex', '0');
|
|
8473
|
+
}
|
|
8474
|
+
else if (ownsTabIndex) {
|
|
8475
|
+
ownsTabIndex = false;
|
|
8476
|
+
contentEl.removeAttribute('tabindex');
|
|
8477
|
+
}
|
|
8478
|
+
}
|
|
8435
8479
|
// Use ResizeObserver to re-evaluate overflow when the element resizes
|
|
8436
8480
|
// Debounced to prevent performance issues during rapid window resizing
|
|
8437
8481
|
if (typeof ResizeObserver !== 'undefined') {
|
|
@@ -8441,6 +8485,7 @@ function setupTruncationTooltip(options) {
|
|
|
8441
8485
|
}
|
|
8442
8486
|
resizeDebounce = setTimeout(() => {
|
|
8443
8487
|
resizeDebounce = null;
|
|
8488
|
+
syncTabIndex();
|
|
8444
8489
|
// If tooltip is showing but text no longer overflows, hide it
|
|
8445
8490
|
if (portalEl && portalEl.isConnected && !isOverflowing(contentEl)) {
|
|
8446
8491
|
hideTooltip();
|
|
@@ -8449,6 +8494,18 @@ function setupTruncationTooltip(options) {
|
|
|
8449
8494
|
});
|
|
8450
8495
|
resizeObserver.observe(contentEl);
|
|
8451
8496
|
}
|
|
8497
|
+
// Measure now so the common case is right on the first paint, rather than
|
|
8498
|
+
// waiting out the observer's debounce.
|
|
8499
|
+
syncTabIndex();
|
|
8500
|
+
// A web font swapping in changes scrollWidth without changing the clipped
|
|
8501
|
+
// box's size, so ResizeObserver never fires for it — the element would keep
|
|
8502
|
+
// whatever the fallback font measured. Re-measure once the fonts settle.
|
|
8503
|
+
if (typeof document !== 'undefined' && document.fonts !== undefined) {
|
|
8504
|
+
document.fonts.ready.then(() => {
|
|
8505
|
+
if (!disposed)
|
|
8506
|
+
syncTabIndex();
|
|
8507
|
+
});
|
|
8508
|
+
}
|
|
8452
8509
|
function createPortal() {
|
|
8453
8510
|
if (portalEl)
|
|
8454
8511
|
return;
|
|
@@ -8580,6 +8637,7 @@ function setupTruncationTooltip(options) {
|
|
|
8580
8637
|
hostEl.addEventListener('focusout', handleFocusOut);
|
|
8581
8638
|
// Return cleanup function
|
|
8582
8639
|
return () => {
|
|
8640
|
+
disposed = true;
|
|
8583
8641
|
cancelHideTimeout();
|
|
8584
8642
|
if (resizeDebounce) {
|
|
8585
8643
|
clearTimeout(resizeDebounce);
|
|
@@ -8588,6 +8646,12 @@ function setupTruncationTooltip(options) {
|
|
|
8588
8646
|
if (resizeObserver) {
|
|
8589
8647
|
resizeObserver.disconnect();
|
|
8590
8648
|
}
|
|
8649
|
+
// Hand the element back as we found it — truncation may simply have been
|
|
8650
|
+
// turned off, in which case the element outlives this teardown.
|
|
8651
|
+
if (ownsTabIndex) {
|
|
8652
|
+
ownsTabIndex = false;
|
|
8653
|
+
contentEl.removeAttribute('tabindex');
|
|
8654
|
+
}
|
|
8591
8655
|
hostEl.removeEventListener('mouseenter', handleMouseEnter);
|
|
8592
8656
|
hostEl.removeEventListener('mouseleave', handleMouseLeave);
|
|
8593
8657
|
hostEl.removeEventListener('focusin', handleFocusIn);
|
|
@@ -8596,13 +8660,25 @@ function setupTruncationTooltip(options) {
|
|
|
8596
8660
|
};
|
|
8597
8661
|
}
|
|
8598
8662
|
|
|
8599
|
-
const pdsChipTokensCss = () => `:host{--pine-chip-color-accent:var(--pine-color-purple-100);--pine-chip-color-accent-hover:var(--pine-color-purple-300);--pine-chip-color-accent-dot:var(--pine-color-purple-600);--pine-chip-color-accent-text:var(--pine-color-purple-950);--pine-chip-color-danger:var(--pine-color-red-100);--pine-chip-color-danger-hover:var(--pine-color-red-300);--pine-chip-color-danger-dot:var(--pine-color-red-600);--pine-chip-color-danger-text:var(--pine-color-red-950);--pine-chip-color-info:var(--pine-color-blue-100);--pine-chip-color-info-hover:var(--pine-color-blue-300);--pine-chip-color-info-dot:var(--pine-color-blue-600);--pine-chip-color-info-text:var(--pine-color-blue-950);--pine-chip-color-neutral:var(--pine-color-grey-100);--pine-chip-color-neutral-hover:var(--pine-color-grey-300);--pine-chip-color-neutral-dot:var(--pine-color-grey-600);--pine-chip-color-neutral-text:var(--pine-color-grey-950);--pine-chip-color-success:var(--pine-color-green-100);--pine-chip-color-success-hover:var(--pine-color-green-300);--pine-chip-color-success-dot:var(--pine-color-green-600);--pine-chip-color-success-text:var(--pine-color-green-950);--pine-chip-color-warning:var(--pine-color-yellow-100);--pine-chip-color-warning-hover:var(--pine-color-yellow-300);--pine-chip-color-warning-dot:var(--pine-color-yellow-600);--pine-chip-color-warning-text:var(--pine-color-yellow-950)}:host-context([data-theme=dark]){--pine-chip-color-accent:var(--pine-color-purple-900);--pine-chip-color-accent-hover:var(--pine-color-purple-800);--pine-chip-color-accent-dot:var(--pine-color-purple-400);--pine-chip-color-accent-text:var(--pine-color-purple-100);--pine-chip-color-danger:var(--pine-color-red-900);--pine-chip-color-danger-hover:var(--pine-color-red-800);--pine-chip-color-danger-dot:var(--pine-color-red-400);--pine-chip-color-danger-text:var(--pine-color-red-100);--pine-chip-color-info:var(--pine-color-blue-900);--pine-chip-color-info-hover:var(--pine-color-blue-800);--pine-chip-color-info-dot:var(--pine-color-blue-400);--pine-chip-color-info-text:var(--pine-color-blue-100);--pine-chip-color-neutral:var(--pine-color-grey-800);--pine-chip-color-neutral-hover:var(--pine-color-grey-600);--pine-chip-color-neutral-dot:var(--pine-color-grey-300);--pine-chip-color-neutral-text:var(--pine-color-grey-100);--pine-chip-color-success:var(--pine-color-green-900);--pine-chip-color-success-hover:var(--pine-color-green-800);--pine-chip-color-success-dot:var(--pine-color-green-400);--pine-chip-color-success-text:var(--pine-color-green-100);--pine-chip-color-warning:var(--pine-color-yellow-900);--pine-chip-color-warning-hover:var(--pine-color-yellow-800);--pine-chip-color-warning-dot:var(--pine-color-yellow-400);--pine-chip-color-warning-text:var(--pine-color-yellow-100)}`;
|
|
8663
|
+
const pdsChipTokensCss = () => `:host{--pine-chip-color-accent:var(--pine-color-purple-100);--pine-chip-color-accent-hover:var(--pine-color-purple-300);--pine-chip-color-accent-dot:var(--pine-color-purple-600);--pine-chip-color-accent-text:var(--pine-color-purple-950);--pine-chip-color-danger:var(--pine-color-red-100);--pine-chip-color-danger-hover:var(--pine-color-red-300);--pine-chip-color-danger-dot:var(--pine-color-red-600);--pine-chip-color-danger-text:var(--pine-color-red-950);--pine-chip-color-info:var(--pine-color-blue-100);--pine-chip-color-info-hover:var(--pine-color-blue-300);--pine-chip-color-info-dot:var(--pine-color-blue-600);--pine-chip-color-info-text:var(--pine-color-blue-950);--pine-chip-color-neutral:var(--pine-color-grey-100);--pine-chip-color-neutral-hover:var(--pine-color-grey-300);--pine-chip-color-neutral-dot:var(--pine-color-grey-600);--pine-chip-color-neutral-text:var(--pine-color-grey-950);--pine-chip-color-solid:var(--pine-color-grey-900);--pine-chip-color-solid-hover:var(--pine-color-grey-950);--pine-chip-color-solid-dot:var(--pine-color-white);--pine-chip-color-solid-text:var(--pine-color-white);--pine-chip-color-subtle:var(--pine-color-white);--pine-chip-color-subtle-hover:var(--pine-color-grey-300);--pine-chip-color-subtle-dot:var(--pine-color-grey-900);--pine-chip-color-subtle-text:var(--pine-color-grey-900);--pine-chip-color-success:var(--pine-color-green-100);--pine-chip-color-success-hover:var(--pine-color-green-300);--pine-chip-color-success-dot:var(--pine-color-green-600);--pine-chip-color-success-text:var(--pine-color-green-950);--pine-chip-color-warning:var(--pine-color-yellow-100);--pine-chip-color-warning-hover:var(--pine-color-yellow-300);--pine-chip-color-warning-dot:var(--pine-color-yellow-600);--pine-chip-color-warning-text:var(--pine-color-yellow-950)}:host-context([data-theme=dark]){--pine-chip-color-accent:var(--pine-color-purple-900);--pine-chip-color-accent-hover:var(--pine-color-purple-800);--pine-chip-color-accent-dot:var(--pine-color-purple-400);--pine-chip-color-accent-text:var(--pine-color-purple-100);--pine-chip-color-danger:var(--pine-color-red-900);--pine-chip-color-danger-hover:var(--pine-color-red-800);--pine-chip-color-danger-dot:var(--pine-color-red-400);--pine-chip-color-danger-text:var(--pine-color-red-100);--pine-chip-color-info:var(--pine-color-blue-900);--pine-chip-color-info-hover:var(--pine-color-blue-800);--pine-chip-color-info-dot:var(--pine-color-blue-400);--pine-chip-color-info-text:var(--pine-color-blue-100);--pine-chip-color-neutral:var(--pine-color-grey-800);--pine-chip-color-neutral-hover:var(--pine-color-grey-600);--pine-chip-color-neutral-dot:var(--pine-color-grey-300);--pine-chip-color-neutral-text:var(--pine-color-grey-100);--pine-chip-color-solid:var(--pine-color-white);--pine-chip-color-solid-hover:var(--pine-color-grey-100);--pine-chip-color-solid-dot:var(--pine-color-grey-900);--pine-chip-color-solid-text:var(--pine-color-grey-900);--pine-chip-color-subtle:var(--pine-color-grey-900);--pine-chip-color-subtle-hover:var(--pine-color-grey-500);--pine-chip-color-subtle-dot:var(--pine-color-white);--pine-chip-color-subtle-text:var(--pine-color-white);--pine-chip-color-success:var(--pine-color-green-900);--pine-chip-color-success-hover:var(--pine-color-green-800);--pine-chip-color-success-dot:var(--pine-color-green-400);--pine-chip-color-success-text:var(--pine-color-green-100);--pine-chip-color-warning:var(--pine-color-yellow-900);--pine-chip-color-warning-hover:var(--pine-color-yellow-800);--pine-chip-color-warning-dot:var(--pine-color-yellow-400);--pine-chip-color-warning-text:var(--pine-color-yellow-100)}`;
|
|
8600
8664
|
|
|
8601
|
-
const pdsChipCss = () => `:host{--sizing-close:var(--pine-dimension-125);-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);display:-ms-inline-flexbox;display:inline-flex;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-100)}:host(.pds-chip--accent){background:var(--pine-chip-color-accent);border:var(--pine-border-width) solid var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--pine-chip-color-accent-dot)}:host(.pds-chip--accent) .pds-chip__label,:host(.pds-chip--accent) .pds-chip__button,:host(.pds-chip--accent) .pds-chip__close{color:var(--pine-chip-color-accent-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--danger){background:var(--pine-chip-color-danger);border:var(--pine-border-width) solid var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--pine-chip-color-danger-dot)}:host(.pds-chip--danger) .pds-chip__label,:host(.pds-chip--danger) .pds-chip__button,:host(.pds-chip--danger) .pds-chip__close{color:var(--pine-chip-color-danger-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--info){background:var(--pine-chip-color-info);border:var(--pine-border-width) solid var(--pine-chip-color-info-hover)}:host(.pds-chip--info) .pds-chip__dot{background:var(--pine-chip-color-info-dot)}:host(.pds-chip--info) .pds-chip__label,:host(.pds-chip--info) .pds-chip__button,:host(.pds-chip--info) .pds-chip__close{color:var(--pine-chip-color-info-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--pine-chip-color-info-hover)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--pine-chip-color-info-hover)}:host(.pds-chip--neutral){background:var(--pine-chip-color-neutral);border:var(--pine-border-width) solid var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--pine-chip-color-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__label,:host(.pds-chip--neutral) .pds-chip__button,:host(.pds-chip--neutral) .pds-chip__close{color:var(--pine-chip-color-neutral-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--success){background:var(--pine-chip-color-success);border:var(--pine-border-width) solid var(--pine-chip-color-success-hover)}:host(.pds-chip--success) .pds-chip__dot{background:var(--pine-chip-color-success-dot)}:host(.pds-chip--success) .pds-chip__label,:host(.pds-chip--success) .pds-chip__button,:host(.pds-chip--success) .pds-chip__close{color:var(--pine-chip-color-success-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--pine-chip-color-success-hover)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--pine-chip-color-success-hover)}:host(.pds-chip--warning){background:var(--pine-chip-color-warning);border:var(--pine-border-width) solid var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--pine-chip-color-warning-dot)}:host(.pds-chip--warning) .pds-chip__label,:host(.pds-chip--warning) .pds-chip__button,:host(.pds-chip--warning) .pds-chip__close{color:var(--pine-chip-color-warning-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--pine-chip-color-warning-hover)}.pds-chip__dot{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);display:inline-block;-ms-flex-negative:0;flex-shrink:0;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}.pds-chip__label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host([max-width]){-webkit-box-sizing:border-box;box-sizing:border-box;max-width:var(--pds-chip-max-width);min-width:0}:host([max-width]) .pds-chip__label,:host([max-width]) .pds-chip__button{min-width:0}:host([max-width]) .pds-chip__label-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-chip__label,.pds-chip__button{font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--dropdown){padding:var(--pine-dimension-none)}.pds-chip__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-dimension-sm);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-025) var(--pine-dimension-100)}.pds-chip__button:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-chip__button pds-icon:last-child{-webkit-margin-end:calc(var(--pine-dimension-025) * -1);margin-inline-end:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--sizing-close);-webkit-margin-end:calc(var(--pine-dimension-xs) * -1);margin-inline-end:calc(var(--pine-dimension-xs) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{outline:var(--pine-outline-focus)}:host(.pds-chip--sm){--sizing-close:var(--pine-dimension-100);padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-100)}:host(.pds-chip--sm) .pds-chip__label,:host(.pds-chip--sm) .pds-chip__button{font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--sm.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--sm.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-100)}:host(.pds-chip--sm.pds-chip--brand) .pds-chip__label{padding:var(--pine-dimension-025) var(--pine-dimension-100)}:host(.pds-chip--lg){padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150)}:host(.pds-chip--lg) .pds-chip__label,:host(.pds-chip--lg) .pds-chip__button{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)}:host(.pds-chip--lg.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--lg.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-150)}:host(.pds-chip--brand){background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;padding:1px;position:relative}:host(.pds-chip--brand) .pds-chip__label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-100);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__button,:host(.pds-chip--brand) .pds-chip__close{color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__close:hover{background:rgba(255, 255, 255, 0.8)}`;
|
|
8665
|
+
const pdsChipCss = () => `:host{--sizing-close:var(--pine-dimension-125);-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);display:-ms-inline-flexbox;display:inline-flex;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-100)}:host(.pds-chip--accent){background:var(--pine-chip-color-accent);border:var(--pine-border-width) solid var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-accent-dot))}:host(.pds-chip--accent) .pds-chip__label,:host(.pds-chip--accent) .pds-chip__button,:host(.pds-chip--accent) .pds-chip__close{color:var(--pine-chip-color-accent-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--danger){background:var(--pine-chip-color-danger);border:var(--pine-border-width) solid var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-danger-dot))}:host(.pds-chip--danger) .pds-chip__label,:host(.pds-chip--danger) .pds-chip__button,:host(.pds-chip--danger) .pds-chip__close{color:var(--pine-chip-color-danger-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--info){background:var(--pine-chip-color-info);border:var(--pine-border-width) solid var(--pine-chip-color-info-hover)}:host(.pds-chip--info) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-info-dot))}:host(.pds-chip--info) .pds-chip__label,:host(.pds-chip--info) .pds-chip__button,:host(.pds-chip--info) .pds-chip__close{color:var(--pine-chip-color-info-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--pine-chip-color-info-hover)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--pine-chip-color-info-hover)}:host(.pds-chip--neutral){background:var(--pine-chip-color-neutral);border:var(--pine-border-width) solid var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-neutral-dot))}:host(.pds-chip--neutral) .pds-chip__label,:host(.pds-chip--neutral) .pds-chip__button,:host(.pds-chip--neutral) .pds-chip__close{color:var(--pine-chip-color-neutral-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--solid){background:var(--pine-chip-color-solid);border:var(--pine-border-width) solid var(--pine-chip-color-solid-hover)}:host(.pds-chip--solid) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-solid-dot))}:host(.pds-chip--solid) .pds-chip__label,:host(.pds-chip--solid) .pds-chip__button,:host(.pds-chip--solid) .pds-chip__close{color:var(--pine-chip-color-solid-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--solid) .pds-chip__close:hover{background:var(--pine-chip-color-solid-hover)}:host(.pds-chip--solid.pds-chip--dropdown:hover){background:var(--pine-chip-color-solid-hover)}:host(.pds-chip--subtle){background:var(--pine-chip-color-subtle);border:var(--pine-border-width) solid var(--pine-chip-color-subtle-hover)}:host(.pds-chip--subtle) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-subtle-dot))}:host(.pds-chip--subtle) .pds-chip__label,:host(.pds-chip--subtle) .pds-chip__button,:host(.pds-chip--subtle) .pds-chip__close{color:var(--pine-chip-color-subtle-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--subtle) .pds-chip__close:hover{background:var(--pine-chip-color-subtle-hover)}:host(.pds-chip--subtle.pds-chip--dropdown:hover){background:var(--pine-chip-color-subtle-hover)}:host(.pds-chip--success){background:var(--pine-chip-color-success);border:var(--pine-border-width) solid var(--pine-chip-color-success-hover)}:host(.pds-chip--success) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-success-dot))}:host(.pds-chip--success) .pds-chip__label,:host(.pds-chip--success) .pds-chip__button,:host(.pds-chip--success) .pds-chip__close{color:var(--pine-chip-color-success-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--pine-chip-color-success-hover)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--pine-chip-color-success-hover)}:host(.pds-chip--warning){background:var(--pine-chip-color-warning);border:var(--pine-border-width) solid var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-warning-dot))}:host(.pds-chip--warning) .pds-chip__label,:host(.pds-chip--warning) .pds-chip__button,:host(.pds-chip--warning) .pds-chip__close{color:var(--pine-chip-color-warning-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--pine-chip-color-warning-hover)}:host(.pds-chip--solid){border-color:transparent}.pds-chip__dot{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);display:inline-block;-ms-flex-negative:0;flex-shrink:0;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}.pds-chip__icon{color:var(--pds-chip-icon-color, currentColor)}.pds-chip__label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host([max-width]){-webkit-box-sizing:border-box;box-sizing:border-box;max-width:var(--pds-chip-max-width);min-width:0}:host([max-width]) .pds-chip__label,:host([max-width]) .pds-chip__button{min-width:0}:host([max-width]) .pds-chip__label-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-chip__label,.pds-chip__button{font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--dropdown){padding:var(--pine-dimension-none)}.pds-chip__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-dimension-sm);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-025) var(--pine-dimension-100)}.pds-chip__button:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-chip__button pds-icon:last-child{-webkit-margin-end:calc(var(--pine-dimension-025) * -1);margin-inline-end:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--sizing-close);-webkit-margin-end:calc(var(--pine-dimension-xs) * -1);margin-inline-end:calc(var(--pine-dimension-xs) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{outline:var(--pine-outline-focus)}:host(.pds-chip--sm){--sizing-close:var(--pine-dimension-100);padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-100)}:host(.pds-chip--sm) .pds-chip__label,:host(.pds-chip--sm) .pds-chip__button{font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--sm.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--sm.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-100)}:host(.pds-chip--sm.pds-chip--brand) .pds-chip__label{padding:var(--pine-dimension-025) var(--pine-dimension-100)}:host(.pds-chip--lg){padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150)}:host(.pds-chip--lg) .pds-chip__label,:host(.pds-chip--lg) .pds-chip__button{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)}:host(.pds-chip--lg.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--lg.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-150)}:host(.pds-chip--brand){background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;padding:1px;position:relative}:host(.pds-chip--brand) .pds-chip__label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-100);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__button,:host(.pds-chip--brand) .pds-chip__close{color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__close:hover{background:rgba(255, 255, 255, 0.8)}`;
|
|
8602
8666
|
|
|
8667
|
+
const SENTIMENT_DOT_COLORS = {
|
|
8668
|
+
accent: 'var(--pine-chip-color-accent-dot)',
|
|
8669
|
+
danger: 'var(--pine-chip-color-danger-dot)',
|
|
8670
|
+
info: 'var(--pine-chip-color-info-dot)',
|
|
8671
|
+
neutral: 'var(--pine-chip-color-neutral-dot)',
|
|
8672
|
+
solid: 'var(--pine-chip-color-solid-dot)',
|
|
8673
|
+
subtle: 'var(--pine-chip-color-subtle-dot)',
|
|
8674
|
+
success: 'var(--pine-chip-color-success-dot)',
|
|
8675
|
+
warning: 'var(--pine-chip-color-warning-dot)',
|
|
8676
|
+
};
|
|
8603
8677
|
/**
|
|
8604
8678
|
* @slot (default) - The chip's label text.
|
|
8605
8679
|
* @part button
|
|
8680
|
+
* @part dot - Exposes the dot for styling, such as a custom color. Appears only when `dot` is set.
|
|
8681
|
+
* @part icon - Exposes the icon component for styling, such as a custom color. Appears only when `icon` is set.
|
|
8606
8682
|
*/
|
|
8607
8683
|
class PdsChip {
|
|
8608
8684
|
constructor(hostRef) {
|
|
@@ -8661,6 +8737,11 @@ class PdsChip {
|
|
|
8661
8737
|
hostEl: this.el,
|
|
8662
8738
|
contentEl: this.labelTextEl,
|
|
8663
8739
|
getTooltipText: () => this.el.textContent || '',
|
|
8740
|
+
// The dropdown variant's label span already sits inside
|
|
8741
|
+
// `<button class="pds-chip__button">`, which is already focusable and
|
|
8742
|
+
// bubbles focusin to the host — a tabindex on the span too would nest
|
|
8743
|
+
// a second tab stop inside the button.
|
|
8744
|
+
manageTabIndex: this.effectiveVariant !== 'dropdown',
|
|
8664
8745
|
});
|
|
8665
8746
|
this.tooltipBoundEl = this.labelTextEl;
|
|
8666
8747
|
}
|
|
@@ -8711,11 +8792,15 @@ class PdsChip {
|
|
|
8711
8792
|
// node — and a plain `<pds-chip>Some text</pds-chip>` slots text with no
|
|
8712
8793
|
// wrapping element. Wrapping the slot itself in an internal span gives
|
|
8713
8794
|
// maxWidth something to ellipsize regardless of what's slotted.
|
|
8714
|
-
// A focus-triggered tooltip needs a focusable anchor
|
|
8715
|
-
//
|
|
8716
|
-
//
|
|
8717
|
-
|
|
8718
|
-
|
|
8795
|
+
// A focus-triggered tooltip needs a focusable anchor, but the label span
|
|
8796
|
+
// only earns a tab stop while its text is actually clipped — a chip whose
|
|
8797
|
+
// label fits has nothing to reveal. setupTruncationTooltip owns that
|
|
8798
|
+
// tabindex off the measurement for every variant except dropdown: its
|
|
8799
|
+
// label span already sits inside `<button class="pds-chip__button">`,
|
|
8800
|
+
// which is already focusable and bubbles focusin to the host, so
|
|
8801
|
+
// initTruncationTooltip passes `manageTabIndex: false` there to avoid
|
|
8802
|
+
// nesting a second tab stop inside the button.
|
|
8803
|
+
const chipContent = isDropdown ? (hAsync("button", { class: "pds-chip__button", type: "button", part: "button" }, this.icon && hAsync("pds-icon", { class: "pds-chip__icon", part: "icon", icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && hAsync("i", { class: "pds-chip__dot", part: "dot", "aria-hidden": "true" }), hAsync("span", { class: "pds-chip__label-text", ref: (el) => (this.labelTextEl = el) }, hAsync("slot", null)), hAsync("pds-icon", { icon: downSmall, size: this.iconSize, "aria-hidden": "true" }))) : (hAsync("span", { class: "pds-chip__label" }, this.icon && hAsync("pds-icon", { class: "pds-chip__icon", part: "icon", icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && hAsync("i", { class: "pds-chip__dot", part: "dot", "aria-hidden": "true" }), hAsync("span", { class: "pds-chip__label-text", ref: (el) => (this.labelTextEl = el) }, hAsync("slot", null))));
|
|
8719
8804
|
return chipContent;
|
|
8720
8805
|
}
|
|
8721
8806
|
get hostStyles() {
|
|
@@ -8724,7 +8809,21 @@ class PdsChip {
|
|
|
8724
8809
|
// query) without !important — the same pattern pds-box uses for min-width.
|
|
8725
8810
|
// The width and the min-width/box-sizing that make it work are applied in
|
|
8726
8811
|
// pds-chip.scss under :host([max-width]).
|
|
8727
|
-
|
|
8812
|
+
const styles = {};
|
|
8813
|
+
if (this.maxWidth) {
|
|
8814
|
+
styles['--pds-chip-max-width'] = this.maxWidth;
|
|
8815
|
+
}
|
|
8816
|
+
// Custom properties rather than inline colors on the dot/icon, so a
|
|
8817
|
+
// consumer's ::part(dot) or ::part(icon) rule still wins over the prop.
|
|
8818
|
+
const dotColor = normalizeColorValue(this.dotColor, { semanticMap: SENTIMENT_DOT_COLORS });
|
|
8819
|
+
if (dotColor !== undefined) {
|
|
8820
|
+
styles['--pds-chip-dot-color'] = dotColor;
|
|
8821
|
+
}
|
|
8822
|
+
const iconColor = normalizeColorValue(this.iconColor, { semanticMap: SENTIMENT_DOT_COLORS });
|
|
8823
|
+
if (iconColor !== undefined) {
|
|
8824
|
+
styles['--pds-chip-icon-color'] = iconColor;
|
|
8825
|
+
}
|
|
8826
|
+
return styles;
|
|
8728
8827
|
}
|
|
8729
8828
|
renderCloseButton() {
|
|
8730
8829
|
const CloseElement = this.removeUrl ? 'a' : 'button';
|
|
@@ -8771,7 +8870,7 @@ class PdsChip {
|
|
|
8771
8870
|
return (hAsync(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), hAsync("pds-icon", { icon: remove, size: this.iconSize })));
|
|
8772
8871
|
}
|
|
8773
8872
|
render() {
|
|
8774
|
-
return (hAsync(Host, { key: '
|
|
8873
|
+
return (hAsync(Host, { key: '323831a875b5f0e786e1e835c230d6950c71d009', class: this.classNames(), id: this.componentId, style: this.hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
|
|
8775
8874
|
}
|
|
8776
8875
|
get el() { return getElement(this); }
|
|
8777
8876
|
static get style() { return pdsChipTokensCss() + pdsChipCss(); }
|
|
@@ -8781,7 +8880,9 @@ class PdsChip {
|
|
|
8781
8880
|
"$members$": {
|
|
8782
8881
|
"componentId": [1, "component-id"],
|
|
8783
8882
|
"dot": [4],
|
|
8883
|
+
"dotColor": [1, "dot-color"],
|
|
8784
8884
|
"icon": [1],
|
|
8885
|
+
"iconColor": [1, "icon-color"],
|
|
8785
8886
|
"size": [1],
|
|
8786
8887
|
"sentiment": [1],
|
|
8787
8888
|
"variant": [1],
|
|
@@ -10183,7 +10284,7 @@ function createDOMPurify() {
|
|
|
10183
10284
|
}
|
|
10184
10285
|
var purify = createDOMPurify();
|
|
10185
10286
|
|
|
10186
|
-
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-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__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)}.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);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;text-align:start}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);min-height:var(--pine-dimension-500)}.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-white);--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)}.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}[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);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)}`;
|
|
10287
|
+
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-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__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)}.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);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;text-align:start}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);min-height:var(--pine-dimension-500)}.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)}.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}[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);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)}`;
|
|
10187
10288
|
|
|
10188
10289
|
/**
|
|
10189
10290
|
* @slot option - Option elements for the combobox dropdown
|
|
@@ -11866,6 +11967,10 @@ class PdsCopytext {
|
|
|
11866
11967
|
hostEl: this.el,
|
|
11867
11968
|
contentEl: this.valueSpanEl,
|
|
11868
11969
|
getTooltipText: () => this.value || '',
|
|
11970
|
+
// valueSpanEl already sits inside the `<pds-button>` below, which is
|
|
11971
|
+
// already focusable and bubbles focusin to the host — a tabindex on
|
|
11972
|
+
// the span too would nest a second tab stop inside the button.
|
|
11973
|
+
manageTabIndex: false,
|
|
11869
11974
|
});
|
|
11870
11975
|
}
|
|
11871
11976
|
}
|
|
@@ -11889,7 +11994,7 @@ class PdsCopytext {
|
|
|
11889
11994
|
return classNames.join(' ');
|
|
11890
11995
|
}
|
|
11891
11996
|
render() {
|
|
11892
|
-
return (hAsync(Host, { key: '
|
|
11997
|
+
return (hAsync(Host, { key: '6e3ff4eb0dc42e57156a162196a06a675cac6f91', class: this.classNames(), id: this.componentId }, hAsync("pds-button", { key: '749a8dde35eb3c70941229d11dc6477aaf717ed1', type: "button", variant: "unstyled", onClick: this.handleClick }, hAsync("span", { key: '7f457a164f3ae76a37814d37d7b5e3fce86bd803', ref: (el) => this.valueSpanEl = el }, this.value), hAsync("pds-icon", { key: '0ff6dad44148c23ee9d693e82880598b91b0630e', "aria-hidden": "true", icon: copy, size: "16px" }))));
|
|
11893
11998
|
}
|
|
11894
11999
|
get el() { return getElement(this); }
|
|
11895
12000
|
static get watchers() { return {
|
|
@@ -11968,6 +12073,270 @@ class PdsDivider {
|
|
|
11968
12073
|
}; }
|
|
11969
12074
|
}
|
|
11970
12075
|
|
|
12076
|
+
/**
|
|
12077
|
+
* Unwraps a stale copy of a light-DOM (`shadow: false`) component's own wrapper,
|
|
12078
|
+
* left behind when a page-cache (Turbo, browser bfcache) reconnect nests a
|
|
12079
|
+
* component's previous render inside its freshly rendered one. Call from
|
|
12080
|
+
* `componentDidRender` with the element that directly contains the rendered
|
|
12081
|
+
* `<slot>` and the selector that identifies "another one of me." Unwraps in
|
|
12082
|
+
* place (move-then-remove) so nested content is never lost.
|
|
12083
|
+
*
|
|
12084
|
+
* `contentSelector` is only needed when the wrapper itself further nests a
|
|
12085
|
+
* separate content element (e.g. pds-tab's `<a class="pds-tab">` wrapping a
|
|
12086
|
+
* `.pds-tab__content` div) — omit it when the wrapper's own children are the
|
|
12087
|
+
* slotted content (e.g. pds-tabpanel's `.pds-tabpanel` div).
|
|
12088
|
+
*/
|
|
12089
|
+
function unwrapReconnectedContent(container, selector, contentSelector) {
|
|
12090
|
+
var _a;
|
|
12091
|
+
if (container === null)
|
|
12092
|
+
return;
|
|
12093
|
+
let stale = container.firstElementChild;
|
|
12094
|
+
while (stale === null || stale === void 0 ? void 0 : stale.matches(selector)) {
|
|
12095
|
+
const source = contentSelector !== undefined ? ((_a = stale.querySelector(contentSelector)) !== null && _a !== void 0 ? _a : stale) : stale;
|
|
12096
|
+
Array.from(source.childNodes).forEach((node) => container.insertBefore(node, stale));
|
|
12097
|
+
stale.remove();
|
|
12098
|
+
stale = container.firstElementChild;
|
|
12099
|
+
}
|
|
12100
|
+
}
|
|
12101
|
+
|
|
12102
|
+
const pdsDrawerCss = () => `.pds-drawer__modal>.pds-modal__backdrop{-ms-flex-align:stretch;align-items:stretch;background-color:transparent;pointer-events:none}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-drawer__modal>.pds-modal__backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}}.pds-drawer__modal>.pds-modal__backdrop>.pds-modal{border-radius:0;height:100%;margin:0;max-height:100%;max-width:100%;pointer-events:auto;width:var(--pds-drawer-width, 500px)}.pds-drawer{display:contents}.pds-drawer.pds-drawer--end .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:end;justify-content:flex-end}.pds-drawer.pds-drawer--start .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:start;justify-content:flex-start}.pds-drawer.pds-drawer--sm{--pds-drawer-width:360px}.pds-drawer.pds-drawer--md{--pds-drawer-width:500px}`;
|
|
12103
|
+
|
|
12104
|
+
// Known selectors for content Pine components portal to document.body rather
|
|
12105
|
+
// than rendering in place — pds-popover, pds-tooltip, pds-combobox's dropdown.
|
|
12106
|
+
// A pointerdown landing on one of these is not "outside" the drawer in the
|
|
12107
|
+
// sense light dismiss cares about: it belongs to an overlay something inside
|
|
12108
|
+
// the drawer opened, even though it is not a DOM descendant of the drawer.
|
|
12109
|
+
const PORTALED_OVERLAY_SELECTOR = '.pds-popover, .pds-tooltip, .pds-combobox-dropdown-portal';
|
|
12110
|
+
/**
|
|
12111
|
+
* A non-modal side panel composed from `pds-modal`.
|
|
12112
|
+
*
|
|
12113
|
+
* Unlike `pds-modal`, the page stays interactive while a drawer is open: no
|
|
12114
|
+
* dimming, no blur, no scroll lock, no click blocking. `pds-drawer` renders a
|
|
12115
|
+
* `pds-modal` internally with `disableTopLayer` always on and its backdrop
|
|
12116
|
+
* suppressed, and adds the edge, width and dismiss behavior a side panel
|
|
12117
|
+
* needs on top. It does not reimplement focus, Escape or dialog semantics —
|
|
12118
|
+
* those come from `pds-modal` unchanged.
|
|
12119
|
+
*/
|
|
12120
|
+
class PdsDrawer {
|
|
12121
|
+
constructor(hostRef) {
|
|
12122
|
+
registerInstance(this, hostRef);
|
|
12123
|
+
this.pdsDrawerOpen = createEvent(this, "pdsDrawerOpen");
|
|
12124
|
+
this.pdsDrawerClose = createEvent(this, "pdsDrawerClose");
|
|
12125
|
+
/**
|
|
12126
|
+
* Whether the drawer is open
|
|
12127
|
+
* @default false
|
|
12128
|
+
*/
|
|
12129
|
+
this.open = false;
|
|
12130
|
+
/**
|
|
12131
|
+
* Which edge of the viewport the drawer is docked to. Logical, so this is
|
|
12132
|
+
* free under RTL — `end` is the inline-end edge regardless of direction.
|
|
12133
|
+
* @default 'end'
|
|
12134
|
+
*/
|
|
12135
|
+
this.side = 'end';
|
|
12136
|
+
/**
|
|
12137
|
+
* The drawer's width.
|
|
12138
|
+
* @default 'md'
|
|
12139
|
+
*/
|
|
12140
|
+
this.size = 'md';
|
|
12141
|
+
/**
|
|
12142
|
+
* Whether the drawer content should be scrollable
|
|
12143
|
+
* @default true
|
|
12144
|
+
*/
|
|
12145
|
+
this.scrollable = true;
|
|
12146
|
+
/**
|
|
12147
|
+
* Whether the drawer can be dismissed with a pointerdown outside it.
|
|
12148
|
+
* Replaces `pds-modal`'s `backdropDismiss` — there is no backdrop to click.
|
|
12149
|
+
* This also gates Escape, matching how `backdropDismiss` gates Escape on
|
|
12150
|
+
* `pds-modal` today: setting this to `false` means the close button is the
|
|
12151
|
+
* only way out.
|
|
12152
|
+
*
|
|
12153
|
+
* A trigger outside the drawer should only ever set `open` to `true` and
|
|
12154
|
+
* leave closing to the drawer itself. A toggle-style trigger (`open =
|
|
12155
|
+
* !open`) fights light dismiss: clicking it while open closes the drawer
|
|
12156
|
+
* on `pointerdown`, then the trigger's own click handler re-opens it.
|
|
12157
|
+
* @default true
|
|
12158
|
+
*/
|
|
12159
|
+
this.lightDismiss = true;
|
|
12160
|
+
/**
|
|
12161
|
+
* Whether to move focus into the drawer when it opens. `auto` is right for
|
|
12162
|
+
* a drawer opened by a direct user action (a click, a deep link the user
|
|
12163
|
+
* just navigated to). Set to `none` for a drawer that can open from a
|
|
12164
|
+
* background event while the user is mid-task elsewhere on the page —
|
|
12165
|
+
* moving focus there would interrupt them, and the page stays live under
|
|
12166
|
+
* a non-modal drawer, so it is a genuine data-entry risk, not just an
|
|
12167
|
+
* annoyance.
|
|
12168
|
+
* @default 'auto'
|
|
12169
|
+
*/
|
|
12170
|
+
this.initialFocus = 'auto';
|
|
12171
|
+
}
|
|
12172
|
+
// Unwraps a nested pds-modal left by a page-cache (Turbo, bfcache) reconnect
|
|
12173
|
+
// — the same bug class fixed for pds-modal-header/-content/-footer. Every
|
|
12174
|
+
// render wraps the slotted content in a fresh, marked pds-modal; a reconnect
|
|
12175
|
+
// that restores a prior render's pds-modal in our light DOM ends up with
|
|
12176
|
+
// that stale one nested inside the new one's content.
|
|
12177
|
+
//
|
|
12178
|
+
// The container has to be the inner `.pds-modal` content div, not the
|
|
12179
|
+
// `<pds-modal>` tag itself — that tag's first child is always its own
|
|
12180
|
+
// rendered `dialog.pds-modal__backdrop`, never another `<pds-modal>`, so a
|
|
12181
|
+
// bare-tag check there never matches. The `.pds-drawer__modal` marker on
|
|
12182
|
+
// the staleness selector (rather than the bare `pds-modal` tag) keeps this
|
|
12183
|
+
// from also unwrapping a consumer's own nested pds-modal, like a confirm
|
|
12184
|
+
// dialog placed first in the drawer's content — only a stale copy of our
|
|
12185
|
+
// own wrapper carries that class.
|
|
12186
|
+
componentDidRender() {
|
|
12187
|
+
unwrapReconnectedContent(this.el.querySelector('pds-modal.pds-drawer__modal .pds-modal'), 'pds-modal.pds-drawer__modal', '.pds-modal');
|
|
12188
|
+
}
|
|
12189
|
+
// pds-modal closes itself (Escape, light dismiss, a consumer's close
|
|
12190
|
+
// button toggling its own `open`) and only updates its own `open` prop —
|
|
12191
|
+
// mirror that back onto ours so a consumer's binding stays correct, and
|
|
12192
|
+
// re-emit as our own event rather than leaking pds-modal's event name.
|
|
12193
|
+
// Both events bubble, so a nested pds-modal (a confirm dialog inside the
|
|
12194
|
+
// drawer's own content) would otherwise trigger these too — only react to
|
|
12195
|
+
// our own direct inner modal.
|
|
12196
|
+
handleModalClose(e) {
|
|
12197
|
+
if (e.target !== this.modalEl)
|
|
12198
|
+
return;
|
|
12199
|
+
this.open = false;
|
|
12200
|
+
this.pdsDrawerClose.emit();
|
|
12201
|
+
}
|
|
12202
|
+
handleModalOpen(e) {
|
|
12203
|
+
if (e.target !== this.modalEl)
|
|
12204
|
+
return;
|
|
12205
|
+
this.pdsDrawerOpen.emit();
|
|
12206
|
+
}
|
|
12207
|
+
// Light dismiss: a pointerdown anywhere outside the drawer closes it. This
|
|
12208
|
+
// has to be a listener of our own, not pds-modal's backdrop-click handler —
|
|
12209
|
+
// the backdrop is pointer-events:none out here (see pds-drawer.scss) so the
|
|
12210
|
+
// page underneath stays genuinely clickable, which means a click there
|
|
12211
|
+
// never reaches pds-modal's backdrop element at all.
|
|
12212
|
+
handleOutsidePointerDown(e) {
|
|
12213
|
+
if (!this.lightDismiss || !this.open)
|
|
12214
|
+
return;
|
|
12215
|
+
const target = e.target;
|
|
12216
|
+
if (!target)
|
|
12217
|
+
return;
|
|
12218
|
+
if (this.el.contains(target))
|
|
12219
|
+
return;
|
|
12220
|
+
if (target.closest(PORTALED_OVERLAY_SELECTOR))
|
|
12221
|
+
return;
|
|
12222
|
+
// A sibling pds-modal — e.g. a confirm dialog opened from inside the
|
|
12223
|
+
// drawer but mounted at the document root rather than nested in our own
|
|
12224
|
+
// content — is neither a descendant of the drawer nor on the portaled
|
|
12225
|
+
// list above, so without this it reads as "outside" and a click inside
|
|
12226
|
+
// it (or on its own backdrop) would close the drawer underneath it. That
|
|
12227
|
+
// modal already owns its own dismiss semantics; defer to them instead.
|
|
12228
|
+
if (target.closest('pds-modal'))
|
|
12229
|
+
return;
|
|
12230
|
+
this.open = false;
|
|
12231
|
+
}
|
|
12232
|
+
render() {
|
|
12233
|
+
return (hAsync(Host, { key: '66e16ca7704243e8bb98002f042fa073ec43c38b', class: {
|
|
12234
|
+
'pds-drawer': true,
|
|
12235
|
+
[`pds-drawer--${this.side}`]: true,
|
|
12236
|
+
[`pds-drawer--${this.size}`]: true,
|
|
12237
|
+
} }, hAsync("pds-modal", { key: 'b52b8cb1892d52113920ab27344d9a969e6365b6', class: "pds-drawer__modal", ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: true, backdropDismiss: this.lightDismiss, disableInitialFocus: this.initialFocus === 'none' }, hAsync("slot", { key: 'c9ce43ca12a06c550bd130a0fa7572dec22c9c92' }))));
|
|
12238
|
+
}
|
|
12239
|
+
get el() { return getElement(this); }
|
|
12240
|
+
static get style() { return pdsDrawerCss(); }
|
|
12241
|
+
static get cmpMeta() { return {
|
|
12242
|
+
"$flags$": 260,
|
|
12243
|
+
"$tagName$": "pds-drawer",
|
|
12244
|
+
"$members$": {
|
|
12245
|
+
"componentId": [1, "component-id"],
|
|
12246
|
+
"open": [1028],
|
|
12247
|
+
"side": [1],
|
|
12248
|
+
"size": [1],
|
|
12249
|
+
"scrollable": [4],
|
|
12250
|
+
"lightDismiss": [4, "light-dismiss"],
|
|
12251
|
+
"initialFocus": [1, "initial-focus"]
|
|
12252
|
+
},
|
|
12253
|
+
"$listeners$": [[0, "pdsModalClose", "handleModalClose"], [0, "pdsModalOpen", "handleModalOpen"], [5, "pointerdown", "handleOutsidePointerDown"]],
|
|
12254
|
+
"$lazyBundleId$": "-",
|
|
12255
|
+
"$attrsToReflect$": []
|
|
12256
|
+
}; }
|
|
12257
|
+
}
|
|
12258
|
+
|
|
12259
|
+
const pdsDrawerContentCss = () => `pds-drawer-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-height:0;width:100%}.pds-drawer-content{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;height:100%;padding:var(--pine-dimension-md);width:100%}.pds-modal--scrollable pds-drawer-content{overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-drawer-content{overflow-y:visible}`;
|
|
12260
|
+
|
|
12261
|
+
/**
|
|
12262
|
+
* Fills the drawer panel's height by default — unlike `pds-modal-content`,
|
|
12263
|
+
* which caps itself against the viewport for a centered, possibly-shorter
|
|
12264
|
+
* modal, a drawer panel is already edge-to-edge, so its content can simply
|
|
12265
|
+
* flex to fill whatever space the header and footer leave.
|
|
12266
|
+
*/
|
|
12267
|
+
class PdsDrawerContent {
|
|
12268
|
+
constructor(hostRef) {
|
|
12269
|
+
registerInstance(this, hostRef);
|
|
12270
|
+
}
|
|
12271
|
+
// Unwraps a nested .pds-drawer-content left by a page-cache (Turbo, bfcache) reconnect.
|
|
12272
|
+
componentDidRender() {
|
|
12273
|
+
unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
|
|
12274
|
+
}
|
|
12275
|
+
render() {
|
|
12276
|
+
return (hAsync("div", { key: '432db626c93ab42365ec1af83562eec7ae1c4674', class: "pds-drawer-content" }, hAsync("slot", { key: '901ab074f31726023add709a4953bddb43842de2' })));
|
|
12277
|
+
}
|
|
12278
|
+
get el() { return getElement(this); }
|
|
12279
|
+
static get style() { return pdsDrawerContentCss(); }
|
|
12280
|
+
static get cmpMeta() { return {
|
|
12281
|
+
"$flags$": 260,
|
|
12282
|
+
"$tagName$": "pds-drawer-content",
|
|
12283
|
+
"$members$": undefined,
|
|
12284
|
+
"$listeners$": undefined,
|
|
12285
|
+
"$lazyBundleId$": "-",
|
|
12286
|
+
"$attrsToReflect$": []
|
|
12287
|
+
}; }
|
|
12288
|
+
}
|
|
12289
|
+
|
|
12290
|
+
const pdsDrawerFooterCss = () => `pds-drawer-footer{display:block;-ms-flex:0 0 auto;flex:0 0 auto;width:100%}.pds-drawer__footer{-webkit-border-before:1px solid var(--pine-color-border-subtle);border-block-start:1px solid var(--pine-color-border-subtle);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-sm);-ms-flex-pack:end;justify-content:flex-end;padding:var(--pine-dimension-md);width:100%}`;
|
|
12291
|
+
|
|
12292
|
+
class PdsDrawerFooter {
|
|
12293
|
+
constructor(hostRef) {
|
|
12294
|
+
registerInstance(this, hostRef);
|
|
12295
|
+
}
|
|
12296
|
+
// Unwraps a nested .pds-drawer__footer left by a page-cache (Turbo, bfcache) reconnect.
|
|
12297
|
+
componentDidRender() {
|
|
12298
|
+
unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
|
|
12299
|
+
}
|
|
12300
|
+
render() {
|
|
12301
|
+
return (hAsync("footer", { key: '71cb35f7b1ccba9e4187eb8942771741f13510dc', class: "pds-drawer__footer" }, hAsync("slot", { key: '28927c76ee8194c44f416ee5d4e9ea2e0376bf5a' })));
|
|
12302
|
+
}
|
|
12303
|
+
get el() { return getElement(this); }
|
|
12304
|
+
static get style() { return pdsDrawerFooterCss(); }
|
|
12305
|
+
static get cmpMeta() { return {
|
|
12306
|
+
"$flags$": 260,
|
|
12307
|
+
"$tagName$": "pds-drawer-footer",
|
|
12308
|
+
"$members$": undefined,
|
|
12309
|
+
"$listeners$": undefined,
|
|
12310
|
+
"$lazyBundleId$": "-",
|
|
12311
|
+
"$attrsToReflect$": []
|
|
12312
|
+
}; }
|
|
12313
|
+
}
|
|
12314
|
+
|
|
12315
|
+
const pdsDrawerHeaderCss = () => `pds-drawer-header{display:block;-ms-flex:0 0 auto;flex:0 0 auto;width:100%}.pds-drawer__header{-ms-flex-align:center;align-items:center;-webkit-border-after:1px solid var(--pine-color-border-subtle);border-block-end:1px solid var(--pine-color-border-subtle);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-md);width:100%}`;
|
|
12316
|
+
|
|
12317
|
+
class PdsDrawerHeader {
|
|
12318
|
+
constructor(hostRef) {
|
|
12319
|
+
registerInstance(this, hostRef);
|
|
12320
|
+
}
|
|
12321
|
+
// Unwraps a nested .pds-drawer__header left by a page-cache (Turbo, bfcache) reconnect.
|
|
12322
|
+
componentDidRender() {
|
|
12323
|
+
unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
|
|
12324
|
+
}
|
|
12325
|
+
render() {
|
|
12326
|
+
return (hAsync("header", { key: '48d0585e0e20c9d3142635f0fc0184c0803413b8', class: "pds-drawer__header" }, hAsync("slot", { key: '14d9d0bde0116c81892140b22a2b6e9a2b1d969f' })));
|
|
12327
|
+
}
|
|
12328
|
+
get el() { return getElement(this); }
|
|
12329
|
+
static get style() { return pdsDrawerHeaderCss(); }
|
|
12330
|
+
static get cmpMeta() { return {
|
|
12331
|
+
"$flags$": 260,
|
|
12332
|
+
"$tagName$": "pds-drawer-header",
|
|
12333
|
+
"$members$": undefined,
|
|
12334
|
+
"$listeners$": undefined,
|
|
12335
|
+
"$lazyBundleId$": "-",
|
|
12336
|
+
"$attrsToReflect$": []
|
|
12337
|
+
}; }
|
|
12338
|
+
}
|
|
12339
|
+
|
|
11971
12340
|
const pdsDropdownMenuCss = () => `:host{display:block}.is-hidden{display:none}.pds-dropdown-menu--panel{background-color:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-xs);left:var(--pine-dimension-none);min-width:170px;padding:var(--pine-dimension-xs);position:fixed;z-index:var(--pine-z-index-overlay)}:host-context([data-theme=dark]) .pds-dropdown-menu--panel{border:var(--pine-border)}::slotted(a),::slotted(button){-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs) !important;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text) !important;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium) !important;gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px) !important;padding:var(--pine-dimension-xs) !important;text-align:start;text-decoration:none !important;width:calc(100% - (var(--pine-border-width) + 2px) * 2)}::slotted(.destructive){color:var(--pine-color-danger) !important}::slotted([aria-disabled=true]),::slotted([disabled]:not([disabled=false])){cursor:not-allowed;opacity:0.5;pointer-events:none}`;
|
|
11972
12341
|
|
|
11973
12342
|
/**
|
|
@@ -12277,7 +12646,7 @@ class PdsDropdownMenu {
|
|
|
12277
12646
|
}
|
|
12278
12647
|
}
|
|
12279
12648
|
render() {
|
|
12280
|
-
return (hAsync(Host, { key: '
|
|
12649
|
+
return (hAsync(Host, { key: '7907da6a04530d01bbbd0256f0b609fa53e0a774', id: this.componentId }, hAsync("slot", { key: '2bf060c4dec082d4175a7cde759221fd4b20d706', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), hAsync("pds-box", { key: '0d81eddee58fda631eb6a39cba0e7ad0d69c02d8', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical", part: "menu-panel" }, hAsync("slot", { key: '831485d66af711edc9491078827455762795bb64', onSlotchange: this.handleSlotChange }))));
|
|
12281
12650
|
}
|
|
12282
12651
|
get host() { return getElement(this); }
|
|
12283
12652
|
static get style() { return pdsDropdownMenuCss(); }
|
|
@@ -12372,7 +12741,7 @@ class PdsDropdownMenuItem {
|
|
|
12372
12741
|
}, 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)));
|
|
12373
12742
|
}
|
|
12374
12743
|
render() {
|
|
12375
|
-
return (hAsync(Host, { key: '
|
|
12744
|
+
return (hAsync(Host, { key: '2fd3c925ba2f1ead6d0a23c44ac87449e8dad521', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
|
|
12376
12745
|
}
|
|
12377
12746
|
get host() { return getElement(this); }
|
|
12378
12747
|
static get style() { return pdsDropdownMenuItemCss(); }
|
|
@@ -12408,7 +12777,7 @@ class PdsDropdownMenuSeparator {
|
|
|
12408
12777
|
this.disabled = false;
|
|
12409
12778
|
}
|
|
12410
12779
|
render() {
|
|
12411
|
-
return (hAsync(Host, { key: '
|
|
12780
|
+
return (hAsync(Host, { key: 'f55fc3b23a6ccb94a7ce865189e5d65abdd97d8c', id: this.componentId }, hAsync("hr", { key: '784a1480881a27aec69c0a2b0afd06f103912544' })));
|
|
12412
12781
|
}
|
|
12413
12782
|
static get style() { return pdsDropdownMenuSeparatorCss(); }
|
|
12414
12783
|
static get cmpMeta() { return {
|
|
@@ -12988,7 +13357,7 @@ class PdsFilter {
|
|
|
12988
13357
|
return null;
|
|
12989
13358
|
}
|
|
12990
13359
|
render() {
|
|
12991
|
-
return (hAsync(Host, { key: '
|
|
13360
|
+
return (hAsync(Host, { key: 'bd03de5e8461e3aba4d6f014e2d64d9aada0c0e1', id: this.componentId }, hAsync("button", { key: 'f35cb4aec14b1ed3b61d33c412cbfc89ba19cba3', 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: 'b3635542048ac52d290917260181d7313eddaff2', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (hAsync("span", { key: '0c5ef7f7655ddbee33a695703ce192f082b21bf1', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (hAsync("div", { key: 'e75c75d8e9e4596d7f0642e4e1f91deae3f2b9fa', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, hAsync("slot", { key: 'bef66af716be823ed3ac36d39a4532785df07f6b' })))));
|
|
12992
13361
|
}
|
|
12993
13362
|
get el() { return getElement(this); }
|
|
12994
13363
|
static get style() { return pdsFilterCss(); }
|
|
@@ -13020,7 +13389,7 @@ class PdsFilters {
|
|
|
13020
13389
|
registerInstance(this, hostRef);
|
|
13021
13390
|
}
|
|
13022
13391
|
render() {
|
|
13023
|
-
return (hAsync(Host, { key: '
|
|
13392
|
+
return (hAsync(Host, { key: '492357b36ec8ca8552f76aea6a4e4baf01ee92d5', id: this.componentId }, hAsync("div", { key: 'fbf56c5452b4b0627a95008a601ccd6ace59417c', class: "pds-filters" }, hAsync("slot", { key: 'c0e1d6b7b86ff39425d26dc75bf950283a371f71' }))));
|
|
13024
13393
|
}
|
|
13025
13394
|
static get style() { return pdsFiltersCss(); }
|
|
13026
13395
|
static get cmpMeta() { return {
|
|
@@ -13057,7 +13426,7 @@ const getAssetPath = (path) => {
|
|
|
13057
13426
|
if (assetBasePath.startsWith('https://cdn.jsdelivr.net/npm/') && !missingAssetPathWarning) {
|
|
13058
13427
|
missingAssetPathWarning = true;
|
|
13059
13428
|
console.warn(`
|
|
13060
|
-
Fetching Pine assets from jsDelivr CDN.\n\n It's recommended that you bundle Pine Assets with your application and set the path accordingly.\n\nFor more information, read the documentation: \nhttps://pine-design-system.netlify.app/?path=/docs/
|
|
13429
|
+
Fetching Pine assets from jsDelivr CDN.\n\n It's recommended that you bundle Pine Assets with your application and set the path accordingly.\n\nFor more information, read the documentation: \nhttps://pine-design-system.netlify.app/?path=/docs/guides-assets--docs
|
|
13061
13430
|
`);
|
|
13062
13431
|
}
|
|
13063
13432
|
let assetPath = path;
|
|
@@ -13493,9 +13862,9 @@ class PdsImage {
|
|
|
13493
13862
|
this.loading = 'eager';
|
|
13494
13863
|
}
|
|
13495
13864
|
render() {
|
|
13496
|
-
return (hAsync(Host, { key: '
|
|
13865
|
+
return (hAsync(Host, { key: '0c0f463a1b616ccc485b8086a0210c5d9d2b065c', class: {
|
|
13497
13866
|
'pds-image': true,
|
|
13498
|
-
}, id: this.componentId }, hAsync("img", { key: '
|
|
13867
|
+
}, id: this.componentId }, hAsync("img", { key: '2ac4ef66ebbb39d488ce68f06b590a5fad180811', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
|
|
13499
13868
|
}
|
|
13500
13869
|
static get style() { return pdsImageCss(); }
|
|
13501
13870
|
static get cmpMeta() { return {
|
|
@@ -13812,10 +14181,10 @@ class PdsInput {
|
|
|
13812
14181
|
'has-prepend': this.hasPrepend,
|
|
13813
14182
|
'has-append': this.hasAppend,
|
|
13814
14183
|
};
|
|
13815
|
-
return (hAsync(Host, { key: '
|
|
14184
|
+
return (hAsync(Host, { key: 'b67b80853cbf1f1e84c3ce6d2ff7e63f480c5b8d', "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: '27a60a963cfa1a96391b55800eba27743a2527f4', class: "pds-input" }, label && (hAsync("div", { key: '3f8ce2b254feea4b6fe9ea74318f1e6c27a75927', class: {
|
|
13816
14185
|
'pds-input__label-wrapper': true,
|
|
13817
14186
|
'visually-hidden': this.hideLabel,
|
|
13818
|
-
} }, hAsync("label", { key: '
|
|
14187
|
+
} }, hAsync("label", { key: '1c290cde5a9100b11fe3059725866506d089e834', htmlFor: componentId, class: "pds-input__label" }, hAsync("span", { key: '2ebc8dafa48d6d855be5b8e1aa3bdd417d6250f3' }, label, this.required && hAsync("span", { key: '73f7d22b13739daff6aa104c140208c5b1a86d10', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), hAsync("div", { key: '4ea0b3335abbdf920ca064aa5866a060ef18c2ad', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), hAsync("input", Object.assign({ key: '4acf340fdcf40968e9c46b6a240f8a9008998c11', 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: 'f1969fe3a5f3aba65f44fcdaddd5a12d90db7fb1', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (hAsync("p", { key: 'd4df1ceff95d5db7f2d927e9fcb848444570f9a2', class: "pds-input__error-message", id: messageId(componentId, 'error') }, hAsync("pds-icon", { key: 'f69182919903aab42b7641d9a0082861f551a214', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
|
|
13819
14188
|
}
|
|
13820
14189
|
static get formAssociated() { return true; }
|
|
13821
14190
|
get el() { return getElement(this); }
|
|
@@ -13927,8 +14296,8 @@ class PdsLink {
|
|
|
13927
14296
|
const targetValue = this.target || (this.external ? '_blank' : undefined);
|
|
13928
14297
|
const showExternalIcon = this.external;
|
|
13929
14298
|
const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
|
|
13930
|
-
return (hAsync("a", { key: '
|
|
13931
|
-
hAsync("pds-icon", { key: '
|
|
14299
|
+
return (hAsync("a", { key: '9e2d6cc4f2697bd11db4fd7ddd6f9e42ef28cf8c', 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: 'f48dd74f1921400553845ea3b03720749b1a6737' }, this.href), showExternalIcon &&
|
|
14300
|
+
hAsync("pds-icon", { key: '299d4f31ec32b614fd9f4d1c19acae63ee7a9169', icon: launch, size: this.fontSize })));
|
|
13932
14301
|
}
|
|
13933
14302
|
static get style() { return pdsLinkCss(); }
|
|
13934
14303
|
static get cmpMeta() { return {
|
|
@@ -14009,7 +14378,7 @@ class PdsLoader {
|
|
|
14009
14378
|
}
|
|
14010
14379
|
}
|
|
14011
14380
|
render() {
|
|
14012
|
-
return (hAsync(Host, { key: '
|
|
14381
|
+
return (hAsync(Host, { key: 'ce5b09477f57aad1a09ce3a38b81b64f673944b2', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (hAsync("div", { key: 'd193dfdaa527debff73705cef65e3d7f7a9a69ae', class: "pds-loader--spinner" }, hAsync("svg", { key: 'c881ff2ee1d5d92ac55300bd13e9d066f7a3970f', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, hAsync("defs", { key: '998920cdc820cc4e60df39bda5707e0b6bd5d0fe' }, hAsync("linearGradient", { key: '02028f6ac070703f8b96b1723c4d2c07670e73bb', id: "spinner-secondHalf" }, hAsync("stop", { key: 'b3120c2a597d8f646e791b1ac09a262486fb29cc', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), hAsync("stop", { key: '932056b587b5e3191952506d9411c68375af6620', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), hAsync("linearGradient", { key: '14540856cb968c220f71537c012a8c415d39af85', id: "spinner-firstHalf" }, hAsync("stop", { key: 'c94d634b1dffa0c5301b8cb2c0b6e81fdb34429e', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), hAsync("stop", { key: 'b6477c000c01728a60a7fd8e182f24da4b554128', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), hAsync("g", { key: '810f7c7bcd8e33bd2bed70932ed174eef48ae711', class: "pds-loader__spinner-path" }, hAsync("path", { key: '4e54f348c563cca7e14790a34a58dacbda452824', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), hAsync("path", { key: '3968c60f27ec619aabc74a278026abdd94d4510f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), hAsync("path", { key: '171fe08e0aec1f207704a0395388ccc57ea045d4', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (hAsync("div", { key: '60cf0b871807eb49ce73d3e63f00f5914c9c9eec', class: "pds-loader--typing" }, hAsync("span", { key: 'dfbdcc1fe558803d39caa56bb57763269c061661' }), hAsync("span", { key: '0c343f36a8d71bdc07306b3c879016686da94199' }), hAsync("span", { key: 'f2a30e560ef0c9ac26c596dbaad33eeb0e4f7ff3' }))), hAsync("div", { key: '0fa18b15a3962df872fd28136caf258cd09cafdb', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, hAsync("slot", { key: 'e8eabec0c6d24d3ad962ecee9e0ed6e0e0b4adc0', name: "label" }, "Loading..."))));
|
|
14013
14382
|
}
|
|
14014
14383
|
static get style() { return pdsLoaderCss(); }
|
|
14015
14384
|
static get cmpMeta() { return {
|
|
@@ -14027,34 +14396,12 @@ class PdsLoader {
|
|
|
14027
14396
|
}; }
|
|
14028
14397
|
}
|
|
14029
14398
|
|
|
14030
|
-
|
|
14031
|
-
* Unwraps a stale copy of a light-DOM (`shadow: false`) component's own wrapper,
|
|
14032
|
-
* left behind when a page-cache (Turbo, browser bfcache) reconnect nests a
|
|
14033
|
-
* component's previous render inside its freshly rendered one. Call from
|
|
14034
|
-
* `componentDidRender` with the element that directly contains the rendered
|
|
14035
|
-
* `<slot>` and the selector that identifies "another one of me." Unwraps in
|
|
14036
|
-
* place (move-then-remove) so nested content is never lost.
|
|
14037
|
-
*
|
|
14038
|
-
* `contentSelector` is only needed when the wrapper itself further nests a
|
|
14039
|
-
* separate content element (e.g. pds-tab's `<a class="pds-tab">` wrapping a
|
|
14040
|
-
* `.pds-tab__content` div) — omit it when the wrapper's own children are the
|
|
14041
|
-
* slotted content (e.g. pds-tabpanel's `.pds-tabpanel` div).
|
|
14042
|
-
*/
|
|
14043
|
-
function unwrapReconnectedContent(container, selector, contentSelector) {
|
|
14044
|
-
var _a;
|
|
14045
|
-
if (container === null)
|
|
14046
|
-
return;
|
|
14047
|
-
let stale = container.firstElementChild;
|
|
14048
|
-
while (stale === null || stale === void 0 ? void 0 : stale.matches(selector)) {
|
|
14049
|
-
const source = contentSelector !== undefined ? ((_a = stale.querySelector(contentSelector)) !== null && _a !== void 0 ? _a : stale) : stale;
|
|
14050
|
-
Array.from(source.childNodes).forEach((node) => container.insertBefore(node, stale));
|
|
14051
|
-
stale.remove();
|
|
14052
|
-
stale = container.firstElementChild;
|
|
14053
|
-
}
|
|
14054
|
-
}
|
|
14055
|
-
|
|
14056
|
-
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.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--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}`;
|
|
14399
|
+
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.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}`;
|
|
14057
14400
|
|
|
14401
|
+
const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
|
|
14402
|
+
const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
|
|
14403
|
+
/\d/.test(value) &&
|
|
14404
|
+
(typeof CSS === 'undefined' || CSS.supports('max-width', value));
|
|
14058
14405
|
class PdsModal {
|
|
14059
14406
|
constructor(hostRef) {
|
|
14060
14407
|
registerInstance(this, hostRef);
|
|
@@ -14072,7 +14419,9 @@ class PdsModal {
|
|
|
14072
14419
|
*/
|
|
14073
14420
|
this.open = false;
|
|
14074
14421
|
/**
|
|
14075
|
-
* The size of the modal
|
|
14422
|
+
* The size of the modal. Can be a predefined value ('sm', 'md', 'lg', 'fullscreen') or a custom
|
|
14423
|
+
* max-width as a CSS length (e.g., '1250px', '80vw'). A custom width stays fluid below that size.
|
|
14424
|
+
* A value that is neither falls back to 'md'.
|
|
14076
14425
|
* @default 'md'
|
|
14077
14426
|
*/
|
|
14078
14427
|
this.size = 'md';
|
|
@@ -14091,6 +14440,19 @@ class PdsModal {
|
|
|
14091
14440
|
* @default false
|
|
14092
14441
|
*/
|
|
14093
14442
|
this.disableTopLayer = false;
|
|
14443
|
+
/**
|
|
14444
|
+
* Whether to skip moving focus into the modal when it opens — both our own
|
|
14445
|
+
* `setInitialFocus()` and the browser's native "dialog focusing steps",
|
|
14446
|
+
* which move focus into the dialog as soon as `show()`/`showModal()` is
|
|
14447
|
+
* called regardless of application code. Focus return on close is
|
|
14448
|
+
* unaffected either way. For a modal opened by something other than a
|
|
14449
|
+
* direct user click — a redirect, a deep link, a background event —
|
|
14450
|
+
* stealing focus on open can interrupt whatever the user was already
|
|
14451
|
+
* doing. Default `false` preserves today's behavior for every existing
|
|
14452
|
+
* consumer.
|
|
14453
|
+
* @default false
|
|
14454
|
+
*/
|
|
14455
|
+
this.disableInitialFocus = false;
|
|
14094
14456
|
/**
|
|
14095
14457
|
* Stores the list of focusable elements in the modal
|
|
14096
14458
|
*/
|
|
@@ -14107,16 +14469,41 @@ class PdsModal {
|
|
|
14107
14469
|
}
|
|
14108
14470
|
};
|
|
14109
14471
|
this.handleKeyDown = (e) => {
|
|
14472
|
+
var _a, _b, _c;
|
|
14110
14473
|
// If the modal is not open, don't handle any keyboard events
|
|
14111
14474
|
if (!this.open)
|
|
14112
14475
|
return;
|
|
14113
14476
|
// Handle Escape key to close the modal
|
|
14114
14477
|
if (e.key === 'Escape') {
|
|
14115
|
-
//
|
|
14116
|
-
//
|
|
14117
|
-
//
|
|
14118
|
-
|
|
14119
|
-
|
|
14478
|
+
// Every open pds-modal shares this document-level listener for the
|
|
14479
|
+
// same keydown event. Whichever one runs first can synchronously move
|
|
14480
|
+
// focus (hideModal() restores it), which would make a later instance's
|
|
14481
|
+
// own read of document.activeElement reflect that side effect instead
|
|
14482
|
+
// of where focus actually was when the key was pressed — stacking two
|
|
14483
|
+
// sibling modals closing on one Escape instead of just the top one.
|
|
14484
|
+
// That alone isn't enough, though: isStackedAboveOverlay's `:modal`
|
|
14485
|
+
// check reads LIVE top-layer state, and hideModal()'s close() clears it
|
|
14486
|
+
// synchronously — so whichever sibling's listener runs first (DOM
|
|
14487
|
+
// order, not z-index) can close itself and erase the very evidence a
|
|
14488
|
+
// later listener needs to recognize it was stacked above. Snapshot that
|
|
14489
|
+
// determination too, in the same first-listener-wins block, before any
|
|
14490
|
+
// instance has had a chance to act on this keypress.
|
|
14491
|
+
const eventSnapshot = e;
|
|
14492
|
+
if (!('__pdsActiveElementAtEscape' in eventSnapshot)) {
|
|
14493
|
+
const activeAtDispatch = document.activeElement;
|
|
14494
|
+
eventSnapshot.__pdsActiveElementAtEscape = activeAtDispatch;
|
|
14495
|
+
const topLayerDialog = (_a = activeAtDispatch === null || activeAtDispatch === void 0 ? void 0 : activeAtDispatch.closest('dialog')) !== null && _a !== void 0 ? _a : null;
|
|
14496
|
+
eventSnapshot.__pdsTopLayerDialogAtEscape = topLayerDialog;
|
|
14497
|
+
eventSnapshot.__pdsTopLayerDialogWasModalAtEscape = !!(topLayerDialog && topLayerDialog.matches(':modal'));
|
|
14498
|
+
}
|
|
14499
|
+
// Leave Escape to a genuinely stacked-above overlay (disableTopLayer's
|
|
14500
|
+
// reason for existing) — not just to anything outside this modal.
|
|
14501
|
+
const active = eventSnapshot.__pdsActiveElementAtEscape;
|
|
14502
|
+
if (this.disableTopLayer &&
|
|
14503
|
+
active &&
|
|
14504
|
+
active !== document.body &&
|
|
14505
|
+
!this.el.contains(active) &&
|
|
14506
|
+
this.isStackedAboveOverlay(active, (_b = eventSnapshot.__pdsTopLayerDialogAtEscape) !== null && _b !== void 0 ? _b : null, (_c = eventSnapshot.__pdsTopLayerDialogWasModalAtEscape) !== null && _c !== void 0 ? _c : false)) {
|
|
14120
14507
|
return;
|
|
14121
14508
|
}
|
|
14122
14509
|
// Always prevent native dialog close behavior
|
|
@@ -14160,10 +14547,26 @@ class PdsModal {
|
|
|
14160
14547
|
}
|
|
14161
14548
|
};
|
|
14162
14549
|
}
|
|
14550
|
+
componentWillLoad() {
|
|
14551
|
+
this.warnOnInvalidSize();
|
|
14552
|
+
}
|
|
14553
|
+
sizeChanged() {
|
|
14554
|
+
this.warnOnInvalidSize();
|
|
14555
|
+
}
|
|
14163
14556
|
componentDidLoad() {
|
|
14164
14557
|
this.modalRef = this.el.querySelector('.pds-modal__backdrop');
|
|
14165
14558
|
// Add keyboard event listener
|
|
14166
14559
|
document.addEventListener('keydown', this.handleKeyDown);
|
|
14560
|
+
// @Watch('open') only fires on a later change, not the prop's initial
|
|
14561
|
+
// value — a modal mounted with `open` already true (static markup, or a
|
|
14562
|
+
// framework passing it on first render) would otherwise never call
|
|
14563
|
+
// show()/showModal(): the panel still appears, since that's driven by the
|
|
14564
|
+
// `open` CSS class, but the native <dialog> itself was never opened, so
|
|
14565
|
+
// there's no top-layer promotion, no dialog focusing steps, and no
|
|
14566
|
+
// focusable-elements list or previousActiveElement captured.
|
|
14567
|
+
if (this.open) {
|
|
14568
|
+
this.showModal();
|
|
14569
|
+
}
|
|
14167
14570
|
}
|
|
14168
14571
|
// Unwraps a nested dialog.pds-modal__backdrop left by a page-cache (Turbo, bfcache) reconnect.
|
|
14169
14572
|
componentDidRender() {
|
|
@@ -14269,8 +14672,39 @@ class PdsModal {
|
|
|
14269
14672
|
// Update focusable elements and set initial focus
|
|
14270
14673
|
// Using a longer timeout to ensure all components are fully rendered
|
|
14271
14674
|
setTimeout(() => {
|
|
14675
|
+
var _a, _b;
|
|
14272
14676
|
this.updateFocusableElements();
|
|
14273
|
-
this.
|
|
14677
|
+
if (this.disableInitialFocus) {
|
|
14678
|
+
// show()/showModal() also move focus into the dialog natively (the
|
|
14679
|
+
// HTML spec's "dialog focusing steps") — that native step isn't
|
|
14680
|
+
// necessarily done by the time this task runs either, so counter it
|
|
14681
|
+
// here, in the same deferred slot setInitialFocus() below uses for
|
|
14682
|
+
// the same reason, rather than racing it synchronously above.
|
|
14683
|
+
//
|
|
14684
|
+
// disableInitialFocus exists for a drawer that can open in the
|
|
14685
|
+
// background while the user is mid-task elsewhere — by the time
|
|
14686
|
+
// this runs, they may have already clicked into something of
|
|
14687
|
+
// their own outside the dialog. Only act if focus is still where
|
|
14688
|
+
// the native steps (or nothing) left it, so that isn't stolen.
|
|
14689
|
+
const activeElement = document.activeElement;
|
|
14690
|
+
const focusAlreadyClaimedElsewhere = activeElement !== null && activeElement !== document.body && !((_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.contains(activeElement));
|
|
14691
|
+
if (!focusAlreadyClaimedElsewhere) {
|
|
14692
|
+
if (this.previousActiveElement !== document.body && typeof ((_b = this.previousActiveElement) === null || _b === void 0 ? void 0 : _b.focus) === 'function') {
|
|
14693
|
+
this.previousActiveElement.focus();
|
|
14694
|
+
}
|
|
14695
|
+
else if (activeElement instanceof HTMLElement) {
|
|
14696
|
+
// Nothing was focused before opening (previousActiveElement is
|
|
14697
|
+
// body), so there's nothing to restore focus to — body.focus()
|
|
14698
|
+
// would be a no-op and leave focus wherever the native focusing
|
|
14699
|
+
// steps put it, inside the dialog. Blur that instead so focus
|
|
14700
|
+
// ends up nowhere, matching the state before opening.
|
|
14701
|
+
activeElement.blur();
|
|
14702
|
+
}
|
|
14703
|
+
}
|
|
14704
|
+
}
|
|
14705
|
+
else {
|
|
14706
|
+
this.setInitialFocus();
|
|
14707
|
+
}
|
|
14274
14708
|
this.pdsModalOpen.emit();
|
|
14275
14709
|
}, 100);
|
|
14276
14710
|
}
|
|
@@ -14285,10 +14719,22 @@ class PdsModal {
|
|
|
14285
14719
|
async hideModal() {
|
|
14286
14720
|
if (this.modalRef) {
|
|
14287
14721
|
try {
|
|
14722
|
+
// Capture before close(): with the async task queue, a prop change
|
|
14723
|
+
// that triggers hideModal() (e.g. light dismiss setting `open` false
|
|
14724
|
+
// on a pointerdown elsewhere) doesn't run until the next frame — by
|
|
14725
|
+
// then the browser has already moved focus to whatever the user's
|
|
14726
|
+
// click actually landed on. Restoring previousActiveElement in that
|
|
14727
|
+
// case would steal focus back from a real new destination; only
|
|
14728
|
+
// restore it when focus is still inside the modal (or nowhere, i.e.
|
|
14729
|
+
// document.body), meaning nothing else has claimed it since.
|
|
14730
|
+
const activeElement = document.activeElement;
|
|
14731
|
+
const focusAlreadyMovedElsewhere = activeElement !== null && activeElement !== document.body && !this.modalRef.contains(activeElement);
|
|
14288
14732
|
this.modalRef.close();
|
|
14289
14733
|
this.open = false;
|
|
14290
14734
|
// Restore focus to the element that was focused before the modal was opened
|
|
14291
|
-
if (
|
|
14735
|
+
if (!focusAlreadyMovedElsewhere &&
|
|
14736
|
+
this.previousActiveElement &&
|
|
14737
|
+
typeof this.previousActiveElement.focus === 'function') {
|
|
14292
14738
|
this.previousActiveElement.focus();
|
|
14293
14739
|
}
|
|
14294
14740
|
this.pdsModalClose.emit();
|
|
@@ -14305,6 +14751,46 @@ class PdsModal {
|
|
|
14305
14751
|
const backdrop = modal.querySelector('.pds-modal__backdrop');
|
|
14306
14752
|
return backdrop ? parseInt(getComputedStyle(backdrop).zIndex, 10) : -1;
|
|
14307
14753
|
}
|
|
14754
|
+
/**
|
|
14755
|
+
* Whether `active` sits inside a surface actually stacked above this modal.
|
|
14756
|
+
*
|
|
14757
|
+
* Used to decide whether an Escape keypress belongs to that surface instead
|
|
14758
|
+
* of this modal. Focus being merely *outside* this modal is not enough on
|
|
14759
|
+
* its own: in `disableTopLayer` mode the page stays interactive (that's the
|
|
14760
|
+
* point of a non-modal usage like a drawer), so focus will routinely be on
|
|
14761
|
+
* ordinary page content while the modal is open, and that must not be
|
|
14762
|
+
* mistaken for "an overlay owns Escape."
|
|
14763
|
+
*
|
|
14764
|
+
* Two ways a surface can be above: it is itself promoted to the browser's
|
|
14765
|
+
* top layer (a regular `showModal()` dialog, which paints above everything
|
|
14766
|
+
* outside the top layer regardless of z-index — a sibling pds-modal opened
|
|
14767
|
+
* over a `disableTopLayer` drawer typically shares the exact same z-index
|
|
14768
|
+
* token, so a numeric comparison alone would miss it), or it has a higher
|
|
14769
|
+
* z-index than this modal's own backdrop (a `disableTopLayer` overlay, or
|
|
14770
|
+
* anything else deliberately raised above it).
|
|
14771
|
+
*
|
|
14772
|
+
* `topLayerDialog` / `topLayerDialogWasModal` come pre-snapshotted from the
|
|
14773
|
+
* keydown event (see handleKeyDown) rather than being re-derived here: by
|
|
14774
|
+
* the time a later sibling modal's listener runs, an earlier one may have
|
|
14775
|
+
* already closed itself, which clears `:modal` — reading it live here would
|
|
14776
|
+
* lose that evidence depending on listener order.
|
|
14777
|
+
*/
|
|
14778
|
+
isStackedAboveOverlay(active, topLayerDialog, topLayerDialogWasModal) {
|
|
14779
|
+
if (topLayerDialog && topLayerDialog !== this.modalRef && topLayerDialogWasModal) {
|
|
14780
|
+
return true;
|
|
14781
|
+
}
|
|
14782
|
+
const ownZIndex = this.getBackdropZIndex(this.el);
|
|
14783
|
+
let node = active;
|
|
14784
|
+
while (node && node !== document.body) {
|
|
14785
|
+
const style = getComputedStyle(node);
|
|
14786
|
+
const zIndex = parseInt(style.zIndex, 10);
|
|
14787
|
+
if (style.position !== 'static' && !isNaN(zIndex) && zIndex > ownZIndex) {
|
|
14788
|
+
return true;
|
|
14789
|
+
}
|
|
14790
|
+
node = node.parentElement;
|
|
14791
|
+
}
|
|
14792
|
+
return false;
|
|
14793
|
+
}
|
|
14308
14794
|
/**
|
|
14309
14795
|
* Checks if this modal is the innermost (highest z-index) modal
|
|
14310
14796
|
*/
|
|
@@ -14325,18 +14811,34 @@ class PdsModal {
|
|
|
14325
14811
|
const thisZIndex = this.getBackdropZIndex(this.el);
|
|
14326
14812
|
return thisZIndex === maxZIndex;
|
|
14327
14813
|
}
|
|
14814
|
+
resolveSize() {
|
|
14815
|
+
var _a;
|
|
14816
|
+
const size = ((_a = this.size) !== null && _a !== void 0 ? _a : '').trim() || 'md';
|
|
14817
|
+
if (PRESET_SIZES.includes(size))
|
|
14818
|
+
return [size];
|
|
14819
|
+
return isCustomLength(size) ? ['custom', size] : [undefined];
|
|
14820
|
+
}
|
|
14821
|
+
warnOnInvalidSize() {
|
|
14822
|
+
if (this.resolveSize()[0] !== undefined)
|
|
14823
|
+
return;
|
|
14824
|
+
console.warn(`pds-modal: invalid size "${String(this.size).slice(0, 50)}", using md`);
|
|
14825
|
+
}
|
|
14328
14826
|
render() {
|
|
14329
|
-
|
|
14827
|
+
const [sizeClass = 'md', customSize] = this.resolveSize();
|
|
14828
|
+
return (hAsync("dialog", { key: 'bbc56f2aaf3fe861ae309eb1930d51a588b4c727', class: {
|
|
14330
14829
|
'pds-modal__backdrop': true,
|
|
14331
14830
|
'open': this.open
|
|
14332
|
-
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, hAsync("div", { key: '
|
|
14831
|
+
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, hAsync("div", { key: 'b3d6f9c2a7854845ebe94c05ee507000c38a1326', class: {
|
|
14333
14832
|
'pds-modal': true,
|
|
14334
|
-
[`pds-modal--${
|
|
14833
|
+
[`pds-modal--${sizeClass}`]: true,
|
|
14335
14834
|
'pds-modal--scrollable': this.scrollable
|
|
14336
|
-
}, part: "modal" }, hAsync("slot", { key: '
|
|
14835
|
+
}, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '42ff9ae5e427bc69141c58e0824aad677f5c7756' }))));
|
|
14337
14836
|
}
|
|
14338
14837
|
get el() { return getElement(this); }
|
|
14339
14838
|
static get watchers() { return {
|
|
14839
|
+
"size": [{
|
|
14840
|
+
"sizeChanged": 0
|
|
14841
|
+
}],
|
|
14340
14842
|
"open": [{
|
|
14341
14843
|
"handleOpenChange": 0
|
|
14342
14844
|
}]
|
|
@@ -14352,6 +14854,7 @@ class PdsModal {
|
|
|
14352
14854
|
"size": [1],
|
|
14353
14855
|
"scrollable": [4],
|
|
14354
14856
|
"disableTopLayer": [4, "disable-top-layer"],
|
|
14857
|
+
"disableInitialFocus": [4, "disable-initial-focus"],
|
|
14355
14858
|
"focusableElementsArray": [32],
|
|
14356
14859
|
"showModal": [64],
|
|
14357
14860
|
"hideModal": [64]
|
|
@@ -14543,10 +15046,10 @@ class PdsModalContent {
|
|
|
14543
15046
|
render() {
|
|
14544
15047
|
// Only apply max-height style if it's not 'none'
|
|
14545
15048
|
const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
|
|
14546
|
-
return (hAsync(Host, { key: '
|
|
15049
|
+
return (hAsync(Host, { key: '7bd0f26425c71e4551ae21e38d57d2124dabfc50' }, hAsync("div", { key: '120e6947e734e44883af975991781f338acd7dbc', class: {
|
|
14547
15050
|
'pds-modal-content': true,
|
|
14548
15051
|
[`pds-modal-content--border-${this.border}`]: true
|
|
14549
|
-
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '
|
|
15052
|
+
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '6f2c8d44a69df8ecc1214e00604023274cee2790' }))));
|
|
14550
15053
|
}
|
|
14551
15054
|
get el() { return getElement(this); }
|
|
14552
15055
|
static get style() { return pdsModalContentCss(); }
|
|
@@ -14574,7 +15077,7 @@ class PdsModalFooter {
|
|
|
14574
15077
|
unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
|
|
14575
15078
|
}
|
|
14576
15079
|
render() {
|
|
14577
|
-
return (hAsync("footer", { key: '
|
|
15080
|
+
return (hAsync("footer", { key: 'f344716ed1fbd77b447e10c9b78565918dc17be0', class: "pds-modal__footer" }, hAsync("slot", { key: 'ba85cf6f7f56c8f8a8ff6d24c5fa647722140fda' })));
|
|
14578
15081
|
}
|
|
14579
15082
|
get el() { return getElement(this); }
|
|
14580
15083
|
static get style() { return pdsModalFooterCss(); }
|
|
@@ -14599,7 +15102,7 @@ class PdsModalHeader {
|
|
|
14599
15102
|
unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
|
|
14600
15103
|
}
|
|
14601
15104
|
render() {
|
|
14602
|
-
return (hAsync("header", { key: '
|
|
15105
|
+
return (hAsync("header", { key: '0490ac7854089dad4666e2a6509ae730f805f97f', class: "pds-modal__header" }, hAsync("slot", { key: 'b76e5a970d3f17411b9e9e5debd981298f2290d1' })));
|
|
14603
15106
|
}
|
|
14604
15107
|
get el() { return getElement(this); }
|
|
14605
15108
|
static get style() { return pdsModalHeaderCss(); }
|
|
@@ -15698,10 +16201,10 @@ class PdsMultiselect {
|
|
|
15698
16201
|
}
|
|
15699
16202
|
render() {
|
|
15700
16203
|
const hasSelections = this.selectedItems.length > 0;
|
|
15701
|
-
return (hAsync(Host, { key: '
|
|
16204
|
+
return (hAsync(Host, { key: '5d4de9ca729d5bfb63a8a73f8f40328b9ab48f57', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '2b5e1e01caaa4a6540a67e2638a20072e9f706cb', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: 'f23b840feb4e243d90b3a9913dab1b238e7c497d', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
|
|
15702
16205
|
'pds-multiselect__label': true,
|
|
15703
16206
|
'visually-hidden': this.hideLabel,
|
|
15704
|
-
} }, this.label)), hAsync("div", { key: '
|
|
16207
|
+
} }, this.label)), hAsync("div", { key: '2e1f89d6f06332e957858c0eea34fca1a9629921', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
|
|
15705
16208
|
'pds-multiselect__trigger': true,
|
|
15706
16209
|
'pds-multiselect__trigger--open': this.isOpen,
|
|
15707
16210
|
'pds-multiselect__trigger--disabled': this.disabled,
|
|
@@ -15717,7 +16220,7 @@ class PdsMultiselect {
|
|
|
15717
16220
|
}, 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: {
|
|
15718
16221
|
'pds-multiselect__trigger-text': true,
|
|
15719
16222
|
'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
|
|
15720
|
-
} }, this.getTriggerText()), hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '
|
|
16223
|
+
} }, this.getTriggerText()), hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '3d2e201157ce16abbcd12fa9254ced7f2b562a8f', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: '3bbf405df2e72ae730529f28273b003b3332e980', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: 'ef4a27162b00b14c3c9dfcb695f311961f2f56e5', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '99fb12375e2d660018276091bf8014b9bc9a672e', icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: '8fc6369015e8d04d1dec582007733eb5db6776f5', style: { display: 'none' } }, hAsync("slot", { key: 'a808ecb0f4b2c00fca478cda5c0054c6aba29a8d' })))));
|
|
15721
16224
|
}
|
|
15722
16225
|
static get formAssociated() { return true; }
|
|
15723
16226
|
get el() { return getElement(this); }
|
|
@@ -16361,7 +16864,7 @@ class PdsPopover {
|
|
|
16361
16864
|
}, 16); // ~1 frame at 60fps
|
|
16362
16865
|
}
|
|
16363
16866
|
render() {
|
|
16364
|
-
return (hAsync(Host, { key: '
|
|
16867
|
+
return (hAsync(Host, { key: '760428c178ed92dfc35293181b7cef8fac3b4e26', id: this.componentId }, hAsync("span", { key: 'd12a6a33dcf0fe6f3b61972ae8e5ac604263b2ac', class: "pds-popover__trigger-wrapper" }, hAsync("slot", { key: 'd975e355a3acb9bc6d95202ec177f631bddb43bf', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), hAsync("div", { key: 'f99ae2d97c75ed8ec63fbd0a859f8b7b9f78f0d2', class: "pds-popover__content-slot-wrapper" }, hAsync("slot", { key: 'd1620c57d993496045fc3c47b55cdd0c1d07b36c', onSlotchange: this.handleContentSlotChange }))));
|
|
16365
16868
|
}
|
|
16366
16869
|
get el() { return getElement(this); }
|
|
16367
16870
|
static get style() { return pdsPopoverCss(); }
|
|
@@ -16411,7 +16914,8 @@ class PdsProgress {
|
|
|
16411
16914
|
this.showPercent = false;
|
|
16412
16915
|
}
|
|
16413
16916
|
render() {
|
|
16414
|
-
|
|
16917
|
+
const normalizedFillColor = normalizeColorValue(this.fillColor);
|
|
16918
|
+
return (hAsync(Host, { key: 'acca17890c316c056c61e4fad2917f0279126c39', class: this.animated ? { 'is-animated': this.animated } : '' }, hAsync("div", { key: 'f8140ac930335bd67e3576a0f3739092d492d884', class: "pds-progress" }, hAsync("label", { key: '66416d0472024ae14a6413e4e533f08970cbc857', class: "pds-progress__label", htmlFor: this.componentId }, this.label), hAsync("progress", { key: '2bbbe4e1e3d186c2895401ac4b68dabac60a1df9', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && hAsync("div", { key: '672956684adf944ea1de8769dbaba615c82a85b6', class: "pds-progress__percentage" }, this.percent, "%")));
|
|
16415
16919
|
}
|
|
16416
16920
|
static get style() { return pdsProgressCss(); }
|
|
16417
16921
|
static get cmpMeta() { return {
|
|
@@ -16445,7 +16949,7 @@ class PdsProperty {
|
|
|
16445
16949
|
this.icon = 'star';
|
|
16446
16950
|
}
|
|
16447
16951
|
render() {
|
|
16448
|
-
return (hAsync(Host, { key: '
|
|
16952
|
+
return (hAsync(Host, { key: '1ce4509363c6c40c76d7d6c17335721b348abf04', id: this.componentId }, hAsync("pds-box", { key: '8c6f5dd171e0383640aa550ccbe1b20e74de5b07', "align-items": "center", gap: "xs" }, hAsync("pds-icon", { key: '31c19e7ff0c466f2fe54ad2d2366929311f01364', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), hAsync("slot", { key: 'b5ddb877ef6f3239992a892c7990bbd4fcfa77ae' }))));
|
|
16449
16953
|
}
|
|
16450
16954
|
static get style() { return pdsPropertyCss(); }
|
|
16451
16955
|
static get cmpMeta() { return {
|
|
@@ -16463,7 +16967,7 @@ class PdsProperty {
|
|
|
16463
16967
|
|
|
16464
16968
|
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)}`;
|
|
16465
16969
|
|
|
16466
|
-
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-
|
|
16970
|
+
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;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__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)}`;
|
|
16467
16971
|
|
|
16468
16972
|
/**
|
|
16469
16973
|
* @slot image - Custom image content to display instead of the default radio input
|
|
@@ -16558,11 +17062,11 @@ class PdsRadio {
|
|
|
16558
17062
|
}
|
|
16559
17063
|
render() {
|
|
16560
17064
|
const renderLabelAndMessages = () => [
|
|
16561
|
-
hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: '
|
|
17065
|
+
hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: 'faa2d815e03f6b05108af0e7934101b2d5f71c59', "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() ? 'visually-hidden' : '' }), hAsync("span", { key: '22df3067667a7815e03dca45e4ef49d0e1caadcc', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
|
|
16562
17066
|
this.helperMessage && (hAsync("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
|
|
16563
|
-
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: '
|
|
17067
|
+
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: '6dac17ccd12d558d3b25ffb77c55d160a619d6ab', icon: danger, size: "small" }), this.errorMessage))
|
|
16564
17068
|
];
|
|
16565
|
-
return (hAsync(Host, { key: '
|
|
17069
|
+
return (hAsync(Host, { key: 'b464057b9e8d5de710183803c7d5e825316b3c3b', class: this.classNames() }, this.hasImage() && (hAsync("div", { key: '692b2681221596cdf4bf6a21574edb2373d5127b', class: "pds-radio__image-container", part: "image-container" }, hAsync("slot", { key: 'd68951b5b671863d582ad1a98543a51832966b36', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (hAsync("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
|
|
16566
17070
|
}
|
|
16567
17071
|
get el() { return getElement(this); }
|
|
16568
17072
|
static get style() { return labelCss$3() + pdsRadioCss(); }
|
|
@@ -16753,13 +17257,13 @@ class PdsRadioGroup {
|
|
|
16753
17257
|
render() {
|
|
16754
17258
|
const gapValue = this.getGapValue();
|
|
16755
17259
|
const ariaDescribedBy = this.getAriaDescribedBy();
|
|
16756
|
-
return (hAsync(Host, { key: '
|
|
17260
|
+
return (hAsync(Host, { key: '048d4676df7c31a9ab08e4d4fc2b93866c1241fd', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
|
|
16757
17261
|
'--pds-radio-group-gap': gapValue,
|
|
16758
|
-
} }, this.groupLabel && (hAsync("div", { key: '
|
|
17262
|
+
} }, this.groupLabel && (hAsync("div", { key: '414363733d6053517bb63888fb9813af6554d4df', class: "pds-radio-group__label" }, this.groupLabel)), hAsync("div", { key: 'd368dc474bf76f5cf7d633e59f929060fbf60b83', class: {
|
|
16759
17263
|
'pds-radio-group__radios': true,
|
|
16760
17264
|
'pds-radio-group__radios--row': this.direction === 'row',
|
|
16761
17265
|
'pds-radio-group__radios--column': this.direction === 'column',
|
|
16762
|
-
} }, hAsync("slot", { key: '
|
|
17266
|
+
} }, hAsync("slot", { key: '210e1ba8d276c2832017ea7bf3d03348aa46106a', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (hAsync("div", { key: '06015935856640afdcddfcd8833a3a0659c58698', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("div", { key: '44256d9a050feda9651f90093a298a12d9e97250', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '2b3aa1ffaa0f6a3ad0ce83d2becfcfdcc2f56fbc', icon: danger, size: "small" }), this.errorMessage))));
|
|
16763
17267
|
}
|
|
16764
17268
|
get el() { return getElement(this); }
|
|
16765
17269
|
static get watchers() { return {
|
|
@@ -16857,7 +17361,7 @@ class PdsRow {
|
|
|
16857
17361
|
})), (this.minHeight && {
|
|
16858
17362
|
'min-height': this.minHeight,
|
|
16859
17363
|
}));
|
|
16860
|
-
return hAsync(Host, { key: '
|
|
17364
|
+
return hAsync(Host, { key: '556bb00908d60df442b1fae17e28e54353f85f20', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
|
|
16861
17365
|
}
|
|
16862
17366
|
static get style() { return pdsRowCss(); }
|
|
16863
17367
|
static get cmpMeta() { return {
|
|
@@ -17117,7 +17621,7 @@ class PdsSelect {
|
|
|
17117
17621
|
}
|
|
17118
17622
|
render() {
|
|
17119
17623
|
const hasAction = this.el.querySelector('[slot="action"]') !== null;
|
|
17120
|
-
return (hAsync(Host, { key: '
|
|
17624
|
+
return (hAsync(Host, { key: '6b240f3f91bcbdc52f019b0b6c57afda91abcbc9', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '5bcacb3b861b69d4b2a16b917bad3d7c356eab13', class: "pds-select" }, !this.hideLabel && (hAsync("div", { key: '4707b7b50a9e3144316f6c3e8b78767aee56553e', class: "pds-select__label-wrapper" }, hAsync("label", { key: '89992c65158f26fef606b4f613baf139e9fe17c8', htmlFor: this.componentId }, hAsync("span", { key: '8f05323646aca793a80310515b1cc6e0e8597736', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), hAsync("select", { key: '8381fe48cce4c6ec32ae2c0dd16bc3e188fbfda0', "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: 'c05f059e3c4e21d304ac1da08613d2b2d84aa342', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, hAsync("slot", { key: 'b52f06405693803c0d2309e97f2611598cac7b70', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && hAsync("pds-icon", { key: 'e1e7af5249a928402a3c5dfe418f695b4e1fa7d4', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
|
|
17121
17625
|
}
|
|
17122
17626
|
static get formAssociated() { return true; }
|
|
17123
17627
|
get el() { return getElement(this); }
|
|
@@ -19864,7 +20368,7 @@ class PdsSortable {
|
|
|
19864
20368
|
this.sortableInstance = Sortable.create(this.el, sortableOptions);
|
|
19865
20369
|
}
|
|
19866
20370
|
render() {
|
|
19867
|
-
return (hAsync(Host, { key: '
|
|
20371
|
+
return (hAsync(Host, { key: '235879c63aa8e55ea819fd3bcdb30ef56dd2c0b3', class: this.classNames(), id: this.componentId }, hAsync("slot", { key: '28cb6ef1a3b1f7de15f1f2728ffa625c879890dc' })));
|
|
19868
20372
|
}
|
|
19869
20373
|
get el() { return getElement(this); }
|
|
19870
20374
|
static get watchers() { return {
|
|
@@ -19930,7 +20434,7 @@ class PdsSortableItem {
|
|
|
19930
20434
|
}
|
|
19931
20435
|
}
|
|
19932
20436
|
render() {
|
|
19933
|
-
return (hAsync(Host, { key: '
|
|
20437
|
+
return (hAsync(Host, { key: '07dcd36e87b8fcfae7ff5f33a7bd8d44322fcbb3', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (hAsync("div", { key: 'cb2de083316c50beb63d700288c9091d01a99240', class: "pds-sortable-item__handle" }, hAsync("pds-icon", { key: '90906fe69419f1a240aa976e7024872577d00bd3', "aria-hidden": "true", icon: handle }))), hAsync("slot", { key: 'a6969eb7d575919db12f98e3fc5d82708128be8e' }), this.enableActions && (hAsync("div", { key: '5688ea0ead3c2adba9e21a7fa327adc6fdbc71b1', class: "pds-sortable-item__actions" }, hAsync("slot", { key: 'f62b4ecf0c92edae854e9b3ca5e9da6a5051f77d', name: "sortable-item-actions" })))));
|
|
19934
20438
|
}
|
|
19935
20439
|
get el() { return getElement(this); }
|
|
19936
20440
|
static get style() { return pdsSortableItemCss(); }
|
|
@@ -19950,7 +20454,7 @@ class PdsSortableItem {
|
|
|
19950
20454
|
|
|
19951
20455
|
const labelCss$1 = () => `: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)}`;
|
|
19952
20456
|
|
|
19953
|
-
const pdsSwitchCss = () => `:host{--sizing-input-toggle-size:calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));--pine-dimension-025:2px;--spacing-message-inline:calc(var(--pine-dimension-450) + var(--pine-dimension-150));--number-transition-timing:
|
|
20457
|
+
const pdsSwitchCss = () => `:host{--sizing-input-toggle-size:calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));--pine-dimension-025:2px;--spacing-message-inline:calc(var(--pine-dimension-450) + var(--pine-dimension-150));--number-transition-timing:var(--pine-motion-duration-fast) ease-out;-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}:host(.pds-switch--error){color:var(--pine-color-text-message-danger)}:host(.pds-switch--error) input,:host(.pds-switch--error) input:checked,:host(.pds-switch--error) input:hover:not(:disabled):not(:checked){background-color:var(--pine-color-danger)}:host(.pds-switch--error) input:focus-visible:not(:disabled):not(:checked){outline-color:var(--pine-color-focus-ring-danger)}:host(.pds-switch--error) label{color:var(--color-text-error)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-neutral);border:0;border-radius:var(--pine-dimension-sm);cursor:pointer;display:inline-block;-ms-flex-negative:0;flex-shrink:0;height:var(--pine-dimension-250);margin:0;padding:0;position:relative;-webkit-transition:var(--number-transition-timing);transition:var(--number-transition-timing);-webkit-transition-property:background, border, color;transition-property:background, border, color;width:var(--pine-dimension-450)}input::after{background:var(--pine-color-secondary);border-radius:var(--pine-border-radius-full);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);content:"";display:block;height:var(--sizing-input-toggle-size);inset-block-start:50%;inset-inline-start:var(--pine-dimension-025);position:absolute;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:inset-inline-start var(--number-transition-timing);transition:inset-inline-start var(--number-transition-timing);width:var(--sizing-input-toggle-size)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-150)}.pds-switch--error label{color:inherit}.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-switch__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs);-webkit-margin-start:var(--spacing-message-inline);margin-inline-start:var(--spacing-message-inline);width:100%}.pds-switch__message+.pds-switch__message{-webkit-margin-before:var(--spacing-message-inline);margin-block-start:var(--spacing-message-inline)}.pds-switch__message--error{color:inherit;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-switch__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}input:disabled{background-color:var(--pine-color-neutral-disabled);cursor:not-allowed}input:disabled~label{cursor:initial}input:disabled:hover::after{background-color:var(--pine-color-secondary)}input:disabled .pds-switch__message{color:initial}input:hover:not(:disabled){background-color:var(--pine-color-neutral-hover)}input:focus-visible:not(:disabled){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}input:checked::after{inset-inline-start:calc(100% - var(--sizing-input-toggle-size) - var(--pine-dimension-025))}input:checked:not(:disabled){background-color:currentColor;color:var(--pine-color-accent)}input:checked:not(:disabled):hover{border-color:currentColor;color:var(--pine-color-accent-hover)}`;
|
|
19954
20458
|
|
|
19955
20459
|
class PdsSwitch {
|
|
19956
20460
|
constructor(hostRef) {
|
|
@@ -20034,9 +20538,9 @@ class PdsSwitch {
|
|
|
20034
20538
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
20035
20539
|
}
|
|
20036
20540
|
render() {
|
|
20037
|
-
return (hAsync(Host, { key: '
|
|
20038
|
-
hAsync("div", { key: '
|
|
20039
|
-
hAsync("div", { key: '
|
|
20541
|
+
return (hAsync(Host, { key: '0f7a97cc04485d5ead92f1d9e1deff176bef7859', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, hAsync("label", { key: 'bb8d0849e8ac5fd63d83f30d892bb195c7ed984c', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: 'd4f1c469ed61e5511fb4fef2b587b7320b7b8d10', "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: 'a902c71c77d143e5930f18ab3f37d3442d9190e3', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
|
|
20542
|
+
hAsync("div", { key: '3802a9cc1068caa4955634be3c728f283dedab16', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
20543
|
+
hAsync("div", { key: 'be0d4094af7f9c59be32faf42aed585ec92fd730', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'f0f342b703fc5db7a4b03891ed5101e0ebcde47e', icon: danger, size: "small" }), this.errorMessage)));
|
|
20040
20544
|
}
|
|
20041
20545
|
static get formAssociated() { return true; }
|
|
20042
20546
|
get el() { return getElement(this); }
|
|
@@ -20446,7 +20950,7 @@ class PdsTableBody {
|
|
|
20446
20950
|
registerInstance(this, hostRef);
|
|
20447
20951
|
}
|
|
20448
20952
|
render() {
|
|
20449
|
-
return (hAsync(Host, { key: '
|
|
20953
|
+
return (hAsync(Host, { key: '38b6b6121a4652e5b98f2ff22721e687ae401437', role: "rowgroup", part: "body" }, hAsync("slot", { key: '7ce84ac64307b9e19a8b4b72efe3e8eab34f99bf' })));
|
|
20450
20954
|
}
|
|
20451
20955
|
static get style() { return pdsTableBodyCss(); }
|
|
20452
20956
|
static get cmpMeta() { return {
|
|
@@ -20584,11 +21088,11 @@ class PdsTableCell {
|
|
|
20584
21088
|
return classNames.join(' ');
|
|
20585
21089
|
}
|
|
20586
21090
|
render() {
|
|
20587
|
-
return (hAsync(Host, { key: '
|
|
21091
|
+
return (hAsync(Host, { key: '1c37f341c8171d322d60647b25bfa92fdd9ea339', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
|
|
20588
21092
|
this.tableRef.fixedColumn &&
|
|
20589
21093
|
this.tableRef.selectable
|
|
20590
21094
|
? { '--fixed-cell-position': '40px' }
|
|
20591
|
-
: {} }, hAsync("slot", { key: '
|
|
21095
|
+
: {} }, hAsync("slot", { key: '339b2217df131c58d76258f581a53c0bd46cbd03' })));
|
|
20592
21096
|
}
|
|
20593
21097
|
get hostElement() { return getElement(this); }
|
|
20594
21098
|
static get watchers() { return {
|
|
@@ -20665,7 +21169,7 @@ class PdsTableHead {
|
|
|
20665
21169
|
}
|
|
20666
21170
|
}
|
|
20667
21171
|
render() {
|
|
20668
|
-
return (hAsync(Host, { key: '
|
|
21172
|
+
return (hAsync(Host, { key: '5815389e77b61a323dd4430625b0917a7428bf02', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-head-cell", { key: '161fdced5a7c7cd13a62fb7c1ed96e82ad2dbfd0', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (hAsync("pds-checkbox", { key: 'd6e90d844d314ef347ffb4db8b360ba36887c311', 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: '1dd5dd37d4fca230000a6eb4b96fee87e4e67802' })));
|
|
20669
21173
|
}
|
|
20670
21174
|
get hostElement() { return getElement(this); }
|
|
20671
21175
|
static get style() { return pdsTableHeadCss(); }
|
|
@@ -20886,11 +21390,11 @@ class PdsTableHeadCell {
|
|
|
20886
21390
|
return classNames.join(' ');
|
|
20887
21391
|
}
|
|
20888
21392
|
render() {
|
|
20889
|
-
return (hAsync(Host, { key: '
|
|
21393
|
+
return (hAsync(Host, { key: 'c30192a432bbd8868326fc7ed4199b98a33991ff', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
|
|
20890
21394
|
this.tableRef.fixedColumn &&
|
|
20891
21395
|
this.tableRef.selectable
|
|
20892
21396
|
? { '--fixed-cell-position': '40px' }
|
|
20893
|
-
: {} }, hAsync("slot", { key: '
|
|
21397
|
+
: {} }, hAsync("slot", { key: 'e725a7e576f6bc56d385c8cb0822ce255544fbcb' }), this.sortable && this.isActive && (hAsync("pds-icon", { key: '52068d114bfadcd6d4e02c86e703349bc7833716', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
|
|
20894
21398
|
}
|
|
20895
21399
|
get hostElement() { return getElement(this); }
|
|
20896
21400
|
static get style() { return pdsTableHeadCellCss(); }
|
|
@@ -21056,7 +21560,7 @@ class PdsTableRow {
|
|
|
21056
21560
|
}
|
|
21057
21561
|
}
|
|
21058
21562
|
render() {
|
|
21059
|
-
return (hAsync(Host, { key: '
|
|
21563
|
+
return (hAsync(Host, { key: '4188f670137051d35cf73a5ca86566f65c3eca09', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-cell", { key: '122ff6ec96ea4857b863f9283bd46946dc403bff', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, hAsync("pds-checkbox", { key: '9997b31c86190fe8f25ba4d1b42b8753facbba70', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), hAsync("slot", { key: 'f9bc0700386b11a35f78d639118351675ab7150d' })));
|
|
21060
21564
|
}
|
|
21061
21565
|
get hostElement() { return getElement(this); }
|
|
21062
21566
|
static get style() { return pdsTableRowCss(); }
|
|
@@ -21096,7 +21600,7 @@ class PdsTabpanel {
|
|
|
21096
21600
|
unwrapReconnectedContent(this.el.querySelector('.pds-tabpanel'), '.pds-tabpanel');
|
|
21097
21601
|
}
|
|
21098
21602
|
render() {
|
|
21099
|
-
return (hAsync(Host, { key: '
|
|
21603
|
+
return (hAsync(Host, { key: 'e1dd3a854d6ceffff0688afb7ed02f3d56ae9333', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, hAsync("div", { key: '381a763bc540659c8944ff48ccc1a41ad94dc087', 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: 'bdb11c6e68f701cf91fda68db5122bb9dfe7d894' }))));
|
|
21100
21604
|
}
|
|
21101
21605
|
get el() { return getElement(this); }
|
|
21102
21606
|
static get style() { return pdsTabpanelCss(); }
|
|
@@ -21280,7 +21784,7 @@ class PdsTabs {
|
|
|
21280
21784
|
// Navigation mode: a <nav> landmark of links (aria-current marks the current
|
|
21281
21785
|
// page). Panel mode: the ARIA tablist of role=tab buttons over tabpanels.
|
|
21282
21786
|
const tabList = this.isNav ? (hAsync("nav", { class: "pds-tabs__tablist", "aria-label": this.tablistLabel || undefined, part: "tab-list" }, hAsync("slot", { name: "tabs" }))) : (hAsync("div", { class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, hAsync("slot", { name: "tabs" })));
|
|
21283
|
-
return (hAsync(Host, { key: '
|
|
21787
|
+
return (hAsync(Host, { key: 'f9d0e94dcacd7b94691368f08eb77b45475c0a35', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, hAsync("slot", { key: '93c605b2bd4b8ad3dcd8f494a82fd30833e8b300', name: "tabpanels" })));
|
|
21284
21788
|
}
|
|
21285
21789
|
get el() { return getElement(this); }
|
|
21286
21790
|
static get style() { return pdsTabsCss(); }
|
|
@@ -21406,7 +21910,7 @@ class PdsText {
|
|
|
21406
21910
|
? `pds-text--decoration-${this.decoration}`
|
|
21407
21911
|
: ''}
|
|
21408
21912
|
`;
|
|
21409
|
-
return (hAsync(Tag, { key: '
|
|
21913
|
+
return (hAsync(Tag, { key: 'cf597479ded618a0674d68fd726b828d88c0e642', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: 'f9c163be5662522b012bca6b0a23cfe00860e474' })));
|
|
21410
21914
|
}
|
|
21411
21915
|
get el() { return getElement(this); }
|
|
21412
21916
|
static get watchers() { return {
|
|
@@ -21747,10 +22251,10 @@ class PdsTextarea {
|
|
|
21747
22251
|
}
|
|
21748
22252
|
render() {
|
|
21749
22253
|
const value = this.getValue();
|
|
21750
|
-
return (hAsync(Host, { key: '
|
|
21751
|
-
hAsync("div", { key: '
|
|
21752
|
-
hAsync("p", { key: '
|
|
21753
|
-
hAsync("p", { key: '
|
|
22254
|
+
return (hAsync(Host, { key: '838d12ba686fb041996c44522d3fd30e1b56c610', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: 'bd3eef138a5c8f2cd4e48c007561bb1b12f4e575', class: "pds-textarea" }, this.label &&
|
|
22255
|
+
hAsync("div", { key: 'f83f23b17cd157d48bb5c0c5067ca5f611d73529', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '896b7b495ad6f7deb8d4738e623f0676f0a98c1f', htmlFor: this.componentId }, hAsync("span", { key: '02b06db969467f6c4e83e0f713bee0be76f8dfff', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '15c5964576e73db36cee4a9ca868c28571250a27', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: '4493797e03322993a8cbe5530a18a9ef984b9796', 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 &&
|
|
22256
|
+
hAsync("p", { key: '9c8794ec733a3ece5eaeac74ef6a1ebb223558c3', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
|
|
22257
|
+
hAsync("p", { key: 'c4b9be66c3f3c39ddf495708f0f03cfda03e7fc6', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'c117b8d62c055382f5d43caa7f2cb880796c495b', icon: danger, size: "small" }), this.errorMessage))));
|
|
21754
22258
|
}
|
|
21755
22259
|
static get formAssociated() { return true; }
|
|
21756
22260
|
get el() { return getElement(this); }
|
|
@@ -21924,13 +22428,13 @@ class PdsToast {
|
|
|
21924
22428
|
return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
|
|
21925
22429
|
}
|
|
21926
22430
|
render() {
|
|
21927
|
-
return (hAsync(Host, { key: '
|
|
22431
|
+
return (hAsync(Host, { key: 'a1ec97158a6665aa25b58b1954b4b5c622590615', hidden: !this.isVisible }, hAsync("div", { key: 'd9b01164364c76512852a260cede50000b73a563', class: {
|
|
21928
22432
|
'pds-toast': true,
|
|
21929
22433
|
[`pds-toast--${this.type}`]: this.type !== 'default',
|
|
21930
22434
|
'pds-toast--animating-out': this.isAnimatingOut
|
|
21931
|
-
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '
|
|
22435
|
+
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '1f581c7c29ea3fc795dfca061d3575c5a9895b3c', class: "pds-toast__message" }, hAsync("slot", { key: '645b31eae3be23de63ab2562234caf0be2510645' })), this.dismissible && (hAsync("button", { key: '44a62b304468c0fca0b8d490ad9c8b5932176ac9', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
|
|
21932
22436
|
this.dismiss();
|
|
21933
|
-
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '
|
|
22437
|
+
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: 'fde63f279f696d9f02875cc1beee3542c97f0c7e', name: "remove" }))))));
|
|
21934
22438
|
}
|
|
21935
22439
|
get el() { return getElement(this); }
|
|
21936
22440
|
static get watchers() { return {
|
|
@@ -22304,9 +22808,9 @@ class PdsTooltip {
|
|
|
22304
22808
|
}
|
|
22305
22809
|
render() {
|
|
22306
22810
|
const hostId = this.componentId || undefined;
|
|
22307
|
-
return (hAsync(Host, { key: '
|
|
22811
|
+
return (hAsync(Host, { key: 'a4f25d10de27757ab2551af0e5b8a53336bf8cb4', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '5e9f9afbecbb335ad68b02edf999d2ec62f31a8e', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
|
|
22308
22812
|
/* focusin/out bubble; ensure keyboard users see tooltips */
|
|
22309
|
-
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '
|
|
22813
|
+
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: 'e142f4f09406b7bd3d1ce9005f624b91cf7ec176' })), hAsync("div", { key: 'ebe0faae0af623477486dbba56c24bc3e0a6bc66', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: '833d31509ba48f10cd0b5eb2f5e8dc509854c25e', name: "content" }))));
|
|
22310
22814
|
}
|
|
22311
22815
|
get el() { return getElement(this); }
|
|
22312
22816
|
static get watchers() { return {
|
|
@@ -22350,6 +22854,10 @@ registerComponents([
|
|
|
22350
22854
|
PdsContainer,
|
|
22351
22855
|
PdsCopytext,
|
|
22352
22856
|
PdsDivider,
|
|
22857
|
+
PdsDrawer,
|
|
22858
|
+
PdsDrawerContent,
|
|
22859
|
+
PdsDrawerFooter,
|
|
22860
|
+
PdsDrawerHeader,
|
|
22353
22861
|
PdsDropdownMenu,
|
|
22354
22862
|
PdsDropdownMenuItem,
|
|
22355
22863
|
PdsDropdownMenuSeparator,
|