@pine-ds/core 4.9.0 → 4.10.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/mock-pds-modal.js +1 -1
- package/components/pds-checkbox2.js +1 -1
- package/components/pds-chip2.js +1 -1
- package/components/pds-combobox.js +2 -2
- package/components/pds-datepicker.js +1 -1
- package/components/pds-dropdown-menu.js +1 -1
- package/components/pds-icon2.js +1 -1
- package/components/pds-link2.js +1 -1
- package/components/pds-modal2.js +1 -1
- package/components/pds-multiselect.js +1 -1
- package/components/pds-radio-group.js +1 -1
- package/components/pds-text2.js +1 -1
- package/components/pds-tooltip.js +1 -1
- package/components/portal-target.js +1 -0
- package/components/tabbable.js +1 -1
- package/components/truncation-tooltip.js +1 -1
- package/dist/cjs/{index-Do70atou.js → index-BDnbr0DK.js} +1 -1
- package/dist/cjs/{index-BsWY_xEJ.js → index-D9iJuJCP.js} +12 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mock-pds-modal.cjs.entry.js +2 -2
- package/dist/cjs/pds-accordion.cjs.entry.js +2 -2
- package/dist/cjs/pds-alert.cjs.entry.js +1 -1
- package/dist/cjs/pds-avatar.cjs.entry.js +2 -2
- package/dist/cjs/pds-box.cjs.entry.js +1 -1
- package/dist/cjs/pds-button.cjs.entry.js +2 -2
- package/dist/cjs/pds-checkbox.cjs.entry.js +3 -3
- package/dist/cjs/pds-chip.cjs.entry.js +9 -9
- package/dist/cjs/pds-combobox.cjs.entry.js +102 -16
- package/dist/cjs/pds-container.cjs.entry.js +1 -1
- package/dist/cjs/pds-copytext.cjs.entry.js +4 -3
- package/dist/cjs/pds-datepicker.cjs.entry.js +4 -41
- package/dist/cjs/pds-divider.cjs.entry.js +1 -1
- package/dist/cjs/pds-drawer-content.cjs.entry.js +1 -1
- package/dist/cjs/pds-drawer-footer.cjs.entry.js +1 -1
- package/dist/cjs/pds-drawer-header.cjs.entry.js +1 -1
- package/dist/cjs/pds-drawer.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 +59 -47
- 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 +54 -21
- package/dist/cjs/pds-image.cjs.entry.js +1 -1
- package/dist/cjs/pds-input.cjs.entry.js +2 -2
- package/dist/cjs/pds-link.cjs.entry.js +3 -3
- 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 +3 -3
- package/dist/cjs/pds-multiselect.cjs.entry.js +11 -5
- package/dist/cjs/pds-popover.cjs.entry.js +2 -2
- 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 +66 -5
- package/dist/cjs/pds-radio.cjs.entry.js +2 -2
- package/dist/cjs/pds-row.cjs.entry.js +1 -1
- package/dist/cjs/pds-select.cjs.entry.js +2 -2
- 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 +2 -2
- package/dist/cjs/pds-tab.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-body.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-cell.cjs.entry.js +3 -2
- 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 +1 -1
- package/dist/cjs/pds-tabs.cjs.entry.js +1 -1
- package/dist/cjs/pds-text.cjs.entry.js +29 -3
- package/dist/cjs/pds-textarea.cjs.entry.js +2 -2
- package/dist/cjs/pds-toast.cjs.entry.js +1 -1
- package/dist/cjs/pds-tooltip.cjs.entry.js +16 -5
- package/dist/cjs/pine-core.cjs.js +2 -2
- package/dist/cjs/portal-target-e8WQ6dLx.js +70 -0
- package/dist/cjs/{tabbable-CddSt_Hi.js → tabbable-BrrrGvdG.js} +2 -1
- package/dist/cjs/{truncation-tooltip-O5nQmXPw.js → truncation-tooltip-Bikp7n9I.js} +43 -3
- package/dist/collection/components/pds-checkbox/pds-checkbox.css +20 -14
- package/dist/collection/components/pds-chip/pds-chip.js +5 -6
- package/dist/collection/components/pds-combobox/grouped-options-panel.js +39 -1
- package/dist/collection/components/pds-combobox/pds-combobox.css +37 -1
- package/dist/collection/components/pds-combobox/pds-combobox.js +62 -14
- package/dist/collection/components/pds-combobox/stories/pds-combobox.stories.js +48 -0
- package/dist/collection/components/pds-datepicker/calendar-portal.js +1 -38
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.js +64 -46
- package/dist/collection/components/pds-link/pds-link.css +1 -1
- package/dist/collection/components/pds-link/stories/pds-link.stories.js +48 -0
- package/dist/collection/components/pds-modal/pds-modal.css +1 -1
- package/dist/collection/components/pds-multiselect/pds-multiselect.js +9 -3
- package/dist/collection/components/pds-radio-group/pds-radio-group.js +65 -4
- package/dist/collection/components/pds-text/pds-text.js +28 -3
- package/dist/collection/components/pds-text/stories/pds-text.stories.js +16 -0
- package/dist/collection/components/pds-tooltip/pds-tooltip.css +11 -0
- package/dist/collection/components/pds-tooltip/pds-tooltip.js +14 -3
- package/dist/collection/components/pds-tooltip/stories/pds-tooltip.stories.js +30 -0
- package/dist/collection/utils/portal-target.js +64 -0
- package/dist/collection/utils/tabbable.js +2 -1
- package/dist/collection/utils/truncation-tooltip.js +42 -3
- package/dist/docs.json +9 -3
- package/dist/esm/{index-BFSwd-GQ.js → index-4_RRPJTO.js} +12 -1
- package/dist/esm/{index-m3pqpeWg.js → index-DvN3tyZp.js} +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mock-pds-modal.entry.js +2 -2
- package/dist/esm/pds-accordion.entry.js +2 -2
- package/dist/esm/pds-alert.entry.js +1 -1
- package/dist/esm/pds-avatar.entry.js +2 -2
- package/dist/esm/pds-box.entry.js +1 -1
- package/dist/esm/pds-button.entry.js +2 -2
- package/dist/esm/pds-checkbox.entry.js +3 -3
- package/dist/esm/pds-chip.entry.js +8 -8
- package/dist/esm/pds-combobox.entry.js +102 -16
- package/dist/esm/pds-container.entry.js +1 -1
- package/dist/esm/pds-copytext.entry.js +4 -3
- package/dist/esm/pds-datepicker.entry.js +3 -40
- package/dist/esm/pds-divider.entry.js +1 -1
- package/dist/esm/pds-drawer-content.entry.js +1 -1
- package/dist/esm/pds-drawer-footer.entry.js +1 -1
- package/dist/esm/pds-drawer-header.entry.js +1 -1
- package/dist/esm/pds-drawer.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 +59 -47
- 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 +54 -21
- package/dist/esm/pds-image.entry.js +1 -1
- package/dist/esm/pds-input.entry.js +2 -2
- package/dist/esm/pds-link.entry.js +3 -3
- 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 +3 -3
- package/dist/esm/pds-multiselect.entry.js +11 -5
- package/dist/esm/pds-popover.entry.js +2 -2
- 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 +66 -5
- package/dist/esm/pds-radio.entry.js +2 -2
- package/dist/esm/pds-row.entry.js +1 -1
- package/dist/esm/pds-select.entry.js +2 -2
- 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 +2 -2
- package/dist/esm/pds-tab.entry.js +1 -1
- package/dist/esm/pds-table-body.entry.js +1 -1
- package/dist/esm/pds-table-cell.entry.js +3 -2
- 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 +1 -1
- package/dist/esm/pds-tabs.entry.js +1 -1
- package/dist/esm/pds-text.entry.js +29 -3
- package/dist/esm/pds-textarea.entry.js +2 -2
- package/dist/esm/pds-toast.entry.js +1 -1
- package/dist/esm/pds-tooltip.entry.js +16 -5
- package/dist/esm/pine-core.js +3 -3
- package/dist/esm/portal-target-CKRzRKdO.js +66 -0
- package/dist/esm/{tabbable-DCKBKRUy.js → tabbable-C6ZWpp3v.js} +2 -1
- package/dist/esm/{truncation-tooltip-D_gvhB9r.js → truncation-tooltip-DBcPipr9.js} +43 -4
- package/dist/esm-es5/{index-BFSwd-GQ.js → index-4_RRPJTO.js} +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mock-pds-modal.entry.js +1 -1
- package/dist/esm-es5/pds-accordion.entry.js +1 -1
- package/dist/esm-es5/pds-alert.entry.js +1 -1
- package/dist/esm-es5/pds-avatar.entry.js +1 -1
- package/dist/esm-es5/pds-box.entry.js +1 -1
- package/dist/esm-es5/pds-button.entry.js +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js +1 -1
- package/dist/esm-es5/pds-chip.entry.js +1 -1
- package/dist/esm-es5/pds-combobox.entry.js +2 -2
- package/dist/esm-es5/pds-container.entry.js +1 -1
- package/dist/esm-es5/pds-copytext.entry.js +1 -1
- package/dist/esm-es5/pds-datepicker.entry.js +1 -1
- package/dist/esm-es5/pds-divider.entry.js +1 -1
- package/dist/esm-es5/pds-drawer-content.entry.js +1 -1
- package/dist/esm-es5/pds-drawer-footer.entry.js +1 -1
- package/dist/esm-es5/pds-drawer-header.entry.js +1 -1
- package/dist/esm-es5/pds-drawer.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu-item.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu-separator.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu.entry.js +1 -1
- package/dist/esm-es5/pds-filter.entry.js +1 -1
- package/dist/esm-es5/pds-filters.entry.js +1 -1
- package/dist/esm-es5/pds-icon.entry.js +1 -1
- package/dist/esm-es5/pds-image.entry.js +1 -1
- package/dist/esm-es5/pds-input.entry.js +1 -1
- package/dist/esm-es5/pds-link.entry.js +1 -1
- package/dist/esm-es5/pds-loader.entry.js +1 -1
- package/dist/esm-es5/pds-modal-content.entry.js +1 -1
- package/dist/esm-es5/pds-modal-footer.entry.js +1 -1
- package/dist/esm-es5/pds-modal-header.entry.js +1 -1
- package/dist/esm-es5/pds-modal.entry.js +1 -1
- package/dist/esm-es5/pds-multiselect.entry.js +1 -1
- package/dist/esm-es5/pds-popover.entry.js +1 -1
- package/dist/esm-es5/pds-progress.entry.js +1 -1
- package/dist/esm-es5/pds-property.entry.js +1 -1
- package/dist/esm-es5/pds-radio-group.entry.js +1 -1
- package/dist/esm-es5/pds-radio.entry.js +1 -1
- package/dist/esm-es5/pds-row.entry.js +1 -1
- package/dist/esm-es5/pds-select.entry.js +1 -1
- package/dist/esm-es5/pds-sortable-item.entry.js +1 -1
- package/dist/esm-es5/pds-sortable.entry.js +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/esm-es5/portal-target-CKRzRKdO.js +1 -0
- package/dist/esm-es5/tabbable-C6ZWpp3v.js +1 -0
- package/dist/esm-es5/truncation-tooltip-DBcPipr9.js +1 -0
- package/dist/pine-core/{p-7a19477e.system.entry.js → p-01f1cdaf.system.entry.js} +1 -1
- package/dist/pine-core/{p-ee449a4b.entry.js → p-07323107.entry.js} +1 -1
- package/dist/pine-core/{p-14d872d3.entry.js → p-08b8e941.entry.js} +1 -1
- package/dist/pine-core/p-0b7b3fc2.system.entry.js +3 -0
- package/dist/pine-core/p-0d5f0ab5.system.entry.js +1 -0
- package/dist/pine-core/p-124a0a24.entry.js +1 -0
- package/dist/pine-core/p-128c04e7.entry.js +1 -0
- package/dist/pine-core/{p-3cc19ea8.system.entry.js → p-1415c988.system.entry.js} +1 -1
- package/dist/pine-core/{p-de176bd9.entry.js → p-143b33a6.entry.js} +1 -1
- package/dist/pine-core/{p-e9a53a88.system.entry.js → p-14dedf01.system.entry.js} +1 -1
- package/dist/pine-core/{p-60d27247.system.entry.js → p-19cf1d91.system.entry.js} +1 -1
- package/dist/pine-core/{p-bcf57566.entry.js → p-1ca8d183.entry.js} +1 -1
- package/dist/pine-core/{p-11e7d660.entry.js → p-1e3ef425.entry.js} +1 -1
- package/dist/pine-core/{p-98cc327b.entry.js → p-1f62bb71.entry.js} +2 -2
- package/dist/pine-core/{p-6f34ad9c.entry.js → p-2a18852f.entry.js} +1 -1
- package/dist/pine-core/{p-3ce7e72e.system.entry.js → p-2b9622c1.system.entry.js} +1 -1
- package/dist/pine-core/{p-9fbcba0d.entry.js → p-2dd30d12.entry.js} +1 -1
- package/dist/pine-core/{p-8b97dd57.system.entry.js → p-3306dc5a.system.entry.js} +1 -1
- package/dist/pine-core/{p-ce554098.entry.js → p-3610cb3b.entry.js} +1 -1
- package/dist/pine-core/{p-079c39d1.entry.js → p-39276663.entry.js} +1 -1
- package/dist/pine-core/{p-89fefe36.entry.js → p-39e57657.entry.js} +1 -1
- package/dist/pine-core/p-3a1dc752.system.entry.js +1 -0
- package/dist/pine-core/{p-ef4d8fea.entry.js → p-3c229091.entry.js} +1 -1
- package/dist/pine-core/{p-d8bedb58.system.entry.js → p-3f8bd3fb.system.entry.js} +1 -1
- package/dist/pine-core/{p-6845867f.system.entry.js → p-42d43c3f.system.entry.js} +1 -1
- package/dist/pine-core/{p-4ee44585.system.entry.js → p-42f70f93.system.entry.js} +1 -1
- package/dist/pine-core/{p-0bd61097.system.entry.js → p-4a90b9c8.system.entry.js} +1 -1
- package/dist/pine-core/{p-64283f7b.entry.js → p-4cfe922b.entry.js} +1 -1
- package/dist/pine-core/p-4d47023c.system.entry.js +1 -0
- package/dist/pine-core/{p-b037dcbd.system.entry.js → p-4d98bc0c.system.entry.js} +1 -1
- package/dist/pine-core/{p-3556f6ad.entry.js → p-50ddadbf.entry.js} +1 -1
- package/dist/pine-core/{p-1e5648bf.system.entry.js → p-548bce53.system.entry.js} +1 -1
- package/dist/pine-core/{p-92a8cf7d.entry.js → p-590df41a.entry.js} +1 -1
- package/dist/pine-core/{p-f549f2bc.entry.js → p-5946203c.entry.js} +1 -1
- package/dist/pine-core/{p-d7db749a.system.entry.js → p-5f181694.system.entry.js} +1 -1
- package/dist/pine-core/{p-9713d6a5.system.entry.js → p-60a30975.system.entry.js} +1 -1
- package/dist/pine-core/{p-d94ebe84.entry.js → p-61cfdbb2.entry.js} +1 -1
- package/dist/pine-core/p-62aa6a78.system.entry.js +1 -0
- package/dist/pine-core/p-639acef8.system.entry.js +1 -0
- package/dist/pine-core/{p-cb560aab.system.entry.js → p-63f85859.system.entry.js} +1 -1
- package/dist/pine-core/{p-001d4b86.entry.js → p-64bcb378.entry.js} +1 -1
- package/dist/pine-core/{p-bdde1e53.entry.js → p-67999353.entry.js} +1 -1
- package/dist/pine-core/{p-be3b4f12.system.entry.js → p-67f795d5.system.entry.js} +1 -1
- package/dist/pine-core/{p-6b6ae1be.entry.js → p-6a1aa8d3.entry.js} +1 -1
- package/dist/pine-core/p-6f4ab1ea.system.entry.js +1 -0
- package/dist/pine-core/{p-110b4051.system.entry.js → p-724baba3.system.entry.js} +1 -1
- package/dist/pine-core/p-72659a0e.system.entry.js +1 -0
- package/dist/pine-core/p-7a51f15e.entry.js +1 -0
- package/dist/pine-core/p-7b978fff.system.entry.js +1 -0
- package/dist/pine-core/p-8436cbfb.entry.js +1 -0
- package/dist/pine-core/{p-ced6a814.system.entry.js → p-849ec281.system.entry.js} +1 -1
- package/dist/pine-core/p-87a32ded.system.entry.js +1 -0
- package/dist/pine-core/{p-f09f27ab.system.entry.js → p-89d38a82.system.entry.js} +1 -1
- package/dist/pine-core/{p-6602b4d0.entry.js → p-8ade17ce.entry.js} +1 -1
- package/dist/pine-core/{p-ebf0c51b.system.entry.js → p-8afd5f5b.system.entry.js} +1 -1
- package/dist/pine-core/{p-9fe4a64a.entry.js → p-8e7f75e6.entry.js} +1 -1
- package/dist/pine-core/{p-b9d71b76.entry.js → p-8fb520df.entry.js} +1 -1
- package/dist/pine-core/{p-3b5b8f73.entry.js → p-92115e88.entry.js} +1 -1
- package/dist/pine-core/{p-239774c9.entry.js → p-947582e1.entry.js} +1 -1
- package/dist/pine-core/{p-98843402.system.entry.js → p-94c9b7d1.system.entry.js} +1 -1
- package/dist/pine-core/p-97356d4b.entry.js +1 -0
- package/dist/pine-core/p-973c3ac0.entry.js +1 -0
- package/dist/pine-core/p-97653e60.entry.js +1 -0
- package/dist/pine-core/{p-7073146f.entry.js → p-97b73359.entry.js} +1 -1
- package/dist/pine-core/{p-bfdfbe9f.entry.js → p-99530cb5.entry.js} +1 -1
- package/dist/pine-core/{p-50af67ea.system.entry.js → p-9b32727a.system.entry.js} +1 -1
- package/dist/pine-core/{p-CjRCtzPD.system.js → p-BK1sLRfg.system.js} +1 -1
- package/dist/pine-core/p-BZVUD2on.js +1 -0
- package/dist/pine-core/p-C6ZWpp3v.js +1 -0
- package/dist/pine-core/p-CKRzRKdO.js +1 -0
- package/dist/pine-core/p-Dj-z_ugg.system.js +1 -0
- package/dist/pine-core/{p-BplEmwUQ.js → p-M31tvpDN.js} +2 -2
- package/dist/pine-core/p-XK45dzWR.system.js +1 -0
- package/dist/pine-core/{p-d9243653.system.entry.js → p-a09c9c5e.system.entry.js} +1 -1
- package/dist/pine-core/{p-55fce29e.entry.js → p-a4ce12ef.entry.js} +1 -1
- package/dist/pine-core/{p-dea2a254.entry.js → p-a594c41f.entry.js} +1 -1
- package/dist/pine-core/{p-2d5b1deb.entry.js → p-a9d96e22.entry.js} +1 -1
- package/dist/pine-core/{p-e1fdd53a.system.entry.js → p-ad5208a4.system.entry.js} +1 -1
- package/dist/pine-core/p-afc2f165.entry.js +1 -0
- package/dist/pine-core/{p-25bf2f26.system.entry.js → p-bcc378ba.system.entry.js} +2 -2
- package/dist/pine-core/{p-3f62581a.system.entry.js → p-bd7dc317.system.entry.js} +1 -1
- package/dist/pine-core/p-bfa34194.entry.js +1 -0
- package/dist/pine-core/{p-5c46553f.system.entry.js → p-c2afe4f3.system.entry.js} +1 -1
- package/dist/pine-core/{p-17fc76e7.system.entry.js → p-c5e1eb3c.system.entry.js} +1 -1
- package/dist/pine-core/p-c6a9e62c.system.entry.js +1 -0
- package/dist/pine-core/{p-7a14473e.entry.js → p-c7a53c4f.entry.js} +1 -1
- package/dist/pine-core/{p-5967d9fa.system.entry.js → p-c8a0b562.system.entry.js} +1 -1
- package/dist/pine-core/{p-735b3631.entry.js → p-c9ae7964.entry.js} +1 -1
- package/dist/pine-core/{p-b243767b.system.entry.js → p-cb9baf78.system.entry.js} +1 -1
- package/dist/pine-core/{p-6d64e6c7.entry.js → p-ce9fa14b.entry.js} +1 -1
- package/dist/pine-core/{p-68fdfb8f.system.entry.js → p-d018dc60.system.entry.js} +1 -1
- package/dist/pine-core/p-d47b2a6a.system.entry.js +1 -0
- package/dist/pine-core/{p-0790dd0d.system.entry.js → p-d48fe5a0.system.entry.js} +1 -1
- package/dist/pine-core/{p-414faecf.entry.js → p-d6f338e0.entry.js} +1 -1
- package/dist/pine-core/{p-b7cbd913.system.entry.js → p-d920d759.system.entry.js} +1 -1
- package/dist/pine-core/{p-87642228.entry.js → p-d9719e37.entry.js} +1 -1
- package/dist/pine-core/p-da8b864a.entry.js +2 -0
- package/dist/pine-core/{p-f2c487e6.entry.js → p-db7fb5a3.entry.js} +1 -1
- package/dist/pine-core/p-dd7ded84.entry.js +1 -0
- package/dist/pine-core/p-de455073.system.entry.js +1 -0
- package/dist/pine-core/{p-a7d25143.entry.js → p-e1d1b5d8.entry.js} +1 -1
- package/dist/pine-core/p-e3de6a1d.entry.js +1 -0
- package/dist/pine-core/{p-2c0047cd.entry.js → p-e7002cee.entry.js} +1 -1
- package/dist/pine-core/{p-5133e8be.system.entry.js → p-e82f758f.system.entry.js} +1 -1
- package/dist/pine-core/p-e84fa9ed.entry.js +1 -0
- package/dist/pine-core/{p-9dbc017f.system.entry.js → p-eb4f0daa.system.entry.js} +1 -1
- package/dist/pine-core/p-eb56af4a.system.entry.js +1 -0
- package/dist/pine-core/p-eeYeEogd.system.js +1 -0
- package/dist/pine-core/{p-b33ad96e.system.entry.js → p-eecd9ad8.system.entry.js} +1 -1
- package/dist/pine-core/{p-06279b93.system.entry.js → p-ef0eba9b.system.entry.js} +1 -1
- package/dist/pine-core/{p-0c60f577.system.entry.js → p-ef3a855f.system.entry.js} +1 -1
- package/dist/pine-core/{p-6dad76cb.system.entry.js → p-f11cce27.system.entry.js} +1 -1
- package/dist/pine-core/p-f354dbac.entry.js +1 -0
- package/dist/pine-core/{p-bda7e3be.entry.js → p-f6f4fd42.entry.js} +1 -1
- package/dist/pine-core/{p-7fcf3d37.entry.js → p-f71d71ca.entry.js} +1 -1
- package/dist/pine-core/p-f834cb07.system.entry.js +1 -0
- package/dist/pine-core/p-f9063262.system.entry.js +1 -0
- package/dist/pine-core/p-f99bd77f.entry.js +1 -0
- package/dist/pine-core/p-wB2y8gR7.system.js +1 -0
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/pine-core/pine-core.js +1 -1
- package/dist/types/components/pds-combobox/combobox-interface.d.ts +26 -0
- package/dist/types/components/pds-combobox/grouped-options-panel.d.ts +17 -0
- package/dist/types/components/pds-combobox/pds-combobox.d.ts +12 -2
- package/dist/types/components/pds-datepicker/calendar-portal.d.ts +0 -7
- package/dist/types/components/pds-dropdown-menu/pds-dropdown-menu.d.ts +4 -0
- package/dist/types/components/pds-radio-group/pds-radio-group.d.ts +8 -0
- package/dist/types/components/pds-text/pds-text.d.ts +4 -0
- package/dist/types/components/pds-tooltip/pds-tooltip.d.ts +1 -0
- package/dist/types/components.d.ts +2 -2
- package/dist/types/utils/portal-target.d.ts +17 -0
- package/dist/types/utils/truncation-tooltip.d.ts +5 -2
- package/dist/vscode.html-data.json +3 -3
- package/hydrate/index.js +422 -146
- package/hydrate/index.mjs +422 -146
- package/package.json +2 -2
- package/dist/esm-es5/tabbable-DCKBKRUy.js +0 -1
- package/dist/esm-es5/truncation-tooltip-D_gvhB9r.js +0 -1
- package/dist/pine-core/p-07b4524e.entry.js +0 -1
- package/dist/pine-core/p-08bbd3e6.system.entry.js +0 -1
- package/dist/pine-core/p-22ae92f7.system.entry.js +0 -1
- package/dist/pine-core/p-272b24ad.system.entry.js +0 -1
- package/dist/pine-core/p-38b87aa2.system.entry.js +0 -1
- package/dist/pine-core/p-3afb1208.entry.js +0 -1
- package/dist/pine-core/p-463a29fa.entry.js +0 -1
- package/dist/pine-core/p-568a9a79.system.entry.js +0 -1
- package/dist/pine-core/p-5ce5836e.system.entry.js +0 -1
- package/dist/pine-core/p-5f3242c8.system.entry.js +0 -1
- package/dist/pine-core/p-60e3b1af.entry.js +0 -1
- package/dist/pine-core/p-7d3a20ba.entry.js +0 -1
- package/dist/pine-core/p-9201b497.system.entry.js +0 -1
- package/dist/pine-core/p-94597b73.entry.js +0 -1
- package/dist/pine-core/p-97be00f4.system.entry.js +0 -1
- package/dist/pine-core/p-9a8971e2.system.entry.js +0 -1
- package/dist/pine-core/p-9a8d2985.system.entry.js +0 -3
- package/dist/pine-core/p-CirzxZ33.js +0 -1
- package/dist/pine-core/p-D52aRqFx.system.js +0 -1
- package/dist/pine-core/p-DCKBKRUy.js +0 -1
- package/dist/pine-core/p-DXO1yd32.system.js +0 -1
- package/dist/pine-core/p-a2078add.entry.js +0 -1
- package/dist/pine-core/p-a48b025a.system.entry.js +0 -1
- package/dist/pine-core/p-ad3b1ec3.entry.js +0 -1
- package/dist/pine-core/p-b017eb99.system.entry.js +0 -1
- package/dist/pine-core/p-b6edfdfe.entry.js +0 -2
- package/dist/pine-core/p-c02a32ec.entry.js +0 -1
- package/dist/pine-core/p-c1da80e5.entry.js +0 -1
- package/dist/pine-core/p-c233866c.system.entry.js +0 -1
- package/dist/pine-core/p-d7930540.entry.js +0 -1
- package/dist/pine-core/p-dfadfcd1.entry.js +0 -1
- package/dist/pine-core/p-e70cb112.system.entry.js +0 -1
- package/dist/pine-core/p-eb93cc6e.entry.js +0 -1
- package/dist/pine-core/p-ebf74c43.system.entry.js +0 -1
- package/dist/pine-core/p-fc743f6e.entry.js +0 -1
- package/dist/pine-core/p-wXfuz0Bd.system.js +0 -1
- /package/dist/esm-es5/{index-m3pqpeWg.js → index-DvN3tyZp.js} +0 -0
- /package/dist/pine-core/{p-m3pqpeWg.js → p-DvN3tyZp.js} +0 -0
- /package/dist/pine-core/{p-DaCT2ssj.system.js → p-vFsJv75D.system.js} +0 -0
package/hydrate/index.mjs
CHANGED
|
@@ -5646,7 +5646,7 @@ var setScopedSSR = (opts) => {
|
|
|
5646
5646
|
var needsScopedSSR = () => scopedSSR;
|
|
5647
5647
|
var scopedSSR = false;
|
|
5648
5648
|
|
|
5649
|
-
const pdsModalCss$1 = () => `.pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop[aria-modal=false]{overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop[aria-modal=false]{-webkit-backdrop-filter:none;backdrop-filter:none}.pds-modal__backdrop[aria-modal=false]::before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);content:"";inset:0;position:fixed;z-index:-1}}.pds-modal__backdrop.open{opacity:1;-webkit-transition-timing-function:var(--pine-motion-easing-out);transition-timing-function:var(--pine-motion-easing-out);visibility:visible}.pds-modal{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--custom{max-width:var(--pds-modal-max-width, 700px)}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}`;
|
|
5649
|
+
const pdsModalCss$1 = () => `.pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop[aria-modal=false]{overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop[aria-modal=false]{-webkit-backdrop-filter:none;backdrop-filter:none}.pds-modal__backdrop[aria-modal=false]::before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);content:"";inset:0;position:fixed;z-index:-1}}.pds-modal__backdrop.open{opacity:1;-webkit-transition-timing-function:var(--pine-motion-easing-out);transition-timing-function:var(--pine-motion-easing-out);visibility:visible}.pds-modal{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--custom{max-width:var(--pds-modal-max-width, 700px)}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}`;
|
|
5650
5650
|
|
|
5651
5651
|
/**
|
|
5652
5652
|
* Mock PdsModal component for testing purposes
|
|
@@ -5752,7 +5752,7 @@ class MockPdsModal {
|
|
|
5752
5752
|
}; }
|
|
5753
5753
|
}
|
|
5754
5754
|
|
|
5755
|
-
/* pds-icons v10.
|
|
5755
|
+
/* pds-icons v10.8.0, ES Modules */
|
|
5756
5756
|
|
|
5757
5757
|
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>";
|
|
5758
5758
|
const calendarSimple = "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='M8 1a1 1 0 0 1 1 1v1h6V2a1 1 0 1 1 2 0v1.002c.476.003.891.013 1.252.042.562.046 1.079.145 1.564.392a4 4 0 0 1 1.748 1.748c.247.485.346 1.002.392 1.564C22 7.29 22 7.954 22 8.758v8.483c0 .805 0 1.47-.044 2.01-.046.563-.145 1.08-.392 1.565a4 4 0 0 1-1.748 1.748c-.485.247-1.002.346-1.564.392-.541.044-1.206.044-2.01.044H7.758c-.805 0-1.47 0-2.01-.044-.563-.046-1.08-.145-1.565-.392a4 4 0 0 1-1.748-1.748c-.247-.485-.346-1.002-.392-1.564C2 18.71 2 18.046 2 17.242V8.758c0-.805 0-1.47.044-2.01.046-.563.145-1.08.392-1.565a4 4 0 0 1 1.748-1.748c.485-.247 1.002-.346 1.564-.392.361-.03.777-.04 1.252-.042V2a1 1 0 0 1 1-1M7 5.002c-.446.003-.795.012-1.089.036-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819C4 7.361 4 7.943 4 8.8V9h16v-.2c0-.857 0-1.439-.038-1.889-.035-.438-.1-.663-.18-.819a2 2 0 0 0-.874-.874c-.156-.08-.38-.145-.819-.18A15 15 0 0 0 17 5.002V6a1 1 0 1 1-2 0V5H9v1a1 1 0 1 1-2 0zM20 11H4v6.2c0 .857 0 1.439.038 1.889.035.438.1.663.18.819a2 2 0 0 0 .874.874c.156.08.38.145.819.18C6.361 21 6.943 21 7.8 21h8.4c.857 0 1.439 0 1.889-.038.438-.035.663-.1.819-.18a2 2 0 0 0 .874-.874c.08-.156.145-.38.18-.819.037-.45.038-1.032.038-1.889z'/></svg>";
|
|
@@ -7125,7 +7125,7 @@ const isSpecTest = () => {
|
|
|
7125
7125
|
|
|
7126
7126
|
const labelCss$5 = () => `:host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
|
|
7127
7127
|
|
|
7128
|
-
const pdsCheckboxCss = () => `:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input
|
|
7128
|
+
const pdsCheckboxCss = () => `:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}:host(.is-indeterminate) input:disabled::after{border-color:var(--pine-color-border)}:host(.is-indeterminate) input::after{border:var(--pine-border-width-none);-webkit-border-before:var(--pine-border-width) solid var(--pine-color-text-primary);border-block-start:var(--pine-border-width) solid var(--pine-color-text-primary);content:"";display:block;height:0;inset:0;margin:auto;position:absolute;-webkit-transform:none;transform:none;width:8px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);-ms-flex:none;flex:none;height:var(--pine-dimension-sm);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:var(--pine-border-width) solid var(--pine-color-text-primary);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline:0;margin-inline:auto;position:absolute;-webkit-transform:translateY(-60%) rotate(43deg);transform:translateY(-60%) rotate(43deg);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-border)}input:disabled+label{cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{outline:var(--pine-outline-focus)}:host(:not(.is-indeterminate)) input:checked:dir(rtl)::after{-webkit-transform:translateY(-60%) rotate(-43deg);transform:translateY(-60%) rotate(-43deg)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}:host(.has-label-slot) label{-ms-flex-align:center;align-items:center}:host(.has-label-slot) label,:host(.has-label-slot) label>span{min-width:0}:host(.has-label-slot) input{-webkit-margin-before:0;margin-block-start:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-checkbox__message--error{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-checkbox__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}:host(.pds-checkbox--pill){position:relative}:host(.pds-checkbox--pill) label{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);cursor:pointer;font:var(--pine-typography-body);min-block-size:var(--pine-dimension-xl);padding:0 var(--pine-dimension-sm);-webkit-transition:border-color var(--pine-motion-duration-fast) ease;transition:border-color var(--pine-motion-duration-fast) ease}:host(.pds-checkbox--pill) label span{min-width:0;overflow-wrap:anywhere}:host(.pds-checkbox--pill) label:hover{border-color:var(--pine-color-text)}:host(.pds-checkbox--pill) label:has(input:checked){border-color:var(--pine-color-text-active);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active)}:host(.pds-checkbox--pill) label:has(input:focus-visible){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}:host(.pds-checkbox--pill) label:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host(.pds-checkbox--pill) label:has(input:disabled:checked){border-color:var(--pine-color-text-disabled);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled)}@media (forced-colors: active){:host(.pds-checkbox--pill) label:has(input:disabled){border-color:GrayText}:host(.pds-checkbox--pill) label:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}:host(.pds-checkbox--pill) label:has(input:disabled:checked){border-color:GrayText;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}:host(.pds-checkbox--pill) .pds-checkbox__message{-webkit-margin-start:0;margin-inline-start:0}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label{border-color:var(--pine-color-border-danger);color:var(--pine-color-text-active)}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked){border-color:var(--pine-color-border-danger);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger)}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:focus-visible){outline:var(--pine-outline-focus-danger)}@media (forced-colors: active){:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}`;
|
|
7129
7129
|
|
|
7130
7130
|
/**
|
|
7131
7131
|
* @slot label - Content displayed as the checkbox label in place of the `label` text. Clicking it toggles the checkbox.
|
|
@@ -8996,6 +8996,74 @@ const computePosition = (reference, floating, options) => {
|
|
|
8996
8996
|
});
|
|
8997
8997
|
};
|
|
8998
8998
|
|
|
8999
|
+
/**
|
|
9000
|
+
* The native `<dialog>` or open `popover` (as pds-filter's) an element sits in, so a popup portaled
|
|
9001
|
+
* there shares its top layer and a click in it isn't outside it; otherwise `document.body`.
|
|
9002
|
+
* `closest()` stops at shadow boundaries and misses one that only wraps slotted content, so this
|
|
9003
|
+
* walks assigned slots and shadow hosts, as pds-combobox does. `isHost` picks which ancestor counts.
|
|
9004
|
+
*/
|
|
9005
|
+
function findPortalTarget(from, isHost = isOpenDialogOrPopover) {
|
|
9006
|
+
const seen = new Set();
|
|
9007
|
+
let current = from;
|
|
9008
|
+
while (current && !seen.has(current)) {
|
|
9009
|
+
seen.add(current);
|
|
9010
|
+
if (current.nodeType === Node.ELEMENT_NODE && isHost(current)) {
|
|
9011
|
+
return current;
|
|
9012
|
+
}
|
|
9013
|
+
const assigned = current.nodeType === Node.ELEMENT_NODE ? current.assignedSlot : null;
|
|
9014
|
+
if (assigned) {
|
|
9015
|
+
current = assigned;
|
|
9016
|
+
continue;
|
|
9017
|
+
}
|
|
9018
|
+
const parent = current.parentNode;
|
|
9019
|
+
current = parent instanceof ShadowRoot ? parent.host : parent;
|
|
9020
|
+
}
|
|
9021
|
+
return document.body;
|
|
9022
|
+
}
|
|
9023
|
+
/**
|
|
9024
|
+
* A modal dialog or open popover, which paints in the top layer above anything in the body, that
|
|
9025
|
+
* sits in the document itself: the document's stylesheets don't reach into a shadow root.
|
|
9026
|
+
*/
|
|
9027
|
+
function isTopLayerInDocument(el) {
|
|
9028
|
+
if (el.getRootNode() !== el.ownerDocument)
|
|
9029
|
+
return false;
|
|
9030
|
+
return matchesSafely(el, ':modal') || matchesSafely(el, ':popover-open');
|
|
9031
|
+
}
|
|
9032
|
+
/**
|
|
9033
|
+
* Calls `onClose` once `host` leaves the top layer (its dialog closes or its popover hides), and
|
|
9034
|
+
* returns a function that stops listening.
|
|
9035
|
+
*/
|
|
9036
|
+
function onTopLayerClose(host, onClose) {
|
|
9037
|
+
const check = () => {
|
|
9038
|
+
if (!isTopLayerInDocument(host))
|
|
9039
|
+
onClose();
|
|
9040
|
+
};
|
|
9041
|
+
host.addEventListener('close', check);
|
|
9042
|
+
host.addEventListener('toggle', check);
|
|
9043
|
+
return () => {
|
|
9044
|
+
host.removeEventListener('close', check);
|
|
9045
|
+
host.removeEventListener('toggle', check);
|
|
9046
|
+
};
|
|
9047
|
+
}
|
|
9048
|
+
function isOpenDialogOrPopover(el) {
|
|
9049
|
+
// Only an open dialog: inside a closed one, the popup would be hidden with it.
|
|
9050
|
+
if (el.localName === 'dialog')
|
|
9051
|
+
return el.open;
|
|
9052
|
+
return el.hasAttribute('popover') && matchesSafely(el, ':popover-open');
|
|
9053
|
+
}
|
|
9054
|
+
function matchesSafely(el, selector) {
|
|
9055
|
+
try {
|
|
9056
|
+
return el.matches(selector);
|
|
9057
|
+
}
|
|
9058
|
+
catch (_a) {
|
|
9059
|
+
// A browser without the selector (no Popover API, or no :modal): no top layer to share.
|
|
9060
|
+
return false;
|
|
9061
|
+
}
|
|
9062
|
+
}
|
|
9063
|
+
|
|
9064
|
+
// Controls that clipped text can sit inside that already take focus, so the text adds no tab stop of its own.
|
|
9065
|
+
// Not any `[tabindex]`: a focusable scroll region full of chips would show every chip's tooltip at once.
|
|
9066
|
+
const FOCUSABLE_WRAPPER = 'a[href], button, summary, pds-button, pds-link, pds-tab, pds-dropdown-menu-item, [role="option"], [role="treeitem"]';
|
|
8999
9067
|
/** CSS class prefix used for truncation tooltip portal elements */
|
|
9000
9068
|
const TOOLTIP_CLASS = 'pds-truncation-tooltip';
|
|
9001
9069
|
/**
|
|
@@ -9005,7 +9073,8 @@ const TOOLTIP_CLASS = 'pds-truncation-tooltip';
|
|
|
9005
9073
|
*
|
|
9006
9074
|
* Z-Index Strategy:
|
|
9007
9075
|
* Uses --pine-z-index-nuclear (9999) to ensure tooltips appear above all other UI elements.
|
|
9008
|
-
* This is necessary because tooltips are portaled to document.body
|
|
9076
|
+
* This is necessary because tooltips are portaled to document.body, or into the modal dialog or
|
|
9077
|
+
* open popover around the host (the top layer, which no z-index reaches from the body), and must overlay:
|
|
9009
9078
|
* - Modal dialogs
|
|
9010
9079
|
* - Dropdown menus
|
|
9011
9080
|
* - Other floating UI elements
|
|
@@ -9045,6 +9114,15 @@ function injectStyles() {
|
|
|
9045
9114
|
opacity: 1;
|
|
9046
9115
|
visibility: visible;
|
|
9047
9116
|
}
|
|
9117
|
+
:is(dialog, [popover]) > .${TOOLTIP_CLASS} {
|
|
9118
|
+
font-style: normal;
|
|
9119
|
+
font-weight: normal;
|
|
9120
|
+
text-align: start;
|
|
9121
|
+
text-indent: 0;
|
|
9122
|
+
text-transform: none;
|
|
9123
|
+
white-space: normal;
|
|
9124
|
+
word-spacing: normal;
|
|
9125
|
+
}
|
|
9048
9126
|
`;
|
|
9049
9127
|
document.head.appendChild(style);
|
|
9050
9128
|
}
|
|
@@ -9071,7 +9149,8 @@ function isFocusVisible(el) {
|
|
|
9071
9149
|
*
|
|
9072
9150
|
* When the element's text overflows, hovering the host element or giving it
|
|
9073
9151
|
* keyboard focus will display a tooltip showing the full text content. The
|
|
9074
|
-
* tooltip is rendered as a portal on document.body
|
|
9152
|
+
* tooltip is rendered as a portal on document.body, or in the modal dialog or open popover around
|
|
9153
|
+
* the host, and positioned with Floating UI.
|
|
9075
9154
|
*
|
|
9076
9155
|
* Also owns the element's `tabindex` while it is clipped — see syncTabIndex.
|
|
9077
9156
|
*
|
|
@@ -9081,6 +9160,7 @@ function setupTruncationTooltip(options) {
|
|
|
9081
9160
|
const { hostEl, contentEl, getTooltipText, placement = 'top', reference = hostEl, manageTabIndex = true, focusEl = hostEl } = options;
|
|
9082
9161
|
injectStyles();
|
|
9083
9162
|
let portalEl = null;
|
|
9163
|
+
let stopWatchingPortalHost = null;
|
|
9084
9164
|
let isHovering = false;
|
|
9085
9165
|
let isHoveringPortal = false;
|
|
9086
9166
|
let isFocused = false;
|
|
@@ -9159,7 +9239,11 @@ function setupTruncationTooltip(options) {
|
|
|
9159
9239
|
contentDiv.className = `${TOOLTIP_CLASS}__content`;
|
|
9160
9240
|
contentDiv.textContent = text.trim();
|
|
9161
9241
|
portalEl.appendChild(contentDiv);
|
|
9162
|
-
|
|
9242
|
+
const portalHost = findPortalTarget(hostEl, isTopLayerInDocument);
|
|
9243
|
+
portalHost.appendChild(portalEl);
|
|
9244
|
+
// Closing that host moves no pointer, so a tooltip opened by touch would outlive it unseen.
|
|
9245
|
+
if (portalHost !== document.body)
|
|
9246
|
+
stopWatchingPortalHost = onTopLayerClose(portalHost, closeWithPortalHost);
|
|
9163
9247
|
// Allow the user to hover into the tooltip to select/copy text
|
|
9164
9248
|
portalEl.addEventListener('mouseenter', handlePortalMouseEnter);
|
|
9165
9249
|
portalEl.addEventListener('mouseleave', handlePortalMouseLeave);
|
|
@@ -9198,6 +9282,10 @@ function setupTruncationTooltip(options) {
|
|
|
9198
9282
|
}
|
|
9199
9283
|
}
|
|
9200
9284
|
function removePortal() {
|
|
9285
|
+
if (stopWatchingPortalHost !== null) {
|
|
9286
|
+
stopWatchingPortalHost();
|
|
9287
|
+
stopWatchingPortalHost = null;
|
|
9288
|
+
}
|
|
9201
9289
|
if (portalEl) {
|
|
9202
9290
|
portalEl.removeEventListener('mouseenter', handlePortalMouseEnter);
|
|
9203
9291
|
portalEl.removeEventListener('mouseleave', handlePortalMouseLeave);
|
|
@@ -9231,6 +9319,14 @@ function setupTruncationTooltip(options) {
|
|
|
9231
9319
|
return;
|
|
9232
9320
|
removePortal();
|
|
9233
9321
|
}
|
|
9322
|
+
// Hover and focus can't outlast a host that's no longer shown, so none of them keeps it open.
|
|
9323
|
+
function closeWithPortalHost() {
|
|
9324
|
+
isHovering = false;
|
|
9325
|
+
isHoveringPortal = false;
|
|
9326
|
+
isFocused = false;
|
|
9327
|
+
cancelHideTimeout();
|
|
9328
|
+
removePortal();
|
|
9329
|
+
}
|
|
9234
9330
|
/**
|
|
9235
9331
|
* Schedules tooltip removal after a short delay.
|
|
9236
9332
|
*
|
|
@@ -9262,11 +9358,18 @@ function setupTruncationTooltip(options) {
|
|
|
9262
9358
|
isHoveringPortal = false;
|
|
9263
9359
|
scheduleHide();
|
|
9264
9360
|
}
|
|
9361
|
+
// A second tab stop inside focusEl, such as another clipped text, bubbles its focus here too. Its event.target is
|
|
9362
|
+
// retargeted to the stop's outermost element in focusEl's tree, which sits beside hostEl rather than around or in it.
|
|
9363
|
+
function isFocusForHost(target) {
|
|
9364
|
+
return focusEl === hostEl || target === focusEl || target.contains(hostEl) || hostEl.contains(target);
|
|
9365
|
+
}
|
|
9265
9366
|
// Keyboard focus only: focus from a click would pin the tooltip open after the pointer leaves.
|
|
9266
9367
|
// Events from inside a shadow root arrive retargeted to its host, so test the innermost target.
|
|
9267
9368
|
function showForVisibleFocus(event) {
|
|
9268
9369
|
if (!isFocusVisible(event.composedPath()[0]))
|
|
9269
9370
|
return;
|
|
9371
|
+
if (!isFocusForHost(event.target))
|
|
9372
|
+
return;
|
|
9270
9373
|
isFocused = true;
|
|
9271
9374
|
showTooltip();
|
|
9272
9375
|
}
|
|
@@ -9326,9 +9429,6 @@ const SENTIMENT_DOT_COLORS = {
|
|
|
9326
9429
|
success: 'var(--pine-chip-color-success-dot)',
|
|
9327
9430
|
warning: 'var(--pine-chip-color-warning-dot)',
|
|
9328
9431
|
};
|
|
9329
|
-
// Controls a chip can sit inside that already take focus, so a clipped label adds no tab stop of its own.
|
|
9330
|
-
// Not any `[tabindex]`: a focusable scroll region full of chips would show every chip's tooltip at once.
|
|
9331
|
-
const FOCUSABLE_WRAPPER = 'a[href], button, summary, pds-button, pds-link, pds-tab, pds-dropdown-menu-item, [role="option"]';
|
|
9332
9432
|
// Beside the listbox and level with the option, so the tooltip never covers the other options.
|
|
9333
9433
|
function besideListbox(wrapper) {
|
|
9334
9434
|
const option = (wrapper === null || wrapper === void 0 ? void 0 : wrapper.matches('[role="option"]')) ? wrapper : null;
|
|
@@ -9416,12 +9516,14 @@ class PdsChip {
|
|
|
9416
9516
|
this.destroyTruncationTooltip();
|
|
9417
9517
|
if (this.labelTextEl) {
|
|
9418
9518
|
const wrapper = this.el.closest(FOCUSABLE_WRAPPER);
|
|
9519
|
+
// Hidden from assistive tech, a tab stop would be focusable with no name; hover still reveals it.
|
|
9520
|
+
const hidden = this.el.closest('[aria-hidden="true"]') !== null;
|
|
9419
9521
|
this.truncationCleanup = setupTruncationTooltip(Object.assign({ hostEl: this.el, contentEl: this.labelTextEl, getTooltipText: () => this.el.textContent || '',
|
|
9420
9522
|
// The dropdown variant's label span already sits inside
|
|
9421
9523
|
// `<button class="pds-chip__button">`, which is already focusable and
|
|
9422
9524
|
// bubbles focusin to the host — a tabindex on the span too would nest
|
|
9423
9525
|
// a second tab stop inside the button.
|
|
9424
|
-
manageTabIndex: this.effectiveVariant !== 'dropdown' && !wrapper,
|
|
9526
|
+
manageTabIndex: this.effectiveVariant !== 'dropdown' && !wrapper && !hidden,
|
|
9425
9527
|
// A wrapping control sits outside the host, so its focus never reaches the host's listener.
|
|
9426
9528
|
focusEl: wrapper !== null && wrapper !== void 0 ? wrapper : this.el }, besideListbox(wrapper)));
|
|
9427
9529
|
this.tooltipBoundEl = this.labelTextEl;
|
|
@@ -9555,7 +9657,7 @@ class PdsChip {
|
|
|
9555
9657
|
const hostClass = this.classNames();
|
|
9556
9658
|
const hostStyles = this.hostStyles;
|
|
9557
9659
|
this.hostKeeper.record(hostClass, hostStyles);
|
|
9558
|
-
return (hAsync(Host, { key: '
|
|
9660
|
+
return (hAsync(Host, { key: '0e6b05bfeae1d3b7d5cc23e71aaad2fa00fc7ddf', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
|
|
9559
9661
|
}
|
|
9560
9662
|
get el() { return getElement(this); }
|
|
9561
9663
|
static get style() { return pdsChipTokensCss() + pdsChipCss(); }
|
|
@@ -11004,6 +11106,44 @@ function groupIconOf(optgroup) {
|
|
|
11004
11106
|
function optionIconOf(option) {
|
|
11005
11107
|
return iconOf(option);
|
|
11006
11108
|
}
|
|
11109
|
+
/** Every `pds-chip` sentiment: a sentiment added to `ChipSentimentType` fails to compile until it's listed. */
|
|
11110
|
+
const BADGE_SENTIMENTS = {
|
|
11111
|
+
accent: true,
|
|
11112
|
+
brand: true,
|
|
11113
|
+
danger: true,
|
|
11114
|
+
info: true,
|
|
11115
|
+
neutral: true,
|
|
11116
|
+
solid: true,
|
|
11117
|
+
subtle: true,
|
|
11118
|
+
success: true,
|
|
11119
|
+
warning: true,
|
|
11120
|
+
};
|
|
11121
|
+
const isBadgeSentiment = (value) => value !== null && Object.prototype.hasOwnProperty.call(BADGE_SENTIMENTS, value);
|
|
11122
|
+
/**
|
|
11123
|
+
* An option's badge from its `data-badge*` attributes, or null without a label. An unknown
|
|
11124
|
+
* sentiment falls back to `neutral`, and an icon that isn't a Pine icon name is dropped: the
|
|
11125
|
+
* badge is a `pds-chip`, whose `icon` also loads URLs.
|
|
11126
|
+
*/
|
|
11127
|
+
function optionBadgeOf(option) {
|
|
11128
|
+
return badgeOf(option);
|
|
11129
|
+
}
|
|
11130
|
+
/** An optgroup's badge from its `data-badge*` attributes, or null; the same check as an option's. */
|
|
11131
|
+
function groupBadgeOf(optgroup) {
|
|
11132
|
+
return badgeOf(optgroup);
|
|
11133
|
+
}
|
|
11134
|
+
function badgeOf(element) {
|
|
11135
|
+
var _a;
|
|
11136
|
+
const label = (_a = element.getAttribute('data-badge')) === null || _a === void 0 ? void 0 : _a.trim();
|
|
11137
|
+
if (label === undefined || label === '')
|
|
11138
|
+
return null;
|
|
11139
|
+
const sentiment = element.getAttribute('data-badge-sentiment');
|
|
11140
|
+
const icon = element.getAttribute('data-badge-icon');
|
|
11141
|
+
return {
|
|
11142
|
+
label,
|
|
11143
|
+
sentiment: isBadgeSentiment(sentiment) ? sentiment : 'neutral',
|
|
11144
|
+
icon: icon !== null && PINE_ICON_NAME$1.test(icon) ? icon : null,
|
|
11145
|
+
};
|
|
11146
|
+
}
|
|
11007
11147
|
function iconOf(element) {
|
|
11008
11148
|
const icon = element.getAttribute('data-icon');
|
|
11009
11149
|
return icon !== null && PINE_ICON_NAME$1.test(icon) ? icon : null;
|
|
@@ -11040,7 +11180,7 @@ function buildPanelEntries(items, position) {
|
|
|
11040
11180
|
if (optgroup !== null) {
|
|
11041
11181
|
let group = groups.get(optgroup);
|
|
11042
11182
|
if (!group) {
|
|
11043
|
-
group = { optgroup, label: optgroup.label, icon: groupIconOf(optgroup), options: [] };
|
|
11183
|
+
group = { optgroup, label: optgroup.label, icon: groupIconOf(optgroup), badge: groupBadgeOf(optgroup), options: [] };
|
|
11044
11184
|
groups.set(optgroup, group);
|
|
11045
11185
|
entries.push({ kind: 'group', group });
|
|
11046
11186
|
}
|
|
@@ -11265,7 +11405,7 @@ class FlyoutController {
|
|
|
11265
11405
|
}
|
|
11266
11406
|
}
|
|
11267
11407
|
|
|
11268
|
-
const pdsComboboxCss = () => `:host{display:block}:host([truncate]){display:block;min-width:0}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-950)}.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled){border-color:var(--pine-color-border-danger)}.pds-combobox__input.pds-combobox__input--invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:calc(var(--pine-z-index-raised) - 1)}.pds-combobox__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error pds-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-combobox__listbox{background:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-background-muted)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-background-muted)}.pds-combobox__option--disabled,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger,.pds-combobox__group-back--disabled>.pds-combobox__group-back-trigger,.pds-combobox__group--disabled>.pds-combobox__group-label{color:var(--pine-color-text-disabled)}.pds-combobox__option--disabled{cursor:not-allowed}.pds-combobox__option--disabled .pds-combobox__option-chip,.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper{opacity:0.5}.pds-combobox__option-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__option-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--truncate .pds-combobox__option-label{-ms-flex:1 1 auto;flex:1 1 auto;overflow-wrap:normal}.pds-combobox__listbox--truncate .pds-combobox__option-check{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group{list-style:none;-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150)}.pds-combobox__group:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group-list{list-style:none;margin:0;padding:0}.pds-combobox__listbox--grouped .pds-combobox__group-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs)}.pds-combobox__group-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__group-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__group-row{list-style:none;position:relative}.pds-combobox__group-row-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.pds-combobox__group-row-trigger,.pds-combobox__group-row--has-selection>.pds-combobox__group-row-trigger,.pds-combobox__group-row--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-back--highlighted>.pds-combobox__group-row-trigger{background:var(--pine-color-background-muted)}.pds-combobox__listbox--pointer-hover .pds-combobox__group-row-trigger:hover{background:var(--pine-color-background-muted)}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out{overflow-x:hidden}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out:dir(rtl){--pds-combobox-drill-from:var(--pine-dimension-sm)}.pds-combobox__listbox--drill-out,.pds-combobox__listbox--drill-in:dir(rtl){--pds-combobox-drill-from:calc(var(--pine-dimension-sm) * -1)}.pds-combobox__listbox--drill-in .pds-combobox__drill-in-options>li,.pds-combobox__listbox--drill-in .pds-combobox__group-back-trigger,.pds-combobox__listbox--drill-out>li{-webkit-animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}@keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__group-row-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0}.pds-combobox__group-row-caret{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--grouped,.pds-combobox__flyout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);padding:var(--pine-dimension-2xs)}.pds-combobox__flyout{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;overflow-y:auto;position:fixed;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1}.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:0}.pds-combobox__listbox-options{-ms-flex:1;flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-combobox__listbox-options.pds-combobox__listbox--grouped{padding:var(--pine-dimension-2xs)}.pds-combobox__panel-search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-sm)}.pds-combobox__panel-search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:0;flex-shrink:0}.pds-combobox__panel-search:focus-within{border-block-end-color:var(--pine-color-border-active)}.pds-combobox__panel-search-input{background:transparent;border:0;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:0;outline:none;padding:0}.pds-combobox__panel-search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none}.pds-combobox__group-back-trigger{-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in.pds-combobox__listbox--grouped{-webkit-padding-before:0;padding-block-start:0}.pds-combobox__listbox-options--drilled-in:focus{outline:none}.pds-combobox__listbox-options--drilled-in:focus .pds-combobox__group-back-trigger{border-block-end-color:var(--pine-color-border-active)}:where(.pds-combobox__listbox-options--drilled-in) .pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay);-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);border-radius:0;color:var(--pine-color-text-strong);font:var(--pine-typography-body);inset-block-start:0;letter-spacing:var(--pine-letter-spacing);margin-inline:calc(var(--pine-dimension-2xs) * -1);padding:var(--pine-dimension-sm);position:-webkit-sticky;position:sticky;z-index:1}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none;margin:0;padding:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}:host(.pds-combobox-dropdown-portal) .pds-combobox__listbox{position:fixed;z-index:var(--pine-z-index-priority)}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;text-align:start}.pds-combobox__button-trigger-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__button-trigger-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger--truncate{max-width:100%}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-label{overflow-wrap:normal}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-chevron{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger-text,.pds-combobox__listbox--truncate .pds-combobox__option-text{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150)}.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder{color:var(--pine-color-text-muted)}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:"";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}`;
|
|
11408
|
+
const pdsComboboxCss = () => `:host{display:block}:host([truncate]){display:block;min-width:0}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-950)}.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled){border-color:var(--pine-color-border-danger)}.pds-combobox__input.pds-combobox__input--invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:calc(var(--pine-z-index-raised) - 1)}.pds-combobox__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error pds-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-combobox__listbox{background:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-background-muted)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-background-muted)}.pds-combobox__option--disabled,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger,.pds-combobox__group-back--disabled>.pds-combobox__group-back-trigger,.pds-combobox__group--disabled>.pds-combobox__group-label{color:var(--pine-color-text-disabled)}.pds-combobox__option--disabled{cursor:not-allowed}.pds-combobox__option--disabled .pds-combobox__option-chip,.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper,.pds-combobox__option--disabled .pds-combobox__option-badge,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger>.pds-combobox__group-badge,.pds-combobox__group--disabled>.pds-combobox__group-label>.pds-combobox__group-badge{opacity:0.5}.pds-combobox__option-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__option-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--truncate .pds-combobox__option-label{-ms-flex:1 1 auto;flex:1 1 auto;overflow-wrap:normal}.pds-combobox__listbox--truncate .pds-combobox__option-check{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__option--with-badge{-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs)}.pds-combobox__option-badge,.pds-combobox__group-badge{-ms-flex-negative:0;flex-shrink:0;isolation:isolate;margin-block:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:auto;margin-inline-start:auto}.pds-combobox__option--with-badge .pds-combobox__option-check{-webkit-margin-start:calc(var(--pine-dimension-150) - var(--pine-dimension-xs));margin-inline-start:calc(var(--pine-dimension-150) - var(--pine-dimension-xs))}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group{list-style:none;-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150)}.pds-combobox__group:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group-list{list-style:none;margin:0;padding:0}.pds-combobox__listbox--grouped .pds-combobox__group-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs)}.pds-combobox__group-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__group-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__group-label--with-badge{-ms-flex-align:center;align-items:center;-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}.pds-combobox__group-label-text{min-width:0;overflow-wrap:anywhere}.pds-combobox__group-label>.pds-combobox__group-badge{margin-block:calc(var(--pine-dimension-xs) * -1);text-transform:none}.pds-combobox__group-row{list-style:none;position:relative}.pds-combobox__group-row-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.pds-combobox__group-row-trigger,.pds-combobox__group-row--has-selection>.pds-combobox__group-row-trigger,.pds-combobox__group-row--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-back--highlighted>.pds-combobox__group-row-trigger{background:var(--pine-color-background-muted)}.pds-combobox__listbox--pointer-hover .pds-combobox__group-row-trigger:hover{background:var(--pine-color-background-muted)}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out{overflow-x:hidden}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out:dir(rtl){--pds-combobox-drill-from:var(--pine-dimension-sm)}.pds-combobox__listbox--drill-out,.pds-combobox__listbox--drill-in:dir(rtl){--pds-combobox-drill-from:calc(var(--pine-dimension-sm) * -1)}.pds-combobox__listbox--drill-in .pds-combobox__drill-in-options>li,.pds-combobox__listbox--drill-in .pds-combobox__group-back-trigger,.pds-combobox__listbox--drill-out>li{-webkit-animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}@keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__group-row-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__group-row-caret{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--grouped,.pds-combobox__flyout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);padding:var(--pine-dimension-2xs)}.pds-combobox__flyout{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;overflow-y:auto;position:fixed;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1}.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:0}.pds-combobox__listbox-options{-ms-flex:1;flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-combobox__listbox-options.pds-combobox__listbox--grouped{padding:var(--pine-dimension-2xs)}.pds-combobox__panel-search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-sm)}.pds-combobox__panel-search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:0;flex-shrink:0}.pds-combobox__panel-search:focus-within{border-block-end-color:var(--pine-color-border-active)}.pds-combobox__panel-search-input{background:transparent;border:0;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:0;outline:none;padding:0}.pds-combobox__panel-search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none}.pds-combobox__group-back-trigger{-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in.pds-combobox__listbox--grouped{-webkit-padding-before:0;padding-block-start:0}.pds-combobox__listbox-options--drilled-in:focus{outline:none}.pds-combobox__listbox-options--drilled-in:focus .pds-combobox__group-back-trigger{border-block-end-color:var(--pine-color-border-active)}:where(.pds-combobox__listbox-options--drilled-in) .pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay);-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);border-radius:0;color:var(--pine-color-text-strong);font:var(--pine-typography-body);inset-block-start:0;letter-spacing:var(--pine-letter-spacing);margin-inline:calc(var(--pine-dimension-2xs) * -1);padding:var(--pine-dimension-sm);position:-webkit-sticky;position:sticky;z-index:1}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none;margin:0;padding:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}:host(.pds-combobox-dropdown-portal) .pds-combobox__listbox{position:fixed;z-index:var(--pine-z-index-priority)}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;text-align:start}.pds-combobox__button-trigger-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__button-trigger-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger--truncate{max-width:100%}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-label{overflow-wrap:normal}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-chevron{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger-text,.pds-combobox__listbox--truncate .pds-combobox__option-text{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150)}.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder{color:var(--pine-color-text-muted)}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:"";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}`;
|
|
11269
11409
|
|
|
11270
11410
|
/**
|
|
11271
11411
|
* @slot option - Option elements for the combobox dropdown
|
|
@@ -12399,6 +12539,7 @@ class PdsCombobox {
|
|
|
12399
12539
|
// Only strings group an option or name an icon; anything else from JS is ignored, not coerced.
|
|
12400
12540
|
if (typeof opt.icon === 'string' && opt.icon !== '')
|
|
12401
12541
|
optionEl.setAttribute('data-icon', opt.icon);
|
|
12542
|
+
this.setBadgeAttributes(optionEl, opt.badge);
|
|
12402
12543
|
if (typeof opt.group !== 'string' || opt.group === '') {
|
|
12403
12544
|
ungrouped.push(optionEl);
|
|
12404
12545
|
this.panelPositions.set(optionEl, position);
|
|
@@ -12415,6 +12556,8 @@ class PdsCombobox {
|
|
|
12415
12556
|
if (!optgroup.hasAttribute('data-icon') && typeof opt.groupIcon === 'string' && opt.groupIcon !== '') {
|
|
12416
12557
|
optgroup.setAttribute('data-icon', opt.groupIcon);
|
|
12417
12558
|
}
|
|
12559
|
+
if (!optgroup.hasAttribute('data-badge'))
|
|
12560
|
+
this.setBadgeAttributes(optgroup, opt.groupBadge);
|
|
12418
12561
|
optgroup.appendChild(optionEl);
|
|
12419
12562
|
});
|
|
12420
12563
|
[...ungrouped, ...groupEntries].forEach(entry => {
|
|
@@ -12903,7 +13046,10 @@ class PdsCombobox {
|
|
|
12903
13046
|
};
|
|
12904
13047
|
const reveal = () => {
|
|
12905
13048
|
e.preventDefault();
|
|
12906
|
-
|
|
13049
|
+
// The row's name, badge and all, as the row itself is named.
|
|
13050
|
+
const optgroup = current;
|
|
13051
|
+
const badge = groupBadgeOf(optgroup);
|
|
13052
|
+
this.revealedGroupLabel = badge === null ? optgroup.label : `${optgroup.label}, ${badge.label}`;
|
|
12907
13053
|
return true;
|
|
12908
13054
|
};
|
|
12909
13055
|
switch (e.key) {
|
|
@@ -13452,11 +13598,16 @@ class PdsCombobox {
|
|
|
13452
13598
|
return;
|
|
13453
13599
|
const { optgroup, key, options, members } = group;
|
|
13454
13600
|
const groupIcon = groupIconOf(optgroup);
|
|
13601
|
+
const badge = groupBadgeOf(optgroup);
|
|
13455
13602
|
// As in the grouped displays: disabled when there's nothing left in it to choose.
|
|
13456
13603
|
const disabled = members.length > 0 && members.every(member => isOptionDisabled(member));
|
|
13457
|
-
rendered.push(hAsync("li", { key: key, class: { 'pds-combobox__group': true, 'pds-combobox__group--disabled': disabled }, role: "group", "aria-label": optgroup.label, "aria-disabled": disabled ? 'true' : undefined }, hAsync("div", { class: {
|
|
13604
|
+
rendered.push(hAsync("li", { key: key, class: { 'pds-combobox__group': true, 'pds-combobox__group--disabled': disabled }, role: "group", "aria-label": badge === null ? optgroup.label : `${optgroup.label}, ${badge.label}`, "aria-disabled": disabled ? 'true' : undefined }, hAsync("div", { class: {
|
|
13605
|
+
'pds-combobox__group-label': true,
|
|
13606
|
+
'pds-combobox__group-label--with-icon': groupIcon !== null,
|
|
13607
|
+
'pds-combobox__group-label--with-badge': badge !== null,
|
|
13608
|
+
}, "aria-hidden": "true" }, groupIcon !== null && (
|
|
13458
13609
|
// `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
|
|
13459
|
-
hAsync("pds-icon", { name: groupIcon, size: "small", "aria-hidden": "true", class: "pds-combobox__group-icon" })), optgroup.label), hAsync("ul", { class: "pds-combobox__group-list", role: "presentation" }, options)));
|
|
13610
|
+
hAsync("pds-icon", { name: groupIcon, size: "small", "aria-hidden": "true", class: "pds-combobox__group-icon" })), badge === null ? optgroup.label : hAsync("span", { class: "pds-combobox__group-label-text" }, optgroup.label), this.renderBadge(badge, 'pds-combobox__group-badge')), hAsync("ul", { class: "pds-combobox__group-list", role: "presentation" }, options)));
|
|
13460
13611
|
group = null;
|
|
13461
13612
|
};
|
|
13462
13613
|
this.filteredItems.forEach((item, itemIdx) => {
|
|
@@ -13582,20 +13733,56 @@ class PdsCombobox {
|
|
|
13582
13733
|
const isChip = this.isOptionChip(option);
|
|
13583
13734
|
const isDisabled = isOptionDisabled(option);
|
|
13584
13735
|
const tree = level !== undefined;
|
|
13585
|
-
|
|
13736
|
+
const badge = isLayout || isChip ? null : optionBadgeOf(option);
|
|
13737
|
+
return (hAsync("li", { key: option.value, id: this.optionDomId(index), role: tree ? 'treeitem' : 'option', "aria-selected": isSelected ? 'true' : tree ? undefined : 'false', "aria-disabled": isDisabled ? 'true' : undefined, "aria-level": level, "aria-setsize": setsize, "aria-posinset": posinset, "aria-label": isLayout || isChip
|
|
13738
|
+
? option.getAttribute('aria-label') || this.getOptionLabel(option)
|
|
13739
|
+
: badge && `${this.getOptionLabel(option)}, ${badge.label}`, tabindex: this.usesBodyPortal || this.usesPanelSearch || tree ? '-1' : isHighlighted ? '0' : '-1', class: {
|
|
13586
13740
|
'pds-combobox__option': true,
|
|
13587
13741
|
'pds-combobox__option--highlighted': isHighlighted,
|
|
13588
13742
|
'pds-combobox__option--layout': isLayout,
|
|
13589
13743
|
'pds-combobox__option--chip': isChip,
|
|
13590
13744
|
'pds-combobox__option--disabled': isDisabled,
|
|
13591
|
-
|
|
13745
|
+
'pds-combobox__option--with-badge': badge !== null,
|
|
13746
|
+
}, "data-option-index": index, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (hAsync("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : ([this.renderOptionLabel(option), this.renderOptionBadge(option)]), isSelected && hAsync("pds-icon", { icon: "check", size: "regular", "aria-hidden": "true", class: "pds-combobox__option-check" })));
|
|
13592
13747
|
}
|
|
13593
|
-
/**
|
|
13748
|
+
/** Copies an `options` badge to an option's or optgroup's `data-badge*` attributes; only strings count. */
|
|
13749
|
+
setBadgeAttributes(element, badge) {
|
|
13750
|
+
if (typeof badge !== 'object' || badge === null)
|
|
13751
|
+
return;
|
|
13752
|
+
const { label, sentiment, icon } = badge;
|
|
13753
|
+
if (typeof label !== 'string' || label.trim() === '')
|
|
13754
|
+
return;
|
|
13755
|
+
element.setAttribute('data-badge', label);
|
|
13756
|
+
if (typeof sentiment === 'string')
|
|
13757
|
+
element.setAttribute('data-badge-sentiment', sentiment);
|
|
13758
|
+
if (typeof icon === 'string')
|
|
13759
|
+
element.setAttribute('data-badge-icon', icon);
|
|
13760
|
+
}
|
|
13761
|
+
/** An option's badge, after its text. */
|
|
13762
|
+
renderOptionBadge(option) {
|
|
13763
|
+
return this.renderBadge(optionBadgeOf(option), 'pds-combobox__option-badge');
|
|
13764
|
+
}
|
|
13765
|
+
/** A badge as a `pds-chip`: after an option's text, or a group's label. */
|
|
13766
|
+
renderBadge(badge, className) {
|
|
13767
|
+
var _a;
|
|
13768
|
+
if (badge === null)
|
|
13769
|
+
return null;
|
|
13770
|
+
return (hAsync("pds-chip", { size: "sm", sentiment: badge.sentiment,
|
|
13771
|
+
// A Pine icon name only, checked by optionBadgeOf; pds-chip's `icon` also loads URLs.
|
|
13772
|
+
icon: (_a = badge.icon) !== null && _a !== void 0 ? _a : undefined,
|
|
13773
|
+
// A long label, often a translated one, truncates rather than squeezing the option's text.
|
|
13774
|
+
maxWidth: "50%", class: className }, badge.label));
|
|
13775
|
+
}
|
|
13776
|
+
/**
|
|
13777
|
+
* An option's text, after its `data-icon` when it has one. Beside a badge the text is always
|
|
13778
|
+
* wrapped, so it can shrink and wrap rather than push the badge out of the row.
|
|
13779
|
+
*/
|
|
13594
13780
|
renderOptionLabel(option) {
|
|
13595
13781
|
const icon = optionIconOf(option);
|
|
13596
13782
|
const label = this.truncate ? (hAsync("span", { key: this.getOptionLabel(option), class: "pds-combobox__option-text" }, this.getOptionLabel(option))) : this.getOptionLabel(option);
|
|
13597
|
-
if (icon === null)
|
|
13598
|
-
return label;
|
|
13783
|
+
if (icon === null) {
|
|
13784
|
+
return optionBadgeOf(option) === null ? label : hAsync("span", { class: "pds-combobox__option-label" }, label);
|
|
13785
|
+
}
|
|
13599
13786
|
return (hAsync("span", { class: "pds-combobox__option-label" }, hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }), label));
|
|
13600
13787
|
}
|
|
13601
13788
|
/** The grouped panel's rows, in the order the panel draws them and the keyboard moves through. */
|
|
@@ -13634,7 +13821,8 @@ class PdsCombobox {
|
|
|
13634
13821
|
}
|
|
13635
13822
|
/**
|
|
13636
13823
|
* Drilled into a group: its treeitem, expanded. Its row reads as a way back ("Back: Tag") and
|
|
13637
|
-
* leads its options.
|
|
13824
|
+
* leads its options. It leaves out the group's badge: the row is a way back, not a group to
|
|
13825
|
+
* choose, and the badge was on the row that opened it. An option's own badge still shows.
|
|
13638
13826
|
*/
|
|
13639
13827
|
renderGroupBackRow(group, { posinset, setsize }) {
|
|
13640
13828
|
const id = this.groupDomId(group.optgroup);
|
|
@@ -13663,9 +13851,9 @@ class PdsCombobox {
|
|
|
13663
13851
|
'pds-combobox__group-row--highlighted': isCurrent && (flyout || this.keyboardNavigating),
|
|
13664
13852
|
'pds-combobox__group-row--keyboard': isCurrent && this.keyboardNavigating,
|
|
13665
13853
|
'pds-combobox__group-row--disabled': disabled,
|
|
13666
|
-
}, role: "treeitem", "aria-expanded": isOpen ? 'true' : 'false', "aria-disabled": disabled ? 'true' : undefined, "aria-level": 1, "aria-posinset": posinset, "aria-setsize": setsize, "aria-labelledby": `${id}-label`, "data-group-index": groupIndex, onMouseEnter: flyout ? this.onGroupRowMouseEnter : undefined, onMouseLeave: flyout ? this.onGroupRowMouseLeave : undefined }, hAsync("div", { class: "pds-combobox__group-row-trigger", "data-group-index": groupIndex, onMouseDown: this.onOptionMouseDown, onMouseEnter: this.onGroupRowTriggerMouseEnter, onClick: this.onGroupRowClick }, hAsync("span", { class: "pds-combobox__group-row-label", id: `${id}-label` }, group.icon !== null && (
|
|
13854
|
+
}, role: "treeitem", "aria-expanded": isOpen ? 'true' : 'false', "aria-disabled": disabled ? 'true' : undefined, "aria-level": 1, "aria-posinset": posinset, "aria-setsize": setsize, "aria-labelledby": group.badge === null ? `${id}-label` : undefined, "aria-label": group.badge === null ? undefined : `${group.label}, ${group.badge.label}`, "data-group-index": groupIndex, onMouseEnter: flyout ? this.onGroupRowMouseEnter : undefined, onMouseLeave: flyout ? this.onGroupRowMouseLeave : undefined }, hAsync("div", { class: "pds-combobox__group-row-trigger", "data-group-index": groupIndex, onMouseDown: this.onOptionMouseDown, onMouseEnter: this.onGroupRowTriggerMouseEnter, onClick: this.onGroupRowClick }, hAsync("span", { class: "pds-combobox__group-row-label", id: `${id}-label` }, group.icon !== null && (
|
|
13667
13855
|
// `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
|
|
13668
|
-
hAsync("pds-icon", { name: group.icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__group-icon" })), group.label), hAsync("pds-icon", { name: "caret-right", size: "regular", "aria-hidden": "true", class: "pds-combobox__group-row-caret" })), isOpen && (hAsync("ul", { class: "pds-combobox__flyout", role: "group", "aria-label": group.label, style: { minWidth: this.flyoutMinWidth, maxWidth: this.flyoutMaxWidth } }, this.renderGroupOptions(group)))));
|
|
13856
|
+
hAsync("pds-icon", { name: group.icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__group-icon" })), group.label), this.renderBadge(group.badge, 'pds-combobox__group-badge'), hAsync("pds-icon", { name: "caret-right", size: "regular", "aria-hidden": "true", class: "pds-combobox__group-row-caret" })), isOpen && (hAsync("ul", { class: "pds-combobox__flyout", role: "group", "aria-label": group.label, style: { minWidth: this.flyoutMinWidth, maxWidth: this.flyoutMaxWidth } }, this.renderGroupOptions(group)))));
|
|
13669
13857
|
}
|
|
13670
13858
|
// Helper method to render the caret icon
|
|
13671
13859
|
renderCaretIcon() {
|
|
@@ -13822,13 +14010,13 @@ class PdsCombobox {
|
|
|
13822
14010
|
]
|
|
13823
14011
|
.filter(Boolean)
|
|
13824
14012
|
.join(' ');
|
|
13825
|
-
return (hAsync(Host, { key: '
|
|
14013
|
+
return (hAsync(Host, { key: '104eb1c4cdca4494b10dea660e27a98b0c18bf64', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '2548ff2b304bb6a5a249b5059a0b60b55cdf2152', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (hAsync("label", { key: '7a261c72452ca7a278e1067e41c6eed52f29edc8', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (hAsync("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, hAsync("input", { ref: el => {
|
|
13826
14014
|
this.inputEl = el;
|
|
13827
14015
|
this.triggerEl = el;
|
|
13828
14016
|
}, class: {
|
|
13829
14017
|
'pds-combobox__input': true,
|
|
13830
14018
|
'pds-combobox__input--invalid': this.isInvalid(),
|
|
13831
|
-
}, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, onMouseEnter: this.truncate ? this.onButtonTriggerMouseEnter : undefined, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: '
|
|
14019
|
+
}, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, onMouseEnter: this.truncate ? this.onButtonTriggerMouseEnter : undefined, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: 'ffd3bc72b34a7278f3fa706a236017a26b86ea3f', style: { display: 'none' } }, hAsync("slot", { key: 'f47a81191ad7fd8c6bf63cf8ef39934cbf7fd28c', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
|
|
13832
14020
|
hAsync("span", { key: "drill-status", class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : ''),
|
|
13833
14021
|
// Its own region: sharing one, revealing a row then opening it would leave the text the
|
|
13834
14022
|
// same, and opening the group would go unannounced.
|
|
@@ -14415,44 +14603,6 @@ class CalendarPortal {
|
|
|
14415
14603
|
}
|
|
14416
14604
|
}
|
|
14417
14605
|
CalendarPortal.className = 'pds-datepicker-calendar-portal';
|
|
14418
|
-
/**
|
|
14419
|
-
* The native `<dialog>` or open `popover` (as pds-filter's) the datepicker sits in, so the
|
|
14420
|
-
* calendar shares its top layer and a click in it isn't outside it; otherwise `document.body`.
|
|
14421
|
-
* `closest()` stops at shadow boundaries and misses one that only wraps slotted content, so this
|
|
14422
|
-
* walks assigned slots and shadow hosts, as pds-combobox does.
|
|
14423
|
-
*/
|
|
14424
|
-
function findPortalTarget(from) {
|
|
14425
|
-
const seen = new Set();
|
|
14426
|
-
let current = from;
|
|
14427
|
-
while (current && !seen.has(current)) {
|
|
14428
|
-
seen.add(current);
|
|
14429
|
-
if (current.nodeType === Node.ELEMENT_NODE && isTopLayerHost(current)) {
|
|
14430
|
-
return current;
|
|
14431
|
-
}
|
|
14432
|
-
const assigned = current.nodeType === Node.ELEMENT_NODE ? current.assignedSlot : null;
|
|
14433
|
-
if (assigned) {
|
|
14434
|
-
current = assigned;
|
|
14435
|
-
continue;
|
|
14436
|
-
}
|
|
14437
|
-
const parent = current.parentNode;
|
|
14438
|
-
current = parent instanceof ShadowRoot ? parent.host : parent;
|
|
14439
|
-
}
|
|
14440
|
-
return document.body;
|
|
14441
|
-
}
|
|
14442
|
-
function isTopLayerHost(el) {
|
|
14443
|
-
// Only an open dialog: inside a closed one, the calendar would be hidden with it.
|
|
14444
|
-
if (el.localName === 'dialog')
|
|
14445
|
-
return el.open;
|
|
14446
|
-
if (!el.hasAttribute('popover'))
|
|
14447
|
-
return false;
|
|
14448
|
-
try {
|
|
14449
|
-
return el.matches(':popover-open');
|
|
14450
|
-
}
|
|
14451
|
-
catch (_a) {
|
|
14452
|
-
// A browser without the Popover API: no top layer to share.
|
|
14453
|
-
return false;
|
|
14454
|
-
}
|
|
14455
|
-
}
|
|
14456
14606
|
|
|
14457
14607
|
const DEFAULT_LABELS = {
|
|
14458
14608
|
'today': 'Today',
|
|
@@ -16664,7 +16814,7 @@ class PdsDropdownMenu {
|
|
|
16664
16814
|
this.currentFocusIndex = -1;
|
|
16665
16815
|
// Return focus to trigger
|
|
16666
16816
|
if (this.isFocusInMenu()) {
|
|
16667
|
-
this.
|
|
16817
|
+
this.focusTrigger();
|
|
16668
16818
|
}
|
|
16669
16819
|
};
|
|
16670
16820
|
// Handle click on the trigger element
|
|
@@ -16715,6 +16865,14 @@ class PdsDropdownMenu {
|
|
|
16715
16865
|
const focused = this.host.getRootNode().activeElement;
|
|
16716
16866
|
return focused != null && this.host.contains(focused);
|
|
16717
16867
|
}
|
|
16868
|
+
// A trigger whose host can't take focus itself, such as pds-chip, passes it to the control inside.
|
|
16869
|
+
focusTrigger() {
|
|
16870
|
+
var _a, _b;
|
|
16871
|
+
this.triggerEl.focus();
|
|
16872
|
+
if (this.host.getRootNode().activeElement === this.triggerEl)
|
|
16873
|
+
return;
|
|
16874
|
+
(_b = (_a = this.triggerEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [href], [tabindex]:not([tabindex="-1"])')) === null || _b === void 0 ? void 0 : _b.focus();
|
|
16875
|
+
}
|
|
16718
16876
|
// Check if a menu item is disabled (handles both component and raw elements)
|
|
16719
16877
|
isItemDisabled(item) {
|
|
16720
16878
|
const tagName = item.tagName.toLowerCase();
|
|
@@ -16810,6 +16968,23 @@ class PdsDropdownMenu {
|
|
|
16810
16968
|
this.focusItemByIndex(prevIndex);
|
|
16811
16969
|
}
|
|
16812
16970
|
}
|
|
16971
|
+
// Unlike the arrow keys, Tab stops at either end of the menu instead of wrapping.
|
|
16972
|
+
adjacentEnabledIndex(fromIndex, step) {
|
|
16973
|
+
for (let index = fromIndex + step; index >= 0 && index < this.menuItems.length; index += step) {
|
|
16974
|
+
if (!this.isItemDisabled(this.menuItems[index]))
|
|
16975
|
+
return index;
|
|
16976
|
+
}
|
|
16977
|
+
return -1;
|
|
16978
|
+
}
|
|
16979
|
+
// An enabled item can still refuse focus (hidden, or a link with no href), so each one is tried in turn.
|
|
16980
|
+
focusAdjacentItem(fromIndex, step) {
|
|
16981
|
+
for (let index = this.adjacentEnabledIndex(fromIndex, step); index !== -1; index = this.adjacentEnabledIndex(index, step)) {
|
|
16982
|
+
this.focusItemByIndex(index);
|
|
16983
|
+
if (this.getFocusedItemIndex() === index)
|
|
16984
|
+
return true;
|
|
16985
|
+
}
|
|
16986
|
+
return false;
|
|
16987
|
+
}
|
|
16813
16988
|
// Escape is taken in document's capture phase, before a modal around the menu hears it on
|
|
16814
16989
|
// document and closes too.
|
|
16815
16990
|
handleEscapeKeyDown(event) {
|
|
@@ -16818,6 +16993,28 @@ class PdsDropdownMenu {
|
|
|
16818
16993
|
event.preventDefault();
|
|
16819
16994
|
this.closeDropdown();
|
|
16820
16995
|
}
|
|
16996
|
+
// Taken in the capture phase, so a modal or popover around the menu that traps Tab finds the key
|
|
16997
|
+
// already handled, or focus back on the trigger with the items hidden.
|
|
16998
|
+
handleTabKeyDown(event) {
|
|
16999
|
+
if (!this.isOpen || event.key !== 'Tab' || event.defaultPrevented)
|
|
17000
|
+
return;
|
|
17001
|
+
const currentIndex = this.getFocusedItemIndex();
|
|
17002
|
+
if (currentIndex === -1) {
|
|
17003
|
+
// The menu sits after the trigger, so Shift+Tab from the trigger leaves it behind. So does Shift+Tab
|
|
17004
|
+
// from outside the menu, where focus stays after a mouse open in Safari.
|
|
17005
|
+
if (event.shiftKey && (document.activeElement === this.triggerEl || !this.isFocusInMenu()))
|
|
17006
|
+
this.closeDropdown();
|
|
17007
|
+
return;
|
|
17008
|
+
}
|
|
17009
|
+
if (this.focusAdjacentItem(currentIndex, event.shiftKey ? -1 : 1)) {
|
|
17010
|
+
event.preventDefault();
|
|
17011
|
+
return;
|
|
17012
|
+
}
|
|
17013
|
+
// Past either end, closing moves focus to the trigger. Shift+Tab stays there; Tab carries on past it.
|
|
17014
|
+
if (event.shiftKey)
|
|
17015
|
+
event.preventDefault();
|
|
17016
|
+
this.closeDropdown();
|
|
17017
|
+
}
|
|
16821
17018
|
// Handle keyboard events for the dropdown
|
|
16822
17019
|
handleKeyDown(event) {
|
|
16823
17020
|
if (!this.isOpen)
|
|
@@ -16857,54 +17054,19 @@ class PdsDropdownMenu {
|
|
|
16857
17054
|
}
|
|
16858
17055
|
}
|
|
16859
17056
|
break;
|
|
16860
|
-
case 'Tab':
|
|
16861
|
-
|
|
16862
|
-
|
|
16863
|
-
|
|
16864
|
-
|
|
16865
|
-
|
|
16866
|
-
// If not on first item, prevent default and go to previous item
|
|
16867
|
-
event.preventDefault();
|
|
16868
|
-
this.focusPreviousItem(); // Use our method that skips disabled items
|
|
16869
|
-
}
|
|
16870
|
-
// If on first item or no item, let natural tab order move back to trigger
|
|
17057
|
+
case 'Tab': {
|
|
17058
|
+
// Tab from an item is handled in handleTabKeyDown; from anywhere else it moves into the menu.
|
|
17059
|
+
if (event.shiftKey || this.getFocusedItemIndex() !== -1)
|
|
17060
|
+
break;
|
|
17061
|
+
if (this.focusAdjacentItem(-1, 1)) {
|
|
17062
|
+
event.preventDefault();
|
|
16871
17063
|
}
|
|
16872
17064
|
else {
|
|
16873
|
-
//
|
|
16874
|
-
|
|
16875
|
-
const isTriggerFocused = activeElement === this.triggerEl;
|
|
16876
|
-
const currentIndex = this.getFocusedItemIndex();
|
|
16877
|
-
if (isTriggerFocused && this.menuItems.length > 0) {
|
|
16878
|
-
// If trigger is focused, move to first non-disabled menu item
|
|
16879
|
-
event.preventDefault();
|
|
16880
|
-
// Find the first non-disabled item
|
|
16881
|
-
let firstFocusableIndex = 0;
|
|
16882
|
-
while (firstFocusableIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstFocusableIndex])) {
|
|
16883
|
-
firstFocusableIndex++;
|
|
16884
|
-
}
|
|
16885
|
-
if (firstFocusableIndex < this.menuItems.length) {
|
|
16886
|
-
this.focusItemByIndex(firstFocusableIndex);
|
|
16887
|
-
}
|
|
16888
|
-
}
|
|
16889
|
-
else if (currentIndex === -1 && this.menuItems.length > 0) {
|
|
16890
|
-
// If no menu item is focused, focus the first non-disabled one
|
|
16891
|
-
event.preventDefault();
|
|
16892
|
-
// Find the first non-disabled item
|
|
16893
|
-
let firstFocusableIndex = 0;
|
|
16894
|
-
while (firstFocusableIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstFocusableIndex])) {
|
|
16895
|
-
firstFocusableIndex++;
|
|
16896
|
-
}
|
|
16897
|
-
if (firstFocusableIndex < this.menuItems.length) {
|
|
16898
|
-
this.focusItemByIndex(firstFocusableIndex);
|
|
16899
|
-
}
|
|
16900
|
-
}
|
|
16901
|
-
else if (currentIndex !== -1) {
|
|
16902
|
-
// Use our method that skips disabled items
|
|
16903
|
-
event.preventDefault();
|
|
16904
|
-
this.focusNextItem();
|
|
16905
|
-
}
|
|
17065
|
+
// With no item to move to, Tab carries on past the menu, as it does past the last item.
|
|
17066
|
+
this.closeDropdown();
|
|
16906
17067
|
}
|
|
16907
17068
|
break;
|
|
17069
|
+
}
|
|
16908
17070
|
}
|
|
16909
17071
|
}
|
|
16910
17072
|
// Handle clicks outside the dropdown to close it
|
|
@@ -16914,7 +17076,7 @@ class PdsDropdownMenu {
|
|
|
16914
17076
|
}
|
|
16915
17077
|
}
|
|
16916
17078
|
render() {
|
|
16917
|
-
return (hAsync(Host, { key: '
|
|
17079
|
+
return (hAsync(Host, { key: 'aa4ce84354cf87638ee46fd7ed69520228b7e656', id: this.componentId }, hAsync("slot", { key: '948800e67d18c8c6cc9e77ef3aeab635c5035453', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), hAsync("pds-box", { key: '3ce2a2879b14aad975cea8ae72fcbf8c3abcf20c', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, hAsync("div", { key: 'ad25fbf4f3c7a24653c229e64fe2ce893a92e4c8', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, hAsync("slot", { key: '35a5903543e08577997b456bcd312bdd009fd8fc', name: "header", onSlotchange: this.handleHeaderSlotChange })), hAsync("div", { key: 'a9593adacf047918c1d87494f8c951a2a4a5f76f', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, hAsync("slot", { key: '8d2def1cc7020608220099f4ced0f44e9838cce8', onSlotchange: this.handleSlotChange })))));
|
|
16918
17080
|
}
|
|
16919
17081
|
get host() { return getElement(this); }
|
|
16920
17082
|
static get style() { return pdsDropdownMenuCss(); }
|
|
@@ -16927,7 +17089,7 @@ class PdsDropdownMenu {
|
|
|
16927
17089
|
"currentFocusIndex": [32],
|
|
16928
17090
|
"hasHeader": [32]
|
|
16929
17091
|
},
|
|
16930
|
-
"$listeners$": [[6, "keydown", "handleEscapeKeyDown"], [8, "keydown", "handleKeyDown"], [8, "click", "handleWindowClick"]],
|
|
17092
|
+
"$listeners$": [[6, "keydown", "handleEscapeKeyDown"], [6, "keydown", "handleTabKeyDown"], [8, "keydown", "handleKeyDown"], [8, "click", "handleWindowClick"]],
|
|
16931
17093
|
"$lazyBundleId$": "-",
|
|
16932
17094
|
"$attrsToReflect$": []
|
|
16933
17095
|
}; }
|
|
@@ -17940,12 +18102,16 @@ const pdsIconContent = new Map();
|
|
|
17940
18102
|
|
|
17941
18103
|
const pdsIconCss = () => `:host{--dimension-icon-height:16px;--dimension-icon-width:16px;--color-icon-fill:currentColor;contain:strict;display:inline-block;fill:var(--color-icon-fill);-ms-flex-negative:0;flex-shrink:0;height:var(--dimension-icon-height);width:var(--dimension-icon-width)}:host .pdsicon{fill:var(--color-icon-fill)}.pds-icon-fill-none{fill:none}.icon-inner,.pds-icon,svg{display:block;height:100%;width:100%}:host(.flip-rtl):host-context([dir=rtl]) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.flip-rtl:dir(rtl)) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.flip-rtl:dir(ltr)) .icon-inner{-webkit-transform:scaleX(1);transform:scaleX(1)}`;
|
|
17942
18104
|
|
|
18105
|
+
// The attributes that give an icon its own accessible name.
|
|
18106
|
+
const NAMING_ATTRIBUTES = ['aria-label', 'aria-labelledby'];
|
|
17943
18107
|
class PdsIcon {
|
|
17944
18108
|
constructor(hostRef) {
|
|
17945
18109
|
registerInstance(this, hostRef);
|
|
17946
18110
|
this.didLoadIcon = false;
|
|
17947
18111
|
this.iconName = null;
|
|
18112
|
+
this.warnedUnnamedFocusable = false;
|
|
17948
18113
|
this.inheritedAttributes = {}; // eslint-disable-line @typescript-eslint/no-explicit-any
|
|
18114
|
+
this.isFocusable = false;
|
|
17949
18115
|
this.isVisible = false;
|
|
17950
18116
|
/**
|
|
17951
18117
|
* The size of the icon. This can be
|
|
@@ -17954,10 +18120,6 @@ class PdsIcon {
|
|
|
17954
18120
|
*
|
|
17955
18121
|
*/
|
|
17956
18122
|
this.size = 'regular';
|
|
17957
|
-
this.hasAriaHidden = () => {
|
|
17958
|
-
const { el } = this;
|
|
17959
|
-
return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';
|
|
17960
|
-
};
|
|
17961
18123
|
}
|
|
17962
18124
|
iconSize() {
|
|
17963
18125
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -17996,9 +18158,9 @@ class PdsIcon {
|
|
|
17996
18158
|
}, 500);
|
|
17997
18159
|
}
|
|
17998
18160
|
componentWillLoad() {
|
|
17999
|
-
this.inheritedAttributes = inheritAttributes(this.el,
|
|
18161
|
+
this.inheritedAttributes = inheritAttributes(this.el, NAMING_ATTRIBUTES);
|
|
18162
|
+
this.isFocusable = this.el.hasAttribute('tabindex');
|
|
18000
18163
|
this.setCSSVariables();
|
|
18001
|
-
this.setupInitialAriaLabel();
|
|
18002
18164
|
}
|
|
18003
18165
|
setCSSVariables() {
|
|
18004
18166
|
var _a;
|
|
@@ -18007,6 +18169,7 @@ class PdsIcon {
|
|
|
18007
18169
|
this.el.style.setProperty(`--color-icon-fill`, (_a = normalizeColorValue(this.color)) !== null && _a !== void 0 ? _a : 'currentColor');
|
|
18008
18170
|
}
|
|
18009
18171
|
connectedCallback() {
|
|
18172
|
+
this.observeNamingAttributes();
|
|
18010
18173
|
// Handle re-connection during client-side navigation
|
|
18011
18174
|
if (!this.isVisible && !this.svgContent) {
|
|
18012
18175
|
this.waitUntilVisible(this.el, '50px', () => {
|
|
@@ -18025,14 +18188,16 @@ class PdsIcon {
|
|
|
18025
18188
|
this.io.disconnect();
|
|
18026
18189
|
this.io = undefined;
|
|
18027
18190
|
}
|
|
18191
|
+
if (this.mo) {
|
|
18192
|
+
this.mo.disconnect();
|
|
18193
|
+
this.mo = undefined;
|
|
18194
|
+
}
|
|
18028
18195
|
}
|
|
18029
18196
|
updateStyles() {
|
|
18030
18197
|
this.setCSSVariables();
|
|
18031
18198
|
}
|
|
18032
18199
|
onIconPropertyChange() {
|
|
18033
18200
|
this.loadIcon();
|
|
18034
|
-
// Update aria-label when icon properties change
|
|
18035
|
-
this.setupInitialAriaLabel();
|
|
18036
18201
|
}
|
|
18037
18202
|
loadIcon() {
|
|
18038
18203
|
// Reset load state when URL changes
|
|
@@ -18042,26 +18207,34 @@ class PdsIcon {
|
|
|
18042
18207
|
this.iconName = getName(this.name, this.icon);
|
|
18043
18208
|
}
|
|
18044
18209
|
render() {
|
|
18045
|
-
const {
|
|
18210
|
+
const { flipRtl, iconName, inheritedAttributes } = this;
|
|
18046
18211
|
const shouldIconAutoFlip = iconName
|
|
18047
18212
|
? shouldRtlFlipIcon(iconName, this.el) && flipRtl !== false
|
|
18048
18213
|
: false;
|
|
18049
18214
|
const shouldFlip = flipRtl || shouldIconAutoFlip;
|
|
18050
|
-
//
|
|
18051
|
-
|
|
18052
|
-
|
|
18215
|
+
// An icon is decorative unless the author names it. A decorative icon is hidden
|
|
18216
|
+
// from assistive technology, so it contributes nothing to the accessible name of
|
|
18217
|
+
// the button or link it sits inside. Naming it from `name` instead would put an
|
|
18218
|
+
// icon id ("rocket-tone") into that control's name, where neither a screen reader
|
|
18219
|
+
// nor a page-inspecting agent can tell it apart from the real label.
|
|
18220
|
+
//
|
|
18221
|
+
// A focusable icon stays exposed even without a name: hiding something that
|
|
18222
|
+
// takes focus leaves keyboard users on an element a screen reader can't see.
|
|
18223
|
+
const isNamed = NAMING_ATTRIBUTES.some((attr) => inheritedAttributes[attr] !== undefined);
|
|
18224
|
+
const isDecorative = !isNamed && !this.isFocusable;
|
|
18225
|
+
return (hAsync(Host
|
|
18226
|
+
// undefined, not null: null would strip an aria-hidden the author set on a
|
|
18227
|
+
// named icon once the component re-renders.
|
|
18228
|
+
, Object.assign({ key: '6597475535756e7174072dc25c982137724d439d', "aria-hidden": isDecorative ? 'true' : undefined, alt: "", role: isDecorative ? null : 'img', class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'flip-rtl': shouldFlip, 'icon-rtl': shouldFlip && isRTL(this.el) }) }, inheritedAttributes), (hAsync("div", { class: "icon-inner" }))));
|
|
18053
18229
|
}
|
|
18054
18230
|
/*****
|
|
18055
18231
|
* Private Methods
|
|
18056
18232
|
****/
|
|
18057
|
-
|
|
18058
|
-
|
|
18059
|
-
|
|
18060
|
-
|
|
18061
|
-
|
|
18062
|
-
this.ariaLabel = iconName.replace(/\-/g, ' ');
|
|
18063
|
-
}
|
|
18064
|
-
}
|
|
18233
|
+
// The hide/expose decision reads the naming attributes and tabindex, which can
|
|
18234
|
+
// change after load (a React prop going from undefined to a string, or
|
|
18235
|
+
// setAttribute from script). Re-read them when they do.
|
|
18236
|
+
observeNamingAttributes() {
|
|
18237
|
+
return;
|
|
18065
18238
|
}
|
|
18066
18239
|
waitUntilVisible(el, rootMargin, cb) {
|
|
18067
18240
|
{
|
|
@@ -18148,7 +18321,8 @@ class PdsIcon {
|
|
|
18148
18321
|
"name": [513],
|
|
18149
18322
|
"size": [513],
|
|
18150
18323
|
"src": [1],
|
|
18151
|
-
"
|
|
18324
|
+
"inheritedAttributes": [32],
|
|
18325
|
+
"isFocusable": [32],
|
|
18152
18326
|
"isVisible": [32],
|
|
18153
18327
|
"svgContent": [32]
|
|
18154
18328
|
},
|
|
@@ -18564,7 +18738,7 @@ class PdsInput {
|
|
|
18564
18738
|
}; }
|
|
18565
18739
|
}
|
|
18566
18740
|
|
|
18567
|
-
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)
|
|
18741
|
+
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);isolation:isolate;outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}.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}`;
|
|
18568
18742
|
|
|
18569
18743
|
// Used when `externalLabel` is unset; an empty string hides the icon instead.
|
|
18570
18744
|
const DEFAULT_EXTERNAL_LABEL = '(opens in a new tab)';
|
|
@@ -18782,7 +18956,8 @@ function collectTabbable(root, found) {
|
|
|
18782
18956
|
const isTabStop = (el) => { var _a; return el.tabIndex >= 0 || (el.isContentEditable && !el.hasAttribute('tabindex') && !((_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.isContentEditable)); };
|
|
18783
18957
|
function visitTabbable(el, found) {
|
|
18784
18958
|
var _a, _b, _c, _d;
|
|
18785
|
-
|
|
18959
|
+
// A tooltip portaled into a dialog only describes the control that has focus; it's never a stop of its own.
|
|
18960
|
+
if (el.hasAttribute('inert') || el.getAttribute('role') === 'tooltip')
|
|
18786
18961
|
return;
|
|
18787
18962
|
if (el.localName === 'slot') {
|
|
18788
18963
|
const slot = el;
|
|
@@ -18838,7 +19013,7 @@ function tabbableIn(root) {
|
|
|
18838
19013
|
return oneRadioPerGroup(visible);
|
|
18839
19014
|
}
|
|
18840
19015
|
|
|
18841
|
-
const pdsModalCss = () => `.pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop[aria-modal=false]{overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop[aria-modal=false]{-webkit-backdrop-filter:none;backdrop-filter:none}.pds-modal__backdrop[aria-modal=false]::before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);content:"";inset:0;position:fixed;z-index:-1}}.pds-modal__backdrop.open{opacity:1;-webkit-transition-timing-function:var(--pine-motion-easing-out);transition-timing-function:var(--pine-motion-easing-out);visibility:visible}.pds-modal{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--custom{max-width:var(--pds-modal-max-width, 700px)}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}`;
|
|
19016
|
+
const pdsModalCss = () => `.pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop[aria-modal=false]{overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop[aria-modal=false]{-webkit-backdrop-filter:none;backdrop-filter:none}.pds-modal__backdrop[aria-modal=false]::before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);content:"";inset:0;position:fixed;z-index:-1}}.pds-modal__backdrop.open{opacity:1;-webkit-transition-timing-function:var(--pine-motion-easing-out);transition-timing-function:var(--pine-motion-easing-out);visibility:visible}.pds-modal{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--custom{max-width:var(--pds-modal-max-width, 700px)}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}`;
|
|
18842
19017
|
|
|
18843
19018
|
const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
|
|
18844
19019
|
const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
|
|
@@ -20015,6 +20190,12 @@ class PdsMultiselect {
|
|
|
20015
20190
|
}
|
|
20016
20191
|
else {
|
|
20017
20192
|
this.closeDropdown();
|
|
20193
|
+
// Tab would move on to an option's checkbox, which closing removes, dropping focus to the page.
|
|
20194
|
+
// Land on the trigger instead, as Escape does; Shift+Tab already reaches it.
|
|
20195
|
+
const trigger = e.shiftKey ? undefined : this.activeTriggerEl;
|
|
20196
|
+
trigger === null || trigger === void 0 ? void 0 : trigger.focus();
|
|
20197
|
+
if (trigger === null || trigger === void 0 ? void 0 : trigger.matches(':focus'))
|
|
20198
|
+
e.preventDefault();
|
|
20018
20199
|
}
|
|
20019
20200
|
break;
|
|
20020
20201
|
}
|
|
@@ -20973,10 +21154,10 @@ class PdsMultiselect {
|
|
|
20973
21154
|
}
|
|
20974
21155
|
render() {
|
|
20975
21156
|
const hasSelections = this.selectedItems.length > 0;
|
|
20976
|
-
return (hAsync(Host, { key: '
|
|
21157
|
+
return (hAsync(Host, { key: '8f1ce5ef092285ce7c0855643fae76a4ec86ee17', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: 'c14c3d52c1d55fb33a89f1a25055728215a1e4ab', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: 'aacd3339b0db2048b31fbc5963f7232bbff78efe', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
|
|
20977
21158
|
'pds-multiselect__label': true,
|
|
20978
21159
|
'visually-hidden': this.hideLabel,
|
|
20979
|
-
} }, this.label)), hAsync("div", { key: '
|
|
21160
|
+
} }, this.label)), hAsync("div", { key: '5e1ef76aa5d46798519e5ac885bfa1c8d7c7106c', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (hAsync("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
|
|
20980
21161
|
'pds-multiselect__trigger': true,
|
|
20981
21162
|
'pds-multiselect__trigger--open': this.isOpen,
|
|
20982
21163
|
'pds-multiselect__trigger--disabled': this.disabled,
|
|
@@ -20992,7 +21173,7 @@ class PdsMultiselect {
|
|
|
20992
21173
|
}, 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: {
|
|
20993
21174
|
'pds-multiselect__trigger-text': true,
|
|
20994
21175
|
'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
|
|
20995
|
-
} }, this.getTriggerText()), hAsync("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '
|
|
21176
|
+
} }, this.getTriggerText()), hAsync("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '590045e4769812a1a2f7a97580d21d95dbe4e872', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: '419f4349b7cb17260f03d2bdcfd777561a62de42', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: 'b922af14c83348607aa9aaaefe9b03b39e71bd42', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'bd08726adf14a42f2ecf0cdfcd390e5639f9fd96', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: '42ad7905fb1816ccdd29b6aa438779929804b368', style: { display: 'none' } }, hAsync("slot", { key: '4f3bf380e93d216790efb0a5de85d6479862350e' })))));
|
|
20996
21177
|
}
|
|
20997
21178
|
static get formAssociated() { return true; }
|
|
20998
21179
|
get el() { return getElement(this); }
|
|
@@ -22471,6 +22652,7 @@ class PdsRadioGroup {
|
|
|
22471
22652
|
* @defaultValue false
|
|
22472
22653
|
*/
|
|
22473
22654
|
this.required = false;
|
|
22655
|
+
this.hostKeeper = new HostStylingKeeper();
|
|
22474
22656
|
}
|
|
22475
22657
|
handlePropsChange() {
|
|
22476
22658
|
this.updateChildRadios();
|
|
@@ -22522,6 +22704,29 @@ class PdsRadioGroup {
|
|
|
22522
22704
|
}
|
|
22523
22705
|
});
|
|
22524
22706
|
}
|
|
22707
|
+
connectedCallback() {
|
|
22708
|
+
this.hostKeeper.connect(this.el);
|
|
22709
|
+
// A name set while the group was detached never reaches the observer.
|
|
22710
|
+
this.syncName();
|
|
22711
|
+
if (typeof MutationObserver === 'undefined')
|
|
22712
|
+
return;
|
|
22713
|
+
// Consumers can name the group after render (a prop change, an i18n swap, a morph); re-render so their name wins.
|
|
22714
|
+
this.hostAriaObserver = new MutationObserver(() => this.syncName());
|
|
22715
|
+
this.hostAriaObserver.observe(this.el, { attributeFilter: ['aria-label', 'aria-labelledby'] });
|
|
22716
|
+
}
|
|
22717
|
+
disconnectedCallback() {
|
|
22718
|
+
var _a;
|
|
22719
|
+
this.hostKeeper.disconnect();
|
|
22720
|
+
(_a = this.hostAriaObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
22721
|
+
this.hostAriaObserver = undefined;
|
|
22722
|
+
}
|
|
22723
|
+
// Re-renders only when the group's name would change, so its own aria-labelledby write doesn't loop back.
|
|
22724
|
+
syncName() {
|
|
22725
|
+
if (this._groupId === undefined)
|
|
22726
|
+
return;
|
|
22727
|
+
if (this.getAriaLabelledBy() !== this.renderedLabelledBy)
|
|
22728
|
+
;
|
|
22729
|
+
}
|
|
22525
22730
|
componentWillLoad() {
|
|
22526
22731
|
// Generate stable group ID once during initialization
|
|
22527
22732
|
// This ensures DOM stability and accessibility relationships remain consistent across re-renders
|
|
@@ -22535,6 +22740,18 @@ class PdsRadioGroup {
|
|
|
22535
22740
|
: `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
|
|
22536
22741
|
this._groupId = `radio-group-${uniqueId}`;
|
|
22537
22742
|
}
|
|
22743
|
+
// A restored or cloned host still carries the id and ARIA references an earlier instance wrote, pointing at
|
|
22744
|
+
// that instance's label and messages. Drop them so this render writes its own: on first load, Stencil keeps a
|
|
22745
|
+
// host attribute that's already there.
|
|
22746
|
+
const previousId = this.el.getAttribute('id');
|
|
22747
|
+
if (previousId && previousId !== this._groupId) {
|
|
22748
|
+
['aria-labelledby', 'aria-describedby'].forEach((name) => {
|
|
22749
|
+
var _a, _b;
|
|
22750
|
+
const ids = (_b = (_a = this.el.getAttribute(name)) === null || _a === void 0 ? void 0 : _a.split(/\s+/)) !== null && _b !== void 0 ? _b : [];
|
|
22751
|
+
if (ids.some((id) => id.startsWith(`${previousId}__`)))
|
|
22752
|
+
this.el.removeAttribute(name);
|
|
22753
|
+
});
|
|
22754
|
+
}
|
|
22538
22755
|
}
|
|
22539
22756
|
componentDidLoad() {
|
|
22540
22757
|
if (!this.name) {
|
|
@@ -22587,6 +22804,20 @@ class PdsRadioGroup {
|
|
|
22587
22804
|
// Otherwise, assume it's a dimension token like "100", "200", etc.
|
|
22588
22805
|
return `var(--pine-dimension-${this.gap})`;
|
|
22589
22806
|
}
|
|
22807
|
+
get labelId() {
|
|
22808
|
+
return `${this._groupId}__label`;
|
|
22809
|
+
}
|
|
22810
|
+
// Names the group from its visible label, unless the consumer named it with their own aria-label or aria-labelledby.
|
|
22811
|
+
// A blank aria-label (an empty translation, say) names nothing, so it falls back to groupLabel.
|
|
22812
|
+
getAriaLabelledBy() {
|
|
22813
|
+
var _a;
|
|
22814
|
+
const hostLabelledBy = this.el.getAttribute('aria-labelledby');
|
|
22815
|
+
if ((hostLabelledBy === null || hostLabelledBy === void 0 ? void 0 : hostLabelledBy.trim()) && hostLabelledBy !== this.labelId)
|
|
22816
|
+
return hostLabelledBy;
|
|
22817
|
+
if ((_a = this.el.getAttribute('aria-label')) === null || _a === void 0 ? void 0 : _a.trim())
|
|
22818
|
+
return undefined;
|
|
22819
|
+
return this.groupLabel ? this.labelId : undefined;
|
|
22820
|
+
}
|
|
22590
22821
|
getAriaDescribedBy() {
|
|
22591
22822
|
const messageIds = [];
|
|
22592
22823
|
if (this.errorMessage) {
|
|
@@ -22600,13 +22831,23 @@ class PdsRadioGroup {
|
|
|
22600
22831
|
render() {
|
|
22601
22832
|
const gapValue = this.getGapValue();
|
|
22602
22833
|
const ariaDescribedBy = this.getAriaDescribedBy();
|
|
22603
|
-
|
|
22834
|
+
const ariaLabelledBy = this.getAriaLabelledBy();
|
|
22835
|
+
const hostClass = this.classNames();
|
|
22836
|
+
this.renderedLabelledBy = ariaLabelledBy;
|
|
22837
|
+
// A DOM morph strips what the component wrote on its host; put back its role, name and description.
|
|
22838
|
+
// Only its own aria-labelledby, so a consumer's that the server dropped stays dropped.
|
|
22839
|
+
this.hostKeeper.record(hostClass, { '--pds-radio-group-gap': gapValue }, {
|
|
22840
|
+
role: 'radiogroup',
|
|
22841
|
+
'aria-describedby': ariaDescribedBy,
|
|
22842
|
+
'aria-labelledby': ariaLabelledBy === this.labelId ? ariaLabelledBy : undefined,
|
|
22843
|
+
});
|
|
22844
|
+
return (hAsync(Host, { key: '0fe381f99dddae0aeb9189a13b0e2195f1c79886', class: hostClass, id: this._groupId, role: "radiogroup", "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, style: {
|
|
22604
22845
|
'--pds-radio-group-gap': gapValue,
|
|
22605
|
-
} }, this.groupLabel && (hAsync("div", { key: '
|
|
22846
|
+
} }, this.groupLabel && (hAsync("div", { key: '4967dc22fa0265dbfbabf94a49b182b8c06d0bd5', class: "pds-radio-group__label", id: this.labelId }, this.groupLabel)), hAsync("div", { key: '7a782a6920de7eda76ab0060c7512f093671ad41', class: {
|
|
22606
22847
|
'pds-radio-group__radios': true,
|
|
22607
22848
|
'pds-radio-group__radios--row': this.direction === 'row',
|
|
22608
22849
|
'pds-radio-group__radios--column': this.direction === 'column',
|
|
22609
|
-
} }, hAsync("slot", { key: '
|
|
22850
|
+
} }, hAsync("slot", { key: '48a8d2d74961a402e3a1b053b2f0314e74b4b289', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (hAsync("div", { key: '58db96d62b8d89f03ab245990d2d6bbd3b1b5f85', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("div", { key: 'ad3aafe5f7ed45853c36b537525a8fff68452f55', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '80ce92868703c5e01434e7e83a7668e320bcbee1', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
|
|
22610
22851
|
}
|
|
22611
22852
|
get el() { return getElement(this); }
|
|
22612
22853
|
static get watchers() { return {
|
|
@@ -27512,6 +27753,9 @@ const TEXT_SIZES = [
|
|
|
27512
27753
|
|
|
27513
27754
|
const pdsTextCss = () => `:host{display:inline}:host([decoration=underline-dotted])>*{-webkit-text-decoration-color:var(--pine-color-text-tertiary);text-decoration-color:var(--pine-color-text-tertiary);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-decoration-thickness:12%;text-underline-offset:0.3rem;text-underline-position:under}:host([decoration=strikethrough])>*{text-decoration:line-through}h1{font:var(--pine-typography-heading-1);letter-spacing:var(--pine-letter-spacing-heading-1)}h2{font:var(--pine-typography-heading-2);letter-spacing:var(--pine-letter-spacing-heading-2)}h3{font:var(--pine-typography-heading-3);letter-spacing:var(--pine-letter-spacing-heading-3)}h4{font:var(--pine-typography-heading-4);letter-spacing:var(--pine-letter-spacing-heading-4)}h5{font:var(--pine-typography-heading-5);letter-spacing:var(--pine-letter-spacing-heading-5)}h6{font:var(--pine-typography-heading-6);letter-spacing:var(--pine-letter-spacing-heading-6)}code,em,p,pre,strong{font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing)}code,pre{font-family:monospace;letter-spacing:0;line-height:1}em{font-style:normal}strong{font-weight:bolder}:host([truncate]){display:block;min-width:0}:host([truncate])>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([italic])>*{font-style:italic}.pds-text{color:var(--color, var(--pine-color-text));margin:var(--pine-dimension-none)}.pds-text--size-2xl{font-size:var(--pine-font-size-body-2xl)}.pds-text--size-xl{font-size:var(--pine-font-size-body-xl)}.pds-text--size-lg{font-size:var(--pine-font-size-body-lg)}.pds-text--size-md{font-size:var(--pine-font-size-body-md)}.pds-text--size-sm{font-size:var(--pine-font-size-body-sm)}.pds-text--size-xs{font-size:var(--pine-font-size-body-xs)}.pds-text--size-2xs{font-size:var(--pine-font-size-body-2xs)}.pds-text--size-h1{font-size:var(--pine-font-size-heading-1)}.pds-text--size-h2{font-size:var(--pine-font-size-heading-2)}.pds-text--size-h3{font-size:var(--pine-font-size-heading-3)}.pds-text--size-h4{font-size:var(--pine-font-size-heading-4)}.pds-text--size-h5{font-size:var(--pine-font-size-heading-5)}.pds-text--size-h6{font-size:var(--pine-font-size-heading-6)}.pds-text--weight-extra-light{font-weight:var(--pine-font-weight-extra-light)}.pds-text--weight-light{font-weight:var(--pine-font-weight-light)}.pds-text--weight-regular{font-weight:var(--pine-font-weight-regular)}.pds-text--weight-medium{font-weight:var(--pine-font-weight-medium)}.pds-text--weight-semibold{font-weight:var(--pine-font-weight-semi-bold)}.pds-text--weight-bold{font-weight:var(--pine-font-weight-bold)}.pds-text--gutter-2xl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}.pds-text--gutter-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-text--gutter-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-text--gutter-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-text--gutter-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-text--gutter-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-text--gutter-2xs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-text--align-start{text-align:start}.pds-text--align-center{text-align:center}.pds-text--align-end{text-align:end}.pds-text--align-justify{text-align:justify}`;
|
|
27514
27755
|
|
|
27756
|
+
// Re-runs setup for each text bound to its wrapping control, keyed by host, so a truncated
|
|
27757
|
+
// text that joins the same control later can take that control's focus away from it.
|
|
27758
|
+
const textsUsingWrapper = new WeakMap();
|
|
27515
27759
|
/**
|
|
27516
27760
|
* @part content - The text content container
|
|
27517
27761
|
*/
|
|
@@ -27566,17 +27810,39 @@ class PdsText {
|
|
|
27566
27810
|
this.destroyTruncationTooltip();
|
|
27567
27811
|
}
|
|
27568
27812
|
initTruncationTooltip() {
|
|
27813
|
+
var _a;
|
|
27569
27814
|
// Clean up any existing tooltip before setting up a new one
|
|
27570
27815
|
this.destroyTruncationTooltip();
|
|
27571
27816
|
if (this.contentEl) {
|
|
27817
|
+
const wrapper = this.el.closest(FOCUSABLE_WRAPPER);
|
|
27818
|
+
// A pds-chip with a max width binds its tooltip to the wrapper too.
|
|
27819
|
+
const others = wrapper === null ? [] : wrapper.querySelectorAll('pds-text, pds-chip');
|
|
27820
|
+
// One focus on a shared wrapper would open every clipped text's tooltip at once, so texts sharing one each keep
|
|
27821
|
+
// their own stop, and a text bound before this one joined lets go: this one's focus bubbles to the wrapper too.
|
|
27822
|
+
let sharesWrapper = false;
|
|
27823
|
+
for (let i = 0; i < others.length; i++) {
|
|
27824
|
+
const other = others[i];
|
|
27825
|
+
// The property counts too: setting `truncate` runs setup before the next render reflects the attribute.
|
|
27826
|
+
if (other !== this.el && (other.truncate || other.maxWidth || other.hasAttribute('truncate') || other.hasAttribute('max-width'))) {
|
|
27827
|
+
sharesWrapper = true;
|
|
27828
|
+
(_a = textsUsingWrapper.get(other)) === null || _a === void 0 ? void 0 : _a();
|
|
27829
|
+
}
|
|
27830
|
+
}
|
|
27831
|
+
const usesWrapper = wrapper !== null && !sharesWrapper;
|
|
27572
27832
|
this.truncationCleanup = setupTruncationTooltip({
|
|
27573
27833
|
hostEl: this.el,
|
|
27574
27834
|
contentEl: this.contentEl,
|
|
27575
27835
|
getTooltipText: () => this.el.textContent || '',
|
|
27836
|
+
// A wrapping link or button already takes focus, so its focus reveals the text instead of a nested tab stop.
|
|
27837
|
+
manageTabIndex: !usesWrapper,
|
|
27838
|
+
focusEl: usesWrapper ? wrapper : this.el,
|
|
27576
27839
|
});
|
|
27840
|
+
if (usesWrapper)
|
|
27841
|
+
textsUsingWrapper.set(this.el, () => this.initTruncationTooltip());
|
|
27577
27842
|
}
|
|
27578
27843
|
}
|
|
27579
27844
|
destroyTruncationTooltip() {
|
|
27845
|
+
textsUsingWrapper.delete(this.el);
|
|
27580
27846
|
if (this.truncationCleanup) {
|
|
27581
27847
|
this.truncationCleanup();
|
|
27582
27848
|
this.truncationCleanup = null;
|
|
@@ -27602,7 +27868,7 @@ class PdsText {
|
|
|
27602
27868
|
? `pds-text--decoration-${this.decoration}`
|
|
27603
27869
|
: ''}
|
|
27604
27870
|
`;
|
|
27605
|
-
return (hAsync(Tag, { key: '
|
|
27871
|
+
return (hAsync(Tag, { key: '30566c7810d3fd7f76ae281ae6d9a7e66803f0a3', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: 'f5113458aa9295803fc1c0bc552f9f92602cacba' })));
|
|
27606
27872
|
}
|
|
27607
27873
|
get el() { return getElement(this); }
|
|
27608
27874
|
static get watchers() { return {
|
|
@@ -28167,7 +28433,7 @@ class PdsToast {
|
|
|
28167
28433
|
}; }
|
|
28168
28434
|
}
|
|
28169
28435
|
|
|
28170
|
-
const pdsTooltipCss = () => `.pds-tooltip{--tooltip-border-width-arrow-down:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-left:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-right:var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-border-width-arrow-up:0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-sizing-arrow:6px;--tooltip-sizing-arrow-offset:14px;--tooltip-dimension-max-width:320px}.pds-tooltip__content{background-color:var(--pine-color-primary);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);max-width:var(--tooltip-dimension-max-width);opacity:0;padding:var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);position:relative;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:var(--pine-z-index-raised)}.pds-tooltip.pds-tooltip--has-html-content .pds-tooltip__content{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--tooltip-border-width-arrow-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);bottom:var(--tooltip-sizing-arrow-offset);left:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:initial;right:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);bottom:var(--tooltip-sizing-arrow-offset);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:50%;top:calc(var(--tooltip-sizing-arrow) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:initial;right:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}`;
|
|
28436
|
+
const pdsTooltipCss = () => `.pds-tooltip{--tooltip-border-width-arrow-down:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-left:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-right:var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-border-width-arrow-up:0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-sizing-arrow:6px;--tooltip-sizing-arrow-offset:14px;--tooltip-dimension-max-width:320px}:is(dialog,[popover])>.pds-tooltip{font-style:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0;text-transform:none;white-space:normal;word-spacing:normal}.pds-tooltip__content{background-color:var(--pine-color-primary);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);max-width:var(--tooltip-dimension-max-width);opacity:0;padding:var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);position:relative;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:var(--pine-z-index-raised)}.pds-tooltip.pds-tooltip--has-html-content .pds-tooltip__content{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--tooltip-border-width-arrow-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);bottom:var(--tooltip-sizing-arrow-offset);left:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:initial;right:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);bottom:var(--tooltip-sizing-arrow-offset);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:50%;top:calc(var(--tooltip-sizing-arrow) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:initial;right:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}`;
|
|
28171
28437
|
|
|
28172
28438
|
/**
|
|
28173
28439
|
* @slot (default) - The tooltip's target element
|
|
@@ -28192,6 +28458,7 @@ class PdsTooltip {
|
|
|
28192
28458
|
this.currentPathname = '';
|
|
28193
28459
|
this.pathnameCheckInterval = null;
|
|
28194
28460
|
this.stopAutoUpdate = null;
|
|
28461
|
+
this.stopWatchingPortalHost = null;
|
|
28195
28462
|
/**
|
|
28196
28463
|
* Determines whether or not the tooltip has an arrow
|
|
28197
28464
|
* @defaultValue true
|
|
@@ -28441,7 +28708,12 @@ class PdsTooltip {
|
|
|
28441
28708
|
this.lastCopiedHtml = this.strippedHtml(initialCopy);
|
|
28442
28709
|
this.contentDiv.append(...Array.from(initialCopy.childNodes));
|
|
28443
28710
|
this.portalEl.appendChild(this.contentDiv);
|
|
28444
|
-
|
|
28711
|
+
// Nothing in the body paints above a modal dialog or open popover, so the portal goes inside one.
|
|
28712
|
+
const portalHost = findPortalTarget(this.el, isTopLayerInDocument);
|
|
28713
|
+
portalHost.appendChild(this.portalEl);
|
|
28714
|
+
// Closing that host moves no pointer, so a tooltip opened by touch would outlive it unseen.
|
|
28715
|
+
if (portalHost !== document.body)
|
|
28716
|
+
this.stopWatchingPortalHost = onTopLayerClose(portalHost, this.handleHide);
|
|
28445
28717
|
this.repositionPortal().catch(error => {
|
|
28446
28718
|
console.warn('Failed to position tooltip on creation:', error);
|
|
28447
28719
|
});
|
|
@@ -28554,6 +28826,10 @@ class PdsTooltip {
|
|
|
28554
28826
|
this.stopAutoUpdate();
|
|
28555
28827
|
this.stopAutoUpdate = null;
|
|
28556
28828
|
}
|
|
28829
|
+
if (this.stopWatchingPortalHost !== null) {
|
|
28830
|
+
this.stopWatchingPortalHost();
|
|
28831
|
+
this.stopWatchingPortalHost = null;
|
|
28832
|
+
}
|
|
28557
28833
|
// Stop pathname change detection
|
|
28558
28834
|
if (this.pathnameCheckInterval !== null) {
|
|
28559
28835
|
clearInterval(this.pathnameCheckInterval);
|
|
@@ -28584,9 +28860,9 @@ class PdsTooltip {
|
|
|
28584
28860
|
}
|
|
28585
28861
|
render() {
|
|
28586
28862
|
const hostId = this.componentId || undefined;
|
|
28587
|
-
return (hAsync(Host, { key: '
|
|
28863
|
+
return (hAsync(Host, { key: '475ff12d4be035e3effa894353e7948b42a23489', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '3375dfb5bb86ba373bc5d617f4a53171505631d1', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
|
|
28588
28864
|
/* focusin/out bubble; ensure keyboard users see tooltips */
|
|
28589
|
-
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '
|
|
28865
|
+
onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: 'a3392ad415f5ac7f3883100bf914484ffcc8e536' })), hAsync("div", { key: '774ac2c4808e96649b1536569aaf8cf8a6e3abc2', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: '672c64b4acdb365623885ac2105a9b90b1dcfa6b', name: "content" }))));
|
|
28590
28866
|
}
|
|
28591
28867
|
get el() { return getElement(this); }
|
|
28592
28868
|
static get watchers() { return {
|