@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.js
CHANGED
|
@@ -3156,6 +3156,9 @@ var setContentReference = (elm) => {
|
|
|
3156
3156
|
contentRefElm["s-cn"] = true;
|
|
3157
3157
|
insertBefore(elm, contentRefElm, elm.firstChild);
|
|
3158
3158
|
};
|
|
3159
|
+
|
|
3160
|
+
// src/runtime/fragment.ts
|
|
3161
|
+
var Fragment = (_, children) => children;
|
|
3159
3162
|
var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
|
|
3160
3163
|
if (listeners && win.document) {
|
|
3161
3164
|
listeners.map(([flags, name, method]) => {
|
|
@@ -5549,7 +5552,7 @@ class MockPdsModal {
|
|
|
5549
5552
|
}; }
|
|
5550
5553
|
}
|
|
5551
5554
|
|
|
5552
|
-
/* pds-icons
|
|
5555
|
+
/* pds-icons v10.2.0, ES Modules */
|
|
5553
5556
|
|
|
5554
5557
|
const addCircle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m11-5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1'/></svg>";
|
|
5555
5558
|
const caretDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414'/></svg>";
|
|
@@ -5711,12 +5714,13 @@ class PdsAlert {
|
|
|
5711
5714
|
}; }
|
|
5712
5715
|
}
|
|
5713
5716
|
|
|
5714
|
-
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}`;
|
|
5717
|
+
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}`;
|
|
5715
5718
|
|
|
5716
5719
|
/**
|
|
5717
5720
|
* @part asset-wrapper
|
|
5718
5721
|
* @part button
|
|
5719
5722
|
* @part image - The main image element that represents the avatar component.
|
|
5723
|
+
* @part initials - The text element that renders the avatar's initials, for restyling their color.
|
|
5720
5724
|
*/
|
|
5721
5725
|
class PdsAvatar {
|
|
5722
5726
|
constructor(hostRef) {
|
|
@@ -5751,6 +5755,21 @@ class PdsAvatar {
|
|
|
5751
5755
|
* @defaultValue lg
|
|
5752
5756
|
*/
|
|
5753
5757
|
this.size = 'lg';
|
|
5758
|
+
/**
|
|
5759
|
+
* Displays a presence status indicator (a dot) on the avatar: `online`
|
|
5760
|
+
* (success), `away` (warning), or `offline` (neutral). For a simple
|
|
5761
|
+
* active/inactive presence, map active to `online` and inactive to `offline`.
|
|
5762
|
+
* Takes precedence over `badge` — they share the same corner, so the badge is
|
|
5763
|
+
* hidden while `status` is set.
|
|
5764
|
+
* @defaultValue null
|
|
5765
|
+
*/
|
|
5766
|
+
this.status = null;
|
|
5767
|
+
/**
|
|
5768
|
+
* Determines whether a ring is shown around the avatar in the `status` color.
|
|
5769
|
+
* Has no effect unless `status` is set.
|
|
5770
|
+
* @defaultValue false
|
|
5771
|
+
*/
|
|
5772
|
+
this.statusRing = false;
|
|
5754
5773
|
/**
|
|
5755
5774
|
* Determines the variant of avatar. Changes appearance accordingly.
|
|
5756
5775
|
* @defaultValue customer
|
|
@@ -5767,7 +5786,7 @@ class PdsAvatar {
|
|
|
5767
5786
|
height: this.avatarSize(),
|
|
5768
5787
|
width: this.avatarSize()
|
|
5769
5788
|
};
|
|
5770
|
-
return (hAsync("div", { style: style, part: "asset-wrapper" }, this.renderIconOrImage(), this.renderBadge()));
|
|
5789
|
+
return (hAsync("div", { style: style, part: "asset-wrapper" }, this.renderIconOrImage(), this.renderBadge(), this.renderStatus()));
|
|
5771
5790
|
};
|
|
5772
5791
|
this.renderAvatar = () => {
|
|
5773
5792
|
return (this.dropdown
|
|
@@ -5776,17 +5795,32 @@ class PdsAvatar {
|
|
|
5776
5795
|
:
|
|
5777
5796
|
this.renderAssetWrapper());
|
|
5778
5797
|
};
|
|
5779
|
-
this.renderBadge = () => (
|
|
5798
|
+
this.renderBadge = () => (
|
|
5799
|
+
// `badge` and `status` share the bottom-end corner; `status` wins so the
|
|
5800
|
+
// presence dot is never painted over the badge.
|
|
5801
|
+
this.badge && !this.status
|
|
5780
5802
|
// Percentage is average size of icon in relation to total avatar size
|
|
5781
5803
|
// of all preset sizes found in Figma.
|
|
5782
5804
|
// Used to allow icons to scale to container size
|
|
5783
5805
|
&& hAsync("pds-icon", { color: "var(--pine-color-purple-600)", class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%" }));
|
|
5806
|
+
this.renderStatus = () => {
|
|
5807
|
+
var _a;
|
|
5808
|
+
if (!this.status)
|
|
5809
|
+
return null;
|
|
5810
|
+
// Inside the dropdown trigger, the button's aria-label owns the accessible
|
|
5811
|
+
// name, so the dot's own label is never announced. Mark it decorative there
|
|
5812
|
+
// and let consumers convey presence via `triggerLabel`.
|
|
5813
|
+
if (this.dropdown) {
|
|
5814
|
+
return hAsync("span", { class: "pds-avatar__status", part: "status", "aria-hidden": "true" });
|
|
5815
|
+
}
|
|
5816
|
+
return (hAsync("span", { class: "pds-avatar__status", part: "status", role: "img", "aria-label": (_a = this.statusLabel) !== null && _a !== void 0 ? _a : `${this.status} status` }));
|
|
5817
|
+
};
|
|
5784
5818
|
this.renderIconOrImage = () => {
|
|
5785
5819
|
if (this.image) {
|
|
5786
5820
|
return hAsync("img", { alt: this.alt, src: this.image });
|
|
5787
5821
|
}
|
|
5788
5822
|
if (this.initials) {
|
|
5789
|
-
return (hAsync("svg", { class: "pds-avatar__initials", viewBox: "0 0 32 32" }, hAsync("text", { x: "16", y: "20" }, this.initials)));
|
|
5823
|
+
return (hAsync("svg", { class: "pds-avatar__initials", part: "initials", viewBox: "0 0 32 32" }, hAsync("text", { x: "16", y: "20" }, this.initials)));
|
|
5790
5824
|
}
|
|
5791
5825
|
// Percentage is average size of icon in relation to total avatar size
|
|
5792
5826
|
// of all preset sizes found in Figma.
|
|
@@ -5797,7 +5831,8 @@ class PdsAvatar {
|
|
|
5797
5831
|
'pds-avatar': true,
|
|
5798
5832
|
[`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector
|
|
5799
5833
|
[`pds-avatar--has-initials`]: this.initials !== '' && this.initials !== null,
|
|
5800
|
-
[`pds-avatar--${this.variant}`]: this.variant === 'admin'
|
|
5834
|
+
[`pds-avatar--${this.variant}`]: this.variant === 'admin',
|
|
5835
|
+
[`pds-avatar--status-ring`]: !!this.status && this.statusRing,
|
|
5801
5836
|
});
|
|
5802
5837
|
}
|
|
5803
5838
|
avatarSize() {
|
|
@@ -5816,7 +5851,7 @@ class PdsAvatar {
|
|
|
5816
5851
|
}
|
|
5817
5852
|
}
|
|
5818
5853
|
render() {
|
|
5819
|
-
return (hAsync(Host, { key: '
|
|
5854
|
+
return (hAsync(Host, { key: 'fe2bd31070db6840c79d7054ac50802e8f14f572', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
|
|
5820
5855
|
}
|
|
5821
5856
|
static get style() { return pdsAvatarCss(); }
|
|
5822
5857
|
static get cmpMeta() { return {
|
|
@@ -5830,12 +5865,15 @@ class PdsAvatar {
|
|
|
5830
5865
|
"image": [1],
|
|
5831
5866
|
"initials": [1],
|
|
5832
5867
|
"size": [513],
|
|
5868
|
+
"status": [513],
|
|
5869
|
+
"statusLabel": [1, "status-label"],
|
|
5870
|
+
"statusRing": [4, "status-ring"],
|
|
5833
5871
|
"variant": [513],
|
|
5834
5872
|
"triggerLabel": [1, "trigger-label"]
|
|
5835
5873
|
},
|
|
5836
5874
|
"$listeners$": undefined,
|
|
5837
5875
|
"$lazyBundleId$": "-",
|
|
5838
|
-
"$attrsToReflect$": [["size", "size"], ["variant", "variant"]]
|
|
5876
|
+
"$attrsToReflect$": [["size", "size"], ["status", "status"], ["variant", "variant"]]
|
|
5839
5877
|
}; }
|
|
5840
5878
|
}
|
|
5841
5879
|
|
|
@@ -6180,7 +6218,7 @@ class PdsBox {
|
|
|
6180
6218
|
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)}`;
|
|
6181
6219
|
|
|
6182
6220
|
/**
|
|
6183
|
-
* @part button - Exposes the button element for styling.
|
|
6221
|
+
* @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).
|
|
6184
6222
|
* @part button-content - Exposes the button content for styling.
|
|
6185
6223
|
* @part button-text - Exposes the button text for styling.
|
|
6186
6224
|
* @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.
|
|
@@ -6417,14 +6455,18 @@ const messageId = (id, messageType) => {
|
|
|
6417
6455
|
};
|
|
6418
6456
|
/**
|
|
6419
6457
|
* Assign aria-description id to relate messages with form element
|
|
6458
|
+
*
|
|
6459
|
+
* Returns the error message id when invalid, otherwise the helper message id.
|
|
6460
|
+
* Pass only messages the component renders — a described id must exist in the DOM.
|
|
6420
6461
|
*/
|
|
6421
|
-
const assignDescription = (id, invalid, helperMessage) => {
|
|
6422
|
-
|
|
6423
|
-
|
|
6424
|
-
|
|
6425
|
-
|
|
6426
|
-
|
|
6427
|
-
|
|
6462
|
+
const assignDescription = (id, invalid, helperMessage, errorMessage) => {
|
|
6463
|
+
const hasErrorMessage = Boolean(errorMessage);
|
|
6464
|
+
const hasHelperMessage = Boolean(helperMessage);
|
|
6465
|
+
if (invalid && hasErrorMessage)
|
|
6466
|
+
return messageId(id, 'error');
|
|
6467
|
+
if (hasHelperMessage)
|
|
6468
|
+
return messageId(id, 'helper');
|
|
6469
|
+
return undefined;
|
|
6428
6470
|
};
|
|
6429
6471
|
/**
|
|
6430
6472
|
* Updates the `invalid` prop of a form element based on it's values validity
|
|
@@ -6639,9 +6681,9 @@ class PdsCheckbox {
|
|
|
6639
6681
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
6640
6682
|
}
|
|
6641
6683
|
render() {
|
|
6642
|
-
return (hAsync(Host, { key: 'd4a447aba6ffa638b0bf3ed7a5cfd4580168da79', class: this.classNames() }, hAsync("label", { key: '75fcd32809f736f8e4f6af2021f86d2c5b7bc110', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '
|
|
6643
|
-
hAsync("div", { key: '
|
|
6644
|
-
hAsync("div", { key: '
|
|
6684
|
+
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 &&
|
|
6685
|
+
hAsync("div", { key: '8928bea1a022825777e40635ae91e7bdedaaea67', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
6686
|
+
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)));
|
|
6645
6687
|
}
|
|
6646
6688
|
static get formAssociated() { return true; }
|
|
6647
6689
|
get el() { return getElement(this); }
|
|
@@ -9844,7 +9886,7 @@ function createDOMPurify() {
|
|
|
9844
9886
|
}
|
|
9845
9887
|
var purify = createDOMPurify();
|
|
9846
9888
|
|
|
9847
|
-
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)}`;
|
|
9889
|
+
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)}`;
|
|
9848
9890
|
|
|
9849
9891
|
/**
|
|
9850
9892
|
* @slot option - Option elements for the combobox dropdown
|
|
@@ -11296,6 +11338,19 @@ class PdsCombobox {
|
|
|
11296
11338
|
,
|
|
11297
11339
|
large: chipProps.large, icon: chipProps.icon, dot: chipProps.dot, class: "pds-combobox__option-chip" }, this.getOptionLabel(option)));
|
|
11298
11340
|
}
|
|
11341
|
+
// Mirrors pds-multiselect and pds-select: an error message on its own puts the
|
|
11342
|
+
// field in an invalid state, so assistive tech agrees with the visual treatment.
|
|
11343
|
+
isInvalid() {
|
|
11344
|
+
return Boolean(this.invalid) || Boolean(this.errorMessage);
|
|
11345
|
+
}
|
|
11346
|
+
renderMessages() {
|
|
11347
|
+
const hasErrorMessage = Boolean(this.errorMessage);
|
|
11348
|
+
const showHelperMessage = Boolean(this.helperMessage) && !hasErrorMessage;
|
|
11349
|
+
return [
|
|
11350
|
+
showHelperMessage && (hAsync("p", { class: "pds-combobox__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)),
|
|
11351
|
+
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)),
|
|
11352
|
+
];
|
|
11353
|
+
}
|
|
11299
11354
|
render() {
|
|
11300
11355
|
const triggerClass = [
|
|
11301
11356
|
'pds-combobox__button-trigger',
|
|
@@ -11304,10 +11359,13 @@ class PdsCombobox {
|
|
|
11304
11359
|
]
|
|
11305
11360
|
.filter(Boolean)
|
|
11306
11361
|
.join(' ');
|
|
11307
|
-
return (hAsync(Host, { key: '
|
|
11362
|
+
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 => {
|
|
11308
11363
|
this.inputEl = el;
|
|
11309
11364
|
this.triggerEl = el;
|
|
11310
|
-
}, class:
|
|
11365
|
+
}, class: {
|
|
11366
|
+
'pds-combobox__input': true,
|
|
11367
|
+
'pds-combobox__input--invalid': this.isInvalid(),
|
|
11368
|
+
}, 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())));
|
|
11311
11369
|
}
|
|
11312
11370
|
static get formAssociated() { return true; }
|
|
11313
11371
|
get el() { return getElement(this); }
|
|
@@ -11338,10 +11396,13 @@ class PdsCombobox {
|
|
|
11338
11396
|
"customOptionLayouts": [4, "custom-option-layouts"],
|
|
11339
11397
|
"customTriggerContent": [4, "custom-trigger-content"],
|
|
11340
11398
|
"disabled": [4],
|
|
11399
|
+
"errorMessage": [1, "error-message"],
|
|
11341
11400
|
"dropdownPlacement": [1, "dropdown-placement"],
|
|
11342
11401
|
"dropdownWidth": [1, "dropdown-width"],
|
|
11343
11402
|
"dropdownMount": [1, "dropdown-mount"],
|
|
11403
|
+
"helperMessage": [1, "helper-message"],
|
|
11344
11404
|
"hideLabel": [4, "hide-label"],
|
|
11405
|
+
"invalid": [4],
|
|
11345
11406
|
"label": [1],
|
|
11346
11407
|
"maxHeight": [1, "max-height"],
|
|
11347
11408
|
"mode": [1],
|
|
@@ -13672,7 +13733,7 @@ class PdsInput {
|
|
|
13672
13733
|
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: {
|
|
13673
13734
|
'pds-input__label-wrapper': true,
|
|
13674
13735
|
'visually-hidden': this.hideLabel,
|
|
13675
|
-
} }, 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: '
|
|
13736
|
+
} }, 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)))));
|
|
13676
13737
|
}
|
|
13677
13738
|
static get formAssociated() { return true; }
|
|
13678
13739
|
get el() { return getElement(this); }
|
|
@@ -13726,7 +13787,7 @@ class PdsInput {
|
|
|
13726
13787
|
}; }
|
|
13727
13788
|
}
|
|
13728
13789
|
|
|
13729
|
-
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}`;
|
|
13790
|
+
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}`;
|
|
13730
13791
|
|
|
13731
13792
|
/**
|
|
13732
13793
|
* @part link - Link element styles.
|
|
@@ -13735,6 +13796,13 @@ const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-sta
|
|
|
13735
13796
|
class PdsLink {
|
|
13736
13797
|
constructor(hostRef) {
|
|
13737
13798
|
registerInstance(this, hostRef);
|
|
13799
|
+
/**
|
|
13800
|
+
* Marks the link as the current/active navigation item — for tab strips and
|
|
13801
|
+
* nav rails built from links. Applies the active treatment (persistent
|
|
13802
|
+
* underline + strong text) and sets `aria-current="page"`.
|
|
13803
|
+
* @defaultValue false
|
|
13804
|
+
*/
|
|
13805
|
+
this.active = false;
|
|
13738
13806
|
/**
|
|
13739
13807
|
* Determines whether the link should open in a new tab.
|
|
13740
13808
|
* @defaultValue false
|
|
@@ -13777,14 +13845,15 @@ class PdsLink {
|
|
|
13777
13845
|
const targetValue = this.target || (this.external ? '_blank' : undefined);
|
|
13778
13846
|
const showExternalIcon = this.external;
|
|
13779
13847
|
const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
|
|
13780
|
-
return (hAsync("a", { key: '
|
|
13781
|
-
hAsync("pds-icon", { key: '
|
|
13848
|
+
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 &&
|
|
13849
|
+
hAsync("pds-icon", { key: '678414f7d20fd20b6931cc401163180c3ad0094c', icon: launch, size: this.fontSize })));
|
|
13782
13850
|
}
|
|
13783
13851
|
static get style() { return pdsLinkCss(); }
|
|
13784
13852
|
static get cmpMeta() { return {
|
|
13785
13853
|
"$flags$": 265,
|
|
13786
13854
|
"$tagName$": "pds-link",
|
|
13787
13855
|
"$members$": {
|
|
13856
|
+
"active": [516],
|
|
13788
13857
|
"color": [1],
|
|
13789
13858
|
"download": [1],
|
|
13790
13859
|
"componentId": [1, "component-id"],
|
|
@@ -13804,7 +13873,7 @@ class PdsLink {
|
|
|
13804
13873
|
},
|
|
13805
13874
|
"$listeners$": undefined,
|
|
13806
13875
|
"$lazyBundleId$": "-",
|
|
13807
|
-
"$attrsToReflect$": []
|
|
13876
|
+
"$attrsToReflect$": [["active", "active"]]
|
|
13808
13877
|
}; }
|
|
13809
13878
|
}
|
|
13810
13879
|
|
|
@@ -13904,6 +13973,16 @@ class PdsModal {
|
|
|
13904
13973
|
* @default true
|
|
13905
13974
|
*/
|
|
13906
13975
|
this.scrollable = true;
|
|
13976
|
+
/**
|
|
13977
|
+
* Whether the modal opens outside the browser top layer as a non-modal dialog.
|
|
13978
|
+
* When `true` it opens with `dialog.show()` instead of `dialog.showModal()`, so
|
|
13979
|
+
* overlays rendered elsewhere in the DOM (file pickers, editor menus) can display
|
|
13980
|
+
* above it via `z-index`. The page is not made inert and focus is not trapped in
|
|
13981
|
+
* this mode. Read when the modal opens; changing it while the modal is open is
|
|
13982
|
+
* not supported.
|
|
13983
|
+
* @default false
|
|
13984
|
+
*/
|
|
13985
|
+
this.disableTopLayer = false;
|
|
13907
13986
|
/**
|
|
13908
13987
|
* Stores the list of focusable elements in the modal
|
|
13909
13988
|
*/
|
|
@@ -13925,6 +14004,13 @@ class PdsModal {
|
|
|
13925
14004
|
return;
|
|
13926
14005
|
// Handle Escape key to close the modal
|
|
13927
14006
|
if (e.key === 'Escape') {
|
|
14007
|
+
// In non-top-layer mode, focus can move into an overlay stacked above the
|
|
14008
|
+
// modal (the reason disableTopLayer exists). If that overlay owns focus,
|
|
14009
|
+
// leave Escape to it rather than dismissing this modal out from under it.
|
|
14010
|
+
const active = document.activeElement;
|
|
14011
|
+
if (this.disableTopLayer && active && active !== document.body && !this.el.contains(active)) {
|
|
14012
|
+
return;
|
|
14013
|
+
}
|
|
13928
14014
|
// Always prevent native dialog close behavior
|
|
13929
14015
|
e.preventDefault();
|
|
13930
14016
|
// Only close if backdropDismiss is enabled and this is the innermost modal
|
|
@@ -13935,6 +14021,11 @@ class PdsModal {
|
|
|
13935
14021
|
}
|
|
13936
14022
|
// Handle Tab key for focus trapping
|
|
13937
14023
|
if (e.key === 'Tab') {
|
|
14024
|
+
// In non-top-layer mode the modal is deliberately not focus-isolated: focus
|
|
14025
|
+
// must be able to leave it into overlays stacked above (the whole point of
|
|
14026
|
+
// disableTopLayer), so do not trap Tab here.
|
|
14027
|
+
if (this.disableTopLayer)
|
|
14028
|
+
return;
|
|
13938
14029
|
// If there are no focusable elements, do nothing
|
|
13939
14030
|
if (this.focusableElements.length === 0)
|
|
13940
14031
|
return;
|
|
@@ -14052,8 +14143,16 @@ class PdsModal {
|
|
|
14052
14143
|
try {
|
|
14053
14144
|
// Store the currently focused element to restore focus when modal closes
|
|
14054
14145
|
this.previousActiveElement = document.activeElement;
|
|
14055
|
-
//
|
|
14056
|
-
|
|
14146
|
+
// showModal() promotes the dialog to the browser top layer (and makes the
|
|
14147
|
+
// rest of the page inert), which prevents any overlay outside the dialog
|
|
14148
|
+
// from ever painting above it. show() opens a non-modal dialog that stays
|
|
14149
|
+
// in the normal stacking context so those overlays can stack above it.
|
|
14150
|
+
if (this.disableTopLayer) {
|
|
14151
|
+
this.modalRef.show();
|
|
14152
|
+
}
|
|
14153
|
+
else {
|
|
14154
|
+
this.modalRef.showModal();
|
|
14155
|
+
}
|
|
14057
14156
|
this.open = true;
|
|
14058
14157
|
// Update focusable elements and set initial focus
|
|
14059
14158
|
// Using a longer timeout to ensure all components are fully rendered
|
|
@@ -14115,14 +14214,14 @@ class PdsModal {
|
|
|
14115
14214
|
return thisZIndex === maxZIndex;
|
|
14116
14215
|
}
|
|
14117
14216
|
render() {
|
|
14118
|
-
return (hAsync("dialog", { key: '
|
|
14217
|
+
return (hAsync("dialog", { key: 'd345ea0a585213fd7879a2fe27071705fbdba79b', class: {
|
|
14119
14218
|
'pds-modal__backdrop': true,
|
|
14120
14219
|
'open': this.open
|
|
14121
|
-
}, "aria-modal":
|
|
14220
|
+
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, hAsync("div", { key: '34c9a222d58ffd9736a36ab6848679186167e878', class: {
|
|
14122
14221
|
'pds-modal': true,
|
|
14123
14222
|
[`pds-modal--${this.size}`]: true,
|
|
14124
14223
|
'pds-modal--scrollable': this.scrollable
|
|
14125
|
-
}, part: "modal" }, hAsync("slot", { key: '
|
|
14224
|
+
}, part: "modal" }, hAsync("slot", { key: '4eef9c3001b6a7c972fa8e49fa3f0b140c7fe7ce' }))));
|
|
14126
14225
|
}
|
|
14127
14226
|
get el() { return getElement(this); }
|
|
14128
14227
|
static get watchers() { return {
|
|
@@ -14140,6 +14239,7 @@ class PdsModal {
|
|
|
14140
14239
|
"open": [1028],
|
|
14141
14240
|
"size": [1],
|
|
14142
14241
|
"scrollable": [4],
|
|
14242
|
+
"disableTopLayer": [4, "disable-top-layer"],
|
|
14143
14243
|
"focusableElementsArray": [32],
|
|
14144
14244
|
"showModal": [64],
|
|
14145
14245
|
"hideModal": [64]
|
|
@@ -14447,7 +14547,7 @@ function pluralize(el, count, forms, vars) {
|
|
|
14447
14547
|
return formatMessage(template, Object.assign({ count }, vars));
|
|
14448
14548
|
}
|
|
14449
14549
|
|
|
14450
|
-
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}`;
|
|
14550
|
+
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}`;
|
|
14451
14551
|
|
|
14452
14552
|
/**
|
|
14453
14553
|
* @slot (default) - Static option elements for the multiselect
|
|
@@ -15482,16 +15582,16 @@ class PdsMultiselect {
|
|
|
15482
15582
|
'pds-multiselect__trigger--invalid': this.invalid || !!this.errorMessage,
|
|
15483
15583
|
'pds-multiselect__trigger--has-value': hasSelections,
|
|
15484
15584
|
'pds-multiselect__trigger--pill-inline': true,
|
|
15485
|
-
}, 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.
|
|
15585
|
+
}, 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: {
|
|
15486
15586
|
'pds-multiselect__trigger': true,
|
|
15487
15587
|
'pds-multiselect__trigger--open': this.isOpen,
|
|
15488
15588
|
'pds-multiselect__trigger--disabled': this.disabled,
|
|
15489
15589
|
'pds-multiselect__trigger--invalid': this.invalid || !!this.errorMessage,
|
|
15490
15590
|
'pds-multiselect__trigger--has-value': hasSelections,
|
|
15491
|
-
}, 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.
|
|
15591
|
+
}, 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: {
|
|
15492
15592
|
'pds-multiselect__trigger-text': true,
|
|
15493
15593
|
'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
|
|
15494
|
-
} }, this.getTriggerText()), hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '
|
|
15594
|
+
} }, 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' })))));
|
|
15495
15595
|
}
|
|
15496
15596
|
static get formAssociated() { return true; }
|
|
15497
15597
|
get el() { return getElement(this); }
|
|
@@ -16237,7 +16337,7 @@ class PdsProperty {
|
|
|
16237
16337
|
|
|
16238
16338
|
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)}`;
|
|
16239
16339
|
|
|
16240
|
-
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)}`;
|
|
16340
|
+
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)}`;
|
|
16241
16341
|
|
|
16242
16342
|
/**
|
|
16243
16343
|
* @slot image - Custom image content to display instead of the default radio input
|
|
@@ -16320,11 +16420,11 @@ class PdsRadio {
|
|
|
16320
16420
|
}
|
|
16321
16421
|
render() {
|
|
16322
16422
|
const renderLabelAndMessages = () => [
|
|
16323
|
-
hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: '
|
|
16423
|
+
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)),
|
|
16324
16424
|
this.helperMessage && (hAsync("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
|
|
16325
|
-
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: '
|
|
16425
|
+
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))
|
|
16326
16426
|
];
|
|
16327
|
-
return (hAsync(Host, { key: '
|
|
16427
|
+
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())));
|
|
16328
16428
|
}
|
|
16329
16429
|
get el() { return getElement(this); }
|
|
16330
16430
|
static get style() { return labelCss$3() + pdsRadioCss(); }
|
|
@@ -16775,6 +16875,11 @@ class PdsSelect {
|
|
|
16775
16875
|
return null;
|
|
16776
16876
|
return (hAsync("div", { class: "pds-select__message" }, this.getHelperMessage(), this.getErrorMessage()));
|
|
16777
16877
|
}
|
|
16878
|
+
// The field also renders as invalid whenever an error message is present, via
|
|
16879
|
+
// `select:has(~ .pds-select__message .pds-select__error-message)` in the styles.
|
|
16880
|
+
isInvalid() {
|
|
16881
|
+
return Boolean(this.invalid) || Boolean(this.errorMessage);
|
|
16882
|
+
}
|
|
16778
16883
|
classNames() {
|
|
16779
16884
|
const classNames = [];
|
|
16780
16885
|
if (this.invalid) {
|
|
@@ -16858,7 +16963,7 @@ class PdsSelect {
|
|
|
16858
16963
|
}
|
|
16859
16964
|
render() {
|
|
16860
16965
|
const hasAction = this.el.querySelector('[slot="action"]') !== null;
|
|
16861
|
-
return (hAsync(Host, { key: '
|
|
16966
|
+
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 }))));
|
|
16862
16967
|
}
|
|
16863
16968
|
static get formAssociated() { return true; }
|
|
16864
16969
|
get el() { return getElement(this); }
|
|
@@ -19762,9 +19867,9 @@ class PdsSwitch {
|
|
|
19762
19867
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
19763
19868
|
}
|
|
19764
19869
|
render() {
|
|
19765
|
-
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: '
|
|
19766
|
-
hAsync("div", { key: '
|
|
19767
|
-
hAsync("div", { key: '
|
|
19870
|
+
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 &&
|
|
19871
|
+
hAsync("div", { key: '1465778f0a69d4c87108a80603d123bf0500911d', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
19872
|
+
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)));
|
|
19768
19873
|
}
|
|
19769
19874
|
static get formAssociated() { return true; }
|
|
19770
19875
|
get el() { return getElement(this); }
|
|
@@ -19796,7 +19901,7 @@ class PdsSwitch {
|
|
|
19796
19901
|
}; }
|
|
19797
19902
|
}
|
|
19798
19903
|
|
|
19799
|
-
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)}`;
|
|
19904
|
+
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)}`;
|
|
19800
19905
|
|
|
19801
19906
|
class PdsTab {
|
|
19802
19907
|
constructor(hostRef) {
|
|
@@ -19807,6 +19912,13 @@ class PdsTab {
|
|
|
19807
19912
|
* @defaultValue false
|
|
19808
19913
|
*/
|
|
19809
19914
|
this.disabled = false;
|
|
19915
|
+
/**
|
|
19916
|
+
* Marks this tab as the current one in navigation mode (`href` set). Applies
|
|
19917
|
+
* the active treatment and `aria-current="page"`. Ignored in panel mode, where
|
|
19918
|
+
* the active tab is derived from the parent's `activeTabName`.
|
|
19919
|
+
* @defaultValue false
|
|
19920
|
+
*/
|
|
19921
|
+
this.active = false;
|
|
19810
19922
|
/**
|
|
19811
19923
|
* Keeps track of the tabpanel selected state, this property is passed by parent component
|
|
19812
19924
|
*/
|
|
@@ -19818,18 +19930,46 @@ class PdsTab {
|
|
|
19818
19930
|
return;
|
|
19819
19931
|
this.pdsTabClick.emit([index, parentComponentId]);
|
|
19820
19932
|
}
|
|
19933
|
+
// An empty string is treated as "no destination" everywhere (isNav fallback,
|
|
19934
|
+
// href attribute, role) so a nav tab never renders `href=""` (which would
|
|
19935
|
+
// navigate to the current page).
|
|
19936
|
+
get hasHref() {
|
|
19937
|
+
return this.href != null && this.href !== '';
|
|
19938
|
+
}
|
|
19939
|
+
get isNav() {
|
|
19940
|
+
var _a;
|
|
19941
|
+
// The parent `pds-tabs` is authoritative when present (via `navMode`), so its
|
|
19942
|
+
// tabs share one mode. Standalone, fall back to a usable `href`.
|
|
19943
|
+
return (_a = this.navMode) !== null && _a !== void 0 ? _a : this.hasHref;
|
|
19944
|
+
}
|
|
19945
|
+
get isActive() {
|
|
19946
|
+
// Navigation mode is server-driven via `active`; panel mode is parent-driven
|
|
19947
|
+
// via `selected` (from `activeTabName`).
|
|
19948
|
+
return this.isNav ? this.active : this.selected;
|
|
19949
|
+
}
|
|
19821
19950
|
classNames() {
|
|
19822
19951
|
const classes = [
|
|
19823
19952
|
'pds-tab',
|
|
19824
|
-
this.
|
|
19953
|
+
this.isActive && 'is-active',
|
|
19825
19954
|
this.disabled && 'is-disabled',
|
|
19826
19955
|
];
|
|
19827
19956
|
return classes.filter(Boolean).join(' ');
|
|
19828
19957
|
}
|
|
19829
19958
|
render() {
|
|
19830
|
-
const availabilityTabEdgeInlineStart = (hAsync("span", {
|
|
19831
|
-
const availabilityTabEdgeInlineEnd = (hAsync("span", {
|
|
19832
|
-
|
|
19959
|
+
const availabilityTabEdgeInlineStart = (hAsync("span", { class: "pds-tab-edge", role: "presentation" }));
|
|
19960
|
+
const availabilityTabEdgeInlineEnd = (hAsync("span", { class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
|
|
19961
|
+
const content = (hAsync(Fragment, null, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, hAsync("div", { class: "pds-tab__content" }, hAsync("slot", null))));
|
|
19962
|
+
// Navigation mode: a real anchor, so keyboard activation and navigation are
|
|
19963
|
+
// native (and Turbo-driven when framed) with no controller — and the current
|
|
19964
|
+
// item carries `aria-current="page"` rather than `role="tab"`/`aria-selected`.
|
|
19965
|
+
if (this.isNav) {
|
|
19966
|
+
return (hAsync(Host, { variant: this.variant, slot: "tabs", index: this.index }, hAsync("a", { href: this.disabled || !this.hasHref ? undefined : this.href,
|
|
19967
|
+
// An anchor without an href (disabled, or forced into nav mode with no
|
|
19968
|
+
// usable href) loses its implicit link role; restore it explicitly so
|
|
19969
|
+
// assistive tech still announces the item rather than as plain text.
|
|
19970
|
+
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)));
|
|
19971
|
+
}
|
|
19972
|
+
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)));
|
|
19833
19973
|
}
|
|
19834
19974
|
get el() { return getElement(this); }
|
|
19835
19975
|
static get style() { return pdsTabCss(); }
|
|
@@ -19838,11 +19978,17 @@ class PdsTab {
|
|
|
19838
19978
|
"$tagName$": "pds-tab",
|
|
19839
19979
|
"$members$": {
|
|
19840
19980
|
"disabled": [4],
|
|
19981
|
+
"href": [1],
|
|
19982
|
+
"active": [4],
|
|
19983
|
+
"target": [1],
|
|
19984
|
+
"turboFrame": [1, "turbo-frame"],
|
|
19985
|
+
"turboAction": [1, "turbo-action"],
|
|
19841
19986
|
"name": [1],
|
|
19842
19987
|
"parentComponentId": [1, "parent-component-id"],
|
|
19843
19988
|
"variant": [1],
|
|
19844
19989
|
"index": [2],
|
|
19845
|
-
"selected": [4]
|
|
19990
|
+
"selected": [4],
|
|
19991
|
+
"navMode": [4, "nav-mode"]
|
|
19846
19992
|
},
|
|
19847
19993
|
"$listeners$": undefined,
|
|
19848
19994
|
"$lazyBundleId$": "-",
|
|
@@ -20758,7 +20904,7 @@ class PdsTableRow {
|
|
|
20758
20904
|
}; }
|
|
20759
20905
|
}
|
|
20760
20906
|
|
|
20761
|
-
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}`;
|
|
20907
|
+
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}`;
|
|
20762
20908
|
|
|
20763
20909
|
class PdsTabpanel {
|
|
20764
20910
|
constructor(hostRef) {
|
|
@@ -20768,9 +20914,14 @@ class PdsTabpanel {
|
|
|
20768
20914
|
*/
|
|
20769
20915
|
/** @internal */
|
|
20770
20916
|
this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
|
|
20917
|
+
/**
|
|
20918
|
+
* Keeps track of the parent `stretch` state so the active panel can fill height, this property is passed by parent component
|
|
20919
|
+
*/
|
|
20920
|
+
/** @internal */
|
|
20921
|
+
this.stretch = false;
|
|
20771
20922
|
}
|
|
20772
20923
|
render() {
|
|
20773
|
-
return (hAsync(Host, { key: '
|
|
20924
|
+
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' }))));
|
|
20774
20925
|
}
|
|
20775
20926
|
get el() { return getElement(this); }
|
|
20776
20927
|
static get style() { return pdsTabpanelCss(); }
|
|
@@ -20781,7 +20932,8 @@ class PdsTabpanel {
|
|
|
20781
20932
|
"name": [1],
|
|
20782
20933
|
"parentComponentId": [1, "parent-component-id"],
|
|
20783
20934
|
"variant": [1],
|
|
20784
|
-
"selected": [1028]
|
|
20935
|
+
"selected": [1028],
|
|
20936
|
+
"stretch": [4]
|
|
20785
20937
|
},
|
|
20786
20938
|
"$listeners$": undefined,
|
|
20787
20939
|
"$lazyBundleId$": "-",
|
|
@@ -20789,7 +20941,7 @@ class PdsTabpanel {
|
|
|
20789
20941
|
}; }
|
|
20790
20942
|
}
|
|
20791
20943
|
|
|
20792
|
-
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)}`;
|
|
20944
|
+
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)}`;
|
|
20793
20945
|
|
|
20794
20946
|
/**
|
|
20795
20947
|
* @slot tabs - Content is placed within the `div[role="tablist"]` element as children
|
|
@@ -20799,6 +20951,25 @@ const pdsTabsCss = () => `:host{--tabs-dimension-panel-margin-top:var(--pine-dim
|
|
|
20799
20951
|
class PdsTabs {
|
|
20800
20952
|
constructor(hostRef) {
|
|
20801
20953
|
registerInstance(this, hostRef);
|
|
20954
|
+
/**
|
|
20955
|
+
* Adds a divider rule beneath the tab list.
|
|
20956
|
+
* @defaultValue false
|
|
20957
|
+
*/
|
|
20958
|
+
this.divider = false;
|
|
20959
|
+
/**
|
|
20960
|
+
* Stretches the component so the active tab panel fills the remaining height.
|
|
20961
|
+
* Requires the component to have a constrained height (e.g. a flex parent).
|
|
20962
|
+
* @defaultValue false
|
|
20963
|
+
*/
|
|
20964
|
+
this.stretch = false;
|
|
20965
|
+
/**
|
|
20966
|
+
* Renders the tab strip as navigation instead of an in-page panel switcher: each
|
|
20967
|
+
* `pds-tab` becomes an `<a href>` inside a `<nav>` landmark (with `aria-current`
|
|
20968
|
+
* on the `active` tab) rather than a `role="tab"` button over a `pds-tabpanel`.
|
|
20969
|
+
* Give every `pds-tab` an `href` and omit `pds-tabpanel`s.
|
|
20970
|
+
* @defaultValue false
|
|
20971
|
+
*/
|
|
20972
|
+
this.nav = false;
|
|
20802
20973
|
}
|
|
20803
20974
|
tabClickHandler(event) {
|
|
20804
20975
|
if (this.componentId === event.detail[1]) {
|
|
@@ -20807,6 +20978,10 @@ class PdsTabs {
|
|
|
20807
20978
|
}
|
|
20808
20979
|
}
|
|
20809
20980
|
handleKeyDown(ev) {
|
|
20981
|
+
// Navigation mode uses real links: Tab moves focus, Enter follows the href.
|
|
20982
|
+
// The roving/arrow model is a panel-mode (role=tab) concern only.
|
|
20983
|
+
if (this.isNav)
|
|
20984
|
+
return;
|
|
20810
20985
|
const keySet = ["ArrowLeft", "ArrowRight", "Home", "End"];
|
|
20811
20986
|
// Only handle keyboard navigation if the event originated from a tab button
|
|
20812
20987
|
// that belongs to THIS tabs component
|
|
@@ -20819,6 +20994,32 @@ class PdsTabs {
|
|
|
20819
20994
|
this.moveActiveTab(ev.key);
|
|
20820
20995
|
}
|
|
20821
20996
|
}
|
|
20997
|
+
// Navigation mode is an explicit, single source of truth: `nav` drives both the
|
|
20998
|
+
// container (<nav> of links vs role=tablist of buttons) and every child tab (via
|
|
20999
|
+
// `navMode`), so the tabs present when the strip initializes can't mix the two.
|
|
21000
|
+
// (Child discovery is load-time only, like `variant`/`id`; tabs added after load
|
|
21001
|
+
// aren't managed.)
|
|
21002
|
+
get isNav() {
|
|
21003
|
+
return !!this.nav;
|
|
21004
|
+
}
|
|
21005
|
+
// `nav` and per-tab `href` should agree. Warn on the two authoring mistakes
|
|
21006
|
+
// rather than silently rendering a link with no destination, or ignoring an href.
|
|
21007
|
+
warnOnNavConfig() {
|
|
21008
|
+
var _a;
|
|
21009
|
+
if (!((_a = this.tabs) === null || _a === void 0 ? void 0 : _a.length))
|
|
21010
|
+
return;
|
|
21011
|
+
// An empty `href=""` is not a usable destination, so it counts as missing.
|
|
21012
|
+
const withHref = this.tabs.filter((tab) => {
|
|
21013
|
+
const href = tab.getAttribute('href');
|
|
21014
|
+
return href != null && href !== '';
|
|
21015
|
+
}).length;
|
|
21016
|
+
if (this.nav && withHref < this.tabs.length) {
|
|
21017
|
+
console.warn('pds-tabs: `nav` is set, so every pds-tab needs an `href`.');
|
|
21018
|
+
}
|
|
21019
|
+
else if (!this.nav && withHref > 0) {
|
|
21020
|
+
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.');
|
|
21021
|
+
}
|
|
21022
|
+
}
|
|
20822
21023
|
moveActiveTab(key) {
|
|
20823
21024
|
const firstTabNumber = 0;
|
|
20824
21025
|
const lastTabNumber = this.tabs.length - 1;
|
|
@@ -20857,13 +21058,25 @@ class PdsTabs {
|
|
|
20857
21058
|
child['index'] = index;
|
|
20858
21059
|
}
|
|
20859
21060
|
passPropsToChildren() {
|
|
21061
|
+
var _a;
|
|
21062
|
+
// Panel mode needs a selected tab so the tablist stays keyboard-reachable
|
|
21063
|
+
// (an all-unselected tablist has every button at tabindex="-1"). Default to
|
|
21064
|
+
// the first ENABLED tab when the consumer omits `activeTabName` — a disabled
|
|
21065
|
+
// tab is itself tabindex="-1", so selecting it would recreate the trap. Nav
|
|
21066
|
+
// mode has no roving/selection, so it's left unset there.
|
|
21067
|
+
if (!this.nav && this.activeTabName == null && this.tabs.length) {
|
|
21068
|
+
const firstEnabled = (_a = this.tabs.find((tab) => !tab.disabled)) !== null && _a !== void 0 ? _a : this.tabs[0];
|
|
21069
|
+
this.activeTabName = firstEnabled.name;
|
|
21070
|
+
}
|
|
20860
21071
|
this.tabs.forEach((child, index) => {
|
|
20861
21072
|
if (this.activeTabName === child.name)
|
|
20862
21073
|
this.activeTabIndex = index;
|
|
20863
21074
|
this.propGeneration(child, index);
|
|
21075
|
+
child.navMode = this.nav;
|
|
20864
21076
|
});
|
|
20865
21077
|
this.tabPanels.forEach((child) => {
|
|
20866
21078
|
this.propGeneration(child);
|
|
21079
|
+
child.stretch = this.stretch;
|
|
20867
21080
|
});
|
|
20868
21081
|
}
|
|
20869
21082
|
classNames() {
|
|
@@ -20872,17 +21085,27 @@ class PdsTabs {
|
|
|
20872
21085
|
const variantClassName = `pds-tabs--${this.variant}`;
|
|
20873
21086
|
className += ' ' + variantClassName;
|
|
20874
21087
|
}
|
|
21088
|
+
if (this.divider) {
|
|
21089
|
+
className += ' pds-tabs--divider';
|
|
21090
|
+
}
|
|
21091
|
+
if (this.stretch) {
|
|
21092
|
+
className += ' pds-tabs--stretch';
|
|
21093
|
+
}
|
|
20875
21094
|
return className;
|
|
20876
21095
|
}
|
|
20877
21096
|
;
|
|
20878
21097
|
componentWillLoad() {
|
|
20879
21098
|
this.findAllChildren();
|
|
21099
|
+
this.warnOnNavConfig();
|
|
20880
21100
|
}
|
|
20881
21101
|
componentWillRender() {
|
|
20882
21102
|
this.passPropsToChildren();
|
|
20883
21103
|
}
|
|
20884
21104
|
render() {
|
|
20885
|
-
|
|
21105
|
+
// Navigation mode: a <nav> landmark of links (aria-current marks the current
|
|
21106
|
+
// page). Panel mode: the ARIA tablist of role=tab buttons over tabpanels.
|
|
21107
|
+
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" })));
|
|
21108
|
+
return (hAsync(Host, { key: '97bb6d788bd7bdf393b46eaecea612d9b0c9dee4', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, hAsync("slot", { key: '252855bfa496bc3e04fbe6dc0bcb7597c7360407', name: "tabpanels" })));
|
|
20886
21109
|
}
|
|
20887
21110
|
get el() { return getElement(this); }
|
|
20888
21111
|
static get style() { return pdsTabsCss(); }
|
|
@@ -20893,6 +21116,9 @@ class PdsTabs {
|
|
|
20893
21116
|
"tablistLabel": [1, "tablist-label"],
|
|
20894
21117
|
"componentId": [1, "component-id"],
|
|
20895
21118
|
"variant": [1],
|
|
21119
|
+
"divider": [4],
|
|
21120
|
+
"stretch": [4],
|
|
21121
|
+
"nav": [4],
|
|
20896
21122
|
"activeTabName": [1025, "active-tab-name"],
|
|
20897
21123
|
"activeTabIndex": [1026, "active-tab-index"]
|
|
20898
21124
|
},
|
|
@@ -21005,7 +21231,7 @@ class PdsText {
|
|
|
21005
21231
|
? `pds-text--decoration-${this.decoration}`
|
|
21006
21232
|
: ''}
|
|
21007
21233
|
`;
|
|
21008
|
-
return (hAsync(Tag, { key: '
|
|
21234
|
+
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' })));
|
|
21009
21235
|
}
|
|
21010
21236
|
get el() { return getElement(this); }
|
|
21011
21237
|
static get watchers() { return {
|
|
@@ -21346,10 +21572,10 @@ class PdsTextarea {
|
|
|
21346
21572
|
}
|
|
21347
21573
|
render() {
|
|
21348
21574
|
const value = this.getValue();
|
|
21349
|
-
return (hAsync(Host, { key: '
|
|
21350
|
-
hAsync("div", { key: '
|
|
21351
|
-
hAsync("p", { key: '
|
|
21352
|
-
hAsync("p", { key: '
|
|
21575
|
+
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 &&
|
|
21576
|
+
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 &&
|
|
21577
|
+
hAsync("p", { key: 'de40f9d13bda3d9a224349b7f4ca38194e7adbb5', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
|
|
21578
|
+
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))));
|
|
21353
21579
|
}
|
|
21354
21580
|
static get formAssociated() { return true; }
|
|
21355
21581
|
get el() { return getElement(this); }
|
|
@@ -21523,13 +21749,13 @@ class PdsToast {
|
|
|
21523
21749
|
return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
|
|
21524
21750
|
}
|
|
21525
21751
|
render() {
|
|
21526
|
-
return (hAsync(Host, { key: '
|
|
21752
|
+
return (hAsync(Host, { key: '87c9b15656a2765eb9e722c85dba5c5edbe07c42', hidden: !this.isVisible }, hAsync("div", { key: 'bd8b26ef0c33b96603313bce74505953d8fe7410', class: {
|
|
21527
21753
|
'pds-toast': true,
|
|
21528
21754
|
[`pds-toast--${this.type}`]: this.type !== 'default',
|
|
21529
21755
|
'pds-toast--animating-out': this.isAnimatingOut
|
|
21530
|
-
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '
|
|
21756
|
+
}, 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: () => {
|
|
21531
21757
|
this.dismiss();
|
|
21532
|
-
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '
|
|
21758
|
+
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: 'dac8f2099b2ab8a68d208aac288d48019df6d7e7', name: "remove" }))))));
|
|
21533
21759
|
}
|
|
21534
21760
|
get el() { return getElement(this); }
|
|
21535
21761
|
static get watchers() { return {
|
|
@@ -21873,9 +22099,9 @@ class PdsTooltip {
|
|
|
21873
22099
|
}
|
|
21874
22100
|
render() {
|
|
21875
22101
|
const hostId = this.componentId || undefined;
|
|
21876
|
-
return (hAsync(Host, { key: '
|
|
22102
|
+
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,
|
|
21877
22103
|
/* focusin/out bubble; ensure keyboard users see tooltips */
|
|
21878
|
-
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '
|
|
22104
|
+
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" }))));
|
|
21879
22105
|
}
|
|
21880
22106
|
get el() { return getElement(this); }
|
|
21881
22107
|
static get watchers() { return {
|