@swisspost/design-system-components 10.0.0-next.48 → 10.0.0-next.50

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 (249) hide show
  1. package/dist/cjs/{event-from-C6kpQwhw.js → event-from-CLvtSUKf.js} +20 -6
  2. package/dist/cjs/{get-root-CfQ2PogP.js → get-root-CyMf3Vsd.js} +1 -1
  3. package/dist/cjs/loader.cjs.js +1 -1
  4. package/dist/cjs/{package-CZyXYkIN.js → package-qtH-QrKv.js} +1 -1
  5. package/dist/cjs/post-accordion_2.cjs.entry.js +5 -5
  6. package/dist/cjs/post-avatar.cjs.entry.js +27 -37
  7. package/dist/cjs/post-back-to-top.cjs.entry.js +3 -3
  8. package/dist/cjs/post-banner.cjs.entry.js +5 -5
  9. package/dist/cjs/post-breadcrumb-item_2.cjs.entry.js +5 -5
  10. package/dist/cjs/post-breadcrumbs.cjs.entry.js +12 -7
  11. package/dist/cjs/post-card-control.cjs.entry.js +5 -5
  12. package/dist/cjs/post-closebutton_15.cjs.entry.js +274 -134
  13. package/dist/cjs/post-collapsible_2.cjs.entry.js +6 -6
  14. package/dist/cjs/post-components.cjs.js +1 -1
  15. package/dist/cjs/post-footer.cjs.entry.js +4 -4
  16. package/dist/cjs/post-linkarea.cjs.entry.js +19 -8
  17. package/dist/cjs/post-popover.cjs.entry.js +4 -4
  18. package/dist/cjs/post-rating.cjs.entry.js +4 -4
  19. package/dist/cjs/post-tab-header.cjs.entry.js +4 -4
  20. package/dist/cjs/post-tab-panel.cjs.entry.js +3 -3
  21. package/dist/cjs/post-tabs.cjs.entry.js +3 -3
  22. package/dist/cjs/post-tooltip-trigger.cjs.entry.js +3 -3
  23. package/dist/cjs/post-tooltip.cjs.entry.js +4 -4
  24. package/dist/collection/animations/pop-in.js +14 -0
  25. package/dist/collection/components/post-accordion/post-accordion.css +1 -1
  26. package/dist/collection/components/post-accordion-item/post-accordion-item.css +1 -1
  27. package/dist/collection/components/post-avatar/post-avatar.css +1 -1
  28. package/dist/collection/components/post-avatar/post-avatar.js +38 -34
  29. package/dist/collection/components/post-back-to-top/post-back-to-top.js +1 -1
  30. package/dist/collection/components/post-banner/post-banner.js +2 -2
  31. package/dist/collection/components/post-breadcrumb-item/post-breadcrumb-item.js +1 -1
  32. package/dist/collection/components/post-breadcrumbs/post-breadcrumbs.css +1 -1
  33. package/dist/collection/components/post-breadcrumbs/post-breadcrumbs.js +30 -4
  34. package/dist/collection/components/post-card-control/post-card-control.css +1 -1
  35. package/dist/collection/components/post-card-control/post-card-control.js +2 -2
  36. package/dist/collection/components/post-closebutton/button-types.js +1 -0
  37. package/dist/collection/components/post-closebutton/post-closebutton.css +1 -1
  38. package/dist/collection/components/post-closebutton/post-closebutton.js +65 -5
  39. package/dist/collection/components/post-collapsible/post-collapsible.js +1 -1
  40. package/dist/collection/components/post-collapsible-trigger/post-collapsible-trigger.js +1 -1
  41. package/dist/collection/components/post-footer/post-footer.css +1 -1
  42. package/dist/collection/components/post-footer/post-footer.js +1 -1
  43. package/dist/collection/components/post-header/post-header.css +1 -1
  44. package/dist/collection/components/post-header/post-header.js +19 -11
  45. package/dist/collection/components/post-icon/post-icon.js +39 -33
  46. package/dist/collection/components/post-language-option/post-language-option.css +1 -1
  47. package/dist/collection/components/post-language-option/post-language-option.js +1 -2
  48. package/dist/collection/components/post-language-switch/post-language-switch.js +1 -2
  49. package/dist/collection/components/post-linkarea/post-linkarea.css +1 -1
  50. package/dist/collection/components/post-linkarea/post-linkarea.js +24 -6
  51. package/dist/collection/components/post-list/post-list.css +1 -1
  52. package/dist/collection/components/post-list/post-list.js +1 -1
  53. package/dist/collection/components/post-list-item/post-list-item.js +1 -1
  54. package/dist/collection/components/post-logo/post-logo.js +1 -1
  55. package/dist/collection/components/post-mainnavigation/post-mainnavigation.css +1 -1
  56. package/dist/collection/components/post-mainnavigation/post-mainnavigation.js +1 -1
  57. package/dist/collection/components/post-megadropdown/post-megadropdown.css +1 -1
  58. package/dist/collection/components/post-megadropdown/post-megadropdown.js +73 -11
  59. package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.js +1 -1
  60. package/dist/collection/components/post-menu/post-menu.css +1 -1
  61. package/dist/collection/components/post-menu/post-menu.js +51 -9
  62. package/dist/collection/components/post-menu-item/post-menu-item.css +1 -1
  63. package/dist/collection/components/post-menu-item/post-menu-item.js +1 -1
  64. package/dist/collection/components/post-menu-trigger/post-menu-trigger.js +1 -1
  65. package/dist/collection/components/post-popover/post-popover.css +1 -1
  66. package/dist/collection/components/post-popover/post-popover.js +1 -1
  67. package/dist/collection/components/post-popovercontainer/post-popovercontainer.css +1 -1
  68. package/dist/collection/components/post-popovercontainer/post-popovercontainer.js +18 -7
  69. package/dist/collection/components/post-rating/post-rating.css +1 -1
  70. package/dist/collection/components/post-rating/post-rating.js +1 -1
  71. package/dist/collection/components/post-tab-header/post-tab-header.css +1 -1
  72. package/dist/collection/components/post-tab-header/post-tab-header.js +1 -1
  73. package/dist/collection/components/post-tab-panel/post-tab-panel.js +1 -1
  74. package/dist/collection/components/post-tabs/post-tabs.js +1 -1
  75. package/dist/collection/components/post-togglebutton/post-togglebutton.js +1 -1
  76. package/dist/collection/components/post-tooltip/post-tooltip.js +2 -2
  77. package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.js +1 -1
  78. package/dist/collection/utils/event-from.js +20 -6
  79. package/dist/component-names.json +39 -0
  80. package/dist/components/event-from.js +20 -6
  81. package/dist/components/package.js +1 -1
  82. package/dist/components/post-accordion-item2.js +1 -1
  83. package/dist/components/post-accordion2.js +1 -1
  84. package/dist/components/post-avatar.js +28 -36
  85. package/dist/components/post-back-to-top.js +1 -1
  86. package/dist/components/post-banner.js +2 -2
  87. package/dist/components/post-breadcrumb-item2.js +1 -1
  88. package/dist/components/post-breadcrumbs.js +14 -7
  89. package/dist/components/post-card-control.js +3 -3
  90. package/dist/components/post-closebutton.js +1 -44
  91. package/dist/components/post-closebutton2.js +77 -0
  92. package/dist/components/post-collapsible-trigger2.js +1 -1
  93. package/dist/components/post-collapsible2.js +1 -1
  94. package/dist/components/post-footer.js +2 -2
  95. package/dist/components/post-header.js +17 -12
  96. package/dist/components/post-icon2.js +39 -33
  97. package/dist/components/post-language-option.js +2 -3
  98. package/dist/components/post-language-switch.js +1 -2
  99. package/dist/components/post-linkarea.js +21 -8
  100. package/dist/components/post-list-item.js +1 -1
  101. package/dist/components/post-list.js +2 -2
  102. package/dist/components/post-logo.js +1 -1
  103. package/dist/components/post-mainnavigation.js +2 -2
  104. package/dist/components/post-megadropdown-trigger.js +1 -1
  105. package/dist/components/post-megadropdown.js +74 -12
  106. package/dist/components/post-menu-item2.js +2 -2
  107. package/dist/components/post-menu-trigger2.js +1 -1
  108. package/dist/components/post-menu2.js +33 -11
  109. package/dist/components/post-popover.js +15 -3
  110. package/dist/components/post-popovercontainer2.js +30 -5
  111. package/dist/components/post-rating.js +2 -2
  112. package/dist/components/post-tab-header.js +2 -2
  113. package/dist/components/post-tab-panel.js +1 -1
  114. package/dist/components/post-tabs.js +1 -1
  115. package/dist/components/post-togglebutton.js +1 -1
  116. package/dist/components/post-tooltip-trigger.js +1 -1
  117. package/dist/components/post-tooltip.js +2 -2
  118. package/dist/components/react/{p-Tg0GNTZM.js → p-B392lG2N.js} +3 -3
  119. package/dist/components/react/{p-Dq9F2i7n.js → p-B9Y7UQKI.js} +3 -3
  120. package/dist/components/react/{p-38PqL5iD.js → p-BXPcgIqO.js} +3 -3
  121. package/dist/components/react/{p-Da5wbVP8.js → p-BcVKzjda.js} +40 -34
  122. package/dist/components/react/{p-CiYSngKM.js → p-BlOv-NDA.js} +6 -6
  123. package/dist/components/react/{p-q8Fvf8A0.js → p-BmpB1vs4.js} +2 -2
  124. package/dist/components/react/p-BuKAaKXE.js +78 -0
  125. package/dist/components/react/{p-JHuJA2Lv.js → p-Bw6vnK1I.js} +36 -14
  126. package/dist/components/react/{p-Ce7jgYmK.js → p-CDsgZHvX.js} +31 -6
  127. package/dist/components/react/{p-kraHE1r3.js → p-CzIKqBrS.js} +20 -6
  128. package/dist/components/react/p-DimG3b3P.js +3 -0
  129. package/dist/components/react/{p-DzYquz3e.js → p-DnHwlsBi.js} +3 -3
  130. package/dist/components/react/{p-CGsAj6ij.js → p-U9MTjvRU.js} +2 -2
  131. package/dist/components/react/post-accordion-item.js +1 -1
  132. package/dist/components/react/post-accordion.js +1 -1
  133. package/dist/components/react/post-avatar.js +29 -37
  134. package/dist/components/react/post-back-to-top.js +3 -3
  135. package/dist/components/react/post-banner.js +4 -4
  136. package/dist/components/react/post-breadcrumb-item.js +1 -1
  137. package/dist/components/react/post-breadcrumbs.js +21 -14
  138. package/dist/components/react/post-card-control.js +5 -5
  139. package/dist/components/react/post-closebutton.js +1 -45
  140. package/dist/components/react/post-collapsible-trigger.js +1 -1
  141. package/dist/components/react/post-collapsible.js +1 -1
  142. package/dist/components/react/post-footer.js +8 -8
  143. package/dist/components/react/post-header.js +19 -14
  144. package/dist/components/react/post-icon.js +1 -1
  145. package/dist/components/react/post-language-option.js +3 -4
  146. package/dist/components/react/post-language-switch.js +7 -8
  147. package/dist/components/react/post-linkarea.js +22 -9
  148. package/dist/components/react/post-list-item.js +2 -2
  149. package/dist/components/react/post-list.js +3 -3
  150. package/dist/components/react/post-logo.js +2 -2
  151. package/dist/components/react/post-mainnavigation.js +4 -4
  152. package/dist/components/react/post-megadropdown-trigger.js +3 -3
  153. package/dist/components/react/post-megadropdown.js +75 -13
  154. package/dist/components/react/post-menu-item.js +1 -1
  155. package/dist/components/react/post-menu-trigger.js +1 -1
  156. package/dist/components/react/post-menu.js +1 -1
  157. package/dist/components/react/post-popover.js +17 -5
  158. package/dist/components/react/post-popovercontainer.js +1 -1
  159. package/dist/components/react/post-rating.js +4 -4
  160. package/dist/components/react/post-tab-header.js +3 -3
  161. package/dist/components/react/post-tab-panel.js +2 -2
  162. package/dist/components/react/post-tabs.js +2 -2
  163. package/dist/components/react/post-togglebutton.js +2 -2
  164. package/dist/components/react/post-tooltip-trigger.js +2 -2
  165. package/dist/components/react/post-tooltip.js +4 -4
  166. package/dist/docs.json +174 -12
  167. package/dist/esm/{event-from-kraHE1r3.js → event-from-CzIKqBrS.js} +20 -6
  168. package/dist/esm/{get-root-hlzxoycr.js → get-root-BkQ3CrLq.js} +1 -1
  169. package/dist/esm/loader.js +1 -1
  170. package/dist/esm/package-DimG3b3P.js +3 -0
  171. package/dist/esm/post-accordion_2.entry.js +5 -5
  172. package/dist/esm/post-avatar.entry.js +27 -37
  173. package/dist/esm/post-back-to-top.entry.js +3 -3
  174. package/dist/esm/post-banner.entry.js +5 -5
  175. package/dist/esm/post-breadcrumb-item_2.entry.js +5 -5
  176. package/dist/esm/post-breadcrumbs.entry.js +13 -8
  177. package/dist/esm/post-card-control.entry.js +5 -5
  178. package/dist/esm/post-closebutton_15.entry.js +274 -134
  179. package/dist/esm/post-collapsible_2.entry.js +6 -6
  180. package/dist/esm/post-components.js +1 -1
  181. package/dist/esm/post-footer.entry.js +4 -4
  182. package/dist/esm/post-linkarea.entry.js +19 -8
  183. package/dist/esm/post-popover.entry.js +4 -4
  184. package/dist/esm/post-rating.entry.js +4 -4
  185. package/dist/esm/post-tab-header.entry.js +4 -4
  186. package/dist/esm/post-tab-panel.entry.js +3 -3
  187. package/dist/esm/post-tabs.entry.js +3 -3
  188. package/dist/esm/post-tooltip-trigger.entry.js +3 -3
  189. package/dist/esm/post-tooltip.entry.js +4 -4
  190. package/dist/post-components/{p-3c71f590.entry.js → p-048d2c1a.entry.js} +1 -1
  191. package/dist/post-components/p-0a4d9f33.entry.js +1 -0
  192. package/dist/post-components/p-11abb64f.entry.js +1 -0
  193. package/dist/post-components/p-1253185c.entry.js +1 -0
  194. package/dist/post-components/p-15e0d4b8.entry.js +1 -0
  195. package/dist/post-components/{p-d61bb2ff.entry.js → p-1d4252ba.entry.js} +1 -1
  196. package/dist/post-components/{p-aad86320.entry.js → p-3d30eafa.entry.js} +1 -1
  197. package/dist/post-components/p-4114fc83.entry.js +1 -0
  198. package/dist/post-components/p-5ddde390.entry.js +1 -0
  199. package/dist/post-components/p-89411986.entry.js +1 -0
  200. package/dist/post-components/{p-6777e505.entry.js → p-9bbf7271.entry.js} +1 -1
  201. package/dist/post-components/{p-BkvZk-PA.js → p-CBFgkSgY.js} +1 -1
  202. package/dist/post-components/p-CJ80BZ06.js +1 -0
  203. package/dist/post-components/p-CzIKqBrS.js +1 -0
  204. package/dist/post-components/p-DimG3b3P.js +1 -0
  205. package/dist/post-components/p-b034d196.entry.js +1 -0
  206. package/dist/post-components/p-b36c129a.entry.js +1 -0
  207. package/dist/post-components/p-b82e7cbe.entry.js +1 -0
  208. package/dist/post-components/{p-6add880f.entry.js → p-e7fbb03d.entry.js} +1 -1
  209. package/dist/post-components/p-f1d53256.entry.js +1 -0
  210. package/dist/post-components/p-f97f3a19.entry.js +1 -0
  211. package/dist/post-components/{p-16772417.entry.js → p-f9d044a3.entry.js} +1 -1
  212. package/dist/post-components/post-components.esm.js +1 -1
  213. package/dist/types/animations/pop-in.d.ts +1 -0
  214. package/dist/types/components/post-avatar/post-avatar.d.ts +5 -4
  215. package/dist/types/components/post-breadcrumbs/post-breadcrumbs.d.ts +5 -0
  216. package/dist/types/components/post-closebutton/button-types.d.ts +2 -0
  217. package/dist/types/components/post-closebutton/post-closebutton.d.ts +10 -1
  218. package/dist/types/components/post-header/post-header.d.ts +5 -0
  219. package/dist/types/components/post-icon/post-icon.d.ts +11 -0
  220. package/dist/types/components/post-linkarea/post-linkarea.d.ts +6 -0
  221. package/dist/types/components/post-megadropdown/post-megadropdown.d.ts +33 -6
  222. package/dist/types/components/post-menu/post-menu.d.ts +7 -1
  223. package/dist/types/components/post-popovercontainer/post-popovercontainer.d.ts +6 -2
  224. package/dist/types/components.d.ts +39 -3
  225. package/dist/types/utils/event-from.d.ts +2 -1
  226. package/hydrate/index.js +357 -184
  227. package/hydrate/index.mjs +357 -184
  228. package/package.json +8 -6
  229. package/dist/components/react/p-0Ltezq5O.js +0 -3
  230. package/dist/esm/package-0Ltezq5O.js +0 -3
  231. package/dist/post-components/p-0Ltezq5O.js +0 -1
  232. package/dist/post-components/p-38d3d441.entry.js +0 -1
  233. package/dist/post-components/p-40f21542.entry.js +0 -1
  234. package/dist/post-components/p-4243cdd1.entry.js +0 -1
  235. package/dist/post-components/p-4c18cb8c.entry.js +0 -1
  236. package/dist/post-components/p-51dc7647.entry.js +0 -1
  237. package/dist/post-components/p-8363fedb.entry.js +0 -1
  238. package/dist/post-components/p-83998038.entry.js +0 -1
  239. package/dist/post-components/p-85bb1b5e.entry.js +0 -1
  240. package/dist/post-components/p-8f4d8685.entry.js +0 -1
  241. package/dist/post-components/p-95ad536d.entry.js +0 -1
  242. package/dist/post-components/p-9d806e89.entry.js +0 -1
  243. package/dist/post-components/p-_0G7tavk.js +0 -1
  244. package/dist/post-components/p-c3e38acf.entry.js +0 -1
  245. package/dist/post-components/p-kraHE1r3.js +0 -1
  246. package/dist/prebuild.js +0 -26
  247. package/dist/types/home/runner/work/design-system/design-system/packages/components/.stencil/prebuild.d.ts +0 -1
  248. package/dist/cjs/{breakpoints-DmZ_BQGo.js → breakpoints-CEkeixld.js} +3 -3
  249. package/dist/esm/{breakpoints-_0G7tavk.js → breakpoints-CJ80BZ06.js} +3 -3
@@ -1,58 +1,13 @@
1
1
  'use strict';
2
2
 
3
3
  var index = require('./index-CpDyH7Ww.js');
4
- var _package = require('./package-CZyXYkIN.js');
5
- var breakpoints = require('./breakpoints-DmZ_BQGo.js');
6
- var eventFrom = require('./event-from-C6kpQwhw.js');
4
+ var _package = require('./package-qtH-QrKv.js');
7
5
  var index$1 = require('./index-DtvYdwe1.js');
6
+ var breakpoints = require('./breakpoints-CEkeixld.js');
7
+ var eventFrom = require('./event-from-CLvtSUKf.js');
8
8
  var index_browser = require('./index.browser-Doj636JV.js');
9
9
  var placement = require('./placement-qEFR9hmI.js');
10
- var getRoot = require('./get-root-CfQ2PogP.js');
11
-
12
- const postClosebuttonCss = ".btn-icon-close{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-icon-close>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-icon-close:not(:disabled):hover,.btn-icon-close.pretend-hover{color:HighlightText !important}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
13
-
14
- const PostClosebutton = class {
15
- constructor(hostRef) {
16
- index.registerInstance(this, hostRef);
17
- }
18
- componentDidLoad() {
19
- this.checkHiddenLabel();
20
- }
21
- checkHiddenLabel(slot = this.host.shadowRoot.querySelector('.visually-hidden slot')) {
22
- if (slot.assignedNodes().length === 0) {
23
- console.error(`The \`${this.host.localName}\` component requires content for accessibility.`);
24
- }
25
- }
26
- render() {
27
- return (index.h(index.Host, { key: 'a8db3ecbefea609234c4c8c29dbf085637592c2c', "data-version": _package.version }, index.h("button", { key: '58cef7f32f6ec89d46a1ea57b5497089a96aebf3', class: "btn btn-icon-close", type: "button" }, index.h("post-icon", { key: '023a67437b69bb9966d08b027cc5f10d68baac40', "aria-hidden": "true", name: "closex" }), index.h("span", { key: 'b1a21810b6179ddd8d66b426a3149966c1972f59', class: "visually-hidden" }, index.h("slot", { key: '2a2417bedbcb57c75993722d3267342c7df7381d', onSlotchange: () => this.checkHiddenLabel() })))));
28
- }
29
- get host() { return index.getElement(this); }
30
- };
31
- PostClosebutton.style = postClosebuttonCss;
32
-
33
- const easing = 'ease';
34
- const duration = 500;
35
- const fill = 'forwards';
36
- function slideUp(el, translateSize = '-100%') {
37
- return el.animate([
38
- { transform: 'translateY(0)' }, // Starting position (no translation)
39
- { transform: `translateY(${translateSize})` }, // End position
40
- ], {
41
- duration: duration,
42
- easing,
43
- fill,
44
- });
45
- }
46
- function slideDown(el, translateSize = '-100%') {
47
- return el.animate([
48
- { transform: `translateY(${translateSize})` }, // Starting position (no translation)
49
- { transform: 'translateY(0)' }, // End position
50
- ], {
51
- duration: duration,
52
- easing,
53
- fill,
54
- });
55
- }
10
+ var getRoot = require('./get-root-CyMf3Vsd.js');
56
11
 
57
12
  const focusableSelector = `:where(${[
58
13
  'button',
@@ -88,7 +43,78 @@ function getFocusableChildren(element) {
88
43
  return visibleFocusableChildren;
89
44
  }
90
45
 
91
- const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--post-logo-height:calc(var(--post-global-header-expanded-height) - var(--post-header-scroll-top, 0px));--post-global-header-top:calc( var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height) );--post-local-header-top:calc( var(--post-global-header-reduced-height) + var(--post-local-header-reduced-height) - var(--post-local-header-expanded-height) );--post-global-controls-top:clamp( 1000 * var(--post-global-header-top), calc(-1 * min(var(--post-header-scroll-top, 0px) / 4, var(--post-global-header-reduced-height))), 0px )}@media screen and (min-width: 1024px){:host:has(.global-sub>*:not(.logo):focus-within),:host:has(.local-sub:focus-within){--post-global-header-top:0;--post-local-header-top:var(--post-global-header-expanded-height);--post-logo-height:var(--post-global-header-expanded-height);--post-global-controls-top:0}}:host(:not(:has([slot=title]))) .local-header{padding-block-start:0}:host(:not(:has([slot=title]))) .local-sub{display:none}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;position:sticky;padding-inline:4px;height:var(--post-global-header-expanded-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:4;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:8px;inset-block-start:var(--post-global-header-top);transition:inset-block-start .2s ease-in-out}}.global-sub{display:flex;align-items:center;gap:24px}@media screen and (min-width: 1024px){.global-sub:not(:has(.logo)){position:relative;transition:inset-block-start .2s ease-in-out;inset-block-start:var(--post-global-controls-top)}.global-sub:not(:last-child):not(:first-child){flex-grow:1}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--post-global-header-expanded-height);width:var(--post-global-header-expanded-height);min-height:var(--post-global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{transition:height .2 ease-in-out;height:var(--post-logo-height)}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-inline-start:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;inset-block-start:var(--post-local-header-top);flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--post-local-header-expanded-min-height);background:#fff;transition:box-shadow .2s ease-in-out}.local-header::after{content:\"\";position:absolute;width:100%;height:1px;background-color:#e1e0dc;inset-block-end:-1px;z-index:1}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.local-header::after{background-color:Highlight}}@media screen and (min-width: 1024px){.local-header{z-index:3;padding-block-start:18px;box-shadow:var(--post-device-elevation-300);transition:box-shadow .2s ease-in-out,inset-block-start .2s ease-in-out}}@media screen and (max-width: 1023.98px){.local-header{z-index:3;padding-block:8px;flex-wrap:wrap;gap:12px}.local-header.local-header-mobile-extended::after{inset-block-end:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-header.no-navigation{padding-block:0}.local-header.no-navigation .navigation{display:none}.local-sub{margin-inline-end:16px}@media screen and (max-width: 1023.98px){.local-sub{margin-inline-end:4px}}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--post-global-header-reduced-height)}.navigation::before{display:block;content:\"\";position:absolute;inset:0;z-index:2;background:#fff}}@media screen and (max-width: 1023.98px){.navigation{position:sticky;z-index:2;inset-inline:0;inset-block-start:var(--post-header-height)}.mobile-menu{background-color:#fafafa}::slotted(post-mainnavigation),.navigation-footer{padding-block:16px 24px;padding-inline:40px}::slotted(post-mainnavigation),.navigation-footer,.navigation-target-group{display:none;flex-direction:column}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer,.navigation.extended .navigation-target-group{display:flex}::slotted(post-mainnavigation){padding-block:24px}.navigation.extended>div{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height))}.navigation.extended.megadropdown-open>div{overflow-y:hidden}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}.navigation-footer{background-color:#f0efed;gap:24px}.navigation-footer ::slotted(post-language-switch){margin-top:16px}}@media screen and (max-width: 1023.98px)and (max-width: 599.98px){.navigation-footer{gap:16px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}";
46
+ const BUTTON_TYPES = ['button', 'submit', 'reset'];
47
+
48
+ const postClosebuttonCss = ".visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-closebutton .btn{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}post-closebutton .btn>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{color:HighlightText !important}}";
49
+
50
+ const PostClosebutton = class {
51
+ constructor(hostRef) {
52
+ index.registerInstance(this, hostRef);
53
+ this.mutationObserver = new MutationObserver(this.checkContent.bind(this));
54
+ /**
55
+ * Overrides the close button's type ("button" by default)
56
+ */
57
+ this.buttonType = 'button';
58
+ }
59
+ validateButtonType() {
60
+ index$1.checkEmptyOrOneOf(this, 'buttonType', BUTTON_TYPES);
61
+ }
62
+ componentDidLoad() {
63
+ this.checkContent();
64
+ }
65
+ connectedCallback() {
66
+ this.mutationObserver.observe(this.host, {
67
+ childList: true,
68
+ characterData: true,
69
+ subtree: true,
70
+ });
71
+ }
72
+ disconnectedCallback() {
73
+ if (this.mutationObserver) {
74
+ this.mutationObserver.disconnect();
75
+ }
76
+ }
77
+ checkContent() {
78
+ this.validateButtonType();
79
+ if (!this.host.querySelector('.visually-hidden').textContent) {
80
+ console.error(`The \`${this.host.localName}\` component requires content for accessibility.`);
81
+ }
82
+ }
83
+ render() {
84
+ return (index.h(index.Host, { key: '9b5bb7e95c6cf3039119ce485e963ac672834bc3', "data-version": _package.version }, index.h("button", { key: '084709a7c632a8c665905a667fa6498cae1972a6', class: "btn", type: this.buttonType }, index.h("post-icon", { key: 'e19209e0c8de59d3e187531e0185d8f2d5c85408', "aria-hidden": "true", name: "closex" }), index.h("span", { key: '233184a45391e5a9b89635345f2324a87f5e9558', class: "visually-hidden" }, index.h("slot", { key: 'c213ac1dbdd98d83a8b2dc1b74c85926404ad1c1' })))));
85
+ }
86
+ get host() { return index.getElement(this); }
87
+ static get watchers() { return {
88
+ "buttonType": ["validateButtonType"]
89
+ }; }
90
+ };
91
+ PostClosebutton.style = postClosebuttonCss;
92
+
93
+ const easing$1 = 'ease';
94
+ const duration$1 = 500;
95
+ const fill = 'forwards';
96
+ function slideUp(el, translateSize = '-100%') {
97
+ return el.animate([
98
+ { transform: 'translateY(0)' }, // Starting position (no translation)
99
+ { transform: `translateY(${translateSize})` }, // End position
100
+ ], {
101
+ duration: duration$1,
102
+ easing: easing$1,
103
+ fill,
104
+ });
105
+ }
106
+ function slideDown(el, translateSize = '-100%') {
107
+ return el.animate([
108
+ { transform: `translateY(${translateSize})` }, // Starting position (no translation)
109
+ { transform: 'translateY(0)' }, // End position
110
+ ], {
111
+ duration: duration$1,
112
+ easing: easing$1,
113
+ fill,
114
+ });
115
+ }
116
+
117
+ const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--post-logo-height:calc(var(--post-global-header-expanded-height) - var(--post-header-scroll-top, 0px));--post-global-header-top:calc( var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height) );--post-local-header-top:calc( var(--post-global-header-reduced-height) + var(--post-local-header-reduced-height) - var(--post-local-header-expanded-height) );--post-global-controls-top:clamp( 1000 * var(--post-global-header-top), calc(-1 * min(var(--post-header-scroll-top, 0px) / 4, var(--post-global-header-reduced-height))), 0px )}@media screen and (min-width: 1024px){:host:has(.global-sub>*:not(.logo):focus-within),:host:has(.local-sub:focus-within){--post-global-header-top:0;--post-local-header-top:var(--post-global-header-expanded-height);--post-logo-height:var(--post-global-header-expanded-height);--post-global-controls-top:0}}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;position:sticky;padding-inline:4px;height:var(--post-global-header-expanded-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:4;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:8px;inset-block-start:var(--post-global-header-top);transition:inset-block-start .2s ease-in-out}}.global-header:has(+.local-header.no-navigation.no-title){box-shadow:var(--post-device-elevation-300)}.global-sub{display:flex;align-items:center;gap:4px}@media screen and (min-width: 1024px){.global-sub:not(:has(.logo)){position:relative;transition:inset-block-start .2s ease-in-out;inset-block-start:var(--post-global-controls-top)}.global-sub:not(:last-child):not(:first-child){flex-grow:1}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--post-global-header-expanded-height);width:var(--post-global-header-expanded-height);min-height:var(--post-global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{transition:height .2 ease-in-out;height:var(--post-logo-height)}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-inline-start:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;inset-block-start:var(--post-local-header-top);flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--post-local-header-expanded-min-height);background:#fff;transition:box-shadow .2s ease-in-out}.local-header::after{content:\"\";position:absolute;width:100%;height:1px;background-color:#e1e0dc;inset-block-end:-1px;z-index:1}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.local-header::after{background-color:Highlight}}@media screen and (min-width: 1024px){.local-header{z-index:3;box-shadow:var(--post-device-elevation-300);transition:box-shadow .2s ease-in-out,inset-block-start .2s ease-in-out}.local-header:not(.no-title){padding-block-start:18px}}@media screen and (max-width: 1023.98px){.local-header{z-index:3;padding-block:8px;flex-wrap:wrap;gap:12px}.local-header.local-header-mobile-extended::after{inset-block-end:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-header.no-navigation{padding-block:0}.local-header.no-navigation .navigation{display:none}.local-header.no-navigation.no-title{display:none}.local-sub{margin-inline-end:16px}@media screen and (max-width: 1023.98px){.local-sub{margin-inline-end:4px}}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{display:flex;align-items:center;justify-content:space-between;inset-block-start:var(--post-global-header-reduced-height)}.navigation::before{display:block;content:\"\";position:absolute;inset:0;z-index:2;background:#fff}}@media screen and (max-width: 1023.98px){.navigation{position:sticky;z-index:2;inset-inline:0;inset-block-start:var(--post-header-height)}.mobile-menu{background-color:#fafafa}::slotted(post-mainnavigation),.navigation-footer{padding-block:16px 24px;padding-inline:40px}.navigation-header,::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column}.navigation.extended .navigation-header,.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}::slotted(post-mainnavigation){padding-block:24px}.navigation.extended>div{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height))}.navigation.extended.megadropdown-open>div{overflow-y:hidden}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}.navigation-footer{background-color:#f0efed;gap:24px}.navigation-footer ::slotted(post-language-switch){margin-top:16px}}@media screen and (max-width: 1023.98px)and (max-width: 599.98px){.navigation-footer{gap:16px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}";
92
118
 
93
119
  var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
94
120
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -135,6 +161,7 @@ const PostHeader = class {
135
161
  this.throttledResize = breakpoints.throttle(50, () => this.updateLocalHeaderHeight());
136
162
  this.device = breakpoints.breakpoint.get('device');
137
163
  this.hasNavigation = false;
164
+ this.hasTitle = false;
138
165
  this.mobileMenuExtended = false;
139
166
  this.megadropdownOpen = false;
140
167
  this.breakpointChange = (e) => {
@@ -171,6 +198,7 @@ const PostHeader = class {
171
198
  this.host.addEventListener('click', this.handleLinkClick);
172
199
  window.addEventListener('postBreakpoint:device', this.breakpointChange);
173
200
  this.checkNavigationExistence();
201
+ this.checkTitleExistence();
174
202
  this.switchLanguageSwitchMode();
175
203
  this.handleScrollParentResize();
176
204
  this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
@@ -191,7 +219,8 @@ const PostHeader = class {
191
219
  window.removeEventListener('postBreakpoint:device', this.breakpointChange);
192
220
  window.removeEventListener('resize', this.throttledResize);
193
221
  window.removeEventListener('scroll', this.handleScrollEvent);
194
- scrollParent.removeEventListener('scroll', this.handleScrollEvent);
222
+ if (scrollParent)
223
+ scrollParent.removeEventListener('scroll', this.handleScrollEvent);
195
224
  document.removeEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
196
225
  this.host.removeEventListener('keydown', this.keyboardHandler);
197
226
  this.host.removeEventListener('click', this.handleLinkClick);
@@ -208,6 +237,9 @@ const PostHeader = class {
208
237
  checkNavigationExistence() {
209
238
  this.hasNavigation = this.host.querySelectorAll('post-mainnavigation').length > 0;
210
239
  }
240
+ checkTitleExistence() {
241
+ this.hasTitle = this.host.querySelectorAll('[slot="title"]').length > 0;
242
+ }
211
243
  async closeMobileMenu() {
212
244
  this.mobileMenuAnimation.finish();
213
245
  const menuButton = this.getMenuButton();
@@ -333,23 +365,21 @@ const PostHeader = class {
333
365
  });
334
366
  }
335
367
  renderNavigation() {
336
- const navigationClasses = ['navigation'];
337
- const mobileMenuScrollTop = this.mobileMenu?.scrollTop ?? 0;
338
- if (this.mobileMenuExtended) {
339
- navigationClasses.push('extended');
340
- }
341
- if (this.megadropdownOpen) {
342
- navigationClasses.push('megadropdown-open');
368
+ const mainNavigation = (index.h("slot", { name: "post-mainnavigation", onSlotchange: () => this.checkNavigationExistence() }));
369
+ if (this.device === 'desktop') {
370
+ return (index.h("div", { class: { 'navigation': true, 'megadropdown-open': this.megadropdownOpen } }, mainNavigation, index.h("slot", { name: "navigation-controls" })));
343
371
  }
344
- return (index.h("div", { class: navigationClasses.join(' '), style: { '--post-header-navigation-current-inset': `${mobileMenuScrollTop}px` } }, index.h("div", { class: "mobile-menu", ref: el => (this.mobileMenu = el) }, index.h("div", { class: "navigation-target-group" }, (this.device === 'mobile' || this.device === 'tablet') && (index.h("slot", { name: "target-group" }))), index.h("slot", { name: "post-mainnavigation", onSlotchange: () => this.checkNavigationExistence() }), (this.device === 'mobile' || this.device === 'tablet') && (index.h("div", { class: "navigation-footer" }, index.h("slot", { name: "meta-navigation" }), index.h("slot", { name: "post-language-switch" }))))));
372
+ return (index.h("div", { class: { navigation: true, extended: this.mobileMenuExtended }, style: { '--post-header-navigation-current-inset': `${this.mobileMenu?.scrollTop ?? 0}px` } }, index.h("div", { class: "mobile-menu", ref: el => (this.mobileMenu = el) }, index.h("div", { class: "navigation-header" }, index.h("slot", { name: "navigation-controls" }), index.h("slot", { name: "target-group" })), mainNavigation, index.h("div", { class: "navigation-footer" }, index.h("slot", { name: "meta-navigation" }), index.h("slot", { name: "post-language-switch" })))));
345
373
  }
346
374
  render() {
347
375
  const localHeaderClasses = ['local-header'];
348
376
  if (this.mobileMenuExtended)
349
377
  localHeaderClasses.push('local-header-mobile-extended');
350
- if (!this.hasNavigation)
378
+ if (this.device !== 'desktop' || !this.hasNavigation)
351
379
  localHeaderClasses.push('no-navigation');
352
- return (index.h(index.Host, { key: 'ec2be7f6699d0b6be65c7ec05ccfaf11fe38551f', "data-version": _package.version, "data-color-scheme": "light" }, index.h("div", { key: 'defa2d956e848f0270e1c36404bb0e32e6112ab2', class: "global-header" }, index.h("div", { key: 'b1db492439d45566140d8698310d68707d44f178', class: "global-sub" }, index.h("div", { key: 'a238bbbe5999e4ff858b9f7223eb3a82ae517dc3', class: "logo" }, index.h("slot", { key: '7b6a922842eaf01fdddad88079c5c4e27d9caf9d', name: "post-logo" }))), index.h("div", { key: '70b7e4f0a0e7dcd8458238f85d5cadfad5c8030d', class: "global-sub" }, this.device === 'desktop' && index.h("slot", { key: '9abe132d957d37848205cd5b045ed9d8e9040da4', name: "target-group" })), index.h("div", { key: '6666cb7b19cd3654020291cff4b3f7821f190416', class: "global-sub" }, !this.hasMobileMenu && (index.h("slot", { key: '446f14ba4b014b35b60dbf643ab1baace4cd1cd7', name: "meta-navigation" })), index.h("slot", { key: '6cdb4006e56ccdeb076cbe486a437ca56e4b259a', name: "global-controls" }), !this.hasMobileMenu && index.h("slot", { key: '6be456ce09dee5653c36e2320fa89345139232a4', name: "post-language-switch" }), this.hasNavigation && (index.h("div", { key: '28f87889a93aae2e78978cbd02e18dca58a486ef', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, index.h("slot", { key: '157b154a30cdaf4c17434c2a6c7a796ad945780c', name: "post-togglebutton" }))))), index.h("div", { key: 'ddf249e9b055659325cc9717f03ccd9345556e15', class: localHeaderClasses.join(' ') }, index.h("slot", { key: '858312b4c4ef74c76588f9cd0b49acfda39f6daf', name: "title" }), index.h("div", { key: '73db57db8df18d9106cb124cf95b0c2551ceda23', class: "local-sub" }, index.h("slot", { key: 'e36a9e8572878fe11ae326503b0cbcc4d03ddd3e', name: "local-controls" }), index.h("slot", { key: '354e22a83276f8fa8c79127c8cdcfbf0f12dbf91' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
380
+ if (!this.hasTitle)
381
+ localHeaderClasses.push('no-title');
382
+ return (index.h(index.Host, { key: 'fd3c4a534af28b2e35f4a02502283e04be0d9683', "data-version": _package.version, "data-color-scheme": "light" }, index.h("div", { key: '61c70adea7525d3daa7690ac9243c7697df5c8bc', class: "global-header" }, index.h("div", { key: '1fdb106a9624a07d3ad3fd1cb4eade9b05282ab5', class: "global-sub" }, index.h("div", { key: '2c62bccfa8d5fa9642528db265e76aac0d13022c', class: "logo" }, index.h("slot", { key: '75b87c2428b7ccad6940976e46156b807257cbc5', name: "post-logo" }))), index.h("div", { key: 'c1950198cbac96132ca5b1c886bb94238c53b903', class: "global-sub" }, this.device === 'desktop' && index.h("slot", { key: '2e695987df3da854db3ec18cc4b1283d0f06dfd1', name: "target-group" })), index.h("div", { key: '50366842180e3aae87d4e4da68a8f73c2f62c347', class: "global-sub" }, index.h("slot", { key: '7eba07e3dddbc26843a50b39a69953a01d9e2a5e', name: "global-controls" }), !this.hasMobileMenu && index.h("slot", { key: 'aa9fc50e2eb8eee4e3d9de76ccbf564ac30a8d03', name: "meta-navigation" }), !this.hasMobileMenu && index.h("slot", { key: '7742f0d0e30d5b0d90ca9352fec72e49a97ec3cb', name: "post-language-switch" }), index.h("slot", { key: 'a3545c4bb2a61c00105763059f3bd66ddd829681', name: "global-login" }), this.hasNavigation && (index.h("div", { key: 'bb8df618571ea8cadb89b0cd8d50bba7c0dec038', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, index.h("slot", { key: '83b9542127213e39644c280cf9f4e19aaf3f071a', name: "post-togglebutton" }))))), index.h("div", { key: '2ab719d2610d46050fc99345237b7b9cc54fd467', class: localHeaderClasses.join(' ') }, index.h("slot", { key: '0e02b3f7421a1c67e99fdc92aadcf61153665820', name: "title", onSlotchange: () => this.checkTitleExistence() }), this.hasTitle && (index.h("div", { key: '94b091a29727bd556a4907ac4bdb2f8757483135', class: "local-sub" }, index.h("slot", { key: '7647015350e21278b104ff4538525abeaea98442', name: "local-controls" }), index.h("slot", { key: '4e42d3fe5c4f676b7bb836c976c1d7e59a1052ae' }))), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
353
383
  }
354
384
  get host() { return index.getElement(this); }
355
385
  static get watchers() { return {
@@ -401,52 +431,58 @@ const PostIcon = class {
401
431
  validateScale() {
402
432
  index$1.checkEmptyOrType(this, 'scale', 'number');
403
433
  }
404
- // Construct the icon URL according to the following rules:
405
- // - URL = current domain + base[href] + meta[data-post-icon-base] (or component base)
406
- // - If base[href] is not relative, it's used instead of current domain + base[href]
407
- // - If meta[data-post-icon-base] (or component base) is not relative, it's used as is
434
+ /**
435
+ * Construct the icon URL according to the following rules:
436
+ * 1. `@base` (absolute URL) use directly.
437
+ * 2. `@base` (relative URL) resolve with `base href` and/or `origin`
438
+ * - If `base href` is absolute → use just that.
439
+ * - If `base href` is relative → prepend with `origin`.
440
+ * - If `base href` does not exist → use only `origin`.
441
+ * 3. `@meta` (absolute URL) → use directly.
442
+ * 4. `@meta` (relative URL) → resolve with `base href` and/or `origin`. (same as above)
443
+ * 5. `CDN_URL` fallback → `https://unpkg.com/...`.
444
+ **/
408
445
  getUrl() {
409
446
  const fileName = `${this.name}.svg`;
410
447
  if (!breakpoints.IS_BROWSER && !this.base) {
411
448
  return `${CDN_URL}${fileName}`;
412
449
  }
450
+ const isAbsolute = (url) => /^https?:\/\//.test(url);
451
+ const normalizeUrl = (url) => (url && !url.endsWith('/') ? `${url}/` : url);
452
+ const cleanUrl = (url) => url.replace(/([^:])\/\//g, '$1/');
413
453
  const currentDomain = breakpoints.IS_BROWSER ? window.location.origin : '';
414
454
  const baseHref = breakpoints.IS_BROWSER
415
455
  ? document.querySelector('base[href]')?.getAttribute('href') || ''
416
456
  : '';
417
- const isBaseHrefAbsolute = /^https?:\/\//.test(baseHref);
418
457
  const metaIconBase = breakpoints.IS_BROWSER
419
- ? document
420
- .querySelector('meta[name="design-system-settings"]')
421
- ?.getAttribute('data-post-icon-base') || ''
458
+ ? document.querySelector('meta[name="design-system-settings"]')?.getAttribute('data-post-icon-base') || ''
422
459
  : '';
423
- const iconBase = this.base || metaIconBase;
424
- const isIconBaseAbsolute = /^https?:\/\//.test(iconBase);
425
- const normalizedBaseHref = normalizeUrl(baseHref);
426
- const normalizedIconBase = normalizeUrl(iconBase);
427
- function normalizeUrl(url) {
428
- if (!url)
429
- return '';
430
- return url.endsWith('/') ? url : `${url}/`;
431
- }
460
+ // Function to build the first part of the URL when 'this.base' or 'metaIconBase' are relative
461
+ const buildUrlWithBase = (relativeUrl) => {
462
+ const normalizedHref = normalizeUrl(baseHref);
463
+ const normalizedRelative = normalizeUrl(relativeUrl);
464
+ if (isAbsolute(normalizedHref)) {
465
+ return `${normalizedHref}${normalizedRelative}`;
466
+ }
467
+ return `${currentDomain}${normalizedHref}${normalizedRelative}`;
468
+ };
432
469
  let url;
433
- if (isIconBaseAbsolute) {
434
- // If icon base is absolute, use it as is
435
- url = `${normalizedIconBase}${fileName}`;
436
- }
437
- else if (isBaseHrefAbsolute) {
438
- // If baseHref is absolute, don't use current domain
439
- url = `${normalizedBaseHref}${normalizedIconBase}${fileName}`;
470
+ // Highest Priority is this.base
471
+ if (this.base) {
472
+ url = isAbsolute(this.base)
473
+ ? `${normalizeUrl(this.base)}${fileName}`
474
+ : `${buildUrlWithBase(this.base)}${fileName}`;
475
+ return cleanUrl(url);
440
476
  }
441
- else if (iconBase || baseHref) {
442
- // Standard case: domain + baseHref + iconBase
443
- url = `${currentDomain}${normalizedBaseHref}${normalizedIconBase}${fileName}`;
444
- }
445
- else {
446
- // Fallback to CDN if no paths are specified
447
- url = `${CDN_URL}${fileName}`;
477
+ // Second Priority is metaIconBase
478
+ if (metaIconBase) {
479
+ url = isAbsolute(metaIconBase)
480
+ ? `${normalizeUrl(metaIconBase)}${fileName}`
481
+ : `${buildUrlWithBase(metaIconBase)}${fileName}`;
482
+ return cleanUrl(url);
448
483
  }
449
- return url.replace(/([^:])\/\//g, '$1/');
484
+ // Fallback to CDN
485
+ return cleanUrl(`${CDN_URL}${fileName}`);
450
486
  }
451
487
  getStyles() {
452
488
  const url = this.getUrl();
@@ -467,7 +503,7 @@ const PostIcon = class {
467
503
  this.validateAnimation();
468
504
  }
469
505
  render() {
470
- return (index.h(index.Host, { key: '3f90e071297fbca3c9ae7f0470c3deaf380f8a50', "data-version": _package.version }, index.h("span", { key: '4b22a88a80e0b329d65508321a9b63a38894fae8', style: this.getStyles() })));
506
+ return (index.h(index.Host, { key: '0031b3e2e4016f9b28cade66fa435741940946a7', "data-version": _package.version }, index.h("span", { key: '0efbcdd5f1dd737640238a0ab81b67ca8218adec', style: this.getStyles() })));
471
507
  }
472
508
  get host() { return index.getElement(this); }
473
509
  static get watchers() { return {
@@ -482,7 +518,7 @@ PostIcon.style = postIconCss;
482
518
 
483
519
  const SWITCH_VARIANTS = ['list', 'menu'];
484
520
 
485
- const postLanguageOptionCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}post-language-option{display:inline-block}post-language-option 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}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option button{background-color:ButtonFace !important}post-language-option button:hover{background-color:Highlight !important}}post-language-option button .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-language-option a{color:var(--post-current-fg);text-decoration:none}post-language-option :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-transform:uppercase}post-language-option :is(a,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}post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline-offset:-2px !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline-offset:-2px !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-language-option:where([variant=list]) :is(a,button){padding-inline:0;width:40px;height:40px;border-radius:2px}post-language-option:where([variant=list]) :is(a,button):hover{color:#504f4b}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option:where([variant=list]) :is(a,button){border:1px solid ButtonBorder;color:ButtonText}}post-language-option:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:#050400 !important;color:#fff;pointer-events:none}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:Highlight !important;color:HighlightText}}post-language-option:where([variant=menu]){min-width:72px}post-language-option:where([variant=menu])[active]:not([active=false]){display:none}post-language-option:where([variant=menu]) :is(a,button){padding-block:13px;padding-inline:16px;box-sizing:border-box;justify-content:flex-start;position:relative;border-radius:0}post-language-option:where([variant=menu]) :is(a,button):hover{color:#fff;background-color:#504f4b}post-language-option:where([variant=menu]):first-child :is(a,button){border-start-start-radius:4px;border-start-end-radius:4px}post-language-option:where([variant=menu]):last-child :is(a,button){border-end-start-radius:4px;border-end-end-radius:4px}";
521
+ const postLanguageOptionCss = "post-language-option{display:inline-block}post-language-option 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}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option button{background-color:ButtonFace !important}post-language-option button:hover{background-color:Highlight !important}}post-language-option button .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-language-option a{color:var(--post-current-fg);text-decoration:none}post-language-option :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-transform:uppercase}post-language-option :is(a,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}post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline-offset:-2px !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;outline-offset:-2px !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-language-option:where([variant=list]) :is(a,button){padding-inline:0;width:40px;height:40px;border-radius:2px}post-language-option:where([variant=list]) :is(a,button):hover{color:#504f4b}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option:where([variant=list]) :is(a,button){border:1px solid ButtonBorder;color:ButtonText}}post-language-option:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:#050400 !important;color:#fff;pointer-events:none}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:Highlight !important;color:HighlightText}}post-language-option:where([variant=menu]){min-width:72px}post-language-option:where([variant=menu])[active]:not([active=false]){display:none}post-language-option:where([variant=menu]) :is(a,button){padding-block:13px;padding-inline:16px;box-sizing:border-box;justify-content:flex-start;position:relative;border-radius:0}post-language-option:where([variant=menu]) :is(a,button):hover{color:#fff;background-color:#504f4b}post-language-option:where([variant=menu]):first-child :is(a,button){border-start-start-radius:4px;border-start-end-radius:4px}post-language-option:where([variant=menu]):last-child :is(a,button){border-end-start-radius:4px;border-end-end-radius:4px}";
486
522
 
487
523
  const PostLanguageOption = class {
488
524
  constructor(hostRef) {
@@ -528,13 +564,12 @@ const PostLanguageOption = class {
528
564
  }
529
565
  render() {
530
566
  const lang = this.code.toLowerCase();
531
- const role = this.variant === 'menu' ? 'menuitem' : undefined;
532
567
  const emitOnKeyDown = (e) => {
533
568
  if (e.key === 'Enter' || e.key === ' ') {
534
569
  this.emitChange();
535
570
  }
536
571
  };
537
- return (index.h(index.Host, { key: '565abb06373e341d429242f6d1943edfdb20f8d7', "data-version": _package.version }, this.url ? (index.h("a", { role: role, "aria-current": this.active ? 'page' : undefined, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, index.h("slot", null), index.h("span", { class: "visually-hidden" }, this.name))) : (index.h("button", { role: role, "aria-current": this.active ? 'true' : undefined, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, index.h("slot", null), index.h("span", { class: "visually-hidden" }, this.name)))));
572
+ return (index.h(index.Host, { key: 'b86bf33feb890e5dfbfae16f45ce2e56fdfaf16a', "data-version": _package.version, role: this.variant === 'list' ? 'listitem' : undefined }, this.url ? (index.h("a", { "aria-current": this.active ? 'page' : undefined, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, index.h("slot", null), index.h("span", { class: "visually-hidden" }, this.name))) : (index.h("button", { "aria-current": this.active ? 'true' : undefined, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, index.h("slot", null), index.h("span", { class: "visually-hidden" }, this.name)))));
538
573
  }
539
574
  get host() { return index.getElement(this); }
540
575
  static get watchers() { return {
@@ -620,14 +655,13 @@ const PostLanguageSwitch = class {
620
655
  updateChildrenVariant() {
621
656
  this.languageOptions.forEach(el => {
622
657
  el.setAttribute('variant', this.variant);
623
- el.setAttribute('role', this.variant == 'menu' ? 'menuitem' : 'listitem');
624
658
  });
625
659
  }
626
660
  renderList() {
627
661
  return (index.h(index.Host, { "data-version": _package.version }, index.h("div", { class: "post-language-switch-list", role: "list", "aria-label": this.caption, "aria-describedby": this.listSpanId }, index.h("span", { id: this.listSpanId, class: "visually-hidden" }, this.description), index.h("slot", null))));
628
662
  }
629
663
  renderDropdown() {
630
- return (index.h(index.Host, { "data-version": _package.version }, index.h("post-menu-trigger", { for: this.menuId }, index.h("button", { class: "post-language-switch-trigger" }, this.activeLang, index.h("span", { class: "visually-hidden" }, this.caption), index.h("span", { class: "visually-hidden" }, this.description), index.h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), index.h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", "aria-label": this.caption, role: "menu" }, index.h("slot", null))));
664
+ return (index.h(index.Host, { "data-version": _package.version }, index.h("post-menu-trigger", { for: this.menuId }, index.h("button", { class: "post-language-switch-trigger" }, this.activeLang, index.h("span", { class: "visually-hidden" }, this.caption), index.h("span", { class: "visually-hidden" }, this.description), index.h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), index.h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", label: this.caption }, index.h("slot", null))));
631
665
  }
632
666
  render() {
633
667
  return this.variant === 'list' ? this.renderList() : this.renderDropdown();
@@ -644,7 +678,7 @@ __decorate$2([
644
678
  ], PostLanguageSwitch.prototype, "handlePostChange", null);
645
679
  PostLanguageSwitch.style = postLanguageSwitchCss;
646
680
 
647
- const postListCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}post-list{display:flex;flex-direction:column;gap:var(--post-list-title-gap, 0)}post-list>[role=list]{display:flex;flex-direction:column;gap:var(--post-list-item-gap, 0)}post-list:where([horizontal]:not([horizontal=false])){flex-direction:row;align-items:center}post-list:where([horizontal]:not([horizontal=false]))>[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
681
+ const postListCss = "post-list{display:flex;flex-direction:column;gap:var(--post-list-title-gap, 0)}post-list>[role=list]{display:flex;flex-direction:column;gap:var(--post-list-item-gap, 0)}post-list:where([horizontal]:not([horizontal=false])){flex-direction:row;align-items:center}post-list:where([horizontal]:not([horizontal=false]))>[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
648
682
 
649
683
  const PostList = class {
650
684
  constructor(hostRef) {
@@ -673,7 +707,7 @@ const PostList = class {
673
707
  }
674
708
  }
675
709
  render() {
676
- return (index.h(index.Host, { key: '36b2afb0224903b411ca77257ab80d0a455bdf82', "data-version": _package.version }, index.h("div", { key: 'af0b3536d697097bc841a7ea50871fc69c230aee', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, index.h("slot", { key: '4e115aa68fdbb2c674065e7644f326e0990b4867' })), index.h("div", { key: '49c0032b0baca56af8015d457a2d134dc0a9d39b', role: "list", "aria-labelledby": this.titleId }, index.h("slot", { key: 'ec67e9a226b003c6f2e9aca019bef483fa22011e', name: "post-list-item" }))));
710
+ return (index.h(index.Host, { key: '908588a3f1261efbb85dbefade9f85f8ec6f16f8', "data-version": _package.version }, index.h("div", { key: '44b224379be814dab98e16ad12a3ca0f10e61ac0', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, index.h("slot", { key: '1aed36b7c286796a4d617643e7606e63bc2dd95a' })), index.h("div", { key: '3e1d137712b3e7616bab450426964f6c9334198e', role: "list", "aria-labelledby": this.titleId }, index.h("slot", { key: 'fd5abb2fca95d32295fbfa158795413264200ae8', name: "post-list-item" }))));
677
711
  }
678
712
  get host() { return index.getElement(this); }
679
713
  };
@@ -689,7 +723,7 @@ const PostListItem = class {
689
723
  this.host.setAttribute('slot', 'post-list-item');
690
724
  }
691
725
  render() {
692
- return (index.h(index.Host, { key: 'c6e5d38b3b01e37bb59cf31d64228e12dcd47bde', role: "listitem", slot: "post-list-item", version: _package.version }, index.h("slot", { key: '0e156cf6e671ff4835b0262ef44b9e4342e58b94' })));
726
+ return (index.h(index.Host, { key: '67204f0c31a6bc4cad3359030a8da57a045de7c5', role: "listitem", slot: "post-list-item", version: _package.version }, index.h("slot", { key: '0c68073c601a3792880fc0e68af24a4a204548ed' })));
693
727
  }
694
728
  get host() { return index.getElement(this); }
695
729
  };
@@ -716,7 +750,7 @@ const PostLogo = class {
716
750
  render() {
717
751
  const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
718
752
  const LogoTag = logoLink ? 'a' : 'span';
719
- return (index.h(index.Host, { key: 'd6279e660f4e48e1810a76cd7449a964908a327f', "data-version": _package.version }, index.h(LogoTag, { key: 'aa1c6764aafb74cd7c670cc5281f267df5e684e2', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, index.h("span", { key: 'ab4ab45ed0b58d309aef262335c2bfb12f42b5d6', class: "description" }, index.h("slot", { key: '4ddbcb53683853723b426a76b4614bee59d83777', onSlotchange: () => this.checkDescription() })), index.h("svg", { key: '2c78f3b6bb6364f5872032aeb32e29d315451c4d', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, index.h("g", { key: '8d02b5cf5b5f88f52dcf49c0d40f6153a3dc5714', id: "Logo" }, index.h("rect", { key: '18901557af215a699c6070638c21e7ad552c071a', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), index.h("polygon", { key: '56d26b229eb79d87ad41a8b1d8a98937150b1e6d', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), index.h("path", { key: 'f1a2f2083359e4204c8af9d1e75d27c8b50df480', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
753
+ return (index.h(index.Host, { key: 'acd3bfab8d395cde2d79066580a8e53e65c426f4', "data-version": _package.version }, index.h(LogoTag, { key: 'c5c2f8a2be6204bb693d5d53fd95e75133518a1d', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, index.h("span", { key: '675b756441237173c1046b74c2dfe2dfc08bfd7f', class: "description" }, index.h("slot", { key: '710fd3483f56ad353e1a99f4fff2acc78ee53b46', onSlotchange: () => this.checkDescription() })), index.h("svg", { key: 'e72b70e26da0fefd52a7e9aec41772dd5c9f0258', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, index.h("g", { key: 'b67d56c9319bb576a56c76c5299f4a81c93d6c3c', id: "Logo" }, index.h("rect", { key: '8c073060a51c5e6942c1b33fc5c2a3a7eb422f07', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), index.h("polygon", { key: 'f97840922aa977b0f74bc5e8a88ff99136c80e46', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), index.h("path", { key: 'f7faf347bb660e2a4550b48fc2d997ad01b2b8ae', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
720
754
  }
721
755
  get host() { return index.getElement(this); }
722
756
  static get watchers() { return {
@@ -725,7 +759,7 @@ const PostLogo = class {
725
759
  };
726
760
  PostLogo.style = postLogoCss;
727
761
 
728
- const postMainnavigationCss = "post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger 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;text-align:start}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px;outline-offset:-2px !important}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:\"\";mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:24px;width:24px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation>button,post-mainnavigation post-megadropdown-trigger button{border:1px solid ButtonBorder !important}post-mainnavigation>button:hover::after,post-mainnavigation>button[aria-expanded=true]::after,post-mainnavigation post-megadropdown-trigger button:hover::after,post-mainnavigation post-megadropdown-trigger button[aria-expanded=true]::after{color:HighlightText}}@media screen and (min-width: 1024px){post-mainnavigation{display:block;position:relative;height:var(--post-main-navigation-height, 0);background:#fff;user-select:none}post-mainnavigation nav{flex:1 1 auto;overflow:hidden;scroll-behavior:smooth}post-mainnavigation .scroll-control{cursor:pointer;position:absolute;inset-block:0;z-index:5;padding:16px;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}post-mainnavigation .scroll-control.scroll-left{inset-inline-start:0}post-mainnavigation .scroll-control.scroll-right{inset-inline-end:0}post-mainnavigation .scroll-control.d-none{display:none}post-mainnavigation .scroll-control post-icon{font-size:1rem}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--post-main-navigation-height, 0);gap:4px;font-size:16px;z-index:4}}@media screen and (min-width: 1024px)and (max-width: 1023.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{z-index:5}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-active,post-mainnavigation post-list-item>button .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;inset-inline-start:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-mainnavigation post-list-item>a.selected .nav-el-active,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.selected .nav-el-active,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.selected .nav-el-inactive,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item>button.selected .nav-el-inactive,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(.btn-icon-close),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(.btn-icon-close)::before,post-mainnavigation post-megadropdown a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close).selected,post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-expanded=true],post-mainnavigation post-megadropdown a.selected,post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .scroll-control{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}";
762
+ const postMainnavigationCss = "post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger 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;text-align:start}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px;outline-offset:-2px !important}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:\"\";mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:24px;width:24px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation>button,post-mainnavigation post-megadropdown-trigger button{border:1px solid ButtonBorder !important}post-mainnavigation>button:hover::after,post-mainnavigation>button[aria-expanded=true]::after,post-mainnavigation post-megadropdown-trigger button:hover::after,post-mainnavigation post-megadropdown-trigger button[aria-expanded=true]::after{color:HighlightText}}@media screen and (min-width: 1024px){post-mainnavigation{display:flex;overflow:hidden;height:var(--post-main-navigation-height, 0);background:#fff;user-select:none}post-mainnavigation nav{flex:1 1 auto;overflow:hidden;scroll-behavior:smooth}post-mainnavigation .scroll-control{cursor:pointer;z-index:5;padding:1rem;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}post-mainnavigation .scroll-control.scroll-left{margin-inline-end:-3rem}post-mainnavigation .scroll-control.scroll-right{margin-inline-start:-3rem}post-mainnavigation .scroll-control.d-none{display:none}post-mainnavigation .scroll-control post-icon{font-size:1rem}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--post-main-navigation-height, 0);gap:4px;font-size:16px;z-index:4}}@media screen and (min-width: 1024px)and (max-width: 1023.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{z-index:5}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-active,post-mainnavigation post-list-item>button .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;inset-inline-start:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a.active,post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *),post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.active,post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *),post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *),post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-mainnavigation post-list-item>a.active .nav-el-active,post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.active .nav-el-active,post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button.active .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *) .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.active .nav-el-inactive,post-mainnavigation post-list-item>a[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item>button.active .nav-el-inactive,post-mainnavigation post-list-item>button[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button.active .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page]:not(post-megadropdown *) .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(:is(post-closebutton *))::before,post-mainnavigation post-megadropdown a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)).active,post-mainnavigation post-megadropdown button:not(:is(post-closebutton *))[aria-current=page],post-mainnavigation post-megadropdown button:not(:is(post-closebutton *))[aria-expanded=true],post-mainnavigation post-megadropdown a.active,post-mainnavigation post-megadropdown a[aria-current=page],post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(:is(post-closebutton *)):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .scroll-control{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-list-item>a.active,post-mainnavigation post-list-item>a[aria-current=page],post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.active,post-mainnavigation post-list-item>button[aria-current=page],post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-current=page],post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}";
729
763
 
730
764
  const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
731
765
  const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar interactions during scrolling
@@ -870,12 +904,12 @@ const PostMainnavigation = class {
870
904
  }, NAVBAR_DISABLE_DURATION);
871
905
  }
872
906
  render() {
873
- return (index.h(index.Host, { key: '94f9013416e0f22f7a571217495526cc03ed324b', slot: "post-mainnavigation", version: _package.version }, index.h("div", { key: 'b82f1577a2a35adf39afbf8120f2a98b669048f0', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, index.h("post-icon", { key: '6a83d6c33cd178eb415ef4e4a2f61af4869e03ae', "aria-hidden": "true", name: "chevronleft" })), index.h("nav", { key: '0ef8a3dd934e9de55099be6d10a8e8f8d7d3378b', ref: el => (this.navbar = el) }, index.h("slot", { key: '08191f7821e57ed7d516b79bd42a0c79f7d40d34' })), index.h("div", { key: 'b957afc9c60702dfc51ff33fa6fd2084db3cb3e8', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, index.h("post-icon", { key: 'c9ef19c1234443a51a32ffc380ff7247f3f22e08', "aria-hidden": "true", name: "chevronright" }))));
907
+ return (index.h(index.Host, { key: '04ae6ffdd6560113431b70c3c27f16057fc9a87d', slot: "post-mainnavigation", version: _package.version }, index.h("div", { key: '2f79728dcbbfe94a343b880e2ba07331f45c9f30', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, index.h("post-icon", { key: '3e762484bbcd03ac0d67b4ab722ffcd862bb073e', "aria-hidden": "true", name: "chevronleft" })), index.h("nav", { key: '1150bfdf724e4d93b45f1fff071fba56d31d15b5', ref: el => (this.navbar = el) }, index.h("slot", { key: '3496b7c6d2d75300b1727148ff9b9965717d9909' })), index.h("div", { key: '1fa6dd50d9650ab6e5047c607f7e5ed0416ed245', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, index.h("post-icon", { key: '9487d621e1d7289a0afeb1d0443ec8bc70cd5f3e', "aria-hidden": "true", name: "chevronright" }))));
874
908
  }
875
909
  };
876
910
  PostMainnavigation.style = postMainnavigationCss;
877
911
 
878
- const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;width:100%;inset-block-start:100%;inset-inline-start:0;border-radius:0}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:5;position:fixed;inset-block-start:var(--post-header-navigation-current-inset);inset-inline:0;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));border-block-start:unset;overflow-y:auto;overscroll-behavior:contain}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}@media screen and (min-width: 1024px){.megadropdown-container{max-height:calc(100vh - var(--post-header-height) - 48px);overflow-y:auto}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{display:flex;flex-direction:column;width:inherit;padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-block:0 8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-block:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:16px 12px 14px 8px}.megadropdown post-list .list-title h3:not(:has(a)){position:relative}.megadropdown post-list .list-title h3:not(:has(a))::before{content:\"\";background-color:#050400;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;position:absolute}.megadropdown post-list .list-title h3 a{border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown post-list .list-title h3 a.selected,.megadropdown post-list .list-title h3 a[aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown post-list .list-title h3 a:hover{background-color:#504f4b;color:#fff}.megadropdown post-list .list-title h3 a:hover::before{background-color:#504f4b}.megadropdown post-list .list-title h3 a::before{height:2px}@media screen and (max-width: 1023.98px){.megadropdown post-list .list-title h3{font-size:1rem}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:14px 12px 12px 8px}}@media screen and (max-width: 599.98px){.megadropdown post-list .list-title h3{font-size:.875rem}}.megadropdown post-list-item>a{padding-block:13px 12px;padding-inline-start:8px;display:flex;text-decoration:none;width:100%;min-width:100%;height:auto;min-height:48px;white-space:normal;word-break:break-word}.megadropdown post-list-item>a:hover{border-block-width:0}@media screen and (min-width: 1024px){.megadropdown post-list-item>a{font-size:1.25rem}}@media screen and (max-width: 1023.98px){.megadropdown post-list-item>a{padding-block:12px 11px}}@media screen and (max-width: 599.98px){.megadropdown post-list-item>a{font-size:.875rem}}.megadropdown .back-button{display:none;margin-block-end:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.98px){.megadropdown .back-button{order:-1;display:block}}.megadropdown .close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}";
912
+ const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;width:100%;inset-block-start:100%;inset-inline-start:0;border-radius:0}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:5;position:fixed;inset-block-start:var(--post-header-navigation-current-inset);inset-inline:0;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));border-block-start:unset;overflow-y:auto;overscroll-behavior:contain}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}@media screen and (min-width: 1024px){.megadropdown-container{max-height:calc(100vh - var(--post-header-height) - 48px);overflow-y:auto}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{display:flex;flex-direction:column;width:inherit;padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-block:0 8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-block:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:16px 12px 14px 8px}.megadropdown post-list .list-title h3:not(:has(a)){position:relative}.megadropdown post-list .list-title h3:not(:has(a))::before{content:\"\";background-color:#050400;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;position:absolute}.megadropdown post-list .list-title h3 a{border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown post-list .list-title h3 a.active,.megadropdown post-list .list-title h3 a[aria-current=page],.megadropdown post-list .list-title h3 a[aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown post-list .list-title h3 a:hover{background-color:#504f4b;color:#fff}.megadropdown post-list .list-title h3 a:hover::before{background-color:#504f4b}.megadropdown post-list .list-title h3 a::before{height:2px}@media screen and (max-width: 1023.98px){.megadropdown post-list .list-title h3{font-size:1rem}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:14px 12px 12px 8px}}@media screen and (max-width: 599.98px){.megadropdown post-list .list-title h3{font-size:.875rem}}.megadropdown post-list-item>a{padding-block:13px 12px;padding-inline-start:8px;display:flex;text-decoration:none;width:100%;min-width:100%;height:auto;min-height:48px;white-space:normal;word-break:break-word}.megadropdown post-list-item>a:hover{border-block-width:0}@media screen and (min-width: 1024px){.megadropdown post-list-item>a{font-size:1.25rem}}@media screen and (max-width: 1023.98px){.megadropdown post-list-item>a{padding-block:12px 11px}}@media screen and (max-width: 599.98px){.megadropdown post-list-item>a{font-size:.875rem}}.megadropdown .back-button{display:none;margin-block-end:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.98px){.megadropdown .back-button{order:-1;display:block}}.megadropdown .close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}";
879
913
 
880
914
  const PostMegadropdown = class {
881
915
  constructor(hostRef) {
@@ -888,6 +922,7 @@ const PostMegadropdown = class {
888
922
  * and updates automatically when the dropdown is toggled.
889
923
  */
890
924
  this.isVisible = false;
925
+ this.trigger = false;
891
926
  /** Holds the current animation class. */
892
927
  this.animationClass = null;
893
928
  this.handleClickOutside = (event) => {
@@ -909,11 +944,20 @@ const PostMegadropdown = class {
909
944
  this.hide(false);
910
945
  };
911
946
  }
912
- breakpointChange(e) {
913
- this.device = e.detail;
914
- if (this.device === 'desktop' && this.isVisible) {
915
- this.animationClass = null;
916
- }
947
+ get megadropdownTrigger() {
948
+ const hostId = this.host.getAttribute('id');
949
+ return hostId ? document.querySelector(`post-megadropdown-trigger[for="${hostId}"] > button`) : null;
950
+ }
951
+ connectedCallback() {
952
+ window.addEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
953
+ }
954
+ componentDidRender() {
955
+ this.getFocusableElements();
956
+ }
957
+ componentDidLoad() {
958
+ this.checkInitialAriaCurrent();
959
+ this.setupObserver();
960
+ this.handleAriaCurrentChange([]);
917
961
  }
918
962
  disconnectedCallback() {
919
963
  this.removeListeners();
@@ -921,9 +965,7 @@ const PostMegadropdown = class {
921
965
  if (PostMegadropdown.activeDropdown === this) {
922
966
  PostMegadropdown.activeDropdown = null;
923
967
  }
924
- }
925
- componentWillRender() {
926
- this.getFocusableElements();
968
+ this.defaultSlotObserver.disconnect();
927
969
  }
928
970
  /**
929
971
  * Toggles the dropdown visibility based on its current state.
@@ -972,8 +1014,11 @@ const PostMegadropdown = class {
972
1014
  async focusFirst() {
973
1015
  this.firstFocusableEl?.focus();
974
1016
  }
975
- connectedCallback() {
976
- window.addEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
1017
+ breakpointChange(e) {
1018
+ this.device = e.detail;
1019
+ if (this.device === 'desktop' && this.isVisible) {
1020
+ this.animationClass = null;
1021
+ }
977
1022
  }
978
1023
  /**
979
1024
  * Forces the dropdown to close without animation.
@@ -1030,9 +1075,59 @@ const PostMegadropdown = class {
1030
1075
  }
1031
1076
  }
1032
1077
  }
1078
+ /**
1079
+ * Sets up a MutationObserver on the host to watch for changes
1080
+ * in `aria-current` attributes.
1081
+ */
1082
+ setupObserver() {
1083
+ const config = {
1084
+ subtree: true,
1085
+ attributes: true,
1086
+ attributeFilter: ['aria-current'],
1087
+ };
1088
+ this.defaultSlotObserver = new MutationObserver(this.handleAriaCurrentChange.bind(this));
1089
+ this.defaultSlotObserver.observe(this.host, config);
1090
+ }
1091
+ /**
1092
+ * Adds or removes the 'active' class on the megadropdown trigger button
1093
+ * based on the active state.
1094
+ *
1095
+ * @param isActive - Whether the trigger should appear active
1096
+ */
1097
+ setTriggerActive(isActive) {
1098
+ const trigger = this.megadropdownTrigger;
1099
+ if (!trigger)
1100
+ return;
1101
+ if (isActive) {
1102
+ trigger.classList.add('active');
1103
+ }
1104
+ else {
1105
+ trigger.classList.remove('active');
1106
+ }
1107
+ }
1108
+ /**
1109
+ * Updates the megadropdown trigger state when the megadropdown content changes.
1110
+ * Checks if any element inside the megadropdown has `aria-current="page"`
1111
+ * and sets the trigger as active accordingly.
1112
+ */
1113
+ handleAriaCurrentChange(mutations) {
1114
+ if (!mutations.length)
1115
+ return;
1116
+ const hasCurrentPage = mutations.some(m => m.target instanceof HTMLElement && m.target.getAttribute('aria-current') === 'page');
1117
+ this.setTriggerActive(hasCurrentPage);
1118
+ }
1119
+ /**
1120
+ * Checks on initialization if any element inside the megadropdown
1121
+ * has `aria-current="page"` and sets the trigger as active if so.
1122
+ */
1123
+ checkInitialAriaCurrent() {
1124
+ const hasCurrentPage = this.host.querySelector('[aria-current="page"]');
1125
+ if (hasCurrentPage)
1126
+ this.setTriggerActive(true);
1127
+ }
1033
1128
  render() {
1034
1129
  const containerStyle = this.isVisible ? {} : { display: 'none' };
1035
- return (index.h(index.Host, { key: 'b322cf2da9bc8f494045644e5a97e98195eae223', version: _package.version }, index.h("div", { key: '6c17be4d41d19b5043736b588468b8e1def70f11', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, index.h("div", { key: 'ba33f5c97239fcd7212cb435bfdd64a79b7910d7', class: "megadropdown" }, index.h("slot", { key: '0148730fada5d623b11071b69f9972013fbbcbce', name: "megadropdown-title" }), index.h("div", { key: '536c1b795d8a2e16ad9a105bd3db98cd9abfc0d6', class: "megadropdown-content" }, index.h("slot", { key: '3f66bfd1661ea42c938a31af6ceb8d1f1bbdbcd0' })), index.h("div", { key: '2f240c7264663fe6d1877e582a33b599ae137219', onClick: () => this.hide(true), class: "back-button" }, index.h("slot", { key: '0ad90d939722d07809fb9ea96ab2bb091ef78c1c', name: "back-button" })), index.h("div", { key: '1d038e119522ca98cc3ab4cdba178b87febcedb4', onClick: () => this.hide(true), class: "close-button" }, index.h("slot", { key: 'b4e3dd20b8e14291261b5b7939fadd6a8927c0a2', name: "close-button" }))))));
1130
+ return (index.h(index.Host, { key: '40023f8684db4cfff78f69d2d5786e4c3a0332b4', version: _package.version }, index.h("div", { key: '986f114148d355b7a6e92c19d1c02c925eb27fce', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, index.h("div", { key: 'c14d01be681f596148d39f272375615eafdf25c0', class: "megadropdown" }, index.h("slot", { key: '5f60ff26e694c107c569e06d30e18a5940d3e7b1', name: "megadropdown-title" }), index.h("div", { key: '49202a8a0dcebc086220db637cf25d96510b6eac', class: "megadropdown-content" }, index.h("slot", { key: '98593b2824d21f065b4c183c8980d94136b175bf' })), index.h("div", { key: 'ed1dfbbebd101a98153657007f8037c0282b47ef', onClick: () => this.hide(true), class: "back-button" }, index.h("slot", { key: '4e737d72e77271cb025976ae5e5fe4d5f653480a', name: "back-button" })), index.h("div", { key: '0bf1316c091efbf294be89efeebae7937c013b29', onClick: () => this.hide(true), class: "close-button" }, index.h("slot", { key: '594a412944fff3fee09639b85cc13a9291b96a10', name: "close-button" }))))));
1036
1131
  }
1037
1132
  get host() { return index.getElement(this); }
1038
1133
  };
@@ -1135,7 +1230,7 @@ const PostMegadropdownTrigger = class {
1135
1230
  document.removeEventListener('postToggleMegadropdown', this.handleToggleMegadropdown);
1136
1231
  }
1137
1232
  render() {
1138
- return (index.h(index.Host, { key: '315c957a6cf876da48209096b9f30a7d94e72c08', "data-version": _package.version, "tab-index": "-1" }, index.h("button", { key: '2533ded6277d2cf97c0c108df49823833486b4de' }, index.h("slot", { key: 'bf9b18545e11b30eb40d351794ca104035ed47db' }))));
1233
+ return (index.h(index.Host, { key: 'a817027c84bb4a3418807ccbb200d36190e03d6f', "data-version": _package.version, "tab-index": "-1" }, index.h("button", { key: '1e560734f4a5f742a9efa2bff6833c1ae3e11117' }, index.h("slot", { key: '42bf1a30f432b1fcf8e0fec1cd1d499126623234' }))));
1139
1234
  }
1140
1235
  get host() { return index.getElement(this); }
1141
1236
  static get watchers() { return {
@@ -1147,7 +1242,7 @@ __decorate$1([
1147
1242
  ], PostMegadropdownTrigger.prototype, "handleToggleMegadropdown", void 0);
1148
1243
  PostMegadropdownTrigger.style = postMegadropdownTriggerCss;
1149
1244
 
1150
- const postMenuCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{display:block}:where([part=menu]){display:flex;flex-direction:column;padding-block:.5rem}";
1245
+ const postMenuCss = ":host{display:block}:where([part=menu]){display:flex;flex-direction:column;padding-block:.5rem}::slotted([slot=header]){margin-top:-0.5rem;padding:1rem;display:flex;align-items:center;gap:.5rem;border-block-end:1px solid #050400;font-weight:700}@media screen and (max-width: 1023.98px){::slotted([slot=header]){padding:.75rem 1rem}}@media screen and (max-width: 779.98px){::slotted([slot=header]){padding:.5rem 1rem}}";
1151
1246
 
1152
1247
  var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
1153
1248
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -1197,18 +1292,32 @@ const PostMenu = class {
1197
1292
  }
1198
1293
  };
1199
1294
  this.handlePostToggle = (event) => {
1200
- this.isVisible = event.detail;
1295
+ this.isVisible = event.detail.isOpen;
1201
1296
  this.toggleMenu.emit(this.isVisible);
1202
1297
  requestAnimationFrame(() => {
1203
1298
  if (this.isVisible) {
1204
1299
  this.lastFocusedElement = this.root?.activeElement;
1205
1300
  const menuItems = this.getSlottedItems();
1206
- if (menuItems.length > 0) {
1207
- menuItems[0].focus();
1301
+ if (event.detail.first) {
1302
+ if (menuItems.length > 0) {
1303
+ // Add role="menu" to the popovercontainer
1304
+ this.host.setAttribute('role', 'menu');
1305
+ // Add role="menuitem" to the focusable elements
1306
+ menuItems.forEach(item => {
1307
+ item.setAttribute('role', 'menuitem');
1308
+ });
1309
+ // Add aria-label to the menu
1310
+ if (this.label)
1311
+ this.host.setAttribute('aria-label', this.label);
1312
+ }
1208
1313
  }
1314
+ menuItems[0].focus();
1209
1315
  }
1210
1316
  else if (this.lastFocusedElement) {
1211
- this.lastFocusedElement.focus();
1317
+ setTimeout(() => {
1318
+ // This timeout is added for NVDA to announce the menu as collapsed
1319
+ this.lastFocusedElement.focus();
1320
+ }, 0);
1212
1321
  }
1213
1322
  });
1214
1323
  };
@@ -1222,6 +1331,9 @@ const PostMenu = class {
1222
1331
  validatePlacement() {
1223
1332
  index$1.checkEmptyOrOneOf(this, 'placement', placement.PLACEMENT_TYPES);
1224
1333
  }
1334
+ validateLabel() {
1335
+ index$1.checkRequiredAndType(this, 'label', 'string');
1336
+ }
1225
1337
  connectedCallback() {
1226
1338
  this.root = getRoot.getRoot(this.host);
1227
1339
  this.host.addEventListener('keydown', this.handleKeyDown);
@@ -1234,6 +1346,7 @@ const PostMenu = class {
1234
1346
  }
1235
1347
  componentDidLoad() {
1236
1348
  this.validatePlacement();
1349
+ this.validateLabel();
1237
1350
  if (this.popoverRef) {
1238
1351
  this.popoverRef.addEventListener('postToggle', this.handlePostToggle);
1239
1352
  }
@@ -1310,8 +1423,9 @@ const PostMenu = class {
1310
1423
  }
1311
1424
  }
1312
1425
  getSlottedItems() {
1313
- const slot = this.host.shadowRoot.querySelector('slot');
1314
- const slottedElements = slot ? slot.assignedElements() : [];
1426
+ const slot = this.host.shadowRoot.querySelectorAll('slot');
1427
+ const slottedElements = [];
1428
+ slot.forEach(slotItem => slottedElements.push(...slotItem.assignedElements()));
1315
1429
  return (slottedElements
1316
1430
  // If the element is a slot, get the assigned elements
1317
1431
  .flatMap(el => (el instanceof HTMLSlotElement ? el.assignedElements() : el))
@@ -1319,11 +1433,12 @@ const PostMenu = class {
1319
1433
  .flatMap(el => Array.from(getFocusableChildren(el))));
1320
1434
  }
1321
1435
  render() {
1322
- return (index.h(index.Host, { key: 'ee365a30646247563fccd55556f7667cb1591d02', "data-version": _package.version, role: "menu" }, index.h("post-popovercontainer", { key: 'c649841d408d3f35dfed959cdc6b041163ff80d3', placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: '9f4f145b80c716d27dc51f4bcb0d269b2b2678a8', part: "menu" }, index.h("slot", { key: '72b53c8f154a4a91541799a789e8618a8d1a9c2c' })))));
1436
+ return (index.h(index.Host, { key: 'd98d7b0a1c607732ab12c94f8d872408a053c19b', "data-version": _package.version }, index.h("post-popovercontainer", { key: '669e6062e5ff0dfac0d311cc8fdd0bb51735aac1', placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: '6bc1abb7b764e9e6985a839904ed5575ea20a519', part: "menu" }, index.h("slot", { key: '6b8670f2e80ed93761797b9161ddf54bb88f73ec', name: "header" }), index.h("slot", { key: '971f39ae63f22a503e36aeecb67575304ce14248' })))));
1323
1437
  }
1324
1438
  get host() { return index.getElement(this); }
1325
1439
  static get watchers() { return {
1326
- "placement": ["validatePlacement"]
1440
+ "placement": ["validatePlacement"],
1441
+ "label": ["validateLabel"]
1327
1442
  }; }
1328
1443
  };
1329
1444
  __decorate([
@@ -1406,7 +1521,7 @@ const PostMenuTrigger = class {
1406
1521
  }
1407
1522
  }
1408
1523
  render() {
1409
- return (index.h(index.Host, { key: '76b3c59cdae5c78cefaaf1ea2a9668a77bddd37e', "data-version": _package.version, "tab-index": "-1" }, index.h("slot", { key: '3835d87c3795e694f7493ceb735bd638bdd2dea1' })));
1524
+ return (index.h(index.Host, { key: 'e4ab1c0cd7227b83994cbd74f2bb3fe88c48126e', "data-version": _package.version, "tab-index": "-1" }, index.h("slot", { key: '9c5aa5d42457f6716c7607b50b5453cdce8d50d0' })));
1410
1525
  }
1411
1526
  get host() { return index.getElement(this); }
1412
1527
  static get watchers() { return {
@@ -4104,12 +4219,28 @@ function apply() {
4104
4219
  injectStyles(document);
4105
4220
  }
4106
4221
 
4107
- const postPopovercontainerCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:where(post-popovercontainer)>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}:where(post-popovercontainer)>div.animate-pop-in{animation:popIn .25s ease-out forwards}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(post-popovercontainer)>div{border:2px solid rgba(0,0,0,0)}}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer)[safe-space]::after{content:\"\";position:fixed;inset:0;z-index:-1;pointer-events:auto}:where(post-popovercontainer)[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)))}:where(post-popovercontainer)[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)))}:where(post-popovercontainer):not(:has(.arrow))>div{box-shadow:var(--post-device-elevation-300)}:where(post-popovercontainer):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))}:where(post-popovercontainer):has(.arrow.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))}:where(post-popovercontainer):has(.arrow.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))}:where(post-popovercontainer):has(.arrow.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))}:where(post-popovercontainer) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}";
4222
+ const duration = 250;
4223
+ const easing = 'ease-out';
4224
+ function popIn(el) {
4225
+ if (!el)
4226
+ return;
4227
+ return el.animate([
4228
+ { transform: 'scale(0.9)', opacity: 0 },
4229
+ { transform: 'scale(1)', opacity: 1 },
4230
+ ], {
4231
+ duration,
4232
+ easing,
4233
+ fill: 'forwards',
4234
+ });
4235
+ }
4236
+
4237
+ const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:where(post-popovercontainer)>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}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(post-popovercontainer)>div{border:2px solid rgba(0,0,0,0)}}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer)[safe-space]::after{content:\"\";position:fixed;inset:0;z-index:-1;pointer-events:auto}:where(post-popovercontainer)[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)))}:where(post-popovercontainer)[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)))}:where(post-popovercontainer):not(:has(.arrow))>div{box-shadow:var(--post-device-elevation-300)}:where(post-popovercontainer):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))}:where(post-popovercontainer):has(.arrow.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))}:where(post-popovercontainer):has(.arrow.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))}:where(post-popovercontainer):has(.arrow.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))}:where(post-popovercontainer) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}";
4108
4238
 
4109
4239
  const PostPopovercontainer = class {
4110
4240
  constructor(hostRef) {
4111
4241
  index.registerInstance(this, hostRef);
4112
4242
  this.postToggle = index.createEvent(this, "postToggle");
4243
+ this.firstOpen = true;
4113
4244
  /**
4114
4245
  * Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
4115
4246
  * Popovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted
@@ -4209,9 +4340,19 @@ const PostPopovercontainer = class {
4209
4340
  this.toggleTimeoutId = window.setTimeout(() => (this.toggleTimeoutId = null), 10);
4210
4341
  const isOpen = e.newState === 'open';
4211
4342
  if (isOpen) {
4343
+ const content = this.host.querySelector('.popover-content');
4212
4344
  this.startAutoupdates();
4345
+ if (content && this.animation === 'pop-in') {
4346
+ popIn(content);
4347
+ }
4213
4348
  if (this.safeSpace)
4214
4349
  window.addEventListener('mousemove', this.mouseTrackingHandler.bind(this));
4350
+ // Emit event with `first` flag only true on the first open
4351
+ if (this.firstOpen) {
4352
+ this.postToggle.emit({ isOpen, first: this.firstOpen });
4353
+ this.firstOpen = false;
4354
+ return;
4355
+ }
4215
4356
  }
4216
4357
  else {
4217
4358
  if (typeof this.clearAutoUpdate === 'function')
@@ -4219,7 +4360,7 @@ const PostPopovercontainer = class {
4219
4360
  if (this.safeSpace)
4220
4361
  window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
4221
4362
  }
4222
- this.postToggle.emit(isOpen);
4363
+ this.postToggle.emit({ isOpen: isOpen, first: false });
4223
4364
  }
4224
4365
  /**
4225
4366
  * Start listening for DOM updates, scroll events etc. that have
@@ -4350,10 +4491,9 @@ const PostPopovercontainer = class {
4350
4491
  }
4351
4492
  }
4352
4493
  render() {
4353
- const animationClass = this.animation ? `animate-${this.animation}` : '';
4354
- return (index.h(index.Host, { key: '357f53696ca28ab2c137d47e2192038dc756c289', "data-version": _package.version, popover: this.manualClose ? 'manual' : 'auto' }, index.h("div", { key: '9c40bdc5034ccf14157ee1ae8ce33fe58a9049e4', class: animationClass }, this.arrow && (index.h("span", { key: '6133ab54aaea6f198560ca5cb30f5604318203f6', class: "arrow", ref: el => {
4494
+ return (index.h(index.Host, { key: '493d032d16ace815b6c031e77dbcc673f26d149b', "data-version": _package.version, popover: this.manualClose ? 'manual' : 'auto' }, index.h("div", { key: '97bb357cada0456b3aa458e12768d9ad5458ef24', class: "popover-content" }, this.arrow && (index.h("span", { key: 'f5f2256470edad5a8ca89c32b3a44ef0fe388eea', class: "arrow", ref: el => {
4355
4495
  this.arrowRef = el;
4356
- } })), index.h("slot", { key: '39f53833a3f570b2c8807a5903b531c6733b0ada' }))));
4496
+ } })), index.h("slot", { key: 'f259b6ad624cf392e0d41026b4eab586009cb3c7' }))));
4357
4497
  }
4358
4498
  get host() { return index.getElement(this); }
4359
4499
  static get watchers() { return {
@@ -4410,7 +4550,7 @@ const PostTogglebutton = class {
4410
4550
  this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
4411
4551
  }
4412
4552
  render() {
4413
- return (index.h(index.Host, { key: '1cebe1d1314e2c89f141869e07521e7f30e58617', "data-version": _package.version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, index.h("slot", { key: '8b8c33befde8e93eca73a6239170c3786e2cf2f2' })));
4553
+ return (index.h(index.Host, { key: '190c53c4bbada662698addcb288bcb50a8d179b3', "data-version": _package.version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, index.h("slot", { key: '544bf7d937386a6e65be75e249f3dcc080054d74' })));
4414
4554
  }
4415
4555
  get host() { return index.getElement(this); }
4416
4556
  };