@nanoporetech-digital/components 6.1.0 → 6.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (286) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/dist/cjs/index-14451c95.js +6 -2
  3. package/dist/cjs/loader.cjs.js +1 -1
  4. package/dist/cjs/nano-alert.cjs.entry.js +1 -1
  5. package/dist/cjs/nano-animation.cjs.entry.js +1209 -0
  6. package/dist/cjs/nano-animation.cjs.entry.js.map +1 -0
  7. package/dist/cjs/nano-components.cjs.js +1 -1
  8. package/dist/cjs/nano-dialog.cjs.entry.js +22 -5
  9. package/dist/cjs/nano-dialog.cjs.entry.js.map +1 -1
  10. package/dist/cjs/nano-drawer.cjs.entry.js +1 -1
  11. package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js.map +1 -1
  12. package/dist/cjs/nano-hero.cjs.entry.js +1 -1
  13. package/dist/cjs/nano-hero.cjs.entry.js.map +1 -1
  14. package/dist/cjs/nano-intersection-observe.cjs.entry.js +131 -0
  15. package/dist/cjs/nano-intersection-observe.cjs.entry.js.map +1 -0
  16. package/dist/cjs/nano-resize-observe_2.cjs.entry.js +1 -1
  17. package/dist/cjs/nano-resize-observe_2.cjs.entry.js.map +1 -1
  18. package/dist/cjs/nano-sticker.cjs.entry.js +2 -27
  19. package/dist/cjs/nano-sticker.cjs.entry.js.map +1 -1
  20. package/dist/cjs/nano-tab-group.cjs.entry.js +3 -4
  21. package/dist/cjs/nano-tab-group.cjs.entry.js.map +1 -1
  22. package/dist/cjs/{nano-table-6f48a747.js → nano-table-9f615d5c.js} +5 -25
  23. package/dist/cjs/nano-table-9f615d5c.js.map +1 -0
  24. package/dist/cjs/nano-table.cjs.entry.js +2 -1
  25. package/dist/cjs/nano-table.cjs.entry.js.map +1 -1
  26. package/dist/cjs/{scroll-e8c21f80.js → scroll-4e95debb.js} +40 -3
  27. package/dist/cjs/scroll-4e95debb.js.map +1 -0
  28. package/dist/cjs/scroll-parent-87393de2.js +31 -0
  29. package/dist/cjs/scroll-parent-87393de2.js.map +1 -0
  30. package/dist/cjs/{table.worker-f3e54773.js → table.worker-6b65a9ea.js} +3 -2
  31. package/dist/cjs/table.worker-6b65a9ea.js.map +1 -0
  32. package/dist/cjs/transitions-20fce787.js.map +1 -1
  33. package/dist/collection/collection-manifest.json +2 -1
  34. package/dist/collection/components/animation/animation.js +547 -0
  35. package/dist/collection/components/animation/animation.js.map +1 -0
  36. package/dist/collection/components/animation/animations/attention_seekers/bounce.js +43 -0
  37. package/dist/collection/components/animation/animations/attention_seekers/flash.js +7 -0
  38. package/dist/collection/components/animation/animations/attention_seekers/headShake.js +8 -0
  39. package/dist/collection/components/animation/animations/attention_seekers/heartBeat.js +7 -0
  40. package/dist/collection/components/animation/animations/attention_seekers/jello.js +15 -0
  41. package/dist/collection/components/animation/animations/attention_seekers/pulse.js +5 -0
  42. package/dist/collection/components/animation/animations/attention_seekers/rubberBand.js +9 -0
  43. package/dist/collection/components/animation/animations/attention_seekers/shake.js +13 -0
  44. package/dist/collection/components/animation/animations/attention_seekers/shakeX.js +13 -0
  45. package/dist/collection/components/animation/animations/attention_seekers/shakeY.js +13 -0
  46. package/dist/collection/components/animation/animations/attention_seekers/swing.js +7 -0
  47. package/dist/collection/components/animation/animations/attention_seekers/tada.js +13 -0
  48. package/dist/collection/components/animation/animations/attention_seekers/wobble.js +18 -0
  49. package/dist/collection/components/animation/animations/back_entrances/backInDown.js +5 -0
  50. package/dist/collection/components/animation/animations/back_entrances/backInLeft.js +5 -0
  51. package/dist/collection/components/animation/animations/back_entrances/backInRight.js +5 -0
  52. package/dist/collection/components/animation/animations/back_entrances/backInUp.js +5 -0
  53. package/dist/collection/components/animation/animations/back_exits/backOutDown.js +5 -0
  54. package/dist/collection/components/animation/animations/back_exits/backOutLeft.js +5 -0
  55. package/dist/collection/components/animation/animations/back_exits/backOutRight.js +5 -0
  56. package/dist/collection/components/animation/animations/back_exits/backOutUp.js +5 -0
  57. package/dist/collection/components/animation/animations/bouncing_entrances/bounceIn.js +14 -0
  58. package/dist/collection/components/animation/animations/bouncing_entrances/bounceInDown.js +20 -0
  59. package/dist/collection/components/animation/animations/bouncing_entrances/bounceInLeft.js +16 -0
  60. package/dist/collection/components/animation/animations/bouncing_entrances/bounceInRight.js +16 -0
  61. package/dist/collection/components/animation/animations/bouncing_entrances/bounceInUp.js +16 -0
  62. package/dist/collection/components/animation/animations/bouncing_exits/bounceOut.js +6 -0
  63. package/dist/collection/components/animation/animations/bouncing_exits/bounceOutDown.js +14 -0
  64. package/dist/collection/components/animation/animations/bouncing_exits/bounceOutLeft.js +12 -0
  65. package/dist/collection/components/animation/animations/bouncing_exits/bounceOutRight.js +8 -0
  66. package/dist/collection/components/animation/animations/bouncing_exits/bounceOutUp.js +18 -0
  67. package/dist/collection/components/animation/animations/easings/easings.js +35 -0
  68. package/dist/collection/components/animation/animations/easings/easings.js.map +1 -0
  69. package/dist/collection/components/animation/animations/fading_entrances/fadeIn.js +4 -0
  70. package/dist/collection/components/animation/animations/fading_entrances/fadeInBottomLeft.js +4 -0
  71. package/dist/collection/components/animation/animations/fading_entrances/fadeInBottomRight.js +4 -0
  72. package/dist/collection/components/animation/animations/fading_entrances/fadeInDown.js +4 -0
  73. package/dist/collection/components/animation/animations/fading_entrances/fadeInDownBig.js +4 -0
  74. package/dist/collection/components/animation/animations/fading_entrances/fadeInLeft.js +4 -0
  75. package/dist/collection/components/animation/animations/fading_entrances/fadeInLeftBig.js +4 -0
  76. package/dist/collection/components/animation/animations/fading_entrances/fadeInRight.js +4 -0
  77. package/dist/collection/components/animation/animations/fading_entrances/fadeInRightBig.js +4 -0
  78. package/dist/collection/components/animation/animations/fading_entrances/fadeInTopLeft.js +4 -0
  79. package/dist/collection/components/animation/animations/fading_entrances/fadeInTopRight.js +4 -0
  80. package/dist/collection/components/animation/animations/fading_entrances/fadeInUp.js +4 -0
  81. package/dist/collection/components/animation/animations/fading_entrances/fadeInUpBig.js +4 -0
  82. package/dist/collection/components/animation/animations/fading_exits/fadeOut.js +4 -0
  83. package/dist/collection/components/animation/animations/fading_exits/fadeOutBottomLeft.js +4 -0
  84. package/dist/collection/components/animation/animations/fading_exits/fadeOutBottomRight.js +4 -0
  85. package/dist/collection/components/animation/animations/fading_exits/fadeOutDown.js +4 -0
  86. package/dist/collection/components/animation/animations/fading_exits/fadeOutDownBig.js +4 -0
  87. package/dist/collection/components/animation/animations/fading_exits/fadeOutLeft.js +4 -0
  88. package/dist/collection/components/animation/animations/fading_exits/fadeOutLeftBig.js +4 -0
  89. package/dist/collection/components/animation/animations/fading_exits/fadeOutRight.js +4 -0
  90. package/dist/collection/components/animation/animations/fading_exits/fadeOutRightBig.js +4 -0
  91. package/dist/collection/components/animation/animations/fading_exits/fadeOutTopLeft.js +4 -0
  92. package/dist/collection/components/animation/animations/fading_exits/fadeOutTopRight.js +4 -0
  93. package/dist/collection/components/animation/animations/fading_exits/fadeOutUp.js +4 -0
  94. package/dist/collection/components/animation/animations/fading_exits/fadeOutUpBig.js +4 -0
  95. package/dist/collection/components/animation/animations/flippers/flip.js +32 -0
  96. package/dist/collection/components/animation/animations/flippers/flipInX.js +20 -0
  97. package/dist/collection/components/animation/animations/flippers/flipInY.js +20 -0
  98. package/dist/collection/components/animation/animations/flippers/flipOutX.js +13 -0
  99. package/dist/collection/components/animation/animations/flippers/flipOutY.js +13 -0
  100. package/dist/collection/components/animation/animations/index.js +203 -0
  101. package/dist/collection/components/animation/animations/index.js.map +1 -0
  102. package/dist/collection/components/animation/animations/lightspeed/lightSpeedInLeft.js +10 -0
  103. package/dist/collection/components/animation/animations/lightspeed/lightSpeedInRight.js +10 -0
  104. package/dist/collection/components/animation/animations/lightspeed/lightSpeedOutLeft.js +8 -0
  105. package/dist/collection/components/animation/animations/lightspeed/lightSpeedOutRight.js +8 -0
  106. package/dist/collection/components/animation/animations/rotating_entrances/rotateIn.js +4 -0
  107. package/dist/collection/components/animation/animations/rotating_entrances/rotateInDownLeft.js +4 -0
  108. package/dist/collection/components/animation/animations/rotating_entrances/rotateInDownRight.js +4 -0
  109. package/dist/collection/components/animation/animations/rotating_entrances/rotateInUpLeft.js +4 -0
  110. package/dist/collection/components/animation/animations/rotating_entrances/rotateInUpRight.js +4 -0
  111. package/dist/collection/components/animation/animations/rotating_exits/rotateOut.js +4 -0
  112. package/dist/collection/components/animation/animations/rotating_exits/rotateOutDownLeft.js +4 -0
  113. package/dist/collection/components/animation/animations/rotating_exits/rotateOutDownRight.js +4 -0
  114. package/dist/collection/components/animation/animations/rotating_exits/rotateOutUpLeft.js +4 -0
  115. package/dist/collection/components/animation/animations/rotating_exits/rotateOutUpRight.js +4 -0
  116. package/dist/collection/components/animation/animations/sliding_entrances/slideInDown.js +4 -0
  117. package/dist/collection/components/animation/animations/sliding_entrances/slideInLeft.js +4 -0
  118. package/dist/collection/components/animation/animations/sliding_entrances/slideInRight.js +4 -0
  119. package/dist/collection/components/animation/animations/sliding_entrances/slideInUp.js +4 -0
  120. package/dist/collection/components/animation/animations/sliding_exits/slideOutDown.js +4 -0
  121. package/dist/collection/components/animation/animations/sliding_exits/slideOutLeft.js +4 -0
  122. package/dist/collection/components/animation/animations/sliding_exits/slideOutRight.js +4 -0
  123. package/dist/collection/components/animation/animations/sliding_exits/slideOutUp.js +4 -0
  124. package/dist/collection/components/animation/animations/specials/hinge.js +18 -0
  125. package/dist/collection/components/animation/animations/specials/jackInTheBox.js +11 -0
  126. package/dist/collection/components/animation/animations/specials/rollIn.js +8 -0
  127. package/dist/collection/components/animation/animations/specials/rollOut.js +8 -0
  128. package/dist/collection/components/animation/animations/zooming_entrances/zoomIn.js +4 -0
  129. package/dist/collection/components/animation/animations/zooming_entrances/zoomInDown.js +14 -0
  130. package/dist/collection/components/animation/animations/zooming_entrances/zoomInLeft.js +14 -0
  131. package/dist/collection/components/animation/animations/zooming_entrances/zoomInRight.js +14 -0
  132. package/dist/collection/components/animation/animations/zooming_entrances/zoomInUp.js +14 -0
  133. package/dist/collection/components/animation/animations/zooming_exits/zoomOut.js +5 -0
  134. package/dist/collection/components/animation/animations/zooming_exits/zoomOutDown.js +14 -0
  135. package/dist/collection/components/animation/animations/zooming_exits/zoomOutLeft.js +12 -0
  136. package/dist/collection/components/animation/animations/zooming_exits/zoomOutRight.js +12 -0
  137. package/dist/collection/components/animation/animations/zooming_exits/zoomOutUp.js +14 -0
  138. package/dist/collection/components/dialog/dialog.css +13 -5
  139. package/dist/collection/components/dialog/dialog.js +20 -3
  140. package/dist/collection/components/dialog/dialog.js.map +1 -1
  141. package/dist/collection/components/hero/hero.css +0 -1
  142. package/dist/collection/components/intersection-observe/intersection-observe.js +256 -0
  143. package/dist/collection/components/intersection-observe/intersection-observe.js.map +1 -0
  144. package/dist/collection/components/resize-observe/resize-observe.js +1 -1
  145. package/dist/collection/components/resize-observe/resize-observe.js.map +1 -1
  146. package/dist/collection/components/select/select.js +5 -5
  147. package/dist/collection/components/select/select.js.map +1 -1
  148. package/dist/collection/components/sticker/sticker.js +2 -27
  149. package/dist/collection/components/sticker/sticker.js.map +1 -1
  150. package/dist/collection/components/table/table.js +2 -1
  151. package/dist/collection/components/table/table.js.map +1 -1
  152. package/dist/collection/components/table/table.utils.js +0 -21
  153. package/dist/collection/components/table/table.utils.js.map +1 -1
  154. package/dist/collection/components/tabs/tab-group.js +2 -3
  155. package/dist/collection/components/tabs/tab-group.js.map +1 -1
  156. package/dist/collection/utils/scroll-parent.js +26 -0
  157. package/dist/collection/utils/scroll-parent.js.map +1 -0
  158. package/dist/collection/utils/scroll.js +39 -2
  159. package/dist/collection/utils/scroll.js.map +1 -1
  160. package/dist/collection/utils/transitions.js +1 -0
  161. package/dist/collection/utils/transitions.js.map +1 -1
  162. package/dist/components/index.d.ts +2 -1
  163. package/dist/components/index.js +2 -1
  164. package/dist/components/index.js.map +1 -1
  165. package/dist/components/{nano-aspect-ratio.d.ts → nano-animation.d.ts} +4 -4
  166. package/dist/components/nano-animation.js +1239 -0
  167. package/dist/components/nano-animation.js.map +1 -0
  168. package/dist/components/nano-dialog.js +21 -4
  169. package/dist/components/nano-dialog.js.map +1 -1
  170. package/dist/components/nano-hero.js +1 -1
  171. package/dist/components/nano-hero.js.map +1 -1
  172. package/dist/components/nano-intersection-observe.d.ts +11 -0
  173. package/dist/components/nano-intersection-observe.js +149 -0
  174. package/dist/components/nano-intersection-observe.js.map +1 -0
  175. package/dist/components/nano-tab-group.js +2 -3
  176. package/dist/components/nano-tab-group.js.map +1 -1
  177. package/dist/components/resize-observe.js +1 -1
  178. package/dist/components/resize-observe.js.map +1 -1
  179. package/dist/components/scroll-parent.js +29 -0
  180. package/dist/components/scroll-parent.js.map +1 -0
  181. package/dist/components/scroll.js +39 -2
  182. package/dist/components/scroll.js.map +1 -1
  183. package/dist/components/select.js.map +1 -1
  184. package/dist/components/sticker.js +2 -27
  185. package/dist/components/sticker.js.map +1 -1
  186. package/dist/components/table.js +1 -21
  187. package/dist/components/table.js.map +1 -1
  188. package/dist/components/transitions.js.map +1 -1
  189. package/dist/esm/index-9695db0a.js +6 -2
  190. package/dist/esm/loader.js +1 -1
  191. package/dist/esm/nano-alert.entry.js +1 -1
  192. package/dist/esm/nano-animation.entry.js +1205 -0
  193. package/dist/esm/nano-animation.entry.js.map +1 -0
  194. package/dist/esm/nano-components.js +1 -1
  195. package/dist/esm/nano-dialog.entry.js +22 -5
  196. package/dist/esm/nano-dialog.entry.js.map +1 -1
  197. package/dist/esm/nano-drawer.entry.js +1 -1
  198. package/dist/esm/nano-global-nav-user-profile_3.entry.js.map +1 -1
  199. package/dist/esm/nano-hero.entry.js +1 -1
  200. package/dist/esm/nano-hero.entry.js.map +1 -1
  201. package/dist/esm/nano-intersection-observe.entry.js +127 -0
  202. package/dist/esm/nano-intersection-observe.entry.js.map +1 -0
  203. package/dist/esm/nano-resize-observe_2.entry.js +1 -1
  204. package/dist/esm/nano-resize-observe_2.entry.js.map +1 -1
  205. package/dist/esm/nano-sticker.entry.js +2 -27
  206. package/dist/esm/nano-sticker.entry.js.map +1 -1
  207. package/dist/esm/nano-tab-group.entry.js +3 -4
  208. package/dist/esm/nano-tab-group.entry.js.map +1 -1
  209. package/dist/esm/{nano-table-fc01a927.js → nano-table-66bee831.js} +3 -23
  210. package/dist/esm/nano-table-66bee831.js.map +1 -0
  211. package/dist/esm/nano-table.entry.js +2 -1
  212. package/dist/esm/nano-table.entry.js.map +1 -1
  213. package/dist/esm/{scroll-ac332213.js → scroll-762b3e1a.js} +40 -3
  214. package/dist/esm/scroll-762b3e1a.js.map +1 -0
  215. package/dist/esm/scroll-parent-bab1cbf7.js +29 -0
  216. package/dist/esm/scroll-parent-bab1cbf7.js.map +1 -0
  217. package/dist/esm/{table.worker-c70f6379.js → table.worker-936e6d51.js} +3 -2
  218. package/dist/esm/table.worker-936e6d51.js.map +1 -0
  219. package/dist/esm/transitions-bd15e312.js.map +1 -1
  220. package/dist/nano-components/nano-alert.entry.js +1 -1
  221. package/dist/nano-components/nano-animation.entry.js +5 -0
  222. package/dist/nano-components/nano-animation.entry.js.map +1 -0
  223. package/dist/nano-components/nano-components.css +1 -1
  224. package/dist/nano-components/nano-components.esm.js +1 -1
  225. package/dist/nano-components/nano-components.esm.js.map +1 -1
  226. package/dist/nano-components/nano-dialog.entry.js +1 -1
  227. package/dist/nano-components/nano-dialog.entry.js.map +1 -1
  228. package/dist/nano-components/nano-drawer.entry.js +1 -1
  229. package/dist/nano-components/nano-global-nav-user-profile_3.entry.js.map +1 -1
  230. package/dist/nano-components/nano-hero.entry.js +1 -1
  231. package/dist/nano-components/nano-hero.entry.js.map +1 -1
  232. package/dist/nano-components/nano-intersection-observe.entry.js +5 -0
  233. package/dist/nano-components/nano-intersection-observe.entry.js.map +1 -0
  234. package/dist/nano-components/nano-resize-observe_2.entry.js +1 -1
  235. package/dist/nano-components/nano-resize-observe_2.entry.js.map +1 -1
  236. package/dist/nano-components/nano-sticker.entry.js +1 -1
  237. package/dist/nano-components/nano-sticker.entry.js.map +1 -1
  238. package/dist/nano-components/nano-tab-group.entry.js +1 -1
  239. package/dist/nano-components/nano-tab-group.entry.js.map +1 -1
  240. package/dist/nano-components/nano-table-66bee831.js +5 -0
  241. package/dist/nano-components/nano-table-66bee831.js.map +1 -0
  242. package/dist/nano-components/nano-table.entry.js +1 -1
  243. package/dist/nano-components/scroll-762b3e1a.js +5 -0
  244. package/dist/nano-components/scroll-762b3e1a.js.map +1 -0
  245. package/dist/nano-components/scroll-parent-bab1cbf7.js +5 -0
  246. package/dist/nano-components/scroll-parent-bab1cbf7.js.map +1 -0
  247. package/dist/nano-components/table.worker-936e6d51.js +5 -0
  248. package/dist/nano-components/transitions-bd15e312.js.map +1 -1
  249. package/dist/types/components/animation/animation.d.ts +74 -0
  250. package/dist/types/components/animation/animations/easings/easings.d.ts +31 -0
  251. package/dist/types/components/animation/animations/index.d.ts +101 -0
  252. package/dist/types/components/intersection-observe/intersection-observe.d.ts +45 -0
  253. package/dist/types/components/select/select.d.ts +2 -4
  254. package/dist/types/components/sticker/sticker.d.ts +0 -5
  255. package/dist/types/components/table/table.utils.d.ts +0 -6
  256. package/dist/types/components.d.ts +209 -42
  257. package/dist/types/interface.d.ts +6 -2
  258. package/dist/types/utils/scroll-parent.d.ts +6 -0
  259. package/docs-json.json +945 -31
  260. package/docs-vscode.json +488 -8
  261. package/hydrate/index.js +1568 -235
  262. package/package.json +2 -2
  263. package/dist/cjs/nano-aspect-ratio.cjs.entry.js +0 -53
  264. package/dist/cjs/nano-aspect-ratio.cjs.entry.js.map +0 -1
  265. package/dist/cjs/nano-table-6f48a747.js.map +0 -1
  266. package/dist/cjs/scroll-e8c21f80.js.map +0 -1
  267. package/dist/cjs/table.worker-f3e54773.js.map +0 -1
  268. package/dist/collection/components/aspect-ratio/aspect-ratio.css +0 -38
  269. package/dist/collection/components/aspect-ratio/aspect-ratio.js +0 -106
  270. package/dist/collection/components/aspect-ratio/aspect-ratio.js.map +0 -1
  271. package/dist/components/nano-aspect-ratio.js +0 -70
  272. package/dist/components/nano-aspect-ratio.js.map +0 -1
  273. package/dist/esm/nano-aspect-ratio.entry.js +0 -49
  274. package/dist/esm/nano-aspect-ratio.entry.js.map +0 -1
  275. package/dist/esm/nano-table-fc01a927.js.map +0 -1
  276. package/dist/esm/scroll-ac332213.js.map +0 -1
  277. package/dist/esm/table.worker-c70f6379.js.map +0 -1
  278. package/dist/nano-components/nano-aspect-ratio.entry.js +0 -5
  279. package/dist/nano-components/nano-aspect-ratio.entry.js.map +0 -1
  280. package/dist/nano-components/nano-table-fc01a927.js +0 -5
  281. package/dist/nano-components/nano-table-fc01a927.js.map +0 -1
  282. package/dist/nano-components/scroll-ac332213.js +0 -5
  283. package/dist/nano-components/scroll-ac332213.js.map +0 -1
  284. package/dist/nano-components/table.worker-c70f6379.js +0 -5
  285. package/dist/types/components/aspect-ratio/aspect-ratio.d.ts +0 -19
  286. /package/dist/nano-components/{table.worker-c70f6379.js.map → table.worker-936e6d51.js.map} +0 -0
package/hydrate/index.js CHANGED
@@ -6444,6 +6444,24 @@ class Modal {
6444
6444
  }
6445
6445
  }
6446
6446
 
6447
+ /**
6448
+ * @returns the width of the document's scrollbar
6449
+ */
6450
+ function getScrollbarWidth() {
6451
+ const documentWidth = document.documentElement.clientWidth;
6452
+ return Math.abs(window.innerWidth - documentWidth);
6453
+ }
6454
+ /**
6455
+ * Used in conjunction with `scrollbarWidth` to set proper body padding in case the user has padding already on the `<body>` element.
6456
+ * @returns body's computed css padding
6457
+ */
6458
+ function getExistingBodyPadding() {
6459
+ const padding = Number(getComputedStyle(document.body).paddingRight.replace(/px/, ''));
6460
+ if (isNaN(padding) || !padding) {
6461
+ return 0;
6462
+ }
6463
+ return padding;
6464
+ }
6447
6465
  const locks = new Set();
6448
6466
  /**
6449
6467
  * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible
@@ -6451,7 +6469,23 @@ const locks = new Set();
6451
6469
  */
6452
6470
  function lockBodyScrolling(lockingEl) {
6453
6471
  locks.add(lockingEl);
6454
- document.body.classList.add('nano-scroll-lock');
6472
+ if (document.documentElement.classList.contains('nano-scroll-lock'))
6473
+ return;
6474
+ // When the first lock is created,
6475
+ // set the scroll lock size to match the scrollbar's width to prevent content from shifting.
6476
+ const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding(); // must be measured before the `sl-scroll-lock` class is applied
6477
+ let scrollbarGutterProperty = getComputedStyle(document.documentElement).scrollbarGutter;
6478
+ // default is auto, unsupported browsers is "undefined"
6479
+ if (!scrollbarGutterProperty || scrollbarGutterProperty === 'auto') {
6480
+ scrollbarGutterProperty = 'stable';
6481
+ }
6482
+ if (scrollbarWidth <= 0) {
6483
+ // if there's no scrollbar, just set it to "revert" so whatever the user has set gets used. This is useful is the page is not overflowing and showing a scrollbar, or if the user has overflow: hidden, or any other reason a scrollbar may not be showing.
6484
+ scrollbarGutterProperty = 'revert';
6485
+ }
6486
+ document.documentElement.style.setProperty('--nano-scroll-lock-gutter', scrollbarGutterProperty);
6487
+ document.documentElement.classList.add('nano-scroll-lock');
6488
+ document.documentElement.style.setProperty('--nano-scroll-lock-size', `${scrollbarWidth}px`);
6455
6489
  }
6456
6490
  /**
6457
6491
  * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
@@ -6459,7 +6493,8 @@ function lockBodyScrolling(lockingEl) {
6459
6493
  function unlockBodyScrolling(lockingEl) {
6460
6494
  locks.delete(lockingEl);
6461
6495
  if (locks.size === 0) {
6462
- document.body.classList.remove('nano-scroll-lock');
6496
+ document.documentElement.classList.remove('nano-scroll-lock');
6497
+ document.documentElement.style.removeProperty('--nano-scroll-lock-size');
6463
6498
  }
6464
6499
  }
6465
6500
  function scrollTo(element, scrollAmt, vertical = false) {
@@ -6487,6 +6522,8 @@ function scrollTo(element, scrollAmt, vertical = false) {
6487
6522
  * If the element is already in view, nothing will happen.
6488
6523
  */
6489
6524
  function scrollIntoView(element, container, direction = 'vertical', position = 'start') {
6525
+ if (!element)
6526
+ return;
6490
6527
  const offset = getOffset(element, container);
6491
6528
  const offsetTop = offset.top + container.scrollTop;
6492
6529
  const offsetLeft = offset.left + container.scrollLeft;
@@ -10514,64 +10551,6 @@ Wormhole(AlgoliaResults, [
10514
10551
  'isLoading',
10515
10552
  ]);
10516
10553
 
10517
- const aspectRatioCss = "/*!@:host*/.sc-nano-aspect-ratio-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-aspect-ratio,*.sc-nano-aspect-ratio::before,*.sc-nano-aspect-ratio::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-aspect-ratio{display:none !important}/*!@:host*/.sc-nano-aspect-ratio-h{display:block}/*!@.aspect-ratio*/.aspect-ratio.sc-nano-aspect-ratio{position:relative}/*!@.aspect-ratio ::slotted(*)*/.aspect-ratio .sc-nano-aspect-ratio-s>*{position:absolute !important;inset-block-start:0 !important;inset-inline-start:0 !important;inline-size:100% !important;block-size:100% !important}/*!@.aspect-ratio--cover ::slotted(embed),\n.aspect-ratio--cover ::slotted(iframe),\n.aspect-ratio--cover ::slotted(img),\n.aspect-ratio--cover ::slotted(video)*/.aspect-ratio--cover .sc-nano-aspect-ratio-s>embed,.aspect-ratio--cover .sc-nano-aspect-ratio-s>iframe,.aspect-ratio--cover .sc-nano-aspect-ratio-s>img,.aspect-ratio--cover .sc-nano-aspect-ratio-s>video{object-fit:cover !important}/*!@.aspect-ratio--contain ::slotted(embed),\n.aspect-ratio--contain ::slotted(iframe),\n.aspect-ratio--contain ::slotted(img),\n.aspect-ratio--contain ::slotted(video)*/.aspect-ratio--contain .sc-nano-aspect-ratio-s>embed,.aspect-ratio--contain .sc-nano-aspect-ratio-s>iframe,.aspect-ratio--contain .sc-nano-aspect-ratio-s>img,.aspect-ratio--contain .sc-nano-aspect-ratio-s>video{object-fit:contain !important}";
10518
-
10519
- /**
10520
- * Displays media in the desired aspect ratio.
10521
- * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.
10522
- * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.
10523
- * The default aspect ratio is 16:9.
10524
- */
10525
- class AspectRatio {
10526
- constructor(hostRef) {
10527
- registerInstance(this, hostRef);
10528
- this.handleSlotChange = () => {
10529
- this.setAspectRatio();
10530
- };
10531
- this.aspectRatio = '16:9';
10532
- this.fit = 'cover';
10533
- }
10534
- handleAspectRatioChange() {
10535
- this.setAspectRatio();
10536
- }
10537
- setAspectRatio() {
10538
- if (typeof this.aspectRatio !== 'string') {
10539
- console.warn('aspectRatio should be a string.');
10540
- return;
10541
- }
10542
- else if (!this.aspectRatio.match(/^([0-9]+:[0-9]+)$/)) {
10543
- console.warn('aspectRatio is an incorrect format. Should be e.g. "16:9"');
10544
- return;
10545
- }
10546
- const split = this.aspectRatio.split(':');
10547
- const x = parseInt(split[0]);
10548
- const y = parseInt(split[1]);
10549
- this.base.style.paddingBottom = x && y ? `${(y / x) * 100}%` : null;
10550
- }
10551
- render() {
10552
- return (hAsync("div", { ref: (el) => (this.base = el), part: "base", class: {
10553
- 'aspect-ratio': true,
10554
- 'aspect-ratio--cover': this.fit === 'cover',
10555
- 'aspect-ratio--contain': this.fit === 'contain',
10556
- } }, hAsync("slot", { onSlotchange: this.handleSlotChange })));
10557
- }
10558
- static get watchers() { return {
10559
- "aspectRatio": ["handleAspectRatioChange"]
10560
- }; }
10561
- static get style() { return aspectRatioCss; }
10562
- static get cmpMeta() { return {
10563
- "$flags$": 9,
10564
- "$tagName$": "nano-aspect-ratio",
10565
- "$members$": {
10566
- "aspectRatio": [1, "aspect-ratio"],
10567
- "fit": [1]
10568
- },
10569
- "$listeners$": undefined,
10570
- "$lazyBundleId$": "-",
10571
- "$attrsToReflect$": []
10572
- }; }
10573
- }
10574
-
10575
10554
  //
10576
10555
  // Simulates :focus-visible behavior on an element by watching for certain keyboard and mouse heuristics and toggling a
10577
10556
  // `focus-visible` class. Works at the component level so no global polyfill is necessary.
@@ -13238,7 +13217,7 @@ function hasSlot(host, name) {
13238
13217
  return true;
13239
13218
  }
13240
13219
 
13241
- const dialogCss = "/*!@:host*/.sc-nano-dialog-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-dialog,*.sc-nano-dialog::before,*.sc-nano-dialog::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-dialog{display:none !important}/*!@:host*/.sc-nano-dialog-h{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--tint-color:#00607b;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}/*!@.dialog*/.dialog.sc-nano-dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-layer-index-modal, 700)}/*!@.dialog__panel*/.dialog__panel.sc-nano-dialog{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);max-inline-size:calc(100% - var(--nano-spacing-xlarge, 24px));max-block-size:calc(92% - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform}/*!@.dialog__panel:focus*/.dialog__panel.sc-nano-dialog:focus{outline:none}/*!@.dialog--with-ribbon .dialog__panel*/.dialog--with-ribbon.sc-nano-dialog .dialog__panel.sc-nano-dialog{border-block-start:5px solid var(--tint-color)}/*!@.dialog--open .dialog__panel*/.dialog--open.sc-nano-dialog .dialog__panel.sc-nano-dialog{display:flex;opacity:1;transform:none}/*!@.dialog--nodismiss .dialog__panel*/.dialog--nodismiss.sc-nano-dialog .dialog__panel.sc-nano-dialog{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}/*!@.dialog__header*/.dialog__header.sc-nano-dialog{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-fast, 0.1s) box-shadow;min-inline-size:auto}/*!@[stuck] .dialog__header*/[stuck].sc-nano-dialog .dialog__header.sc-nano-dialog{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}/*!@.dialog__title*/.dialog__title.sc-nano-dialog{flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}/*!@.dialog .dialog__close-icon*/.dialog.sc-nano-dialog .dialog__close-icon.sc-nano-dialog{flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding-block:0;padding-inline:var(--header-padding-h);--color:var(--close-button-color)}/*!@.dialog__body*/.dialog__body.sc-nano-dialog{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}/*!@.dialog:not(.dialog--has-header) .dialog__body*/.dialog.sc-nano-dialog:not(.dialog--has-header) .dialog__body.sc-nano-dialog{padding-block-start:var(--body-padding-v)}/*!@.dialog__body ::slotted(*)*/.dialog__body .sc-nano-dialog-s>*{max-inline-size:100%}/*!@.dialog__body-wrap*/.dialog__body-wrap.sc-nano-dialog{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}/*!@.dialog:not(.dialog--has-header) .dialog__body-wrap*/.dialog.sc-nano-dialog:not(.dialog--has-header) .dialog__body-wrap.sc-nano-dialog{border-radius:0 0 inherit inherit}/*!@.dialog:not(.dialog--has-footer) .dialog__body-wrap*/.dialog.sc-nano-dialog:not(.dialog--has-footer) .dialog__body-wrap.sc-nano-dialog{border-radius:inherit inherit 0 0}/*!@.dialog__footer*/.dialog__footer.sc-nano-dialog{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto}/*!@.dialog__footer ::slotted(button)*/.dialog__footer .sc-nano-dialog-s>button{margin-inline-end:var(--nano-spacing-small, 8px) !important}/*!@.dialog:not(.dialog--has-footer) .dialog__footer*/.dialog.sc-nano-dialog:not(.dialog--has-footer) .dialog__footer.sc-nano-dialog{display:none}/*!@.dialog__close-txt*/.dialog__close-txt.sc-nano-dialog{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);transition:box-shadow 100ms ease-in-out}/*!@.dialog__close-txt:focus*/.dialog__close-txt.sc-nano-dialog:focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}/*!@.dialog__overlay*/.dialog__overlay.sc-nano-dialog{position:fixed;inset:0;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}/*!@.dialog--open .dialog__overlay*/.dialog--open.sc-nano-dialog .dialog__overlay.sc-nano-dialog{opacity:1}";
13220
+ const dialogCss = "/*!@:host*/.sc-nano-dialog-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-dialog,*.sc-nano-dialog::before,*.sc-nano-dialog::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-dialog{display:none !important}/*!@:host*/.sc-nano-dialog-h{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--tint-color:#00607b;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}/*!@.dialog*/.dialog.sc-nano-dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-layer-index-modal, 700);border:none;inline-size:unset;block-size:unset;color:unset;background-color:unset}/*!@.dialog::backdrop*/.dialog.sc-nano-dialog::backdrop{display:none}/*!@.dialog__panel*/.dialog__panel.sc-nano-dialog{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);max-inline-size:calc(100% - (var(--nano-spacing-xlarge, 24px) + var(--nano-scroll-lock-size)));max-block-size:calc(92vh - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform}/*!@.dialog__panel:focus*/.dialog__panel.sc-nano-dialog:focus{outline:none}/*!@.dialog--with-ribbon .dialog__panel*/.dialog--with-ribbon.sc-nano-dialog .dialog__panel.sc-nano-dialog{border-block-start:5px solid var(--tint-color)}/*!@.dialog--open .dialog__panel*/.dialog--open.sc-nano-dialog .dialog__panel.sc-nano-dialog{display:flex;opacity:1;transform:none}/*!@.dialog--nodismiss .dialog__panel*/.dialog--nodismiss.sc-nano-dialog .dialog__panel.sc-nano-dialog{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}/*!@.dialog__header*/.dialog__header.sc-nano-dialog{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-fast, 0.1s) box-shadow;min-inline-size:auto}/*!@[stuck] .dialog__header*/[stuck].sc-nano-dialog .dialog__header.sc-nano-dialog{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}/*!@.dialog__title*/.dialog__title.sc-nano-dialog{flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}/*!@.dialog .dialog__close-icon*/.dialog.sc-nano-dialog .dialog__close-icon.sc-nano-dialog{flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding-block:0;padding-inline:var(--header-padding-h);--color:var(--close-button-color)}/*!@.dialog__body*/.dialog__body.sc-nano-dialog{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}/*!@.dialog:not(.dialog--has-header) .dialog__body*/.dialog.sc-nano-dialog:not(.dialog--has-header) .dialog__body.sc-nano-dialog{padding-block-start:var(--body-padding-v)}/*!@.dialog__body ::slotted(*)*/.dialog__body .sc-nano-dialog-s>*{max-inline-size:100%}/*!@.dialog__body-wrap*/.dialog__body-wrap.sc-nano-dialog{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}/*!@.dialog:not(.dialog--has-header) .dialog__body-wrap*/.dialog.sc-nano-dialog:not(.dialog--has-header) .dialog__body-wrap.sc-nano-dialog{border-radius:0 0 inherit inherit}/*!@.dialog:not(.dialog--has-footer) .dialog__body-wrap*/.dialog.sc-nano-dialog:not(.dialog--has-footer) .dialog__body-wrap.sc-nano-dialog{border-radius:inherit inherit 0 0}/*!@.dialog__footer*/.dialog__footer.sc-nano-dialog{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:sticky;inset-block-end:0;min-inline-size:auto}/*!@.dialog__footer ::slotted(button)*/.dialog__footer .sc-nano-dialog-s>button{margin-inline-end:var(--nano-spacing-small, 8px) !important}/*!@.dialog:not(.dialog--has-footer) .dialog__footer*/.dialog.sc-nano-dialog:not(.dialog--has-footer) .dialog__footer.sc-nano-dialog{display:none}/*!@.dialog__close-txt*/.dialog__close-txt.sc-nano-dialog{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);transition:box-shadow 100ms ease-in-out}/*!@.dialog__close-txt:focus*/.dialog__close-txt.sc-nano-dialog:focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}/*!@.dialog__overlay*/.dialog__overlay.sc-nano-dialog{position:fixed;inset:0 !important;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}/*!@.dialog--open .dialog__overlay*/.dialog--open.sc-nano-dialog .dialog__overlay.sc-nano-dialog{opacity:1}";
13242
13221
 
13243
13222
  let id$4 = 0;
13244
13223
  /**
@@ -13327,7 +13306,10 @@ class Dialog {
13327
13306
  this.open ? this.show() : this.hide();
13328
13307
  }
13329
13308
  handleHoistChange() {
13330
- if (!this.hoist || Array.from(document.body.children).includes(this.host))
13309
+ // if native popover is supported then bail as this is not required
13310
+ if (globalThis.HTMLElement.prototype.hasOwnProperty('popover') ||
13311
+ !this.hoist ||
13312
+ Array.from(document.body.children).includes(this.host))
13331
13313
  return;
13332
13314
  document.body.prepend(this.host);
13333
13315
  }
@@ -13347,6 +13329,11 @@ class Dialog {
13347
13329
  this.willShow = true;
13348
13330
  this.open = true;
13349
13331
  this.modal.activate();
13332
+ // @ts-ignore
13333
+ if (typeof this.dialog?.showPopover === 'function') {
13334
+ // @ts-ignore
13335
+ this.dialog.showPopover();
13336
+ }
13350
13337
  lockBodyScrolling(this.host);
13351
13338
  if (this.open) {
13352
13339
  // Wait for the next frame before setting initial focus so the dialog is technically visible
@@ -13371,13 +13358,20 @@ class Dialog {
13371
13358
  this.willHide = true;
13372
13359
  this.open = false;
13373
13360
  this.modal.deactivate();
13374
- unlockBodyScrolling(this.host);
13375
13361
  this.stopVideos();
13376
13362
  // Restore focus to the original trigger
13377
13363
  const trigger = this.originalTrigger;
13378
13364
  if (trigger && typeof trigger.focus === 'function') {
13379
13365
  setTimeout(() => trigger.focus());
13380
13366
  }
13367
+ setTimeout(() => {
13368
+ // @ts-ignore
13369
+ if (!this.open && typeof this.dialog?.hidePopover === 'function') {
13370
+ // @ts-ignore
13371
+ this.dialog.hidePopover();
13372
+ }
13373
+ unlockBodyScrolling(this.host);
13374
+ }, 300);
13381
13375
  }
13382
13376
  stopVideos() {
13383
13377
  const videos = Array.from(this.host.querySelectorAll('iframe,video'));
@@ -13419,7 +13413,9 @@ class Dialog {
13419
13413
  'dialog--has-header': !this.noHeader,
13420
13414
  'dialog--nodismiss': this.noDismiss,
13421
13415
  'dialog--with-ribbon': this.showRibbon,
13422
- }, onKeyDown: this.handleKeyDown, ref: (ele) => (this.dialog = ele) }, hAsync("div", { part: "overlay", class: "dialog__overlay", ref: (el) => (this.overlay = el), onClick: this.requestClose }), hAsync("div", { ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, hAsync("div", { class: "dialog__body-wrap" }, !this.noHeader && (hAsync("nano-sticker", null, hAsync("div", { part: "header", class: "dialog__header" }, hAsync("span", { part: "title", class: "dialog__title", id: `${this.componentId}-title` }, hAsync("slot", { name: "label" }, this.label || String.fromCharCode(65279))), !this.noUserDismiss && (hAsync("nano-icon-button", { part: "close-button", exportparts: "base:close-button__base", class: "dialog__close-icon", label: "close dialog", onClick: this.requestClose, iconName: "light/times" }))))), hAsync("div", { part: "body", class: "dialog__body" }, hAsync("slot", null)), !this.noFooter && (this.hasFooter || !this.noUserDismiss) && (hAsync("nano-sticker", { position: "bottom" }, hAsync("footer", { part: "footer", class: "dialog__footer" }, hAsync("slot", { name: "footer", onSlotchange: this.handleSlotChange }), !this.noUserDismiss && (hAsync("button", { class: "dialog__close-txt", onClick: this.requestClose }, "Close"))))))))));
13416
+ }, onKeyDown: this.handleKeyDown, ref: (ele) => (this.dialog = ele),
13417
+ // @ts-ignore
13418
+ popover: "manual" }, hAsync("div", { part: "overlay", class: "dialog__overlay", ref: (el) => (this.overlay = el), onClick: this.requestClose }), hAsync("div", { ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: -1 }, hAsync("div", { class: "dialog__body-wrap" }, !this.noHeader && (hAsync("nano-sticker", null, hAsync("header", { part: "header", class: "dialog__header" }, hAsync("span", { part: "title", class: "dialog__title", id: `${this.componentId}-title` }, hAsync("slot", { name: "label" }, this.label || String.fromCharCode(65279))), !this.noUserDismiss && (hAsync("nano-icon-button", { part: "close-button", exportparts: "base:close-button__base", class: "dialog__close-icon", label: "close dialog", onClick: this.requestClose, iconName: "light/times" }))))), hAsync("div", { part: "body", class: "dialog__body" }, hAsync("slot", null)), !this.noFooter && (this.hasFooter || !this.noUserDismiss) && (hAsync("footer", { part: "footer", class: "dialog__footer" }, hAsync("slot", { name: "footer", onSlotchange: this.handleSlotChange }), !this.noUserDismiss && (hAsync("button", { class: "dialog__close-txt", onClick: this.requestClose }, "Close")))))))));
13423
13419
  }
13424
13420
  get host() { return getElement(this); }
13425
13421
  static get watchers() { return {
@@ -14791,7 +14787,7 @@ function getExpandedFallbackPlacements(placement) {
14791
14787
  return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)];
14792
14788
  }
14793
14789
 
14794
- function flip(_ref) {
14790
+ function flip$1(_ref) {
14795
14791
  var state = _ref.state,
14796
14792
  options = _ref.options,
14797
14793
  name = _ref.name;
@@ -14911,11 +14907,11 @@ function flip(_ref) {
14911
14907
  } // eslint-disable-next-line import/no-unused-modules
14912
14908
 
14913
14909
 
14914
- var flip$1 = {
14910
+ var flip$2 = {
14915
14911
  name: 'flip',
14916
14912
  enabled: true,
14917
14913
  phase: 'main',
14918
- fn: flip,
14914
+ fn: flip$1,
14919
14915
  requiresIfExists: ['offset'],
14920
14916
  data: {
14921
14917
  _skip: false
@@ -15519,7 +15515,7 @@ function popperGenerator(generatorOptions) {
15519
15515
  };
15520
15516
  }
15521
15517
 
15522
- var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$1];
15518
+ var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$2, preventOverflow$1, arrow$1, hide$1];
15523
15519
  var createPopper = /*#__PURE__*/popperGenerator({
15524
15520
  defaultModifiers: defaultModifiers
15525
15521
  }); // eslint-disable-next-line import/no-unused-modules
@@ -19438,7 +19434,7 @@ class GridItem {
19438
19434
  }; }
19439
19435
  }
19440
19436
 
19441
- const heroCss = "/*!@:host*/.sc-nano-hero-h {\n box-sizing: border-box;\n}\n\n/*!@*,\n*::before,\n*::after*/*.sc-nano-hero, *.sc-nano-hero::before, *.sc-nano-hero::after {\n box-sizing: border-box;\n}\n/*!@[hidden]*/[hidden].sc-nano-hero {\n display: none !important;\n}\n\n/*!@:host*/.sc-nano-hero-h {\n \n --nano-loader-base: #4a4a4a;\n --nano-loader-tint: #7d7d7d;\n --theme-color: #fff;\n --theme-tint-color: #90c6e7;\n --scrim-color: 0 0 0;\n --scrim-direction: 90deg;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 0.7;\n --padding: 0;\n --quote-size: 1.3rem;\n color: var(--theme-color);\n display: block;\n container-type: inline-size;\n}\n\n/*!@:host([theme=light])*/[theme=light].sc-nano-hero-h {\n --nano-loader-base: #fff;\n --nano-loader-tint: white;\n --theme-color: #4a4a4a;\n --scrim-color: 255 255 255;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 1;\n --scrim-direction: 270deg;\n color: var(--theme-color);\n}\n/*!@:host([theme=light]) .hero__primary-content*/[theme=light].sc-nano-hero-h .hero__primary-content.sc-nano-hero {\n --color: #4a4a4a;\n}\n\n/*!@.hero*/.hero.sc-nano-hero {\n position: relative;\n}\n@container (min-width: 800px) {\n .hero {\n --quote-size: 3rem;\n }\n}\n/*!@.hero--rtl*/.hero--rtl.sc-nano-hero {\n --scrim-direction: 270deg;\n}\n/*!@.hero--secondary:not(.hero--iconbox)*/.hero--secondary.sc-nano-hero:not(.hero--iconbox) {\n --scrim-direction: 0deg;\n}\n/*!@.hero__bg-wrap*/.hero__bg-wrap.sc-nano-hero {\n overflow: hidden;\n}\n/*!@.hero__bg-slot*/.hero__bg-slot.sc-nano-hero {\n position: absolute;\n inset: 0;\n}\n/*!@.hero__ctas*/.hero__ctas.sc-nano-hero {\n display: flex;\n justify-content: flex-end;\n padding-block: 32px 0;\n padding-inline: 32px;\n margin-block-end: -64px;\n position: relative;\n z-index: 1;\n}\n@media (max-width: 52em) {\n /*!@.hero__ctas*/.hero__ctas.sc-nano-hero {\n display: none;\n }\n}\n@media (max-width: 58em) {\n /*!@.hero__ctas*/.hero__ctas.sc-nano-hero {\n margin-block-end: -48px;\n }\n}\n/*!@.hero__ctas ::slotted(a.button[slot=secondary-ctas])*/.hero__ctas .sc-nano-hero-s > a.button[slot=secondary-ctas] {\n padding-block: 0.25rem !important;\n padding-inline: 0.5rem !important;\n font-size: 0.875rem !important;\n margin-block: 0 !important;\n margin-inline: 0.25rem !important;\n}\n/*!@.hero__img*/.hero__img.sc-nano-hero {\n display: block;\n --padding: inherit;\n}\n/*!@.hero__breadcrumbs*/.hero__breadcrumbs.sc-nano-hero {\n display: none;\n margin-block: 20px 0;\n margin-inline: 14px;\n line-height: 14px;\n}\n/*!@.hero--breadcrumb .hero__breadcrumbs*/.hero--breadcrumb.sc-nano-hero .hero__breadcrumbs.sc-nano-hero {\n display: block;\n}\n@container (min-width: 800px) {\n .hero__breadcrumbs {\n margin-block: 0;\n margin-inline: 50px;\n max-inline-size: 50%;\n }\n}\n@container (min-width: 900px) {\n .hero__breadcrumbs {\n margin-block: 0;\n margin-inline: 83px;\n }\n}\n/*!@.hero__breadcrumbs ::slotted(*[slot=breadcrumb])*/.hero__breadcrumbs .sc-nano-hero-s > *[slot=breadcrumb] {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 600;\n font-stretch: 125%;\n display: inline-block;\n margin-block-end: 16px;\n position: relative;\n z-index: 2;\n}\n/*!@.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb])*/.hero--hasbg .hero__breadcrumbs .sc-nano-hero-s > *[slot=breadcrumb] {\n text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n/*!@.hero__breadcrumbs ::slotted(a[slot=breadcrumb])*/.hero__breadcrumbs .sc-nano-hero-s > a[slot=breadcrumb] {\n color: var(--theme-tint-color) !important;\n cursor: pointer;\n}\n/*!@.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb])*/.hero__breadcrumbs .sc-nano-hero-s > .slash[slot=breadcrumb] {\n color: var(--theme-color);\n position: relative;\n margin-block: 0;\n margin-inline: 0.5rem;\n display: inline-block;\n}\n/*!@.hero__scrim*/.hero__scrim.sc-nano-hero {\n position: absolute;\n inset: 0;\n z-index: 0;\n background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n/*!@.hero--scrim .hero__scrim*/.hero--scrim.sc-nano-hero .hero__scrim.sc-nano-hero {\n background: none;\n}\n/*!@.hero__content*/.hero__content.sc-nano-hero {\n max-inline-size: 1440px;\n display: block;\n --grid-row-gap: 0;\n margin-block: 0;\n margin-inline: auto;\n position: relative;\n}\n@container (min-width: 800px) {\n .hero__content {\n margin-block: 50px 0 !important;\n max-inline-size: 1540px !important;\n }\n}\n@container (min-width: 900px) {\n .hero__content {\n margin-block: 83px 0 !important;\n max-inline-size: 1606px !important;\n }\n}\n/*!@.hero__primary*/.hero__primary.sc-nano-hero {\n margin: 16px;\n}\n/*!@.hero--breadcrumb .hero__primary*/.hero--breadcrumb.sc-nano-hero .hero__primary.sc-nano-hero {\n margin-block: 0;\n margin-inline: 16px;\n}\n/*!@.hero--backbtn .hero__primary*/.hero--backbtn.sc-nano-hero .hero__primary.sc-nano-hero {\n margin-inline-start: 0;\n}\n/*!@.hero__primary ::slotted(nano-icon-button[slot=back-btn])*/.hero__primary .sc-nano-hero-s > nano-icon-button[slot=back-btn] {\n font-size: 2rem;\n}\n@container (min-width: 800px) {\n .hero__primary {\n margin-block: 0 50px !important;\n margin-inline: 50px 0 !important;\n }\n .hero__primary.sc-nano-hero-s > nano-icon-button[slot=back-btn], \n .hero__primary .sc-nano-hero-s > nano-icon-button[slot=back-btn] {\n margin-block: 0 !important;\n margin-inline: -3rem 0 !important;\n }\n}\n@container (min-width: 900px) {\n .hero__primary {\n margin-block: 0 83px !important;\n margin-inline: 83px 0 !important;\n }\n}\n/*!@.hero__primary-content*/.hero__primary-content.sc-nano-hero {\n max-inline-size: 45rem;\n --color: #fff;\n display: flex;\n}\n/*!@.hero--backbtn .hero__primary-content > div*/.hero--backbtn.sc-nano-hero .hero__primary-content.sc-nano-hero > div.sc-nano-hero {\n padding-block: 10px 0;\n padding-inline: 0;\n}\n/*!@.hero__primary-content ::slotted(h1[slot=primary-content])*/.hero__primary-content .sc-nano-hero-s > h1[slot=primary-content] {\n line-height: 26px !important;\n margin-block: 0 18px !important;\n font-size: 2rem !important;\n}\n@container (min-width: 800px) {\n .hero__primary-content.sc-nano-hero-s > h1[slot=primary-content], \n@container (min-width: 800px) {\n .hero__primary-content .sc-nano-hero-s > h1[slot=primary-content] {\n line-height: 31px !important;\n margin-block-end: 30px !important;\n }\n .hero__primary-content.sc-nano-hero-s > .button[slot=primary-content], \n .hero__primary-content .sc-nano-hero-s > .button[slot=primary-content] {\n margin-block-start: 20px !important;\n }\n}\n/*!@.hero__secondary*/.hero__secondary.sc-nano-hero {\n display: none;\n block-size: 100%;\n padding-block: 0 20px;\n padding-inline: 14px;\n}\n/*!@.hero--secondary .hero__secondary*/.hero--secondary.sc-nano-hero .hero__secondary.sc-nano-hero {\n display: flex;\n align-items: center;\n}\n@container (min-width: 800px) {\n .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 50px;\n justify-content: flex-end;\n }\n}\n@container (min-width: 900px) {\n .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 83px;\n }\n}\n/*!@.hero__icon-box*/.hero__icon-box.sc-nano-hero {\n background: rgba(0, 0, 0, 0.7);\n padding: 24px;\n inline-size: 100%;\n margin-block-end: auto;\n display: flex;\n flex-direction: column;\n color: white;\n}\n@container (min-width: 800px) {\n .hero__icon-box {\n max-inline-size: 410px;\n flex: 0 1 410px;\n }\n}\n/*!@.hero__icon-box ::slotted([slot=icon-box-item])*/.hero__icon-box .sc-nano-hero-s > [slot=icon-box-item] {\n --nano-color-base: var(--theme-tint-color);\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n display: flex;\n align-items: center;\n font-size: 0.8125rem;\n margin-block-end: 20px;\n}\n/*!@.hero__icon-box ::slotted(.last[slot=icon-box-item])*/.hero__icon-box .sc-nano-hero-s > .last[slot=icon-box-item] {\n margin-block-end: 0;\n}\n/*!@.hero__quote-content*/.hero__quote-content.sc-nano-hero {\n margin-block-start: auto;\n text-align: center;\n inline-size: 100%;\n}\n@container (min-width: 800px) {\n .hero__quote-content {\n max-inline-size: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n}\n/*!@.hero__quote::before, .hero__quote::after*/.hero__quote.sc-nano-hero::before, .hero__quote.sc-nano-hero::after {\n content: '\"';\n font-size: var(--quote-size);\n font-weight: 700;\n font-style: italic;\n line-height: 0;\n color: #abb6b8;\n display: inline;\n position: relative;\n}\n/*!@.hero__quote ::slotted([slot=quote])*/.hero__quote .sc-nano-hero-s > [slot=quote] {\n font-size: var(--quote-size);\n font-weight: 300;\n font-style: italic;\n display: inline;\n}\n/*!@.hero__quote-author*/.hero__quote-author.sc-nano-hero {\n text-align: end;\n font-size: 1rem;\n opacity: 0.8;\n}\n@container (min-width: 800px) {\n .hero--sub .hero__content {\n margin-block-start: 40px;\n }\n .hero--sub .hero__content .hero__primary {\n margin-block: 0 40px;\n margin-inline: 50px 0;\n }\n .hero--sub .hero__content .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 40px 50px;\n }\n .hero--sub .hero__content.sc-nano-hero-s > .button[slot=primary-content], \n .hero--sub .hero__content .sc-nano-hero-s > .button[slot=primary-content] {\n margin-block-start: 8px !important;\n }\n .hero--sub .hero__content.sc-nano-hero-s > h1[slot=primary-content], \n .hero--sub .hero__content .sc-nano-hero-s > h1[slot=primary-content] {\n margin-block-end: 18px !important;\n }\n}\n@container (min-width: 900px) {\n .hero--sub .hero__content .hero__primary {\n margin-block: 0 40px;\n margin-inline: 83px 0;\n }\n .hero--sub .hero__content .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 40px 83px;\n }\n}";
19437
+ const heroCss = "/*!@:host*/.sc-nano-hero-h {\n box-sizing: border-box;\n}\n\n/*!@*,\n*::before,\n*::after*/*.sc-nano-hero, *.sc-nano-hero::before, *.sc-nano-hero::after {\n box-sizing: border-box;\n}\n/*!@[hidden]*/[hidden].sc-nano-hero {\n display: none !important;\n}\n\n/*!@:host*/.sc-nano-hero-h {\n \n --nano-loader-base: #4a4a4a;\n --nano-loader-tint: #7d7d7d;\n --theme-color: #fff;\n --theme-tint-color: #90c6e7;\n --scrim-color: 0 0 0;\n --scrim-direction: 90deg;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 0.7;\n --padding: 0;\n --quote-size: 1.3rem;\n color: var(--theme-color);\n display: block;\n container-type: inline-size;\n}\n\n/*!@:host([theme=light])*/[theme=light].sc-nano-hero-h {\n --nano-loader-base: #fff;\n --nano-loader-tint: white;\n --theme-color: #4a4a4a;\n --scrim-color: 255 255 255;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 1;\n --scrim-direction: 270deg;\n color: var(--theme-color);\n}\n/*!@:host([theme=light]) .hero__primary-content*/[theme=light].sc-nano-hero-h .hero__primary-content.sc-nano-hero {\n --color: #4a4a4a;\n}\n\n/*!@.hero*/.hero.sc-nano-hero {\n position: relative;\n}\n@container (min-width: 800px) {\n .hero {\n --quote-size: 3rem;\n }\n}\n/*!@.hero--rtl*/.hero--rtl.sc-nano-hero {\n --scrim-direction: 270deg;\n}\n/*!@.hero--secondary:not(.hero--iconbox)*/.hero--secondary.sc-nano-hero:not(.hero--iconbox) {\n --scrim-direction: 0deg;\n}\n/*!@.hero__bg-wrap*/.hero__bg-wrap.sc-nano-hero {\n overflow: hidden;\n}\n/*!@.hero__bg-slot*/.hero__bg-slot.sc-nano-hero {\n position: absolute;\n inset: 0;\n}\n/*!@.hero__ctas*/.hero__ctas.sc-nano-hero {\n display: flex;\n justify-content: flex-end;\n padding-block: 32px 0;\n padding-inline: 32px;\n margin-block-end: -64px;\n position: relative;\n z-index: 1;\n}\n@media (max-width: 52em) {\n /*!@.hero__ctas*/.hero__ctas.sc-nano-hero {\n display: none;\n }\n}\n@media (max-width: 58em) {\n /*!@.hero__ctas*/.hero__ctas.sc-nano-hero {\n margin-block-end: -48px;\n }\n}\n/*!@.hero__ctas ::slotted(a.button[slot=secondary-ctas])*/.hero__ctas .sc-nano-hero-s > a.button[slot=secondary-ctas] {\n padding-inline: 0.5rem !important;\n font-size: 0.875rem !important;\n margin-block: 0 !important;\n margin-inline: 0.25rem !important;\n}\n/*!@.hero__img*/.hero__img.sc-nano-hero {\n display: block;\n --padding: inherit;\n}\n/*!@.hero__breadcrumbs*/.hero__breadcrumbs.sc-nano-hero {\n display: none;\n margin-block: 20px 0;\n margin-inline: 14px;\n line-height: 14px;\n}\n/*!@.hero--breadcrumb .hero__breadcrumbs*/.hero--breadcrumb.sc-nano-hero .hero__breadcrumbs.sc-nano-hero {\n display: block;\n}\n@container (min-width: 800px) {\n .hero__breadcrumbs {\n margin-block: 0;\n margin-inline: 50px;\n max-inline-size: 50%;\n }\n}\n@container (min-width: 900px) {\n .hero__breadcrumbs {\n margin-block: 0;\n margin-inline: 83px;\n }\n}\n/*!@.hero__breadcrumbs ::slotted(*[slot=breadcrumb])*/.hero__breadcrumbs .sc-nano-hero-s > *[slot=breadcrumb] {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 600;\n font-stretch: 125%;\n display: inline-block;\n margin-block-end: 16px;\n position: relative;\n z-index: 2;\n}\n/*!@.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb])*/.hero--hasbg .hero__breadcrumbs .sc-nano-hero-s > *[slot=breadcrumb] {\n text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n/*!@.hero__breadcrumbs ::slotted(a[slot=breadcrumb])*/.hero__breadcrumbs .sc-nano-hero-s > a[slot=breadcrumb] {\n color: var(--theme-tint-color) !important;\n cursor: pointer;\n}\n/*!@.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb])*/.hero__breadcrumbs .sc-nano-hero-s > .slash[slot=breadcrumb] {\n color: var(--theme-color);\n position: relative;\n margin-block: 0;\n margin-inline: 0.5rem;\n display: inline-block;\n}\n/*!@.hero__scrim*/.hero__scrim.sc-nano-hero {\n position: absolute;\n inset: 0;\n z-index: 0;\n background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n/*!@.hero--scrim .hero__scrim*/.hero--scrim.sc-nano-hero .hero__scrim.sc-nano-hero {\n background: none;\n}\n/*!@.hero__content*/.hero__content.sc-nano-hero {\n max-inline-size: 1440px;\n display: block;\n --grid-row-gap: 0;\n margin-block: 0;\n margin-inline: auto;\n position: relative;\n}\n@container (min-width: 800px) {\n .hero__content {\n margin-block: 50px 0 !important;\n max-inline-size: 1540px !important;\n }\n}\n@container (min-width: 900px) {\n .hero__content {\n margin-block: 83px 0 !important;\n max-inline-size: 1606px !important;\n }\n}\n/*!@.hero__primary*/.hero__primary.sc-nano-hero {\n margin: 16px;\n}\n/*!@.hero--breadcrumb .hero__primary*/.hero--breadcrumb.sc-nano-hero .hero__primary.sc-nano-hero {\n margin-block: 0;\n margin-inline: 16px;\n}\n/*!@.hero--backbtn .hero__primary*/.hero--backbtn.sc-nano-hero .hero__primary.sc-nano-hero {\n margin-inline-start: 0;\n}\n/*!@.hero__primary ::slotted(nano-icon-button[slot=back-btn])*/.hero__primary .sc-nano-hero-s > nano-icon-button[slot=back-btn] {\n font-size: 2rem;\n}\n@container (min-width: 800px) {\n .hero__primary {\n margin-block: 0 50px !important;\n margin-inline: 50px 0 !important;\n }\n .hero__primary.sc-nano-hero-s > nano-icon-button[slot=back-btn], \n .hero__primary .sc-nano-hero-s > nano-icon-button[slot=back-btn] {\n margin-block: 0 !important;\n margin-inline: -3rem 0 !important;\n }\n}\n@container (min-width: 900px) {\n .hero__primary {\n margin-block: 0 83px !important;\n margin-inline: 83px 0 !important;\n }\n}\n/*!@.hero__primary-content*/.hero__primary-content.sc-nano-hero {\n max-inline-size: 45rem;\n --color: #fff;\n display: flex;\n}\n/*!@.hero--backbtn .hero__primary-content > div*/.hero--backbtn.sc-nano-hero .hero__primary-content.sc-nano-hero > div.sc-nano-hero {\n padding-block: 10px 0;\n padding-inline: 0;\n}\n/*!@.hero__primary-content ::slotted(h1[slot=primary-content])*/.hero__primary-content .sc-nano-hero-s > h1[slot=primary-content] {\n line-height: 26px !important;\n margin-block: 0 18px !important;\n font-size: 2rem !important;\n}\n@container (min-width: 800px) {\n .hero__primary-content.sc-nano-hero-s > h1[slot=primary-content], \n@container (min-width: 800px) {\n .hero__primary-content .sc-nano-hero-s > h1[slot=primary-content] {\n line-height: 31px !important;\n margin-block-end: 30px !important;\n }\n .hero__primary-content.sc-nano-hero-s > .button[slot=primary-content], \n .hero__primary-content .sc-nano-hero-s > .button[slot=primary-content] {\n margin-block-start: 20px !important;\n }\n}\n/*!@.hero__secondary*/.hero__secondary.sc-nano-hero {\n display: none;\n block-size: 100%;\n padding-block: 0 20px;\n padding-inline: 14px;\n}\n/*!@.hero--secondary .hero__secondary*/.hero--secondary.sc-nano-hero .hero__secondary.sc-nano-hero {\n display: flex;\n align-items: center;\n}\n@container (min-width: 800px) {\n .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 50px;\n justify-content: flex-end;\n }\n}\n@container (min-width: 900px) {\n .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 83px;\n }\n}\n/*!@.hero__icon-box*/.hero__icon-box.sc-nano-hero {\n background: rgba(0, 0, 0, 0.7);\n padding: 24px;\n inline-size: 100%;\n margin-block-end: auto;\n display: flex;\n flex-direction: column;\n color: white;\n}\n@container (min-width: 800px) {\n .hero__icon-box {\n max-inline-size: 410px;\n flex: 0 1 410px;\n }\n}\n/*!@.hero__icon-box ::slotted([slot=icon-box-item])*/.hero__icon-box .sc-nano-hero-s > [slot=icon-box-item] {\n --nano-color-base: var(--theme-tint-color);\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n display: flex;\n align-items: center;\n font-size: 0.8125rem;\n margin-block-end: 20px;\n}\n/*!@.hero__icon-box ::slotted(.last[slot=icon-box-item])*/.hero__icon-box .sc-nano-hero-s > .last[slot=icon-box-item] {\n margin-block-end: 0;\n}\n/*!@.hero__quote-content*/.hero__quote-content.sc-nano-hero {\n margin-block-start: auto;\n text-align: center;\n inline-size: 100%;\n}\n@container (min-width: 800px) {\n .hero__quote-content {\n max-inline-size: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n}\n/*!@.hero__quote::before, .hero__quote::after*/.hero__quote.sc-nano-hero::before, .hero__quote.sc-nano-hero::after {\n content: '\"';\n font-size: var(--quote-size);\n font-weight: 700;\n font-style: italic;\n line-height: 0;\n color: #abb6b8;\n display: inline;\n position: relative;\n}\n/*!@.hero__quote ::slotted([slot=quote])*/.hero__quote .sc-nano-hero-s > [slot=quote] {\n font-size: var(--quote-size);\n font-weight: 300;\n font-style: italic;\n display: inline;\n}\n/*!@.hero__quote-author*/.hero__quote-author.sc-nano-hero {\n text-align: end;\n font-size: 1rem;\n opacity: 0.8;\n}\n@container (min-width: 800px) {\n .hero--sub .hero__content {\n margin-block-start: 40px;\n }\n .hero--sub .hero__content .hero__primary {\n margin-block: 0 40px;\n margin-inline: 50px 0;\n }\n .hero--sub .hero__content .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 40px 50px;\n }\n .hero--sub .hero__content.sc-nano-hero-s > .button[slot=primary-content], \n .hero--sub .hero__content .sc-nano-hero-s > .button[slot=primary-content] {\n margin-block-start: 8px !important;\n }\n .hero--sub .hero__content.sc-nano-hero-s > h1[slot=primary-content], \n .hero--sub .hero__content .sc-nano-hero-s > h1[slot=primary-content] {\n margin-block-end: 18px !important;\n }\n}\n@container (min-width: 900px) {\n .hero--sub .hero__content .hero__primary {\n margin-block: 0 40px;\n margin-inline: 83px 0;\n }\n .hero--sub .hero__content .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 40px 83px;\n }\n}";
19442
19438
 
19443
19439
  /**
19444
19440
  * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.
@@ -20516,6 +20512,163 @@ class Input {
20516
20512
  }; }
20517
20513
  }
20518
20514
 
20515
+ /**
20516
+ * Attempts to find the closest scrolling parental element
20517
+ * @param element - the element from which to traverse up the DOM
20518
+ * @returns - the closest scrolling parental element
20519
+ */
20520
+ function findScrollParent(element) {
20521
+ let style = getComputedStyle(element);
20522
+ const excludeStaticParent = style.position === 'absolute';
20523
+ const overflowRegex = /(auto|scroll)/;
20524
+ if (style.position === 'fixed')
20525
+ return document.documentElement;
20526
+ for (let parent = element; (parent = parent.parentElement);) {
20527
+ style = getComputedStyle(parent);
20528
+ if (excludeStaticParent && style.position === 'static') {
20529
+ continue;
20530
+ }
20531
+ if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) {
20532
+ return parent;
20533
+ }
20534
+ }
20535
+ return document.documentElement;
20536
+ }
20537
+
20538
+ /**
20539
+ * A thin, declarative interface to the IntersectionObserver API.
20540
+ * @slot - Main slot for any content.
20541
+ */
20542
+ class IntersectionObserve {
20543
+ constructor(hostRef) {
20544
+ registerInstance(this, hostRef);
20545
+ this.nanoIntersectionChange = createEvent(this, "nanoIntersectionChange", 7);
20546
+ this.nanoIntersecting = createEvent(this, "nanoIntersecting", 7);
20547
+ this.nanoNotIntersecting = createEvent(this, "nanoNotIntersecting", 7);
20548
+ this.ioCallback = (entries) => {
20549
+ entries.forEach((entry) => {
20550
+ this.nanoIntersectionChange.emit(entry);
20551
+ if (entry.isIntersecting)
20552
+ this.nanoIntersecting.emit(entry);
20553
+ if (!entry.isIntersecting)
20554
+ this.nanoNotIntersecting.emit(entry);
20555
+ });
20556
+ };
20557
+ this.handleSlotChange = () => {
20558
+ this.addIO();
20559
+ };
20560
+ this.root = 'auto';
20561
+ this.rootMargin = undefined;
20562
+ this.threshold = undefined;
20563
+ }
20564
+ get observerOptions() {
20565
+ const opts = {};
20566
+ if (!!this._root)
20567
+ opts.root = this._root;
20568
+ if (this.rootMargin)
20569
+ opts.rootMargin = this.rootMargin;
20570
+ if (this.threshold)
20571
+ opts.threshold = this._threshold;
20572
+ return opts;
20573
+ }
20574
+ get elements() {
20575
+ const slotted = this.defaultSlot?.assignedElements() || [];
20576
+ return slotted.flatMap((el) => {
20577
+ const style = getComputedStyle(el);
20578
+ if (style.display.includes('contents'))
20579
+ return Array.from(el.children);
20580
+ else
20581
+ return el;
20582
+ });
20583
+ }
20584
+ handleRootChange() {
20585
+ if (!this.root) {
20586
+ this._root = undefined;
20587
+ this.removeIO();
20588
+ return;
20589
+ }
20590
+ let newRoot;
20591
+ if (this.root === 'auto') {
20592
+ // try to find nearest scrolling parent
20593
+ newRoot = findScrollParent(this.host);
20594
+ }
20595
+ else if (this.root === 'root') {
20596
+ newRoot = undefined;
20597
+ }
20598
+ else {
20599
+ // root is set explicitly
20600
+ newRoot = this.root;
20601
+ }
20602
+ // if it's the document - unset as that's IO's default
20603
+ if (newRoot === document.documentElement)
20604
+ newRoot = undefined;
20605
+ // if new root is what we already have - ignore
20606
+ if (newRoot === this._root)
20607
+ return;
20608
+ // cache and setup io
20609
+ this._root = newRoot;
20610
+ this.addIO();
20611
+ }
20612
+ handleThresholdChange() {
20613
+ if (!this.threshold) {
20614
+ this._threshold = undefined;
20615
+ return;
20616
+ }
20617
+ if (this.threshold.includes(',')) {
20618
+ this._threshold = this.threshold
20619
+ .split(',')
20620
+ .map((numStr) => Number(numStr));
20621
+ return;
20622
+ }
20623
+ this._threshold = Number(this.threshold);
20624
+ }
20625
+ addIO() {
20626
+ if (!window['IntersectionObserver'] || !this.elements?.length)
20627
+ return;
20628
+ if (this.io)
20629
+ this.removeIO();
20630
+ const io = (this.io = new IntersectionObserver(this.ioCallback, this.observerOptions));
20631
+ this.elements?.forEach((el) => {
20632
+ io.observe(el);
20633
+ });
20634
+ }
20635
+ removeIO() {
20636
+ if (!this.io)
20637
+ return;
20638
+ this.io.disconnect();
20639
+ this.io = undefined;
20640
+ }
20641
+ connectedCallback() {
20642
+ this.handleThresholdChange();
20643
+ this.handleRootChange();
20644
+ }
20645
+ disconnectedCallback() {
20646
+ this.removeIO();
20647
+ this.root = this._root = undefined;
20648
+ }
20649
+ render() {
20650
+ return (hAsync("slot", { ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange }));
20651
+ }
20652
+ get host() { return getElement(this); }
20653
+ static get watchers() { return {
20654
+ "root": ["handleRootChange"],
20655
+ "threshold": ["handleThresholdChange"]
20656
+ }; }
20657
+ static get style() { return "/*!@nano-intersection-observe*/nano-intersection-observe.sc-nano-intersection-observe { display: contents }"; }
20658
+ static get cmpMeta() { return {
20659
+ "$flags$": 9,
20660
+ "$tagName$": "nano-intersection-observe",
20661
+ "$members$": {
20662
+ "root": [1],
20663
+ "rootMargin": [1, "root-margin"],
20664
+ "threshold": [1]
20665
+ },
20666
+ "$listeners$": undefined,
20667
+ "$lazyBundleId$": "-",
20668
+ "$attrsToReflect$": []
20669
+ }; }
20670
+ }
20671
+
20519
20672
  const menuCss = "/*!@:host*/.sc-nano-menu-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-menu,*.sc-nano-menu::before,*.sc-nano-menu::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-menu{display:none !important}/*!@:host*/.sc-nano-menu-h{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}/*!@.menu*/.menu.sc-nano-menu{font-size:var(--font-size, 0.9em);overscroll-behavior:none;min-inline-size:var(--width);position:relative}/*!@.menu:focus*/.menu.sc-nano-menu:focus{outline:none}/*!@::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot))*/.sc-nano-menu-s>*:not(nano-nav-item):not(nano-option):not(hr):not(slot){padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:block}";
20520
20673
 
20521
20674
  /**
@@ -20918,120 +21071,1347 @@ class MenuDrawer {
20918
21071
  }; }
20919
21072
  }
20920
21073
 
20921
- const navItemCss = "/*!@:host*/.sc-nano-nav-item-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-nav-item,*.sc-nano-nav-item::before,*.sc-nano-nav-item::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-nav-item{display:none !important}/*!@:host*/.sc-nano-nav-item-h{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}/*!@:host .nav-item,\n:host .link*/.sc-nano-nav-item-h .nav-item.sc-nano-nav-item,.sc-nano-nav-item-h .link.sc-nano-nav-item{outline:none !important;border-radius:inherit}/*!@:host ::slotted(*),\n:host **/.sc-nano-nav-item-h .sc-nano-nav-item-s>*,.sc-nano-nav-item-h *.sc-nano-nav-item{box-sizing:border-box}/*!@:host ::slotted(button),\n:host button*/.sc-nano-nav-item-h .sc-nano-nav-item-s>button,.sc-nano-nav-item-h button.sc-nano-nav-item{background:none;border:none;margin:0}/*!@:host ::slotted(button),\n:host ::slotted(a),\n:host ::slotted(a:visited),\n:host button,\n:host a,\n:host a:visited*/.sc-nano-nav-item-h .sc-nano-nav-item-s>button,.sc-nano-nav-item-h .sc-nano-nav-item-s>a,.sc-nano-nav-item-h .sc-nano-nav-item-s>a:visited,.sc-nano-nav-item-h button.sc-nano-nav-item,.sc-nano-nav-item-h a.sc-nano-nav-item,.sc-nano-nav-item-h a.sc-nano-nav-item:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}/*!@:host ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h .sc-nano-nav-item-s>nano-icon[slot=icon-start]{padding-inline-end:var(--padding-end)}/*!@:host ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h .sc-nano-nav-item-s>nano-icon[slot=icon-end]{padding-inline-start:var(--padding-start)}/*!@:host .link ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h .link .sc-nano-nav-item-s>nano-icon[slot=icon-start]{padding-inline:var(--padding-start) 0}/*!@:host .link ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h .link .sc-nano-nav-item-s>nano-icon[slot=icon-end]{padding-inline:0 var(--padding-end)}/*!@:host .link,\n:host button,\n:host a*/.sc-nano-nav-item-h .link.sc-nano-nav-item,.sc-nano-nav-item-h button.sc-nano-nav-item,.sc-nano-nav-item-h a.sc-nano-nav-item{border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}/*!@:host .secondary-menu*/.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{display:none}/*!@:host ::slotted(a:hover),\n:host ::slotted(button:hover),\n:host .link:hover,\n:host button:hover,\n:host a:hover*/.sc-nano-nav-item-h .sc-nano-nav-item-s>a:hover,.sc-nano-nav-item-h .sc-nano-nav-item-s>button:hover,.sc-nano-nav-item-h .link.sc-nano-nav-item:hover,.sc-nano-nav-item-h button.sc-nano-nav-item:hover,.sc-nano-nav-item-h a.sc-nano-nav-item:hover{text-decoration:inherit !important}/*!@:host button:focus-visible,\n:host a:focus-visible*/.sc-nano-nav-item-h button.sc-nano-nav-item:focus-visible,.sc-nano-nav-item-h a.sc-nano-nav-item:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}/*!@:host ::slotted(a:focus-visible),\n:host ::slotted(button:focus-visible)*/.sc-nano-nav-item-h .sc-nano-nav-item-s>a:focus-visible,.sc-nano-nav-item-h .sc-nano-nav-item-s>button:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}/*!@.nav-item.selected .link,\n.nav-item.selected button,\n.nav-item.selected a*/.nav-item.selected.sc-nano-nav-item .link.sc-nano-nav-item,.nav-item.selected.sc-nano-nav-item button.sc-nano-nav-item,.nav-item.selected.sc-nano-nav-item a.sc-nano-nav-item{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}/*!@.nav-item.secondary-open button,\n.nav-item.secondary-open a*/.nav-item.secondary-open.sc-nano-nav-item button.sc-nano-nav-item,.nav-item.secondary-open.sc-nano-nav-item a.sc-nano-nav-item{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}/*!@.nav-item.disabled*/.nav-item.disabled.sc-nano-nav-item{opacity:0.6}/*!@.nav-item.disabled button,\n.nav-item.disabled a*/.nav-item.disabled.sc-nano-nav-item button.sc-nano-nav-item,.nav-item.disabled.sc-nano-nav-item a.sc-nano-nav-item{color:var(--color-disabled, var(--color)) !important}/*!@.nav-item:not(.nano-menu) ::slotted(a:hover),\n.nav-item:not(.nano-menu) ::slotted(button:hover),\n.nav-item:not(.nano-menu) .link:hover,\n.nav-item:not(.nano-menu) button:hover,\n.nav-item:not(.nano-menu) a:hover*/.nav-item:not(.nano-menu) .sc-nano-nav-item-s>a:hover,.nav-item:not(.nano-menu) .sc-nano-nav-item-s>button:hover,.nav-item.sc-nano-nav-item:not(.nano-menu) .link.sc-nano-nav-item:hover,.nav-item.sc-nano-nav-item:not(.nano-menu) button.sc-nano-nav-item:hover,.nav-item.sc-nano-nav-item:not(.nano-menu) a.sc-nano-nav-item:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}/*!@:host(.has-focus) .link*/.has-focus.sc-nano-nav-item-h .link.sc-nano-nav-item{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}/*!@:host(.nano-global-nav-menu) a,\n:host(.nano-global-nav-menu) a:visited,\n:host(.nano-global-nav-menu) button,\n:host(.nano-global-nav-menu) .link,\n:host(.nano-menu) a,\n:host(.nano-menu) a:visited,\n:host(.nano-menu) button,\n:host(.nano-menu) .link*/.nano-global-nav-menu.sc-nano-nav-item-h a.sc-nano-nav-item,.nano-global-nav-menu.sc-nano-nav-item-h a.sc-nano-nav-item:visited,.nano-global-nav-menu.sc-nano-nav-item-h button.sc-nano-nav-item,.nano-global-nav-menu.sc-nano-nav-item-h .link.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h a.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h a.sc-nano-nav-item:visited,.nano-menu.sc-nano-nav-item-h button.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h .link.sc-nano-nav-item{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;inline-size:100%}/*!@:host(.nano-global-nav-menu) .text,\n:host(.nano-menu) .text*/.nano-global-nav-menu.sc-nano-nav-item-h .text.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h .text.sc-nano-nav-item{padding-inline:0 var(--padding-end);flex:1}/*!@:host(.nano-global-nav-menu) ::slotted(a),\n:host(.nano-global-nav-menu) ::slotted(button),\n:host(.nano-menu) ::slotted(a),\n:host(.nano-menu) ::slotted(button)*/.sc-nano-nav-item-h.nano-global-nav-menu .sc-nano-nav-item-s>a,.sc-nano-nav-item-h.nano-global-nav-menu .sc-nano-nav-item-s>button,.sc-nano-nav-item-h.nano-menu .sc-nano-nav-item-s>a,.sc-nano-nav-item-h.nano-menu .sc-nano-nav-item-s>button{flex:1}/*!@:host(.nano-global-nav-menu) .secondary-menu,\n:host(.nano-menu) .secondary-menu*/.nano-global-nav-menu.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-block-size:100%;inset-block-start:0;inset-inline-start:0;inline-size:100%;z-index:1;opacity:0;transition:opacity 0.3s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translate3d(100%, 0, 0)}/*!@:host(.nano-global-nav-menu) .secondary-menu:focus,\n:host(.nano-menu) .secondary-menu:focus*/.nano-global-nav-menu.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item:focus,.nano-menu.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item:focus{outline:none}/*!@:host(.nano-global-nav-menu) .secondary-menu.open,\n:host(.nano-menu) .secondary-menu.open*/.nano-global-nav-menu.sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{opacity:1;transform:translate3d(0, 0, 0);transition:opacity 0.3s ease, transform 0.3s ease}/*!@:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h.nano-global-nav-menu .sc-nano-nav-item-s>nano-icon[slot=icon-start]{padding-inline:0 var(--padding-end);padding-block:0}/*!@:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h.nano-global-nav-menu .sc-nano-nav-item-s>nano-icon[slot=icon-end]{padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}/*!@:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),\n:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h.nano-global-nav-menu button .sc-nano-nav-item-s>nano-icon[slot=icon-end],.sc-nano-nav-item-h.nano-global-nav-menu a .sc-nano-nav-item-s>nano-icon[slot=icon-end]{padding:0}/*!@:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,\n:host(.nano-menu[dir=rtl]) .secondary-menu*/.nano-global-nav-menu[dir=rtl].sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item,.nano-menu[dir=rtl].sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{transform:translateX(-100%)}/*!@:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,\n:host(.nano-menu[dir=rtl]) .secondary-menu.open*/.nano-global-nav-menu[dir=rtl].sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item,.nano-menu[dir=rtl].sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{transform:translateX(0)}/*!@:host(.nano-menu) ::slotted(a:focus),\n:host(.nano-menu) ::slotted(button:focus)*/.sc-nano-nav-item-h.nano-menu .sc-nano-nav-item-s>a:focus,.sc-nano-nav-item-h.nano-menu .sc-nano-nav-item-s>button:focus{box-shadow:none}/*!@:host(.nano-menu) .secondary-menu-content*/.nano-menu.sc-nano-nav-item-h .secondary-menu-content.sc-nano-nav-item{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}/*!@:host(.nano-global-nav-bar) .link,\n:host(.nano-global-nav-bar) a,\n:host(.nano-global-nav-bar) button*/.nano-global-nav-bar.sc-nano-nav-item-h .link.sc-nano-nav-item,.nano-global-nav-bar.sc-nano-nav-item-h a.sc-nano-nav-item,.nano-global-nav-bar.sc-nano-nav-item-h button.sc-nano-nav-item{display:flex;align-items:center;cursor:pointer}/*!@:host(.nano-global-nav-bar) .text*/.nano-global-nav-bar.sc-nano-nav-item-h .text.sc-nano-nav-item{flex:1 0 auto}/*!@:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h.nano-global-nav-bar .sc-nano-nav-item-s>nano-icon[slot=icon-end]{margin-inline:var(--padding-end) 0;margin-block:0}/*!@:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h.nano-global-nav-bar .sc-nano-nav-item-s>nano-icon[slot=icon-start]{margin-inline:0 var(--padding-start);margin-block:0}/*!@:host(.nano-global-nav-bar) ::slotted(a),\n:host(.nano-global-nav-bar) button*/.sc-nano-nav-item-h.nano-global-nav-bar .sc-nano-nav-item-s>a,.nano-global-nav-bar.sc-nano-nav-item-h button.sc-nano-nav-item{position:relative}/*!@:host(.nano-global-nav-bar) ::slotted(a)::before,\n:host(.nano-global-nav-bar) button::before*/.sc-nano-nav-item-h.nano-global-nav-bar .sc-nano-nav-item-s>a::before,.nano-global-nav-bar.sc-nano-nav-item-h button.sc-nano-nav-item::before{content:\"\";background-color:#0c5a71;block-size:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}/*!@:host(.nano-global-nav-bar) .selected button::before,\n:host(.nano-global-nav-bar) .secondary-open button::before*/.nano-global-nav-bar.sc-nano-nav-item-h .selected.sc-nano-nav-item button.sc-nano-nav-item::before,.nano-global-nav-bar.sc-nano-nav-item-h .secondary-open.sc-nano-nav-item button.sc-nano-nav-item::before{transform:translateZ(0) scaleX(1)}/*!@:host(.nano-global-nav-bar.selected) ::slotted(a)::before*/.sc-nano-nav-item-h.nano-global-nav-bar.selected .sc-nano-nav-item-s>a::before{transform:translateZ(0) scaleX(1)}/*!@:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before*/.nano-global-nav-bar.has-secondary.sc-nano-nav-item-h .secondary-open.sc-nano-nav-item button.sc-nano-nav-item::before{opacity:0.7}/*!@:host(.nano-global-nav-bar.has-secondary) .secondary-menu*/.nano-global-nav-bar.has-secondary.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}/*!@:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open*/.nano-global-nav-bar.has-secondary.sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{transform:translateY(12px) translateZ(0)}/*!@:host(.nano-menu-drawer) .link,\n:host(.nano-menu-drawer) a,\n:host(.nano-menu-drawer) button*/.nano-menu-drawer.sc-nano-nav-item-h .link.sc-nano-nav-item,.nano-menu-drawer.sc-nano-nav-item-h a.sc-nano-nav-item,.nano-menu-drawer.sc-nano-nav-item-h button.sc-nano-nav-item{padding-block:calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);padding-inline:var(--padding-start) 0;display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;inline-size:100%}/*!@:host(.nano-menu-drawer) .text*/.nano-menu-drawer.sc-nano-nav-item-h .text.sc-nano-nav-item{padding-inline:0 var(--padding-end);text-align:start;flex:0 1 auto;min-inline-size:130px;inline-size:130px}/*!@:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h.nano-menu-drawer .sc-nano-nav-item-s>nano-icon[slot=icon-start]{padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);inline-size:var(--icon-size);flex:0 0 var(--icon-size)}/*!@:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h.nano-menu-drawer .sc-nano-nav-item-s>nano-icon[slot=icon-end]{padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-inline-size:20px}/*!@:host(.nano-menu-drawer) .secondary-menu*/.nano-menu-drawer.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);block-size:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;inline-size:var(--secondary-width, 400px);max-inline-size:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}/*!@:host(.nano-menu-drawer) .secondary-menu:focus*/.nano-menu-drawer.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item:focus{outline:none}/*!@:host(.nano-menu-drawer) .secondary-menu.open*/.nano-menu-drawer.sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{transform:translateX(100%)}/*!@:host(.nano-menu-drawer) .notification*/.nano-menu-drawer.sc-nano-nav-item-h .notification.sc-nano-nav-item{position:relative}/*!@:host(.nano-menu-drawer) .notification::after*/.nano-menu-drawer.sc-nano-nav-item-h .notification.sc-nano-nav-item::after{content:\"\";display:block;position:absolute;inline-size:6px;block-size:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (min-width: 52em){/*!@:host(.nano-menu-drawer) .notification::after*/.nano-menu-drawer.sc-nano-nav-item-h .notification.sc-nano-nav-item::after{inline-size:7px;block-size:7px;inset-inline-start:8px;inset-block-start:5px}}/*!@:host(.nano-menu-drawer[dir=rtl]) .secondary-menu*/.nano-menu-drawer[dir=rtl].sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{transform:translateX(0%)}/*!@:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open*/.nano-menu-drawer[dir=rtl].sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{transform:translateX(-100%);opacity:1}";
21074
+ const bounce = [
21075
+ {
21076
+ offset: 0,
21077
+ easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
21078
+ transform: 'translate3d(0, 0, 0)',
21079
+ },
21080
+ {
21081
+ offset: 0.2,
21082
+ easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
21083
+ transform: 'translate3d(0, 0, 0)',
21084
+ },
21085
+ {
21086
+ offset: 0.4,
21087
+ easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
21088
+ transform: 'translate3d(0, -30px, 0) scaleY(1.1)',
21089
+ },
21090
+ {
21091
+ offset: 0.43,
21092
+ easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
21093
+ transform: 'translate3d(0, -30px, 0) scaleY(1.1)',
21094
+ },
21095
+ {
21096
+ offset: 0.53,
21097
+ easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
21098
+ transform: 'translate3d(0, 0, 0)',
21099
+ },
21100
+ {
21101
+ offset: 0.7,
21102
+ easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
21103
+ transform: 'translate3d(0, -15px, 0) scaleY(1.05)',
21104
+ },
21105
+ {
21106
+ offset: 0.8,
21107
+ 'transition-timing-function': 'cubic-bezier(0.215, 0.61, 0.355, 1)',
21108
+ transform: 'translate3d(0, 0, 0) scaleY(0.95)',
21109
+ },
21110
+ { offset: 0.9, transform: 'translate3d(0, -4px, 0) scaleY(1.02)' },
21111
+ {
21112
+ offset: 1,
21113
+ easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
21114
+ transform: 'translate3d(0, 0, 0)',
21115
+ },
21116
+ ];
20922
21117
 
20923
- /**
20924
- * Nav items to be used with the various nav items.
20925
- * [Globla-Nav](/story/compounds-global-nav)
20926
- * [Menu-Drawer](/story/components-menu-drawer)
20927
- * [Dropdown](/story/components-dropdown)
20928
- *
20929
- * @slot icon-start - an icon at the start of the main control
20930
- * @slot icon-end - an icon at the end of the main control
20931
- * @slot secondary - a content panel in which you can place any html to display on control click
20932
- * @slot - use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)
20933
- * @part ctrl - the controlling `<a>` or `<button>` element
20934
- * @part ctrl--button - the controlling `<button>` element
20935
- * @part ctrl--anchor - the controlling <a> element
20936
- * @part ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)
20937
- * @part secondary-wrapper - the div surrounding slotted secondary content
20938
- * @part secondary-mask - the div that is added when secondary content is shown
20939
- */
20940
- class NavItem {
20941
- constructor(hostRef) {
20942
- registerInstance(this, hostRef);
20943
- this.nanoClose = createEvent(this, "nanoClose", 7);
20944
- this.nanoOpen = createEvent(this, "nanoOpen", 7);
20945
- this.nanoOpening = createEvent(this, "nanoOpening", 7);
20946
- this.nanoClosing = createEvent(this, "nanoClosing", 7);
20947
- this.nanoBlur = createEvent(this, "nanoBlur", 7);
20948
- this.nanoFocus = createEvent(this, "nanoFocus", 7);
20949
- this.hasSecondarySlot = false;
20950
- this.animating = false;
20951
- this.closeSecondary = async () => {
20952
- if (!this.hasSecondarySlot || !this.didOpen)
20953
- return;
20954
- this.open = false;
20955
- await displayTransition(this.secondaryDiv, {
20956
- className: 'open',
20957
- show: false,
20958
- });
20959
- this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });
20960
- this.didOpen = false;
20961
- };
20962
- this.openSecondary = async () => {
20963
- if (window.innerWidth < this.secondaryActiveWidth) {
20964
- this.secondaryFallback.call(this);
20965
- return;
20966
- }
20967
- if (!this.hasSecondarySlot || this.didOpen)
20968
- return;
20969
- this.open = true;
20970
- await displayTransition(this.secondaryDiv, {
20971
- className: 'open',
20972
- show: true,
20973
- });
20974
- this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });
20975
- this.didOpen = true;
20976
- };
20977
- this.toggleSecondary = () => {
20978
- if (!this.hasSecondarySlot)
20979
- return;
20980
- if (this.didOpen)
20981
- this.closeSecondary();
20982
- else
20983
- this.openSecondary();
20984
- };
20985
- this.handleFocus = () => {
20986
- this.hasFocus = true;
20987
- // opens secondary panel when activated via hover
20988
- if (this.href && !this.animating && this.hasSecondarySlot)
20989
- this.openSecondary();
20990
- this.nanoFocus.emit();
20991
- };
20992
- this.handleHostBlur = () => {
20993
- if (this.animating)
20994
- return;
20995
- // tab index is added to host when secondary panel opens
20996
- // to return focus after secondary panel closes. Remove now if it was added
20997
- this.el.removeAttribute('tabindex');
20998
- this.hasFocus = false;
20999
- this.nanoBlur.emit();
21000
- };
21001
- // direct host clicks to internal button
21002
- this.handleHostClick = (ev) => {
21003
- if (!this.hasAnchorEle)
21004
- return;
21005
- const foundlink = ev.target.closest('a, button');
21006
- if (!foundlink)
21007
- this.btn.click();
21008
- };
21009
- // handles secondary menu hover behaviour.
21010
- this.handleMouseEnter = async () => {
21011
- if (!this.href ||
21012
- this.animating ||
21013
- !this.hasSecondarySlot ||
21014
- (this.globalNavEle && !this.globalNavEle.classList.contains('ready')))
21015
- return;
21016
- // if there are sibling secondary panels currently open,
21017
- // we need to wait before opening otherwise we get unwanted overlapping
21018
- let timeToWait = 0;
21019
- if (getSiblings(this.el, '.secondary-open.has-secondary').length)
21020
- timeToWait = 300;
21021
- clearTimeout(this.waitHide);
21022
- this.fromHover = true;
21023
- this.animating = true;
21024
- this.waitShow = window.setTimeout(async () => await this.openSecondary(), timeToWait);
21025
- this.animating = false;
21026
- };
21027
- // handles secondary menu hover-out behaviour.
21028
- this.handleMouseLeave = () => {
21029
- if (!this.href)
21030
- return;
21031
- clearTimeout(this.waitShow);
21032
- this.fromHover = true;
21033
- this.animating = true;
21034
- // prevent closing immediately - makes navigating to items within more forgiving
21118
+ const flash = [
21119
+ { offset: 0, opacity: '1' },
21120
+ { offset: 0.25, opacity: '0' },
21121
+ { offset: 0.5, opacity: '1' },
21122
+ { offset: 0.75, opacity: '0' },
21123
+ { offset: 1, opacity: '1' },
21124
+ ];
21125
+
21126
+ const headShake = [
21127
+ { offset: 0, transform: 'translateX(0)' },
21128
+ { offset: 0.065, transform: 'translateX(-6px) rotateY(-9deg)' },
21129
+ { offset: 0.185, transform: 'translateX(5px) rotateY(7deg)' },
21130
+ { offset: 0.315, transform: 'translateX(-3px) rotateY(-5deg)' },
21131
+ { offset: 0.435, transform: 'translateX(2px) rotateY(3deg)' },
21132
+ { offset: 0.5, transform: 'translateX(0)' },
21133
+ ];
21134
+
21135
+ const heartBeat = [
21136
+ { offset: 0, transform: 'scale(1)' },
21137
+ { offset: 0.14, transform: 'scale(1.3)' },
21138
+ { offset: 0.28, transform: 'scale(1)' },
21139
+ { offset: 0.42, transform: 'scale(1.3)' },
21140
+ { offset: 0.7, transform: 'scale(1)' },
21141
+ ];
21142
+
21143
+ const jello = [
21144
+ { offset: 0, transform: 'translate3d(0, 0, 0)' },
21145
+ { offset: 0.111, transform: 'translate3d(0, 0, 0)' },
21146
+ { offset: 0.222, transform: 'skewX(-12.5deg) skewY(-12.5deg)' },
21147
+ { offset: 0.33299999999999996, transform: 'skewX(6.25deg) skewY(6.25deg)' },
21148
+ { offset: 0.444, transform: 'skewX(-3.125deg) skewY(-3.125deg)' },
21149
+ { offset: 0.555, transform: 'skewX(1.5625deg) skewY(1.5625deg)' },
21150
+ {
21151
+ offset: 0.6659999999999999,
21152
+ transform: 'skewX(-0.78125deg) skewY(-0.78125deg)',
21153
+ },
21154
+ { offset: 0.777, transform: 'skewX(0.390625deg) skewY(0.390625deg)' },
21155
+ { offset: 0.888, transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)' },
21156
+ { offset: 1, transform: 'translate3d(0, 0, 0)' },
21157
+ ];
21158
+
21159
+ const pulse = [
21160
+ { offset: 0, transform: 'scale3d(1, 1, 1)' },
21161
+ { offset: 0.5, transform: 'scale3d(1.05, 1.05, 1.05)' },
21162
+ { offset: 1, transform: 'scale3d(1, 1, 1)' },
21163
+ ];
21164
+
21165
+ const rubberBand = [
21166
+ { offset: 0, transform: 'scale3d(1, 1, 1)' },
21167
+ { offset: 0.3, transform: 'scale3d(1.25, 0.75, 1)' },
21168
+ { offset: 0.4, transform: 'scale3d(0.75, 1.25, 1)' },
21169
+ { offset: 0.5, transform: 'scale3d(1.15, 0.85, 1)' },
21170
+ { offset: 0.65, transform: 'scale3d(0.95, 1.05, 1)' },
21171
+ { offset: 0.75, transform: 'scale3d(1.05, 0.95, 1)' },
21172
+ { offset: 1, transform: 'scale3d(1, 1, 1)' },
21173
+ ];
21174
+
21175
+ const shake = [
21176
+ { offset: 0, transform: 'translate3d(0, 0, 0)' },
21177
+ { offset: 0.1, transform: 'translate3d(-10px, 0, 0)' },
21178
+ { offset: 0.2, transform: 'translate3d(10px, 0, 0)' },
21179
+ { offset: 0.3, transform: 'translate3d(-10px, 0, 0)' },
21180
+ { offset: 0.4, transform: 'translate3d(10px, 0, 0)' },
21181
+ { offset: 0.5, transform: 'translate3d(-10px, 0, 0)' },
21182
+ { offset: 0.6, transform: 'translate3d(10px, 0, 0)' },
21183
+ { offset: 0.7, transform: 'translate3d(-10px, 0, 0)' },
21184
+ { offset: 0.8, transform: 'translate3d(10px, 0, 0)' },
21185
+ { offset: 0.9, transform: 'translate3d(-10px, 0, 0)' },
21186
+ { offset: 1, transform: 'translate3d(0, 0, 0)' },
21187
+ ];
21188
+
21189
+ const shakeX = [
21190
+ { offset: 0, transform: 'translate3d(0, 0, 0)' },
21191
+ { offset: 0.1, transform: 'translate3d(-10px, 0, 0)' },
21192
+ { offset: 0.2, transform: 'translate3d(10px, 0, 0)' },
21193
+ { offset: 0.3, transform: 'translate3d(-10px, 0, 0)' },
21194
+ { offset: 0.4, transform: 'translate3d(10px, 0, 0)' },
21195
+ { offset: 0.5, transform: 'translate3d(-10px, 0, 0)' },
21196
+ { offset: 0.6, transform: 'translate3d(10px, 0, 0)' },
21197
+ { offset: 0.7, transform: 'translate3d(-10px, 0, 0)' },
21198
+ { offset: 0.8, transform: 'translate3d(10px, 0, 0)' },
21199
+ { offset: 0.9, transform: 'translate3d(-10px, 0, 0)' },
21200
+ { offset: 1, transform: 'translate3d(0, 0, 0)' },
21201
+ ];
21202
+
21203
+ const shakeY = [
21204
+ { offset: 0, transform: 'translate3d(0, 0, 0)' },
21205
+ { offset: 0.1, transform: 'translate3d(0, -10px, 0)' },
21206
+ { offset: 0.2, transform: 'translate3d(0, 10px, 0)' },
21207
+ { offset: 0.3, transform: 'translate3d(0, -10px, 0)' },
21208
+ { offset: 0.4, transform: 'translate3d(0, 10px, 0)' },
21209
+ { offset: 0.5, transform: 'translate3d(0, -10px, 0)' },
21210
+ { offset: 0.6, transform: 'translate3d(0, 10px, 0)' },
21211
+ { offset: 0.7, transform: 'translate3d(0, -10px, 0)' },
21212
+ { offset: 0.8, transform: 'translate3d(0, 10px, 0)' },
21213
+ { offset: 0.9, transform: 'translate3d(0, -10px, 0)' },
21214
+ { offset: 1, transform: 'translate3d(0, 0, 0)' },
21215
+ ];
21216
+
21217
+ const swing = [
21218
+ { offset: 0.2, transform: 'rotate3d(0, 0, 1, 15deg)' },
21219
+ { offset: 0.4, transform: 'rotate3d(0, 0, 1, -10deg)' },
21220
+ { offset: 0.6, transform: 'rotate3d(0, 0, 1, 5deg)' },
21221
+ { offset: 0.8, transform: 'rotate3d(0, 0, 1, -5deg)' },
21222
+ { offset: 1, transform: 'rotate3d(0, 0, 1, 0deg)' },
21223
+ ];
21224
+
21225
+ const tada = [
21226
+ { offset: 0, transform: 'scale3d(1, 1, 1)' },
21227
+ { offset: 0.1, transform: 'scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)' },
21228
+ { offset: 0.2, transform: 'scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)' },
21229
+ { offset: 0.3, transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)' },
21230
+ { offset: 0.4, transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)' },
21231
+ { offset: 0.5, transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)' },
21232
+ { offset: 0.6, transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)' },
21233
+ { offset: 0.7, transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)' },
21234
+ { offset: 0.8, transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)' },
21235
+ { offset: 0.9, transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)' },
21236
+ { offset: 1, transform: 'scale3d(1, 1, 1)' },
21237
+ ];
21238
+
21239
+ const wobble = [
21240
+ { offset: 0, transform: 'translate3d(0, 0, 0)' },
21241
+ {
21242
+ offset: 0.15,
21243
+ transform: 'translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)',
21244
+ },
21245
+ { offset: 0.3, transform: 'translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)' },
21246
+ {
21247
+ offset: 0.45,
21248
+ transform: 'translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)',
21249
+ },
21250
+ { offset: 0.6, transform: 'translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)' },
21251
+ {
21252
+ offset: 0.75,
21253
+ transform: 'translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)',
21254
+ },
21255
+ { offset: 1, transform: 'translate3d(0, 0, 0)' },
21256
+ ];
21257
+
21258
+ const backInDown = [
21259
+ { offset: 0, transform: 'translateY(-1200px) scale(0.7)', opacity: '0.7' },
21260
+ { offset: 0.8, transform: 'translateY(0px) scale(0.7)', opacity: '0.7' },
21261
+ { offset: 1, transform: 'scale(1)', opacity: '1' },
21262
+ ];
21263
+
21264
+ const backInLeft = [
21265
+ { offset: 0, transform: 'translateX(-2000px) scale(0.7)', opacity: '0.7' },
21266
+ { offset: 0.8, transform: 'translateX(0px) scale(0.7)', opacity: '0.7' },
21267
+ { offset: 1, transform: 'scale(1)', opacity: '1' },
21268
+ ];
21269
+
21270
+ const backInRight = [
21271
+ { offset: 0, transform: 'translateX(2000px) scale(0.7)', opacity: '0.7' },
21272
+ { offset: 0.8, transform: 'translateX(0px) scale(0.7)', opacity: '0.7' },
21273
+ { offset: 1, transform: 'scale(1)', opacity: '1' },
21274
+ ];
21275
+
21276
+ const backInUp = [
21277
+ { offset: 0, transform: 'translateY(1200px) scale(0.7)', opacity: '0.7' },
21278
+ { offset: 0.8, transform: 'translateY(0px) scale(0.7)', opacity: '0.7' },
21279
+ { offset: 1, transform: 'scale(1)', opacity: '1' },
21280
+ ];
21281
+
21282
+ const backOutDown = [
21283
+ { offset: 0, transform: 'scale(1)', opacity: '1' },
21284
+ { offset: 0.2, transform: 'translateY(0px) scale(0.7)', opacity: '0.7' },
21285
+ { offset: 1, transform: 'translateY(700px) scale(0.7)', opacity: '0.7' },
21286
+ ];
21287
+
21288
+ const backOutLeft = [
21289
+ { offset: 0, transform: 'scale(1)', opacity: '1' },
21290
+ { offset: 0.2, transform: 'translateX(0px) scale(0.7)', opacity: '0.7' },
21291
+ { offset: 1, transform: 'translateX(-2000px) scale(0.7)', opacity: '0.7' },
21292
+ ];
21293
+
21294
+ const backOutRight = [
21295
+ { offset: 0, transform: 'scale(1)', opacity: '1' },
21296
+ { offset: 0.2, transform: 'translateX(0px) scale(0.7)', opacity: '0.7' },
21297
+ { offset: 1, transform: 'translateX(2000px) scale(0.7)', opacity: '0.7' },
21298
+ ];
21299
+
21300
+ const backOutUp = [
21301
+ { offset: 0, transform: 'scale(1)', opacity: '1' },
21302
+ { offset: 0.2, transform: 'translateY(0px) scale(0.7)', opacity: '0.7' },
21303
+ { offset: 1, transform: 'translateY(-700px) scale(0.7)', opacity: '0.7' },
21304
+ ];
21305
+
21306
+ const bounceIn = [
21307
+ { offset: 0, opacity: '0', transform: 'scale3d(0.3, 0.3, 0.3)' },
21308
+ { offset: 0, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21309
+ { offset: 0.2, transform: 'scale3d(1.1, 1.1, 1.1)' },
21310
+ { offset: 0.2, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21311
+ { offset: 0.4, transform: 'scale3d(0.9, 0.9, 0.9)' },
21312
+ { offset: 0.4, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21313
+ { offset: 0.6, opacity: '1', transform: 'scale3d(1.03, 1.03, 1.03)' },
21314
+ { offset: 0.6, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21315
+ { offset: 0.8, transform: 'scale3d(0.97, 0.97, 0.97)' },
21316
+ { offset: 0.8, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21317
+ { offset: 1, opacity: '1', transform: 'scale3d(1, 1, 1)' },
21318
+ { offset: 1, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21319
+ ];
21320
+
21321
+ const bounceInDown = [
21322
+ {
21323
+ offset: 0,
21324
+ opacity: '0',
21325
+ transform: 'translate3d(0, -3000px, 0) scaleY(3)',
21326
+ },
21327
+ { offset: 0, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21328
+ {
21329
+ offset: 0.6,
21330
+ opacity: '1',
21331
+ transform: 'translate3d(0, 25px, 0) scaleY(0.9)',
21332
+ },
21333
+ { offset: 0.6, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21334
+ { offset: 0.75, transform: 'translate3d(0, -10px, 0) scaleY(0.95)' },
21335
+ { offset: 0.75, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21336
+ { offset: 0.9, transform: 'translate3d(0, 5px, 0) scaleY(0.985)' },
21337
+ { offset: 0.9, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21338
+ { offset: 1, transform: 'translate3d(0, 0, 0)' },
21339
+ { offset: 1, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21340
+ ];
21341
+
21342
+ const bounceInLeft = [
21343
+ {
21344
+ offset: 0,
21345
+ opacity: '0',
21346
+ transform: 'translate3d(-3000px, 0, 0) scaleX(3)',
21347
+ },
21348
+ { offset: 0, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21349
+ { offset: 0.6, opacity: '1', transform: 'translate3d(25px, 0, 0) scaleX(1)' },
21350
+ { offset: 0.6, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21351
+ { offset: 0.75, transform: 'translate3d(-10px, 0, 0) scaleX(0.98)' },
21352
+ { offset: 0.75, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21353
+ { offset: 0.9, transform: 'translate3d(5px, 0, 0) scaleX(0.995)' },
21354
+ { offset: 0.9, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21355
+ { offset: 1, transform: 'translate3d(0, 0, 0)' },
21356
+ { offset: 1, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21357
+ ];
21358
+
21359
+ const bounceInRight = [
21360
+ { offset: 0, opacity: '0', transform: 'translate3d(3000px, 0, 0) scaleX(3)' },
21361
+ { offset: 0, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21362
+ {
21363
+ offset: 0.6,
21364
+ opacity: '1',
21365
+ transform: 'translate3d(-25px, 0, 0) scaleX(1)',
21366
+ },
21367
+ { offset: 0.6, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21368
+ { offset: 0.75, transform: 'translate3d(10px, 0, 0) scaleX(0.98)' },
21369
+ { offset: 0.75, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21370
+ { offset: 0.9, transform: 'translate3d(-5px, 0, 0) scaleX(0.995)' },
21371
+ { offset: 0.9, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21372
+ { offset: 1, transform: 'translate3d(0, 0, 0)' },
21373
+ { offset: 1, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21374
+ ];
21375
+
21376
+ const bounceInUp = [
21377
+ { offset: 0, opacity: '0', transform: 'translate3d(0, 3000px, 0) scaleY(5)' },
21378
+ { offset: 0, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21379
+ {
21380
+ offset: 0.6,
21381
+ opacity: '1',
21382
+ transform: 'translate3d(0, -20px, 0) scaleY(0.9)',
21383
+ },
21384
+ { offset: 0.6, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21385
+ { offset: 0.75, transform: 'translate3d(0, 10px, 0) scaleY(0.95)' },
21386
+ { offset: 0.75, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21387
+ { offset: 0.9, transform: 'translate3d(0, -5px, 0) scaleY(0.985)' },
21388
+ { offset: 0.9, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21389
+ { offset: 1, transform: 'translate3d(0, 0, 0)' },
21390
+ { offset: 1, easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
21391
+ ];
21392
+
21393
+ const bounceOut = [
21394
+ { offset: 0.2, transform: 'scale3d(0.9, 0.9, 0.9)' },
21395
+ { offset: 0.5, opacity: '1', transform: 'scale3d(1.1, 1.1, 1.1)' },
21396
+ { offset: 0.55, opacity: '1', transform: 'scale3d(1.1, 1.1, 1.1)' },
21397
+ { offset: 1, opacity: '0', transform: 'scale3d(0.3, 0.3, 0.3)' },
21398
+ ];
21399
+
21400
+ const bounceOutDown = [
21401
+ { offset: 0.2, transform: 'translate3d(0, 10px, 0) scaleY(0.985)' },
21402
+ {
21403
+ offset: 0.4,
21404
+ opacity: '1',
21405
+ transform: 'translate3d(0, -20px, 0) scaleY(0.9)',
21406
+ },
21407
+ {
21408
+ offset: 0.45,
21409
+ opacity: '1',
21410
+ transform: 'translate3d(0, -20px, 0) scaleY(0.9)',
21411
+ },
21412
+ { offset: 1, opacity: '0', transform: 'translate3d(0, 2000px, 0) scaleY(3)' },
21413
+ ];
21414
+
21415
+ const bounceOutLeft = [
21416
+ {
21417
+ offset: 0.2,
21418
+ opacity: '1',
21419
+ transform: 'translate3d(20px, 0, 0) scaleX(0.9)',
21420
+ },
21421
+ {
21422
+ offset: 1,
21423
+ opacity: '0',
21424
+ transform: 'translate3d(-2000px, 0, 0) scaleX(2)',
21425
+ },
21426
+ ];
21427
+
21428
+ const bounceOutRight = [
21429
+ {
21430
+ offset: 0.2,
21431
+ opacity: '1',
21432
+ transform: 'translate3d(-20px, 0, 0) scaleX(0.9)',
21433
+ },
21434
+ { offset: 1, opacity: '0', transform: 'translate3d(2000px, 0, 0) scaleX(2)' },
21435
+ ];
21436
+
21437
+ const bounceOutUp = [
21438
+ { offset: 0.2, transform: 'translate3d(0, -10px, 0) scaleY(0.985)' },
21439
+ {
21440
+ offset: 0.4,
21441
+ opacity: '1',
21442
+ transform: 'translate3d(0, 20px, 0) scaleY(0.9)',
21443
+ },
21444
+ {
21445
+ offset: 0.45,
21446
+ opacity: '1',
21447
+ transform: 'translate3d(0, 20px, 0) scaleY(0.9)',
21448
+ },
21449
+ {
21450
+ offset: 1,
21451
+ opacity: '0',
21452
+ transform: 'translate3d(0, -2000px, 0) scaleY(3)',
21453
+ },
21454
+ ];
21455
+
21456
+ const fadeIn = [
21457
+ { offset: 0, opacity: '0' },
21458
+ { offset: 1, opacity: '1' },
21459
+ ];
21460
+
21461
+ const fadeInBottomLeft = [
21462
+ { offset: 0, opacity: '0', transform: 'translate3d(-100%, 100%, 0)' },
21463
+ { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
21464
+ ];
21465
+
21466
+ const fadeInBottomRight = [
21467
+ { offset: 0, opacity: '0', transform: 'translate3d(100%, 100%, 0)' },
21468
+ { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
21469
+ ];
21470
+
21471
+ const fadeInDown = [
21472
+ { offset: 0, opacity: '0', transform: 'translate3d(0, -100%, 0)' },
21473
+ { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
21474
+ ];
21475
+
21476
+ const fadeInDownBig = [
21477
+ { offset: 0, opacity: '0', transform: 'translate3d(0, -2000px, 0)' },
21478
+ { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
21479
+ ];
21480
+
21481
+ const fadeInLeft = [
21482
+ { offset: 0, opacity: '0', transform: 'translate3d(-100%, 0, 0)' },
21483
+ { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
21484
+ ];
21485
+
21486
+ const fadeInLeftBig = [
21487
+ { offset: 0, opacity: '0', transform: 'translate3d(-2000px, 0, 0)' },
21488
+ { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
21489
+ ];
21490
+
21491
+ const fadeInRight = [
21492
+ { offset: 0, opacity: '0', transform: 'translate3d(100%, 0, 0)' },
21493
+ { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
21494
+ ];
21495
+
21496
+ const fadeInRightBig = [
21497
+ { offset: 0, opacity: '0', transform: 'translate3d(2000px, 0, 0)' },
21498
+ { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
21499
+ ];
21500
+
21501
+ const fadeInTopLeft = [
21502
+ { offset: 0, opacity: '0', transform: 'translate3d(-100%, -100%, 0)' },
21503
+ { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
21504
+ ];
21505
+
21506
+ const fadeInTopRight = [
21507
+ { offset: 0, opacity: '0', transform: 'translate3d(100%, -100%, 0)' },
21508
+ { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
21509
+ ];
21510
+
21511
+ const fadeInUp = [
21512
+ { offset: 0, opacity: '0', transform: 'translate3d(0, 100%, 0)' },
21513
+ { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
21514
+ ];
21515
+
21516
+ const fadeInUpBig = [
21517
+ { offset: 0, opacity: '0', transform: 'translate3d(0, 2000px, 0)' },
21518
+ { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
21519
+ ];
21520
+
21521
+ const fadeOut = [
21522
+ { offset: 0, opacity: '1' },
21523
+ { offset: 1, opacity: '0' },
21524
+ ];
21525
+
21526
+ const fadeOutBottomLeft = [
21527
+ { offset: 0, opacity: '1', transform: 'translate3d(0, 0, 0)' },
21528
+ { offset: 1, opacity: '0', transform: 'translate3d(-100%, 100%, 0)' },
21529
+ ];
21530
+
21531
+ const fadeOutBottomRight = [
21532
+ { offset: 0, opacity: '1', transform: 'translate3d(0, 0, 0)' },
21533
+ { offset: 1, opacity: '0', transform: 'translate3d(100%, 100%, 0)' },
21534
+ ];
21535
+
21536
+ const fadeOutDown = [
21537
+ { offset: 0, opacity: '1' },
21538
+ { offset: 1, opacity: '0', transform: 'translate3d(0, 100%, 0)' },
21539
+ ];
21540
+
21541
+ const fadeOutDownBig = [
21542
+ { offset: 0, opacity: '1' },
21543
+ { offset: 1, opacity: '0', transform: 'translate3d(0, 2000px, 0)' },
21544
+ ];
21545
+
21546
+ const fadeOutLeft = [
21547
+ { offset: 0, opacity: '1' },
21548
+ { offset: 1, opacity: '0', transform: 'translate3d(-100%, 0, 0)' },
21549
+ ];
21550
+
21551
+ const fadeOutLeftBig = [
21552
+ { offset: 0, opacity: '1' },
21553
+ { offset: 1, opacity: '0', transform: 'translate3d(-2000px, 0, 0)' },
21554
+ ];
21555
+
21556
+ const fadeOutRight = [
21557
+ { offset: 0, opacity: '1' },
21558
+ { offset: 1, opacity: '0', transform: 'translate3d(100%, 0, 0)' },
21559
+ ];
21560
+
21561
+ const fadeOutRightBig = [
21562
+ { offset: 0, opacity: '1' },
21563
+ { offset: 1, opacity: '0', transform: 'translate3d(2000px, 0, 0)' },
21564
+ ];
21565
+
21566
+ const fadeOutTopLeft = [
21567
+ { offset: 0, opacity: '1', transform: 'translate3d(0, 0, 0)' },
21568
+ { offset: 1, opacity: '0', transform: 'translate3d(-100%, -100%, 0)' },
21569
+ ];
21570
+
21571
+ const fadeOutTopRight = [
21572
+ { offset: 0, opacity: '1', transform: 'translate3d(0, 0, 0)' },
21573
+ { offset: 1, opacity: '0', transform: 'translate3d(100%, -100%, 0)' },
21574
+ ];
21575
+
21576
+ const fadeOutUp = [
21577
+ { offset: 0, opacity: '1' },
21578
+ { offset: 1, opacity: '0', transform: 'translate3d(0, -100%, 0)' },
21579
+ ];
21580
+
21581
+ const fadeOutUpBig = [
21582
+ { offset: 0, opacity: '1' },
21583
+ { offset: 1, opacity: '0', transform: 'translate3d(0, -2000px, 0)' },
21584
+ ];
21585
+
21586
+ const flip = [
21587
+ {
21588
+ offset: 0,
21589
+ transform:
21590
+ 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg)',
21591
+ easing: 'ease-out',
21592
+ },
21593
+ {
21594
+ offset: 0.4,
21595
+ transform:
21596
+ 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n rotate3d(0, 1, 0, -190deg)',
21597
+ easing: 'ease-out',
21598
+ },
21599
+ {
21600
+ offset: 0.5,
21601
+ transform:
21602
+ 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)\n rotate3d(0, 1, 0, -170deg)',
21603
+ easing: 'ease-in',
21604
+ },
21605
+ {
21606
+ offset: 0.8,
21607
+ transform:
21608
+ 'perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)\n rotate3d(0, 1, 0, 0deg)',
21609
+ easing: 'ease-in',
21610
+ },
21611
+ {
21612
+ offset: 1,
21613
+ transform:
21614
+ 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg)',
21615
+ easing: 'ease-in',
21616
+ },
21617
+ ];
21618
+
21619
+ const flipInX = [
21620
+ {
21621
+ offset: 0,
21622
+ transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
21623
+ easing: 'ease-in',
21624
+ opacity: '0',
21625
+ },
21626
+ {
21627
+ offset: 0.4,
21628
+ transform: 'perspective(400px) rotate3d(1, 0, 0, -20deg)',
21629
+ easing: 'ease-in',
21630
+ },
21631
+ {
21632
+ offset: 0.6,
21633
+ transform: 'perspective(400px) rotate3d(1, 0, 0, 10deg)',
21634
+ opacity: '1',
21635
+ },
21636
+ { offset: 0.8, transform: 'perspective(400px) rotate3d(1, 0, 0, -5deg)' },
21637
+ { offset: 1, transform: 'perspective(400px)' },
21638
+ ];
21639
+
21640
+ const flipInY = [
21641
+ {
21642
+ offset: 0,
21643
+ transform: 'perspective(400px) rotate3d(0, 1, 0, 90deg)',
21644
+ easing: 'ease-in',
21645
+ opacity: '0',
21646
+ },
21647
+ {
21648
+ offset: 0.4,
21649
+ transform: 'perspective(400px) rotate3d(0, 1, 0, -20deg)',
21650
+ easing: 'ease-in',
21651
+ },
21652
+ {
21653
+ offset: 0.6,
21654
+ transform: 'perspective(400px) rotate3d(0, 1, 0, 10deg)',
21655
+ opacity: '1',
21656
+ },
21657
+ { offset: 0.8, transform: 'perspective(400px) rotate3d(0, 1, 0, -5deg)' },
21658
+ { offset: 1, transform: 'perspective(400px)' },
21659
+ ];
21660
+
21661
+ const flipOutX = [
21662
+ { offset: 0, transform: 'perspective(400px)' },
21663
+ {
21664
+ offset: 0.3,
21665
+ transform: 'perspective(400px) rotate3d(1, 0, 0, -20deg)',
21666
+ opacity: '1',
21667
+ },
21668
+ {
21669
+ offset: 1,
21670
+ transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
21671
+ opacity: '0',
21672
+ },
21673
+ ];
21674
+
21675
+ const flipOutY = [
21676
+ { offset: 0, transform: 'perspective(400px)' },
21677
+ {
21678
+ offset: 0.3,
21679
+ transform: 'perspective(400px) rotate3d(0, 1, 0, -15deg)',
21680
+ opacity: '1',
21681
+ },
21682
+ {
21683
+ offset: 1,
21684
+ transform: 'perspective(400px) rotate3d(0, 1, 0, 90deg)',
21685
+ opacity: '0',
21686
+ },
21687
+ ];
21688
+
21689
+ const lightSpeedInLeft = [
21690
+ {
21691
+ offset: 0,
21692
+ transform: 'translate3d(-100%, 0, 0) skewX(30deg)',
21693
+ opacity: '0',
21694
+ },
21695
+ { offset: 0.6, transform: 'skewX(-20deg)', opacity: '1' },
21696
+ { offset: 0.8, transform: 'skewX(5deg)' },
21697
+ { offset: 1, transform: 'translate3d(0, 0, 0)' },
21698
+ ];
21699
+
21700
+ const lightSpeedInRight = [
21701
+ {
21702
+ offset: 0,
21703
+ transform: 'translate3d(100%, 0, 0) skewX(-30deg)',
21704
+ opacity: '0',
21705
+ },
21706
+ { offset: 0.6, transform: 'skewX(20deg)', opacity: '1' },
21707
+ { offset: 0.8, transform: 'skewX(-5deg)' },
21708
+ { offset: 1, transform: 'translate3d(0, 0, 0)' },
21709
+ ];
21710
+
21711
+ const lightSpeedOutLeft = [
21712
+ { offset: 0, opacity: '1' },
21713
+ {
21714
+ offset: 1,
21715
+ transform: 'translate3d(-100%, 0, 0) skewX(-30deg)',
21716
+ opacity: '0',
21717
+ },
21718
+ ];
21719
+
21720
+ const lightSpeedOutRight = [
21721
+ { offset: 0, opacity: '1' },
21722
+ {
21723
+ offset: 1,
21724
+ transform: 'translate3d(100%, 0, 0) skewX(30deg)',
21725
+ opacity: '0',
21726
+ },
21727
+ ];
21728
+
21729
+ const rotateIn = [
21730
+ { offset: 0, transform: 'rotate3d(0, 0, 1, -200deg)', opacity: '0' },
21731
+ { offset: 1, transform: 'translate3d(0, 0, 0)', opacity: '1' },
21732
+ ];
21733
+
21734
+ const rotateInDownLeft = [
21735
+ { offset: 0, transform: 'rotate3d(0, 0, 1, -45deg)', opacity: '0' },
21736
+ { offset: 1, transform: 'translate3d(0, 0, 0)', opacity: '1' },
21737
+ ];
21738
+
21739
+ const rotateInDownRight = [
21740
+ { offset: 0, transform: 'rotate3d(0, 0, 1, 45deg)', opacity: '0' },
21741
+ { offset: 1, transform: 'translate3d(0, 0, 0)', opacity: '1' },
21742
+ ];
21743
+
21744
+ const rotateInUpLeft = [
21745
+ { offset: 0, transform: 'rotate3d(0, 0, 1, 45deg)', opacity: '0' },
21746
+ { offset: 1, transform: 'translate3d(0, 0, 0)', opacity: '1' },
21747
+ ];
21748
+
21749
+ const rotateInUpRight = [
21750
+ { offset: 0, transform: 'rotate3d(0, 0, 1, -90deg)', opacity: '0' },
21751
+ { offset: 1, transform: 'translate3d(0, 0, 0)', opacity: '1' },
21752
+ ];
21753
+
21754
+ const rotateOut = [
21755
+ { offset: 0, opacity: '1' },
21756
+ { offset: 1, transform: 'rotate3d(0, 0, 1, 200deg)', opacity: '0' },
21757
+ ];
21758
+
21759
+ const rotateOutDownLeft = [
21760
+ { offset: 0, opacity: '1' },
21761
+ { offset: 1, transform: 'rotate3d(0, 0, 1, 45deg)', opacity: '0' },
21762
+ ];
21763
+
21764
+ const rotateOutDownRight = [
21765
+ { offset: 0, opacity: '1' },
21766
+ { offset: 1, transform: 'rotate3d(0, 0, 1, -45deg)', opacity: '0' },
21767
+ ];
21768
+
21769
+ const rotateOutUpLeft = [
21770
+ { offset: 0, opacity: '1' },
21771
+ { offset: 1, transform: 'rotate3d(0, 0, 1, -45deg)', opacity: '0' },
21772
+ ];
21773
+
21774
+ const rotateOutUpRight = [
21775
+ { offset: 0, opacity: '1' },
21776
+ { offset: 1, transform: 'rotate3d(0, 0, 1, 90deg)', opacity: '0' },
21777
+ ];
21778
+
21779
+ const slideInDown = [
21780
+ { offset: 0, transform: 'translate3d(0, -100%, 0)', visibility: 'visible' },
21781
+ { offset: 1, transform: 'translate3d(0, 0, 0)' },
21782
+ ];
21783
+
21784
+ const slideInLeft = [
21785
+ { offset: 0, transform: 'translate3d(-100%, 0, 0)', visibility: 'visible' },
21786
+ { offset: 1, transform: 'translate3d(0, 0, 0)' },
21787
+ ];
21788
+
21789
+ const slideInRight = [
21790
+ { offset: 0, transform: 'translate3d(100%, 0, 0)', visibility: 'visible' },
21791
+ { offset: 1, transform: 'translate3d(0, 0, 0)' },
21792
+ ];
21793
+
21794
+ const slideInUp = [
21795
+ { offset: 0, transform: 'translate3d(0, 100%, 0)', visibility: 'visible' },
21796
+ { offset: 1, transform: 'translate3d(0, 0, 0)' },
21797
+ ];
21798
+
21799
+ const slideOutDown = [
21800
+ { offset: 0, transform: 'translate3d(0, 0, 0)' },
21801
+ { offset: 1, visibility: 'hidden', transform: 'translate3d(0, 100%, 0)' },
21802
+ ];
21803
+
21804
+ const slideOutLeft = [
21805
+ { offset: 0, transform: 'translate3d(0, 0, 0)' },
21806
+ { offset: 1, visibility: 'hidden', transform: 'translate3d(-100%, 0, 0)' },
21807
+ ];
21808
+
21809
+ const slideOutRight = [
21810
+ { offset: 0, transform: 'translate3d(0, 0, 0)' },
21811
+ { offset: 1, visibility: 'hidden', transform: 'translate3d(100%, 0, 0)' },
21812
+ ];
21813
+
21814
+ const slideOutUp = [
21815
+ { offset: 0, transform: 'translate3d(0, 0, 0)' },
21816
+ { offset: 1, visibility: 'hidden', transform: 'translate3d(0, -100%, 0)' },
21817
+ ];
21818
+
21819
+ const hinge = [
21820
+ { offset: 0, easing: 'ease-in-out' },
21821
+ { offset: 0.2, transform: 'rotate3d(0, 0, 1, 80deg)', easing: 'ease-in-out' },
21822
+ {
21823
+ offset: 0.4,
21824
+ transform: 'rotate3d(0, 0, 1, 60deg)',
21825
+ easing: 'ease-in-out',
21826
+ opacity: '1',
21827
+ },
21828
+ { offset: 0.6, transform: 'rotate3d(0, 0, 1, 80deg)', easing: 'ease-in-out' },
21829
+ {
21830
+ offset: 0.8,
21831
+ transform: 'rotate3d(0, 0, 1, 60deg)',
21832
+ easing: 'ease-in-out',
21833
+ opacity: '1',
21834
+ },
21835
+ { offset: 1, transform: 'translate3d(0, 700px, 0)', opacity: '0' },
21836
+ ];
21837
+
21838
+ const jackInTheBox = [
21839
+ {
21840
+ offset: 0,
21841
+ opacity: '0',
21842
+ transform: 'scale(0.1) rotate(30deg)',
21843
+ 'transform-origin': 'center bottom',
21844
+ },
21845
+ { offset: 0.5, transform: 'rotate(-10deg)' },
21846
+ { offset: 0.7, transform: 'rotate(3deg)' },
21847
+ { offset: 1, opacity: '1', transform: 'scale(1)' },
21848
+ ];
21849
+
21850
+ const rollIn = [
21851
+ {
21852
+ offset: 0,
21853
+ opacity: '0',
21854
+ transform: 'translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)',
21855
+ },
21856
+ { offset: 1, opacity: '1', transform: 'translate3d(0, 0, 0)' },
21857
+ ];
21858
+
21859
+ const rollOut = [
21860
+ { offset: 0, opacity: '1' },
21861
+ {
21862
+ offset: 1,
21863
+ opacity: '0',
21864
+ transform: 'translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)',
21865
+ },
21866
+ ];
21867
+
21868
+ const zoomIn = [
21869
+ { offset: 0, opacity: '0', transform: 'scale3d(0.3, 0.3, 0.3)' },
21870
+ { offset: 0.5, opacity: '1' },
21871
+ ];
21872
+
21873
+ const zoomInDown = [
21874
+ {
21875
+ offset: 0,
21876
+ opacity: '0',
21877
+ transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0)',
21878
+ easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
21879
+ },
21880
+ {
21881
+ offset: 0.6,
21882
+ opacity: '1',
21883
+ transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)',
21884
+ easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
21885
+ },
21886
+ ];
21887
+
21888
+ const zoomInLeft = [
21889
+ {
21890
+ offset: 0,
21891
+ opacity: '0',
21892
+ transform: 'scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0)',
21893
+ easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
21894
+ },
21895
+ {
21896
+ offset: 0.6,
21897
+ opacity: '1',
21898
+ transform: 'scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0)',
21899
+ easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
21900
+ },
21901
+ ];
21902
+
21903
+ const zoomInRight = [
21904
+ {
21905
+ offset: 0,
21906
+ opacity: '0',
21907
+ transform: 'scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0)',
21908
+ easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
21909
+ },
21910
+ {
21911
+ offset: 0.6,
21912
+ opacity: '1',
21913
+ transform: 'scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0)',
21914
+ easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
21915
+ },
21916
+ ];
21917
+
21918
+ const zoomInUp = [
21919
+ {
21920
+ offset: 0,
21921
+ opacity: '0',
21922
+ transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0)',
21923
+ easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
21924
+ },
21925
+ {
21926
+ offset: 0.6,
21927
+ opacity: '1',
21928
+ transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)',
21929
+ easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
21930
+ },
21931
+ ];
21932
+
21933
+ const zoomOut = [
21934
+ { offset: 0, opacity: '1' },
21935
+ { offset: 0.5, opacity: '0', transform: 'scale3d(0.3, 0.3, 0.3)' },
21936
+ { offset: 1, opacity: '0' },
21937
+ ];
21938
+
21939
+ const zoomOutDown = [
21940
+ {
21941
+ offset: 0.4,
21942
+ opacity: '1',
21943
+ transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)',
21944
+ easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
21945
+ },
21946
+ {
21947
+ offset: 1,
21948
+ opacity: '0',
21949
+ transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0)',
21950
+ easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
21951
+ },
21952
+ ];
21953
+
21954
+ const zoomOutLeft = [
21955
+ {
21956
+ offset: 0.4,
21957
+ opacity: '1',
21958
+ transform: 'scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)',
21959
+ },
21960
+ {
21961
+ offset: 1,
21962
+ opacity: '0',
21963
+ transform: 'scale(0.1) translate3d(-2000px, 0, 0)',
21964
+ },
21965
+ ];
21966
+
21967
+ const zoomOutRight = [
21968
+ {
21969
+ offset: 0.4,
21970
+ opacity: '1',
21971
+ transform: 'scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)',
21972
+ },
21973
+ {
21974
+ offset: 1,
21975
+ opacity: '0',
21976
+ transform: 'scale(0.1) translate3d(2000px, 0, 0)',
21977
+ },
21978
+ ];
21979
+
21980
+ const zoomOutUp = [
21981
+ {
21982
+ offset: 0.4,
21983
+ opacity: '1',
21984
+ transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)',
21985
+ easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
21986
+ },
21987
+ {
21988
+ offset: 1,
21989
+ opacity: '0',
21990
+ transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0)',
21991
+ easing: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
21992
+ },
21993
+ ];
21994
+
21995
+ const easings = {
21996
+ linear: 'linear',
21997
+ ease: 'ease',
21998
+ easeIn: 'ease-in',
21999
+ easeOut: 'ease-out',
22000
+ easeInOut: 'ease-in-out',
22001
+ easeInSine: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
22002
+ easeOutSine: 'cubic-bezier(0.39, 0.575, 0.565, 1)',
22003
+ easeInOutSine: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
22004
+ easeInQuad: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
22005
+ easeOutQuad: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
22006
+ easeInOutQuad: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
22007
+ easeInCubic: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
22008
+ easeOutCubic: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
22009
+ easeInOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
22010
+ easeInQuart: 'cubic-bezier(0.895, 0.03, 0.685, 0.22)',
22011
+ easeOutQuart: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
22012
+ easeInOutQuart: 'cubic-bezier(0.77, 0, 0.175, 1)',
22013
+ easeInQuint: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
22014
+ easeOutQuint: 'cubic-bezier(0.23, 1, 0.32, 1)',
22015
+ easeInOutQuint: 'cubic-bezier(0.86, 0, 0.07, 1)',
22016
+ easeInExpo: 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
22017
+ easeOutExpo: 'cubic-bezier(0.19, 1, 0.22, 1)',
22018
+ easeInOutExpo: 'cubic-bezier(1, 0, 0, 1)',
22019
+ easeInCirc: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',
22020
+ easeOutCirc: 'cubic-bezier(0.075, 0.82, 0.165, 1)',
22021
+ easeInOutCirc: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
22022
+ easeInBack: 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',
22023
+ easeOutBack: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
22024
+ easeInOutBack: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
22025
+ };
22026
+
22027
+ const animations = {
22028
+ bounce,
22029
+ flash,
22030
+ headShake,
22031
+ heartBeat,
22032
+ jello,
22033
+ pulse,
22034
+ rubberBand,
22035
+ shake,
22036
+ shakeX,
22037
+ shakeY,
22038
+ swing,
22039
+ tada,
22040
+ wobble,
22041
+ backInDown,
22042
+ backInLeft,
22043
+ backInRight,
22044
+ backInUp,
22045
+ backOutDown,
22046
+ backOutLeft,
22047
+ backOutRight,
22048
+ backOutUp,
22049
+ bounceIn,
22050
+ bounceInDown,
22051
+ bounceInLeft,
22052
+ bounceInRight,
22053
+ bounceInUp,
22054
+ bounceOut,
22055
+ bounceOutDown,
22056
+ bounceOutLeft,
22057
+ bounceOutRight,
22058
+ bounceOutUp,
22059
+ fadeIn,
22060
+ fadeInBottomLeft,
22061
+ fadeInBottomRight,
22062
+ fadeInDown,
22063
+ fadeInDownBig,
22064
+ fadeInLeft,
22065
+ fadeInLeftBig,
22066
+ fadeInRight,
22067
+ fadeInRightBig,
22068
+ fadeInTopLeft,
22069
+ fadeInTopRight,
22070
+ fadeInUp,
22071
+ fadeInUpBig,
22072
+ fadeOut,
22073
+ fadeOutBottomLeft,
22074
+ fadeOutBottomRight,
22075
+ fadeOutDown,
22076
+ fadeOutDownBig,
22077
+ fadeOutLeft,
22078
+ fadeOutLeftBig,
22079
+ fadeOutRight,
22080
+ fadeOutRightBig,
22081
+ fadeOutTopLeft,
22082
+ fadeOutTopRight,
22083
+ fadeOutUp,
22084
+ fadeOutUpBig,
22085
+ flip,
22086
+ flipInX,
22087
+ flipInY,
22088
+ flipOutX,
22089
+ flipOutY,
22090
+ lightSpeedInLeft,
22091
+ lightSpeedInRight,
22092
+ lightSpeedOutLeft,
22093
+ lightSpeedOutRight,
22094
+ rotateIn,
22095
+ rotateInDownLeft,
22096
+ rotateInDownRight,
22097
+ rotateInUpLeft,
22098
+ rotateInUpRight,
22099
+ rotateOut,
22100
+ rotateOutDownLeft,
22101
+ rotateOutDownRight,
22102
+ rotateOutUpLeft,
22103
+ rotateOutUpRight,
22104
+ slideInDown,
22105
+ slideInLeft,
22106
+ slideInRight,
22107
+ slideInUp,
22108
+ slideOutDown,
22109
+ slideOutLeft,
22110
+ slideOutRight,
22111
+ slideOutUp,
22112
+ hinge,
22113
+ jackInTheBox,
22114
+ rollIn,
22115
+ rollOut,
22116
+ zoomIn,
22117
+ zoomInDown,
22118
+ zoomInLeft,
22119
+ zoomInRight,
22120
+ zoomInUp,
22121
+ zoomOut,
22122
+ zoomOutDown,
22123
+ zoomOutLeft,
22124
+ zoomOutRight,
22125
+ zoomOutUp,
22126
+ };
22127
+
22128
+ /**
22129
+ * Animate elements declaratively with [~100 baked-in presets](https://animate.style/), or make your own with custom keyframes.
22130
+ * Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
22131
+ *
22132
+ * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple *nano-animation* elements.
22133
+ */
22134
+ class NanoAnimation {
22135
+ constructor(hostRef) {
22136
+ registerInstance(this, hostRef);
22137
+ this.nanoCancel = createEvent(this, "nanoCancel", 7);
22138
+ this.nanoFinish = createEvent(this, "nanoFinish", 7);
22139
+ this.nanoStart = createEvent(this, "nanoStart", 7);
22140
+ this.hasStarted = false;
22141
+ this.handleAnimationFinish = () => {
22142
+ this.play = false;
22143
+ this.hasStarted = false;
22144
+ this.nanoFinish.emit();
22145
+ };
22146
+ this.handleAnimationCancel = () => {
22147
+ this.play = false;
22148
+ this.hasStarted = false;
22149
+ this.nanoCancel.emit();
22150
+ };
22151
+ this.handleSlotChange = () => {
22152
+ this.destroyAnimation();
22153
+ this.createAnimation();
22154
+ };
22155
+ this.name = 'none';
22156
+ this.play = false;
22157
+ this.delay = 0;
22158
+ this.direction = 'normal';
22159
+ this.duration = 1000;
22160
+ this.easing = 'ease';
22161
+ this.endDelay = 0;
22162
+ this.fill = 'auto';
22163
+ this.iterations = Infinity;
22164
+ this.iterationStart = 0;
22165
+ this.keyframes = undefined;
22166
+ this.playbackRate = 1;
22167
+ }
22168
+ /** Gets and sets the current animation time. */
22169
+ get currentTime() {
22170
+ return this.animation?.currentTime ?? 0;
22171
+ }
22172
+ set currentTime(time) {
22173
+ if (this.animation) {
22174
+ this.animation.currentTime = time;
22175
+ }
22176
+ }
22177
+ connectedCallback() {
22178
+ this.createAnimation();
22179
+ }
22180
+ disconnectedCallback() {
22181
+ this.destroyAnimation();
22182
+ }
22183
+ async createAnimation() {
22184
+ if (!this.defaultSlot)
22185
+ return;
22186
+ const easing = easings[this.easing] ?? this.easing;
22187
+ const keyframes = this.keyframes ??
22188
+ animations[this.name];
22189
+ const slot = this.defaultSlot;
22190
+ const element = slot.assignedElements()[0];
22191
+ if (!element || !keyframes) {
22192
+ return false;
22193
+ }
22194
+ this.destroyAnimation();
22195
+ this.animation = element.animate(keyframes, {
22196
+ delay: this.delay,
22197
+ direction: this.direction,
22198
+ duration: this.duration,
22199
+ easing,
22200
+ endDelay: this.endDelay,
22201
+ fill: this.fill,
22202
+ iterationStart: this.iterationStart,
22203
+ iterations: this.iterations,
22204
+ });
22205
+ this.animation.playbackRate = this.playbackRate;
22206
+ this.animation.addEventListener('cancel', this.handleAnimationCancel);
22207
+ this.animation.addEventListener('finish', this.handleAnimationFinish);
22208
+ if (this.play) {
22209
+ this.hasStarted = true;
22210
+ this.nanoStart.emit();
22211
+ }
22212
+ else {
22213
+ this.animation.pause();
22214
+ }
22215
+ return true;
22216
+ }
22217
+ destroyAnimation() {
22218
+ if (this.animation) {
22219
+ this.animation.cancel();
22220
+ this.animation.removeEventListener('cancel', this.handleAnimationCancel);
22221
+ this.animation.removeEventListener('finish', this.handleAnimationFinish);
22222
+ this.hasStarted = false;
22223
+ }
22224
+ }
22225
+ handleAnimationChange() {
22226
+ this.createAnimation();
22227
+ }
22228
+ handlePlayChange() {
22229
+ if (this.animation) {
22230
+ if (this.play && !this.hasStarted) {
22231
+ this.hasStarted = true;
22232
+ this.nanoStart.emit();
22233
+ }
22234
+ if (this.play) {
22235
+ this.animation.play();
22236
+ }
22237
+ else {
22238
+ this.animation.pause();
22239
+ }
22240
+ return true;
22241
+ }
22242
+ return false;
22243
+ }
22244
+ handlePlaybackRateChange() {
22245
+ if (this.animation) {
22246
+ this.animation.playbackRate = this.playbackRate;
22247
+ }
22248
+ }
22249
+ /** Clears all keyframe effects caused by this animation and aborts its playback. */
22250
+ async cancel() {
22251
+ this.animation?.cancel();
22252
+ }
22253
+ /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
22254
+ async finish() {
22255
+ this.animation?.finish();
22256
+ }
22257
+ render() {
22258
+ return (hAsync(Host, null, hAsync("slot", { ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
22259
+ }
22260
+ static get watchers() { return {
22261
+ "name": ["handleAnimationChange"],
22262
+ "delay": ["handleAnimationChange"],
22263
+ "direction": ["handleAnimationChange"],
22264
+ "duration": ["handleAnimationChange"],
22265
+ "easing": ["handleAnimationChange"],
22266
+ "endDelay": ["handleAnimationChange"],
22267
+ "fill": ["handleAnimationChange"],
22268
+ "iterations": ["handleAnimationChange"],
22269
+ "iterationStart": ["handleAnimationChange"],
22270
+ "keyframes": ["handleAnimationChange"],
22271
+ "play": ["handlePlayChange"],
22272
+ "playbackRate": ["handlePlaybackRateChange"]
22273
+ }; }
22274
+ static get style() { return "/*!@:host*/.sc-nano-animation-h {\n display: contents;\n }"; }
22275
+ static get cmpMeta() { return {
22276
+ "$flags$": 9,
22277
+ "$tagName$": "nano-animation",
22278
+ "$members$": {
22279
+ "name": [1],
22280
+ "play": [1540],
22281
+ "delay": [2],
22282
+ "direction": [1],
22283
+ "duration": [2],
22284
+ "easing": [1],
22285
+ "endDelay": [2, "end-delay"],
22286
+ "fill": [1],
22287
+ "iterations": [2],
22288
+ "iterationStart": [2, "iteration-start"],
22289
+ "keyframes": [16],
22290
+ "playbackRate": [2, "playback-rate"],
22291
+ "currentTime": [6146, "current-time"],
22292
+ "cancel": [64],
22293
+ "finish": [64]
22294
+ },
22295
+ "$listeners$": undefined,
22296
+ "$lazyBundleId$": "-",
22297
+ "$attrsToReflect$": [["play", "play"]]
22298
+ }; }
22299
+ }
22300
+
22301
+ const navItemCss = "/*!@:host*/.sc-nano-nav-item-h{box-sizing:border-box}/*!@*,\n*::before,\n*::after*/*.sc-nano-nav-item,*.sc-nano-nav-item::before,*.sc-nano-nav-item::after{box-sizing:border-box}/*!@[hidden]*/[hidden].sc-nano-nav-item{display:none !important}/*!@:host*/.sc-nano-nav-item-h{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}/*!@:host .nav-item,\n:host .link*/.sc-nano-nav-item-h .nav-item.sc-nano-nav-item,.sc-nano-nav-item-h .link.sc-nano-nav-item{outline:none !important;border-radius:inherit}/*!@:host ::slotted(*),\n:host **/.sc-nano-nav-item-h .sc-nano-nav-item-s>*,.sc-nano-nav-item-h *.sc-nano-nav-item{box-sizing:border-box}/*!@:host ::slotted(button),\n:host button*/.sc-nano-nav-item-h .sc-nano-nav-item-s>button,.sc-nano-nav-item-h button.sc-nano-nav-item{background:none;border:none;margin:0}/*!@:host ::slotted(button),\n:host ::slotted(a),\n:host ::slotted(a:visited),\n:host button,\n:host a,\n:host a:visited*/.sc-nano-nav-item-h .sc-nano-nav-item-s>button,.sc-nano-nav-item-h .sc-nano-nav-item-s>a,.sc-nano-nav-item-h .sc-nano-nav-item-s>a:visited,.sc-nano-nav-item-h button.sc-nano-nav-item,.sc-nano-nav-item-h a.sc-nano-nav-item,.sc-nano-nav-item-h a.sc-nano-nav-item:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}/*!@:host ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h .sc-nano-nav-item-s>nano-icon[slot=icon-start]{padding-inline-end:var(--padding-end)}/*!@:host ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h .sc-nano-nav-item-s>nano-icon[slot=icon-end]{padding-inline-start:var(--padding-start)}/*!@:host .link ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h .link .sc-nano-nav-item-s>nano-icon[slot=icon-start]{padding-inline:var(--padding-start) 0}/*!@:host .link ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h .link .sc-nano-nav-item-s>nano-icon[slot=icon-end]{padding-inline:0 var(--padding-end)}/*!@:host .link,\n:host button,\n:host a*/.sc-nano-nav-item-h .link.sc-nano-nav-item,.sc-nano-nav-item-h button.sc-nano-nav-item,.sc-nano-nav-item-h a.sc-nano-nav-item{border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}/*!@:host .secondary-menu*/.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{display:none}/*!@:host ::slotted(a:hover),\n:host ::slotted(button:hover),\n:host .link:hover,\n:host button:hover,\n:host a:hover*/.sc-nano-nav-item-h .sc-nano-nav-item-s>a:hover,.sc-nano-nav-item-h .sc-nano-nav-item-s>button:hover,.sc-nano-nav-item-h .link.sc-nano-nav-item:hover,.sc-nano-nav-item-h button.sc-nano-nav-item:hover,.sc-nano-nav-item-h a.sc-nano-nav-item:hover{text-decoration:inherit !important}/*!@:host button:focus-visible,\n:host a:focus-visible*/.sc-nano-nav-item-h button.sc-nano-nav-item:focus-visible,.sc-nano-nav-item-h a.sc-nano-nav-item:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}/*!@:host ::slotted(a:focus-visible),\n:host ::slotted(button:focus-visible)*/.sc-nano-nav-item-h .sc-nano-nav-item-s>a:focus-visible,.sc-nano-nav-item-h .sc-nano-nav-item-s>button:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}/*!@.nav-item.selected .link,\n.nav-item.selected button,\n.nav-item.selected a*/.nav-item.selected.sc-nano-nav-item .link.sc-nano-nav-item,.nav-item.selected.sc-nano-nav-item button.sc-nano-nav-item,.nav-item.selected.sc-nano-nav-item a.sc-nano-nav-item{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}/*!@.nav-item.secondary-open button,\n.nav-item.secondary-open a*/.nav-item.secondary-open.sc-nano-nav-item button.sc-nano-nav-item,.nav-item.secondary-open.sc-nano-nav-item a.sc-nano-nav-item{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}/*!@.nav-item.disabled*/.nav-item.disabled.sc-nano-nav-item{opacity:0.6}/*!@.nav-item.disabled button,\n.nav-item.disabled a*/.nav-item.disabled.sc-nano-nav-item button.sc-nano-nav-item,.nav-item.disabled.sc-nano-nav-item a.sc-nano-nav-item{color:var(--color-disabled, var(--color)) !important}/*!@.nav-item:not(.nano-menu) ::slotted(a:hover),\n.nav-item:not(.nano-menu) ::slotted(button:hover),\n.nav-item:not(.nano-menu) .link:hover,\n.nav-item:not(.nano-menu) button:hover,\n.nav-item:not(.nano-menu) a:hover*/.nav-item:not(.nano-menu) .sc-nano-nav-item-s>a:hover,.nav-item:not(.nano-menu) .sc-nano-nav-item-s>button:hover,.nav-item.sc-nano-nav-item:not(.nano-menu) .link.sc-nano-nav-item:hover,.nav-item.sc-nano-nav-item:not(.nano-menu) button.sc-nano-nav-item:hover,.nav-item.sc-nano-nav-item:not(.nano-menu) a.sc-nano-nav-item:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}/*!@:host(.has-focus) .link*/.has-focus.sc-nano-nav-item-h .link.sc-nano-nav-item{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}/*!@:host(.nano-global-nav-menu) a,\n:host(.nano-global-nav-menu) a:visited,\n:host(.nano-global-nav-menu) button,\n:host(.nano-global-nav-menu) .link,\n:host(.nano-menu) a,\n:host(.nano-menu) a:visited,\n:host(.nano-menu) button,\n:host(.nano-menu) .link*/.nano-global-nav-menu.sc-nano-nav-item-h a.sc-nano-nav-item,.nano-global-nav-menu.sc-nano-nav-item-h a.sc-nano-nav-item:visited,.nano-global-nav-menu.sc-nano-nav-item-h button.sc-nano-nav-item,.nano-global-nav-menu.sc-nano-nav-item-h .link.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h a.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h a.sc-nano-nav-item:visited,.nano-menu.sc-nano-nav-item-h button.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h .link.sc-nano-nav-item{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;inline-size:100%}/*!@:host(.nano-global-nav-menu) .text,\n:host(.nano-menu) .text*/.nano-global-nav-menu.sc-nano-nav-item-h .text.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h .text.sc-nano-nav-item{padding-inline:0 var(--padding-end);flex:1}/*!@:host(.nano-global-nav-menu) ::slotted(a),\n:host(.nano-global-nav-menu) ::slotted(button),\n:host(.nano-menu) ::slotted(a),\n:host(.nano-menu) ::slotted(button)*/.sc-nano-nav-item-h.nano-global-nav-menu .sc-nano-nav-item-s>a,.sc-nano-nav-item-h.nano-global-nav-menu .sc-nano-nav-item-s>button,.sc-nano-nav-item-h.nano-menu .sc-nano-nav-item-s>a,.sc-nano-nav-item-h.nano-menu .sc-nano-nav-item-s>button{flex:1}/*!@:host(.nano-global-nav-menu) .secondary-menu,\n:host(.nano-menu) .secondary-menu*/.nano-global-nav-menu.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-block-size:100%;inset-block-start:0;inset-inline-start:0;inline-size:100%;z-index:1;opacity:0;transition:opacity 0.3s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translate3d(100%, 0, 0)}/*!@:host(.nano-global-nav-menu) .secondary-menu:focus,\n:host(.nano-menu) .secondary-menu:focus*/.nano-global-nav-menu.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item:focus,.nano-menu.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item:focus{outline:none}/*!@:host(.nano-global-nav-menu) .secondary-menu.open,\n:host(.nano-menu) .secondary-menu.open*/.nano-global-nav-menu.sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item,.nano-menu.sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{opacity:1;transform:translate3d(0, 0, 0);transition:opacity 0.3s ease, transform 0.3s ease}/*!@:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h.nano-global-nav-menu .sc-nano-nav-item-s>nano-icon[slot=icon-start]{padding-inline:0 var(--padding-end);padding-block:0}/*!@:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h.nano-global-nav-menu .sc-nano-nav-item-s>nano-icon[slot=icon-end]{padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}/*!@:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),\n:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h.nano-global-nav-menu button .sc-nano-nav-item-s>nano-icon[slot=icon-end],.sc-nano-nav-item-h.nano-global-nav-menu a .sc-nano-nav-item-s>nano-icon[slot=icon-end]{padding:0}/*!@:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,\n:host(.nano-menu[dir=rtl]) .secondary-menu*/.nano-global-nav-menu[dir=rtl].sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item,.nano-menu[dir=rtl].sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{transform:translateX(-100%)}/*!@:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,\n:host(.nano-menu[dir=rtl]) .secondary-menu.open*/.nano-global-nav-menu[dir=rtl].sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item,.nano-menu[dir=rtl].sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{transform:translateX(0)}/*!@:host(.nano-menu) ::slotted(a:focus),\n:host(.nano-menu) ::slotted(button:focus)*/.sc-nano-nav-item-h.nano-menu .sc-nano-nav-item-s>a:focus,.sc-nano-nav-item-h.nano-menu .sc-nano-nav-item-s>button:focus{box-shadow:none}/*!@:host(.nano-menu) .secondary-menu-content*/.nano-menu.sc-nano-nav-item-h .secondary-menu-content.sc-nano-nav-item{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}/*!@:host(.nano-global-nav-bar) .link,\n:host(.nano-global-nav-bar) a,\n:host(.nano-global-nav-bar) button*/.nano-global-nav-bar.sc-nano-nav-item-h .link.sc-nano-nav-item,.nano-global-nav-bar.sc-nano-nav-item-h a.sc-nano-nav-item,.nano-global-nav-bar.sc-nano-nav-item-h button.sc-nano-nav-item{display:flex;align-items:center;cursor:pointer}/*!@:host(.nano-global-nav-bar) .text*/.nano-global-nav-bar.sc-nano-nav-item-h .text.sc-nano-nav-item{flex:1 0 auto}/*!@:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h.nano-global-nav-bar .sc-nano-nav-item-s>nano-icon[slot=icon-end]{margin-inline:var(--padding-end) 0;margin-block:0}/*!@:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h.nano-global-nav-bar .sc-nano-nav-item-s>nano-icon[slot=icon-start]{margin-inline:0 var(--padding-start);margin-block:0}/*!@:host(.nano-global-nav-bar) ::slotted(a),\n:host(.nano-global-nav-bar) button*/.sc-nano-nav-item-h.nano-global-nav-bar .sc-nano-nav-item-s>a,.nano-global-nav-bar.sc-nano-nav-item-h button.sc-nano-nav-item{position:relative}/*!@:host(.nano-global-nav-bar) ::slotted(a)::before,\n:host(.nano-global-nav-bar) button::before*/.sc-nano-nav-item-h.nano-global-nav-bar .sc-nano-nav-item-s>a::before,.nano-global-nav-bar.sc-nano-nav-item-h button.sc-nano-nav-item::before{content:\"\";background-color:#0c5a71;block-size:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}/*!@:host(.nano-global-nav-bar) .selected button::before,\n:host(.nano-global-nav-bar) .secondary-open button::before*/.nano-global-nav-bar.sc-nano-nav-item-h .selected.sc-nano-nav-item button.sc-nano-nav-item::before,.nano-global-nav-bar.sc-nano-nav-item-h .secondary-open.sc-nano-nav-item button.sc-nano-nav-item::before{transform:translateZ(0) scaleX(1)}/*!@:host(.nano-global-nav-bar.selected) ::slotted(a)::before*/.sc-nano-nav-item-h.nano-global-nav-bar.selected .sc-nano-nav-item-s>a::before{transform:translateZ(0) scaleX(1)}/*!@:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before*/.nano-global-nav-bar.has-secondary.sc-nano-nav-item-h .secondary-open.sc-nano-nav-item button.sc-nano-nav-item::before{opacity:0.7}/*!@:host(.nano-global-nav-bar.has-secondary) .secondary-menu*/.nano-global-nav-bar.has-secondary.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}/*!@:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open*/.nano-global-nav-bar.has-secondary.sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{transform:translateY(12px) translateZ(0)}/*!@:host(.nano-menu-drawer) .link,\n:host(.nano-menu-drawer) a,\n:host(.nano-menu-drawer) button*/.nano-menu-drawer.sc-nano-nav-item-h .link.sc-nano-nav-item,.nano-menu-drawer.sc-nano-nav-item-h a.sc-nano-nav-item,.nano-menu-drawer.sc-nano-nav-item-h button.sc-nano-nav-item{padding-block:calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);padding-inline:var(--padding-start) 0;display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;inline-size:100%}/*!@:host(.nano-menu-drawer) .text*/.nano-menu-drawer.sc-nano-nav-item-h .text.sc-nano-nav-item{padding-inline:0 var(--padding-end);text-align:start;flex:0 1 auto;min-inline-size:130px;inline-size:130px}/*!@:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start])*/.sc-nano-nav-item-h.nano-menu-drawer .sc-nano-nav-item-s>nano-icon[slot=icon-start]{padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);inline-size:var(--icon-size);flex:0 0 var(--icon-size)}/*!@:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end])*/.sc-nano-nav-item-h.nano-menu-drawer .sc-nano-nav-item-s>nano-icon[slot=icon-end]{padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-inline-size:20px}/*!@:host(.nano-menu-drawer) .secondary-menu*/.nano-menu-drawer.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);block-size:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;inline-size:var(--secondary-width, 400px);max-inline-size:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}/*!@:host(.nano-menu-drawer) .secondary-menu:focus*/.nano-menu-drawer.sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item:focus{outline:none}/*!@:host(.nano-menu-drawer) .secondary-menu.open*/.nano-menu-drawer.sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{transform:translateX(100%)}/*!@:host(.nano-menu-drawer) .notification*/.nano-menu-drawer.sc-nano-nav-item-h .notification.sc-nano-nav-item{position:relative}/*!@:host(.nano-menu-drawer) .notification::after*/.nano-menu-drawer.sc-nano-nav-item-h .notification.sc-nano-nav-item::after{content:\"\";display:block;position:absolute;inline-size:6px;block-size:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (min-width: 52em){/*!@:host(.nano-menu-drawer) .notification::after*/.nano-menu-drawer.sc-nano-nav-item-h .notification.sc-nano-nav-item::after{inline-size:7px;block-size:7px;inset-inline-start:8px;inset-block-start:5px}}/*!@:host(.nano-menu-drawer[dir=rtl]) .secondary-menu*/.nano-menu-drawer[dir=rtl].sc-nano-nav-item-h .secondary-menu.sc-nano-nav-item{transform:translateX(0%)}/*!@:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open*/.nano-menu-drawer[dir=rtl].sc-nano-nav-item-h .secondary-menu.open.sc-nano-nav-item{transform:translateX(-100%);opacity:1}";
22302
+
22303
+ /**
22304
+ * Nav items to be used with the various nav items.
22305
+ * [Globla-Nav](/story/compounds-global-nav)
22306
+ * [Menu-Drawer](/story/components-menu-drawer)
22307
+ * [Dropdown](/story/components-dropdown)
22308
+ *
22309
+ * @slot icon-start - an icon at the start of the main control
22310
+ * @slot icon-end - an icon at the end of the main control
22311
+ * @slot secondary - a content panel in which you can place any html to display on control click
22312
+ * @slot - use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)
22313
+ * @part ctrl - the controlling `<a>` or `<button>` element
22314
+ * @part ctrl--button - the controlling `<button>` element
22315
+ * @part ctrl--anchor - the controlling <a> element
22316
+ * @part ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)
22317
+ * @part secondary-wrapper - the div surrounding slotted secondary content
22318
+ * @part secondary-mask - the div that is added when secondary content is shown
22319
+ */
22320
+ class NavItem {
22321
+ constructor(hostRef) {
22322
+ registerInstance(this, hostRef);
22323
+ this.nanoClose = createEvent(this, "nanoClose", 7);
22324
+ this.nanoOpen = createEvent(this, "nanoOpen", 7);
22325
+ this.nanoOpening = createEvent(this, "nanoOpening", 7);
22326
+ this.nanoClosing = createEvent(this, "nanoClosing", 7);
22327
+ this.nanoBlur = createEvent(this, "nanoBlur", 7);
22328
+ this.nanoFocus = createEvent(this, "nanoFocus", 7);
22329
+ this.hasSecondarySlot = false;
22330
+ this.animating = false;
22331
+ this.closeSecondary = async () => {
22332
+ if (!this.hasSecondarySlot || !this.didOpen)
22333
+ return;
22334
+ this.open = false;
22335
+ await displayTransition(this.secondaryDiv, {
22336
+ className: 'open',
22337
+ show: false,
22338
+ });
22339
+ this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });
22340
+ this.didOpen = false;
22341
+ };
22342
+ this.openSecondary = async () => {
22343
+ if (window.innerWidth < this.secondaryActiveWidth) {
22344
+ this.secondaryFallback.call(this);
22345
+ return;
22346
+ }
22347
+ if (!this.hasSecondarySlot || this.didOpen)
22348
+ return;
22349
+ this.open = true;
22350
+ await displayTransition(this.secondaryDiv, {
22351
+ className: 'open',
22352
+ show: true,
22353
+ });
22354
+ this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });
22355
+ this.didOpen = true;
22356
+ };
22357
+ this.toggleSecondary = () => {
22358
+ if (!this.hasSecondarySlot)
22359
+ return;
22360
+ if (this.didOpen)
22361
+ this.closeSecondary();
22362
+ else
22363
+ this.openSecondary();
22364
+ };
22365
+ this.handleFocus = () => {
22366
+ this.hasFocus = true;
22367
+ // opens secondary panel when activated via hover
22368
+ if (this.href && !this.animating && this.hasSecondarySlot)
22369
+ this.openSecondary();
22370
+ this.nanoFocus.emit();
22371
+ };
22372
+ this.handleHostBlur = () => {
22373
+ if (this.animating)
22374
+ return;
22375
+ // tab index is added to host when secondary panel opens
22376
+ // to return focus after secondary panel closes. Remove now if it was added
22377
+ this.el.removeAttribute('tabindex');
22378
+ this.hasFocus = false;
22379
+ this.nanoBlur.emit();
22380
+ };
22381
+ // direct host clicks to internal button
22382
+ this.handleHostClick = (ev) => {
22383
+ if (!this.hasAnchorEle)
22384
+ return;
22385
+ const foundlink = ev.target.closest('a, button');
22386
+ if (!foundlink)
22387
+ this.btn.click();
22388
+ };
22389
+ // handles secondary menu hover behaviour.
22390
+ this.handleMouseEnter = async () => {
22391
+ if (!this.href ||
22392
+ this.animating ||
22393
+ !this.hasSecondarySlot ||
22394
+ (this.globalNavEle && !this.globalNavEle.classList.contains('ready')))
22395
+ return;
22396
+ // if there are sibling secondary panels currently open,
22397
+ // we need to wait before opening otherwise we get unwanted overlapping
22398
+ let timeToWait = 0;
22399
+ if (getSiblings(this.el, '.secondary-open.has-secondary').length)
22400
+ timeToWait = 300;
22401
+ clearTimeout(this.waitHide);
22402
+ this.fromHover = true;
22403
+ this.animating = true;
22404
+ this.waitShow = window.setTimeout(async () => await this.openSecondary(), timeToWait);
22405
+ this.animating = false;
22406
+ };
22407
+ // handles secondary menu hover-out behaviour.
22408
+ this.handleMouseLeave = () => {
22409
+ if (!this.href)
22410
+ return;
22411
+ clearTimeout(this.waitShow);
22412
+ this.fromHover = true;
22413
+ this.animating = true;
22414
+ // prevent closing immediately - makes navigating to items within more forgiving
21035
22415
  this.waitHide = window.setTimeout(async () => await this.closeSecondary(), 300);
21036
22416
  this.animating = false;
21037
22417
  };
@@ -22501,7 +23881,7 @@ class ResizeObserve {
22501
23881
  "currentHeight": ["dimensionChanged"],
22502
23882
  "currentWidth": ["dimensionChanged"]
22503
23883
  }; }
22504
- static get style() { return "/*!@nano-resize-observe*/nano-resize-observe.sc-nano-resize-observe { display: contents }"; }
23884
+ static get style() { return "/*!@nano-resize-observe*/nano-resize-observe.sc-nano-resize-observe { display: block }"; }
22505
23885
  static get cmpMeta() { return {
22506
23886
  "$flags$": 9,
22507
23887
  "$tagName$": "nano-resize-observe",
@@ -27857,32 +29237,6 @@ class Sticker {
27857
29237
  else
27858
29238
  this.host.parentNode.insertBefore(this.trigger, this.host.nextSibling);
27859
29239
  }
27860
- /**
27861
- * Gets the 'closest' scrolling parent
27862
- * @returns either an element with `overflow: scroll | auto` or the parent Document
27863
- */
27864
- getScrollParent() {
27865
- const regex = /(auto|scroll)/;
27866
- const parents = (_node, ps) => {
27867
- if (_node.parentNode === null) {
27868
- return ps;
27869
- }
27870
- return parents(_node.parentNode, ps.concat([_node]));
27871
- };
27872
- const style = (_node, prop) => getComputedStyle(_node, null).getPropertyValue(prop);
27873
- const overflow = (_node) => style(_node, 'overflow') +
27874
- style(_node, 'overflow-y') +
27875
- style(_node, 'overflow-x');
27876
- const scroll = (_node) => regex.test(overflow(_node));
27877
- const docHeight = document.documentElement.getBoundingClientRect().height;
27878
- const scrollParent = (_node) => {
27879
- if (!(typeof _node === 'object'))
27880
- return;
27881
- const ps = parents(_node, []);
27882
- return (ps.find((ele) => scroll(ele) && ele.getBoundingClientRect().height !== docHeight) || document);
27883
- };
27884
- return scrollParent(this.host);
27885
- }
27886
29240
  shouldStick(data) {
27887
29241
  let scrollAmt;
27888
29242
  if (this.positions.includes('top')) {
@@ -27908,7 +29262,7 @@ class Sticker {
27908
29262
  }
27909
29263
  bootstrapGurantor() {
27910
29264
  this.hasBootstrapped = true;
27911
- this.scrollParent = this.scrollParent || this.getScrollParent();
29265
+ this.scrollParent = this.scrollParent || findScrollParent(this.host);
27912
29266
  this.isRootSticker = this.scrollParent instanceof Document;
27913
29267
  this.trigger = this.trigger || document.createElement('div');
27914
29268
  this.trigger.innerHTML = '&nbsp;';
@@ -28243,12 +29597,11 @@ class TabGroup {
28243
29597
  if (this.disableSwipe)
28244
29598
  return;
28245
29599
  const touch = event.changedTouches[0];
28246
- const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled
28247
- const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled
29600
+ const distX = touch.pageX - this.initialTouchX; // get horizontal dist travelled
28248
29601
  const threshold = 70;
28249
29602
  const xDiff = this.initialTouchX - touch.clientX;
28250
29603
  const yDiff = this.initialTouchY - touch.clientY;
28251
- const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
29604
+ const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(yDiff) <= 50;
28252
29605
  const tabs = this.getAllActiveTabs;
28253
29606
  const currIndex = tabs.findIndex((el) => el.active);
28254
29607
  if (isHorizontalSwipe) {
@@ -29747,27 +31100,6 @@ function classListToStr(classes) {
29747
31100
  });
29748
31101
  return classString;
29749
31102
  }
29750
- /**
29751
- * Attempts to find the closes scrolling parental element
29752
- * @param element - the element from which to traverse up the DOM
29753
- * @returns - the closest scrolling parental element
29754
- */
29755
- function findScrollParent(element) {
29756
- let style = getComputedStyle(element);
29757
- const excludeStaticParent = style.position === 'absolute';
29758
- const overflowRegex = /(auto|scroll)/;
29759
- if (style.position === 'fixed')
29760
- return document.documentElement;
29761
- for (let parent = element; (parent = parent.parentElement);) {
29762
- style = getComputedStyle(parent);
29763
- if (excludeStaticParent && style.position === 'static') {
29764
- continue;
29765
- }
29766
- if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX))
29767
- return parent;
29768
- }
29769
- return document.documentElement;
29770
- }
29771
31103
  /**
29772
31104
  * Checks whether an element is currently viewable within the viewport
29773
31105
  * @param el - element to check
@@ -31436,7 +32768,6 @@ registerComponents([
31436
32768
  AlgoliaFilter,
31437
32769
  AlgoliaPagination,
31438
32770
  AlgoliaResults,
31439
- AspectRatio,
31440
32771
  Checkbox,
31441
32772
  CheckboxGroup,
31442
32773
  DataList,
@@ -31459,8 +32790,10 @@ registerComponents([
31459
32790
  IconButton,
31460
32791
  Img,
31461
32792
  Input,
32793
+ IntersectionObserve,
31462
32794
  Menu,
31463
32795
  MenuDrawer,
32796
+ NanoAnimation,
31464
32797
  NavItem,
31465
32798
  Option,
31466
32799
  OverflowNav,