@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.js
CHANGED
|
@@ -5446,7 +5446,7 @@ var setScopedSSR = (opts) => {
|
|
|
5446
5446
|
var needsScopedSSR = () => scopedSSR;
|
|
5447
5447
|
var scopedSSR = false;
|
|
5448
5448
|
|
|
5449
|
-
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}`;
|
|
5449
|
+
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}`;
|
|
5450
5450
|
|
|
5451
5451
|
/**
|
|
5452
5452
|
* Mock PdsModal component for testing purposes
|
|
@@ -5530,7 +5530,7 @@ class MockPdsModal {
|
|
|
5530
5530
|
'pds-modal__backdrop': true,
|
|
5531
5531
|
'open': this.open,
|
|
5532
5532
|
};
|
|
5533
|
-
return (hAsync("div", { key: '
|
|
5533
|
+
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" })))));
|
|
5534
5534
|
}
|
|
5535
5535
|
get el() { return getElement(this); }
|
|
5536
5536
|
static get style() { return pdsModalCss$1(); }
|
|
@@ -5552,7 +5552,7 @@ class MockPdsModal {
|
|
|
5552
5552
|
}; }
|
|
5553
5553
|
}
|
|
5554
5554
|
|
|
5555
|
-
/* pds-icons v10.
|
|
5555
|
+
/* pds-icons v10.5.1, ES Modules */
|
|
5556
5556
|
|
|
5557
5557
|
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>";
|
|
5558
5558
|
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>";
|
|
@@ -5894,9 +5894,16 @@ const debounce = (func, wait = 0) => {
|
|
|
5894
5894
|
timer = setTimeout(func, wait, ...args);
|
|
5895
5895
|
};
|
|
5896
5896
|
};
|
|
5897
|
-
// Add shared color normalization utility to unify token handling across components
|
|
5898
5897
|
/**
|
|
5899
|
-
* Normalizes color values to ensure consistent CSS variable usage
|
|
5898
|
+
* Normalizes color values to ensure consistent CSS variable usage.
|
|
5899
|
+
*
|
|
5900
|
+
* This is the single low-level primitive for color-prop normalization in
|
|
5901
|
+
* Pine. A component with its own semantic-keyword set (e.g. pds-chip's
|
|
5902
|
+
* sentiment-to-dot-color map) should call this directly with its own
|
|
5903
|
+
* `semanticMap` rather than inventing a new normalization helper. Reach for
|
|
5904
|
+
* `setColor` below only when its specific text-role semantic set and
|
|
5905
|
+
* `--color` output key already match what the component needs.
|
|
5906
|
+
*
|
|
5900
5907
|
* @param value - Raw token (--token), CSS variable (var(--token)), semantic name, or literal color
|
|
5901
5908
|
* @param options.semanticMap - Optional mapping of semantic names to CSS variables
|
|
5902
5909
|
* @returns Normalized color value or undefined for invalid inputs
|
|
@@ -5921,6 +5928,13 @@ const normalizeColorValue = (value, options) => {
|
|
|
5921
5928
|
// Otherwise treat as literal CSS color value
|
|
5922
5929
|
return trimmed;
|
|
5923
5930
|
};
|
|
5931
|
+
/**
|
|
5932
|
+
* Convenience wrapper around `normalizeColorValue` for the common text-role
|
|
5933
|
+
* semantic set (primary/secondary/accent/etc.), returned as a `--color`
|
|
5934
|
+
* custom property. If a component needs a different semantic map or a
|
|
5935
|
+
* different custom-property name (e.g. pds-chip's dot/icon-specific tokens),
|
|
5936
|
+
* call `normalizeColorValue` directly instead of extending this function.
|
|
5937
|
+
*/
|
|
5924
5938
|
const setColor = (color, customColors) => {
|
|
5925
5939
|
// Return an empty object for empty/whitespace/undefined inputs to avoid invalid CSS styles
|
|
5926
5940
|
if (!color)
|
|
@@ -6227,7 +6241,7 @@ class PdsBox {
|
|
|
6227
6241
|
}; }
|
|
6228
6242
|
}
|
|
6229
6243
|
|
|
6230
|
-
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)}`;
|
|
6244
|
+
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)}`;
|
|
6231
6245
|
|
|
6232
6246
|
/**
|
|
6233
6247
|
* @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).
|
|
@@ -6604,7 +6618,7 @@ const inheritAriaAttributes = (el, ignoreList) => {
|
|
|
6604
6618
|
|
|
6605
6619
|
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)}`;
|
|
6606
6620
|
|
|
6607
|
-
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-
|
|
6621
|
+
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)}`;
|
|
6608
6622
|
|
|
6609
6623
|
class PdsCheckbox {
|
|
6610
6624
|
constructor(hostRef) {
|
|
@@ -8422,10 +8436,12 @@ function isOverflowing(el) {
|
|
|
8422
8436
|
* will display a tooltip showing the full text content. The tooltip is
|
|
8423
8437
|
* rendered as a portal on document.body and positioned with Floating UI.
|
|
8424
8438
|
*
|
|
8439
|
+
* Also owns the element's `tabindex` while it is clipped — see syncTabIndex.
|
|
8440
|
+
*
|
|
8425
8441
|
* @returns A cleanup function that removes all listeners, observers, and DOM elements.
|
|
8426
8442
|
*/
|
|
8427
8443
|
function setupTruncationTooltip(options) {
|
|
8428
|
-
const { hostEl, contentEl, getTooltipText, placement = 'top' } = options;
|
|
8444
|
+
const { hostEl, contentEl, getTooltipText, placement = 'top', manageTabIndex = true } = options;
|
|
8429
8445
|
injectStyles();
|
|
8430
8446
|
let portalEl = null;
|
|
8431
8447
|
let isHovering = false;
|
|
@@ -8434,6 +8450,34 @@ function setupTruncationTooltip(options) {
|
|
|
8434
8450
|
let hideTimeout = null;
|
|
8435
8451
|
let resizeObserver = null;
|
|
8436
8452
|
let resizeDebounce = null;
|
|
8453
|
+
let ownsTabIndex = false;
|
|
8454
|
+
let disposed = false;
|
|
8455
|
+
/**
|
|
8456
|
+
* The tab stop exists only to give the tooltip a focusable anchor, so it
|
|
8457
|
+
* belongs on the element while the text is actually clipped and not a moment
|
|
8458
|
+
* longer. Deriving it from the caller's prop instead leaves a dead stop on
|
|
8459
|
+
* every element that opted into truncation but happens to fit — in a row of
|
|
8460
|
+
* chips that doubles the tab stops, half of them landing on a span with no
|
|
8461
|
+
* role, no name of its own, and nothing to reveal.
|
|
8462
|
+
*
|
|
8463
|
+
* Ownership is tracked rather than inferred from the value: if the consumer
|
|
8464
|
+
* already put a tabindex on the element (a roving -1, say), that is theirs
|
|
8465
|
+
* and we never touch it.
|
|
8466
|
+
*/
|
|
8467
|
+
function syncTabIndex() {
|
|
8468
|
+
if (!manageTabIndex)
|
|
8469
|
+
return;
|
|
8470
|
+
if (isOverflowing(contentEl)) {
|
|
8471
|
+
if (!ownsTabIndex && contentEl.hasAttribute('tabindex'))
|
|
8472
|
+
return;
|
|
8473
|
+
ownsTabIndex = true;
|
|
8474
|
+
contentEl.setAttribute('tabindex', '0');
|
|
8475
|
+
}
|
|
8476
|
+
else if (ownsTabIndex) {
|
|
8477
|
+
ownsTabIndex = false;
|
|
8478
|
+
contentEl.removeAttribute('tabindex');
|
|
8479
|
+
}
|
|
8480
|
+
}
|
|
8437
8481
|
// Use ResizeObserver to re-evaluate overflow when the element resizes
|
|
8438
8482
|
// Debounced to prevent performance issues during rapid window resizing
|
|
8439
8483
|
if (typeof ResizeObserver !== 'undefined') {
|
|
@@ -8443,6 +8487,7 @@ function setupTruncationTooltip(options) {
|
|
|
8443
8487
|
}
|
|
8444
8488
|
resizeDebounce = setTimeout(() => {
|
|
8445
8489
|
resizeDebounce = null;
|
|
8490
|
+
syncTabIndex();
|
|
8446
8491
|
// If tooltip is showing but text no longer overflows, hide it
|
|
8447
8492
|
if (portalEl && portalEl.isConnected && !isOverflowing(contentEl)) {
|
|
8448
8493
|
hideTooltip();
|
|
@@ -8451,6 +8496,18 @@ function setupTruncationTooltip(options) {
|
|
|
8451
8496
|
});
|
|
8452
8497
|
resizeObserver.observe(contentEl);
|
|
8453
8498
|
}
|
|
8499
|
+
// Measure now so the common case is right on the first paint, rather than
|
|
8500
|
+
// waiting out the observer's debounce.
|
|
8501
|
+
syncTabIndex();
|
|
8502
|
+
// A web font swapping in changes scrollWidth without changing the clipped
|
|
8503
|
+
// box's size, so ResizeObserver never fires for it — the element would keep
|
|
8504
|
+
// whatever the fallback font measured. Re-measure once the fonts settle.
|
|
8505
|
+
if (typeof document !== 'undefined' && document.fonts !== undefined) {
|
|
8506
|
+
document.fonts.ready.then(() => {
|
|
8507
|
+
if (!disposed)
|
|
8508
|
+
syncTabIndex();
|
|
8509
|
+
});
|
|
8510
|
+
}
|
|
8454
8511
|
function createPortal() {
|
|
8455
8512
|
if (portalEl)
|
|
8456
8513
|
return;
|
|
@@ -8582,6 +8639,7 @@ function setupTruncationTooltip(options) {
|
|
|
8582
8639
|
hostEl.addEventListener('focusout', handleFocusOut);
|
|
8583
8640
|
// Return cleanup function
|
|
8584
8641
|
return () => {
|
|
8642
|
+
disposed = true;
|
|
8585
8643
|
cancelHideTimeout();
|
|
8586
8644
|
if (resizeDebounce) {
|
|
8587
8645
|
clearTimeout(resizeDebounce);
|
|
@@ -8590,6 +8648,12 @@ function setupTruncationTooltip(options) {
|
|
|
8590
8648
|
if (resizeObserver) {
|
|
8591
8649
|
resizeObserver.disconnect();
|
|
8592
8650
|
}
|
|
8651
|
+
// Hand the element back as we found it — truncation may simply have been
|
|
8652
|
+
// turned off, in which case the element outlives this teardown.
|
|
8653
|
+
if (ownsTabIndex) {
|
|
8654
|
+
ownsTabIndex = false;
|
|
8655
|
+
contentEl.removeAttribute('tabindex');
|
|
8656
|
+
}
|
|
8593
8657
|
hostEl.removeEventListener('mouseenter', handleMouseEnter);
|
|
8594
8658
|
hostEl.removeEventListener('mouseleave', handleMouseLeave);
|
|
8595
8659
|
hostEl.removeEventListener('focusin', handleFocusIn);
|
|
@@ -8598,13 +8662,25 @@ function setupTruncationTooltip(options) {
|
|
|
8598
8662
|
};
|
|
8599
8663
|
}
|
|
8600
8664
|
|
|
8601
|
-
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)}`;
|
|
8665
|
+
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)}`;
|
|
8602
8666
|
|
|
8603
|
-
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)}`;
|
|
8667
|
+
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)}`;
|
|
8604
8668
|
|
|
8669
|
+
const SENTIMENT_DOT_COLORS = {
|
|
8670
|
+
accent: 'var(--pine-chip-color-accent-dot)',
|
|
8671
|
+
danger: 'var(--pine-chip-color-danger-dot)',
|
|
8672
|
+
info: 'var(--pine-chip-color-info-dot)',
|
|
8673
|
+
neutral: 'var(--pine-chip-color-neutral-dot)',
|
|
8674
|
+
solid: 'var(--pine-chip-color-solid-dot)',
|
|
8675
|
+
subtle: 'var(--pine-chip-color-subtle-dot)',
|
|
8676
|
+
success: 'var(--pine-chip-color-success-dot)',
|
|
8677
|
+
warning: 'var(--pine-chip-color-warning-dot)',
|
|
8678
|
+
};
|
|
8605
8679
|
/**
|
|
8606
8680
|
* @slot (default) - The chip's label text.
|
|
8607
8681
|
* @part button
|
|
8682
|
+
* @part dot - Exposes the dot for styling, such as a custom color. Appears only when `dot` is set.
|
|
8683
|
+
* @part icon - Exposes the icon component for styling, such as a custom color. Appears only when `icon` is set.
|
|
8608
8684
|
*/
|
|
8609
8685
|
class PdsChip {
|
|
8610
8686
|
constructor(hostRef) {
|
|
@@ -8663,6 +8739,11 @@ class PdsChip {
|
|
|
8663
8739
|
hostEl: this.el,
|
|
8664
8740
|
contentEl: this.labelTextEl,
|
|
8665
8741
|
getTooltipText: () => this.el.textContent || '',
|
|
8742
|
+
// The dropdown variant's label span already sits inside
|
|
8743
|
+
// `<button class="pds-chip__button">`, which is already focusable and
|
|
8744
|
+
// bubbles focusin to the host — a tabindex on the span too would nest
|
|
8745
|
+
// a second tab stop inside the button.
|
|
8746
|
+
manageTabIndex: this.effectiveVariant !== 'dropdown',
|
|
8666
8747
|
});
|
|
8667
8748
|
this.tooltipBoundEl = this.labelTextEl;
|
|
8668
8749
|
}
|
|
@@ -8713,11 +8794,15 @@ class PdsChip {
|
|
|
8713
8794
|
// node — and a plain `<pds-chip>Some text</pds-chip>` slots text with no
|
|
8714
8795
|
// wrapping element. Wrapping the slot itself in an internal span gives
|
|
8715
8796
|
// maxWidth something to ellipsize regardless of what's slotted.
|
|
8716
|
-
// A focus-triggered tooltip needs a focusable anchor
|
|
8717
|
-
//
|
|
8718
|
-
//
|
|
8719
|
-
|
|
8720
|
-
|
|
8797
|
+
// A focus-triggered tooltip needs a focusable anchor, but the label span
|
|
8798
|
+
// only earns a tab stop while its text is actually clipped — a chip whose
|
|
8799
|
+
// label fits has nothing to reveal. setupTruncationTooltip owns that
|
|
8800
|
+
// tabindex off the measurement for every variant except dropdown: its
|
|
8801
|
+
// label span already sits inside `<button class="pds-chip__button">`,
|
|
8802
|
+
// which is already focusable and bubbles focusin to the host, so
|
|
8803
|
+
// initTruncationTooltip passes `manageTabIndex: false` there to avoid
|
|
8804
|
+
// nesting a second tab stop inside the button.
|
|
8805
|
+
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))));
|
|
8721
8806
|
return chipContent;
|
|
8722
8807
|
}
|
|
8723
8808
|
get hostStyles() {
|
|
@@ -8726,7 +8811,21 @@ class PdsChip {
|
|
|
8726
8811
|
// query) without !important — the same pattern pds-box uses for min-width.
|
|
8727
8812
|
// The width and the min-width/box-sizing that make it work are applied in
|
|
8728
8813
|
// pds-chip.scss under :host([max-width]).
|
|
8729
|
-
|
|
8814
|
+
const styles = {};
|
|
8815
|
+
if (this.maxWidth) {
|
|
8816
|
+
styles['--pds-chip-max-width'] = this.maxWidth;
|
|
8817
|
+
}
|
|
8818
|
+
// Custom properties rather than inline colors on the dot/icon, so a
|
|
8819
|
+
// consumer's ::part(dot) or ::part(icon) rule still wins over the prop.
|
|
8820
|
+
const dotColor = normalizeColorValue(this.dotColor, { semanticMap: SENTIMENT_DOT_COLORS });
|
|
8821
|
+
if (dotColor !== undefined) {
|
|
8822
|
+
styles['--pds-chip-dot-color'] = dotColor;
|
|
8823
|
+
}
|
|
8824
|
+
const iconColor = normalizeColorValue(this.iconColor, { semanticMap: SENTIMENT_DOT_COLORS });
|
|
8825
|
+
if (iconColor !== undefined) {
|
|
8826
|
+
styles['--pds-chip-icon-color'] = iconColor;
|
|
8827
|
+
}
|
|
8828
|
+
return styles;
|
|
8730
8829
|
}
|
|
8731
8830
|
renderCloseButton() {
|
|
8732
8831
|
const CloseElement = this.removeUrl ? 'a' : 'button';
|
|
@@ -8773,7 +8872,7 @@ class PdsChip {
|
|
|
8773
8872
|
return (hAsync(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), hAsync("pds-icon", { icon: remove, size: this.iconSize })));
|
|
8774
8873
|
}
|
|
8775
8874
|
render() {
|
|
8776
|
-
return (hAsync(Host, { key: '
|
|
8875
|
+
return (hAsync(Host, { key: '323831a875b5f0e786e1e835c230d6950c71d009', class: this.classNames(), id: this.componentId, style: this.hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
|
|
8777
8876
|
}
|
|
8778
8877
|
get el() { return getElement(this); }
|
|
8779
8878
|
static get style() { return pdsChipTokensCss() + pdsChipCss(); }
|
|
@@ -8783,7 +8882,9 @@ class PdsChip {
|
|
|
8783
8882
|
"$members$": {
|
|
8784
8883
|
"componentId": [1, "component-id"],
|
|
8785
8884
|
"dot": [4],
|
|
8885
|
+
"dotColor": [1, "dot-color"],
|
|
8786
8886
|
"icon": [1],
|
|
8887
|
+
"iconColor": [1, "icon-color"],
|
|
8787
8888
|
"size": [1],
|
|
8788
8889
|
"sentiment": [1],
|
|
8789
8890
|
"variant": [1],
|
|
@@ -10185,7 +10286,7 @@ function createDOMPurify() {
|
|
|
10185
10286
|
}
|
|
10186
10287
|
var purify = createDOMPurify();
|
|
10187
10288
|
|
|
10188
|
-
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)}`;
|
|
10289
|
+
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)}`;
|
|
10189
10290
|
|
|
10190
10291
|
/**
|
|
10191
10292
|
* @slot option - Option elements for the combobox dropdown
|
|
@@ -11868,6 +11969,10 @@ class PdsCopytext {
|
|
|
11868
11969
|
hostEl: this.el,
|
|
11869
11970
|
contentEl: this.valueSpanEl,
|
|
11870
11971
|
getTooltipText: () => this.value || '',
|
|
11972
|
+
// valueSpanEl already sits inside the `<pds-button>` below, which is
|
|
11973
|
+
// already focusable and bubbles focusin to the host — a tabindex on
|
|
11974
|
+
// the span too would nest a second tab stop inside the button.
|
|
11975
|
+
manageTabIndex: false,
|
|
11871
11976
|
});
|
|
11872
11977
|
}
|
|
11873
11978
|
}
|
|
@@ -11891,7 +11996,7 @@ class PdsCopytext {
|
|
|
11891
11996
|
return classNames.join(' ');
|
|
11892
11997
|
}
|
|
11893
11998
|
render() {
|
|
11894
|
-
return (hAsync(Host, { key: '
|
|
11999
|
+
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" }))));
|
|
11895
12000
|
}
|
|
11896
12001
|
get el() { return getElement(this); }
|
|
11897
12002
|
static get watchers() { return {
|
|
@@ -11970,6 +12075,270 @@ class PdsDivider {
|
|
|
11970
12075
|
}; }
|
|
11971
12076
|
}
|
|
11972
12077
|
|
|
12078
|
+
/**
|
|
12079
|
+
* Unwraps a stale copy of a light-DOM (`shadow: false`) component's own wrapper,
|
|
12080
|
+
* left behind when a page-cache (Turbo, browser bfcache) reconnect nests a
|
|
12081
|
+
* component's previous render inside its freshly rendered one. Call from
|
|
12082
|
+
* `componentDidRender` with the element that directly contains the rendered
|
|
12083
|
+
* `<slot>` and the selector that identifies "another one of me." Unwraps in
|
|
12084
|
+
* place (move-then-remove) so nested content is never lost.
|
|
12085
|
+
*
|
|
12086
|
+
* `contentSelector` is only needed when the wrapper itself further nests a
|
|
12087
|
+
* separate content element (e.g. pds-tab's `<a class="pds-tab">` wrapping a
|
|
12088
|
+
* `.pds-tab__content` div) — omit it when the wrapper's own children are the
|
|
12089
|
+
* slotted content (e.g. pds-tabpanel's `.pds-tabpanel` div).
|
|
12090
|
+
*/
|
|
12091
|
+
function unwrapReconnectedContent(container, selector, contentSelector) {
|
|
12092
|
+
var _a;
|
|
12093
|
+
if (container === null)
|
|
12094
|
+
return;
|
|
12095
|
+
let stale = container.firstElementChild;
|
|
12096
|
+
while (stale === null || stale === void 0 ? void 0 : stale.matches(selector)) {
|
|
12097
|
+
const source = contentSelector !== undefined ? ((_a = stale.querySelector(contentSelector)) !== null && _a !== void 0 ? _a : stale) : stale;
|
|
12098
|
+
Array.from(source.childNodes).forEach((node) => container.insertBefore(node, stale));
|
|
12099
|
+
stale.remove();
|
|
12100
|
+
stale = container.firstElementChild;
|
|
12101
|
+
}
|
|
12102
|
+
}
|
|
12103
|
+
|
|
12104
|
+
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}`;
|
|
12105
|
+
|
|
12106
|
+
// Known selectors for content Pine components portal to document.body rather
|
|
12107
|
+
// than rendering in place — pds-popover, pds-tooltip, pds-combobox's dropdown.
|
|
12108
|
+
// A pointerdown landing on one of these is not "outside" the drawer in the
|
|
12109
|
+
// sense light dismiss cares about: it belongs to an overlay something inside
|
|
12110
|
+
// the drawer opened, even though it is not a DOM descendant of the drawer.
|
|
12111
|
+
const PORTALED_OVERLAY_SELECTOR = '.pds-popover, .pds-tooltip, .pds-combobox-dropdown-portal';
|
|
12112
|
+
/**
|
|
12113
|
+
* A non-modal side panel composed from `pds-modal`.
|
|
12114
|
+
*
|
|
12115
|
+
* Unlike `pds-modal`, the page stays interactive while a drawer is open: no
|
|
12116
|
+
* dimming, no blur, no scroll lock, no click blocking. `pds-drawer` renders a
|
|
12117
|
+
* `pds-modal` internally with `disableTopLayer` always on and its backdrop
|
|
12118
|
+
* suppressed, and adds the edge, width and dismiss behavior a side panel
|
|
12119
|
+
* needs on top. It does not reimplement focus, Escape or dialog semantics —
|
|
12120
|
+
* those come from `pds-modal` unchanged.
|
|
12121
|
+
*/
|
|
12122
|
+
class PdsDrawer {
|
|
12123
|
+
constructor(hostRef) {
|
|
12124
|
+
registerInstance(this, hostRef);
|
|
12125
|
+
this.pdsDrawerOpen = createEvent(this, "pdsDrawerOpen");
|
|
12126
|
+
this.pdsDrawerClose = createEvent(this, "pdsDrawerClose");
|
|
12127
|
+
/**
|
|
12128
|
+
* Whether the drawer is open
|
|
12129
|
+
* @default false
|
|
12130
|
+
*/
|
|
12131
|
+
this.open = false;
|
|
12132
|
+
/**
|
|
12133
|
+
* Which edge of the viewport the drawer is docked to. Logical, so this is
|
|
12134
|
+
* free under RTL — `end` is the inline-end edge regardless of direction.
|
|
12135
|
+
* @default 'end'
|
|
12136
|
+
*/
|
|
12137
|
+
this.side = 'end';
|
|
12138
|
+
/**
|
|
12139
|
+
* The drawer's width.
|
|
12140
|
+
* @default 'md'
|
|
12141
|
+
*/
|
|
12142
|
+
this.size = 'md';
|
|
12143
|
+
/**
|
|
12144
|
+
* Whether the drawer content should be scrollable
|
|
12145
|
+
* @default true
|
|
12146
|
+
*/
|
|
12147
|
+
this.scrollable = true;
|
|
12148
|
+
/**
|
|
12149
|
+
* Whether the drawer can be dismissed with a pointerdown outside it.
|
|
12150
|
+
* Replaces `pds-modal`'s `backdropDismiss` — there is no backdrop to click.
|
|
12151
|
+
* This also gates Escape, matching how `backdropDismiss` gates Escape on
|
|
12152
|
+
* `pds-modal` today: setting this to `false` means the close button is the
|
|
12153
|
+
* only way out.
|
|
12154
|
+
*
|
|
12155
|
+
* A trigger outside the drawer should only ever set `open` to `true` and
|
|
12156
|
+
* leave closing to the drawer itself. A toggle-style trigger (`open =
|
|
12157
|
+
* !open`) fights light dismiss: clicking it while open closes the drawer
|
|
12158
|
+
* on `pointerdown`, then the trigger's own click handler re-opens it.
|
|
12159
|
+
* @default true
|
|
12160
|
+
*/
|
|
12161
|
+
this.lightDismiss = true;
|
|
12162
|
+
/**
|
|
12163
|
+
* Whether to move focus into the drawer when it opens. `auto` is right for
|
|
12164
|
+
* a drawer opened by a direct user action (a click, a deep link the user
|
|
12165
|
+
* just navigated to). Set to `none` for a drawer that can open from a
|
|
12166
|
+
* background event while the user is mid-task elsewhere on the page —
|
|
12167
|
+
* moving focus there would interrupt them, and the page stays live under
|
|
12168
|
+
* a non-modal drawer, so it is a genuine data-entry risk, not just an
|
|
12169
|
+
* annoyance.
|
|
12170
|
+
* @default 'auto'
|
|
12171
|
+
*/
|
|
12172
|
+
this.initialFocus = 'auto';
|
|
12173
|
+
}
|
|
12174
|
+
// Unwraps a nested pds-modal left by a page-cache (Turbo, bfcache) reconnect
|
|
12175
|
+
// — the same bug class fixed for pds-modal-header/-content/-footer. Every
|
|
12176
|
+
// render wraps the slotted content in a fresh, marked pds-modal; a reconnect
|
|
12177
|
+
// that restores a prior render's pds-modal in our light DOM ends up with
|
|
12178
|
+
// that stale one nested inside the new one's content.
|
|
12179
|
+
//
|
|
12180
|
+
// The container has to be the inner `.pds-modal` content div, not the
|
|
12181
|
+
// `<pds-modal>` tag itself — that tag's first child is always its own
|
|
12182
|
+
// rendered `dialog.pds-modal__backdrop`, never another `<pds-modal>`, so a
|
|
12183
|
+
// bare-tag check there never matches. The `.pds-drawer__modal` marker on
|
|
12184
|
+
// the staleness selector (rather than the bare `pds-modal` tag) keeps this
|
|
12185
|
+
// from also unwrapping a consumer's own nested pds-modal, like a confirm
|
|
12186
|
+
// dialog placed first in the drawer's content — only a stale copy of our
|
|
12187
|
+
// own wrapper carries that class.
|
|
12188
|
+
componentDidRender() {
|
|
12189
|
+
unwrapReconnectedContent(this.el.querySelector('pds-modal.pds-drawer__modal .pds-modal'), 'pds-modal.pds-drawer__modal', '.pds-modal');
|
|
12190
|
+
}
|
|
12191
|
+
// pds-modal closes itself (Escape, light dismiss, a consumer's close
|
|
12192
|
+
// button toggling its own `open`) and only updates its own `open` prop —
|
|
12193
|
+
// mirror that back onto ours so a consumer's binding stays correct, and
|
|
12194
|
+
// re-emit as our own event rather than leaking pds-modal's event name.
|
|
12195
|
+
// Both events bubble, so a nested pds-modal (a confirm dialog inside the
|
|
12196
|
+
// drawer's own content) would otherwise trigger these too — only react to
|
|
12197
|
+
// our own direct inner modal.
|
|
12198
|
+
handleModalClose(e) {
|
|
12199
|
+
if (e.target !== this.modalEl)
|
|
12200
|
+
return;
|
|
12201
|
+
this.open = false;
|
|
12202
|
+
this.pdsDrawerClose.emit();
|
|
12203
|
+
}
|
|
12204
|
+
handleModalOpen(e) {
|
|
12205
|
+
if (e.target !== this.modalEl)
|
|
12206
|
+
return;
|
|
12207
|
+
this.pdsDrawerOpen.emit();
|
|
12208
|
+
}
|
|
12209
|
+
// Light dismiss: a pointerdown anywhere outside the drawer closes it. This
|
|
12210
|
+
// has to be a listener of our own, not pds-modal's backdrop-click handler —
|
|
12211
|
+
// the backdrop is pointer-events:none out here (see pds-drawer.scss) so the
|
|
12212
|
+
// page underneath stays genuinely clickable, which means a click there
|
|
12213
|
+
// never reaches pds-modal's backdrop element at all.
|
|
12214
|
+
handleOutsidePointerDown(e) {
|
|
12215
|
+
if (!this.lightDismiss || !this.open)
|
|
12216
|
+
return;
|
|
12217
|
+
const target = e.target;
|
|
12218
|
+
if (!target)
|
|
12219
|
+
return;
|
|
12220
|
+
if (this.el.contains(target))
|
|
12221
|
+
return;
|
|
12222
|
+
if (target.closest(PORTALED_OVERLAY_SELECTOR))
|
|
12223
|
+
return;
|
|
12224
|
+
// A sibling pds-modal — e.g. a confirm dialog opened from inside the
|
|
12225
|
+
// drawer but mounted at the document root rather than nested in our own
|
|
12226
|
+
// content — is neither a descendant of the drawer nor on the portaled
|
|
12227
|
+
// list above, so without this it reads as "outside" and a click inside
|
|
12228
|
+
// it (or on its own backdrop) would close the drawer underneath it. That
|
|
12229
|
+
// modal already owns its own dismiss semantics; defer to them instead.
|
|
12230
|
+
if (target.closest('pds-modal'))
|
|
12231
|
+
return;
|
|
12232
|
+
this.open = false;
|
|
12233
|
+
}
|
|
12234
|
+
render() {
|
|
12235
|
+
return (hAsync(Host, { key: '66e16ca7704243e8bb98002f042fa073ec43c38b', class: {
|
|
12236
|
+
'pds-drawer': true,
|
|
12237
|
+
[`pds-drawer--${this.side}`]: true,
|
|
12238
|
+
[`pds-drawer--${this.size}`]: true,
|
|
12239
|
+
} }, 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' }))));
|
|
12240
|
+
}
|
|
12241
|
+
get el() { return getElement(this); }
|
|
12242
|
+
static get style() { return pdsDrawerCss(); }
|
|
12243
|
+
static get cmpMeta() { return {
|
|
12244
|
+
"$flags$": 260,
|
|
12245
|
+
"$tagName$": "pds-drawer",
|
|
12246
|
+
"$members$": {
|
|
12247
|
+
"componentId": [1, "component-id"],
|
|
12248
|
+
"open": [1028],
|
|
12249
|
+
"side": [1],
|
|
12250
|
+
"size": [1],
|
|
12251
|
+
"scrollable": [4],
|
|
12252
|
+
"lightDismiss": [4, "light-dismiss"],
|
|
12253
|
+
"initialFocus": [1, "initial-focus"]
|
|
12254
|
+
},
|
|
12255
|
+
"$listeners$": [[0, "pdsModalClose", "handleModalClose"], [0, "pdsModalOpen", "handleModalOpen"], [5, "pointerdown", "handleOutsidePointerDown"]],
|
|
12256
|
+
"$lazyBundleId$": "-",
|
|
12257
|
+
"$attrsToReflect$": []
|
|
12258
|
+
}; }
|
|
12259
|
+
}
|
|
12260
|
+
|
|
12261
|
+
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}`;
|
|
12262
|
+
|
|
12263
|
+
/**
|
|
12264
|
+
* Fills the drawer panel's height by default — unlike `pds-modal-content`,
|
|
12265
|
+
* which caps itself against the viewport for a centered, possibly-shorter
|
|
12266
|
+
* modal, a drawer panel is already edge-to-edge, so its content can simply
|
|
12267
|
+
* flex to fill whatever space the header and footer leave.
|
|
12268
|
+
*/
|
|
12269
|
+
class PdsDrawerContent {
|
|
12270
|
+
constructor(hostRef) {
|
|
12271
|
+
registerInstance(this, hostRef);
|
|
12272
|
+
}
|
|
12273
|
+
// Unwraps a nested .pds-drawer-content left by a page-cache (Turbo, bfcache) reconnect.
|
|
12274
|
+
componentDidRender() {
|
|
12275
|
+
unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
|
|
12276
|
+
}
|
|
12277
|
+
render() {
|
|
12278
|
+
return (hAsync("div", { key: '432db626c93ab42365ec1af83562eec7ae1c4674', class: "pds-drawer-content" }, hAsync("slot", { key: '901ab074f31726023add709a4953bddb43842de2' })));
|
|
12279
|
+
}
|
|
12280
|
+
get el() { return getElement(this); }
|
|
12281
|
+
static get style() { return pdsDrawerContentCss(); }
|
|
12282
|
+
static get cmpMeta() { return {
|
|
12283
|
+
"$flags$": 260,
|
|
12284
|
+
"$tagName$": "pds-drawer-content",
|
|
12285
|
+
"$members$": undefined,
|
|
12286
|
+
"$listeners$": undefined,
|
|
12287
|
+
"$lazyBundleId$": "-",
|
|
12288
|
+
"$attrsToReflect$": []
|
|
12289
|
+
}; }
|
|
12290
|
+
}
|
|
12291
|
+
|
|
12292
|
+
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%}`;
|
|
12293
|
+
|
|
12294
|
+
class PdsDrawerFooter {
|
|
12295
|
+
constructor(hostRef) {
|
|
12296
|
+
registerInstance(this, hostRef);
|
|
12297
|
+
}
|
|
12298
|
+
// Unwraps a nested .pds-drawer__footer left by a page-cache (Turbo, bfcache) reconnect.
|
|
12299
|
+
componentDidRender() {
|
|
12300
|
+
unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
|
|
12301
|
+
}
|
|
12302
|
+
render() {
|
|
12303
|
+
return (hAsync("footer", { key: '71cb35f7b1ccba9e4187eb8942771741f13510dc', class: "pds-drawer__footer" }, hAsync("slot", { key: '28927c76ee8194c44f416ee5d4e9ea2e0376bf5a' })));
|
|
12304
|
+
}
|
|
12305
|
+
get el() { return getElement(this); }
|
|
12306
|
+
static get style() { return pdsDrawerFooterCss(); }
|
|
12307
|
+
static get cmpMeta() { return {
|
|
12308
|
+
"$flags$": 260,
|
|
12309
|
+
"$tagName$": "pds-drawer-footer",
|
|
12310
|
+
"$members$": undefined,
|
|
12311
|
+
"$listeners$": undefined,
|
|
12312
|
+
"$lazyBundleId$": "-",
|
|
12313
|
+
"$attrsToReflect$": []
|
|
12314
|
+
}; }
|
|
12315
|
+
}
|
|
12316
|
+
|
|
12317
|
+
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%}`;
|
|
12318
|
+
|
|
12319
|
+
class PdsDrawerHeader {
|
|
12320
|
+
constructor(hostRef) {
|
|
12321
|
+
registerInstance(this, hostRef);
|
|
12322
|
+
}
|
|
12323
|
+
// Unwraps a nested .pds-drawer__header left by a page-cache (Turbo, bfcache) reconnect.
|
|
12324
|
+
componentDidRender() {
|
|
12325
|
+
unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
|
|
12326
|
+
}
|
|
12327
|
+
render() {
|
|
12328
|
+
return (hAsync("header", { key: '48d0585e0e20c9d3142635f0fc0184c0803413b8', class: "pds-drawer__header" }, hAsync("slot", { key: '14d9d0bde0116c81892140b22a2b6e9a2b1d969f' })));
|
|
12329
|
+
}
|
|
12330
|
+
get el() { return getElement(this); }
|
|
12331
|
+
static get style() { return pdsDrawerHeaderCss(); }
|
|
12332
|
+
static get cmpMeta() { return {
|
|
12333
|
+
"$flags$": 260,
|
|
12334
|
+
"$tagName$": "pds-drawer-header",
|
|
12335
|
+
"$members$": undefined,
|
|
12336
|
+
"$listeners$": undefined,
|
|
12337
|
+
"$lazyBundleId$": "-",
|
|
12338
|
+
"$attrsToReflect$": []
|
|
12339
|
+
}; }
|
|
12340
|
+
}
|
|
12341
|
+
|
|
11973
12342
|
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}`;
|
|
11974
12343
|
|
|
11975
12344
|
/**
|
|
@@ -12279,7 +12648,7 @@ class PdsDropdownMenu {
|
|
|
12279
12648
|
}
|
|
12280
12649
|
}
|
|
12281
12650
|
render() {
|
|
12282
|
-
return (hAsync(Host, { key: '
|
|
12651
|
+
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 }))));
|
|
12283
12652
|
}
|
|
12284
12653
|
get host() { return getElement(this); }
|
|
12285
12654
|
static get style() { return pdsDropdownMenuCss(); }
|
|
@@ -12374,7 +12743,7 @@ class PdsDropdownMenuItem {
|
|
|
12374
12743
|
}, 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)));
|
|
12375
12744
|
}
|
|
12376
12745
|
render() {
|
|
12377
|
-
return (hAsync(Host, { key: '
|
|
12746
|
+
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()));
|
|
12378
12747
|
}
|
|
12379
12748
|
get host() { return getElement(this); }
|
|
12380
12749
|
static get style() { return pdsDropdownMenuItemCss(); }
|
|
@@ -12410,7 +12779,7 @@ class PdsDropdownMenuSeparator {
|
|
|
12410
12779
|
this.disabled = false;
|
|
12411
12780
|
}
|
|
12412
12781
|
render() {
|
|
12413
|
-
return (hAsync(Host, { key: '
|
|
12782
|
+
return (hAsync(Host, { key: 'f55fc3b23a6ccb94a7ce865189e5d65abdd97d8c', id: this.componentId }, hAsync("hr", { key: '784a1480881a27aec69c0a2b0afd06f103912544' })));
|
|
12414
12783
|
}
|
|
12415
12784
|
static get style() { return pdsDropdownMenuSeparatorCss(); }
|
|
12416
12785
|
static get cmpMeta() { return {
|
|
@@ -12990,7 +13359,7 @@ class PdsFilter {
|
|
|
12990
13359
|
return null;
|
|
12991
13360
|
}
|
|
12992
13361
|
render() {
|
|
12993
|
-
return (hAsync(Host, { key: '
|
|
13362
|
+
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' })))));
|
|
12994
13363
|
}
|
|
12995
13364
|
get el() { return getElement(this); }
|
|
12996
13365
|
static get style() { return pdsFilterCss(); }
|
|
@@ -13022,7 +13391,7 @@ class PdsFilters {
|
|
|
13022
13391
|
registerInstance(this, hostRef);
|
|
13023
13392
|
}
|
|
13024
13393
|
render() {
|
|
13025
|
-
return (hAsync(Host, { key: '
|
|
13394
|
+
return (hAsync(Host, { key: '492357b36ec8ca8552f76aea6a4e4baf01ee92d5', id: this.componentId }, hAsync("div", { key: 'fbf56c5452b4b0627a95008a601ccd6ace59417c', class: "pds-filters" }, hAsync("slot", { key: 'c0e1d6b7b86ff39425d26dc75bf950283a371f71' }))));
|
|
13026
13395
|
}
|
|
13027
13396
|
static get style() { return pdsFiltersCss(); }
|
|
13028
13397
|
static get cmpMeta() { return {
|
|
@@ -13059,7 +13428,7 @@ const getAssetPath = (path) => {
|
|
|
13059
13428
|
if (assetBasePath.startsWith('https://cdn.jsdelivr.net/npm/') && !missingAssetPathWarning) {
|
|
13060
13429
|
missingAssetPathWarning = true;
|
|
13061
13430
|
console.warn(`
|
|
13062
|
-
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/
|
|
13431
|
+
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
|
|
13063
13432
|
`);
|
|
13064
13433
|
}
|
|
13065
13434
|
let assetPath = path;
|
|
@@ -13495,9 +13864,9 @@ class PdsImage {
|
|
|
13495
13864
|
this.loading = 'eager';
|
|
13496
13865
|
}
|
|
13497
13866
|
render() {
|
|
13498
|
-
return (hAsync(Host, { key: '
|
|
13867
|
+
return (hAsync(Host, { key: '0c0f463a1b616ccc485b8086a0210c5d9d2b065c', class: {
|
|
13499
13868
|
'pds-image': true,
|
|
13500
|
-
}, id: this.componentId }, hAsync("img", { key: '
|
|
13869
|
+
}, 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 })));
|
|
13501
13870
|
}
|
|
13502
13871
|
static get style() { return pdsImageCss(); }
|
|
13503
13872
|
static get cmpMeta() { return {
|
|
@@ -13814,10 +14183,10 @@ class PdsInput {
|
|
|
13814
14183
|
'has-prepend': this.hasPrepend,
|
|
13815
14184
|
'has-append': this.hasAppend,
|
|
13816
14185
|
};
|
|
13817
|
-
return (hAsync(Host, { key: '
|
|
14186
|
+
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: {
|
|
13818
14187
|
'pds-input__label-wrapper': true,
|
|
13819
14188
|
'visually-hidden': this.hideLabel,
|
|
13820
|
-
} }, hAsync("label", { key: '
|
|
14189
|
+
} }, 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)))));
|
|
13821
14190
|
}
|
|
13822
14191
|
static get formAssociated() { return true; }
|
|
13823
14192
|
get el() { return getElement(this); }
|
|
@@ -13929,8 +14298,8 @@ class PdsLink {
|
|
|
13929
14298
|
const targetValue = this.target || (this.external ? '_blank' : undefined);
|
|
13930
14299
|
const showExternalIcon = this.external;
|
|
13931
14300
|
const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
|
|
13932
|
-
return (hAsync("a", { key: '
|
|
13933
|
-
hAsync("pds-icon", { key: '
|
|
14301
|
+
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 &&
|
|
14302
|
+
hAsync("pds-icon", { key: '299d4f31ec32b614fd9f4d1c19acae63ee7a9169', icon: launch, size: this.fontSize })));
|
|
13934
14303
|
}
|
|
13935
14304
|
static get style() { return pdsLinkCss(); }
|
|
13936
14305
|
static get cmpMeta() { return {
|
|
@@ -14011,7 +14380,7 @@ class PdsLoader {
|
|
|
14011
14380
|
}
|
|
14012
14381
|
}
|
|
14013
14382
|
render() {
|
|
14014
|
-
return (hAsync(Host, { key: '
|
|
14383
|
+
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..."))));
|
|
14015
14384
|
}
|
|
14016
14385
|
static get style() { return pdsLoaderCss(); }
|
|
14017
14386
|
static get cmpMeta() { return {
|
|
@@ -14029,34 +14398,12 @@ class PdsLoader {
|
|
|
14029
14398
|
}; }
|
|
14030
14399
|
}
|
|
14031
14400
|
|
|
14032
|
-
|
|
14033
|
-
* Unwraps a stale copy of a light-DOM (`shadow: false`) component's own wrapper,
|
|
14034
|
-
* left behind when a page-cache (Turbo, browser bfcache) reconnect nests a
|
|
14035
|
-
* component's previous render inside its freshly rendered one. Call from
|
|
14036
|
-
* `componentDidRender` with the element that directly contains the rendered
|
|
14037
|
-
* `<slot>` and the selector that identifies "another one of me." Unwraps in
|
|
14038
|
-
* place (move-then-remove) so nested content is never lost.
|
|
14039
|
-
*
|
|
14040
|
-
* `contentSelector` is only needed when the wrapper itself further nests a
|
|
14041
|
-
* separate content element (e.g. pds-tab's `<a class="pds-tab">` wrapping a
|
|
14042
|
-
* `.pds-tab__content` div) — omit it when the wrapper's own children are the
|
|
14043
|
-
* slotted content (e.g. pds-tabpanel's `.pds-tabpanel` div).
|
|
14044
|
-
*/
|
|
14045
|
-
function unwrapReconnectedContent(container, selector, contentSelector) {
|
|
14046
|
-
var _a;
|
|
14047
|
-
if (container === null)
|
|
14048
|
-
return;
|
|
14049
|
-
let stale = container.firstElementChild;
|
|
14050
|
-
while (stale === null || stale === void 0 ? void 0 : stale.matches(selector)) {
|
|
14051
|
-
const source = contentSelector !== undefined ? ((_a = stale.querySelector(contentSelector)) !== null && _a !== void 0 ? _a : stale) : stale;
|
|
14052
|
-
Array.from(source.childNodes).forEach((node) => container.insertBefore(node, stale));
|
|
14053
|
-
stale.remove();
|
|
14054
|
-
stale = container.firstElementChild;
|
|
14055
|
-
}
|
|
14056
|
-
}
|
|
14057
|
-
|
|
14058
|
-
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}`;
|
|
14401
|
+
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}`;
|
|
14059
14402
|
|
|
14403
|
+
const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
|
|
14404
|
+
const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
|
|
14405
|
+
/\d/.test(value) &&
|
|
14406
|
+
(typeof CSS === 'undefined' || CSS.supports('max-width', value));
|
|
14060
14407
|
class PdsModal {
|
|
14061
14408
|
constructor(hostRef) {
|
|
14062
14409
|
registerInstance(this, hostRef);
|
|
@@ -14074,7 +14421,9 @@ class PdsModal {
|
|
|
14074
14421
|
*/
|
|
14075
14422
|
this.open = false;
|
|
14076
14423
|
/**
|
|
14077
|
-
* The size of the modal
|
|
14424
|
+
* The size of the modal. Can be a predefined value ('sm', 'md', 'lg', 'fullscreen') or a custom
|
|
14425
|
+
* max-width as a CSS length (e.g., '1250px', '80vw'). A custom width stays fluid below that size.
|
|
14426
|
+
* A value that is neither falls back to 'md'.
|
|
14078
14427
|
* @default 'md'
|
|
14079
14428
|
*/
|
|
14080
14429
|
this.size = 'md';
|
|
@@ -14093,6 +14442,19 @@ class PdsModal {
|
|
|
14093
14442
|
* @default false
|
|
14094
14443
|
*/
|
|
14095
14444
|
this.disableTopLayer = false;
|
|
14445
|
+
/**
|
|
14446
|
+
* Whether to skip moving focus into the modal when it opens — both our own
|
|
14447
|
+
* `setInitialFocus()` and the browser's native "dialog focusing steps",
|
|
14448
|
+
* which move focus into the dialog as soon as `show()`/`showModal()` is
|
|
14449
|
+
* called regardless of application code. Focus return on close is
|
|
14450
|
+
* unaffected either way. For a modal opened by something other than a
|
|
14451
|
+
* direct user click — a redirect, a deep link, a background event —
|
|
14452
|
+
* stealing focus on open can interrupt whatever the user was already
|
|
14453
|
+
* doing. Default `false` preserves today's behavior for every existing
|
|
14454
|
+
* consumer.
|
|
14455
|
+
* @default false
|
|
14456
|
+
*/
|
|
14457
|
+
this.disableInitialFocus = false;
|
|
14096
14458
|
/**
|
|
14097
14459
|
* Stores the list of focusable elements in the modal
|
|
14098
14460
|
*/
|
|
@@ -14109,16 +14471,41 @@ class PdsModal {
|
|
|
14109
14471
|
}
|
|
14110
14472
|
};
|
|
14111
14473
|
this.handleKeyDown = (e) => {
|
|
14474
|
+
var _a, _b, _c;
|
|
14112
14475
|
// If the modal is not open, don't handle any keyboard events
|
|
14113
14476
|
if (!this.open)
|
|
14114
14477
|
return;
|
|
14115
14478
|
// Handle Escape key to close the modal
|
|
14116
14479
|
if (e.key === 'Escape') {
|
|
14117
|
-
//
|
|
14118
|
-
//
|
|
14119
|
-
//
|
|
14120
|
-
|
|
14121
|
-
|
|
14480
|
+
// Every open pds-modal shares this document-level listener for the
|
|
14481
|
+
// same keydown event. Whichever one runs first can synchronously move
|
|
14482
|
+
// focus (hideModal() restores it), which would make a later instance's
|
|
14483
|
+
// own read of document.activeElement reflect that side effect instead
|
|
14484
|
+
// of where focus actually was when the key was pressed — stacking two
|
|
14485
|
+
// sibling modals closing on one Escape instead of just the top one.
|
|
14486
|
+
// That alone isn't enough, though: isStackedAboveOverlay's `:modal`
|
|
14487
|
+
// check reads LIVE top-layer state, and hideModal()'s close() clears it
|
|
14488
|
+
// synchronously — so whichever sibling's listener runs first (DOM
|
|
14489
|
+
// order, not z-index) can close itself and erase the very evidence a
|
|
14490
|
+
// later listener needs to recognize it was stacked above. Snapshot that
|
|
14491
|
+
// determination too, in the same first-listener-wins block, before any
|
|
14492
|
+
// instance has had a chance to act on this keypress.
|
|
14493
|
+
const eventSnapshot = e;
|
|
14494
|
+
if (!('__pdsActiveElementAtEscape' in eventSnapshot)) {
|
|
14495
|
+
const activeAtDispatch = document.activeElement;
|
|
14496
|
+
eventSnapshot.__pdsActiveElementAtEscape = activeAtDispatch;
|
|
14497
|
+
const topLayerDialog = (_a = activeAtDispatch === null || activeAtDispatch === void 0 ? void 0 : activeAtDispatch.closest('dialog')) !== null && _a !== void 0 ? _a : null;
|
|
14498
|
+
eventSnapshot.__pdsTopLayerDialogAtEscape = topLayerDialog;
|
|
14499
|
+
eventSnapshot.__pdsTopLayerDialogWasModalAtEscape = !!(topLayerDialog && topLayerDialog.matches(':modal'));
|
|
14500
|
+
}
|
|
14501
|
+
// Leave Escape to a genuinely stacked-above overlay (disableTopLayer's
|
|
14502
|
+
// reason for existing) — not just to anything outside this modal.
|
|
14503
|
+
const active = eventSnapshot.__pdsActiveElementAtEscape;
|
|
14504
|
+
if (this.disableTopLayer &&
|
|
14505
|
+
active &&
|
|
14506
|
+
active !== document.body &&
|
|
14507
|
+
!this.el.contains(active) &&
|
|
14508
|
+
this.isStackedAboveOverlay(active, (_b = eventSnapshot.__pdsTopLayerDialogAtEscape) !== null && _b !== void 0 ? _b : null, (_c = eventSnapshot.__pdsTopLayerDialogWasModalAtEscape) !== null && _c !== void 0 ? _c : false)) {
|
|
14122
14509
|
return;
|
|
14123
14510
|
}
|
|
14124
14511
|
// Always prevent native dialog close behavior
|
|
@@ -14162,10 +14549,26 @@ class PdsModal {
|
|
|
14162
14549
|
}
|
|
14163
14550
|
};
|
|
14164
14551
|
}
|
|
14552
|
+
componentWillLoad() {
|
|
14553
|
+
this.warnOnInvalidSize();
|
|
14554
|
+
}
|
|
14555
|
+
sizeChanged() {
|
|
14556
|
+
this.warnOnInvalidSize();
|
|
14557
|
+
}
|
|
14165
14558
|
componentDidLoad() {
|
|
14166
14559
|
this.modalRef = this.el.querySelector('.pds-modal__backdrop');
|
|
14167
14560
|
// Add keyboard event listener
|
|
14168
14561
|
document.addEventListener('keydown', this.handleKeyDown);
|
|
14562
|
+
// @Watch('open') only fires on a later change, not the prop's initial
|
|
14563
|
+
// value — a modal mounted with `open` already true (static markup, or a
|
|
14564
|
+
// framework passing it on first render) would otherwise never call
|
|
14565
|
+
// show()/showModal(): the panel still appears, since that's driven by the
|
|
14566
|
+
// `open` CSS class, but the native <dialog> itself was never opened, so
|
|
14567
|
+
// there's no top-layer promotion, no dialog focusing steps, and no
|
|
14568
|
+
// focusable-elements list or previousActiveElement captured.
|
|
14569
|
+
if (this.open) {
|
|
14570
|
+
this.showModal();
|
|
14571
|
+
}
|
|
14169
14572
|
}
|
|
14170
14573
|
// Unwraps a nested dialog.pds-modal__backdrop left by a page-cache (Turbo, bfcache) reconnect.
|
|
14171
14574
|
componentDidRender() {
|
|
@@ -14271,8 +14674,39 @@ class PdsModal {
|
|
|
14271
14674
|
// Update focusable elements and set initial focus
|
|
14272
14675
|
// Using a longer timeout to ensure all components are fully rendered
|
|
14273
14676
|
setTimeout(() => {
|
|
14677
|
+
var _a, _b;
|
|
14274
14678
|
this.updateFocusableElements();
|
|
14275
|
-
this.
|
|
14679
|
+
if (this.disableInitialFocus) {
|
|
14680
|
+
// show()/showModal() also move focus into the dialog natively (the
|
|
14681
|
+
// HTML spec's "dialog focusing steps") — that native step isn't
|
|
14682
|
+
// necessarily done by the time this task runs either, so counter it
|
|
14683
|
+
// here, in the same deferred slot setInitialFocus() below uses for
|
|
14684
|
+
// the same reason, rather than racing it synchronously above.
|
|
14685
|
+
//
|
|
14686
|
+
// disableInitialFocus exists for a drawer that can open in the
|
|
14687
|
+
// background while the user is mid-task elsewhere — by the time
|
|
14688
|
+
// this runs, they may have already clicked into something of
|
|
14689
|
+
// their own outside the dialog. Only act if focus is still where
|
|
14690
|
+
// the native steps (or nothing) left it, so that isn't stolen.
|
|
14691
|
+
const activeElement = document.activeElement;
|
|
14692
|
+
const focusAlreadyClaimedElsewhere = activeElement !== null && activeElement !== document.body && !((_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.contains(activeElement));
|
|
14693
|
+
if (!focusAlreadyClaimedElsewhere) {
|
|
14694
|
+
if (this.previousActiveElement !== document.body && typeof ((_b = this.previousActiveElement) === null || _b === void 0 ? void 0 : _b.focus) === 'function') {
|
|
14695
|
+
this.previousActiveElement.focus();
|
|
14696
|
+
}
|
|
14697
|
+
else if (activeElement instanceof HTMLElement) {
|
|
14698
|
+
// Nothing was focused before opening (previousActiveElement is
|
|
14699
|
+
// body), so there's nothing to restore focus to — body.focus()
|
|
14700
|
+
// would be a no-op and leave focus wherever the native focusing
|
|
14701
|
+
// steps put it, inside the dialog. Blur that instead so focus
|
|
14702
|
+
// ends up nowhere, matching the state before opening.
|
|
14703
|
+
activeElement.blur();
|
|
14704
|
+
}
|
|
14705
|
+
}
|
|
14706
|
+
}
|
|
14707
|
+
else {
|
|
14708
|
+
this.setInitialFocus();
|
|
14709
|
+
}
|
|
14276
14710
|
this.pdsModalOpen.emit();
|
|
14277
14711
|
}, 100);
|
|
14278
14712
|
}
|
|
@@ -14287,10 +14721,22 @@ class PdsModal {
|
|
|
14287
14721
|
async hideModal() {
|
|
14288
14722
|
if (this.modalRef) {
|
|
14289
14723
|
try {
|
|
14724
|
+
// Capture before close(): with the async task queue, a prop change
|
|
14725
|
+
// that triggers hideModal() (e.g. light dismiss setting `open` false
|
|
14726
|
+
// on a pointerdown elsewhere) doesn't run until the next frame — by
|
|
14727
|
+
// then the browser has already moved focus to whatever the user's
|
|
14728
|
+
// click actually landed on. Restoring previousActiveElement in that
|
|
14729
|
+
// case would steal focus back from a real new destination; only
|
|
14730
|
+
// restore it when focus is still inside the modal (or nowhere, i.e.
|
|
14731
|
+
// document.body), meaning nothing else has claimed it since.
|
|
14732
|
+
const activeElement = document.activeElement;
|
|
14733
|
+
const focusAlreadyMovedElsewhere = activeElement !== null && activeElement !== document.body && !this.modalRef.contains(activeElement);
|
|
14290
14734
|
this.modalRef.close();
|
|
14291
14735
|
this.open = false;
|
|
14292
14736
|
// Restore focus to the element that was focused before the modal was opened
|
|
14293
|
-
if (
|
|
14737
|
+
if (!focusAlreadyMovedElsewhere &&
|
|
14738
|
+
this.previousActiveElement &&
|
|
14739
|
+
typeof this.previousActiveElement.focus === 'function') {
|
|
14294
14740
|
this.previousActiveElement.focus();
|
|
14295
14741
|
}
|
|
14296
14742
|
this.pdsModalClose.emit();
|
|
@@ -14307,6 +14753,46 @@ class PdsModal {
|
|
|
14307
14753
|
const backdrop = modal.querySelector('.pds-modal__backdrop');
|
|
14308
14754
|
return backdrop ? parseInt(getComputedStyle(backdrop).zIndex, 10) : -1;
|
|
14309
14755
|
}
|
|
14756
|
+
/**
|
|
14757
|
+
* Whether `active` sits inside a surface actually stacked above this modal.
|
|
14758
|
+
*
|
|
14759
|
+
* Used to decide whether an Escape keypress belongs to that surface instead
|
|
14760
|
+
* of this modal. Focus being merely *outside* this modal is not enough on
|
|
14761
|
+
* its own: in `disableTopLayer` mode the page stays interactive (that's the
|
|
14762
|
+
* point of a non-modal usage like a drawer), so focus will routinely be on
|
|
14763
|
+
* ordinary page content while the modal is open, and that must not be
|
|
14764
|
+
* mistaken for "an overlay owns Escape."
|
|
14765
|
+
*
|
|
14766
|
+
* Two ways a surface can be above: it is itself promoted to the browser's
|
|
14767
|
+
* top layer (a regular `showModal()` dialog, which paints above everything
|
|
14768
|
+
* outside the top layer regardless of z-index — a sibling pds-modal opened
|
|
14769
|
+
* over a `disableTopLayer` drawer typically shares the exact same z-index
|
|
14770
|
+
* token, so a numeric comparison alone would miss it), or it has a higher
|
|
14771
|
+
* z-index than this modal's own backdrop (a `disableTopLayer` overlay, or
|
|
14772
|
+
* anything else deliberately raised above it).
|
|
14773
|
+
*
|
|
14774
|
+
* `topLayerDialog` / `topLayerDialogWasModal` come pre-snapshotted from the
|
|
14775
|
+
* keydown event (see handleKeyDown) rather than being re-derived here: by
|
|
14776
|
+
* the time a later sibling modal's listener runs, an earlier one may have
|
|
14777
|
+
* already closed itself, which clears `:modal` — reading it live here would
|
|
14778
|
+
* lose that evidence depending on listener order.
|
|
14779
|
+
*/
|
|
14780
|
+
isStackedAboveOverlay(active, topLayerDialog, topLayerDialogWasModal) {
|
|
14781
|
+
if (topLayerDialog && topLayerDialog !== this.modalRef && topLayerDialogWasModal) {
|
|
14782
|
+
return true;
|
|
14783
|
+
}
|
|
14784
|
+
const ownZIndex = this.getBackdropZIndex(this.el);
|
|
14785
|
+
let node = active;
|
|
14786
|
+
while (node && node !== document.body) {
|
|
14787
|
+
const style = getComputedStyle(node);
|
|
14788
|
+
const zIndex = parseInt(style.zIndex, 10);
|
|
14789
|
+
if (style.position !== 'static' && !isNaN(zIndex) && zIndex > ownZIndex) {
|
|
14790
|
+
return true;
|
|
14791
|
+
}
|
|
14792
|
+
node = node.parentElement;
|
|
14793
|
+
}
|
|
14794
|
+
return false;
|
|
14795
|
+
}
|
|
14310
14796
|
/**
|
|
14311
14797
|
* Checks if this modal is the innermost (highest z-index) modal
|
|
14312
14798
|
*/
|
|
@@ -14327,18 +14813,34 @@ class PdsModal {
|
|
|
14327
14813
|
const thisZIndex = this.getBackdropZIndex(this.el);
|
|
14328
14814
|
return thisZIndex === maxZIndex;
|
|
14329
14815
|
}
|
|
14816
|
+
resolveSize() {
|
|
14817
|
+
var _a;
|
|
14818
|
+
const size = ((_a = this.size) !== null && _a !== void 0 ? _a : '').trim() || 'md';
|
|
14819
|
+
if (PRESET_SIZES.includes(size))
|
|
14820
|
+
return [size];
|
|
14821
|
+
return isCustomLength(size) ? ['custom', size] : [undefined];
|
|
14822
|
+
}
|
|
14823
|
+
warnOnInvalidSize() {
|
|
14824
|
+
if (this.resolveSize()[0] !== undefined)
|
|
14825
|
+
return;
|
|
14826
|
+
console.warn(`pds-modal: invalid size "${String(this.size).slice(0, 50)}", using md`);
|
|
14827
|
+
}
|
|
14330
14828
|
render() {
|
|
14331
|
-
|
|
14829
|
+
const [sizeClass = 'md', customSize] = this.resolveSize();
|
|
14830
|
+
return (hAsync("dialog", { key: 'bbc56f2aaf3fe861ae309eb1930d51a588b4c727', class: {
|
|
14332
14831
|
'pds-modal__backdrop': true,
|
|
14333
14832
|
'open': this.open
|
|
14334
|
-
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, hAsync("div", { key: '
|
|
14833
|
+
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, hAsync("div", { key: 'b3d6f9c2a7854845ebe94c05ee507000c38a1326', class: {
|
|
14335
14834
|
'pds-modal': true,
|
|
14336
|
-
[`pds-modal--${
|
|
14835
|
+
[`pds-modal--${sizeClass}`]: true,
|
|
14337
14836
|
'pds-modal--scrollable': this.scrollable
|
|
14338
|
-
}, part: "modal" }, hAsync("slot", { key: '
|
|
14837
|
+
}, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '42ff9ae5e427bc69141c58e0824aad677f5c7756' }))));
|
|
14339
14838
|
}
|
|
14340
14839
|
get el() { return getElement(this); }
|
|
14341
14840
|
static get watchers() { return {
|
|
14841
|
+
"size": [{
|
|
14842
|
+
"sizeChanged": 0
|
|
14843
|
+
}],
|
|
14342
14844
|
"open": [{
|
|
14343
14845
|
"handleOpenChange": 0
|
|
14344
14846
|
}]
|
|
@@ -14354,6 +14856,7 @@ class PdsModal {
|
|
|
14354
14856
|
"size": [1],
|
|
14355
14857
|
"scrollable": [4],
|
|
14356
14858
|
"disableTopLayer": [4, "disable-top-layer"],
|
|
14859
|
+
"disableInitialFocus": [4, "disable-initial-focus"],
|
|
14357
14860
|
"focusableElementsArray": [32],
|
|
14358
14861
|
"showModal": [64],
|
|
14359
14862
|
"hideModal": [64]
|
|
@@ -14545,10 +15048,10 @@ class PdsModalContent {
|
|
|
14545
15048
|
render() {
|
|
14546
15049
|
// Only apply max-height style if it's not 'none'
|
|
14547
15050
|
const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
|
|
14548
|
-
return (hAsync(Host, { key: '
|
|
15051
|
+
return (hAsync(Host, { key: '7bd0f26425c71e4551ae21e38d57d2124dabfc50' }, hAsync("div", { key: '120e6947e734e44883af975991781f338acd7dbc', class: {
|
|
14549
15052
|
'pds-modal-content': true,
|
|
14550
15053
|
[`pds-modal-content--border-${this.border}`]: true
|
|
14551
|
-
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '
|
|
15054
|
+
}, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '6f2c8d44a69df8ecc1214e00604023274cee2790' }))));
|
|
14552
15055
|
}
|
|
14553
15056
|
get el() { return getElement(this); }
|
|
14554
15057
|
static get style() { return pdsModalContentCss(); }
|
|
@@ -14576,7 +15079,7 @@ class PdsModalFooter {
|
|
|
14576
15079
|
unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
|
|
14577
15080
|
}
|
|
14578
15081
|
render() {
|
|
14579
|
-
return (hAsync("footer", { key: '
|
|
15082
|
+
return (hAsync("footer", { key: 'f344716ed1fbd77b447e10c9b78565918dc17be0', class: "pds-modal__footer" }, hAsync("slot", { key: 'ba85cf6f7f56c8f8a8ff6d24c5fa647722140fda' })));
|
|
14580
15083
|
}
|
|
14581
15084
|
get el() { return getElement(this); }
|
|
14582
15085
|
static get style() { return pdsModalFooterCss(); }
|
|
@@ -14601,7 +15104,7 @@ class PdsModalHeader {
|
|
|
14601
15104
|
unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
|
|
14602
15105
|
}
|
|
14603
15106
|
render() {
|
|
14604
|
-
return (hAsync("header", { key: '
|
|
15107
|
+
return (hAsync("header", { key: '0490ac7854089dad4666e2a6509ae730f805f97f', class: "pds-modal__header" }, hAsync("slot", { key: 'b76e5a970d3f17411b9e9e5debd981298f2290d1' })));
|
|
14605
15108
|
}
|
|
14606
15109
|
get el() { return getElement(this); }
|
|
14607
15110
|
static get style() { return pdsModalHeaderCss(); }
|
|
@@ -15700,10 +16203,10 @@ class PdsMultiselect {
|
|
|
15700
16203
|
}
|
|
15701
16204
|
render() {
|
|
15702
16205
|
const hasSelections = this.selectedItems.length > 0;
|
|
15703
|
-
return (hAsync(Host, { key: '
|
|
16206
|
+
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: {
|
|
15704
16207
|
'pds-multiselect__label': true,
|
|
15705
16208
|
'visually-hidden': this.hideLabel,
|
|
15706
|
-
} }, this.label)), hAsync("div", { key: '
|
|
16209
|
+
} }, 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: {
|
|
15707
16210
|
'pds-multiselect__trigger': true,
|
|
15708
16211
|
'pds-multiselect__trigger--open': this.isOpen,
|
|
15709
16212
|
'pds-multiselect__trigger--disabled': this.disabled,
|
|
@@ -15719,7 +16222,7 @@ class PdsMultiselect {
|
|
|
15719
16222
|
}, 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: {
|
|
15720
16223
|
'pds-multiselect__trigger-text': true,
|
|
15721
16224
|
'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
|
|
15722
|
-
} }, this.getTriggerText()), hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '
|
|
16225
|
+
} }, 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' })))));
|
|
15723
16226
|
}
|
|
15724
16227
|
static get formAssociated() { return true; }
|
|
15725
16228
|
get el() { return getElement(this); }
|
|
@@ -16363,7 +16866,7 @@ class PdsPopover {
|
|
|
16363
16866
|
}, 16); // ~1 frame at 60fps
|
|
16364
16867
|
}
|
|
16365
16868
|
render() {
|
|
16366
|
-
return (hAsync(Host, { key: '
|
|
16869
|
+
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 }))));
|
|
16367
16870
|
}
|
|
16368
16871
|
get el() { return getElement(this); }
|
|
16369
16872
|
static get style() { return pdsPopoverCss(); }
|
|
@@ -16413,7 +16916,8 @@ class PdsProgress {
|
|
|
16413
16916
|
this.showPercent = false;
|
|
16414
16917
|
}
|
|
16415
16918
|
render() {
|
|
16416
|
-
|
|
16919
|
+
const normalizedFillColor = normalizeColorValue(this.fillColor);
|
|
16920
|
+
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, "%")));
|
|
16417
16921
|
}
|
|
16418
16922
|
static get style() { return pdsProgressCss(); }
|
|
16419
16923
|
static get cmpMeta() { return {
|
|
@@ -16447,7 +16951,7 @@ class PdsProperty {
|
|
|
16447
16951
|
this.icon = 'star';
|
|
16448
16952
|
}
|
|
16449
16953
|
render() {
|
|
16450
|
-
return (hAsync(Host, { key: '
|
|
16954
|
+
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' }))));
|
|
16451
16955
|
}
|
|
16452
16956
|
static get style() { return pdsPropertyCss(); }
|
|
16453
16957
|
static get cmpMeta() { return {
|
|
@@ -16465,7 +16969,7 @@ class PdsProperty {
|
|
|
16465
16969
|
|
|
16466
16970
|
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)}`;
|
|
16467
16971
|
|
|
16468
|
-
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-
|
|
16972
|
+
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)}`;
|
|
16469
16973
|
|
|
16470
16974
|
/**
|
|
16471
16975
|
* @slot image - Custom image content to display instead of the default radio input
|
|
@@ -16560,11 +17064,11 @@ class PdsRadio {
|
|
|
16560
17064
|
}
|
|
16561
17065
|
render() {
|
|
16562
17066
|
const renderLabelAndMessages = () => [
|
|
16563
|
-
hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: '
|
|
17067
|
+
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)),
|
|
16564
17068
|
this.helperMessage && (hAsync("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
|
|
16565
|
-
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: '
|
|
17069
|
+
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))
|
|
16566
17070
|
];
|
|
16567
|
-
return (hAsync(Host, { key: '
|
|
17071
|
+
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())));
|
|
16568
17072
|
}
|
|
16569
17073
|
get el() { return getElement(this); }
|
|
16570
17074
|
static get style() { return labelCss$3() + pdsRadioCss(); }
|
|
@@ -16755,13 +17259,13 @@ class PdsRadioGroup {
|
|
|
16755
17259
|
render() {
|
|
16756
17260
|
const gapValue = this.getGapValue();
|
|
16757
17261
|
const ariaDescribedBy = this.getAriaDescribedBy();
|
|
16758
|
-
return (hAsync(Host, { key: '
|
|
17262
|
+
return (hAsync(Host, { key: '048d4676df7c31a9ab08e4d4fc2b93866c1241fd', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
|
|
16759
17263
|
'--pds-radio-group-gap': gapValue,
|
|
16760
|
-
} }, this.groupLabel && (hAsync("div", { key: '
|
|
17264
|
+
} }, this.groupLabel && (hAsync("div", { key: '414363733d6053517bb63888fb9813af6554d4df', class: "pds-radio-group__label" }, this.groupLabel)), hAsync("div", { key: 'd368dc474bf76f5cf7d633e59f929060fbf60b83', class: {
|
|
16761
17265
|
'pds-radio-group__radios': true,
|
|
16762
17266
|
'pds-radio-group__radios--row': this.direction === 'row',
|
|
16763
17267
|
'pds-radio-group__radios--column': this.direction === 'column',
|
|
16764
|
-
} }, hAsync("slot", { key: '
|
|
17268
|
+
} }, 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))));
|
|
16765
17269
|
}
|
|
16766
17270
|
get el() { return getElement(this); }
|
|
16767
17271
|
static get watchers() { return {
|
|
@@ -16859,7 +17363,7 @@ class PdsRow {
|
|
|
16859
17363
|
})), (this.minHeight && {
|
|
16860
17364
|
'min-height': this.minHeight,
|
|
16861
17365
|
}));
|
|
16862
|
-
return hAsync(Host, { key: '
|
|
17366
|
+
return hAsync(Host, { key: '556bb00908d60df442b1fae17e28e54353f85f20', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
|
|
16863
17367
|
}
|
|
16864
17368
|
static get style() { return pdsRowCss(); }
|
|
16865
17369
|
static get cmpMeta() { return {
|
|
@@ -17119,7 +17623,7 @@ class PdsSelect {
|
|
|
17119
17623
|
}
|
|
17120
17624
|
render() {
|
|
17121
17625
|
const hasAction = this.el.querySelector('[slot="action"]') !== null;
|
|
17122
|
-
return (hAsync(Host, { key: '
|
|
17626
|
+
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 }))));
|
|
17123
17627
|
}
|
|
17124
17628
|
static get formAssociated() { return true; }
|
|
17125
17629
|
get el() { return getElement(this); }
|
|
@@ -19866,7 +20370,7 @@ class PdsSortable {
|
|
|
19866
20370
|
this.sortableInstance = Sortable.create(this.el, sortableOptions);
|
|
19867
20371
|
}
|
|
19868
20372
|
render() {
|
|
19869
|
-
return (hAsync(Host, { key: '
|
|
20373
|
+
return (hAsync(Host, { key: '235879c63aa8e55ea819fd3bcdb30ef56dd2c0b3', class: this.classNames(), id: this.componentId }, hAsync("slot", { key: '28cb6ef1a3b1f7de15f1f2728ffa625c879890dc' })));
|
|
19870
20374
|
}
|
|
19871
20375
|
get el() { return getElement(this); }
|
|
19872
20376
|
static get watchers() { return {
|
|
@@ -19932,7 +20436,7 @@ class PdsSortableItem {
|
|
|
19932
20436
|
}
|
|
19933
20437
|
}
|
|
19934
20438
|
render() {
|
|
19935
|
-
return (hAsync(Host, { key: '
|
|
20439
|
+
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" })))));
|
|
19936
20440
|
}
|
|
19937
20441
|
get el() { return getElement(this); }
|
|
19938
20442
|
static get style() { return pdsSortableItemCss(); }
|
|
@@ -19952,7 +20456,7 @@ class PdsSortableItem {
|
|
|
19952
20456
|
|
|
19953
20457
|
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)}`;
|
|
19954
20458
|
|
|
19955
|
-
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:
|
|
20459
|
+
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)}`;
|
|
19956
20460
|
|
|
19957
20461
|
class PdsSwitch {
|
|
19958
20462
|
constructor(hostRef) {
|
|
@@ -20036,9 +20540,9 @@ class PdsSwitch {
|
|
|
20036
20540
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
20037
20541
|
}
|
|
20038
20542
|
render() {
|
|
20039
|
-
return (hAsync(Host, { key: '
|
|
20040
|
-
hAsync("div", { key: '
|
|
20041
|
-
hAsync("div", { key: '
|
|
20543
|
+
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 &&
|
|
20544
|
+
hAsync("div", { key: '3802a9cc1068caa4955634be3c728f283dedab16', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
20545
|
+
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)));
|
|
20042
20546
|
}
|
|
20043
20547
|
static get formAssociated() { return true; }
|
|
20044
20548
|
get el() { return getElement(this); }
|
|
@@ -20448,7 +20952,7 @@ class PdsTableBody {
|
|
|
20448
20952
|
registerInstance(this, hostRef);
|
|
20449
20953
|
}
|
|
20450
20954
|
render() {
|
|
20451
|
-
return (hAsync(Host, { key: '
|
|
20955
|
+
return (hAsync(Host, { key: '38b6b6121a4652e5b98f2ff22721e687ae401437', role: "rowgroup", part: "body" }, hAsync("slot", { key: '7ce84ac64307b9e19a8b4b72efe3e8eab34f99bf' })));
|
|
20452
20956
|
}
|
|
20453
20957
|
static get style() { return pdsTableBodyCss(); }
|
|
20454
20958
|
static get cmpMeta() { return {
|
|
@@ -20586,11 +21090,11 @@ class PdsTableCell {
|
|
|
20586
21090
|
return classNames.join(' ');
|
|
20587
21091
|
}
|
|
20588
21092
|
render() {
|
|
20589
|
-
return (hAsync(Host, { key: '
|
|
21093
|
+
return (hAsync(Host, { key: '1c37f341c8171d322d60647b25bfa92fdd9ea339', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
|
|
20590
21094
|
this.tableRef.fixedColumn &&
|
|
20591
21095
|
this.tableRef.selectable
|
|
20592
21096
|
? { '--fixed-cell-position': '40px' }
|
|
20593
|
-
: {} }, hAsync("slot", { key: '
|
|
21097
|
+
: {} }, hAsync("slot", { key: '339b2217df131c58d76258f581a53c0bd46cbd03' })));
|
|
20594
21098
|
}
|
|
20595
21099
|
get hostElement() { return getElement(this); }
|
|
20596
21100
|
static get watchers() { return {
|
|
@@ -20667,7 +21171,7 @@ class PdsTableHead {
|
|
|
20667
21171
|
}
|
|
20668
21172
|
}
|
|
20669
21173
|
render() {
|
|
20670
|
-
return (hAsync(Host, { key: '
|
|
21174
|
+
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' })));
|
|
20671
21175
|
}
|
|
20672
21176
|
get hostElement() { return getElement(this); }
|
|
20673
21177
|
static get style() { return pdsTableHeadCss(); }
|
|
@@ -20888,11 +21392,11 @@ class PdsTableHeadCell {
|
|
|
20888
21392
|
return classNames.join(' ');
|
|
20889
21393
|
}
|
|
20890
21394
|
render() {
|
|
20891
|
-
return (hAsync(Host, { key: '
|
|
21395
|
+
return (hAsync(Host, { key: 'c30192a432bbd8868326fc7ed4199b98a33991ff', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
|
|
20892
21396
|
this.tableRef.fixedColumn &&
|
|
20893
21397
|
this.tableRef.selectable
|
|
20894
21398
|
? { '--fixed-cell-position': '40px' }
|
|
20895
|
-
: {} }, hAsync("slot", { key: '
|
|
21399
|
+
: {} }, hAsync("slot", { key: 'e725a7e576f6bc56d385c8cb0822ce255544fbcb' }), this.sortable && this.isActive && (hAsync("pds-icon", { key: '52068d114bfadcd6d4e02c86e703349bc7833716', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
|
|
20896
21400
|
}
|
|
20897
21401
|
get hostElement() { return getElement(this); }
|
|
20898
21402
|
static get style() { return pdsTableHeadCellCss(); }
|
|
@@ -21058,7 +21562,7 @@ class PdsTableRow {
|
|
|
21058
21562
|
}
|
|
21059
21563
|
}
|
|
21060
21564
|
render() {
|
|
21061
|
-
return (hAsync(Host, { key: '
|
|
21565
|
+
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' })));
|
|
21062
21566
|
}
|
|
21063
21567
|
get hostElement() { return getElement(this); }
|
|
21064
21568
|
static get style() { return pdsTableRowCss(); }
|
|
@@ -21098,7 +21602,7 @@ class PdsTabpanel {
|
|
|
21098
21602
|
unwrapReconnectedContent(this.el.querySelector('.pds-tabpanel'), '.pds-tabpanel');
|
|
21099
21603
|
}
|
|
21100
21604
|
render() {
|
|
21101
|
-
return (hAsync(Host, { key: '
|
|
21605
|
+
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' }))));
|
|
21102
21606
|
}
|
|
21103
21607
|
get el() { return getElement(this); }
|
|
21104
21608
|
static get style() { return pdsTabpanelCss(); }
|
|
@@ -21282,7 +21786,7 @@ class PdsTabs {
|
|
|
21282
21786
|
// Navigation mode: a <nav> landmark of links (aria-current marks the current
|
|
21283
21787
|
// page). Panel mode: the ARIA tablist of role=tab buttons over tabpanels.
|
|
21284
21788
|
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" })));
|
|
21285
|
-
return (hAsync(Host, { key: '
|
|
21789
|
+
return (hAsync(Host, { key: 'f9d0e94dcacd7b94691368f08eb77b45475c0a35', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, hAsync("slot", { key: '93c605b2bd4b8ad3dcd8f494a82fd30833e8b300', name: "tabpanels" })));
|
|
21286
21790
|
}
|
|
21287
21791
|
get el() { return getElement(this); }
|
|
21288
21792
|
static get style() { return pdsTabsCss(); }
|
|
@@ -21408,7 +21912,7 @@ class PdsText {
|
|
|
21408
21912
|
? `pds-text--decoration-${this.decoration}`
|
|
21409
21913
|
: ''}
|
|
21410
21914
|
`;
|
|
21411
|
-
return (hAsync(Tag, { key: '
|
|
21915
|
+
return (hAsync(Tag, { key: 'cf597479ded618a0674d68fd726b828d88c0e642', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: 'f9c163be5662522b012bca6b0a23cfe00860e474' })));
|
|
21412
21916
|
}
|
|
21413
21917
|
get el() { return getElement(this); }
|
|
21414
21918
|
static get watchers() { return {
|
|
@@ -21749,10 +22253,10 @@ class PdsTextarea {
|
|
|
21749
22253
|
}
|
|
21750
22254
|
render() {
|
|
21751
22255
|
const value = this.getValue();
|
|
21752
|
-
return (hAsync(Host, { key: '
|
|
21753
|
-
hAsync("div", { key: '
|
|
21754
|
-
hAsync("p", { key: '
|
|
21755
|
-
hAsync("p", { key: '
|
|
22256
|
+
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 &&
|
|
22257
|
+
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 &&
|
|
22258
|
+
hAsync("p", { key: '9c8794ec733a3ece5eaeac74ef6a1ebb223558c3', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
|
|
22259
|
+
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))));
|
|
21756
22260
|
}
|
|
21757
22261
|
static get formAssociated() { return true; }
|
|
21758
22262
|
get el() { return getElement(this); }
|
|
@@ -21926,13 +22430,13 @@ class PdsToast {
|
|
|
21926
22430
|
return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
|
|
21927
22431
|
}
|
|
21928
22432
|
render() {
|
|
21929
|
-
return (hAsync(Host, { key: '
|
|
22433
|
+
return (hAsync(Host, { key: 'a1ec97158a6665aa25b58b1954b4b5c622590615', hidden: !this.isVisible }, hAsync("div", { key: 'd9b01164364c76512852a260cede50000b73a563', class: {
|
|
21930
22434
|
'pds-toast': true,
|
|
21931
22435
|
[`pds-toast--${this.type}`]: this.type !== 'default',
|
|
21932
22436
|
'pds-toast--animating-out': this.isAnimatingOut
|
|
21933
|
-
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '
|
|
22437
|
+
}, 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: () => {
|
|
21934
22438
|
this.dismiss();
|
|
21935
|
-
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '
|
|
22439
|
+
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: 'fde63f279f696d9f02875cc1beee3542c97f0c7e', name: "remove" }))))));
|
|
21936
22440
|
}
|
|
21937
22441
|
get el() { return getElement(this); }
|
|
21938
22442
|
static get watchers() { return {
|
|
@@ -22306,9 +22810,9 @@ class PdsTooltip {
|
|
|
22306
22810
|
}
|
|
22307
22811
|
render() {
|
|
22308
22812
|
const hostId = this.componentId || undefined;
|
|
22309
|
-
return (hAsync(Host, { key: '
|
|
22813
|
+
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,
|
|
22310
22814
|
/* focusin/out bubble; ensure keyboard users see tooltips */
|
|
22311
|
-
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '
|
|
22815
|
+
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" }))));
|
|
22312
22816
|
}
|
|
22313
22817
|
get el() { return getElement(this); }
|
|
22314
22818
|
static get watchers() { return {
|
|
@@ -22352,6 +22856,10 @@ registerComponents([
|
|
|
22352
22856
|
PdsContainer,
|
|
22353
22857
|
PdsCopytext,
|
|
22354
22858
|
PdsDivider,
|
|
22859
|
+
PdsDrawer,
|
|
22860
|
+
PdsDrawerContent,
|
|
22861
|
+
PdsDrawerFooter,
|
|
22862
|
+
PdsDrawerHeader,
|
|
22355
22863
|
PdsDropdownMenu,
|
|
22356
22864
|
PdsDropdownMenuItem,
|
|
22357
22865
|
PdsDropdownMenuSeparator,
|