@pine-ds/core 3.28.0 → 3.30.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/form.js +1 -1
- package/components/pds-avatar.js +1 -1
- package/components/pds-checkbox2.js +1 -1
- package/components/pds-combobox.js +2 -2
- package/components/pds-input.js +1 -1
- package/components/pds-link2.js +1 -1
- package/components/pds-modal.js +1 -1
- package/components/pds-multiselect.js +1 -1
- package/components/pds-radio.js +1 -1
- package/components/pds-select.js +1 -1
- package/components/pds-switch.js +1 -1
- package/components/pds-tab.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/dist/cjs/{form-CpM5Z8q7.js → form-MhwfKTuo.js} +11 -7
- package/dist/cjs/{index-DBhfI2Jq.js → index-BdFrBXCD.js} +5 -1
- package/dist/cjs/{index-DGBoDsAL.js → index-CKNNY-lQ.js} +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mock-pds-modal.cjs.entry.js +1 -1
- 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 +39 -8
- package/dist/cjs/pds-box.cjs.entry.js +1 -1
- package/dist/cjs/pds-button.cjs.entry.js +2 -2
- package/dist/cjs/pds-checkbox.cjs.entry.js +6 -6
- package/dist/cjs/pds-chip.cjs.entry.js +2 -2
- package/dist/cjs/pds-combobox.cjs.entry.js +21 -5
- package/dist/cjs/pds-container.cjs.entry.js +1 -1
- package/dist/cjs/pds-copytext.cjs.entry.js +2 -2
- package/dist/cjs/pds-divider.cjs.entry.js +1 -1
- package/dist/cjs/pds-dropdown-menu-item.cjs.entry.js +1 -1
- package/dist/cjs/pds-dropdown-menu-separator.cjs.entry.js +1 -1
- package/dist/cjs/pds-dropdown-menu.cjs.entry.js +1 -1
- package/dist/cjs/pds-filter.cjs.entry.js +2 -2
- package/dist/cjs/pds-filters.cjs.entry.js +1 -1
- package/dist/cjs/pds-icon.cjs.entry.js +1 -1
- package/dist/cjs/pds-image.cjs.entry.js +1 -1
- package/dist/cjs/pds-input.cjs.entry.js +4 -4
- package/dist/cjs/pds-link.cjs.entry.js +12 -5
- package/dist/cjs/pds-loader.cjs.entry.js +1 -1
- package/dist/cjs/pds-modal-content.cjs.entry.js +1 -1
- package/dist/cjs/pds-modal-footer.cjs.entry.js +1 -1
- package/dist/cjs/pds-modal-header.cjs.entry.js +1 -1
- package/dist/cjs/pds-modal.cjs.entry.js +36 -6
- package/dist/cjs/pds-multiselect.cjs.entry.js +7 -7
- package/dist/cjs/pds-popover.cjs.entry.js +1 -1
- package/dist/cjs/pds-progress.cjs.entry.js +1 -1
- package/dist/cjs/pds-property.cjs.entry.js +1 -1
- package/dist/cjs/pds-radio-group.cjs.entry.js +3 -3
- package/dist/cjs/pds-radio.cjs.entry.js +7 -7
- package/dist/cjs/pds-row.cjs.entry.js +1 -1
- package/dist/cjs/pds-select.cjs.entry.js +9 -4
- package/dist/cjs/pds-sortable-item.cjs.entry.js +2 -2
- package/dist/cjs/pds-sortable.cjs.entry.js +1 -1
- package/dist/cjs/pds-switch.cjs.entry.js +6 -6
- package/dist/cjs/pds-tab.cjs.entry.js +41 -6
- package/dist/cjs/pds-table-body.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-cell.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-head-cell.cjs.entry.js +2 -2
- package/dist/cjs/pds-table-head.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-row.cjs.entry.js +1 -1
- package/dist/cjs/pds-table.cjs.entry.js +1 -1
- package/dist/cjs/pds-tabpanel.cjs.entry.js +8 -3
- package/dist/cjs/pds-tabs.cjs.entry.js +74 -3
- package/dist/cjs/pds-text.cjs.entry.js +2 -2
- 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/collection/components/pds-avatar/pds-avatar.css +29 -0
- package/dist/collection/components/pds-avatar/pds-avatar.js +105 -5
- package/dist/collection/components/pds-avatar/stories/pds-avatar.stories.js +23 -0
- package/dist/collection/components/pds-button/pds-button.js +1 -1
- package/dist/collection/components/pds-button/stories/pds-button.stories.js +25 -0
- package/dist/collection/components/pds-checkbox/pds-checkbox.js +3 -3
- package/dist/collection/components/pds-combobox/pds-combobox.css +32 -0
- package/dist/collection/components/pds-combobox/pds-combobox.js +76 -3
- package/dist/collection/components/pds-combobox/stories/pds-combobox.stories.js +25 -0
- package/dist/collection/components/pds-input/pds-input.js +1 -1
- package/dist/collection/components/pds-link/pds-link.css +10 -0
- package/dist/collection/components/pds-link/pds-link.js +32 -2
- package/dist/collection/components/pds-link/stories/pds-link.stories.js +14 -0
- package/dist/collection/components/pds-modal/pds-modal.js +58 -5
- package/dist/collection/components/pds-modal/stories/pds-modal.stories.js +77 -0
- package/dist/collection/components/pds-multiselect/pds-multiselect.css +2 -2
- package/dist/collection/components/pds-multiselect/pds-multiselect.js +3 -3
- package/dist/collection/components/pds-radio/pds-radio.css +6 -0
- package/dist/collection/components/pds-radio/pds-radio.js +3 -3
- package/dist/collection/components/pds-select/pds-select.js +7 -2
- package/dist/collection/components/pds-switch/pds-switch.js +3 -3
- package/dist/collection/components/pds-tabs/pds-tab/pds-tab.css +4 -4
- package/dist/collection/components/pds-tabs/pds-tab/pds-tab.js +161 -5
- package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.css +9 -0
- package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js +29 -1
- package/dist/collection/components/pds-tabs/pds-tabs.css +14 -0
- package/dist/collection/components/pds-tabs/pds-tabs.js +146 -4
- package/dist/collection/components/pds-tabs/stories/pds-tabs.stories.js +43 -0
- package/dist/collection/components/pds-text/pds-text.js +1 -1
- package/dist/collection/components/pds-textarea/pds-textarea.js +4 -4
- package/dist/collection/components/pds-toast/pds-toast.js +3 -3
- package/dist/collection/components/pds-tooltip/pds-tooltip.js +2 -2
- package/dist/collection/utils/form.js +11 -7
- package/dist/docs.json +466 -6
- package/dist/esm/{form-C3xDZBme.js → form-BuRbS7Hp.js} +11 -7
- package/dist/esm/{index-D4ys0pep.js → index-BjlFq0VD.js} +1 -1
- package/dist/esm/{index-CaRgVPt7.js → index-NNDTPCWx.js} +5 -2
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mock-pds-modal.entry.js +1 -1
- 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 +39 -8
- package/dist/esm/pds-box.entry.js +1 -1
- package/dist/esm/pds-button.entry.js +2 -2
- package/dist/esm/pds-checkbox.entry.js +6 -6
- package/dist/esm/pds-chip.entry.js +2 -2
- package/dist/esm/pds-combobox.entry.js +21 -5
- package/dist/esm/pds-container.entry.js +1 -1
- package/dist/esm/pds-copytext.entry.js +2 -2
- package/dist/esm/pds-divider.entry.js +1 -1
- package/dist/esm/pds-dropdown-menu-item.entry.js +1 -1
- package/dist/esm/pds-dropdown-menu-separator.entry.js +1 -1
- package/dist/esm/pds-dropdown-menu.entry.js +1 -1
- package/dist/esm/pds-filter.entry.js +2 -2
- package/dist/esm/pds-filters.entry.js +1 -1
- package/dist/esm/pds-icon.entry.js +1 -1
- package/dist/esm/pds-image.entry.js +1 -1
- package/dist/esm/pds-input.entry.js +4 -4
- package/dist/esm/pds-link.entry.js +12 -5
- package/dist/esm/pds-loader.entry.js +1 -1
- package/dist/esm/pds-modal-content.entry.js +1 -1
- package/dist/esm/pds-modal-footer.entry.js +1 -1
- package/dist/esm/pds-modal-header.entry.js +1 -1
- package/dist/esm/pds-modal.entry.js +36 -6
- package/dist/esm/pds-multiselect.entry.js +7 -7
- package/dist/esm/pds-popover.entry.js +1 -1
- package/dist/esm/pds-progress.entry.js +1 -1
- package/dist/esm/pds-property.entry.js +1 -1
- package/dist/esm/pds-radio-group.entry.js +3 -3
- package/dist/esm/pds-radio.entry.js +7 -7
- package/dist/esm/pds-row.entry.js +1 -1
- package/dist/esm/pds-select.entry.js +9 -4
- package/dist/esm/pds-sortable-item.entry.js +2 -2
- package/dist/esm/pds-sortable.entry.js +1 -1
- package/dist/esm/pds-switch.entry.js +6 -6
- package/dist/esm/pds-tab.entry.js +41 -6
- package/dist/esm/pds-table-body.entry.js +1 -1
- package/dist/esm/pds-table-cell.entry.js +1 -1
- package/dist/esm/pds-table-head-cell.entry.js +2 -2
- package/dist/esm/pds-table-head.entry.js +1 -1
- package/dist/esm/pds-table-row.entry.js +1 -1
- package/dist/esm/pds-table.entry.js +1 -1
- package/dist/esm/pds-tabpanel.entry.js +8 -3
- package/dist/esm/pds-tabs.entry.js +74 -3
- package/dist/esm/pds-text.entry.js +2 -2
- 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-es5/form-BuRbS7Hp.js +1 -0
- package/dist/esm-es5/{index-CaRgVPt7.js → index-NNDTPCWx.js} +2 -2
- 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-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 +1 -1
- 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/pine-core/p-02805a93.system.entry.js +1 -0
- package/dist/pine-core/{p-571d6bef.system.entry.js → p-076aaa00.system.entry.js} +1 -1
- package/dist/pine-core/p-0a09ccbe.entry.js +1 -0
- package/dist/pine-core/p-0a4f2d5f.system.entry.js +1 -0
- package/dist/pine-core/p-12154189.system.entry.js +1 -0
- package/dist/pine-core/p-1482053d.entry.js +1 -0
- package/dist/pine-core/{p-44f58d33.system.entry.js → p-1deded6e.system.entry.js} +1 -1
- package/dist/pine-core/p-1e87e72a.entry.js +1 -0
- package/dist/pine-core/{p-fa81009f.system.entry.js → p-1f20608e.system.entry.js} +1 -1
- package/dist/pine-core/{p-27ac77c3.entry.js → p-1fb985bb.entry.js} +1 -1
- package/dist/pine-core/{p-855dfc31.system.entry.js → p-20e0d06c.system.entry.js} +1 -1
- package/dist/pine-core/p-24fcf841.system.entry.js +1 -0
- package/dist/pine-core/{p-c273210a.entry.js → p-292cf8f9.entry.js} +1 -1
- package/dist/pine-core/p-2d1cc047.entry.js +1 -0
- package/dist/pine-core/{p-002c420f.system.entry.js → p-2ec460e1.system.entry.js} +1 -1
- package/dist/pine-core/{p-e0cfb931.system.entry.js → p-2fc127b4.system.entry.js} +1 -1
- package/dist/pine-core/p-31679dbc.system.entry.js +1 -0
- package/dist/pine-core/{p-d09ae46d.system.entry.js → p-3170d53b.system.entry.js} +1 -1
- package/dist/pine-core/{p-0451fdf7.entry.js → p-39ad92fc.entry.js} +1 -1
- package/dist/pine-core/{p-974bf0c5.entry.js → p-39c6e6c9.entry.js} +1 -1
- package/dist/pine-core/p-3c09f2d4.system.entry.js +1 -0
- package/dist/pine-core/{p-d5c1f85e.system.entry.js → p-3c6300a8.system.entry.js} +1 -1
- package/dist/pine-core/{p-3ad9bcef.system.entry.js → p-3cece186.system.entry.js} +1 -1
- package/dist/pine-core/{p-8a00e32b.system.entry.js → p-3e3b3bf6.system.entry.js} +1 -1
- package/dist/pine-core/p-43268325.system.entry.js +1 -0
- package/dist/pine-core/{p-52f7115b.entry.js → p-43a1d9d7.entry.js} +1 -1
- package/dist/pine-core/{p-13ec2343.entry.js → p-43ef94bc.entry.js} +1 -1
- package/dist/pine-core/{p-618ba6d5.system.entry.js → p-464ec4eb.system.entry.js} +1 -1
- package/dist/pine-core/{p-ee6f914c.entry.js → p-47708864.entry.js} +1 -1
- package/dist/pine-core/{p-ccb889d8.system.entry.js → p-507e831f.system.entry.js} +1 -1
- package/dist/pine-core/{p-3fa80c5a.system.entry.js → p-559042b7.system.entry.js} +1 -1
- package/dist/pine-core/p-5aa59b20.entry.js +2 -0
- package/dist/pine-core/p-5c229a7f.entry.js +1 -0
- package/dist/pine-core/{p-5c6c2f79.system.entry.js → p-5c7a72aa.system.entry.js} +1 -1
- package/dist/pine-core/{p-71ca8845.system.entry.js → p-5e6e8d4e.system.entry.js} +1 -1
- package/dist/pine-core/{p-6a2373d0.system.entry.js → p-606418b7.system.entry.js} +1 -1
- package/dist/pine-core/{p-22bfa998.entry.js → p-6254d112.entry.js} +1 -1
- package/dist/pine-core/{p-5a2df1e2.entry.js → p-62f75f84.entry.js} +1 -1
- package/dist/pine-core/{p-041243ee.system.entry.js → p-69372e72.system.entry.js} +1 -1
- package/dist/pine-core/p-69e1a82b.system.entry.js +3 -0
- package/dist/pine-core/p-6f82e8dc.system.entry.js +1 -0
- package/dist/pine-core/{p-1e3beca4.system.entry.js → p-7153efaf.system.entry.js} +1 -1
- package/dist/pine-core/{p-7aca41d9.system.entry.js → p-7803c5b6.system.entry.js} +1 -1
- package/dist/pine-core/{p-74e06c8d.system.entry.js → p-78cd9f97.system.entry.js} +1 -1
- package/dist/pine-core/{p-edf4e4eb.system.entry.js → p-79598750.system.entry.js} +1 -1
- package/dist/pine-core/p-7a7954b2.system.entry.js +1 -0
- package/dist/pine-core/{p-3ba36512.system.entry.js → p-7b85115b.system.entry.js} +1 -1
- package/dist/pine-core/{p-83eb33d4.entry.js → p-7bac161d.entry.js} +1 -1
- package/dist/pine-core/{p-e70c9002.entry.js → p-7d15be6a.entry.js} +1 -1
- package/dist/pine-core/{p-621fdce1.entry.js → p-7e065b59.entry.js} +1 -1
- package/dist/pine-core/p-809e0506.entry.js +1 -0
- package/dist/pine-core/{p-73b81009.entry.js → p-83e8f145.entry.js} +1 -1
- package/dist/pine-core/{p-c7c17fe3.system.entry.js → p-85f7428b.system.entry.js} +1 -1
- package/dist/pine-core/{p-568bb210.system.entry.js → p-86d12f3c.system.entry.js} +1 -1
- package/dist/pine-core/{p-ae840ec4.entry.js → p-87ba6d2b.entry.js} +1 -1
- package/dist/pine-core/{p-e48161a5.entry.js → p-8c0040c4.entry.js} +1 -1
- package/dist/pine-core/{p-a659cce1.entry.js → p-8c85f53a.entry.js} +1 -1
- package/dist/pine-core/{p-20f39b93.system.entry.js → p-8d6fd5a7.system.entry.js} +1 -1
- package/dist/pine-core/{p-3f19666c.entry.js → p-92f648ba.entry.js} +1 -1
- package/dist/pine-core/{p-e620e492.system.entry.js → p-9374cf48.system.entry.js} +1 -1
- package/dist/pine-core/{p-babd0607.system.entry.js → p-9aaee1e9.system.entry.js} +1 -1
- package/dist/pine-core/p-B1rytYxP.system.js +1 -0
- package/dist/pine-core/p-BuRbS7Hp.js +1 -0
- package/dist/pine-core/p-BxIzb-Wc.system.js +1 -0
- package/dist/pine-core/{p-CdwliqhD.system.js → p-DVZjHa4_.system.js} +2 -2
- package/dist/pine-core/p-NNDTPCWx.js +2 -0
- package/dist/pine-core/{p-ba88ff60.system.entry.js → p-a03c12a4.system.entry.js} +1 -1
- package/dist/pine-core/p-a07b331a.entry.js +1 -0
- package/dist/pine-core/p-a0edb4ad.entry.js +1 -0
- package/dist/pine-core/{p-2cc1ec4c.entry.js → p-a9ef5295.entry.js} +1 -1
- package/dist/pine-core/p-aa0753e1.entry.js +1 -0
- package/dist/pine-core/{p-334b7c30.entry.js → p-ac2775b5.entry.js} +1 -1
- package/dist/pine-core/{p-a1750a54.entry.js → p-b0058cb0.entry.js} +1 -1
- package/dist/pine-core/p-b0674b8d.entry.js +1 -0
- package/dist/pine-core/{p-5f36fafa.system.entry.js → p-b5c760c8.system.entry.js} +1 -1
- package/dist/pine-core/{p-3a1b7302.system.entry.js → p-b6812452.system.entry.js} +1 -1
- package/dist/pine-core/{p-2b0cb8c4.system.entry.js → p-b89583e7.system.entry.js} +1 -1
- package/dist/pine-core/{p-5584a56b.entry.js → p-b9380ce8.entry.js} +1 -1
- package/dist/pine-core/{p-7a4da839.entry.js → p-bf759fc0.entry.js} +1 -1
- package/dist/pine-core/{p-791d357a.entry.js → p-c1932447.entry.js} +1 -1
- package/dist/pine-core/{p-cce83ef0.entry.js → p-c2688710.entry.js} +1 -1
- package/dist/pine-core/{p-46de2438.entry.js → p-c35fe2e2.entry.js} +1 -1
- package/dist/pine-core/{p-ef71710b.system.entry.js → p-c3748812.system.entry.js} +2 -2
- package/dist/pine-core/{p-59a5dd77.system.entry.js → p-c52ad43b.system.entry.js} +1 -1
- package/dist/pine-core/p-c625d5ea.system.entry.js +1 -0
- package/dist/pine-core/{p-25f8690f.entry.js → p-caf73216.entry.js} +1 -1
- package/dist/pine-core/{p-587a15ee.system.entry.js → p-cf389430.system.entry.js} +1 -1
- package/dist/pine-core/{p-ae2b466a.system.entry.js → p-d00f54f0.system.entry.js} +1 -1
- package/dist/pine-core/{p-7874fe2b.entry.js → p-d037308b.entry.js} +1 -1
- package/dist/pine-core/{p-52e9ec4f.entry.js → p-d281464e.entry.js} +1 -1
- package/dist/pine-core/{p-04f8b32a.entry.js → p-d70201bb.entry.js} +1 -1
- package/dist/pine-core/{p-9865431f.system.entry.js → p-d9cb26fe.system.entry.js} +1 -1
- package/dist/pine-core/{p-44388b8f.system.entry.js → p-dc460e2d.system.entry.js} +1 -1
- package/dist/pine-core/{p-01dba061.entry.js → p-dcc4ee5e.entry.js} +1 -1
- package/dist/pine-core/{p-f366f064.entry.js → p-def5d3d3.entry.js} +1 -1
- package/dist/pine-core/p-dfa70d20.entry.js +1 -0
- package/dist/pine-core/{p-c3a99f39.entry.js → p-eb42ca18.entry.js} +1 -1
- package/dist/pine-core/{p-59c60e5b.entry.js → p-ebe218f8.entry.js} +1 -1
- package/dist/pine-core/{p-889fce8a.entry.js → p-ec2c0e57.entry.js} +2 -2
- package/dist/pine-core/{p-fb68e503.system.entry.js → p-eed4b552.system.entry.js} +1 -1
- package/dist/pine-core/p-f6d1469d.entry.js +1 -0
- package/dist/pine-core/p-fb17773a.system.entry.js +1 -0
- package/dist/pine-core/p-fef6694d.entry.js +1 -0
- package/dist/pine-core/{p-0bf56f61.entry.js → p-ff1e9a32.entry.js} +1 -1
- package/dist/pine-core/p-ff3399ed.entry.js +1 -0
- 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-avatar/pds-avatar.d.ts +25 -0
- package/dist/types/components/pds-button/pds-button.d.ts +1 -1
- package/dist/types/components/pds-combobox/pds-combobox.d.ts +14 -0
- package/dist/types/components/pds-link/pds-link.d.ts +7 -0
- package/dist/types/components/pds-modal/pds-modal.d.ts +10 -0
- package/dist/types/components/pds-select/pds-select.d.ts +1 -0
- package/dist/types/components/pds-tabs/pds-tab/pds-tab.d.ts +42 -0
- package/dist/types/components/pds-tabs/pds-tabpanel/pds-tabpanel.d.ts +5 -0
- package/dist/types/components/pds-tabs/pds-tabs.d.ts +25 -2
- package/dist/types/components.d.ts +172 -5
- package/dist/types/utils/form.d.ts +4 -1
- package/dist/vscode.html-data.json +10909 -0
- package/hydrate/index.js +291 -65
- package/hydrate/index.mjs +291 -65
- package/package.json +2 -2
- package/dist/esm-es5/form-C3xDZBme.js +0 -1
- package/dist/pine-core/p-003f91b1.system.entry.js +0 -1
- package/dist/pine-core/p-006398c3.system.entry.js +0 -1
- package/dist/pine-core/p-1f4910b0.system.entry.js +0 -1
- package/dist/pine-core/p-2af1d1d3.system.entry.js +0 -1
- package/dist/pine-core/p-3876b9be.entry.js +0 -1
- package/dist/pine-core/p-4abec102.system.entry.js +0 -3
- package/dist/pine-core/p-4e49712d.entry.js +0 -1
- package/dist/pine-core/p-63e0d4a5.system.entry.js +0 -1
- package/dist/pine-core/p-65fb166c.system.entry.js +0 -1
- package/dist/pine-core/p-6c5aacad.entry.js +0 -1
- package/dist/pine-core/p-7247fb4f.entry.js +0 -2
- package/dist/pine-core/p-73dd2a2b.entry.js +0 -1
- package/dist/pine-core/p-7520a715.system.entry.js +0 -1
- package/dist/pine-core/p-7766e970.entry.js +0 -1
- package/dist/pine-core/p-7b954dbf.entry.js +0 -1
- package/dist/pine-core/p-8065c732.entry.js +0 -1
- package/dist/pine-core/p-835d9f18.system.entry.js +0 -1
- package/dist/pine-core/p-B1u-QvFn.system.js +0 -1
- package/dist/pine-core/p-C3xDZBme.js +0 -1
- package/dist/pine-core/p-C61CFP22.system.js +0 -1
- package/dist/pine-core/p-CaRgVPt7.js +0 -2
- package/dist/pine-core/p-a982ac91.system.entry.js +0 -1
- package/dist/pine-core/p-ab957ace.system.entry.js +0 -1
- package/dist/pine-core/p-af48e6ae.entry.js +0 -1
- package/dist/pine-core/p-b1b317a5.entry.js +0 -1
- package/dist/pine-core/p-bdf18687.entry.js +0 -1
- package/dist/pine-core/p-db1572a3.entry.js +0 -1
- package/dist/pine-core/p-e291db30.entry.js +0 -1
- package/dist/pine-core/p-e77c5c08.system.entry.js +0 -1
- package/dist/pine-core/p-f2cf8e76.entry.js +0 -1
- package/dist/pine-core/p-fda3f3c6.entry.js +0 -1
- /package/dist/esm-es5/{index-D4ys0pep.js → index-BjlFq0VD.js} +0 -0
- /package/dist/pine-core/{p-D4ys0pep.js → p-BjlFq0VD.js} +0 -0
- /package/dist/pine-core/{p-C62JIZmE.system.js → p-WYNNo1N0.system.js} +0 -0
package/hydrate/index.mjs
CHANGED
|
@@ -3154,6 +3154,9 @@ var setContentReference = (elm) => {
|
|
|
3154
3154
|
contentRefElm["s-cn"] = true;
|
|
3155
3155
|
insertBefore(elm, contentRefElm, elm.firstChild);
|
|
3156
3156
|
};
|
|
3157
|
+
|
|
3158
|
+
// src/runtime/fragment.ts
|
|
3159
|
+
var Fragment = (_, children) => children;
|
|
3157
3160
|
var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
|
|
3158
3161
|
if (listeners && win.document) {
|
|
3159
3162
|
listeners.map(([flags, name, method]) => {
|
|
@@ -5547,7 +5550,7 @@ class MockPdsModal {
|
|
|
5547
5550
|
}; }
|
|
5548
5551
|
}
|
|
5549
5552
|
|
|
5550
|
-
/* pds-icons
|
|
5553
|
+
/* pds-icons v10.2.0, ES Modules */
|
|
5551
5554
|
|
|
5552
5555
|
const addCircle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m11-5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1'/></svg>";
|
|
5553
5556
|
const caretDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414'/></svg>";
|
|
@@ -5709,12 +5712,13 @@ class PdsAlert {
|
|
|
5709
5712
|
}; }
|
|
5710
5713
|
}
|
|
5711
5714
|
|
|
5712
|
-
const pdsAvatarCss = () => `:host{display:inline-block}div{--color-background-container:var(--pine-color-background-container-hover);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-dimension-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-none)}.pds-avatar__button:focus-visible{outline:var(--pine-outline-focus)}.pds-avatar__badge{background-color:transparent;border:var(--pine-dimension-none);border-color:transparent;border-radius:var(--pine-border-radius-round);inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);position:absolute}img{border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.pds-avatar__initials{color:var(--pine-color-brand);fill:var(--pine-color-brand);font-size:var(--pine-font-size-085);font-weight:var(--pine-font-weight-semi-bold);height:100%;text-align:center;width:100%}.pds-avatar__initials text{text-anchor:middle}`;
|
|
5715
|
+
const pdsAvatarCss = () => `:host{display:inline-block}div{--color-background-container:var(--pine-color-background-container-hover);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-dimension-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-none)}.pds-avatar__button:focus-visible{outline:var(--pine-outline-focus)}.pds-avatar__badge{background-color:transparent;border:var(--pine-dimension-none);border-color:transparent;border-radius:var(--pine-border-radius-round);inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);position:absolute}:host([status=online]){--pds-avatar-status-color:var(--pine-color-green-500)}:host([status=away]){--pds-avatar-status-color:var(--pine-color-yellow-500)}:host([status=offline]){--pds-avatar-status-color:var(--pine-color-background-inset-emphasized)}.pds-avatar__status{background-color:var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized));block-size:28%;border-radius:var(--pine-border-radius-full);-webkit-box-shadow:0 0 0 var(--pine-border-width-thick) var(--pine-color-background-container);box-shadow:0 0 0 var(--pine-border-width-thick) var(--pine-color-background-container);inline-size:28%;inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);min-block-size:var(--pine-dimension-100);min-inline-size:var(--pine-dimension-100);position:absolute}:host(.pds-avatar--status-ring) div{-webkit-box-shadow:0 0 0 var(--pine-border-width-thick) var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized));box-shadow:0 0 0 var(--pine-border-width-thick) var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized))}img{border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.pds-avatar__initials{color:var(--pine-color-brand);fill:var(--pine-color-brand);font-size:var(--pine-font-size-085);font-weight:var(--pine-font-weight-semi-bold);height:100%;text-align:center;width:100%}.pds-avatar__initials text{text-anchor:middle}`;
|
|
5713
5716
|
|
|
5714
5717
|
/**
|
|
5715
5718
|
* @part asset-wrapper
|
|
5716
5719
|
* @part button
|
|
5717
5720
|
* @part image - The main image element that represents the avatar component.
|
|
5721
|
+
* @part initials - The text element that renders the avatar's initials, for restyling their color.
|
|
5718
5722
|
*/
|
|
5719
5723
|
class PdsAvatar {
|
|
5720
5724
|
constructor(hostRef) {
|
|
@@ -5749,6 +5753,21 @@ class PdsAvatar {
|
|
|
5749
5753
|
* @defaultValue lg
|
|
5750
5754
|
*/
|
|
5751
5755
|
this.size = 'lg';
|
|
5756
|
+
/**
|
|
5757
|
+
* Displays a presence status indicator (a dot) on the avatar: `online`
|
|
5758
|
+
* (success), `away` (warning), or `offline` (neutral). For a simple
|
|
5759
|
+
* active/inactive presence, map active to `online` and inactive to `offline`.
|
|
5760
|
+
* Takes precedence over `badge` — they share the same corner, so the badge is
|
|
5761
|
+
* hidden while `status` is set.
|
|
5762
|
+
* @defaultValue null
|
|
5763
|
+
*/
|
|
5764
|
+
this.status = null;
|
|
5765
|
+
/**
|
|
5766
|
+
* Determines whether a ring is shown around the avatar in the `status` color.
|
|
5767
|
+
* Has no effect unless `status` is set.
|
|
5768
|
+
* @defaultValue false
|
|
5769
|
+
*/
|
|
5770
|
+
this.statusRing = false;
|
|
5752
5771
|
/**
|
|
5753
5772
|
* Determines the variant of avatar. Changes appearance accordingly.
|
|
5754
5773
|
* @defaultValue customer
|
|
@@ -5765,7 +5784,7 @@ class PdsAvatar {
|
|
|
5765
5784
|
height: this.avatarSize(),
|
|
5766
5785
|
width: this.avatarSize()
|
|
5767
5786
|
};
|
|
5768
|
-
return (hAsync("div", { style: style, part: "asset-wrapper" }, this.renderIconOrImage(), this.renderBadge()));
|
|
5787
|
+
return (hAsync("div", { style: style, part: "asset-wrapper" }, this.renderIconOrImage(), this.renderBadge(), this.renderStatus()));
|
|
5769
5788
|
};
|
|
5770
5789
|
this.renderAvatar = () => {
|
|
5771
5790
|
return (this.dropdown
|
|
@@ -5774,17 +5793,32 @@ class PdsAvatar {
|
|
|
5774
5793
|
:
|
|
5775
5794
|
this.renderAssetWrapper());
|
|
5776
5795
|
};
|
|
5777
|
-
this.renderBadge = () => (
|
|
5796
|
+
this.renderBadge = () => (
|
|
5797
|
+
// `badge` and `status` share the bottom-end corner; `status` wins so the
|
|
5798
|
+
// presence dot is never painted over the badge.
|
|
5799
|
+
this.badge && !this.status
|
|
5778
5800
|
// Percentage is average size of icon in relation to total avatar size
|
|
5779
5801
|
// of all preset sizes found in Figma.
|
|
5780
5802
|
// Used to allow icons to scale to container size
|
|
5781
5803
|
&& hAsync("pds-icon", { color: "var(--pine-color-purple-600)", class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%" }));
|
|
5804
|
+
this.renderStatus = () => {
|
|
5805
|
+
var _a;
|
|
5806
|
+
if (!this.status)
|
|
5807
|
+
return null;
|
|
5808
|
+
// Inside the dropdown trigger, the button's aria-label owns the accessible
|
|
5809
|
+
// name, so the dot's own label is never announced. Mark it decorative there
|
|
5810
|
+
// and let consumers convey presence via `triggerLabel`.
|
|
5811
|
+
if (this.dropdown) {
|
|
5812
|
+
return hAsync("span", { class: "pds-avatar__status", part: "status", "aria-hidden": "true" });
|
|
5813
|
+
}
|
|
5814
|
+
return (hAsync("span", { class: "pds-avatar__status", part: "status", role: "img", "aria-label": (_a = this.statusLabel) !== null && _a !== void 0 ? _a : `${this.status} status` }));
|
|
5815
|
+
};
|
|
5782
5816
|
this.renderIconOrImage = () => {
|
|
5783
5817
|
if (this.image) {
|
|
5784
5818
|
return hAsync("img", { alt: this.alt, src: this.image });
|
|
5785
5819
|
}
|
|
5786
5820
|
if (this.initials) {
|
|
5787
|
-
return (hAsync("svg", { class: "pds-avatar__initials", viewBox: "0 0 32 32" }, hAsync("text", { x: "16", y: "20" }, this.initials)));
|
|
5821
|
+
return (hAsync("svg", { class: "pds-avatar__initials", part: "initials", viewBox: "0 0 32 32" }, hAsync("text", { x: "16", y: "20" }, this.initials)));
|
|
5788
5822
|
}
|
|
5789
5823
|
// Percentage is average size of icon in relation to total avatar size
|
|
5790
5824
|
// of all preset sizes found in Figma.
|
|
@@ -5795,7 +5829,8 @@ class PdsAvatar {
|
|
|
5795
5829
|
'pds-avatar': true,
|
|
5796
5830
|
[`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector
|
|
5797
5831
|
[`pds-avatar--has-initials`]: this.initials !== '' && this.initials !== null,
|
|
5798
|
-
[`pds-avatar--${this.variant}`]: this.variant === 'admin'
|
|
5832
|
+
[`pds-avatar--${this.variant}`]: this.variant === 'admin',
|
|
5833
|
+
[`pds-avatar--status-ring`]: !!this.status && this.statusRing,
|
|
5799
5834
|
});
|
|
5800
5835
|
}
|
|
5801
5836
|
avatarSize() {
|
|
@@ -5814,7 +5849,7 @@ class PdsAvatar {
|
|
|
5814
5849
|
}
|
|
5815
5850
|
}
|
|
5816
5851
|
render() {
|
|
5817
|
-
return (hAsync(Host, { key: '
|
|
5852
|
+
return (hAsync(Host, { key: 'fe2bd31070db6840c79d7054ac50802e8f14f572', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
|
|
5818
5853
|
}
|
|
5819
5854
|
static get style() { return pdsAvatarCss(); }
|
|
5820
5855
|
static get cmpMeta() { return {
|
|
@@ -5828,12 +5863,15 @@ class PdsAvatar {
|
|
|
5828
5863
|
"image": [1],
|
|
5829
5864
|
"initials": [1],
|
|
5830
5865
|
"size": [513],
|
|
5866
|
+
"status": [513],
|
|
5867
|
+
"statusLabel": [1, "status-label"],
|
|
5868
|
+
"statusRing": [4, "status-ring"],
|
|
5831
5869
|
"variant": [513],
|
|
5832
5870
|
"triggerLabel": [1, "trigger-label"]
|
|
5833
5871
|
},
|
|
5834
5872
|
"$listeners$": undefined,
|
|
5835
5873
|
"$lazyBundleId$": "-",
|
|
5836
|
-
"$attrsToReflect$": [["size", "size"], ["variant", "variant"]]
|
|
5874
|
+
"$attrsToReflect$": [["size", "size"], ["status", "status"], ["variant", "variant"]]
|
|
5837
5875
|
}; }
|
|
5838
5876
|
}
|
|
5839
5877
|
|
|
@@ -6178,7 +6216,7 @@ class PdsBox {
|
|
|
6178
6216
|
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)}`;
|
|
6179
6217
|
|
|
6180
6218
|
/**
|
|
6181
|
-
* @part button - Exposes the button element for styling.
|
|
6219
|
+
* @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).
|
|
6182
6220
|
* @part button-content - Exposes the button content for styling.
|
|
6183
6221
|
* @part button-text - Exposes the button text for styling.
|
|
6184
6222
|
* @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.
|
|
@@ -6415,14 +6453,18 @@ const messageId = (id, messageType) => {
|
|
|
6415
6453
|
};
|
|
6416
6454
|
/**
|
|
6417
6455
|
* Assign aria-description id to relate messages with form element
|
|
6456
|
+
*
|
|
6457
|
+
* Returns the error message id when invalid, otherwise the helper message id.
|
|
6458
|
+
* Pass only messages the component renders — a described id must exist in the DOM.
|
|
6418
6459
|
*/
|
|
6419
|
-
const assignDescription = (id, invalid, helperMessage) => {
|
|
6420
|
-
|
|
6421
|
-
|
|
6422
|
-
|
|
6423
|
-
|
|
6424
|
-
|
|
6425
|
-
|
|
6460
|
+
const assignDescription = (id, invalid, helperMessage, errorMessage) => {
|
|
6461
|
+
const hasErrorMessage = Boolean(errorMessage);
|
|
6462
|
+
const hasHelperMessage = Boolean(helperMessage);
|
|
6463
|
+
if (invalid && hasErrorMessage)
|
|
6464
|
+
return messageId(id, 'error');
|
|
6465
|
+
if (hasHelperMessage)
|
|
6466
|
+
return messageId(id, 'helper');
|
|
6467
|
+
return undefined;
|
|
6426
6468
|
};
|
|
6427
6469
|
/**
|
|
6428
6470
|
* Updates the `invalid` prop of a form element based on it's values validity
|
|
@@ -6637,9 +6679,9 @@ class PdsCheckbox {
|
|
|
6637
6679
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
6638
6680
|
}
|
|
6639
6681
|
render() {
|
|
6640
|
-
return (hAsync(Host, { key: 'd4a447aba6ffa638b0bf3ed7a5cfd4580168da79', class: this.classNames() }, hAsync("label", { key: '75fcd32809f736f8e4f6af2021f86d2c5b7bc110', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '
|
|
6641
|
-
hAsync("div", { key: '
|
|
6642
|
-
hAsync("div", { key: '
|
|
6682
|
+
return (hAsync(Host, { key: 'd4a447aba6ffa638b0bf3ed7a5cfd4580168da79', class: this.classNames() }, hAsync("label", { key: '75fcd32809f736f8e4f6af2021f86d2c5b7bc110', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: 'bf6c15908ed3b1cebc35ce10eddd4b420a2d2b4e', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), hAsync("span", { key: 'dd8d96a9907c5f237ab52508a70adcc0ed1b7eb5', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
|
|
6683
|
+
hAsync("div", { key: '8928bea1a022825777e40635ae91e7bdedaaea67', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
6684
|
+
hAsync("div", { key: 'e09485a38fb7c66d9dbfa68eddf758e3cd0d81c8', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '0bea5bbdc7817b6f2136a7c1a8e67811f4119dce', icon: danger, size: "small" }), this.errorMessage)));
|
|
6643
6685
|
}
|
|
6644
6686
|
static get formAssociated() { return true; }
|
|
6645
6687
|
get el() { return getElement(this); }
|
|
@@ -9842,7 +9884,7 @@ function createDOMPurify() {
|
|
|
9842
9884
|
}
|
|
9843
9885
|
var purify = createDOMPurify();
|
|
9844
9886
|
|
|
9845
|
-
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-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:var(--pine-z-index-raised)}.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)}`;
|
|
9887
|
+
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:var(--pine-z-index-raised)}.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)}`;
|
|
9846
9888
|
|
|
9847
9889
|
/**
|
|
9848
9890
|
* @slot option - Option elements for the combobox dropdown
|
|
@@ -11294,6 +11336,19 @@ class PdsCombobox {
|
|
|
11294
11336
|
,
|
|
11295
11337
|
large: chipProps.large, icon: chipProps.icon, dot: chipProps.dot, class: "pds-combobox__option-chip" }, this.getOptionLabel(option)));
|
|
11296
11338
|
}
|
|
11339
|
+
// Mirrors pds-multiselect and pds-select: an error message on its own puts the
|
|
11340
|
+
// field in an invalid state, so assistive tech agrees with the visual treatment.
|
|
11341
|
+
isInvalid() {
|
|
11342
|
+
return Boolean(this.invalid) || Boolean(this.errorMessage);
|
|
11343
|
+
}
|
|
11344
|
+
renderMessages() {
|
|
11345
|
+
const hasErrorMessage = Boolean(this.errorMessage);
|
|
11346
|
+
const showHelperMessage = Boolean(this.helperMessage) && !hasErrorMessage;
|
|
11347
|
+
return [
|
|
11348
|
+
showHelperMessage && (hAsync("p", { class: "pds-combobox__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)),
|
|
11349
|
+
hasErrorMessage && (hAsync("p", { class: "pds-combobox__error", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { icon: "danger", size: "small", "aria-hidden": "true" }), this.errorMessage)),
|
|
11350
|
+
];
|
|
11351
|
+
}
|
|
11297
11352
|
render() {
|
|
11298
11353
|
const triggerClass = [
|
|
11299
11354
|
'pds-combobox__button-trigger',
|
|
@@ -11302,10 +11357,13 @@ class PdsCombobox {
|
|
|
11302
11357
|
]
|
|
11303
11358
|
.filter(Boolean)
|
|
11304
11359
|
.join(' ');
|
|
11305
|
-
return (hAsync(Host, { key: '
|
|
11360
|
+
return (hAsync(Host, { key: '115a28c139b06d852de925536a7345958730265b', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: 'b0ede014fa6bfda054aa641556afa82c8240be52', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && !this.hideLabel && (hAsync("label", { key: 'befefbc617146f1b5f896988608a6a57f6ff826c', htmlFor: this.componentId, class: "pds-combobox__label" }, this.label)), this.trigger === 'input' ? (hAsync("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, hAsync("input", { ref: el => {
|
|
11306
11361
|
this.inputEl = el;
|
|
11307
11362
|
this.triggerEl = el;
|
|
11308
|
-
}, class:
|
|
11363
|
+
}, class: {
|
|
11364
|
+
'pds-combobox__input': true,
|
|
11365
|
+
'pds-combobox__input--invalid': this.isInvalid(),
|
|
11366
|
+
}, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? this.optionDomId(this.highlightedIndex) : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? this.optionDomId(this.highlightedIndex) : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? this.optionDomId(this.highlightedIndex) : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: '5458993624cf3b2cd70026001a289cb3328b955e', style: { display: 'none' } }, hAsync("slot", { key: '03178355e67f7347f832725d26fafe6281bd2541', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
|
|
11309
11367
|
}
|
|
11310
11368
|
static get formAssociated() { return true; }
|
|
11311
11369
|
get el() { return getElement(this); }
|
|
@@ -11336,10 +11394,13 @@ class PdsCombobox {
|
|
|
11336
11394
|
"customOptionLayouts": [4, "custom-option-layouts"],
|
|
11337
11395
|
"customTriggerContent": [4, "custom-trigger-content"],
|
|
11338
11396
|
"disabled": [4],
|
|
11397
|
+
"errorMessage": [1, "error-message"],
|
|
11339
11398
|
"dropdownPlacement": [1, "dropdown-placement"],
|
|
11340
11399
|
"dropdownWidth": [1, "dropdown-width"],
|
|
11341
11400
|
"dropdownMount": [1, "dropdown-mount"],
|
|
11401
|
+
"helperMessage": [1, "helper-message"],
|
|
11342
11402
|
"hideLabel": [4, "hide-label"],
|
|
11403
|
+
"invalid": [4],
|
|
11343
11404
|
"label": [1],
|
|
11344
11405
|
"maxHeight": [1, "max-height"],
|
|
11345
11406
|
"mode": [1],
|
|
@@ -13670,7 +13731,7 @@ class PdsInput {
|
|
|
13670
13731
|
return (hAsync(Host, { key: 'ecf4cc212e5c3ebc18082b790803e6b2ccb8ca77', "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: 'acdf92a30068fc04a17816ec6d85295b47e512ee', class: "pds-input" }, label && (hAsync("div", { key: '4569f0b3761db89e85a090eff6af1c47cb562115', class: {
|
|
13671
13732
|
'pds-input__label-wrapper': true,
|
|
13672
13733
|
'visually-hidden': this.hideLabel,
|
|
13673
|
-
} }, hAsync("label", { key: '90b0a863d78115fa158429db11548fc2a9ee5ae6', htmlFor: componentId, class: "pds-input__label" }, hAsync("span", { key: '3d440aaafc4daeffe45152cd23d27472d7ebf85a' }, label, this.required && hAsync("span", { key: 'c7bf6ef6191e961a106b8885cab604aa89730eba', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), hAsync("div", { key: '81f0b8a347bc9a06c753b9f31f5e30ac78e45adb', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), hAsync("input", Object.assign({ key: '
|
|
13734
|
+
} }, hAsync("label", { key: '90b0a863d78115fa158429db11548fc2a9ee5ae6', htmlFor: componentId, class: "pds-input__label" }, hAsync("span", { key: '3d440aaafc4daeffe45152cd23d27472d7ebf85a' }, label, this.required && hAsync("span", { key: 'c7bf6ef6191e961a106b8885cab604aa89730eba', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), hAsync("div", { key: '81f0b8a347bc9a06c753b9f31f5e30ac78e45adb', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), hAsync("input", Object.assign({ key: '41ed8dab6f7c71c6c382627ca4dc48bb95c1161d', 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: '4791ddeb01b758a94a2fddfec6093b9b39eefafa', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (hAsync("p", { key: 'd0a22ae4b0e400e1d5df55e35c0aaaa5c5ea3ab7', class: "pds-input__error-message", id: messageId(componentId, 'error') }, hAsync("pds-icon", { key: '69975cdcc15e5ab6df9e2c354977e2c6dae18f6e', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
|
|
13674
13735
|
}
|
|
13675
13736
|
static get formAssociated() { return true; }
|
|
13676
13737
|
get el() { return getElement(this); }
|
|
@@ -13724,7 +13785,7 @@ class PdsInput {
|
|
|
13724
13785
|
}; }
|
|
13725
13786
|
}
|
|
13726
13787
|
|
|
13727
|
-
const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color, var(--pds-context-link-color, var(--pine-color-text)));display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick);position:relative}.pds-link:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:none}:host([color=secondary]) .pds-link{color:var(--pine-color-text-primary)}:host([color=secondary]) .pds-link:hover{color:var(--pine-color-text-inverse-secondary)}:host([color=accent]) .pds-link{color:var(--pine-color-accent)}:host([color=accent]) .pds-link:hover{color:var(--pine-color-accent-hover)}:host([color=danger]) .pds-link{color:var(--pine-color-danger)}:host([color=danger]) .pds-link:hover{color:var(--pine-color-danger-hover)}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:underline}`;
|
|
13788
|
+
const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color, var(--pds-context-link-color, var(--pine-color-text)));display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick);position:relative}.pds-link:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:none}:host([color=secondary]) .pds-link{color:var(--pine-color-text-primary)}:host([color=secondary]) .pds-link:hover{color:var(--pine-color-text-inverse-secondary)}:host([color=accent]) .pds-link{color:var(--pine-color-accent)}:host([color=accent]) .pds-link:hover{color:var(--pine-color-accent-hover)}:host([color=danger]) .pds-link{color:var(--pine-color-danger)}:host([color=danger]) .pds-link:hover{color:var(--pine-color-danger-hover)}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:underline}:host([active]) .pds-link{color:var(--pds-context-link-color, var(--pine-color-text-strong));text-decoration:underline}:host([active]) .pds-link:hover{color:var(--pds-context-link-color-hover, var(--pine-color-text-strong));text-decoration:underline}`;
|
|
13728
13789
|
|
|
13729
13790
|
/**
|
|
13730
13791
|
* @part link - Link element styles.
|
|
@@ -13733,6 +13794,13 @@ const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-sta
|
|
|
13733
13794
|
class PdsLink {
|
|
13734
13795
|
constructor(hostRef) {
|
|
13735
13796
|
registerInstance(this, hostRef);
|
|
13797
|
+
/**
|
|
13798
|
+
* Marks the link as the current/active navigation item — for tab strips and
|
|
13799
|
+
* nav rails built from links. Applies the active treatment (persistent
|
|
13800
|
+
* underline + strong text) and sets `aria-current="page"`.
|
|
13801
|
+
* @defaultValue false
|
|
13802
|
+
*/
|
|
13803
|
+
this.active = false;
|
|
13736
13804
|
/**
|
|
13737
13805
|
* Determines whether the link should open in a new tab.
|
|
13738
13806
|
* @defaultValue false
|
|
@@ -13775,14 +13843,15 @@ class PdsLink {
|
|
|
13775
13843
|
const targetValue = this.target || (this.external ? '_blank' : undefined);
|
|
13776
13844
|
const showExternalIcon = this.external;
|
|
13777
13845
|
const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
|
|
13778
|
-
return (hAsync("a", { key: '
|
|
13779
|
-
hAsync("pds-icon", { key: '
|
|
13846
|
+
return (hAsync("a", { key: '5d0c5a0a5b8b80a8cdff802a3d78dad85a9ccdc4', 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: '06b7be14d867eae1b7acba8570f1e94bdf840fbb' }, this.href), showExternalIcon &&
|
|
13847
|
+
hAsync("pds-icon", { key: '678414f7d20fd20b6931cc401163180c3ad0094c', icon: launch, size: this.fontSize })));
|
|
13780
13848
|
}
|
|
13781
13849
|
static get style() { return pdsLinkCss(); }
|
|
13782
13850
|
static get cmpMeta() { return {
|
|
13783
13851
|
"$flags$": 265,
|
|
13784
13852
|
"$tagName$": "pds-link",
|
|
13785
13853
|
"$members$": {
|
|
13854
|
+
"active": [516],
|
|
13786
13855
|
"color": [1],
|
|
13787
13856
|
"download": [1],
|
|
13788
13857
|
"componentId": [1, "component-id"],
|
|
@@ -13802,7 +13871,7 @@ class PdsLink {
|
|
|
13802
13871
|
},
|
|
13803
13872
|
"$listeners$": undefined,
|
|
13804
13873
|
"$lazyBundleId$": "-",
|
|
13805
|
-
"$attrsToReflect$": []
|
|
13874
|
+
"$attrsToReflect$": [["active", "active"]]
|
|
13806
13875
|
}; }
|
|
13807
13876
|
}
|
|
13808
13877
|
|
|
@@ -13902,6 +13971,16 @@ class PdsModal {
|
|
|
13902
13971
|
* @default true
|
|
13903
13972
|
*/
|
|
13904
13973
|
this.scrollable = true;
|
|
13974
|
+
/**
|
|
13975
|
+
* Whether the modal opens outside the browser top layer as a non-modal dialog.
|
|
13976
|
+
* When `true` it opens with `dialog.show()` instead of `dialog.showModal()`, so
|
|
13977
|
+
* overlays rendered elsewhere in the DOM (file pickers, editor menus) can display
|
|
13978
|
+
* above it via `z-index`. The page is not made inert and focus is not trapped in
|
|
13979
|
+
* this mode. Read when the modal opens; changing it while the modal is open is
|
|
13980
|
+
* not supported.
|
|
13981
|
+
* @default false
|
|
13982
|
+
*/
|
|
13983
|
+
this.disableTopLayer = false;
|
|
13905
13984
|
/**
|
|
13906
13985
|
* Stores the list of focusable elements in the modal
|
|
13907
13986
|
*/
|
|
@@ -13923,6 +14002,13 @@ class PdsModal {
|
|
|
13923
14002
|
return;
|
|
13924
14003
|
// Handle Escape key to close the modal
|
|
13925
14004
|
if (e.key === 'Escape') {
|
|
14005
|
+
// In non-top-layer mode, focus can move into an overlay stacked above the
|
|
14006
|
+
// modal (the reason disableTopLayer exists). If that overlay owns focus,
|
|
14007
|
+
// leave Escape to it rather than dismissing this modal out from under it.
|
|
14008
|
+
const active = document.activeElement;
|
|
14009
|
+
if (this.disableTopLayer && active && active !== document.body && !this.el.contains(active)) {
|
|
14010
|
+
return;
|
|
14011
|
+
}
|
|
13926
14012
|
// Always prevent native dialog close behavior
|
|
13927
14013
|
e.preventDefault();
|
|
13928
14014
|
// Only close if backdropDismiss is enabled and this is the innermost modal
|
|
@@ -13933,6 +14019,11 @@ class PdsModal {
|
|
|
13933
14019
|
}
|
|
13934
14020
|
// Handle Tab key for focus trapping
|
|
13935
14021
|
if (e.key === 'Tab') {
|
|
14022
|
+
// In non-top-layer mode the modal is deliberately not focus-isolated: focus
|
|
14023
|
+
// must be able to leave it into overlays stacked above (the whole point of
|
|
14024
|
+
// disableTopLayer), so do not trap Tab here.
|
|
14025
|
+
if (this.disableTopLayer)
|
|
14026
|
+
return;
|
|
13936
14027
|
// If there are no focusable elements, do nothing
|
|
13937
14028
|
if (this.focusableElements.length === 0)
|
|
13938
14029
|
return;
|
|
@@ -14050,8 +14141,16 @@ class PdsModal {
|
|
|
14050
14141
|
try {
|
|
14051
14142
|
// Store the currently focused element to restore focus when modal closes
|
|
14052
14143
|
this.previousActiveElement = document.activeElement;
|
|
14053
|
-
//
|
|
14054
|
-
|
|
14144
|
+
// showModal() promotes the dialog to the browser top layer (and makes the
|
|
14145
|
+
// rest of the page inert), which prevents any overlay outside the dialog
|
|
14146
|
+
// from ever painting above it. show() opens a non-modal dialog that stays
|
|
14147
|
+
// in the normal stacking context so those overlays can stack above it.
|
|
14148
|
+
if (this.disableTopLayer) {
|
|
14149
|
+
this.modalRef.show();
|
|
14150
|
+
}
|
|
14151
|
+
else {
|
|
14152
|
+
this.modalRef.showModal();
|
|
14153
|
+
}
|
|
14055
14154
|
this.open = true;
|
|
14056
14155
|
// Update focusable elements and set initial focus
|
|
14057
14156
|
// Using a longer timeout to ensure all components are fully rendered
|
|
@@ -14113,14 +14212,14 @@ class PdsModal {
|
|
|
14113
14212
|
return thisZIndex === maxZIndex;
|
|
14114
14213
|
}
|
|
14115
14214
|
render() {
|
|
14116
|
-
return (hAsync("dialog", { key: '
|
|
14215
|
+
return (hAsync("dialog", { key: 'd345ea0a585213fd7879a2fe27071705fbdba79b', class: {
|
|
14117
14216
|
'pds-modal__backdrop': true,
|
|
14118
14217
|
'open': this.open
|
|
14119
|
-
}, "aria-modal":
|
|
14218
|
+
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, hAsync("div", { key: '34c9a222d58ffd9736a36ab6848679186167e878', class: {
|
|
14120
14219
|
'pds-modal': true,
|
|
14121
14220
|
[`pds-modal--${this.size}`]: true,
|
|
14122
14221
|
'pds-modal--scrollable': this.scrollable
|
|
14123
|
-
}, part: "modal" }, hAsync("slot", { key: '
|
|
14222
|
+
}, part: "modal" }, hAsync("slot", { key: '4eef9c3001b6a7c972fa8e49fa3f0b140c7fe7ce' }))));
|
|
14124
14223
|
}
|
|
14125
14224
|
get el() { return getElement(this); }
|
|
14126
14225
|
static get watchers() { return {
|
|
@@ -14138,6 +14237,7 @@ class PdsModal {
|
|
|
14138
14237
|
"open": [1028],
|
|
14139
14238
|
"size": [1],
|
|
14140
14239
|
"scrollable": [4],
|
|
14240
|
+
"disableTopLayer": [4, "disable-top-layer"],
|
|
14141
14241
|
"focusableElementsArray": [32],
|
|
14142
14242
|
"showModal": [64],
|
|
14143
14243
|
"hideModal": [64]
|
|
@@ -14445,7 +14545,7 @@ function pluralize(el, count, forms, vars) {
|
|
|
14445
14545
|
return formatMessage(template, Object.assign({ count }, vars));
|
|
14446
14546
|
}
|
|
14447
14547
|
|
|
14448
|
-
const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__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-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--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-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__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-xs)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__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);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);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:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
|
|
14548
|
+
const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__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-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--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-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__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-xs)}.pds-multiselect__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);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__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);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);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:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
|
|
14449
14549
|
|
|
14450
14550
|
/**
|
|
14451
14551
|
* @slot (default) - Static option elements for the multiselect
|
|
@@ -15480,16 +15580,16 @@ class PdsMultiselect {
|
|
|
15480
15580
|
'pds-multiselect__trigger--invalid': this.invalid || !!this.errorMessage,
|
|
15481
15581
|
'pds-multiselect__trigger--has-value': hasSelections,
|
|
15482
15582
|
'pds-multiselect__trigger--pill-inline': true,
|
|
15483
|
-
}, onClick: this.handleTriggerClick }, this.renderInlinePills(), hAsync("button", { ref: el => (this.triggerEl = el), type: "button", id: this.componentId, part: "pill-toggle", class: "pds-multiselect__pill-toggle", disabled: this.disabled, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-labelledby": this.label ? `${this.componentId}-label` : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.
|
|
15583
|
+
}, onClick: this.handleTriggerClick }, this.renderInlinePills(), hAsync("button", { ref: el => (this.triggerEl = el), type: "button", id: this.componentId, part: "pill-toggle", class: "pds-multiselect__pill-toggle", disabled: this.disabled, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-labelledby": this.label ? `${this.componentId}-label` : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onKeyDown: this.handleTriggerKeyDown }, hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge })))) : (hAsync("button", { ref: el => (this.triggerEl = el), type: "button", part: "trigger", class: {
|
|
15484
15584
|
'pds-multiselect__trigger': true,
|
|
15485
15585
|
'pds-multiselect__trigger--open': this.isOpen,
|
|
15486
15586
|
'pds-multiselect__trigger--disabled': this.disabled,
|
|
15487
15587
|
'pds-multiselect__trigger--invalid': this.invalid || !!this.errorMessage,
|
|
15488
15588
|
'pds-multiselect__trigger--has-value': hasSelections,
|
|
15489
|
-
}, 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.
|
|
15589
|
+
}, 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: {
|
|
15490
15590
|
'pds-multiselect__trigger-text': true,
|
|
15491
15591
|
'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
|
|
15492
|
-
} }, this.getTriggerText()), hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '
|
|
15592
|
+
} }, this.getTriggerText()), hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '199804f5352818d32542864e3a61f7a9364cc2e3', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: 'e6855ff0aaf18f59dced2df5d636cadb4d47427b', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: '29eae23d8db31b9b9c292d5cd1dc5f641613ed32', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'aad6fd945998957cd28ab6eb97c4d80f0a732ea5', icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: '7d0d56a1e097cfc0c7396c1957d16014cb071b1e', style: { display: 'none' } }, hAsync("slot", { key: '6e7fc9dbdab3977248439aa5ea14f13e0f45bbc6' })))));
|
|
15493
15593
|
}
|
|
15494
15594
|
static get formAssociated() { return true; }
|
|
15495
15595
|
get el() { return getElement(this); }
|
|
@@ -16235,7 +16335,7 @@ class PdsProperty {
|
|
|
16235
16335
|
|
|
16236
16336
|
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)}`;
|
|
16237
16337
|
|
|
16238
|
-
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.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-white);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 .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)}`;
|
|
16338
|
+
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-white);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)}`;
|
|
16239
16339
|
|
|
16240
16340
|
/**
|
|
16241
16341
|
* @slot image - Custom image content to display instead of the default radio input
|
|
@@ -16318,11 +16418,11 @@ class PdsRadio {
|
|
|
16318
16418
|
}
|
|
16319
16419
|
render() {
|
|
16320
16420
|
const renderLabelAndMessages = () => [
|
|
16321
|
-
hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: '
|
|
16421
|
+
hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: 'ca6cb85ace418259f13b6be404e125d4c1c3a778', "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: '968c3dcc6b3e18a177db0570a9104b4755827a3e', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
|
|
16322
16422
|
this.helperMessage && (hAsync("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
|
|
16323
|
-
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: '
|
|
16423
|
+
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: '2dec1d43ade25a8ff70301fb661174eff5efadeb', icon: danger, size: "small" }), this.errorMessage))
|
|
16324
16424
|
];
|
|
16325
|
-
return (hAsync(Host, { key: '
|
|
16425
|
+
return (hAsync(Host, { key: '75563601db01d7db2a4c4e74364c0bb2d57ac9ae', class: this.classNames() }, this.hasImage() && (hAsync("div", { key: '120ca4dd9d3828cda49c0f7539f429e2aaa89329', class: "pds-radio__image-container", part: "image-container" }, hAsync("slot", { key: 'a03496e1acc3799740aa20342408de97991cad68', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (hAsync("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
|
|
16326
16426
|
}
|
|
16327
16427
|
get el() { return getElement(this); }
|
|
16328
16428
|
static get style() { return labelCss$3() + pdsRadioCss(); }
|
|
@@ -16773,6 +16873,11 @@ class PdsSelect {
|
|
|
16773
16873
|
return null;
|
|
16774
16874
|
return (hAsync("div", { class: "pds-select__message" }, this.getHelperMessage(), this.getErrorMessage()));
|
|
16775
16875
|
}
|
|
16876
|
+
// The field also renders as invalid whenever an error message is present, via
|
|
16877
|
+
// `select:has(~ .pds-select__message .pds-select__error-message)` in the styles.
|
|
16878
|
+
isInvalid() {
|
|
16879
|
+
return Boolean(this.invalid) || Boolean(this.errorMessage);
|
|
16880
|
+
}
|
|
16776
16881
|
classNames() {
|
|
16777
16882
|
const classNames = [];
|
|
16778
16883
|
if (this.invalid) {
|
|
@@ -16856,7 +16961,7 @@ class PdsSelect {
|
|
|
16856
16961
|
}
|
|
16857
16962
|
render() {
|
|
16858
16963
|
const hasAction = this.el.querySelector('[slot="action"]') !== null;
|
|
16859
|
-
return (hAsync(Host, { key: '
|
|
16964
|
+
return (hAsync(Host, { key: 'c74f5e86a09bd3fe6e8048ca103ec9aa66a98fc6', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '76de23d6b0d9e32fab48e09a8f6ee3211e196115', class: "pds-select" }, !this.hideLabel && (hAsync("div", { key: '1db87074447cbc819e6b06dd89135d018656a471', class: "pds-select__label-wrapper" }, hAsync("label", { key: 'bc28c3b3361a19ee14a1b79edda736340009d87d', htmlFor: this.componentId }, hAsync("span", { key: 'f0828e0e83c7c0d7cf50e08df4b861dad4df9eb9', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), hAsync("select", { key: 'd7d254887c976a95ad1f1da2ea540d6d3f986630', "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: '793a84d41bd5e18d64757238704a053b1135a83c', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, hAsync("slot", { key: '27ed9ff31bbf83fcbd2ed8dd2b23b97422b18d25', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && hAsync("pds-icon", { key: '43d415eab0fc8a3c02e19848a5622ea43f04256e', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
|
|
16860
16965
|
}
|
|
16861
16966
|
static get formAssociated() { return true; }
|
|
16862
16967
|
get el() { return getElement(this); }
|
|
@@ -19760,9 +19865,9 @@ class PdsSwitch {
|
|
|
19760
19865
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
19761
19866
|
}
|
|
19762
19867
|
render() {
|
|
19763
|
-
return (hAsync(Host, { key: '96ee8c40c04e95b461ba2942b740503897a56b27', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, hAsync("label", { key: '441d6854f2c0b02ecf3d874198b3e0636d68c83b', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '
|
|
19764
|
-
hAsync("div", { key: '
|
|
19765
|
-
hAsync("div", { key: '
|
|
19868
|
+
return (hAsync(Host, { key: '96ee8c40c04e95b461ba2942b740503897a56b27', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, hAsync("label", { key: '441d6854f2c0b02ecf3d874198b3e0636d68c83b', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: 'ed0c344ab46d83faf902571fcd282a605f5cfbec', "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: 'a2e89156f56d6c921be9b866823bb4b36710b40f', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
|
|
19869
|
+
hAsync("div", { key: '1465778f0a69d4c87108a80603d123bf0500911d', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
19870
|
+
hAsync("div", { key: '2a652c3019f45a060283f98ea97ac83e17d7de33', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '438895d9ad8799b540ab239ac90bedcb0231d2f0', icon: danger, size: "small" }), this.errorMessage)));
|
|
19766
19871
|
}
|
|
19767
19872
|
static get formAssociated() { return true; }
|
|
19768
19873
|
get el() { return getElement(this); }
|
|
@@ -19794,7 +19899,7 @@ class PdsSwitch {
|
|
|
19794
19899
|
}; }
|
|
19795
19900
|
}
|
|
19796
19901
|
|
|
19797
|
-
const pdsTabCss = () => `pds-tab{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;position:relative}.pds-tabs--pill pds-tab{-ms-flex:1;flex:1}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--pine-border-width-none);-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:var(--pine-dimension-none);-ms-flex-align:center;align-items:center;color:var(--pine-color-text-secondary);display:-ms-inline-flexbox;display:inline-flex;position:relative;text-decoration:none;white-space:nowrap}.pds-tab.is-active,.pds-tab[aria-selected=true]{color:var(--pine-color-text)}.pds-tab.is-active .pds-tab__content::after,.pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tab:hover:not(:disabled){color:var(--pine-color-text)}.pds-tab:focus{outline:none}.pds-tab:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tab:disabled,.pds-tab.is-disabled{color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-tab .pds-tab__content{font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:var(--pine-color-brand);content:"";height:3px;inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);inset-inline-start:var(--pine-dimension-none);opacity:0;position:absolute}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--color-background-tab:transparent}.pds-tabs--availability .pds-tab{background-color:var(--color-background-tab);border-radius:calc(var(--pine-dimension-xs) * 1.25) calc(var(--pine-dimension-xs) * 1.25) var(--pine-dimension-none) var(--pine-dimension-none);color:var(--pine-color-text-secondary);padding:8px 16px 13px}.pds-tabs--availability .pds-tab.is-active,.pds-tabs--availability .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-secondary);color:var(--pine-color-text)}.pds-tabs--availability .pds-tab.is-active .pds-tab__content::after,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tabs--availability .pds-tab.is-active .pds-tab-edge,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge{z-index:var(--pine-z-index-raised)}.pds-tabs--availability .pds-tab:hover:not(.is-active,[aria-selected=true],:disabled){--color-background-tab:var(--pine-color-secondary-hover);color:var(--pine-color-text)}.pds-tabs--availability .pds-tab:focus-visible{color:var(--pine-color-text-secondary)}.pds-tabs--availability .pds-tab:disabled,.pds-tabs--availability .pds-tab.is-disabled{--color-background-tab:transparent;color:var(--pine-color-text-disabled)}.pds-tabs--availability .pds-tab__content{-webkit-padding-after:7px;padding-block-end:7px}.pds-tabs--availability .pds-tab-edge{bottom:0;display:block;height:8px;inset-inline-end:100%;overflow:hidden;position:absolute;width:8px}.pds-tabs--availability .pds-tab-edge::before{border-radius:50%;bottom:0;-webkit-box-shadow:4px 4px 0 0 var(--color-background-tab);box-shadow:4px 4px 0 0 var(--color-background-tab);content:"";display:block;height:200%;inset-inline-end:0;position:absolute;width:200%}.pds-tabs--availability .pds-tab-edge--end{inset-inline-end:unset;inset-inline-start:100%}.pds-tabs--availability .pds-tab-edge--end::before{-webkit-box-shadow:-4px 4px 0 0 var(--color-background-tab);box-shadow:-4px 4px 0 0 var(--color-background-tab);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter .pds-tab{background-color:var(--pine-color-background-muted);border-radius:50px;color:var(--pine-color-text);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{background-color:var(--pine-color-primary);color:var(--pine-color-text-primary)}.pds-tabs--filter .pds-tab.is-active:hover:not(:disabled),.pds-tabs--filter .pds-tab[aria-selected=true]:hover:not(:disabled){background-color:var(--pine-color-primary-hover)}.pds-tabs--filter .pds-tab:hover:not(.is-active,[aria-selected=true],:disabled){background-color:var(--pine-color-border-disabled)}.pds-tabs--filter .pds-tab:disabled,.pds-tabs--filter .pds-tab.is-disabled{background-color:transparent;color:var(--pine-color-text-disabled)}.pds-tabs--filter .pds-tab:disabled.is-active,.pds-tabs--filter .pds-tab:disabled[aria-selected=true],.pds-tabs--filter .pds-tab.is-disabled.is-active,.pds-tabs--filter .pds-tab.is-disabled[aria-selected=true]{background-color:var(--pine-color-primary-disabled)}.pds-tabs--filter .pds-tab__content{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-tabs--filter .pds-tab__content::after{content:unset}.pds-tabs--pill{--color-background-tab:transparent}.pds-tabs--pill .pds-tab{background-color:var(--color-background-tab);border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text-muted);-ms-flex:1;flex:1;height:34px;-ms-flex-pack:center;justify-content:center}.pds-tabs--pill .pds-tab .pds-tab__content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-padding-after:0;padding-block-end:0}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-background-container);border-color:var(--pine-color-border);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);color:var(--pine-color-text-active)}.pds-tabs--pill .pds-tab.is-active:focus-visible,.pds-tabs--pill .pds-tab[aria-selected=true]:focus-visible{border-color:var(--color-border-focus);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{}.pds-tabs--pill .pds-tab.is-active .pds-tab__content::after,.pds-tabs--pill .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:0}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{}.pds-tabs--pill .pds-tab:disabled,.pds-tabs--pill .pds-tab.is-disabled{color:var(--pine-color-text-disabled)}`;
|
|
19902
|
+
const pdsTabCss = () => `pds-tab{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;position:relative}.pds-tabs--pill pds-tab{-ms-flex:1;flex:1}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--pine-border-width-none);-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:var(--pine-dimension-none);-ms-flex-align:center;align-items:center;color:var(--pine-color-text-secondary);display:-ms-inline-flexbox;display:inline-flex;position:relative;text-decoration:none;white-space:nowrap}.pds-tab.is-active,.pds-tab[aria-selected=true]{color:var(--pine-color-text)}.pds-tab.is-active .pds-tab__content::after,.pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tab:hover:not(:disabled,.is-disabled){color:var(--pine-color-text)}.pds-tab:focus{outline:none}.pds-tab:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tab:disabled,.pds-tab.is-disabled{color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-tab .pds-tab__content{font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:var(--pine-color-brand);content:"";height:3px;inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);inset-inline-start:var(--pine-dimension-none);opacity:0;position:absolute}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--color-background-tab:transparent}.pds-tabs--availability .pds-tab{background-color:var(--color-background-tab);border-radius:calc(var(--pine-dimension-xs) * 1.25) calc(var(--pine-dimension-xs) * 1.25) var(--pine-dimension-none) var(--pine-dimension-none);color:var(--pine-color-text-secondary);padding:8px 16px 13px}.pds-tabs--availability .pds-tab.is-active,.pds-tabs--availability .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-secondary);color:var(--pine-color-text)}.pds-tabs--availability .pds-tab.is-active .pds-tab__content::after,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tabs--availability .pds-tab.is-active .pds-tab-edge,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge{z-index:var(--pine-z-index-raised)}.pds-tabs--availability .pds-tab:hover:not(.is-active,[aria-selected=true],:disabled,.is-disabled){--color-background-tab:var(--pine-color-secondary-hover);color:var(--pine-color-text)}.pds-tabs--availability .pds-tab:focus-visible{color:var(--pine-color-text-secondary)}.pds-tabs--availability .pds-tab:disabled,.pds-tabs--availability .pds-tab.is-disabled{--color-background-tab:transparent;color:var(--pine-color-text-disabled)}.pds-tabs--availability .pds-tab__content{-webkit-padding-after:7px;padding-block-end:7px}.pds-tabs--availability .pds-tab-edge{bottom:0;display:block;height:8px;inset-inline-end:100%;overflow:hidden;position:absolute;width:8px}.pds-tabs--availability .pds-tab-edge::before{border-radius:50%;bottom:0;-webkit-box-shadow:4px 4px 0 0 var(--color-background-tab);box-shadow:4px 4px 0 0 var(--color-background-tab);content:"";display:block;height:200%;inset-inline-end:0;position:absolute;width:200%}.pds-tabs--availability .pds-tab-edge--end{inset-inline-end:unset;inset-inline-start:100%}.pds-tabs--availability .pds-tab-edge--end::before{-webkit-box-shadow:-4px 4px 0 0 var(--color-background-tab);box-shadow:-4px 4px 0 0 var(--color-background-tab);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter .pds-tab{background-color:var(--pine-color-background-muted);border-radius:50px;color:var(--pine-color-text);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{background-color:var(--pine-color-primary);color:var(--pine-color-text-primary)}.pds-tabs--filter .pds-tab.is-active:hover:not(:disabled,.is-disabled),.pds-tabs--filter .pds-tab[aria-selected=true]:hover:not(:disabled,.is-disabled){background-color:var(--pine-color-primary-hover)}.pds-tabs--filter .pds-tab:hover:not(.is-active,[aria-selected=true],:disabled,.is-disabled){background-color:var(--pine-color-border-disabled)}.pds-tabs--filter .pds-tab:disabled,.pds-tabs--filter .pds-tab.is-disabled{background-color:transparent;color:var(--pine-color-text-disabled)}.pds-tabs--filter .pds-tab:disabled.is-active,.pds-tabs--filter .pds-tab:disabled[aria-selected=true],.pds-tabs--filter .pds-tab.is-disabled.is-active,.pds-tabs--filter .pds-tab.is-disabled[aria-selected=true]{background-color:var(--pine-color-primary-disabled)}.pds-tabs--filter .pds-tab__content{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-tabs--filter .pds-tab__content::after{content:unset}.pds-tabs--pill{--color-background-tab:transparent}.pds-tabs--pill .pds-tab{background-color:var(--color-background-tab);border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text-muted);-ms-flex:1;flex:1;height:34px;-ms-flex-pack:center;justify-content:center}.pds-tabs--pill .pds-tab .pds-tab__content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-padding-after:0;padding-block-end:0}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-background-container);border-color:var(--pine-color-border);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);color:var(--pine-color-text-active)}.pds-tabs--pill .pds-tab.is-active:focus-visible,.pds-tabs--pill .pds-tab[aria-selected=true]:focus-visible{border-color:var(--color-border-focus);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{}.pds-tabs--pill .pds-tab.is-active .pds-tab__content::after,.pds-tabs--pill .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:0}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{}.pds-tabs--pill .pds-tab:disabled,.pds-tabs--pill .pds-tab.is-disabled{color:var(--pine-color-text-disabled)}`;
|
|
19798
19903
|
|
|
19799
19904
|
class PdsTab {
|
|
19800
19905
|
constructor(hostRef) {
|
|
@@ -19805,6 +19910,13 @@ class PdsTab {
|
|
|
19805
19910
|
* @defaultValue false
|
|
19806
19911
|
*/
|
|
19807
19912
|
this.disabled = false;
|
|
19913
|
+
/**
|
|
19914
|
+
* Marks this tab as the current one in navigation mode (`href` set). Applies
|
|
19915
|
+
* the active treatment and `aria-current="page"`. Ignored in panel mode, where
|
|
19916
|
+
* the active tab is derived from the parent's `activeTabName`.
|
|
19917
|
+
* @defaultValue false
|
|
19918
|
+
*/
|
|
19919
|
+
this.active = false;
|
|
19808
19920
|
/**
|
|
19809
19921
|
* Keeps track of the tabpanel selected state, this property is passed by parent component
|
|
19810
19922
|
*/
|
|
@@ -19816,18 +19928,46 @@ class PdsTab {
|
|
|
19816
19928
|
return;
|
|
19817
19929
|
this.pdsTabClick.emit([index, parentComponentId]);
|
|
19818
19930
|
}
|
|
19931
|
+
// An empty string is treated as "no destination" everywhere (isNav fallback,
|
|
19932
|
+
// href attribute, role) so a nav tab never renders `href=""` (which would
|
|
19933
|
+
// navigate to the current page).
|
|
19934
|
+
get hasHref() {
|
|
19935
|
+
return this.href != null && this.href !== '';
|
|
19936
|
+
}
|
|
19937
|
+
get isNav() {
|
|
19938
|
+
var _a;
|
|
19939
|
+
// The parent `pds-tabs` is authoritative when present (via `navMode`), so its
|
|
19940
|
+
// tabs share one mode. Standalone, fall back to a usable `href`.
|
|
19941
|
+
return (_a = this.navMode) !== null && _a !== void 0 ? _a : this.hasHref;
|
|
19942
|
+
}
|
|
19943
|
+
get isActive() {
|
|
19944
|
+
// Navigation mode is server-driven via `active`; panel mode is parent-driven
|
|
19945
|
+
// via `selected` (from `activeTabName`).
|
|
19946
|
+
return this.isNav ? this.active : this.selected;
|
|
19947
|
+
}
|
|
19819
19948
|
classNames() {
|
|
19820
19949
|
const classes = [
|
|
19821
19950
|
'pds-tab',
|
|
19822
|
-
this.
|
|
19951
|
+
this.isActive && 'is-active',
|
|
19823
19952
|
this.disabled && 'is-disabled',
|
|
19824
19953
|
];
|
|
19825
19954
|
return classes.filter(Boolean).join(' ');
|
|
19826
19955
|
}
|
|
19827
19956
|
render() {
|
|
19828
|
-
const availabilityTabEdgeInlineStart = (hAsync("span", {
|
|
19829
|
-
const availabilityTabEdgeInlineEnd = (hAsync("span", {
|
|
19830
|
-
|
|
19957
|
+
const availabilityTabEdgeInlineStart = (hAsync("span", { class: "pds-tab-edge", role: "presentation" }));
|
|
19958
|
+
const availabilityTabEdgeInlineEnd = (hAsync("span", { class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
|
|
19959
|
+
const content = (hAsync(Fragment, null, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, hAsync("div", { class: "pds-tab__content" }, hAsync("slot", null))));
|
|
19960
|
+
// Navigation mode: a real anchor, so keyboard activation and navigation are
|
|
19961
|
+
// native (and Turbo-driven when framed) with no controller — and the current
|
|
19962
|
+
// item carries `aria-current="page"` rather than `role="tab"`/`aria-selected`.
|
|
19963
|
+
if (this.isNav) {
|
|
19964
|
+
return (hAsync(Host, { variant: this.variant, slot: "tabs", index: this.index }, hAsync("a", { href: this.disabled || !this.hasHref ? undefined : this.href,
|
|
19965
|
+
// An anchor without an href (disabled, or forced into nav mode with no
|
|
19966
|
+
// usable href) loses its implicit link role; restore it explicitly so
|
|
19967
|
+
// assistive tech still announces the item rather than as plain text.
|
|
19968
|
+
role: this.disabled || !this.hasHref ? "link" : undefined, id: this.parentComponentId + "__" + this.name, class: this.classNames(), target: this.target, rel: this.target === "_blank" ? "noopener noreferrer" : undefined, "aria-current": this.isActive ? "page" : undefined, "aria-disabled": this.disabled ? "true" : null, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined }, content)));
|
|
19969
|
+
}
|
|
19970
|
+
return (hAsync(Host, { variant: this.variant, slot: "tabs", index: this.index }, hAsync("button", { role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.disabled ? "-1" : (this.selected ? "0" : "-1"), "aria-selected": this.selected ? "true" : "false", "aria-disabled": this.disabled ? "true" : null, disabled: this.disabled, class: this.classNames(), onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, content)));
|
|
19831
19971
|
}
|
|
19832
19972
|
get el() { return getElement(this); }
|
|
19833
19973
|
static get style() { return pdsTabCss(); }
|
|
@@ -19836,11 +19976,17 @@ class PdsTab {
|
|
|
19836
19976
|
"$tagName$": "pds-tab",
|
|
19837
19977
|
"$members$": {
|
|
19838
19978
|
"disabled": [4],
|
|
19979
|
+
"href": [1],
|
|
19980
|
+
"active": [4],
|
|
19981
|
+
"target": [1],
|
|
19982
|
+
"turboFrame": [1, "turbo-frame"],
|
|
19983
|
+
"turboAction": [1, "turbo-action"],
|
|
19839
19984
|
"name": [1],
|
|
19840
19985
|
"parentComponentId": [1, "parent-component-id"],
|
|
19841
19986
|
"variant": [1],
|
|
19842
19987
|
"index": [2],
|
|
19843
|
-
"selected": [4]
|
|
19988
|
+
"selected": [4],
|
|
19989
|
+
"navMode": [4, "nav-mode"]
|
|
19844
19990
|
},
|
|
19845
19991
|
"$listeners$": undefined,
|
|
19846
19992
|
"$lazyBundleId$": "-",
|
|
@@ -20756,7 +20902,7 @@ class PdsTableRow {
|
|
|
20756
20902
|
}; }
|
|
20757
20903
|
}
|
|
20758
20904
|
|
|
20759
|
-
const pdsTabpanelCss = () => `:host{display:block}.pds-tabpanel{display:none;margin-top:var(--tabs-dimension-panel-margin-top);padding:var(--tabs-dimension-panel-padding)}.pds-tabpanel:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabpanel.is-active{display:block}`;
|
|
20905
|
+
const pdsTabpanelCss = () => `:host{display:block}:host(.pds-tabpanel--stretch-active){-ms-flex:1 1 auto;flex:1 1 auto;min-block-size:0}:host(.pds-tabpanel--stretch-active) .pds-tabpanel.is-active{block-size:100%}.pds-tabpanel{display:none;margin-top:var(--tabs-dimension-panel-margin-top);padding:var(--tabs-dimension-panel-padding)}.pds-tabpanel:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabpanel.is-active{display:block}`;
|
|
20760
20906
|
|
|
20761
20907
|
class PdsTabpanel {
|
|
20762
20908
|
constructor(hostRef) {
|
|
@@ -20766,9 +20912,14 @@ class PdsTabpanel {
|
|
|
20766
20912
|
*/
|
|
20767
20913
|
/** @internal */
|
|
20768
20914
|
this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
|
|
20915
|
+
/**
|
|
20916
|
+
* Keeps track of the parent `stretch` state so the active panel can fill height, this property is passed by parent component
|
|
20917
|
+
*/
|
|
20918
|
+
/** @internal */
|
|
20919
|
+
this.stretch = false;
|
|
20769
20920
|
}
|
|
20770
20921
|
render() {
|
|
20771
|
-
return (hAsync(Host, { key: '
|
|
20922
|
+
return (hAsync(Host, { key: '88dfc12ce8b2413824e6d3425aa38674fa14c764', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, hAsync("div", { key: 'bcfe8be6480dc253b10d63d6e37caacec4a8fe7f', 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: '96ee87a0917e5f538a5c053045a5d6821684cf3a' }))));
|
|
20772
20923
|
}
|
|
20773
20924
|
get el() { return getElement(this); }
|
|
20774
20925
|
static get style() { return pdsTabpanelCss(); }
|
|
@@ -20779,7 +20930,8 @@ class PdsTabpanel {
|
|
|
20779
20930
|
"name": [1],
|
|
20780
20931
|
"parentComponentId": [1, "parent-component-id"],
|
|
20781
20932
|
"variant": [1],
|
|
20782
|
-
"selected": [1028]
|
|
20933
|
+
"selected": [1028],
|
|
20934
|
+
"stretch": [4]
|
|
20783
20935
|
},
|
|
20784
20936
|
"$listeners$": undefined,
|
|
20785
20937
|
"$lazyBundleId$": "-",
|
|
@@ -20787,7 +20939,7 @@ class PdsTabpanel {
|
|
|
20787
20939
|
}; }
|
|
20788
20940
|
}
|
|
20789
20941
|
|
|
20790
|
-
const pdsTabsCss = () => `:host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-md)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--pine-dimension-xs)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--pine-dimension-sm)}:host(.pds-tabs--pill) .pds-tabs__tablist{background-color:var(--pine-color-background-app);border:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-radius:var(--pine-dimension-100);display:-ms-inline-flexbox;display:inline-flex;display:-ms-flexbox;display:flex;gap:0;height:var(--pine-dimension-450)}`;
|
|
20942
|
+
const pdsTabsCss = () => `:host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-md)}:host(.pds-tabs--divider) .pds-tabs__tablist{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host(.pds-tabs--stretch){block-size:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.pds-tabs--stretch) .pds-tabs__tablist{-ms-flex:0 0 auto;flex:0 0 auto}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--pine-dimension-xs)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--pine-dimension-sm)}:host(.pds-tabs--pill) .pds-tabs__tablist{background-color:var(--pine-color-background-app);border:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-radius:var(--pine-dimension-100);display:-ms-inline-flexbox;display:inline-flex;display:-ms-flexbox;display:flex;gap:0;height:var(--pine-dimension-450)}`;
|
|
20791
20943
|
|
|
20792
20944
|
/**
|
|
20793
20945
|
* @slot tabs - Content is placed within the `div[role="tablist"]` element as children
|
|
@@ -20797,6 +20949,25 @@ const pdsTabsCss = () => `:host{--tabs-dimension-panel-margin-top:var(--pine-dim
|
|
|
20797
20949
|
class PdsTabs {
|
|
20798
20950
|
constructor(hostRef) {
|
|
20799
20951
|
registerInstance(this, hostRef);
|
|
20952
|
+
/**
|
|
20953
|
+
* Adds a divider rule beneath the tab list.
|
|
20954
|
+
* @defaultValue false
|
|
20955
|
+
*/
|
|
20956
|
+
this.divider = false;
|
|
20957
|
+
/**
|
|
20958
|
+
* Stretches the component so the active tab panel fills the remaining height.
|
|
20959
|
+
* Requires the component to have a constrained height (e.g. a flex parent).
|
|
20960
|
+
* @defaultValue false
|
|
20961
|
+
*/
|
|
20962
|
+
this.stretch = false;
|
|
20963
|
+
/**
|
|
20964
|
+
* Renders the tab strip as navigation instead of an in-page panel switcher: each
|
|
20965
|
+
* `pds-tab` becomes an `<a href>` inside a `<nav>` landmark (with `aria-current`
|
|
20966
|
+
* on the `active` tab) rather than a `role="tab"` button over a `pds-tabpanel`.
|
|
20967
|
+
* Give every `pds-tab` an `href` and omit `pds-tabpanel`s.
|
|
20968
|
+
* @defaultValue false
|
|
20969
|
+
*/
|
|
20970
|
+
this.nav = false;
|
|
20800
20971
|
}
|
|
20801
20972
|
tabClickHandler(event) {
|
|
20802
20973
|
if (this.componentId === event.detail[1]) {
|
|
@@ -20805,6 +20976,10 @@ class PdsTabs {
|
|
|
20805
20976
|
}
|
|
20806
20977
|
}
|
|
20807
20978
|
handleKeyDown(ev) {
|
|
20979
|
+
// Navigation mode uses real links: Tab moves focus, Enter follows the href.
|
|
20980
|
+
// The roving/arrow model is a panel-mode (role=tab) concern only.
|
|
20981
|
+
if (this.isNav)
|
|
20982
|
+
return;
|
|
20808
20983
|
const keySet = ["ArrowLeft", "ArrowRight", "Home", "End"];
|
|
20809
20984
|
// Only handle keyboard navigation if the event originated from a tab button
|
|
20810
20985
|
// that belongs to THIS tabs component
|
|
@@ -20817,6 +20992,32 @@ class PdsTabs {
|
|
|
20817
20992
|
this.moveActiveTab(ev.key);
|
|
20818
20993
|
}
|
|
20819
20994
|
}
|
|
20995
|
+
// Navigation mode is an explicit, single source of truth: `nav` drives both the
|
|
20996
|
+
// container (<nav> of links vs role=tablist of buttons) and every child tab (via
|
|
20997
|
+
// `navMode`), so the tabs present when the strip initializes can't mix the two.
|
|
20998
|
+
// (Child discovery is load-time only, like `variant`/`id`; tabs added after load
|
|
20999
|
+
// aren't managed.)
|
|
21000
|
+
get isNav() {
|
|
21001
|
+
return !!this.nav;
|
|
21002
|
+
}
|
|
21003
|
+
// `nav` and per-tab `href` should agree. Warn on the two authoring mistakes
|
|
21004
|
+
// rather than silently rendering a link with no destination, or ignoring an href.
|
|
21005
|
+
warnOnNavConfig() {
|
|
21006
|
+
var _a;
|
|
21007
|
+
if (!((_a = this.tabs) === null || _a === void 0 ? void 0 : _a.length))
|
|
21008
|
+
return;
|
|
21009
|
+
// An empty `href=""` is not a usable destination, so it counts as missing.
|
|
21010
|
+
const withHref = this.tabs.filter((tab) => {
|
|
21011
|
+
const href = tab.getAttribute('href');
|
|
21012
|
+
return href != null && href !== '';
|
|
21013
|
+
}).length;
|
|
21014
|
+
if (this.nav && withHref < this.tabs.length) {
|
|
21015
|
+
console.warn('pds-tabs: `nav` is set, so every pds-tab needs an `href`.');
|
|
21016
|
+
}
|
|
21017
|
+
else if (!this.nav && withHref > 0) {
|
|
21018
|
+
console.warn('pds-tabs: a pds-tab has an `href` but `nav` is not set — add `nav` to pds-tabs for navigation mode; the href is ignored in panel mode.');
|
|
21019
|
+
}
|
|
21020
|
+
}
|
|
20820
21021
|
moveActiveTab(key) {
|
|
20821
21022
|
const firstTabNumber = 0;
|
|
20822
21023
|
const lastTabNumber = this.tabs.length - 1;
|
|
@@ -20855,13 +21056,25 @@ class PdsTabs {
|
|
|
20855
21056
|
child['index'] = index;
|
|
20856
21057
|
}
|
|
20857
21058
|
passPropsToChildren() {
|
|
21059
|
+
var _a;
|
|
21060
|
+
// Panel mode needs a selected tab so the tablist stays keyboard-reachable
|
|
21061
|
+
// (an all-unselected tablist has every button at tabindex="-1"). Default to
|
|
21062
|
+
// the first ENABLED tab when the consumer omits `activeTabName` — a disabled
|
|
21063
|
+
// tab is itself tabindex="-1", so selecting it would recreate the trap. Nav
|
|
21064
|
+
// mode has no roving/selection, so it's left unset there.
|
|
21065
|
+
if (!this.nav && this.activeTabName == null && this.tabs.length) {
|
|
21066
|
+
const firstEnabled = (_a = this.tabs.find((tab) => !tab.disabled)) !== null && _a !== void 0 ? _a : this.tabs[0];
|
|
21067
|
+
this.activeTabName = firstEnabled.name;
|
|
21068
|
+
}
|
|
20858
21069
|
this.tabs.forEach((child, index) => {
|
|
20859
21070
|
if (this.activeTabName === child.name)
|
|
20860
21071
|
this.activeTabIndex = index;
|
|
20861
21072
|
this.propGeneration(child, index);
|
|
21073
|
+
child.navMode = this.nav;
|
|
20862
21074
|
});
|
|
20863
21075
|
this.tabPanels.forEach((child) => {
|
|
20864
21076
|
this.propGeneration(child);
|
|
21077
|
+
child.stretch = this.stretch;
|
|
20865
21078
|
});
|
|
20866
21079
|
}
|
|
20867
21080
|
classNames() {
|
|
@@ -20870,17 +21083,27 @@ class PdsTabs {
|
|
|
20870
21083
|
const variantClassName = `pds-tabs--${this.variant}`;
|
|
20871
21084
|
className += ' ' + variantClassName;
|
|
20872
21085
|
}
|
|
21086
|
+
if (this.divider) {
|
|
21087
|
+
className += ' pds-tabs--divider';
|
|
21088
|
+
}
|
|
21089
|
+
if (this.stretch) {
|
|
21090
|
+
className += ' pds-tabs--stretch';
|
|
21091
|
+
}
|
|
20873
21092
|
return className;
|
|
20874
21093
|
}
|
|
20875
21094
|
;
|
|
20876
21095
|
componentWillLoad() {
|
|
20877
21096
|
this.findAllChildren();
|
|
21097
|
+
this.warnOnNavConfig();
|
|
20878
21098
|
}
|
|
20879
21099
|
componentWillRender() {
|
|
20880
21100
|
this.passPropsToChildren();
|
|
20881
21101
|
}
|
|
20882
21102
|
render() {
|
|
20883
|
-
|
|
21103
|
+
// Navigation mode: a <nav> landmark of links (aria-current marks the current
|
|
21104
|
+
// page). Panel mode: the ARIA tablist of role=tab buttons over tabpanels.
|
|
21105
|
+
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" })));
|
|
21106
|
+
return (hAsync(Host, { key: '97bb6d788bd7bdf393b46eaecea612d9b0c9dee4', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, hAsync("slot", { key: '252855bfa496bc3e04fbe6dc0bcb7597c7360407', name: "tabpanels" })));
|
|
20884
21107
|
}
|
|
20885
21108
|
get el() { return getElement(this); }
|
|
20886
21109
|
static get style() { return pdsTabsCss(); }
|
|
@@ -20891,6 +21114,9 @@ class PdsTabs {
|
|
|
20891
21114
|
"tablistLabel": [1, "tablist-label"],
|
|
20892
21115
|
"componentId": [1, "component-id"],
|
|
20893
21116
|
"variant": [1],
|
|
21117
|
+
"divider": [4],
|
|
21118
|
+
"stretch": [4],
|
|
21119
|
+
"nav": [4],
|
|
20894
21120
|
"activeTabName": [1025, "active-tab-name"],
|
|
20895
21121
|
"activeTabIndex": [1026, "active-tab-index"]
|
|
20896
21122
|
},
|
|
@@ -21003,7 +21229,7 @@ class PdsText {
|
|
|
21003
21229
|
? `pds-text--decoration-${this.decoration}`
|
|
21004
21230
|
: ''}
|
|
21005
21231
|
`;
|
|
21006
|
-
return (hAsync(Tag, { key: '
|
|
21232
|
+
return (hAsync(Tag, { key: '9ae3d5a57202ca1308c69b76645168fc8e18953b', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content", tabIndex: this.truncate ? 0 : undefined }, hAsync("slot", { key: 'e6c95b8240690a9c83927e206096bbd7615dd4d2' })));
|
|
21007
21233
|
}
|
|
21008
21234
|
get el() { return getElement(this); }
|
|
21009
21235
|
static get watchers() { return {
|
|
@@ -21344,10 +21570,10 @@ class PdsTextarea {
|
|
|
21344
21570
|
}
|
|
21345
21571
|
render() {
|
|
21346
21572
|
const value = this.getValue();
|
|
21347
|
-
return (hAsync(Host, { key: '
|
|
21348
|
-
hAsync("div", { key: '
|
|
21349
|
-
hAsync("p", { key: '
|
|
21350
|
-
hAsync("p", { key: '
|
|
21573
|
+
return (hAsync(Host, { key: 'd13869d989752c76c80a46ebb0291df2c0546cc2', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '19454f642896485dc22bc5dac8b6ed3b4ae5627a', class: "pds-textarea" }, this.label &&
|
|
21574
|
+
hAsync("div", { key: 'def9e117ba3667a542e8cec32c2eabfa701c3305', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '893a1db325ece460c627e72b765289098823e49e', htmlFor: this.componentId }, hAsync("span", { key: 'd047f17441aa81800057d7403af15f6e38c53f6c', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '7d0f2fab56fee9b9d9e0facabc7e607cb6bee23b', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: '261e6031c61832acde2d595248ccdc8bd5c84768', 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 &&
|
|
21575
|
+
hAsync("p", { key: 'de40f9d13bda3d9a224349b7f4ca38194e7adbb5', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
|
|
21576
|
+
hAsync("p", { key: '1306917ce521c3ad0d303d255f9e7aefd0e65de7', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '1c9e22b9b4bf84f671797bbfb9080bdbdb7619a7', icon: danger, size: "small" }), this.errorMessage))));
|
|
21351
21577
|
}
|
|
21352
21578
|
static get formAssociated() { return true; }
|
|
21353
21579
|
get el() { return getElement(this); }
|
|
@@ -21521,13 +21747,13 @@ class PdsToast {
|
|
|
21521
21747
|
return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
|
|
21522
21748
|
}
|
|
21523
21749
|
render() {
|
|
21524
|
-
return (hAsync(Host, { key: '
|
|
21750
|
+
return (hAsync(Host, { key: '87c9b15656a2765eb9e722c85dba5c5edbe07c42', hidden: !this.isVisible }, hAsync("div", { key: 'bd8b26ef0c33b96603313bce74505953d8fe7410', class: {
|
|
21525
21751
|
'pds-toast': true,
|
|
21526
21752
|
[`pds-toast--${this.type}`]: this.type !== 'default',
|
|
21527
21753
|
'pds-toast--animating-out': this.isAnimatingOut
|
|
21528
|
-
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '
|
|
21754
|
+
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '5f7fd6b70fe130d8b0915da07640bec01b3b2bcb', class: "pds-toast__message" }, hAsync("slot", { key: '4aa0cf737b420ae51297126b423b44d2a8610226' })), this.dismissible && (hAsync("button", { key: 'a8b8e5e9ba956b2d9cca284d114afa37b80570cf', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
|
|
21529
21755
|
this.dismiss();
|
|
21530
|
-
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '
|
|
21756
|
+
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: 'dac8f2099b2ab8a68d208aac288d48019df6d7e7', name: "remove" }))))));
|
|
21531
21757
|
}
|
|
21532
21758
|
get el() { return getElement(this); }
|
|
21533
21759
|
static get watchers() { return {
|
|
@@ -21871,9 +22097,9 @@ class PdsTooltip {
|
|
|
21871
22097
|
}
|
|
21872
22098
|
render() {
|
|
21873
22099
|
const hostId = this.componentId || undefined;
|
|
21874
|
-
return (hAsync(Host, { key: '
|
|
22100
|
+
return (hAsync(Host, { key: '6af9c969e0dae4f3969cba2153797a1bccfc6d21', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '97c48a8b8d626ee913412bd55aefb17f36fad401', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
|
|
21875
22101
|
/* focusin/out bubble; ensure keyboard users see tooltips */
|
|
21876
|
-
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '
|
|
22102
|
+
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '37715fc0bf525695a62af1944ff853228080302a' })), hAsync("div", { key: 'a9a925b1de9ea45d2f6b9f39ec5e386537313217', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: '1486b30af21dc69758d7dc9890cbaf227bafffc7', name: "content" }))));
|
|
21877
22103
|
}
|
|
21878
22104
|
get el() { return getElement(this); }
|
|
21879
22105
|
static get watchers() { return {
|