@swisspost/design-system-components 10.6.0 → 10.8.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.
Files changed (295) hide show
  1. package/dist/cjs/{create-validator-decorator-Cy5yN6u9.js → create-validator-decorator-DVm_SDrR.js} +1 -1
  2. package/dist/cjs/{index-B3PXzvDk.js → index-DY4QxKNv.js} +5 -5
  3. package/dist/cjs/is-focus-visible-B3CqVQsX.js +19 -0
  4. package/dist/cjs/loader.cjs.js +2 -2
  5. package/dist/cjs/{one-of-CRFrfihj.js → one-of-qu7_EPxf.js} +1 -1
  6. package/dist/cjs/{package-pKyFPwiA.js → package-DAEQGHsE.js} +1 -1
  7. package/dist/cjs/{pattern-D329DFcf.js → pattern-EpwCKMyC.js} +1 -1
  8. package/dist/cjs/post-accordion_2.cjs.entry.js +6 -6
  9. package/dist/cjs/post-autocomplete.cjs.entry.js +5 -5
  10. package/dist/cjs/post-avatar.cjs.entry.js +85 -61
  11. package/dist/cjs/post-back-to-top.cjs.entry.js +6 -6
  12. package/dist/cjs/post-banner.cjs.entry.js +5 -5
  13. package/dist/cjs/post-breadcrumb-item.cjs.entry.js +8 -8
  14. package/dist/cjs/post-breadcrumbs.cjs.entry.js +7 -7
  15. package/dist/cjs/post-closebutton_14.cjs.entry.js +477 -593
  16. package/dist/cjs/post-collapsible_2.cjs.entry.js +13 -7
  17. package/dist/cjs/post-components.cjs.js +2 -2
  18. package/dist/cjs/post-date-picker.cjs.entry.js +43 -27
  19. package/dist/cjs/post-footer.cjs.entry.js +6 -6
  20. package/dist/cjs/post-linkarea.cjs.entry.js +2 -2
  21. package/dist/cjs/post-listbox-option.cjs.entry.js +2 -2
  22. package/dist/cjs/post-listbox.cjs.entry.js +2 -2
  23. package/dist/cjs/post-number-input.cjs.entry.js +3 -3
  24. package/dist/cjs/post-pagination.cjs.entry.js +6 -6
  25. package/dist/cjs/post-popover-trigger.cjs.entry.js +4 -4
  26. package/dist/cjs/post-popover.cjs.entry.js +9 -9
  27. package/dist/cjs/post-progressbar.cjs.entry.js +3 -3
  28. package/dist/cjs/post-rating.cjs.entry.js +5 -5
  29. package/dist/cjs/post-side-navigation-trigger.cjs.entry.js +5 -5
  30. package/dist/cjs/post-side-navigation.cjs.entry.js +14 -9
  31. package/dist/cjs/post-stepper-item.cjs.entry.js +2 -2
  32. package/dist/cjs/post-stepper.cjs.entry.js +6 -6
  33. package/dist/cjs/post-tab-item.cjs.entry.js +5 -5
  34. package/dist/cjs/post-tab-panel.cjs.entry.js +5 -5
  35. package/dist/cjs/post-tabs.cjs.entry.js +8 -8
  36. package/dist/cjs/post-tooltip-trigger.cjs.entry.js +6 -6
  37. package/dist/cjs/post-tooltip.cjs.entry.js +8 -6
  38. package/dist/cjs/{required-DhAEd0c7.js → required-Dgzo-rb5.js} +1 -1
  39. package/dist/cjs/{type-2Ma9dvHs.js → type-DBRxpBZI.js} +1 -1
  40. package/dist/cjs/{url-DePscsTj.js → url-Dl1JABeP.js} +1 -1
  41. package/dist/collection/components/post-accordion-item/post-accordion-item.css +1 -1
  42. package/dist/collection/components/post-avatar/avatar-utils.js +1 -2
  43. package/dist/collection/components/post-avatar/post-avatar.js +77 -59
  44. package/dist/collection/components/post-back-to-top/post-back-to-top.css +1 -1
  45. package/dist/collection/components/post-banner/post-banner.css +1 -1
  46. package/dist/collection/components/post-breadcrumb-item/post-breadcrumb-item.css +1 -1
  47. package/dist/collection/components/post-breadcrumbs/post-breadcrumbs.css +1 -1
  48. package/dist/collection/components/post-closebutton/post-closebutton.css +1 -1
  49. package/dist/collection/components/post-collapsible/post-collapsible.js +9 -3
  50. package/dist/collection/components/post-date-picker/post-date-picker.css +1 -1
  51. package/dist/collection/components/post-date-picker/post-date-picker.js +36 -22
  52. package/dist/collection/components/post-footer/post-footer.css +1 -1
  53. package/dist/collection/components/post-header/post-header.css +1 -1
  54. package/dist/collection/components/post-header/post-header.js +38 -13
  55. package/dist/collection/components/post-language-menu/post-language-menu.css +1 -1
  56. package/dist/collection/components/post-language-menu/post-language-menu.js +1 -1
  57. package/dist/collection/components/post-logo/post-logo.css +1 -1
  58. package/dist/collection/components/post-megadropdown/post-megadropdown.css +1 -1
  59. package/dist/collection/components/post-megadropdown/post-megadropdown.js +34 -16
  60. package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.css +1 -1
  61. package/dist/collection/components/post-menu/post-menu.css +1 -1
  62. package/dist/collection/components/post-menu/post-menu.js +3 -14
  63. package/dist/collection/components/post-menu-item/post-menu-item.css +1 -1
  64. package/dist/collection/components/post-number-input/post-number-input.css +2 -2
  65. package/dist/collection/components/post-pagination/post-pagination.css +1 -1
  66. package/dist/collection/components/post-popover/post-popover.css +1 -1
  67. package/dist/collection/components/post-popover/post-popover.js +2 -2
  68. package/dist/collection/components/post-popovercontainer/post-popovercontainer.css +1 -1
  69. package/dist/collection/components/post-popovercontainer/post-popovercontainer.js +211 -323
  70. package/dist/collection/components/post-side-navigation/post-side-navigation.css +1 -1
  71. package/dist/collection/components/post-side-navigation/post-side-navigation.js +7 -3
  72. package/dist/collection/components/post-tabs/post-tabs.css +1 -1
  73. package/dist/collection/components/post-tabs/post-tabs.js +2 -2
  74. package/dist/collection/components/post-tooltip/post-tooltip.css +1 -1
  75. package/dist/collection/components/post-tooltip/post-tooltip.js +3 -1
  76. package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.js +1 -1
  77. package/dist/collection/utils/floating-ui/middleware/flip.js +77 -0
  78. package/dist/collection/utils/floating-ui/middleware/safe-space.js +52 -0
  79. package/dist/collection/utils/floating-ui/util.js +10 -0
  80. package/dist/collection/utils/index.js +1 -0
  81. package/dist/collection/utils/is-focus-visible.js +15 -0
  82. package/dist/components/is-focus-visible.js +1 -0
  83. package/dist/components/package.js +1 -1
  84. package/dist/components/post-accordion-item2.js +1 -1
  85. package/dist/components/post-avatar.js +1 -1
  86. package/dist/components/post-back-to-top.js +1 -1
  87. package/dist/components/post-banner.js +1 -1
  88. package/dist/components/post-breadcrumb-item.js +1 -1
  89. package/dist/components/post-breadcrumbs.js +1 -1
  90. package/dist/components/post-closebutton2.js +1 -1
  91. package/dist/components/post-collapsible2.js +1 -1
  92. package/dist/components/post-date-picker.js +1 -1
  93. package/dist/components/post-footer.js +1 -1
  94. package/dist/components/post-header.js +1 -1
  95. package/dist/components/post-language-menu.js +1 -1
  96. package/dist/components/post-logo.js +1 -1
  97. package/dist/components/post-megadropdown-trigger.js +1 -1
  98. package/dist/components/post-megadropdown.js +1 -1
  99. package/dist/components/post-menu-item2.js +1 -1
  100. package/dist/components/post-menu2.js +1 -1
  101. package/dist/components/post-number-input.js +1 -1
  102. package/dist/components/post-pagination.js +1 -1
  103. package/dist/components/post-popover.js +1 -1
  104. package/dist/components/post-popovercontainer2.js +1 -1
  105. package/dist/components/post-side-navigation.js +1 -1
  106. package/dist/components/post-tabs.js +1 -1
  107. package/dist/components/post-tooltip-trigger.js +1 -1
  108. package/dist/components/post-tooltip.js +1 -1
  109. package/dist/components/react/index.js +1 -1
  110. package/dist/components/react/p-5kW0ZF_f.js +1 -0
  111. package/dist/components/react/p-BMCit4BU.js +1 -0
  112. package/dist/components/react/p-BWwWKRO5.js +1 -0
  113. package/dist/components/react/p-BdiQsTQm.js +1 -0
  114. package/dist/components/react/p-BeRGbt65.js +1 -0
  115. package/dist/components/react/{p-DffT6evQ.js → p-C8i672qm.js} +1 -1
  116. package/dist/components/react/{p-m1-sOx5T.js → p-C_JY6ipN.js} +1 -1
  117. package/dist/components/react/p-DRJ9K8sv.js +1 -0
  118. package/dist/components/react/{p-CcDLIogT.js → p-DygUkCKz.js} +1 -1
  119. package/dist/components/react/p-DzYMQFK2.js +1 -0
  120. package/dist/components/react/{p-CzsG0uCA.js → p-E-8qAn1z.js} +1 -1
  121. package/dist/components/react/p-Q5LQWL2X.js +1 -0
  122. package/dist/components/react/{p-CdggfEzz.js → p-UXyZDQt4.js} +1 -1
  123. package/dist/components/react/post-accordion-item.js +1 -1
  124. package/dist/components/react/post-accordion.js +1 -1
  125. package/dist/components/react/post-autocomplete.js +1 -1
  126. package/dist/components/react/post-avatar.js +1 -1
  127. package/dist/components/react/post-back-to-top.js +1 -1
  128. package/dist/components/react/post-banner.js +1 -1
  129. package/dist/components/react/post-breadcrumb-item.js +1 -1
  130. package/dist/components/react/post-breadcrumbs.js +1 -1
  131. package/dist/components/react/post-closebutton.js +1 -1
  132. package/dist/components/react/post-collapsible-trigger.js +1 -1
  133. package/dist/components/react/post-collapsible.js +1 -1
  134. package/dist/components/react/post-date-picker.js +1 -1
  135. package/dist/components/react/post-footer.js +1 -1
  136. package/dist/components/react/post-header.js +1 -1
  137. package/dist/components/react/post-icon.js +1 -1
  138. package/dist/components/react/post-language-menu-item.js +1 -1
  139. package/dist/components/react/post-language-menu.js +1 -1
  140. package/dist/components/react/post-linkarea.js +1 -1
  141. package/dist/components/react/post-listbox-option.js +1 -1
  142. package/dist/components/react/post-listbox.js +1 -1
  143. package/dist/components/react/post-logo.js +1 -1
  144. package/dist/components/react/post-mainnavigation.js +1 -1
  145. package/dist/components/react/post-megadropdown-trigger.js +1 -1
  146. package/dist/components/react/post-megadropdown.js +1 -1
  147. package/dist/components/react/post-menu-item.js +1 -1
  148. package/dist/components/react/post-menu-trigger.js +1 -1
  149. package/dist/components/react/post-menu.js +1 -1
  150. package/dist/components/react/post-number-input.js +1 -1
  151. package/dist/components/react/post-pagination.js +1 -1
  152. package/dist/components/react/post-popover-trigger.js +1 -1
  153. package/dist/components/react/post-popover.js +1 -1
  154. package/dist/components/react/post-popovercontainer.js +1 -1
  155. package/dist/components/react/post-rating.js +1 -1
  156. package/dist/components/react/post-side-navigation-trigger.js +1 -1
  157. package/dist/components/react/post-side-navigation.js +1 -1
  158. package/dist/components/react/post-stepper-item.js +1 -1
  159. package/dist/components/react/post-stepper.js +1 -1
  160. package/dist/components/react/post-tab-item.js +1 -1
  161. package/dist/components/react/post-tab-panel.js +1 -1
  162. package/dist/components/react/post-tabs.js +1 -1
  163. package/dist/components/react/post-togglebutton.js +1 -1
  164. package/dist/components/react/post-tooltip-trigger.js +1 -1
  165. package/dist/components/react/post-tooltip.js +1 -1
  166. package/dist/docs.json +67 -45
  167. package/dist/esm/{create-validator-decorator-C2XlYkNB.js → create-validator-decorator-Cp_NUmrr.js} +1 -1
  168. package/dist/esm/{index-BjziJWh2.js → index-D0jX3Fts.js} +5 -5
  169. package/dist/esm/is-focus-visible-BWwWKRO5.js +17 -0
  170. package/dist/esm/loader.js +3 -3
  171. package/dist/esm/{one-of-Do1iao-k.js → one-of-B9locHPx.js} +1 -1
  172. package/dist/esm/{package-T8T3po4z.js → package-BdiQsTQm.js} +1 -1
  173. package/dist/esm/{pattern-BZDucOTq.js → pattern-BL3OBU8C.js} +1 -1
  174. package/dist/esm/post-accordion_2.entry.js +6 -6
  175. package/dist/esm/post-autocomplete.entry.js +5 -5
  176. package/dist/esm/post-avatar.entry.js +85 -61
  177. package/dist/esm/post-back-to-top.entry.js +6 -6
  178. package/dist/esm/post-banner.entry.js +5 -5
  179. package/dist/esm/post-breadcrumb-item.entry.js +8 -8
  180. package/dist/esm/post-breadcrumbs.entry.js +7 -7
  181. package/dist/esm/post-closebutton_14.entry.js +477 -593
  182. package/dist/esm/post-collapsible_2.entry.js +13 -7
  183. package/dist/esm/post-components.js +3 -3
  184. package/dist/esm/post-date-picker.entry.js +43 -27
  185. package/dist/esm/post-footer.entry.js +6 -6
  186. package/dist/esm/post-linkarea.entry.js +2 -2
  187. package/dist/esm/post-listbox-option.entry.js +2 -2
  188. package/dist/esm/post-listbox.entry.js +2 -2
  189. package/dist/esm/post-number-input.entry.js +3 -3
  190. package/dist/esm/post-pagination.entry.js +6 -6
  191. package/dist/esm/post-popover-trigger.entry.js +4 -4
  192. package/dist/esm/post-popover.entry.js +9 -9
  193. package/dist/esm/post-progressbar.entry.js +3 -3
  194. package/dist/esm/post-rating.entry.js +5 -5
  195. package/dist/esm/post-side-navigation-trigger.entry.js +5 -5
  196. package/dist/esm/post-side-navigation.entry.js +14 -9
  197. package/dist/esm/post-stepper-item.entry.js +2 -2
  198. package/dist/esm/post-stepper.entry.js +6 -6
  199. package/dist/esm/post-tab-item.entry.js +5 -5
  200. package/dist/esm/post-tab-panel.entry.js +5 -5
  201. package/dist/esm/post-tabs.entry.js +8 -8
  202. package/dist/esm/post-tooltip-trigger.entry.js +6 -6
  203. package/dist/esm/post-tooltip.entry.js +8 -6
  204. package/dist/esm/{required-B0X7uy13.js → required-CDaQB1gC.js} +1 -1
  205. package/dist/esm/{type-CF1dOg6D.js → type-CQ7XuPCZ.js} +1 -1
  206. package/dist/esm/{url-BL7d6iWZ.js → url-B-86gtTK.js} +1 -1
  207. package/dist/post-components/p-0688d296.entry.js +1 -0
  208. package/dist/post-components/p-0b0b2f02.entry.js +1 -0
  209. package/dist/post-components/{p-c9dcdebb.entry.js → p-0d25c033.entry.js} +1 -1
  210. package/dist/post-components/{p-655ded00.entry.js → p-229d324e.entry.js} +1 -1
  211. package/dist/post-components/{p-88f754e9.entry.js → p-2a5312a7.entry.js} +1 -1
  212. package/dist/post-components/{p-ba1b4ba0.entry.js → p-330fd6cd.entry.js} +1 -1
  213. package/dist/post-components/p-3712133b.entry.js +1 -0
  214. package/dist/post-components/{p-87b1034f.entry.js → p-379780a3.entry.js} +1 -1
  215. package/dist/post-components/{p-dc285087.entry.js → p-3fdb8ebc.entry.js} +1 -1
  216. package/dist/post-components/{p-2005eb98.entry.js → p-456b0786.entry.js} +1 -1
  217. package/dist/post-components/p-4d30c65d.entry.js +1 -0
  218. package/dist/post-components/{p-de6f1816.entry.js → p-534ca27e.entry.js} +1 -1
  219. package/dist/post-components/p-5369b9c2.entry.js +1 -0
  220. package/dist/post-components/p-6833be12.entry.js +1 -0
  221. package/dist/post-components/p-6ad44691.entry.js +1 -0
  222. package/dist/post-components/{p-1ec27142.entry.js → p-82c62e90.entry.js} +1 -1
  223. package/dist/post-components/{p-8012cc3b.entry.js → p-91a2ef3c.entry.js} +1 -1
  224. package/dist/post-components/p-95f5d5ea.entry.js +1 -0
  225. package/dist/post-components/p-9dd286bf.entry.js +1 -0
  226. package/dist/post-components/p-9fedcfba.entry.js +1 -0
  227. package/dist/post-components/p-BCPv4bcY.js +1 -0
  228. package/dist/post-components/p-BWwWKRO5.js +1 -0
  229. package/dist/post-components/p-BdiQsTQm.js +1 -0
  230. package/dist/post-components/p-CP3LjuFR.js +1 -0
  231. package/dist/post-components/p-D0jX3Fts.js +2 -0
  232. package/dist/post-components/p-D6mVqZLg.js +1 -0
  233. package/dist/post-components/{p-DgnQe03V.js → p-DSaWK_q-.js} +1 -1
  234. package/dist/post-components/p-VPHnF9fB.js +1 -0
  235. package/dist/post-components/{p-f9a8ee94.entry.js → p-ab0500b7.entry.js} +1 -1
  236. package/dist/post-components/p-c123ecde.entry.js +1 -0
  237. package/dist/post-components/{p-cdc7b8d3.entry.js → p-d2de31b7.entry.js} +1 -1
  238. package/dist/post-components/p-dffeb751.entry.js +1 -0
  239. package/dist/post-components/{p-60550edb.entry.js → p-e11ccdbe.entry.js} +1 -1
  240. package/dist/post-components/{p-a32d3050.entry.js → p-e560767b.entry.js} +1 -1
  241. package/dist/post-components/p-ee7fade4.entry.js +1 -0
  242. package/dist/post-components/{p-2cff5b3a.entry.js → p-f2629077.entry.js} +1 -1
  243. package/dist/post-components/{p-d7c9a969.entry.js → p-f2b24bbd.entry.js} +1 -1
  244. package/dist/post-components/p-gv9b-Z15.js +1 -0
  245. package/dist/post-components/post-components.css +2 -2
  246. package/dist/post-components/post-components.esm.js +1 -1
  247. package/dist/types/components/post-avatar/avatar-utils.d.ts +0 -2
  248. package/dist/types/components/post-avatar/post-avatar.d.ts +11 -9
  249. package/dist/types/components/post-date-picker/post-date-picker.d.ts +4 -1
  250. package/dist/types/components/post-header/post-header.d.ts +5 -1
  251. package/dist/types/components/post-language-menu/post-language-menu.d.ts +3 -0
  252. package/dist/types/components/post-megadropdown/post-megadropdown.d.ts +1 -1
  253. package/dist/types/components/post-menu/post-menu.d.ts +0 -1
  254. package/dist/types/components/post-popovercontainer/post-popovercontainer.d.ts +74 -69
  255. package/dist/types/components.d.ts +39 -26
  256. package/dist/types/utils/floating-ui/middleware/flip.d.ts +14 -0
  257. package/dist/types/utils/floating-ui/middleware/safe-space.d.ts +10 -0
  258. package/dist/types/utils/floating-ui/util.d.ts +4 -0
  259. package/dist/types/utils/index.d.ts +1 -0
  260. package/dist/types/utils/is-focus-visible.d.ts +5 -0
  261. package/dist/vrt/helpers/header-test-config.js +2 -1
  262. package/hydrate/index.js +564 -623
  263. package/hydrate/index.mjs +564 -623
  264. package/package.json +11 -10
  265. package/dist/components/react/p-3RU9XwVO.js +0 -1
  266. package/dist/components/react/p-B1TcktiB.js +0 -1
  267. package/dist/components/react/p-BN2dfUQ0.js +0 -1
  268. package/dist/components/react/p-BPUhha1U.js +0 -1
  269. package/dist/components/react/p-Bnb_TyDh.js +0 -1
  270. package/dist/components/react/p-T8T3po4z.js +0 -1
  271. package/dist/components/react/p-WXzzOdnl.js +0 -1
  272. package/dist/post-components/p-0e922531.entry.js +0 -1
  273. package/dist/post-components/p-53bd2128.entry.js +0 -1
  274. package/dist/post-components/p-59b30e90.entry.js +0 -1
  275. package/dist/post-components/p-76cc3c9a.entry.js +0 -1
  276. package/dist/post-components/p-819c93de.entry.js +0 -1
  277. package/dist/post-components/p-840acd3c.entry.js +0 -1
  278. package/dist/post-components/p-9S_5_Zh8.js +0 -1
  279. package/dist/post-components/p-BYfu3J2D.js +0 -1
  280. package/dist/post-components/p-BjziJWh2.js +0 -2
  281. package/dist/post-components/p-BoYe-VVx.js +0 -1
  282. package/dist/post-components/p-CbbADNiv.js +0 -1
  283. package/dist/post-components/p-DlKbBdcP.js +0 -1
  284. package/dist/post-components/p-T8T3po4z.js +0 -1
  285. package/dist/post-components/p-b4229624.entry.js +0 -1
  286. package/dist/post-components/p-b9faa76b.entry.js +0 -1
  287. package/dist/post-components/p-c0ae13b7.entry.js +0 -1
  288. package/dist/post-components/p-ccf8020b.entry.js +0 -1
  289. package/dist/post-components/p-cd68d3a2.entry.js +0 -1
  290. package/dist/post-components/p-db11f781.entry.js +0 -1
  291. package/dist/post-components/p-dec8bd99.entry.js +0 -1
  292. package/dist/types/home/runner/work/design-system/design-system/packages/components/.stencil/vrt/helpers/header-variants.config.d.ts +0 -23
  293. package/dist/vrt/helpers/header-variants.config.js +0 -157
  294. /package/dist/collection/utils/{floating-ui.js → floating-ui/platform/safe-area.js} +0 -0
  295. /package/dist/types/utils/{floating-ui.d.ts → floating-ui/platform/safe-area.d.ts} +0 -0
@@ -1,21 +1,22 @@
1
- import { r as registerInstance, h, H as Host, a as getElement, c as createEvent } from './index-BjziJWh2.js';
1
+ import { r as registerInstance, h, H as Host, a as getElement, c as createEvent } from './index-D0jX3Fts.js';
2
2
  import { b as breakpoint } from './breakpoints-I1j7a0bW.js';
3
3
  import { f as findClosestAcrossShadow, E as EventFrom } from './event-from-BEcxHjuM.js';
4
- import { v as version } from './package-T8T3po4z.js';
5
- import { O as OneOf } from './one-of-Do1iao-k.js';
6
- import { R as Required } from './required-B0X7uy13.js';
4
+ import { v as version } from './package-BdiQsTQm.js';
5
+ import { O as OneOf } from './one-of-B9locHPx.js';
6
+ import { R as Required } from './required-CDaQB1gC.js';
7
7
  import { f as fade } from './fade-DsgPYmAa.js';
8
8
  import { g as getDeepFocusableChildren, a as getFocusableChildren } from './get-focusable-children-DxYnH2ye.js';
9
9
  import { t as throttle } from './index-bR8vy6-s.js';
10
- import { T as Type } from './type-CF1dOg6D.js';
10
+ import { T as Type } from './type-CQ7XuPCZ.js';
11
11
  import { n as nanoid } from './nanoid-8LXe8Zt_.js';
12
- import { P as Pattern } from './pattern-BZDucOTq.js';
13
- import { U as Url } from './url-BL7d6iWZ.js';
12
+ import { P as Pattern } from './pattern-BL3OBU8C.js';
13
+ import { U as Url } from './url-B-86gtTK.js';
14
14
  import { r as resolveEasing } from './utils-CoDiS_Ik.js';
15
15
  import { f as fadeSlide } from './fade-slide-CvOvauo9.js';
16
16
  import { P as PLACEMENT_TYPES } from './placement-DRiVosES.js';
17
17
  import { g as getRoot } from './get-root-08F-DB-d.js';
18
- import './create-validator-decorator-C2XlYkNB.js';
18
+ import { i as isFocusVisible } from './is-focus-visible-BWwWKRO5.js';
19
+ import './create-validator-decorator-Cp_NUmrr.js';
19
20
 
20
21
  const CLOSABLE_TARGETS = [
21
22
  {
@@ -59,7 +60,7 @@ const BUTTON_TYPES = ['button', 'reset'];
59
60
  const PLACEMENT = ['manual', 'auto'];
60
61
  const SIZE = ['default', 'small'];
61
62
 
62
- const postClosebuttonCss = () => `.btn{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-1);gap:var(--post-device-spacing-gap-inline-10);padding:0 var(--post-device-spacing-padding-inline-6)}.btn:not(:disabled):hover{text-decoration:none}.btn:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.btn{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn{border-width:1px !important;transition:none}.btn:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}.btn>post-icon{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-primary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-primary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover{background-color:Highlight !important}.btn-primary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover>post-icon{color:HighlightText !important}}.btn-primary:disabled{border-color:var(--post-scheme-color-interactive-button-primary-disabled-stroke);color:var(--post-scheme-color-interactive-button-primary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-disabled-bg)}.btn-primary:not(:disabled):hover,.btn-primary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}.btn-default{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-default:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover{background-color:Highlight !important}.btn-default:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover>post-icon{color:HighlightText !important}}.btn-default:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg)}.btn-default:not(:disabled):hover,.btn-default.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}.btn-secondary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-secondary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover{background-color:Highlight !important}.btn-secondary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover>post-icon{color:HighlightText !important}}.btn-secondary:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg)}.btn-secondary:not(:disabled):hover,.btn-secondary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}.btn-tertiary{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-tertiary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover{background-color:Highlight !important}.btn-tertiary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover>post-icon{color:HighlightText !important}}.btn-tertiary:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg)}.btn-tertiary:not(:disabled):hover,.btn-tertiary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}.btn-link{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-link:disabled,.btn-link.disabled{text-decoration:none}}.btn-link:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg)}.btn-link:not(:disabled):hover,.btn-link.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.btn-sm{min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7)}.btn-sm>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-lg{min-height:var(--post-device-sizing-interactive-button-height-2);gap:var(--post-device-spacing-gap-inline-1);padding:0 var(--post-device-spacing-padding-inline-5)}.btn-lg>post-icon{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.btn-link{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border:0 none;border-radius:0;min-height:0;font-size:inherit;font-weight:inherit;padding:0}.btn-link{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.btn-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-link:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-link:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.btn-icon{padding:0;width:var(--post-device-sizing-interactive-button-height-1);height:var(--post-device-sizing-interactive-button-height-1);min-height:0;vertical-align:text-bottom}.btn-icon.btn-link{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon.btn-sm{padding:0;width:var(--post-device-sizing-interactive-button-height-4);height:var(--post-device-sizing-interactive-button-height-4);min-height:0;vertical-align:text-bottom}.btn-icon.btn-sm.btn-link{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-sm>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-lg{padding:0;width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);min-height:0;vertical-align:text-bottom}.btn-icon.btn-lg.btn-link{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.btn-icon.btn-lg>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:host .btn{background-color:var(--post-scheme-color-interactive-primary-enabled-bg1)}:host .btn:not(:disabled):hover,:host .btn.pretend-hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg)}:host(:not([placement])),:host([placement=auto]){position:absolute;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%)}:host([size=small]) .btn{height:var(--post-device-sizing-interactive-button-height-7);width:var(--post-device-sizing-interactive-button-height-7)}`;
63
+ const postClosebuttonCss = () => `.btn{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;white-space:normal;overflow-wrap:anywhere;text-wrap:pretty;text-align:center;min-height:var(--post-device-sizing-interactive-button-height-1);gap:var(--post-device-spacing-gap-inline-10);padding:0 var(--post-device-spacing-padding-inline-6);border-radius:calc(var(--post-device-sizing-interactive-button-height-1) / 2)}.btn:not(:disabled):hover{text-decoration:none}.btn:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.btn{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.btn:focus-visible{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:focus-visible{outline-color:Highlight !important}}.pretend-focus.btn{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.pretend-focus.btn{outline-color:Highlight !important}}.btn:has(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn{border-width:1px !important;transition:none}.btn:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}.btn>post-icon{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4);flex-shrink:0}.btn-primary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-primary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover{background-color:Highlight !important}.btn-primary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover>post-icon{color:HighlightText !important}}.btn-primary:disabled{border-color:var(--post-scheme-color-interactive-button-primary-disabled-stroke);color:var(--post-scheme-color-interactive-button-primary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-disabled-bg)}.btn-primary:not(:disabled):hover,.btn-primary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}.btn-default{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-default:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover{background-color:Highlight !important}.btn-default:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover>post-icon{color:HighlightText !important}}.btn-default:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg)}.btn-default:not(:disabled):hover,.btn-default.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}.btn-secondary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-secondary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover{background-color:Highlight !important}.btn-secondary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover>post-icon{color:HighlightText !important}}.btn-secondary:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg)}.btn-secondary:not(:disabled):hover,.btn-secondary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}.btn-tertiary{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-tertiary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover{background-color:Highlight !important}.btn-tertiary:not(:disabled,.disabled):not(a.btn-tertiary.px-0):hover>post-icon{color:HighlightText !important}}.btn-tertiary:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg)}.btn-tertiary:not(:disabled):hover,.btn-tertiary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}.btn-link{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-link:disabled,.btn-link.disabled{text-decoration:none}}.btn-link:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg)}.btn-link:not(:disabled):hover,.btn-link.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.btn-sm{min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7);border-radius:calc(var(--post-device-sizing-interactive-button-height-4) / 2)}.btn-sm>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5);flex-shrink:0}.btn-lg{min-height:var(--post-device-sizing-interactive-button-height-2);gap:var(--post-device-spacing-gap-inline-1);padding:0 var(--post-device-spacing-padding-inline-5);border-radius:calc(var(--post-device-sizing-interactive-button-height-2) / 2)}.btn-lg>post-icon{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3);flex-shrink:0}.btn-link{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border:0 none;border-radius:0;min-height:0;font-size:inherit;font-weight:inherit;padding:0}.btn-link{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.btn-link:focus-visible{outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-link:focus-visible{outline-color:Highlight !important}}.btn-link.pretend-focus{outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-link.pretend-focus{outline-color:Highlight !important}}.btn-link:has(:focus-visible){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-link:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-link:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-link:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.btn-link:disabled{color:var(--post-scheme-color-interactive-primary-disabled-fg1);text-decoration-style:var(--post-core-border-style-dash)}.btn-icon{padding:0;width:var(--post-device-sizing-interactive-button-height-1);height:var(--post-device-sizing-interactive-button-height-1);min-height:0;vertical-align:text-bottom}.btn-icon.btn-link{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon.btn-sm{padding:0;width:var(--post-device-sizing-interactive-button-height-4);height:var(--post-device-sizing-interactive-button-height-4);min-height:0;vertical-align:text-bottom}.btn-icon.btn-sm.btn-link{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-sm>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-lg{padding:0;width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);min-height:0;vertical-align:text-bottom}.btn-icon.btn-lg.btn-link{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.btn-icon.btn-lg>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:host .btn{background-color:var(--post-scheme-color-interactive-primary-enabled-bg1)}:host .btn:not(:disabled):hover,:host .btn.pretend-hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg)}:host(:not([placement])),:host([placement=auto]){position:absolute;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%)}:host([size=small]) .btn{height:var(--post-device-sizing-interactive-button-height-7);width:var(--post-device-sizing-interactive-button-height-7)}`;
63
64
 
64
65
  var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
65
66
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -168,7 +169,7 @@ function slide(el, direction, options = {}) {
168
169
  return animateSlide(el, keyframes, options);
169
170
  }
170
171
 
171
- const postHeaderCss = () => `:host{--post-global-header-top:calc( var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height) );--post-header-top:calc(var(--post-header-reduced-height) - var(--post-header-expanded-height));--post-logo-height:calc( var(--post-global-header-expanded-height) - var(--post-header-scroll-top, 0px) );--post-global-controls-top:clamp( 1000 * (var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height)), calc( -1 * min(var(--post-header-scroll-top, 0px) / 4, var(--post-global-header-reduced-height)) ), 0px )}@media screen and (min-width: 1024px){:host{--post-header-gap:8px;--post-global-header-padding-inline-start:4px;--post-global-header-padding-inline-end:8px;--post-local-header-padding-inline-start:12px;--post-local-header-padding-inline-end:8px}}@media screen and (min-width: 600px)and (max-width: 1023.98px){:host{--post-header-gap:12px 8px;--post-global-header-padding-inline-start:4px;--post-global-header-padding-inline-end:4px;--post-local-header-padding-inline-start:12px;--post-local-header-padding-inline-end:4px;--post-local-header-padding-block:12px;--post-burger-menu-padding-inline:40px;--post-burger-menu-body-gap:32px;--post-burger-menu-footer-gap:24px}}@media screen and (min-width: 600px)and (max-width: 779.98px){:host{--post-burger-menu-padding-inline:16px}}@media screen and (min-width: 0)and (max-width: 599.98px){:host{--post-header-gap:12px 8px;--post-global-header-padding-inline-start:0px;--post-global-header-padding-inline-end:8px;--post-local-header-padding-inline-start:8px;--post-local-header-padding-inline-end:8px;--post-local-header-padding-block:8px;--post-burger-menu-padding-inline:16px;--post-burger-menu-body-gap:24px;--post-burger-menu-footer-gap:16px}}:host(:not([full-width])),:host([full-width=false]){--post-header-content-max-width:1440px}:host([data-expanded]),:host([data-menu-extended]){--post-header-top:0;--post-global-header-top:-0.001px;--post-global-controls-top:0;--post-global-header-reduced-height:var(--post-global-header-expanded-height)}*,::before,::after{box-sizing:border-box}:host,header,.global-header,.local-header{transition:inset-block-start 150ms cubic-bezier(0.4, 0, 0.2, 1)}.section,.sliding-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--post-header-gap);flex-wrap:wrap}.section{max-width:var(--post-header-content-max-width);margin-inline:auto}:host{display:block;position:sticky;inset-block-start:var(--post-header-top);z-index:1020;box-shadow:var(--post-device-elevation-300)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host{border-bottom:1px solid}}.global-header{z-index:2;position:sticky;inset-block-start:var(--post-global-header-top);background-color:#fc0}.global-header .section{height:var(--post-global-header-expanded-height);padding-inline-start:var(--post-global-header-padding-inline-start);padding-inline-end:var(--post-global-header-padding-inline-end)}.global-header .logo{align-self:flex-end;width:var(--post-global-header-expanded-height);height:var(--post-logo-height);min-height:var(--post-global-header-reduced-height);max-height:100%;margin-inline-end:calc(20px - var(--post-header-gap));margin-inline-start:clamp(var(--post-logo-expanded-offset),var(--post-logo-expanded-offset) + (var(--post-logo-reduced-offset) - var(--post-logo-expanded-offset))*min(var(--post-header-scroll-top, 0px),var(--post-global-header-expanded-height) - var(--post-global-header-reduced-height))/max(1px,var(--post-global-header-expanded-height) - var(--post-global-header-reduced-height)),var(--post-logo-reduced-offset))}.global-header .sliding-controls{flex-grow:1;justify-content:flex-end;position:relative;inset-block-start:var(--post-global-controls-top)}.global-header .audience{margin-inline-end:auto}@media screen and (max-width: 1023.98px){.global-header slot:where([name=audience],[name=global-nav-secondary]){display:none}}.local-header{position:relative;background-color:#fff;min-height:var(--post-local-header-expanded-min-height);display:var(--post-local-header-display, flex);align-items:var(--post-local-header-align-items, center)}.local-header .section{width:100%;padding-inline-start:var(--post-local-header-padding-inline-start);padding-inline-end:var(--post-local-header-padding-inline-end);padding-block:var(--post-local-header-padding-block)}@media screen and (min-width: 1024px){.local-header .section{display:grid;grid-template:var(--post-local-header-grid-template)}}@media screen and (max-width: 1023.98px){.local-header .section{display:flex;align-self:center}}@media screen and (max-width: 1023.98px)and (max-width: 599.98px){.local-header .section{justify-content:end}}.local-header:where(.megadropdown-open)::after,.local-header:has(~.burger-menu.extended)::after{content:"";display:block;position:absolute;inset-inline:0;inset-block-end:0;height:1px;background-color:#e1e0dc}.local-header .local-nav{flex:0 0 auto}@media screen and (max-width: 1023.98px){.local-header slot[name=main-nav]{display:none}}.burger-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:flex;padding:4px 10px;gap:6px;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);display:var(--post-burger-button-display, flex)}.burger-button:not(:disabled):hover{text-decoration:none}.burger-button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.burger-button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.burger-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.burger-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.burger-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.burger-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.burger-button{border-width:1px !important;transition:none}.burger-button:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}.burger-button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}.burger-button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}.burger-button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}@media screen and (min-width: 0)and (max-width: 599.98px){.burger-button{padding:10px}.burger-button>:not(post-icon){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.burger-button>post-icon{font-size:1.5rem}}@media screen and (min-width: 1024px){.burger-button{display:none}}.burger-menu{z-index:-1;position:absolute;inset-inline:0;inset-block-start:100%;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));overflow:hidden auto;display:flex;flex-direction:column;background-color:#fafafa}.burger-menu.extended.second-level-open{overflow:hidden}.burger-menu:not(.extended){transform:translateY(-100%);display:none}.burger-menu:not(.extended)>*{display:none}.burger-menu .burger-menu-body,.burger-menu .burger-menu-footer{display:flex;flex-direction:column;padding-inline:var(--post-burger-menu-padding-inline)}.burger-menu .burger-menu-body{flex-grow:1;padding-block:24px;gap:var(--post-burger-menu-body-gap)}.burger-menu .burger-menu-footer{background-color:#f0efed;padding-block:16px 24px;gap:var(--post-burger-menu-footer-gap)}.burger-menu .local-nav{min-height:56px;display:flex;align-items:center;justify-content:flex-end;padding-inline:4px}`;
172
+ const postHeaderCss = () => `:host{--post-global-header-top:calc( var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height) );--post-header-top:calc(var(--post-header-reduced-height) - var(--post-header-expanded-height));--post-logo-height:calc( var(--post-global-header-expanded-height) - var(--post-header-scroll-top, 0px) );--post-global-controls-top:clamp( 1000 * (var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height)), calc( -1 * min(var(--post-header-scroll-top, 0px) / 4, var(--post-global-header-reduced-height)) ), 0px )}@media screen and (min-width: 1024px){:host{--post-header-gap:8px;--post-global-header-padding-inline-start:4px;--post-global-header-padding-inline-end:8px;--post-local-header-padding-inline-start:12px;--post-local-header-padding-inline-end:8px}}@media screen and (min-width: 600px)and (max-width: 1023.98px){:host{--post-header-gap:12px 8px;--post-global-header-padding-inline-start:4px;--post-global-header-padding-inline-end:4px;--post-local-header-padding-inline-start:12px;--post-local-header-padding-inline-end:4px;--post-local-header-padding-block:12px;--post-burger-menu-padding-inline:40px;--post-burger-menu-body-gap:32px;--post-burger-menu-footer-gap:24px}}@media screen and (min-width: 600px)and (max-width: 779.98px){:host{--post-burger-menu-padding-inline:16px}}@media screen and (min-width: 0)and (max-width: 599.98px){:host{--post-header-gap:12px 8px;--post-global-header-padding-inline-start:0px;--post-global-header-padding-inline-end:8px;--post-local-header-padding-inline-start:8px;--post-local-header-padding-inline-end:8px;--post-local-header-padding-block:8px;--post-burger-menu-padding-inline:16px;--post-burger-menu-body-gap:24px;--post-burger-menu-footer-gap:16px}}:host(:not([full-width])),:host([full-width=false]){--post-header-content-max-width:1440px}:host([data-expanded]),:host([data-menu-extended]){--post-header-top:0;--post-global-header-top:-0.001px;--post-global-controls-top:0;--post-global-header-reduced-height:var(--post-global-header-expanded-height)}*,::before,::after{box-sizing:border-box}:host,header,.global-header,.local-header{transition:inset-block-start 150ms cubic-bezier(0.4, 0, 0.2, 1)}.section,.sliding-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--post-header-gap);flex-wrap:wrap}.section{max-width:var(--post-header-content-max-width);margin-inline:auto}:host{display:block;position:sticky;inset-block-start:var(--post-header-top);z-index:1020;box-shadow:var(--post-device-elevation-300)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host{border-bottom:1px solid}}.global-header{z-index:2;position:sticky;inset-block-start:var(--post-global-header-top);background-color:#fc0}.global-header::before{position:absolute;z-index:-1;left:0;bottom:0;width:100%;height:100dvh;content:"";background-color:#fc0}.global-header .section{height:var(--post-global-header-expanded-height);padding-inline-start:var(--post-global-header-padding-inline-start);padding-inline-end:var(--post-global-header-padding-inline-end)}.global-header .logo{align-self:flex-end;width:var(--post-global-header-expanded-height);height:var(--post-logo-height);min-height:var(--post-global-header-reduced-height);max-height:100%;margin-inline-end:calc(20px - var(--post-header-gap));margin-inline-start:clamp(var(--post-logo-expanded-offset),var(--post-logo-expanded-offset) + (var(--post-logo-reduced-offset) - var(--post-logo-expanded-offset))*min(var(--post-header-scroll-top, 0px),var(--post-global-header-expanded-height) - var(--post-global-header-reduced-height))/max(1px,var(--post-global-header-expanded-height) - var(--post-global-header-reduced-height)),var(--post-logo-reduced-offset))}.global-header .sliding-controls{flex-grow:1;justify-content:flex-end;position:relative;inset-block-start:var(--post-global-controls-top)}.global-header .audience{margin-inline-end:auto}@media screen and (max-width: 1023.98px){.global-header slot:where([name=audience],[name=global-nav-secondary]){display:none}}.local-header{position:relative;background-color:#fff;min-height:var(--post-local-header-expanded-min-height);display:var(--post-local-header-display, flex);align-items:var(--post-local-header-align-items, center)}.local-header .section{width:100%;padding-inline-start:var(--post-local-header-padding-inline-start);padding-inline-end:var(--post-local-header-padding-inline-end);padding-block:var(--post-local-header-padding-block)}@media screen and (min-width: 1024px){.local-header .section{display:grid;grid-template:var(--post-local-header-grid-template)}}@media screen and (max-width: 1023.98px){.local-header .section{display:flex;align-self:center}}@media screen and (max-width: 1023.98px)and (max-width: 599.98px){.local-header .section{justify-content:end}}.local-header:where(.megadropdown-open)::after,.local-header:has(~.burger-menu.extended)::after{content:"";display:block;position:absolute;inset-inline:0;inset-block-end:0;height:1px;background-color:#e1e0dc}.local-header .local-nav{flex:0 0 auto}@media screen and (max-width: 1023.98px){.local-header slot[name=main-nav]{display:none}}.burger-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:flex;padding:4px 10px;gap:6px;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);display:var(--post-burger-button-display, flex)}.burger-button:not(:disabled):hover{text-decoration:none}.burger-button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.burger-button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.burger-button:focus-visible{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.burger-button:focus-visible{outline-color:Highlight !important}}.burger-button.pretend-focus{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.burger-button.pretend-focus{outline-color:Highlight !important}}.burger-button:has(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.burger-button:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.burger-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.burger-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.burger-button{border-width:1px !important;transition:none}.burger-button:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}.burger-button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}.burger-button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}.burger-button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}@media screen and (min-width: 0)and (max-width: 599.98px){.burger-button{padding:10px}.burger-button>:not(post-icon){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.burger-button>post-icon{font-size:1.5rem}}@media screen and (min-width: 1024px){.burger-button{display:none}}.burger-menu{z-index:-1;position:absolute;inset-inline:0;inset-block-start:100%;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));overflow:hidden auto;display:flex;flex-direction:column;background-color:#fafafa}.burger-menu.extended.second-level-open{overflow:hidden}.burger-menu:not(.extended){transform:translateY(-100%);display:none}.burger-menu:not(.extended)>*{display:none}.burger-menu .burger-menu-body,.burger-menu .burger-menu-footer{display:flex;flex-direction:column;padding-inline:var(--post-burger-menu-padding-inline)}.burger-menu .burger-menu-body{flex-grow:1;padding-block:24px;gap:var(--post-burger-menu-body-gap)}.burger-menu .burger-menu-footer{background-color:#f0efed;padding-block-start:16px;padding-block-end:max(24px, env(safe-area-inset-bottom, 0px));gap:var(--post-burger-menu-footer-gap)}.burger-menu .local-nav{min-height:56px;display:flex;align-items:center;justify-content:flex-end;padding-inline:4px}`;
172
173
 
173
174
  var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
174
175
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -241,6 +242,10 @@ const PostHeader = class {
241
242
  this.closeBurgerMenu();
242
243
  }
243
244
  };
245
+ this.onScroll = () => {
246
+ this.handleScrollEvent();
247
+ this.collapseIfNotKeyboardFocused();
248
+ };
244
249
  this.handleScrollEvent = this.handleScrollEvent.bind(this);
245
250
  this.updateScrollParentHeight = this.updateScrollParentHeight.bind(this);
246
251
  this.updateLocalHeaderHeight = this.updateLocalHeaderHeight.bind(this);
@@ -251,10 +256,10 @@ const PostHeader = class {
251
256
  }
252
257
  connectedCallback() {
253
258
  globalThis.addEventListener('resize', this.throttledResize, { passive: true });
254
- globalThis.addEventListener('scroll', this.handleScrollEvent, {
259
+ globalThis.addEventListener('scroll', this.onScroll, {
255
260
  passive: true,
256
261
  });
257
- this.scrollParent.addEventListener('scroll', this.handleScrollEvent, {
262
+ this.scrollParent.addEventListener('scroll', this.onScroll, {
258
263
  passive: true,
259
264
  });
260
265
  document.addEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
@@ -286,9 +291,9 @@ const PostHeader = class {
286
291
  const scrollParent = this.scrollParent;
287
292
  globalThis.removeEventListener('postBreakpoint:device', this.breakpointChange);
288
293
  globalThis.removeEventListener('resize', this.throttledResize);
289
- globalThis.removeEventListener('scroll', this.handleScrollEvent);
294
+ globalThis.removeEventListener('scroll', this.onScroll);
290
295
  if (scrollParent)
291
- scrollParent.removeEventListener('scroll', this.handleScrollEvent);
296
+ scrollParent.removeEventListener('scroll', this.onScroll);
292
297
  document.removeEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
293
298
  this.host.removeEventListener('keydown', this.keyboardHandler);
294
299
  if (this.host.shadowRoot) {
@@ -381,6 +386,15 @@ const PostHeader = class {
381
386
  });
382
387
  this.megadropdownOpen = false;
383
388
  }
389
+ // The header only stays expanded to keep keyboard focus visible
390
+ // once focus is no longer keyboard focus (e.g. after a click), it can collapse on scroll
391
+ collapseIfNotKeyboardFocused() {
392
+ if (!('expanded' in this.host.dataset))
393
+ return;
394
+ if (this.getDeepActiveElement()?.matches(':focus-visible'))
395
+ return;
396
+ delete this.host.dataset.expanded;
397
+ }
384
398
  handleScrollEvent() {
385
399
  const scrollTop = this.scrollParent === document.body ? window.scrollY : this.scrollParent.scrollTop;
386
400
  document.documentElement.style.setProperty('--post-header-scroll-top', `${Math.max(scrollTop, 0)}px`);
@@ -442,14 +456,26 @@ const PostHeader = class {
442
456
  languageSwitch?.setAttribute('variant', variant);
443
457
  });
444
458
  }
445
- onFocusChange() {
459
+ onFocusChange(event) {
460
+ if (event.type === 'focusout') {
461
+ // Ignore focus moving between elements of the header (e.g. into the language menu flyout)
462
+ if (this.isWithinHeader(event.relatedTarget))
463
+ return;
464
+ delete this.host.dataset.expanded;
465
+ return;
466
+ }
467
+ // Mouse focus never changes the state
468
+ // collapsing here would move the controls away from the pointer before the click completes
446
469
  const isFocusVisible = this.getDeepActiveElement()?.matches(':focus-visible');
447
- const isFocusedInHeader = this.host.matches(':focus-within');
448
- const mustRemainCollapsed = this.device === 'desktop'
449
- ? !!this.host.querySelector('post-mainnavigation:focus-within')
450
- : !!this.host.shadowRoot?.querySelector(':is(.global-header, .burger-menu):focus-within');
451
- const isHeaderExpanded = isFocusVisible && isFocusedInHeader && !mustRemainCollapsed;
452
- this.host.toggleAttribute('data-expanded', isHeaderExpanded);
470
+ if (!isFocusVisible)
471
+ return;
472
+ // Keyboard focus: expanded only while focus is in the part that collapses on scroll
473
+ const collapsiblePart = this.device === 'desktop' ? this.globalHeader : this.localHeader;
474
+ const isInCollapsiblePart = event.composedPath().includes(collapsiblePart);
475
+ this.host.toggleAttribute('data-expanded', isInCollapsiblePart);
476
+ }
477
+ isWithinHeader(target) {
478
+ return target instanceof Node && (target === this.host || this.host.contains(target));
453
479
  }
454
480
  // document.activeElement stops at the outermost shadow host (e.g. post-language-menu)
455
481
  // when focus is nested inside its own shadow root, walk down to find the real target
@@ -470,10 +496,10 @@ const PostHeader = class {
470
496
  render() {
471
497
  const onDesktop = this.device === 'desktop';
472
498
  const onTabletAndMobile = this.device !== 'desktop';
473
- return (h(Host, { key: 'd288ef2e58942c2cbc5da673076548c97eef04ed', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, h("header", { key: '5357f3edf382dec9b552fdfe9fb51d0878de697c' }, h("div", { key: 'bafa11390b33056e5a3d1a8a2922fd3a43a25020', class: "global-header" }, h("div", { key: '2d54e8d2931864880ff7a28aea64625e775ce327', class: "section" }, h("div", { key: 'b3a87bbf3b87213e22043d58a7298d0cff530cdf', class: "logo" }, h("slot", { key: '9d559b9231dc23841e277d3f4633cdeba2da12b2', name: "post-logo" })), h("div", { key: '64ebd463868ce8b417023651e745e33331feb908', class: "sliding-controls" }, onDesktop && (h("div", { key: 'b4e7d7231a0d8bebe620d41cb655c3686449b19f', class: "audience" }, h("slot", { key: '0781a76b1853a842dc74ec2a2a649f7de487e148', name: "audience" }))), h("slot", { key: '25f1d5b34a5aa950014214f810f3acca95dbbe80', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
499
+ return (h(Host, { key: '4c74840c9613cb23844f18754a25acfc0d16f128', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, h("header", { key: '711ff06b1294ab7cca504cbb1b18ea132f2e2a29' }, h("div", { key: '91f37765845ec6df6f878a5750acb2f9d3a9a3ef', ref: el => (this.globalHeader = el), class: "global-header" }, h("div", { key: '9ce59aeb02b710ebf435dd71a44daef5729784cb', class: "section" }, h("div", { key: '9ae9b8a9d4d53eb18cee84167b6fd0900ca968bf', class: "logo" }, h("slot", { key: 'a0970fc3b536710b746d62013da387a03ac02ae6', name: "post-logo" })), h("div", { key: '685cf65541a21d8911705317b62ac7a5f900141a', class: "sliding-controls" }, onDesktop && (h("div", { key: '540854418db78414095ef58d376401955e05458b', class: "audience" }, h("slot", { key: '57f1a927cffb3baea05d7ea54d78fd57349dd81f', name: "audience" }))), h("slot", { key: '1f473accb45b6da9ca0225ed1ee1c075a89cc5a4', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
474
500
  h("slot", { key: "global-nav-secondary", name: "global-nav-secondary" }),
475
501
  h("slot", { key: "language-menu", name: "language-menu" }),
476
- ], h("slot", { key: 'd7121e5e9ddf825f96a3a82e65ff135c61891adb', name: "post-login" }), onTabletAndMobile && this.hasMainNav && (h("post-togglebutton", { key: 'dd0bcf9cfd96d4ffa44fc549d518d7b39d287156', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, h("span", { key: '23004cb12733a7081f828d33327cc26adafe3888' }, this.textMenu), h("post-icon", { key: '7fb36892eadfcce0a85d964c411aeafc3fbbde1b', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), h("post-icon", { key: 'a41292205573c03f25d225d4f4296f75ffe6c7ce', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), h("div", { key: '7d6d1424881bb5277210c86b194dfb9e5dcb7c59', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, h("div", { key: '724a8d3f79112875ba343470f9d0b753ce5d4861', class: "section" }, h("slot", { key: '688aafdec4e4d5565f3d0a9d9bd9bb7bc78152be', name: "side-nav" }), h("slot", { key: '12590bfb4bfcc8c565f008a8e3d75b5951eb73bc', name: "title" }), this.hasTitle && h("slot", { key: 'd862de0f3aaba5ea22a26c387ea7e93dc0c5e79c', name: "local-nav" }), onDesktop && h("slot", { key: '1a25ec6694bc8b2c06e21449dc566f36595afbb5', name: "main-nav" }), onDesktop && !this.hasTitle && h("slot", { key: '987c26ee73fb19049fdd19de79b537b71e2771de', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
502
+ ], h("slot", { key: '2f22dad30f8b4482b86aa44f4806844a0543826e', name: "post-login" }), onTabletAndMobile && this.hasMainNav && (h("post-togglebutton", { key: 'd9440ab691459ee505bd3fee43df08eab4fd7d6e', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, h("span", { key: 'c8e750756d635d4d145393db597e7e6c0aab0bf3' }, this.textMenu), h("post-icon", { key: 'ff251d5dd1815caccc2c1099dafbda2719e39531', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), h("post-icon", { key: '1a607d5b4bf397b17aeeaa392b2444d480740e26', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), h("div", { key: 'bdbd60cf795b45ff66c1078defaf388eaa9711a6', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, h("div", { key: '3b065f633b1dbf16595ae2665c425448c08e01a5', class: "section" }, h("slot", { key: '8d2a3f4491a348b16dbd71f439ed0e57b8856642', name: "side-nav" }), h("slot", { key: '2b169e02026daaa253e6c607d29b4c51373b30c5', name: "title" }), this.hasTitle && h("slot", { key: 'e4afc5c638c62533387cb35eb121e6736afc957d', name: "local-nav" }), onDesktop && h("slot", { key: '2dedbbec1b4af4b5f22aaf555b0c1adc2260eca3', name: "main-nav" }), onDesktop && !this.hasTitle && h("slot", { key: 'db0bf934df1bd189cbecb74ebc2cdc9b753c56f4', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
477
503
  }
478
504
  get host() { return getElement(this); }
479
505
  static get watchers() { return {
@@ -627,7 +653,7 @@ PostIcon.style = postIconCss();
627
653
 
628
654
  const SWITCH_VARIANTS = ['list', 'menu'];
629
655
 
630
- const postLanguageMenuCss = () => `:host{display:flex}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.post-language-menu-dropdown-container{display:flex;flex-direction:column}.post-language-menu-trigger{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:flex;padding:4px 10px;gap:6px;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);text-transform:uppercase;line-height:inherit;cursor:pointer}.post-language-menu-trigger:not(:disabled):hover{text-decoration:none}.post-language-menu-trigger:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.post-language-menu-trigger{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.post-language-menu-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-menu-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-menu-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-menu-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-menu-trigger{border-width:1px !important;transition:none}.post-language-menu-trigger:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}.post-language-menu-trigger:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}.post-language-menu-trigger:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}.post-language-menu-trigger:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}.post-language-menu-trigger post-icon{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.post-language-menu-trigger:is([aria-current],[aria-pressed=true],[aria-expanded=true]) post-icon{transform:rotate(180deg)}.post-language-menu-list{display:flex;gap:8px;margin-top:16px}`;
656
+ const postLanguageMenuCss = () => `:host{display:flex}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.post-language-menu-dropdown-container{display:flex;flex-direction:column}.post-language-menu-trigger{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:flex;padding:4px 10px;gap:6px;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);text-transform:uppercase;line-height:inherit;cursor:pointer}.post-language-menu-trigger:not(:disabled):hover{text-decoration:none}.post-language-menu-trigger:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.post-language-menu-trigger{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.post-language-menu-trigger:focus-visible{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-menu-trigger:focus-visible{outline-color:Highlight !important}}.post-language-menu-trigger.pretend-focus{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-menu-trigger.pretend-focus{outline-color:Highlight !important}}.post-language-menu-trigger:has(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-menu-trigger:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-menu-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-menu-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-menu-trigger{border-width:1px !important;transition:none}.post-language-menu-trigger:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}.post-language-menu-trigger:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}.post-language-menu-trigger:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}.post-language-menu-trigger:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}.post-language-menu-trigger post-icon{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.post-language-menu-trigger:is([aria-current],[aria-pressed=true],[aria-expanded=true]) post-icon{transform:rotate(180deg)}.post-language-menu-list{display:flex;gap:8px;margin-top:16px}`;
631
657
 
632
658
  var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
633
659
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -809,7 +835,7 @@ __decorate$7([
809
835
  ], PostLanguageMenuItem.prototype, "url", void 0);
810
836
  PostLanguageMenuItem.style = postLanguageMenuItemCss();
811
837
 
812
- const postLogoCss = () => `:host,.logo{display:inline-block}:host,:host .logo>svg,.logo,.logo .logo>svg{height:100%}.description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.logo-link{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.logo-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.logo-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.logo-link{outline-offset:var(--post-device-spacing-padding-28) !important}.logo-link:focus,.logo-link:focus-visible{border-radius:var(--post-device-border-radius-focus)}`;
838
+ const postLogoCss = () => `:host,.logo{display:inline-block}:host,:host .logo>svg,.logo,.logo .logo>svg{height:100%}.description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.logo-link{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.logo-link:focus-visible{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.logo-link:focus-visible{outline-color:Highlight !important}}.logo-link.pretend-focus{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.logo-link.pretend-focus{outline-color:Highlight !important}}.logo-link:has(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.logo-link:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.logo-link{outline-offset:var(--post-device-spacing-padding-28) !important}.logo-link:focus,.logo-link:focus-visible{border-radius:var(--post-device-border-radius-focus)}`;
813
839
 
814
840
  var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
815
841
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -986,7 +1012,7 @@ __decorate$5([
986
1012
  ], PostMainnavigation.prototype, "textMain", void 0);
987
1013
  PostMainnavigation.style = postMainnavigationCss();
988
1014
 
989
- const postMegadropdownCss = () => `*,::before,::after{box-sizing:border-box}.megadropdown{position:absolute;inset-inline:0;overflow-y:auto;box-shadow:var(--post-device-elevation-300)}@media screen and (min-width: 1024px){.megadropdown{max-height:calc(100vh - var(--post-header-height) - 48px);background-color:#f0efed;z-index:-1;inset-block-start:100%}.megadropdown.slide-in{animation:slide-down 350ms forwards}.megadropdown.slide-out{animation:slide-up 350ms forwards}}@media screen and (max-width: 1023.98px){.megadropdown{background-color:#fafafa;z-index:1;inset-block-start:var(--post-header-navigation-current-inset);overscroll-behavior:contain}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown{border-block-end:1px solid CanvasText}}.section{width:100%;max-width:var(--post-header-content-max-width);margin-inline:auto;position:relative}@media screen and (min-width: 1024px){.section{padding:48px 40px 40px}}@media screen and (max-width: 1023.98px){.section{display:flex;flex-direction:column;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));padding-inline:var(--post-burger-menu-padding-inline);padding-block-start:24px}}@media screen and (max-width: 1023.98px){.section .megadropdown-content{padding-block-end:24px}}.megadropdown-title{margin-block:0 16px;font-weight:950}@media screen and (min-width: 600px)and (max-width: 1023.98px){.megadropdown-title{font-size:1.25rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.megadropdown-title{font-size:1.125rem}}.back-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7);border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);order:-1;width:fit-content;padding-inline:0}.back-button:not(:disabled):hover{text-decoration:none}.back-button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.back-button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.back-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button{border-width:1px !important;transition:none}.back-button:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}.back-button>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.back-button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}@media screen and (min-width: 600px)and (max-width: 1023.98px){.back-button{margin-block-end:32px}}@media screen and (min-width: 0)and (max-width: 599.98px){.back-button{margin-block-end:24px}}.close-button{position:absolute;inset-block-start:8px;inset-inline-end:8px}@media screen and (max-width: 1023.98px){.close-button{display:none}}`;
1015
+ const postMegadropdownCss = () => `*,::before,::after{box-sizing:border-box}.megadropdown{position:absolute;inset-inline:0;overflow-y:auto;box-shadow:var(--post-device-elevation-300)}@media screen and (min-width: 1024px){.megadropdown{max-height:calc(100vh - var(--post-header-height) - 48px);background-color:#f0efed;z-index:-1;inset-block-start:100%}.megadropdown.slide-in{animation:slide-down 350ms forwards}.megadropdown.slide-out{animation:slide-up 350ms forwards}}@media screen and (max-width: 1023.98px){.megadropdown{background-color:#fafafa;z-index:1;inset-block-start:var(--post-header-navigation-current-inset);overscroll-behavior:contain}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown{border-block-end:1px solid CanvasText}}.section{width:100%;max-width:var(--post-header-content-max-width);margin-inline:auto;position:relative}@media screen and (min-width: 1024px){.section{padding:48px 40px 40px}}@media screen and (max-width: 1023.98px){.section{display:flex;flex-direction:column;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));padding-inline:var(--post-burger-menu-padding-inline);padding-block-start:24px}}@media screen and (max-width: 1023.98px){.section .megadropdown-content{padding-block-end:max(24px, env(safe-area-inset-bottom, 0px))}}.megadropdown-title{margin-block:0 16px;font-weight:950}@media screen and (min-width: 600px)and (max-width: 1023.98px){.megadropdown-title{font-size:1.25rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.megadropdown-title{font-size:1.125rem}}.back-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7);border-radius:calc(var(--post-device-sizing-interactive-button-height-4) / 2);border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);order:-1;width:fit-content;padding-inline:0}.back-button:not(:disabled):hover{text-decoration:none}.back-button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.back-button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.back-button:focus-visible{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:focus-visible{outline-color:Highlight !important}}.back-button.pretend-focus{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button.pretend-focus{outline-color:Highlight !important}}.back-button:has(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button{border-width:1px !important;transition:none}.back-button:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}.back-button>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5);flex-shrink:0}.back-button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}@media screen and (min-width: 600px)and (max-width: 1023.98px){.back-button{margin-block-end:32px}}@media screen and (min-width: 0)and (max-width: 599.98px){.back-button{margin-block-end:24px}}.close-button{position:absolute;inset-block-start:8px;inset-inline-end:8px}@media screen and (max-width: 1023.98px){.close-button{display:none}}`;
990
1016
 
991
1017
  var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
992
1018
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -1009,7 +1035,7 @@ const PostMegadropdown = class {
1009
1035
  registerInstance(this, hostRef);
1010
1036
  this.postToggleMegadropdown = createEvent(this, "postToggleMegadropdown");
1011
1037
  this.currentAnimation = null;
1012
- this.isAnimating = false;
1038
+ this.animationDirection = null;
1013
1039
  this.fsAnimationOptions = {
1014
1040
  translate: -10,
1015
1041
  duration: 350,
@@ -1037,7 +1063,7 @@ const PostMegadropdown = class {
1037
1063
  return;
1038
1064
  }
1039
1065
  // Ignore clicks on the trigger or its contents to prevent running hide() twice
1040
- if (this.megadropdownTrigger.contains(target)) {
1066
+ if (this.megadropdownTrigger?.contains(target)) {
1041
1067
  return;
1042
1068
  }
1043
1069
  if (target instanceof HTMLElement) {
@@ -1079,9 +1105,9 @@ const PostMegadropdown = class {
1079
1105
  * Toggles the dropdown visibility based on its current state.
1080
1106
  */
1081
1107
  async toggle() {
1082
- if (this.isAnimating) {
1108
+ if (this.animationDirection) {
1083
1109
  // If this is already animating towards a future state -> reverse intent
1084
- return this.isVisible ? this.show() : this.hide();
1110
+ return this.animationDirection === 'in' ? this.hide() : this.show();
1085
1111
  }
1086
1112
  return this.isVisible ? this.hide() : this.show();
1087
1113
  }
@@ -1137,6 +1163,9 @@ const PostMegadropdown = class {
1137
1163
  this.forceClose();
1138
1164
  return;
1139
1165
  }
1166
+ // Already closed or already closing
1167
+ if (!this.isVisible || this.animationDirection === 'out')
1168
+ return;
1140
1169
  // Update trigger state
1141
1170
  this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
1142
1171
  try {
@@ -1173,23 +1202,34 @@ const PostMegadropdown = class {
1173
1202
  }
1174
1203
  // Run the respective animation
1175
1204
  createAnimation(direction) {
1205
+ // Keep the last frame of the closing animation until the container is hidden,
1206
+ // otherwise it snaps back to full opacity for a frame before display: none is applied
1207
+ const fill = direction === 'out' ? 'forwards' : 'none';
1176
1208
  if (this.device === 'desktop') {
1177
- return fadeSlide(this.animatedContainer, direction, this.fsAnimationOptions);
1209
+ return fadeSlide(this.animatedContainer, direction, { ...this.fsAnimationOptions, fill });
1178
1210
  }
1179
1211
  return slide(this.animatedContainer, direction, {
1180
1212
  translate: 100,
1181
1213
  duration: 350,
1182
1214
  easing: direction === 'in' ? 'ease-in' : 'ease-out',
1215
+ fill,
1183
1216
  });
1184
1217
  }
1185
1218
  async animate(direction) {
1186
1219
  this.cancelAnimation();
1187
1220
  this.currentAnimation = this.createAnimation(direction);
1188
- // Flag isAnimating used to avoid toggle() de-sync
1189
- this.isAnimating = true;
1190
- await this.currentAnimation.finished;
1191
- this.isAnimating = false;
1192
- this.currentAnimation = null;
1221
+ // Used to avoid toggle() de-sync and double hide() calls
1222
+ this.animationDirection = direction;
1223
+ try {
1224
+ await this.currentAnimation.finished;
1225
+ }
1226
+ finally {
1227
+ if (this.animationDirection === direction)
1228
+ this.animationDirection = null;
1229
+ }
1230
+ // The closing animation is kept (fill: forwards) and cancelled by the next animate() call
1231
+ if (direction === 'in')
1232
+ this.currentAnimation = null;
1193
1233
  }
1194
1234
  cancelAnimation() {
1195
1235
  this.currentAnimation?.cancel();
@@ -1230,11 +1270,15 @@ const PostMegadropdown = class {
1230
1270
  }
1231
1271
  }
1232
1272
  handleTabOutside(e) {
1233
- if (e.key === 'Tab' && this.device === 'desktop') {
1234
- if (this.isVisible && !this.host.contains(e.target)) {
1235
- this.hide(false);
1236
- }
1237
- }
1273
+ if (e.key !== 'Tab' || this.device !== 'desktop' || !this.isVisible)
1274
+ return;
1275
+ const target = e.target;
1276
+ if (this.host.contains(target))
1277
+ return;
1278
+ // Focus on the own trigger keeps it open, Enter / Space on the trigger closes it
1279
+ if (this.megadropdownTrigger?.contains(target))
1280
+ return;
1281
+ this.hide(false);
1238
1282
  }
1239
1283
  /**
1240
1284
  * Sets up a MutationObserver on the host to watch for changes
@@ -1282,7 +1326,7 @@ const PostMegadropdown = class {
1282
1326
  }
1283
1327
  render() {
1284
1328
  const containerStyle = this.isVisible ? {} : { display: 'none' };
1285
- return (h(Host, { key: 'c0854fff62bf5e8de1597e46051aea5f300ee686', version: version }, h("div", { key: '1f4f66b74d7129481d76f1eec15a924b2c37718c', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, h("div", { key: 'af743442fe3ad6211cddccddf5d0803de9f501b5', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (h("p", { key: '35a03b2ee32498aa157140d4e6916cbf66655e5c', class: "megadropdown-title" }, this.megadropdownTitle)), h("div", { key: '6c4efb52e7bb04c4f40d5b3f739ca69771c48602', class: "megadropdown-content" }, h("slot", { key: '2b3200495cf23fe049734de9de9a5a1f4c9b09f3' })), this.device === 'desktop' ? (h("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (h("button", { onClick: () => this.hide(true), class: "back-button" }, h("post-icon", { name: "arrowleft" }), this.textBack))))));
1329
+ return (h(Host, { key: '8b9fe023f42390243b55d4efcf58e57d7bae8982', version: version }, h("div", { key: '5840742453a8d44dd16f09f368958ac0f734ece7', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, h("div", { key: '76332b6f916948ab11411b3dfd5fe97ca6522847', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (h("p", { key: '3e7cf05cbd7a134ebb417fd5e83f2052874f6c38', class: "megadropdown-title" }, this.megadropdownTitle)), h("div", { key: '76f902df0e84fb68556ffc6735e5188b1c1babf8', class: "megadropdown-content" }, h("slot", { key: '6b69815d2b418395b246dc2681a0597c47f59034' })), this.device === 'desktop' ? (h("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (h("button", { onClick: () => this.hide(true), class: "back-button" }, h("post-icon", { name: "arrowleft" }), this.textBack))))));
1286
1330
  }
1287
1331
  get host() { return getElement(this); }
1288
1332
  };
@@ -1296,7 +1340,7 @@ __decorate$4([
1296
1340
  ], PostMegadropdown.prototype, "textBack", void 0);
1297
1341
  PostMegadropdown.style = postMegadropdownCss();
1298
1342
 
1299
- const postMegadropdownTriggerCss = () => `button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:flex;padding:4px 10px;gap:6px;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg)}button:not(:disabled):hover{text-decoration:none}button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button{border-width:1px !important;transition:none}button:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}button{--post-nav-item-border-width:1px;width:100%;justify-content:start;position:relative;padding:12px 12px calc(12px - var(--post-nav-item-border-width)) 8px;gap:16px;border-radius:0;line-height:1.5;outline-color:currentColor !important;border-bottom:var(--post-nav-item-border-width) solid currentColor;height:100%}button:hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg);border-bottom-color:rgba(0,0,0,0)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:none}button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline:none !important}button:is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{content:"";position:absolute;inset:calc(-1*var(--post-device-spacing-padding-28));border-width:var(--post-device-border-width-focus);border-style:var(--post-core-border-style-solid);border-color:var(--post-scheme-color-interactive-focus-stroke);border-radius:var(--post-device-border-radius-focus);pointer-events:none}button:is(:focus-visible,:has(:focus-visible),.pretend-focus):hover::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}button:is(:focus-visible,:has(:focus-visible),.pretend-focus):is([aria-current],[aria-pressed=true],[aria-expanded=true],.active)::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline:none !important}button:is(:focus-visible,:focus-within,.pretend-focus)::after{content:"";position:absolute;inset:calc(-1*var(--post-device-spacing-padding-28));border-width:var(--post-device-border-width-focus);border-style:var(--post-core-border-style-solid);border-color:var(--post-scheme-color-interactive-focus-stroke);border-radius:var(--post-device-border-radius-focus);pointer-events:none}button:is(:focus-visible,:focus-within,.pretend-focus):hover::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}button:is(:focus-visible,:focus-within,.pretend-focus):is([aria-current],[aria-pressed=true],[aria-expanded=true],.active)::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}button>post-icon:where(:last-child){margin-inline-start:auto}@media screen and (min-width: 0)and (max-width: 599.98px){button{padding:9.5px 12px calc(9.5px - var(--post-nav-item-border-width)) 8px;gap:8px;font-size:.875rem}button>post-icon{font-size:1rem}}@media screen and (min-width: 600px)and (max-width: 1023.98px){button>post-icon{font-size:1.5rem}}@media screen and (min-width: 1024px){button{padding:16px 12px;gap:8px;border-bottom:0}}:host{position:relative;display:inline-block}button post-icon{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true]) post-icon{transform:rotate(180deg)}button>span{position:relative}button>span>span[aria-hidden]{font-weight:700;visibility:hidden}button>span>span[aria-hidden]:where(span:empty+*){visibility:visible}button>span>span:not([aria-hidden]){position:absolute;inset:0}@media screen and (min-width: 1024px){button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){font-weight:700}button[aria-expanded=true]{background-color:#f0efed;color:#050400;z-index:2}button[aria-expanded=true]:hover{box-shadow:inset 0 -0.7px 0 0 #f0efed}button[aria-expanded=true]{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}button[aria-expanded=true]:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}button[aria-expanded=true]:is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{border-color:var(--post-scheme-color-interactive-focus-stroke)}}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){button[aria-expanded=true]:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@media screen and (min-width: 1024px){@supports not selector(:has(:focus-visible)){button[aria-expanded=true]:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}button[aria-expanded=true]:is(:focus-visible,:focus-within,.pretend-focus)::after{border-color:var(--post-scheme-color-interactive-focus-stroke)}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){button[aria-expanded=true]:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}}@media screen and (max-width: 1023.98px){button post-icon{margin-inline-start:auto;transform:rotate(-90deg) !important}}`;
1343
+ const postMegadropdownTriggerCss = () => `button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:flex;padding:4px 10px;gap:6px;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg)}button:not(:disabled):hover{text-decoration:none}button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}button:focus-visible{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button:focus-visible{outline-color:Highlight !important}}button.pretend-focus{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button.pretend-focus{outline-color:Highlight !important}}button:has(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button{border-width:1px !important;transition:none}button:is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}button{--post-nav-item-border-width:1px;width:100%;justify-content:start;position:relative;padding:12px 12px calc(12px - var(--post-nav-item-border-width)) 8px;gap:16px;border-radius:0;line-height:1.5;outline-color:currentColor !important;border-bottom:var(--post-nav-item-border-width) solid currentColor;height:100%}button:hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg);border-bottom-color:rgba(0,0,0,0)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:none}button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}button:focus-visible{outline-style:var(--post-core-border-style-solid) !important;outline:none !important}button:focus-visible::after{content:"";position:absolute;inset:calc(-1*var(--post-device-spacing-padding-28));border-width:var(--post-device-border-width-focus);border-style:var(--post-core-border-style-solid);border-color:var(--post-scheme-color-interactive-focus-stroke);border-radius:var(--post-device-border-radius-focus);pointer-events:none}button:focus-visible:hover::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}button:focus-visible:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active)::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button:focus-visible{outline-color:Highlight !important}}button.pretend-focus{outline-style:var(--post-core-border-style-solid) !important;outline:none !important}button.pretend-focus::after{content:"";position:absolute;inset:calc(-1*var(--post-device-spacing-padding-28));border-width:var(--post-device-border-width-focus);border-style:var(--post-core-border-style-solid);border-color:var(--post-scheme-color-interactive-focus-stroke);border-radius:var(--post-device-border-radius-focus);pointer-events:none}button.pretend-focus:hover::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}button.pretend-focus:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active)::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button.pretend-focus{outline-color:Highlight !important}}button:has(:focus-visible){outline-style:var(--post-core-border-style-solid) !important;outline:none !important}button:has(:focus-visible)::after{content:"";position:absolute;inset:calc(-1*var(--post-device-spacing-padding-28));border-width:var(--post-device-border-width-focus);border-style:var(--post-core-border-style-solid);border-color:var(--post-scheme-color-interactive-focus-stroke);border-radius:var(--post-device-border-radius-focus);pointer-events:none}button:has(:focus-visible):hover::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}button:has(:focus-visible):is([aria-current],[aria-pressed=true],[aria-expanded=true],.active)::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline:none !important}button:is(:focus-visible,:focus-within,.pretend-focus)::after{content:"";position:absolute;inset:calc(-1*var(--post-device-spacing-padding-28));border-width:var(--post-device-border-width-focus);border-style:var(--post-core-border-style-solid);border-color:var(--post-scheme-color-interactive-focus-stroke);border-radius:var(--post-device-border-radius-focus);pointer-events:none}button:is(:focus-visible,:focus-within,.pretend-focus):hover::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}button:is(:focus-visible,:focus-within,.pretend-focus):is([aria-current],[aria-pressed=true],[aria-expanded=true],.active)::after{border-color:var(--post-scheme-color-interactive-focus-stroke-inverted)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}button>post-icon:where(:last-child){margin-inline-start:auto}@media screen and (min-width: 0)and (max-width: 599.98px){button{padding:9.5px 12px calc(9.5px - var(--post-nav-item-border-width)) 8px;gap:8px;font-size:.875rem}button>post-icon{font-size:1rem}}@media screen and (min-width: 600px)and (max-width: 1023.98px){button>post-icon{font-size:1.5rem}}@media screen and (min-width: 1024px){button{padding:16px 12px;gap:8px;border-bottom:0}}:host{position:relative;display:inline-block}button post-icon{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}button:is([aria-current],[aria-pressed=true],[aria-expanded=true]) post-icon{transform:rotate(180deg)}button>span{position:relative}button>span>span[aria-hidden]{font-weight:700;visibility:hidden}button>span>span[aria-hidden]:where(span:empty+*){visibility:visible}button>span>span:not([aria-hidden]){position:absolute;inset:0}@media screen and (min-width: 1024px){button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){font-weight:700}button[aria-expanded=true]{background-color:#f0efed;color:#050400;z-index:2}button[aria-expanded=true]:hover{box-shadow:inset 0 -0.7px 0 0 #f0efed}button[aria-expanded=true]{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}button[aria-expanded=true]:focus-visible{outline-style:var(--post-core-border-style-solid) !important}button[aria-expanded=true]:focus-visible::after{border-color:var(--post-scheme-color-interactive-focus-stroke)}}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){button[aria-expanded=true]:focus-visible{outline-color:Highlight !important}}@media screen and (min-width: 1024px){button[aria-expanded=true].pretend-focus{outline-style:var(--post-core-border-style-solid) !important}button[aria-expanded=true].pretend-focus::after{border-color:var(--post-scheme-color-interactive-focus-stroke)}}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){button[aria-expanded=true].pretend-focus{outline-color:Highlight !important}}@media screen and (min-width: 1024px){button[aria-expanded=true]:has(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}button[aria-expanded=true]:has(:focus-visible)::after{border-color:var(--post-scheme-color-interactive-focus-stroke)}}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){button[aria-expanded=true]:has(:focus-visible){outline-color:Highlight !important}}@media screen and (min-width: 1024px){@supports not selector(:has(:focus-visible)){button[aria-expanded=true]:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}button[aria-expanded=true]:is(:focus-visible,:focus-within,.pretend-focus)::after{border-color:var(--post-scheme-color-interactive-focus-stroke)}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){button[aria-expanded=true]:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}}@media screen and (max-width: 1023.98px){button post-icon{margin-inline-start:auto;transform:rotate(-90deg) !important}}`;
1300
1344
 
1301
1345
  var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
1302
1346
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -1380,7 +1424,7 @@ __decorate$3([
1380
1424
  ], PostMegadropdownTrigger.prototype, "onMegadropdownToggled", null);
1381
1425
  PostMegadropdownTrigger.style = postMegadropdownTriggerCss();
1382
1426
 
1383
- const postMenuCss = () => `:host{display:block}:where([part=post-menu]){display:flex;flex-direction:column;padding-block:8px}::slotted([slot=header]){margin-top:-8px;padding:16px;display:flex;align-items:center;gap:8px;border-block-end:1px solid #050400;font-weight:700}@media screen and (max-width: 1023.98px){::slotted([slot=header]){padding:12px 16px}}@media screen and (max-width: 779.98px){::slotted([slot=header]){padding:8px 16px}}post-popovercontainer::part(post-popovercontainer-content){background-color:#fff}`;
1427
+ const postMenuCss = () => `:host{display:block}:where([part=post-menu]){display:flex;flex-direction:column;padding-block:8px;overflow-y:auto;overscroll-behavior:contain}::slotted([slot=header]){margin-top:-8px;padding:16px;display:flex;align-items:center;gap:8px;border-block-end:1px solid #050400;font-weight:700}@media screen and (max-width: 1023.98px){::slotted([slot=header]){padding:12px 16px}}@media screen and (max-width: 779.98px){::slotted([slot=header]){padding:8px 16px}}post-popovercontainer::part(post-popovercontainer-content){background-color:#fff}`;
1384
1428
 
1385
1429
  var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
1386
1430
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -1500,7 +1544,7 @@ const PostMenu = class {
1500
1544
  this.lastFocusedElement = this.root?.activeElement;
1501
1545
  // Only focus the first item if the trigger was keyboard-focus-visible
1502
1546
  // that's the browser's own signal for a keyboard-driven interaction.
1503
- if (this.wasFocusVisible(this.lastFocusedElement)) {
1547
+ if (isFocusVisible(this.lastFocusedElement)) {
1504
1548
  requestAnimationFrame(() => {
1505
1549
  const menuItems = this.getSlottedItems();
1506
1550
  if (menuItems.length > 0) {
@@ -1513,17 +1557,6 @@ const PostMenu = class {
1513
1557
  this.lastFocusedElement.focus();
1514
1558
  }
1515
1559
  }
1516
- wasFocusVisible(element) {
1517
- if (!element)
1518
- return false;
1519
- try {
1520
- return element.matches(':focus-visible');
1521
- }
1522
- catch {
1523
- // Not supported, fall back to always focusing
1524
- return true;
1525
- }
1526
- }
1527
1560
  controlKeyDownHandler(e) {
1528
1561
  const menuItems = this.getSlottedItems();
1529
1562
  if (menuItems.length === 0) {
@@ -1575,7 +1608,7 @@ const PostMenu = class {
1575
1608
  ]));
1576
1609
  }
1577
1610
  render() {
1578
- return (h(Host, { key: '22441c2bef0402f10e77b96b8a5d48a0648615f7', "data-version": version }, h("post-popovercontainer", { key: '8b37fe55d58a3a486e947266348b55408999a8bb', onPostShow: this.handlePostShown.bind(this), onPostBeforeToggle: this.handlePostBeforeToggle.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '2679eb9c4a95585b8aaf74e29f026c84b10aa6f3', part: "post-menu" }, h("slot", { key: '0da58a1bde1bdb4c1f8b7b19ca8cbde14d7946fc', name: "header" }), h("slot", { key: '801f7bc59d4d3267728b9adf0750dbea76a7652c' })))));
1611
+ return (h(Host, { key: '988b77e3589a499e23e95eb6eff985edbadd4d2e', "data-version": version }, h("post-popovercontainer", { key: 'fd0ee4d4234fe1f222757c00d778ebb2a2c5ac13', autoHide: true, autoResize: true, onPostShow: this.handlePostShown.bind(this), onPostBeforeToggle: this.handlePostBeforeToggle.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '8b46a79db5944854c97c862608bd5a8d9113398e', part: "post-menu" }, h("slot", { key: 'a024a0ade2a865b12d1a452c6c33f9afde1f34e0', name: "header" }), h("slot", { key: '1465a5d8d9463e6557a2a8c32aa119429a4783b3' })))));
1579
1612
  }
1580
1613
  get host() { return getElement(this); }
1581
1614
  };
@@ -1594,7 +1627,7 @@ __decorate$2([
1594
1627
  ], PostMenu.prototype, "handlePostBeforeToggle", null);
1595
1628
  PostMenu.style = postMenuCss();
1596
1629
 
1597
- const postMenuItemCss = () => `post-menu-item button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;width:100%}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button{background-color:ButtonFace !important}post-menu-item button:hover{background-color:Highlight !important}}post-menu-item button,post-menu-item a{position:relative;display:flex;align-items:center;padding:8px 12px 8px 16px;gap:12px;font-size:.875rem;color:#050400;border-radius:0;text-decoration:none}@media screen and (min-width: 780px){post-menu-item button,post-menu-item a{font-size:1rem;padding-block:12px;gap:16px}}@media screen and (min-width: 1024px){post-menu-item button,post-menu-item a{font-size:1.25rem;padding-block:13px}}post-menu-item button:focus-visible,post-menu-item a:focus-visible{outline-offset:2px !important;border-radius:4px}post-menu-item button:hover,post-menu-item a:hover{background-color:#504f4b;color:#fff}post-menu-item button post-icon,post-menu-item a post-icon{width:16px;height:16px;margin-block:4px}@media screen and (min-width: 780px){post-menu-item button post-icon,post-menu-item a post-icon{width:24px;height:24px;margin:0}}`;
1630
+ const postMenuItemCss = () => `post-menu-item button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;width:100%}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button{background-color:ButtonFace !important}post-menu-item button:hover{background-color:Highlight !important}}post-menu-item button,post-menu-item a{position:relative;display:flex;align-items:center;padding:8px 12px 8px 16px;gap:12px;font-size:.875rem;color:#050400;border-radius:0;text-decoration:none}@media screen and (min-width: 780px){post-menu-item button,post-menu-item a{font-size:1rem;padding-block:12px;gap:16px}}@media screen and (min-width: 1024px){post-menu-item button,post-menu-item a{font-size:1.25rem;padding-block:13px}}post-menu-item button:focus-visible,post-menu-item a:focus-visible{outline:none !important}post-menu-item button.pretend-focus,post-menu-item a.pretend-focus{outline:none !important}post-menu-item button:has(:focus-visible),post-menu-item a:has(:focus-visible){outline:none !important}@supports not selector(:has(:focus-visible)){post-menu-item button:is(:focus-visible,:focus-within,.pretend-focus),post-menu-item a:is(:focus-visible,:focus-within,.pretend-focus){outline:none !important}}post-menu-item button::after,post-menu-item a::after{content:"";position:absolute;inset:0;width:100%;height:100%;border-radius:calc(var(--post-device-border-radius-focus) - var(--post-device-spacing-padding-44))}post-menu-item button::after,post-menu-item a::after{outline-offset:var(--post-device-spacing-padding-44) !important;outline:#050400 none var(--post-device-border-width-focus) !important}post-menu-item button:focus-visible::after,post-menu-item a:focus-visible::after{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button:focus-visible::after,post-menu-item a:focus-visible::after{outline-color:Highlight !important}}post-menu-item button.pretend-focus::after,post-menu-item a.pretend-focus::after{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button.pretend-focus::after,post-menu-item a.pretend-focus::after{outline-color:Highlight !important}}post-menu-item button:has(:focus-visible)::after,post-menu-item a:has(:focus-visible)::after{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button:has(:focus-visible)::after,post-menu-item a:has(:focus-visible)::after{outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-menu-item button:is(:focus-visible,:focus-within,.pretend-focus)::after,post-menu-item a:is(:focus-visible,:focus-within,.pretend-focus)::after{outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-menu-item button:is(:focus-visible,:focus-within,.pretend-focus)::after,post-menu-item a:is(:focus-visible,:focus-within,.pretend-focus)::after{outline-color:Highlight !important}}}post-menu-item button:hover,post-menu-item a:hover{background-color:#504f4b;color:#fff}post-menu-item button:hover:focus-visible::after,post-menu-item a:hover:focus-visible::after{outline-color:#fff !important}post-menu-item button:hover.pretend-focus::after,post-menu-item a:hover.pretend-focus::after{outline-color:#fff !important}post-menu-item button:hover:has(:focus-visible)::after,post-menu-item a:hover:has(:focus-visible)::after{outline-color:#fff !important}@supports not selector(:has(:focus-visible)){post-menu-item button:hover:is(:focus-visible,:focus-within,.pretend-focus)::after,post-menu-item a:hover:is(:focus-visible,:focus-within,.pretend-focus)::after{outline-color:#fff !important}}post-menu-item button post-icon,post-menu-item a post-icon{width:16px;height:16px;margin-block:4px}@media screen and (min-width: 780px){post-menu-item button post-icon,post-menu-item a post-icon{width:24px;height:24px;margin:0}}`;
1598
1631
 
1599
1632
  const PostMenuItem = class {
1600
1633
  constructor(hostRef) {
@@ -1684,6 +1717,21 @@ __decorate$1([
1684
1717
  ], PostMenuTrigger.prototype, "for", void 0);
1685
1718
  PostMenuTrigger.style = postMenuTriggerCss();
1686
1719
 
1720
+ const duration = 250;
1721
+ const easing = 'ease-out';
1722
+ function popIn(el) {
1723
+ if (!el)
1724
+ return;
1725
+ return el.animate([
1726
+ { transform: 'scale(0.9)', opacity: 0 },
1727
+ { transform: 'scale(1)', opacity: 1 },
1728
+ ], {
1729
+ duration,
1730
+ easing,
1731
+ fill: 'forwards',
1732
+ });
1733
+ }
1734
+
1687
1735
  /**
1688
1736
  * Custom positioning reference element.
1689
1737
  * @see https://floating-ui.com/docs/virtual-elements
@@ -1729,23 +1777,6 @@ function getSideAxis(placement) {
1729
1777
  function getAlignmentAxis(placement) {
1730
1778
  return getOppositeAxis(getSideAxis(placement));
1731
1779
  }
1732
- function getAlignmentSides(placement, rects, rtl) {
1733
- if (rtl === void 0) {
1734
- rtl = false;
1735
- }
1736
- const alignment = getAlignment(placement);
1737
- const alignmentAxis = getAlignmentAxis(placement);
1738
- const length = getAxisLength(alignmentAxis);
1739
- let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
1740
- if (rects.reference[length] > rects.floating[length]) {
1741
- mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
1742
- }
1743
- return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
1744
- }
1745
- function getExpandedPlacements(placement) {
1746
- const oppositePlacement = getOppositePlacement(placement);
1747
- return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
1748
- }
1749
1780
  function getOppositeAlignmentPlacement(placement) {
1750
1781
  return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
1751
1782
  }
@@ -1771,7 +1802,7 @@ function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
1771
1802
  let list = getSideList(getSide(placement), direction === 'start', rtl);
1772
1803
  if (alignment) {
1773
1804
  list = list.map(side => side + "-" + alignment);
1774
- if (flipAlignment) {
1805
+ {
1775
1806
  list = list.concat(list.map(getOppositeAlignmentPlacement));
1776
1807
  }
1777
1808
  }
@@ -1877,7 +1908,7 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
1877
1908
  * - 0 = lies flush with the boundary
1878
1909
  * @see https://floating-ui.com/docs/detectOverflow
1879
1910
  */
1880
- async function detectOverflow(state, options) {
1911
+ async function detectOverflow$1(state, options) {
1881
1912
  var _await$platform$isEle;
1882
1913
  if (options === void 0) {
1883
1914
  options = {};
@@ -1950,7 +1981,7 @@ const computePosition$1 = async (reference, floating, config) => {
1950
1981
  } = config;
1951
1982
  const platformWithDetectOverflow = platform.detectOverflow ? platform : {
1952
1983
  ...platform,
1953
- detectOverflow
1984
+ detectOverflow: detectOverflow$1
1954
1985
  };
1955
1986
  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
1956
1987
  let rects = await platform.getElementRects({
@@ -2110,138 +2141,6 @@ const arrow$1 = options => ({
2110
2141
  }
2111
2142
  });
2112
2143
 
2113
- /**
2114
- * Optimizes the visibility of the floating element by flipping the `placement`
2115
- * in order to keep it in view when the preferred placement(s) will overflow the
2116
- * clipping boundary. Alternative to `autoPlacement`.
2117
- * @see https://floating-ui.com/docs/flip
2118
- */
2119
- const flip$1 = function (options) {
2120
- if (options === void 0) {
2121
- options = {};
2122
- }
2123
- return {
2124
- name: 'flip',
2125
- options,
2126
- async fn(state) {
2127
- var _middlewareData$arrow, _middlewareData$flip;
2128
- const {
2129
- placement,
2130
- middlewareData,
2131
- rects,
2132
- initialPlacement,
2133
- platform,
2134
- elements
2135
- } = state;
2136
- const {
2137
- mainAxis: checkMainAxis = true,
2138
- crossAxis: checkCrossAxis = true,
2139
- fallbackPlacements: specifiedFallbackPlacements,
2140
- fallbackStrategy = 'bestFit',
2141
- fallbackAxisSideDirection = 'none',
2142
- flipAlignment = true,
2143
- ...detectOverflowOptions
2144
- } = evaluate(options, state);
2145
-
2146
- // If a reset by the arrow was caused due to an alignment offset being
2147
- // added, we should skip any logic now since `flip()` has already done its
2148
- // work.
2149
- // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
2150
- if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
2151
- return {};
2152
- }
2153
- const side = getSide(placement);
2154
- const initialSideAxis = getSideAxis(initialPlacement);
2155
- const isBasePlacement = getSide(initialPlacement) === initialPlacement;
2156
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
2157
- const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
2158
- const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
2159
- if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
2160
- fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
2161
- }
2162
- const placements = [initialPlacement, ...fallbackPlacements];
2163
- const overflow = await platform.detectOverflow(state, detectOverflowOptions);
2164
- const overflows = [];
2165
- let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
2166
- if (checkMainAxis) {
2167
- overflows.push(overflow[side]);
2168
- }
2169
- if (checkCrossAxis) {
2170
- const sides = getAlignmentSides(placement, rects, rtl);
2171
- overflows.push(overflow[sides[0]], overflow[sides[1]]);
2172
- }
2173
- overflowsData = [...overflowsData, {
2174
- placement,
2175
- overflows
2176
- }];
2177
-
2178
- // One or more sides is overflowing.
2179
- if (!overflows.every(side => side <= 0)) {
2180
- var _middlewareData$flip2, _overflowsData$filter;
2181
- const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
2182
- const nextPlacement = placements[nextIndex];
2183
- if (nextPlacement) {
2184
- const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
2185
- if (!ignoreCrossAxisOverflow ||
2186
- // We leave the current main axis only if every placement on that axis
2187
- // overflows the main axis.
2188
- overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
2189
- // Try next placement and re-run the lifecycle.
2190
- return {
2191
- data: {
2192
- index: nextIndex,
2193
- overflows: overflowsData
2194
- },
2195
- reset: {
2196
- placement: nextPlacement
2197
- }
2198
- };
2199
- }
2200
- }
2201
-
2202
- // First, find the candidates that fit on the mainAxis side of overflow,
2203
- // then find the placement that fits the best on the main crossAxis side.
2204
- let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
2205
-
2206
- // Otherwise fallback.
2207
- if (!resetPlacement) {
2208
- switch (fallbackStrategy) {
2209
- case 'bestFit':
2210
- {
2211
- var _overflowsData$filter2;
2212
- const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
2213
- if (hasFallbackAxisSideDirection) {
2214
- const currentSideAxis = getSideAxis(d.placement);
2215
- return currentSideAxis === initialSideAxis ||
2216
- // Create a bias to the `y` side axis due to horizontal
2217
- // reading directions favoring greater width.
2218
- currentSideAxis === 'y';
2219
- }
2220
- return true;
2221
- }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
2222
- if (placement) {
2223
- resetPlacement = placement;
2224
- }
2225
- break;
2226
- }
2227
- case 'initialPlacement':
2228
- resetPlacement = initialPlacement;
2229
- break;
2230
- }
2231
- }
2232
- if (placement !== resetPlacement) {
2233
- return {
2234
- reset: {
2235
- placement: resetPlacement
2236
- }
2237
- };
2238
- }
2239
- }
2240
- return {};
2241
- }
2242
- };
2243
- };
2244
-
2245
2144
  function getSideOffsets(overflow, rect) {
2246
2145
  return {
2247
2146
  top: overflow.top - rect.height,
@@ -3124,7 +3023,7 @@ function getDocumentRect(html) {
3124
3023
  // calculation is affected by unusual styles.
3125
3024
  // Most scrollbars leave 15-18px of space.
3126
3025
  const SCROLLBAR_MAX = 25;
3127
- function getViewportRect(element, strategy, rootBoundary) {
3026
+ function getViewportRect$1(element, strategy, rootBoundary) {
3128
3027
  if (rootBoundary === void 0) {
3129
3028
  rootBoundary = 'viewport';
3130
3029
  }
@@ -3202,7 +3101,7 @@ function getInnerBoundingClientRect(element, strategy) {
3202
3101
  function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
3203
3102
  let rect;
3204
3103
  if (clippingAncestor === 'viewport' || clippingAncestor === 'layoutViewport') {
3205
- rect = getViewportRect(element, strategy, clippingAncestor);
3104
+ rect = getViewportRect$1(element, strategy, clippingAncestor);
3206
3105
  } else if (clippingAncestor === 'document') {
3207
3106
  rect = getDocumentRect(getDocumentElement(element));
3208
3107
  } else if (isElement(clippingAncestor)) {
@@ -3598,6 +3497,16 @@ function autoUpdate(reference, floating, update, options) {
3598
3497
  };
3599
3498
  }
3600
3499
 
3500
+ /**
3501
+ * Resolves with an object of overflow side offsets that determine how much the
3502
+ * element is overflowing a given clipping boundary on each side.
3503
+ * - positive = overflowing the boundary by that number of pixels
3504
+ * - negative = how many pixels left before it will overflow
3505
+ * - 0 = lies flush with the boundary
3506
+ * @see https://floating-ui.com/docs/detectOverflow
3507
+ */
3508
+ const detectOverflow = detectOverflow$1;
3509
+
3601
3510
  /**
3602
3511
  * Modifies the placement by translating the floating element along the
3603
3512
  * specified axes.
@@ -3614,14 +3523,6 @@ const offset = offset$1;
3614
3523
  */
3615
3524
  const shift = shift$1;
3616
3525
 
3617
- /**
3618
- * Optimizes the visibility of the floating element by flipping the `placement`
3619
- * in order to keep it in view when the preferred placement(s) will overflow the
3620
- * clipping boundary. Alternative to `autoPlacement`.
3621
- * @see https://floating-ui.com/docs/flip
3622
- */
3623
- const flip = flip$1;
3624
-
3625
3526
  /**
3626
3527
  * Provides data that allows you to change the size of the floating element —
3627
3528
  * for instance, prevent it from overflowing the clipping boundary or match the
@@ -3677,19 +3578,211 @@ const computePosition = (reference, floating, options) => {
3677
3578
  });
3678
3579
  };
3679
3580
 
3680
- const duration = 250;
3681
- const easing = 'ease-out';
3682
- function popIn(el) {
3683
- if (!el)
3581
+ /**
3582
+ * Returns the nth side in clockwise direction relative to the given side.
3583
+ */
3584
+ function getRelativeSide(side, n) {
3585
+ return sides[(sides.indexOf(side) + n) % 4];
3586
+ }
3587
+ const getNextSide = (side) => getRelativeSide(side, 1);
3588
+ const getOppositeSide = (side) => getRelativeSide(side, 2);
3589
+ const getPreviousSide = (side) => getRelativeSide(side, 3);
3590
+
3591
+ const FLIP_MIDDLEWARE = 'post-flip';
3592
+ /**
3593
+ * Changes the placement of the floating element to keep it in view.
3594
+ *
3595
+ * Unlike the Floating UI `flip` middleware, placements are measured against `minSize` rather than
3596
+ * against the current size of the floating element, and the placement with the smallest deficit is
3597
+ * used when none of them fits.
3598
+ */
3599
+ function flip(options = {}) {
3600
+ return {
3601
+ name: FLIP_MIDDLEWARE,
3602
+ options,
3603
+ async fn(state) {
3604
+ const { middlewareData, placement } = state;
3605
+ // see https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
3606
+ if (middlewareData.arrow?.alignmentOffset)
3607
+ return {};
3608
+ const { minSize = {}, ...detectOverflowOptions } = evaluate(options, state);
3609
+ const gap = Math.abs(middlewareData.offset?.[getSideAxis(placement)] ?? 0);
3610
+ const side = getSide(placement);
3611
+ const referenceOverflow = await detectOverflow(state, {
3612
+ ...detectOverflowOptions,
3613
+ elementContext: 'reference',
3614
+ });
3615
+ const floatingOverflow = await detectOverflow(state, {
3616
+ ...detectOverflowOptions,
3617
+ elementContext: 'floating',
3618
+ });
3619
+ // The floating element fits at its current placement, there is nothing left to do.
3620
+ if (Math.max(referenceOverflow[side], floatingOverflow[side]) <= 0)
3621
+ return {};
3622
+ const previous = middlewareData[FLIP_MIDDLEWARE];
3623
+ const measurement = { overflow: referenceOverflow, minSize, gap };
3624
+ let deficits = previous?.deficits ?? [];
3625
+ const placements = previous?.placements ?? (await getPlacements(state, measurement));
3626
+ if (deficits.length < placements.length) {
3627
+ deficits = [...deficits, getDeficit(side, measurement)];
3628
+ }
3629
+ const data = { placements, deficits };
3630
+ // If there are still placements to try, move on to the next one.
3631
+ if (deficits.length < placements.length) {
3632
+ return { data, reset: { placement: placements[deficits.length] } };
3633
+ }
3634
+ // If none of the placements fit, fall back to the one that loses the least space.
3635
+ const fallback = data.placements[data.deficits.indexOf(Math.min(...data.deficits))];
3636
+ return fallback === placement ? { data } : { data, reset: { placement: fallback } };
3637
+ },
3638
+ };
3639
+ }
3640
+ /**
3641
+ * Returns the placements to try, ordered from most to least promising.
3642
+ */
3643
+ async function getPlacements(state, measurement) {
3644
+ const { placement, platform, elements } = state;
3645
+ const { overflow } = measurement;
3646
+ const side = getSide(placement);
3647
+ const placements = [placement, getOppositePlacement(placement)];
3648
+ const mainAxisDeficit = Math.min(getDeficit(side, measurement), getDeficit(getOppositeSide(side), measurement));
3649
+ if (mainAxisDeficit <= 0)
3650
+ return placements;
3651
+ const rtl = (await platform.isRTL?.(elements.floating)) ?? false;
3652
+ const crossAxisPlacements = getOppositeAxisPlacements(placement, true, 'start', rtl);
3653
+ // Try the side with the most available space first.
3654
+ crossAxisPlacements.sort((a, b) => overflow[getSide(a)] - overflow[getSide(b)]);
3655
+ return [...placements, ...crossAxisPlacements];
3656
+ }
3657
+ /**
3658
+ * Returns the amount of space required to display the floating element at its minimum size on the
3659
+ * given side of the reference element.
3660
+ */
3661
+ function getDeficit(side, { minSize, overflow, gap }) {
3662
+ const minLength = minSize[getAxisLength(getSideAxis(side))] ?? 0;
3663
+ return gap + minLength + overflow[side];
3664
+ }
3665
+
3666
+ /**
3667
+ * This utility is covered by the end-to-end tests under 'clipping' in `popovercontainer.cy.ts`.
3668
+ */
3669
+ const CLIPPING_RECT_CACHE = Symbol('Clipping Rect Cache');
3670
+ /**
3671
+ * A custom floating UI platform that restricts clipping rectangles to the safe area.
3672
+ */
3673
+ const safeAreaPlatform = { ...platform, getClippingRect };
3674
+ /**
3675
+ * Computes the clipping rectangle of an element while accounting for the safe area.
3676
+ */
3677
+ async function getClippingRect(...args) {
3678
+ const element = args[0].element;
3679
+ // Check whether the clipping rectangle of the given element has already been computed during
3680
+ // this pass.
3681
+ const hit = this[CLIPPING_RECT_CACHE].get(element);
3682
+ if (hit)
3683
+ return hit;
3684
+ // Compute the clipping rectangle with the Floating UI DOM platform, then restrict it to the safe
3685
+ // area.
3686
+ const clippingRect = await platform.getClippingRect.apply(this, args);
3687
+ applySafeArea(clippingRect, element);
3688
+ this[CLIPPING_RECT_CACHE].set(element, clippingRect);
3689
+ return clippingRect;
3690
+ }
3691
+ /**
3692
+ * Restricts the `clippingRect` computed for `element` to the safe area, modifying it in place.
3693
+ *
3694
+ * The safe area only applies to elements that the header can actually cover, which excludes
3695
+ * elements without a header on their page, elements on a top layer and elements within the header.
3696
+ */
3697
+ function applySafeArea(clippingRect, element) {
3698
+ const headerElement = element.ownerDocument.querySelector('post-header');
3699
+ if (headerElement === null)
3684
3700
  return;
3685
- return el.animate([
3686
- { transform: 'scale(0.9)', opacity: 0 },
3687
- { transform: 'scale(1)', opacity: 1 },
3688
- ], {
3689
- duration,
3690
- easing,
3691
- fill: 'forwards',
3701
+ let parent = element;
3702
+ while (!isLastTraversableNode(parent)) {
3703
+ parent = getParentNode(parent);
3704
+ if (!isHTMLElement(parent))
3705
+ continue;
3706
+ // Do not apply the safe area of the header to
3707
+ // - elements that are on a top layer, such as a dialog.
3708
+ // - elements that are located within the header itself.
3709
+ if (isTopLayer(parent) || parent === headerElement)
3710
+ return;
3711
+ }
3712
+ const headerRect = headerElement.getBoundingClientRect();
3713
+ const top = Math.max(clippingRect.y, headerRect.bottom);
3714
+ clippingRect.height -= top - clippingRect.y;
3715
+ clippingRect.y = top;
3716
+ }
3717
+ /**
3718
+ * Computes the coordinates that will position the `floating` element next to a given `reference`
3719
+ * element while accounting for the safe area.
3720
+ *
3721
+ * The safe area is the part of the viewport that the header does not cover. Restricting the
3722
+ * clipping rectangles to it makes floating elements behave as if they were clipped by the header.
3723
+ */
3724
+ const computePositionWithSafeArea = (reference, floating, options) => {
3725
+ // Adapted from https://github.com/floating-ui/floating-ui/blob/27629b74ba36ab8ceb2a968051927b9b69511a3b/packages/dom/src/index.ts#L15
3726
+ options ??= {};
3727
+ return computePosition(reference, floating, {
3728
+ ...options,
3729
+ platform: {
3730
+ ...safeAreaPlatform,
3731
+ ...options.platform,
3732
+ [CLIPPING_RECT_CACHE]: new Map(),
3733
+ },
3734
+ });
3735
+ };
3736
+
3737
+ const SAFE_SPACE_MIDDLEWARE = 'post-safe-space';
3738
+ /**
3739
+ * Computes the safe space, the area the pointer can travel through to get from the reference to
3740
+ * the floating element.
3741
+ */
3742
+ function safeSpace() {
3743
+ return {
3744
+ name: SAFE_SPACE_MIDDLEWARE,
3745
+ async fn(state) {
3746
+ const { placement, rects, x, y } = state;
3747
+ const side = getSide(placement);
3748
+ const reference = await getViewportRect(state, rects.reference);
3749
+ const floating = await getViewportRect(state, { ...rects.floating, x, y });
3750
+ const path = [
3751
+ ...getPathAlongSide(floating, getOppositeSide(side)),
3752
+ ...getPathAlongSide(reference, side),
3753
+ ];
3754
+ const points = [];
3755
+ for (let i = 0; i < path.length; i += 2) {
3756
+ points.push(`${path[i]}px ${path[i + 1]}px`);
3757
+ }
3758
+ const data = { polygon: `polygon(${points.join(', ')})` };
3759
+ return { data };
3760
+ },
3761
+ };
3762
+ }
3763
+ /**
3764
+ * Converts a rectangle from the floating element's offset parent's coordinate system to viewport
3765
+ * coordinates.
3766
+ */
3767
+ async function getViewportRect({ elements, platform, strategy }, rect) {
3768
+ const viewportRect = await platform.convertOffsetParentRelativeRectToViewportRelativeRect?.({
3769
+ offsetParent: await platform.getOffsetParent?.(elements.floating),
3770
+ rect,
3771
+ elements,
3772
+ strategy,
3692
3773
  });
3774
+ return rectToClientRect(viewportRect ?? rect);
3775
+ }
3776
+ /**
3777
+ * Returns the path along the specified side of the given rectangle.
3778
+ *
3779
+ * The path is a list of coordinates in the form of [x₁, y₁, x₂, y₂] and is given in clockwise order.
3780
+ */
3781
+ function getPathAlongSide(rect, side) {
3782
+ const self = rect[side];
3783
+ const prev = rect[getPreviousSide(side)];
3784
+ const next = rect[getNextSide(side)];
3785
+ return getSideAxis(side) === 'x' ? [self, prev, self, next] : [prev, self, next, self];
3693
3786
  }
3694
3787
 
3695
3788
  // src/events.ts
@@ -4484,78 +4577,7 @@ function apply() {
4484
4577
  injectStyles(document);
4485
4578
  }
4486
4579
 
4487
- /**
4488
- * This utility is covered by the end-to-end tests under 'clipping' in `popovercontainer.cy.ts`.
4489
- */
4490
- const CLIPPING_RECT_CACHE = Symbol('Clipping Rect Cache');
4491
- /**
4492
- * A custom floating UI platform that restricts clipping rectangles to the safe area.
4493
- */
4494
- const safeAreaPlatform = { ...platform, getClippingRect };
4495
- /**
4496
- * Computes the clipping rectangle of an element while accounting for the safe area.
4497
- */
4498
- async function getClippingRect(...args) {
4499
- const element = args[0].element;
4500
- // Check whether the clipping rectangle of the given element has already been computed during
4501
- // this pass.
4502
- const hit = this[CLIPPING_RECT_CACHE].get(element);
4503
- if (hit)
4504
- return hit;
4505
- // Compute the clipping rectangle with the Floating UI DOM platform, then restrict it to the safe
4506
- // area.
4507
- const clippingRect = await platform.getClippingRect.apply(this, args);
4508
- applySafeArea(clippingRect, element);
4509
- this[CLIPPING_RECT_CACHE].set(element, clippingRect);
4510
- return clippingRect;
4511
- }
4512
- /**
4513
- * Restricts the `clippingRect` computed for `element` to the safe area, modifying it in place.
4514
- *
4515
- * The safe area only applies to elements that the header can actually cover, which excludes
4516
- * elements without a header on their page, elements on a top layer and elements within the header.
4517
- */
4518
- function applySafeArea(clippingRect, element) {
4519
- const headerElement = element.ownerDocument.querySelector('post-header');
4520
- if (headerElement === null)
4521
- return;
4522
- let parent = element;
4523
- while (!isLastTraversableNode(parent)) {
4524
- parent = getParentNode(parent);
4525
- if (!isHTMLElement(parent))
4526
- continue;
4527
- // Do not apply the safe area of the header to
4528
- // - elements that are on a top layer, such as a dialog.
4529
- // - elements that are located within the header itself.
4530
- if (isTopLayer(parent) || parent === headerElement)
4531
- return;
4532
- }
4533
- const headerRect = headerElement.getBoundingClientRect();
4534
- const top = Math.max(clippingRect.y, headerRect.bottom);
4535
- clippingRect.height -= top - clippingRect.y;
4536
- clippingRect.y = top;
4537
- }
4538
- /**
4539
- * Computes the coordinates that will position the `floating` element next to a given `reference`
4540
- * element while accounting for the safe area.
4541
- *
4542
- * The safe area is the part of the viewport that the header does not cover. Restricting the
4543
- * clipping rectangles to it makes floating elements behave as if they were clipped by the header.
4544
- */
4545
- const computePositionWithSafeArea = (reference, floating, options) => {
4546
- // Adapted from https://github.com/floating-ui/floating-ui/blob/27629b74ba36ab8ceb2a968051927b9b69511a3b/packages/dom/src/index.ts#L15
4547
- options ??= {};
4548
- return computePosition(reference, floating, {
4549
- ...options,
4550
- platform: {
4551
- ...safeAreaPlatform,
4552
- ...options.platform,
4553
- [CLIPPING_RECT_CACHE]: new Map(),
4554
- },
4555
- });
4556
- };
4557
-
4558
- const postPopovercontainerCss = () => `@layer polyfill{@supports not selector(:popover-open){:host([popover]:not(.\\:popover-open)){display:none}}}:host{background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:host>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px;position:relative}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host>div{border:2px solid rgba(0,0,0,0)}}:host [part=post-popovercontainer-border-mask]{display:none;position:absolute;inset:0;border-radius:4px;pointer-events:none}:host .arrow{--post-popovercontainer-arrow-border: var(--post-popovercontainer-arrow-border-width, 0px) solid var(--post-popovercontainer-arrow-border-color, transparent);position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:host .arrow[dynamic-placement=top]{border-bottom-right-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=right]{border-bottom-left-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=bottom]{border-top-left-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[dynamic-placement=left]{border-top-right-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .arrow[dynamic-placement=top]{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);bottom:-0.3796735336rem !important}:host .arrow[dynamic-placement=left]{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);right:-0.3796735336rem !important}:host .arrow[dynamic-placement=right]{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);left:-0.3796735336rem !important}:host .arrow[dynamic-placement=bottom]{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);top:-0.3796735336rem !important}}:host([tooltip]){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:host([safe-space])::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:auto}:host([safe-space=triangle])::after{clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:host([safe-space=trapezoid])::after{clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:host(:not(:has(.arrow)))>div{box-shadow:var(--post-device-elevation-300)}:host(:has(.arrow))>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=top]))>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=left]))>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[dynamic-placement=right]))>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}`;
4580
+ const postPopovercontainerCss = () => `@layer polyfill{@supports not selector(:popover-open){:host([popover]:not(.\\:popover-open)){display:none}}}:host{background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:host [part=post-popovercontainer-content]{box-sizing:border-box;box-shadow:var(--post-device-elevation-300);width:max-content;max-width:var(--post-popovercontainer-available-width);max-height:var(--post-popovercontainer-available-height);color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px;position:relative;display:flex}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host [part=post-popovercontainer-content]{border:2px solid rgba(0,0,0,0)}}:host [part=post-popovercontainer-border-mask]{display:none;position:absolute;inset:0;border-radius:4px;pointer-events:none}:host .arrow{--post-popovercontainer-arrow-border: var(--post-popovercontainer-arrow-border-width, 0px) solid var(--post-popovercontainer-arrow-border-color, transparent);position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:host .arrow[data-side=top]{border-bottom-right-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}:host .arrow[data-side=right]{border-bottom-left-radius:2px;border-bottom:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[data-side=bottom]{border-top-left-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-left:var(--post-popovercontainer-arrow-border)}:host .arrow[data-side=left]{border-top-right-radius:2px;border-top:var(--post-popovercontainer-arrow-border);border-right:var(--post-popovercontainer-arrow-border)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .arrow[data-side=top]{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);bottom:-0.3796735336rem !important}:host .arrow[data-side=left]{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);right:-0.3796735336rem !important}:host .arrow[data-side=right]{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);left:-0.3796735336rem !important}:host .arrow[data-side=bottom]{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);top:-0.3796735336rem !important}}:host([tooltip]){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:host([safe-space])::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:auto;clip-path:var(--post-popovercontainer-safe-space, polygon(0 0, 0 0, 0 0))}:host(:not(:has(.arrow)))>div{box-shadow:var(--post-device-elevation-300)}:host(:has(.arrow))>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[data-side=top]))>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[data-side=left]))>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:host(:has(.arrow[data-side=right]))>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}`;
4559
4581
 
4560
4582
  var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
4561
4583
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -4567,34 +4589,10 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
4567
4589
  r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
4568
4590
  return c > 3 && r && Object.defineProperty(target, key, r), r;
4569
4591
  };
4570
- const ANIMATIONS = {
4571
- 'pop-in': popIn,
4572
- };
4592
+ const AVAILABLE_WIDTH_PROPERTY = '--post-popovercontainer-available-width';
4593
+ const AVAILABLE_HEIGHT_PROPERTY = '--post-popovercontainer-available-height';
4594
+ const SAFE_SPACE_PROPERTY = '--post-popovercontainer-safe-space';
4573
4595
  const PostPopovercontainer = class {
4574
- static {
4575
- this.STATIC_SIDES = {
4576
- top: 'bottom',
4577
- right: 'left',
4578
- bottom: 'top',
4579
- left: 'right',
4580
- };
4581
- }
4582
- static {
4583
- this.PROPERTIES_TO_CLEAR = [
4584
- '--post-safe-space-popover-x',
4585
- '--post-safe-space-popover-y',
4586
- '--post-safe-space-popover-x-start',
4587
- '--post-safe-space-popover-x-end',
4588
- '--post-safe-space-popover-y-start',
4589
- '--post-safe-space-popover-y-end',
4590
- '--post-safe-space-trigger-x',
4591
- '--post-safe-space-trigger-y',
4592
- '--post-safe-space-trigger-x-start',
4593
- '--post-safe-space-trigger-x-end',
4594
- '--post-safe-space-trigger-y-start',
4595
- '--post-safe-space-trigger-y-end',
4596
- ];
4597
- }
4598
4596
  constructor(hostRef) {
4599
4597
  registerInstance(this, hostRef);
4600
4598
  this.postBeforeShow = createEvent(this, "postBeforeShow");
@@ -4602,37 +4600,25 @@ const PostPopovercontainer = class {
4602
4600
  this.postHide = createEvent(this, "postHide");
4603
4601
  this.postBeforeToggle = createEvent(this, "postBeforeToggle");
4604
4602
  this.postToggle = createEvent(this, "postToggle");
4603
+ /** The element the popover is anchored to */
4604
+ this.anchorRef = null;
4605
+ this.arrowRef = null;
4606
+ this.hasBeenOpened = false;
4605
4607
  this.toggleTimeoutId = null;
4606
- this.hasOpenedOnce = true;
4608
+ this.runningAnimation = null;
4609
+ this.stopAutoUpdate = null;
4607
4610
  /**
4608
- * Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
4609
- * Popovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted
4610
- * towards the viewport if they would overlap edge boundaries.
4611
+ * Placement of the popover according to the floating-ui options.
4611
4612
  */
4612
4613
  this.placement = 'top';
4613
4614
  /**
4614
- * Gap between the edge of the page and the popovercontainer
4615
+ * Gap between the edge of the viewport and the popover.
4615
4616
  */
4616
4617
  this.edgeGap = 8;
4617
4618
  /**
4618
- * Whether or not to display a little pointer arrow
4619
+ * Show a little indicator arrow
4619
4620
  */
4620
4621
  this.arrow = false;
4621
- /**
4622
- * Animation style
4623
- */
4624
- this.animation = 'pop-in';
4625
- this.currentAnimation = null;
4626
- this.boundMouseTrackingHandler = this.mouseTrackingHandler.bind(this);
4627
- }
4628
- /**
4629
- * Updates cursor position for safe space feature when popover is open.
4630
- * Sets CSS custom properties for dynamic styling of safe area.
4631
- * @param event MouseEvent with cursor position
4632
- */
4633
- mouseTrackingHandler(event) {
4634
- this.host.style.setProperty('--post-safe-space-cursor-x', `${event.clientX}px`);
4635
- this.host.style.setProperty('--post-safe-space-cursor-y', `${event.clientY}px`);
4636
4622
  }
4637
4623
  connectedCallback() {
4638
4624
  if (!isSupported()) {
@@ -4643,296 +4629,197 @@ const PostPopovercontainer = class {
4643
4629
  this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
4644
4630
  }
4645
4631
  disconnectedCallback() {
4646
- if (typeof this.clearAutoUpdate === 'function') {
4647
- this.clearAutoUpdate();
4648
- }
4632
+ this.cleanup();
4649
4633
  this.host.removeEventListener('beforetoggle', this.handleToggle.bind(this));
4650
4634
  }
4635
+ cleanup() {
4636
+ this.stopAutoUpdate?.();
4637
+ if (this.runningAnimation) {
4638
+ this.runningAnimation.cancel();
4639
+ this.runningAnimation = null;
4640
+ }
4641
+ }
4642
+ isOpen() {
4643
+ return this.host?.matches(':where(:popover-open, .popover-open)');
4644
+ }
4645
+ getContent() {
4646
+ return this.host?.shadowRoot.querySelector('[part="post-popovercontainer-content"]');
4647
+ }
4648
+ getContentMinSize() {
4649
+ const content = this.getContent();
4650
+ if (!content)
4651
+ return {};
4652
+ const { minWidth, minHeight } = getComputedStyle(content);
4653
+ return {
4654
+ width: Number.parseFloat(minWidth) || 0,
4655
+ height: Number.parseFloat(minHeight) || 0,
4656
+ };
4657
+ }
4651
4658
  /**
4652
- * Programmatically display the popovercontainer
4653
- * @param target The element that invokes the popover and to which it is visually anchored.
4659
+ * Shows the popover.
4660
+ * @param anchor the element that the popover is visually anchored to.
4654
4661
  */
4655
- async show(target) {
4656
- if (this.toggleTimeoutId || !target)
4662
+ async show(anchor) {
4663
+ if (this.toggleTimeoutId || !anchor || this.isOpen())
4657
4664
  return;
4658
- this.eventTarget = target;
4659
- this.updatePosition();
4665
+ this.anchorRef = anchor;
4660
4666
  this.host.showPopover();
4661
4667
  }
4662
4668
  /**
4663
- * Programmatically hide the popovercontainer
4669
+ * Hides the popover.
4664
4670
  */
4665
4671
  async hide() {
4666
- if (!this.toggleTimeoutId) {
4667
- this.eventTarget = null;
4668
- this.host.hidePopover();
4669
- this.postHide.emit();
4670
- }
4672
+ if (this.toggleTimeoutId || !this.isOpen())
4673
+ return;
4674
+ this.anchorRef = null;
4675
+ this.host.hidePopover();
4676
+ this.postHide.emit();
4671
4677
  }
4672
4678
  /**
4673
- * Toggle popovercontainer display
4674
- * @param target The element that invokes the popover and to which it is visually anchored.
4675
- * @param force Pass true to always show or false to always hide
4679
+ * Toggles the popover's state from hidden to showing and vice versa.
4680
+ *
4681
+ * If `state` is specified, the popover is forced to be shown if the is set to `true`, or hidden
4682
+ * if it is set to `false`.
4683
+ *
4684
+ * @param anchor the element that the popover is visually anchored to.
4685
+ * @param force the next state of the popover.
4686
+ * @returns the new state of the popover: `true` if it is shown, `false` if it is hidden.
4676
4687
  */
4677
- async toggle(target, force) {
4678
- const isOpen = this.host.matches(':where(:popover-open, .popover-open)');
4679
- const willOpen = force === true || (force === undefined && !isOpen);
4680
- if (willOpen && !target)
4688
+ async toggle(anchor, force) {
4689
+ const isOpen = this.isOpen();
4690
+ if (!this.host || this.toggleTimeoutId)
4681
4691
  return isOpen;
4682
- this.eventTarget = target;
4683
- // Prevent instant double toggle
4684
- if (!this.toggleTimeoutId) {
4685
- this.updatePosition();
4686
- this.host.togglePopover(force);
4687
- this.toggleTimeoutId = null;
4688
- }
4689
- return this.host.matches(':where(:popover-open, .popover-open)');
4692
+ const shouldOpen = force === true || (force === undefined && !isOpen);
4693
+ if (isOpen === shouldOpen || (shouldOpen && !anchor))
4694
+ return isOpen;
4695
+ this.anchorRef = shouldOpen ? anchor : null;
4696
+ this.host.togglePopover(force);
4697
+ this.toggleTimeoutId = null;
4698
+ return this.isOpen();
4690
4699
  }
4691
4700
  /**
4692
- * Handles the popover opening process and emits related events.
4701
+ * Handles the popover's state transition from hidden to showing and vice versa.
4693
4702
  */
4694
- open() {
4695
- const content = this.host.shadowRoot?.querySelector('.popover-content');
4696
- this.startAutoupdates();
4697
- if (content) {
4698
- const animationFn = ANIMATIONS[this.animation];
4699
- // Only run the animation if it corresponds to a valid, registered animation function
4700
- if (typeof animationFn === 'function') {
4701
- this.runOpenAnimation(animationFn, content);
4702
- }
4703
- else {
4704
- // No animation case
4705
- this.postBeforeToggle.emit({ willOpen: true });
4706
- this.postBeforeShow.emit({ first: this.hasOpenedOnce });
4707
- this.postToggle.emit({ isOpen: true });
4708
- this.postShow.emit({ first: this.hasOpenedOnce });
4709
- if (this.hasOpenedOnce)
4710
- this.hasOpenedOnce = false;
4711
- }
4712
- }
4713
- if (this.safeSpace) {
4714
- globalThis.addEventListener('mousemove', this.boundMouseTrackingHandler);
4715
- }
4703
+ async handleToggle(event) {
4704
+ this.toggleTimeoutId = globalThis.setTimeout(() => (this.toggleTimeoutId = null), 10);
4705
+ if (event.newState === 'open')
4706
+ await this.handleOpen();
4707
+ else
4708
+ await this.handleClose();
4716
4709
  }
4717
4710
  /**
4718
- * Handles the popover closing process and emits related events.
4711
+ * Handles the popover's state transition from hidden to showing, emitting related events.
4719
4712
  */
4720
- close() {
4721
- if (typeof this.clearAutoUpdate === 'function') {
4722
- this.clearAutoUpdate();
4723
- }
4724
- if (this.safeSpace) {
4725
- globalThis.removeEventListener('mousemove', this.boundMouseTrackingHandler);
4713
+ async handleOpen() {
4714
+ this.postBeforeToggle.emit({ willOpen: true });
4715
+ this.postBeforeShow.emit({ first: !this.hasBeenOpened });
4716
+ await this.updatePosition(true);
4717
+ this.startAutoUpdate();
4718
+ try {
4719
+ await this.runOpenAnimation();
4726
4720
  }
4727
- // Cancel any running animation
4728
- if (this.currentAnimation) {
4729
- this.currentAnimation.cancel();
4730
- this.currentAnimation = null;
4721
+ catch {
4722
+ return;
4731
4723
  }
4732
- this.postBeforeToggle.emit({ willOpen: false });
4733
- this.postToggle.emit({ isOpen: false });
4734
- this.postHide.emit();
4724
+ this.postToggle.emit({ isOpen: true });
4725
+ this.postShow.emit({ first: !this.hasBeenOpened });
4726
+ this.hasBeenOpened = true;
4735
4727
  }
4736
4728
  /**
4737
- * Runs the animation and emits the toggle/show/hide events in the correct timing
4729
+ * Run the open animation for the popover.
4738
4730
  */
4739
- async runOpenAnimation(animationFn, element) {
4740
- let animation;
4741
- try {
4742
- animation = animationFn(element);
4743
- if (!animation) {
4744
- // Fallback: no animation, just emit open events directly
4745
- this.postBeforeToggle.emit({ willOpen: true });
4746
- this.postBeforeShow.emit({ first: this.hasOpenedOnce });
4747
- this.postToggle.emit({ isOpen: true });
4748
- this.postShow.emit({ first: this.hasOpenedOnce });
4749
- return;
4750
- }
4751
- this.currentAnimation = animation;
4752
- if (animation.playState === 'running') {
4753
- this.postBeforeToggle.emit({ willOpen: true });
4754
- this.postBeforeShow.emit({ first: this.hasOpenedOnce });
4755
- }
4756
- await animation.finished;
4757
- this.postToggle.emit({ isOpen: true });
4758
- this.postShow.emit({ first: this.hasOpenedOnce });
4759
- this.hasOpenedOnce = true;
4760
- }
4761
- catch (err) {
4762
- console.warn('Animation failed or was interrupted:', err);
4763
- // Reset all states to closing
4764
- this.postBeforeToggle.emit({ willOpen: false });
4765
- this.postBeforeShow.emit({ first: this.hasOpenedOnce });
4766
- this.postToggle.emit({ isOpen: false });
4767
- }
4768
- finally {
4769
- if (this.currentAnimation === animation) {
4770
- this.currentAnimation = null;
4771
- }
4772
- }
4731
+ async runOpenAnimation() {
4732
+ const content = this.getContent();
4733
+ if (!content)
4734
+ return;
4735
+ this.runningAnimation = popIn(content);
4736
+ await this.runningAnimation.finished;
4773
4737
  }
4774
4738
  /**
4775
- * Start or stop auto updates based on popovercontainer events.
4776
- * Popovercontainers can be closed or opened with other methods than class members,
4777
- * therefore listening to the toggle event is safer for cleaning up.
4778
- * @param e ToggleEvent
4739
+ * Handles the popover's state transition from showing to hidden, emitting related events.
4779
4740
  */
4780
- handleToggle(e) {
4781
- this.toggleTimeoutId = globalThis.setTimeout(() => (this.toggleTimeoutId = null), 10);
4782
- const isOpen = e.newState === 'open';
4783
- if (isOpen) {
4784
- this.open();
4785
- }
4786
- else {
4787
- this.close();
4788
- }
4741
+ async handleClose() {
4742
+ this.postBeforeToggle.emit({ willOpen: false });
4743
+ this.cleanup();
4744
+ this.host.style.removeProperty(AVAILABLE_WIDTH_PROPERTY);
4745
+ this.host.style.removeProperty(AVAILABLE_HEIGHT_PROPERTY);
4746
+ this.host.style.removeProperty(SAFE_SPACE_PROPERTY);
4747
+ this.postToggle.emit({ isOpen: false });
4748
+ this.postHide.emit();
4789
4749
  }
4790
4750
  /**
4791
- * Start listening for DOM updates, scroll events etc. that have
4792
- * an influence on popovercontainer positioning
4751
+ * Listen for changes that affect the popover's position and update it accordingly.
4793
4752
  */
4794
- startAutoupdates() {
4795
- if (!this.eventTarget || !this.host)
4753
+ startAutoUpdate() {
4754
+ if (!this.host || !this.anchorRef)
4796
4755
  return;
4797
- this.clearAutoUpdate = autoUpdate(this.eventTarget, this.host, this.updatePosition.bind(this));
4756
+ this.stopAutoUpdate = autoUpdate(this.anchorRef, this.host, () => this.updatePosition(this.autoResize));
4798
4757
  }
4799
- async updatePosition() {
4800
- const { x, y, middlewareData, placement } = await this.calculatePosition();
4801
- // Hide the popover if the target is outside the viewport
4758
+ /**
4759
+ * Updates the position of the popover based on the anchor's position and the specified placement.
4760
+ * @param withSize whether to resize the popover based on the available space.
4761
+ */
4762
+ async updatePosition(withSize = false) {
4763
+ const { x, y, middlewareData, placement } = await this.computePosition(withSize);
4764
+ // Hide the popover if the anchor is outside the scrollport.
4802
4765
  if (middlewareData.hide?.referenceHidden) {
4803
4766
  this.host.hidePopover();
4767
+ return;
4804
4768
  }
4805
- const currentPlacement = placement.split('-')[0];
4806
- this.dynamicPlacement = currentPlacement;
4807
- // Position popover
4769
+ this.side = getSide(placement);
4770
+ // Position the popover.
4808
4771
  this.host.style.left = `${x}px`;
4809
4772
  this.host.style.top = `${y}px`;
4810
- // Position arrow if enabled
4811
- if (this.arrow && middlewareData.arrow) {
4812
- const { x: arrowX, y: arrowY } = middlewareData.arrow;
4813
- const staticSide = PostPopovercontainer.STATIC_SIDES[currentPlacement];
4814
- const arrowSizePx = this.arrowRef.offsetWidth;
4815
- const halfSide = -0.5 * arrowSizePx;
4816
- if (staticSide) {
4817
- Object.assign(this.arrowRef.style, {
4818
- left: arrowX ? `${arrowX}px` : '',
4819
- top: arrowY ? `${arrowY}px` : '',
4820
- [staticSide]: `${halfSide}px`,
4821
- });
4822
- }
4773
+ // Position the indicator arrow.
4774
+ if (middlewareData.arrow) {
4775
+ this.arrowRef.style.left = middlewareData.arrow.x ? `${middlewareData.arrow.x}px` : '';
4776
+ this.arrowRef.style.top = middlewareData.arrow.y ? `${middlewareData.arrow.y}px` : '';
4777
+ this.arrowRef.style[getOppositeSide(this.side)] = `-${this.arrowRef.offsetWidth / 2}px`;
4823
4778
  }
4824
- // Handle safe space if enabled
4825
- if (this.safeSpace && this.eventTarget) {
4826
- await this.updateSafeSpaceBoundaries(currentPlacement);
4779
+ // Set the safe space polygon.
4780
+ if (middlewareData[SAFE_SPACE_MIDDLEWARE]) {
4781
+ this.host.style.setProperty(SAFE_SPACE_PROPERTY, middlewareData[SAFE_SPACE_MIDDLEWARE].polygon);
4827
4782
  }
4828
4783
  }
4829
- async calculatePosition() {
4830
- const gap = this.edgeGap;
4831
- const isAligned = (this.placement || 'top').includes('-');
4832
- const flipMiddleware = [
4833
- // Flip the popover if the target moves outside the viewport
4834
- flip({ elementContext: 'reference', crossAxis: false }),
4835
- // Flip the popover if the popover itself moves outside the viewport
4836
- flip({ elementContext: 'floating', crossAxis: false }),
4837
- ];
4838
- const shiftMiddleware = shift({
4839
- padding: gap,
4840
- limiter: limitShift({
4841
- offset: 32,
4842
- }),
4843
- });
4784
+ async computePosition(withSize) {
4785
+ const padding = this.edgeGap ?? 0;
4844
4786
  const middleware = [
4845
- offset(this.offset ?? (this.arrow ? gap + 4 : gap)),
4787
+ offset(this.offset ?? (this.arrow ? padding + 4 : padding)),
4846
4788
  inline(),
4847
- // Per floating-ui docs: for aligned placements (e.g. bottom-end),
4848
- // flip should come before shift. For non-aligned, shift before flip.
4849
- ...(isAligned ? [...flipMiddleware, shiftMiddleware] : [shiftMiddleware, ...flipMiddleware]),
4850
- size({
4851
- apply({ availableWidth, elements }) {
4852
- Object.assign(elements.floating.style, {
4853
- maxWidth: `${availableWidth - gap * 2}px`,
4854
- });
4855
- },
4856
- }),
4857
4789
  ];
4858
- if (this.arrow) {
4859
- middleware.push(arrow({ element: this.arrowRef, padding: gap }));
4790
+ const flipMiddleware = flip({ padding, minSize: this.getContentMinSize() });
4791
+ const shiftMiddleware = shift({ limiter: limitShift({ offset: 32 }), padding });
4792
+ // `flip` should come before `shift` for edge-aligned placements
4793
+ // (see https://floating-ui.com/docs/flip#combining-with-shift).
4794
+ if (this.placement?.includes('-'))
4795
+ middleware.push(flipMiddleware, shiftMiddleware);
4796
+ else
4797
+ middleware.push(shiftMiddleware, flipMiddleware);
4798
+ if (withSize) {
4799
+ middleware.push(size({
4800
+ padding,
4801
+ apply({ availableWidth, availableHeight, elements }) {
4802
+ elements.floating.style.setProperty(AVAILABLE_WIDTH_PROPERTY, `${Math.max(0, availableWidth)}px`);
4803
+ elements.floating.style.setProperty(AVAILABLE_HEIGHT_PROPERTY, `${Math.max(0, availableHeight)}px`);
4804
+ },
4805
+ }));
4860
4806
  }
4861
- // Automatically hide the popover if the target moves outside the scrollport.
4862
- if (this.autoHide) {
4863
- // Per floating-ui docs: hide should generally be placed at the end.
4807
+ if (this.arrow)
4808
+ middleware.push(arrow({ element: this.arrowRef, padding }));
4809
+ if (this.safeSpace)
4810
+ middleware.push(safeSpace());
4811
+ // `hide` should generally be placed at the end of the middleware chain
4812
+ // (see https://floating-ui.com/docs/hide#order).
4813
+ if (this.autoHide)
4864
4814
  middleware.push(hide({ strategy: 'referenceHidden' }));
4865
- }
4866
- return computePositionWithSafeArea(this.eventTarget, this.host, {
4867
- placement: this.placement || 'top',
4815
+ return computePositionWithSafeArea(this.anchorRef, this.host, {
4816
+ placement: this.placement ?? 'top',
4868
4817
  strategy: 'fixed',
4869
4818
  middleware,
4870
4819
  });
4871
4820
  }
4872
- async updateSafeSpaceBoundaries(currentPlacement) {
4873
- const targetRect = this.eventTarget.getBoundingClientRect();
4874
- const popoverRect = this.host.getBoundingClientRect();
4875
- const isVertical = currentPlacement === 'top' || currentPlacement === 'bottom';
4876
- // Helper function to get positioning data based on placement
4877
- const getPositioningData = (placement, popoverRect, targetRect) => {
4878
- if (placement === 'top' || placement === 'bottom') {
4879
- return {
4880
- popover: {
4881
- y: placement === 'top' ? popoverRect.bottom : popoverRect.top,
4882
- xStart: popoverRect.left,
4883
- xEnd: popoverRect.right,
4884
- },
4885
- trigger: {
4886
- y: placement === 'top' ? targetRect.top : targetRect.bottom,
4887
- xStart: targetRect.left,
4888
- xEnd: targetRect.right,
4889
- },
4890
- };
4891
- }
4892
- else {
4893
- // left or right
4894
- return {
4895
- popover: {
4896
- x: placement === 'left' ? popoverRect.right : popoverRect.left,
4897
- yStart: popoverRect.top,
4898
- yEnd: popoverRect.bottom,
4899
- },
4900
- trigger: {
4901
- x: placement === 'left' ? targetRect.left : targetRect.right,
4902
- yStart: targetRect.top,
4903
- yEnd: targetRect.bottom,
4904
- },
4905
- };
4906
- }
4907
- };
4908
- const posData = getPositioningData(currentPlacement, popoverRect, targetRect);
4909
- // Clear previous values
4910
- PostPopovercontainer.PROPERTIES_TO_CLEAR.forEach(prop => {
4911
- this.host.style.removeProperty(prop);
4912
- });
4913
- if (isVertical) {
4914
- // For top/bottom placement
4915
- this.host.style.setProperty('--post-safe-space-popover-y', `${posData.popover.y}px`);
4916
- this.host.style.setProperty('--post-safe-space-popover-x-start', `${posData.popover.xStart}px`);
4917
- this.host.style.setProperty('--post-safe-space-popover-x-end', `${posData.popover.xEnd}px`);
4918
- this.host.style.setProperty('--post-safe-space-trigger-y', `${posData.trigger.y}px`);
4919
- this.host.style.setProperty('--post-safe-space-trigger-x-start', `${posData.trigger.xStart}px`);
4920
- this.host.style.setProperty('--post-safe-space-trigger-x-end', `${posData.trigger.xEnd}px`);
4921
- }
4922
- else {
4923
- // For left/right placement
4924
- this.host.style.setProperty('--post-safe-space-popover-x', `${posData.popover.x}px`);
4925
- this.host.style.setProperty('--post-safe-space-popover-y-start', `${posData.popover.yStart}px`);
4926
- this.host.style.setProperty('--post-safe-space-popover-y-end', `${posData.popover.yEnd}px`);
4927
- this.host.style.setProperty('--post-safe-space-trigger-x', `${posData.trigger.x}px`);
4928
- this.host.style.setProperty('--post-safe-space-trigger-y-start', `${posData.trigger.yStart}px`);
4929
- this.host.style.setProperty('--post-safe-space-trigger-y-end', `${posData.trigger.yEnd}px`);
4930
- }
4931
- }
4932
4821
  render() {
4933
- return (h(Host, { key: 'f3ea4bfc9a59faa2fbf1e413a1ec648f598a6779', "data-version": version, popover: "auto" }, h("div", { key: 'a328c73c7e08eca1e423fcbe736798188cca2a87', part: "post-popovercontainer-content", class: "popover-content" }, this.arrow && (h("span", { key: '8fad0095fb8d8c903ba84a639b4efc3e321c6aef', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
4934
- this.arrowRef = el;
4935
- } })), h("span", { key: 'deadbcc5892ed545a64b4a0e5e0936e0dd1feb70', part: "post-popovercontainer-border-mask" }), h("slot", { key: '48c4db7ab222f3ef18157ce19d8ba15d75441f98' }))));
4822
+ return (h(Host, { key: 'd48b21174f74b790f8a72b4294e9f741c3b64d14', "data-version": version, popover: "auto" }, h("div", { key: '455e84294ecb36e25cc62582eb6c41058f24f6bc', part: "post-popovercontainer-content" }, this.arrow && (h("span", { key: '9d11f2596443876123eeaf5a02430d049c1c8b25', "data-side": this.side, class: "arrow", ref: el => (this.arrowRef = el) })), h("span", { key: 'a562460cdfa5539e7d9c23f1d044a2c045df5b9f', part: "post-popovercontainer-border-mask" }), h("slot", { key: '5aa546bbdf6c70e2a0afabf818d421581060f8a7' }))));
4936
4823
  }
4937
4824
  get host() { return getElement(this); }
4938
4825
  };
@@ -4942,9 +4829,6 @@ __decorate([
4942
4829
  __decorate([
4943
4830
  Type('number')
4944
4831
  ], PostPopovercontainer.prototype, "edgeGap", void 0);
4945
- __decorate([
4946
- OneOf(['triangle', 'trapezoid'])
4947
- ], PostPopovercontainer.prototype, "safeSpace", void 0);
4948
4832
  PostPopovercontainer.style = postPopovercontainerCss();
4949
4833
 
4950
4834
  const postTogglebuttonCss = () => `:host{cursor:pointer;outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-visible){outline-color:Highlight !important}}:host([aria-pressed=true]) ::slotted([data-showwhen=untoggled]){display:none}:host([aria-pressed=false]) ::slotted([data-showwhen=toggled]){display:none}`;