@supersoniks/concorde 5.1.1 → 5.1.3-immutable.1

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 (459) hide show
  1. package/.agents/skills/concorde-docs/SKILL.md +153 -0
  2. package/.agents/skills/{concorde-component-docs/template.md → concorde-docs/templates/component.md} +6 -2
  3. package/.agents/skills/concorde-docs/templates/decorator.md +43 -0
  4. package/.agents/skills/concorde-docs/templates/guide.md +25 -0
  5. package/.claude/skills +1 -0
  6. package/.github/workflows/ci.yml +21 -0
  7. package/.github-export-ignore +30 -0
  8. package/CONTRIBUTING.md +59 -0
  9. package/DEV.md +54 -0
  10. package/LICENSE +21 -0
  11. package/OPEN_SOURCE_CHECKPOINT.md +133 -0
  12. package/README.md +4 -4
  13. package/ai/README.md +29 -41
  14. package/ai/skills/concorde/SKILL.md +54 -324
  15. package/ai/skills/concorde/rules/composition.md +32 -0
  16. package/ai/skills/concorde/rules/data.md +47 -0
  17. package/ai/skills/concorde/rules/http.md +25 -0
  18. package/ai/skills/concorde/rules/lists-forms.md +35 -0
  19. package/ai/skills/concorde/rules/styling.md +46 -0
  20. package/ai/skills/concorde/rules/troubleshooting.md +45 -0
  21. package/build-infos.json +1 -1
  22. package/concorde-core.bundle.js +177 -177
  23. package/concorde-core.es.js +4993 -4833
  24. package/custom-elements-manifest.public.config.mjs +8 -0
  25. package/{.tmp-cem/custom-elements.json → custom-elements.json} +11758 -8904
  26. package/dist/concorde-core.bundle.js +177 -177
  27. package/dist/concorde-core.es.js +4993 -4833
  28. package/dist/docs-mock-api-sw.js +58 -223
  29. package/dist/docs-mock-api-sw.js.map +4 -4
  30. package/dist/img/concorde/plane_01.jpg +0 -0
  31. package/dist/img/concorde/plane_02.jpg +0 -0
  32. package/dist/img/concorde/plane_03.jpg +0 -0
  33. package/dist/img/concorde/plane_04.jpg +0 -0
  34. package/dist/img/concorde/plane_05.jpg +0 -0
  35. package/dist/img/concorde/plane_06.jpg +0 -0
  36. package/dist/img/concorde/plane_07.jpg +0 -0
  37. package/dist/img/concorde/plane_08.jpg +0 -0
  38. package/dist/img/concorde/plane_09.jpg +0 -0
  39. package/dist/img/concorde/plane_10.jpg +0 -0
  40. package/dist/img/concorde/plane_11.jpg +0 -0
  41. package/dist/img/concorde/plane_12.jpg +0 -0
  42. package/dist/img/concorde/plane_13.jpg +0 -0
  43. package/dist/img/og-concorde.jpg +0 -0
  44. package/dist/robots.txt +11 -10
  45. package/docs/assets/index-D_alEsng.js +12122 -0
  46. package/docs/crawl/core/components/functional/date/date.html +190 -0
  47. package/docs/crawl/core/components/functional/fetch/fetch.html +109 -0
  48. package/docs/crawl/core/components/functional/if/if.html +27 -0
  49. package/docs/crawl/core/components/functional/jsonata/jsonata.html +79 -0
  50. package/docs/crawl/core/components/functional/list/list.html +70 -0
  51. package/docs/crawl/core/components/functional/mix/mix.html +45 -0
  52. package/docs/crawl/core/components/functional/queue/queue.html +96 -0
  53. package/docs/crawl/core/components/functional/router/router.html +106 -0
  54. package/docs/crawl/core/components/functional/sdui/sdui-extension-points.html +126 -0
  55. package/docs/crawl/core/components/functional/sdui/sdui.html +368 -0
  56. package/docs/crawl/core/components/functional/states/states.html +66 -0
  57. package/docs/crawl/core/components/functional/submit/submit.html +160 -0
  58. package/docs/crawl/core/components/functional/subscriber/subscriber.html +67 -0
  59. package/docs/crawl/core/components/functional/value/value.html +51 -0
  60. package/docs/crawl/core/components/ui/alert/alert.html +211 -0
  61. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +131 -0
  62. package/docs/crawl/core/components/ui/badge/badge.html +197 -0
  63. package/docs/crawl/core/components/ui/button/button.html +150 -0
  64. package/docs/crawl/core/components/ui/captcha/captcha.html +112 -0
  65. package/docs/crawl/core/components/ui/card/card.html +253 -0
  66. package/docs/crawl/core/components/ui/divider/divider.html +144 -0
  67. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +73 -0
  68. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +266 -0
  69. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +122 -0
  70. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +121 -0
  71. package/docs/crawl/core/components/ui/form/input/input.html +109 -0
  72. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +38 -0
  73. package/docs/crawl/core/components/ui/form/radio/radio.html +56 -0
  74. package/docs/crawl/core/components/ui/form/select/select.html +73 -0
  75. package/docs/crawl/core/components/ui/form/switch/switch.html +56 -0
  76. package/docs/crawl/core/components/ui/form/textarea/textarea.html +59 -0
  77. package/docs/crawl/core/components/ui/group/group.html +104 -0
  78. package/docs/crawl/core/components/ui/icon/icon.html +222 -0
  79. package/docs/crawl/core/components/ui/image/image.html +298 -0
  80. package/docs/crawl/core/components/ui/link/link.html +100 -0
  81. package/docs/crawl/core/components/ui/loader/loader.html +124 -0
  82. package/docs/crawl/core/components/ui/menu/menu.html +394 -0
  83. package/docs/crawl/core/components/ui/modal/modal.html +342 -0
  84. package/docs/crawl/core/components/ui/pop/pop.html +296 -0
  85. package/docs/crawl/core/components/ui/progress/progress.html +131 -0
  86. package/docs/crawl/core/components/ui/table/table.html +545 -0
  87. package/docs/crawl/core/components/ui/theme/theme.html +131 -0
  88. package/docs/crawl/core/components/ui/toast/toast.html +233 -0
  89. package/docs/crawl/core/components/ui/tooltip/tooltip.html +140 -0
  90. package/docs/crawl/docs/_core-concept/dataFlow.html +177 -0
  91. package/docs/crawl/docs/_core-concept/overview.html +66 -0
  92. package/docs/crawl/docs/_core-concept/subscriber.html +75 -0
  93. package/docs/crawl/docs/_decorators/ancestor-attribute.html +117 -0
  94. package/docs/crawl/docs/_decorators/auto-subscribe.html +202 -0
  95. package/docs/crawl/docs/_decorators/bind.html +141 -0
  96. package/docs/crawl/docs/_decorators/get.html +149 -0
  97. package/docs/crawl/docs/_decorators/handle.html +165 -0
  98. package/docs/crawl/docs/_decorators/on-assign.html +355 -0
  99. package/docs/crawl/docs/_decorators/patch.html +78 -0
  100. package/docs/crawl/docs/_decorators/post.html +139 -0
  101. package/docs/crawl/docs/_decorators/publish.html +61 -0
  102. package/docs/crawl/docs/_decorators/put.html +78 -0
  103. package/docs/crawl/docs/_decorators/subscribe.html +109 -0
  104. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +137 -0
  105. package/docs/crawl/docs/_directives/sub.html +93 -0
  106. package/docs/crawl/docs/_getting-started/ai-agents.html +173 -0
  107. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +100 -0
  108. package/docs/crawl/docs/_getting-started/concorde-outside.html +58 -0
  109. package/docs/crawl/docs/_getting-started/create-a-component.html +111 -0
  110. package/docs/crawl/docs/_getting-started/my-first-component.html +189 -0
  111. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +110 -0
  112. package/docs/crawl/docs/_getting-started/pubsub.html +62 -0
  113. package/docs/crawl/docs/_getting-started/start.html +76 -0
  114. package/docs/crawl/docs/_getting-started/theming.html +333 -0
  115. package/docs/crawl/docs/_misc/api-configuration.html +149 -0
  116. package/docs/crawl/docs/_misc/dataProviderKey.html +135 -0
  117. package/docs/crawl/docs/_misc/docs-mock-api.html +158 -0
  118. package/docs/crawl/docs/_misc/dynamic-path.html +180 -0
  119. package/docs/crawl/docs/_misc/endpoint.html +50 -0
  120. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +138 -0
  121. package/docs/crawl/docs/_misc/html-integration.html +48 -0
  122. package/docs/crawl/hubs/decorators.html +547 -0
  123. package/docs/crawl/hubs/form-components.html +381 -0
  124. package/docs/crawl/hubs/remote-data.html +452 -0
  125. package/docs/crawl/index.html +103 -0
  126. package/docs/index.html +1 -1
  127. package/docs/llms-full.txt +7174 -0
  128. package/docs/llms.txt +98 -0
  129. package/docs/sitemap.xml +243 -0
  130. package/docs/src/core/components/functional/date/date.md +290 -0
  131. package/docs/src/core/components/functional/fetch/fetch.md +125 -0
  132. package/docs/src/core/components/functional/if/if.md +9 -0
  133. package/docs/src/core/components/functional/jsonata/jsonata.md +56 -0
  134. package/docs/src/core/components/functional/list/list.md +65 -0
  135. package/docs/src/core/components/functional/mix/mix.md +41 -0
  136. package/docs/src/core/components/functional/queue/queue.md +72 -0
  137. package/docs/src/core/components/functional/router/router.md +94 -0
  138. package/docs/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
  139. package/docs/src/core/components/functional/sdui/component-catalog.json +3103 -0
  140. package/docs/src/core/components/functional/sdui/default-library.json +108 -0
  141. package/docs/src/core/components/functional/sdui/example.json +99 -0
  142. package/docs/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
  143. package/docs/src/core/components/functional/sdui/sdui.md +478 -0
  144. package/docs/src/core/components/functional/states/states.md +87 -0
  145. package/docs/src/core/components/functional/submit/submit.md +114 -0
  146. package/docs/src/core/components/functional/subscriber/subscriber.md +91 -0
  147. package/docs/src/core/components/functional/value/value.md +35 -0
  148. package/docs/src/core/components/ui/alert/alert.md +196 -0
  149. package/docs/src/core/components/ui/alert-messages/alert-messages.md +85 -0
  150. package/docs/src/core/components/ui/badge/badge.md +188 -0
  151. package/docs/src/core/components/ui/button/button.md +183 -0
  152. package/docs/src/core/components/ui/captcha/captcha.md +71 -0
  153. package/docs/src/core/components/ui/card/card.md +215 -0
  154. package/docs/src/core/components/ui/divider/divider.md +129 -0
  155. package/docs/src/core/components/ui/form/checkbox/checkbox.md +77 -0
  156. package/docs/src/core/components/ui/form/fieldset/fieldset.md +205 -0
  157. package/docs/src/core/components/ui/form/form-actions/form-actions.md +100 -0
  158. package/docs/src/core/components/ui/form/form-layout/form-layout.md +119 -0
  159. package/docs/src/core/components/ui/form/input/input.md +142 -0
  160. package/docs/src/core/components/ui/form/radio/radio.md +57 -0
  161. package/docs/src/core/components/ui/form/select/select.md +71 -0
  162. package/docs/src/core/components/ui/form/switch/switch.md +57 -0
  163. package/docs/src/core/components/ui/form/textarea/textarea.md +65 -0
  164. package/docs/src/core/components/ui/group/group.md +75 -0
  165. package/docs/src/core/components/ui/icon/icon.md +214 -0
  166. package/docs/src/core/components/ui/icon/icons.json +1 -0
  167. package/docs/src/core/components/ui/image/image.md +233 -0
  168. package/docs/src/core/components/ui/link/link.md +81 -0
  169. package/docs/src/core/components/ui/loader/loader.md +112 -0
  170. package/docs/src/core/components/ui/menu/menu.md +370 -0
  171. package/docs/src/core/components/ui/modal/modal.md +235 -0
  172. package/docs/src/core/components/ui/pop/pop.md +294 -0
  173. package/docs/src/core/components/ui/progress/progress.md +109 -0
  174. package/docs/src/core/components/ui/table/table.md +431 -0
  175. package/docs/src/core/components/ui/theme/theme.md +122 -0
  176. package/docs/src/core/components/ui/toast/toast.md +216 -0
  177. package/docs/src/core/components/ui/tooltip/tooltip.md +124 -0
  178. package/{src → docs/src}/docs/_core-concept/subscriber.md +0 -0
  179. package/{src → docs/src}/docs/_getting-started/my-first-subscriber.md +0 -0
  180. package/{src → docs/src}/docs/_getting-started/pubsub.md +0 -0
  181. package/docs/src/docs/_getting-started/theming.md +253 -0
  182. package/docs/src/docs/search/docs-search.json +12242 -0
  183. package/docs/src/tag-list.json +1 -0
  184. package/docs/src/tsconfig-model.json +23 -0
  185. package/docs/src/tsconfig.declarations.json +22 -0
  186. package/docs/src/tsconfig.emit.json +23 -0
  187. package/docs/src/tsconfig.json +1332 -0
  188. package/gitlab/job_github_mirror.sh +39 -0
  189. package/index.html +157 -5
  190. package/package.json +22 -4
  191. package/public/docs-mock-api-sw.js +58 -223
  192. package/public/docs-mock-api-sw.js.map +4 -4
  193. package/public/img/concorde/plane_01.jpg +0 -0
  194. package/public/img/concorde/plane_02.jpg +0 -0
  195. package/public/img/concorde/plane_03.jpg +0 -0
  196. package/public/img/concorde/plane_04.jpg +0 -0
  197. package/public/img/concorde/plane_05.jpg +0 -0
  198. package/public/img/concorde/plane_06.jpg +0 -0
  199. package/public/img/concorde/plane_07.jpg +0 -0
  200. package/public/img/concorde/plane_08.jpg +0 -0
  201. package/public/img/concorde/plane_09.jpg +0 -0
  202. package/public/img/concorde/plane_10.jpg +0 -0
  203. package/public/img/concorde/plane_11.jpg +0 -0
  204. package/public/img/concorde/plane_12.jpg +0 -0
  205. package/public/img/concorde/plane_13.jpg +0 -0
  206. package/public/img/og-concorde.jpg +0 -0
  207. package/public/robots.txt +11 -10
  208. package/scripts/ai-init.mjs +104 -379
  209. package/scripts/ai-init.test.mjs +81 -239
  210. package/scripts/docs-markdown-vite-plugin.ts +43 -0
  211. package/scripts/docs-public-url.mjs +56 -0
  212. package/scripts/docs.htaccess +82 -0
  213. package/scripts/generate-cem.mjs +244 -0
  214. package/scripts/generate-cem.test.mjs +122 -0
  215. package/scripts/generate-crawl-docs.mjs +233 -118
  216. package/scripts/generate-crawl-docs.test.mjs +124 -0
  217. package/scripts/generate-sdui-catalog.mjs +11 -10
  218. package/scripts/github-export.mjs +150 -0
  219. package/scripts/post-build-docs.js +37 -50
  220. package/scripts/post-build.mjs +0 -0
  221. package/scripts/pre-publish.mjs +2 -1
  222. package/scripts/site-pages.mjs +212 -0
  223. package/scripts/site-pages.test.mjs +116 -0
  224. package/site-pages/about.md +22 -0
  225. package/site-pages/privacy.md +32 -0
  226. package/src/core/components/functional/date/date.md +91 -231
  227. package/src/core/components/functional/example/example.ts +3 -1
  228. package/src/core/components/functional/fetch/fetch.md +66 -83
  229. package/src/core/components/functional/if/if.md +28 -3
  230. package/src/core/components/functional/if/if.ts +0 -0
  231. package/src/core/components/functional/jsonata/jsonata.md +42 -37
  232. package/src/core/components/functional/list/list.demo.ts +0 -0
  233. package/src/core/components/functional/list/list.md +103 -43
  234. package/src/core/components/functional/list/list.ts +17 -4
  235. package/src/core/components/functional/mix/mix.md +31 -26
  236. package/src/core/components/functional/queue/queue.demo.ts +10 -7
  237. package/src/core/components/functional/queue/queue.md +40 -61
  238. package/src/core/components/functional/router/router.demo.ts +16 -16
  239. package/src/core/components/functional/router/router.md +64 -65
  240. package/src/core/components/functional/router/router.ts +0 -0
  241. package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +0 -0
  242. package/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
  243. package/src/core/components/functional/sdui/component-catalog.json +2 -2
  244. package/src/core/components/functional/sdui/example.json +19 -86
  245. package/src/core/components/functional/sdui/sdui-extension-points.md +1 -1
  246. package/src/core/components/functional/sdui/sdui-immutable.spec.ts +74 -0
  247. package/src/core/components/functional/sdui/sdui.md +187 -358
  248. package/src/core/components/functional/sdui/sdui.ts +33 -8
  249. package/src/core/components/functional/sdui/types.ts +0 -0
  250. package/src/core/components/functional/states/states.demo.ts +21 -22
  251. package/src/core/components/functional/states/states.md +86 -61
  252. package/src/core/components/functional/states/states.ts +1 -1
  253. package/src/core/components/functional/submit/submit.md +64 -72
  254. package/src/core/components/functional/submit/submit.spec.ts +60 -0
  255. package/src/core/components/functional/submit/submit.ts +6 -3
  256. package/src/core/components/functional/subscriber/subscriber.ts +0 -0
  257. package/src/core/components/functional/translation/translation.md +38 -0
  258. package/src/core/components/functional/value/value.md +34 -22
  259. package/src/core/components/functional/value/value.ts +0 -0
  260. package/src/core/components/ui/_css/size.ts +0 -0
  261. package/src/core/components/ui/alert/alert.md +48 -58
  262. package/src/core/components/ui/badge/badge.md +27 -34
  263. package/src/core/components/ui/button/button.md +139 -106
  264. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  265. package/src/core/components/ui/captcha/captcha.md +17 -32
  266. package/src/core/components/ui/card/card.md +6 -6
  267. package/src/core/components/ui/divider/divider.md +8 -11
  268. package/src/core/components/ui/form/checkbox/checkbox.md +90 -42
  269. package/src/core/components/ui/form/fieldset/fieldset.md +31 -75
  270. package/src/core/components/ui/form/form-actions/form-actions.md +14 -16
  271. package/src/core/components/ui/form/form-layout/form-layout.md +19 -29
  272. package/src/core/components/ui/form/input/input.md +108 -90
  273. package/src/core/components/ui/form/input/input.ts +8 -2
  274. package/src/core/components/ui/form/radio/radio.md +65 -30
  275. package/src/core/components/ui/form/select/select.md +60 -45
  276. package/src/core/components/ui/form/switch/switch.md +57 -34
  277. package/src/core/components/ui/form/textarea/textarea.md +55 -38
  278. package/src/core/components/ui/group/group.md +35 -33
  279. package/src/core/components/ui/icon/icon.md +4 -4
  280. package/src/core/components/ui/image/image.md +41 -107
  281. package/src/core/components/ui/link/link.md +6 -6
  282. package/src/core/components/ui/loader/loader.md +30 -55
  283. package/src/core/components/ui/menu/menu.md +27 -27
  284. package/src/core/components/ui/modal/modal.md +72 -96
  285. package/src/core/components/ui/pop/pop.md +80 -158
  286. package/src/core/components/ui/progress/progress.md +2 -2
  287. package/src/core/components/ui/table/table.md +91 -255
  288. package/src/core/components/ui/theme/theme.md +11 -36
  289. package/src/core/components/ui/toast/toast.md +48 -117
  290. package/src/core/components/ui/tooltip/tooltip.md +27 -62
  291. package/src/core/decorators/subscriber/bind.ts +9 -14
  292. package/src/core/decorators/subscriber/subscribe.ts +15 -9
  293. package/src/core/decorators/subscriber/subscribe.type-test.ts +14 -5
  294. package/src/core/mixins/Subscriber.ts +0 -0
  295. package/src/core/utils/DataBindObserver.ts +0 -0
  296. package/src/core/utils/LocationHandler.spec.ts +80 -0
  297. package/src/core/utils/LocationHandler.ts +5 -9
  298. package/src/core/utils/Objects.ts +0 -0
  299. package/src/core/utils/PublisherProxy.ts +166 -125
  300. package/src/core/utils/deepReadonly.spec.ts +66 -0
  301. package/src/core/utils/deepReadonly.ts +71 -0
  302. package/src/core/utils/immutableValue.spec.ts +54 -0
  303. package/src/core/utils/immutableValue.ts +102 -0
  304. package/src/core/utils/nestedDotForm.spec.ts +88 -0
  305. package/src/core/utils/publisherImmutable.spec.ts +76 -0
  306. package/src/core/utils/route.ts +0 -0
  307. package/src/core/utils/strictGet.spec.ts +61 -0
  308. package/src/core/utils/strictGet.ts +102 -0
  309. package/src/css.d.ts +19 -0
  310. package/src/docs/components/docs-demo-sources.ts +55 -140
  311. package/src/docs/components/docs-lit-demo.ts +1 -3
  312. package/src/docs/components/docs-source-link.ts +0 -82
  313. package/src/docs/decorators/ancestor-attribute.md +59 -0
  314. package/src/docs/decorators/auto-subscribe.md +40 -0
  315. package/src/docs/decorators/bind.md +76 -0
  316. package/src/docs/decorators/get.md +160 -0
  317. package/src/docs/decorators/handle.md +119 -0
  318. package/src/docs/decorators/on-assign.md +63 -0
  319. package/src/docs/decorators/patch.md +44 -0
  320. package/src/docs/decorators/post.md +134 -0
  321. package/src/docs/decorators/publish.md +56 -0
  322. package/src/docs/decorators/put.md +51 -0
  323. package/src/docs/decorators/subscribe.md +87 -0
  324. package/src/docs/decorators/wait-for-ancestors.md +76 -0
  325. package/src/docs/directives/sub.md +75 -0
  326. package/src/docs/directives/t.md +73 -0
  327. package/src/docs/docs-location.spec.ts +56 -0
  328. package/src/docs/docs-location.ts +133 -32
  329. package/src/docs/docs.ts +1 -2
  330. package/src/docs/example/decorators-demo-bind-demos.ts +83 -135
  331. package/src/docs/example/decorators-demo-geo.ts +30 -19
  332. package/src/docs/example/decorators-demo-post.ts +88 -186
  333. package/src/docs/example/decorators-demo-subscribe-publish-get-demos.ts +165 -268
  334. package/src/docs/example/decorators-demo.ts +85 -98
  335. package/src/docs/example/docs-api-config-demos.ts +19 -20
  336. package/src/docs/example/docs-flight-demos.ts +147 -0
  337. package/src/docs/example/docs-jsonata-demos.ts +52 -52
  338. package/src/docs/example/docs-list-demos.ts +43 -123
  339. package/src/docs/example/docs-provider-keys.ts +21 -28
  340. package/src/docs/example/docs-queue-demos.ts +37 -77
  341. package/src/docs/example/docs-router-demos.ts +20 -25
  342. package/src/docs/example/docs-submit-demos.ts +48 -48
  343. package/src/docs/example/docs-toggle-demos.ts +4 -3
  344. package/src/docs/example/users.ts +0 -0
  345. package/src/docs/getting-started/ai-agents.md +50 -0
  346. package/src/docs/getting-started/create-a-component.md +136 -0
  347. package/src/docs/getting-started/dataFlow.md +87 -0
  348. package/src/docs/getting-started/installation.md +36 -0
  349. package/src/docs/getting-started/my-first-component.md +227 -0
  350. package/src/docs/getting-started/start.md +35 -0
  351. package/src/docs/header/header.ts +11 -6
  352. package/src/docs/home/catalog.ts +1 -1
  353. package/src/docs/home/home.ts +20 -11
  354. package/src/docs/layout.ts +12 -13
  355. package/src/docs/misc/api-configuration.md +79 -0
  356. package/src/docs/misc/dataProviderKey.md +168 -0
  357. package/src/docs/misc/docs-mock-api.md +62 -0
  358. package/src/docs/misc/dynamic-path.md +71 -0
  359. package/src/docs/misc/endpoint.md +45 -0
  360. package/src/docs/misc/html-integration.md +14 -0
  361. package/src/docs/misc/publisher-get-immutability-docs-crawl.json +902 -0
  362. package/src/docs/misc/publisher-get-immutability-docs-recheck.json +13 -0
  363. package/src/docs/misc/publisher-get-immutability-study.md +229 -0
  364. package/src/docs/mock-api/api-config-mock.ts +5 -0
  365. package/src/docs/mock-api/fixtures.ts +0 -278
  366. package/src/docs/mock-api/flights.ts +89 -0
  367. package/src/docs/mock-api/router.ts +3 -4
  368. package/src/docs/mock-api/urls.ts +1 -2
  369. package/src/docs/navigation/navigation.ts +84 -101
  370. package/src/docs/navigation/toc.ts +7 -4
  371. package/src/docs/search/docs-search.json +3188 -5153
  372. package/src/docs/search/markdown-renderer.ts +31 -8
  373. package/src/docs/search/page.ts +9 -6
  374. package/src/docs/search/search.ts +154 -122
  375. package/src/docs/tailwind/css/docs/content.css +4 -5
  376. package/src/tsconfig.declarations.json +22 -0
  377. package/src/tsconfig.emit.json +23 -0
  378. package/src/tsconfig.json +53 -5
  379. package/src/tsconfig.tsbuildinfo +1 -1
  380. package/vite.config.mts +11 -2
  381. package/.agents/skills/concorde-component-docs/SKILL.md +0 -194
  382. package/.taste-skill/after/desktop-fold.jpg +0 -0
  383. package/.taste-skill/after/desktop-page-01.jpg +0 -0
  384. package/.taste-skill/after/desktop-page-02.jpg +0 -0
  385. package/.taste-skill/after/desktop-page-03.jpg +0 -0
  386. package/.taste-skill/after/mobile-fold.jpg +0 -0
  387. package/.taste-skill/after/mobile-page-01.jpg +0 -0
  388. package/.taste-skill/after/report.json +0 -4103
  389. package/.taste-skill/after/tablet-fold.jpg +0 -0
  390. package/.taste-skill/after/tablet-page-01.jpg +0 -0
  391. package/.taste-skill/after/tablet-page-02.jpg +0 -0
  392. package/.taste-skill/before/desktop-fold.jpg +0 -0
  393. package/.taste-skill/before/desktop-page-01.jpg +0 -0
  394. package/.taste-skill/before/desktop-page-02.jpg +0 -0
  395. package/.taste-skill/before/mobile-fold.jpg +0 -0
  396. package/.taste-skill/before/mobile-page-01.jpg +0 -0
  397. package/.taste-skill/before/report.json +0 -2556
  398. package/.taste-skill/before/tablet-fold.jpg +0 -0
  399. package/.taste-skill/before/tablet-page-01.jpg +0 -0
  400. package/.taste-skill/direction.json +0 -510
  401. package/.taste-skill/notes.md +0 -84
  402. package/.taste-skill/prod/desktop-fold.jpg +0 -0
  403. package/.taste-skill/prod/desktop-page-01.jpg +0 -0
  404. package/.taste-skill/prod/desktop-page-02.jpg +0 -0
  405. package/.taste-skill/prod/desktop-page-03.jpg +0 -0
  406. package/.taste-skill/prod/mobile-fold.jpg +0 -0
  407. package/.taste-skill/prod/mobile-page-01.jpg +0 -0
  408. package/.taste-skill/prod/mobile-page-02.jpg +0 -0
  409. package/.taste-skill/prod/report.json +0 -1973
  410. package/.taste-skill/prod/tablet-fold.jpg +0 -0
  411. package/.taste-skill/prod/tablet-page-01.jpg +0 -0
  412. package/.taste-skill/prod/tablet-page-02.jpg +0 -0
  413. package/AUDIT.md +0 -228
  414. package/PLAN-AMELIORATION.md +0 -220
  415. package/ai/AGENTS.md +0 -56
  416. package/ai/cursor/rules/concorde-menu.mdc +0 -15
  417. package/ai/cursor/rules/concorde-scope.mdc +0 -14
  418. package/ai/cursor/rules/concorde-theme.mdc +0 -13
  419. package/ai/cursor/rules/concorde.mdc +0 -66
  420. package/ai/jetbrains/rules/concorde.md +0 -53
  421. package/ai/skills/concorde-get-set-dp/SKILL.md +0 -194
  422. package/ai/skills/concorde-imports/SKILL.md +0 -78
  423. package/ai/skills/concorde-menu/SKILL.md +0 -74
  424. package/ai/skills/concorde-scope/SKILL.md +0 -70
  425. package/ai/skills/concorde-theme/SKILL.md +0 -57
  426. package/docs/assets/index-Bb-_LRyY.js +0 -12280
  427. package/src/docs/example/docs-input-autocomplete-demos.ts +0 -110
  428. package/src/docs/example/docs-joke-demos.ts +0 -297
  429. /package/{src → docs/src}/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -0
  430. /package/{src → docs/src}/docs/_core-concept/dataFlow.md +0 -0
  431. /package/{src → docs/src}/docs/_core-concept/overview.md +0 -0
  432. /package/{src → docs/src}/docs/_decorators/ancestor-attribute.md +0 -0
  433. /package/{src → docs/src}/docs/_decorators/auto-subscribe.md +0 -0
  434. /package/{src → docs/src}/docs/_decorators/bind.md +0 -0
  435. /package/{src → docs/src}/docs/_decorators/get.md +0 -0
  436. /package/{src → docs/src}/docs/_decorators/handle.md +0 -0
  437. /package/{src → docs/src}/docs/_decorators/on-assign.md +0 -0
  438. /package/{src → docs/src}/docs/_decorators/patch.md +0 -0
  439. /package/{src → docs/src}/docs/_decorators/post.md +0 -0
  440. /package/{src → docs/src}/docs/_decorators/publish.md +0 -0
  441. /package/{src → docs/src}/docs/_decorators/put.md +0 -0
  442. /package/{src → docs/src}/docs/_decorators/subscribe.md +0 -0
  443. /package/{src → docs/src}/docs/_decorators/wait-for-ancestors.md +0 -0
  444. /package/{src → docs/src}/docs/_directives/sub.md +0 -0
  445. /package/{src → docs/src}/docs/_getting-started/ai-agents.md +0 -0
  446. /package/{src → docs/src}/docs/_getting-started/concorde-manual-install.md +0 -0
  447. /package/{src → docs/src}/docs/_getting-started/concorde-outside.md +0 -0
  448. /package/{src → docs/src}/docs/_getting-started/create-a-component.md +0 -0
  449. /package/{src → docs/src}/docs/_getting-started/my-first-component.md +0 -0
  450. /package/{src → docs/src}/docs/_getting-started/start.md +0 -0
  451. /package/{src → docs/src}/docs/_misc/api-configuration.md +0 -0
  452. /package/{src → docs/src}/docs/_misc/dataProviderKey.md +0 -0
  453. /package/{src → docs/src}/docs/_misc/docs-mock-api.md +0 -0
  454. /package/{src → docs/src}/docs/_misc/dynamic-path.md +0 -0
  455. /package/{src → docs/src}/docs/_misc/endpoint.md +0 -0
  456. /package/{src → docs/src}/docs/_misc/formelement-subscriber-removal.md +0 -0
  457. /package/{src → docs/src}/docs/_misc/html-integration.md +0 -0
  458. /package/src/docs/{_getting-started → getting-started}/components.md +0 -0
  459. /package/src/docs/{_getting-started → getting-started}/theming.md +0 -0
package/docs/crawl/core/components/ui/modal/modal.html ADDED
@@ -0,0 +1,342 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html" data-doc-id="core/components/ui/modal/modal">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Modal — Concorde</title>
7
+ <meta name="description" content="sonic-modal presents focused content in a &lt;dialog&gt; overlay with backdrop, enter/exit animation, and a built-in close control. Compose sonic-modal-title / sonic-modal-subtitle / sonic-modal-content / s">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/modal/modal, modal, Modal, UI component, sonic-modal, web component, , sonic-modal-title, sonic-modal-subtitle, sonic-modal-content, sonic-modal-actions, show(), hideModal, hide(), forceAction">
9
+ <meta name="concorde-doc-id" content="core/components/ui/modal/modal">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html">
11
+ </head>
12
+ <body>
13
+ <header>
14
+ <p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/modal/modal.md/modal" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Modal</strong>. sonic-modal presents focused content in a &lt;dialog&gt; overlay with backdrop, enter/exit animation, and a built-in close control. Compose sonic-modal-title / sonic-modal-subtitle / sonic-modal-content / s <span>Doc ID: <code>core/components/ui/modal/modal</code>. Keywords: Concorde, supersoniks, core/components/ui/modal/modal, modal, Modal, UI component, sonic-modal, web component, , sonic-modal-title, sonic-modal-subtitle, sonic-modal-content, sonic-modal-actions, show(), hideModal, hide(), forceAction. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html">https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html</a>.</span></p>
19
+ <h1 id="modal">Modal</h1>
20
+ <p><strong><code>sonic-modal</code></strong> presents focused content in a <code>&lt;dialog&gt;</code> overlay with backdrop, enter/exit animation, and a built-in close control. Compose <strong><code>sonic-modal-title</code></strong> / <strong><code>sonic-modal-subtitle</code></strong> / <strong><code>sonic-modal-content</code></strong> / <strong><code>sonic-modal-actions</code></strong>, or use the default slot. Call <strong><code>show()</code></strong> on the element to open; use <strong><code>hideModal</code></strong> on action buttons or <strong><code>hide()</code></strong> from script. Set <strong><code>forceAction</code></strong> when dismissal must go through explicit actions only. Imperative dialogs: <strong><code>Modal.create()</code></strong> (also <strong><code>window.SonicModal</code></strong>).</p>
21
+ <h2 id="basic-example">Basic example</h2>
22
+ <p>Click the trigger to open. <strong><code>sonic-modal-actions</code></strong> lays out footer buttons; <strong><code>hideModal</code></strong> closes the modal on click. Scope form state with <strong><code>formDataProvider</code></strong> on <strong><code>sonic-modal-actions</code></strong> so child <strong><code>sonic-button</code></strong> elements share one publisher.</p>
23
+ <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;modalExample&#39;).show()&quot;&gt;
24
+ Open modal
25
+ &lt;/sonic-button&gt;
26
+ &lt;sonic-modal id=&quot;modalExample&quot;&gt;
27
+ &lt;sonic-modal-title&gt;
28
+ Export ready
29
+ &lt;sonic-badge type=&quot;success&quot; size=&quot;sm&quot;&gt;New&lt;/sonic-badge&gt;
30
+ &lt;/sonic-modal-title&gt;
31
+ &lt;sonic-modal-subtitle&gt;Your report finished processing.&lt;/sonic-modal-subtitle&gt;
32
+ &lt;sonic-modal-content&gt;
33
+ Download the CSV now or review the summary in your dashboard before sharing.
34
+ &lt;/sonic-modal-content&gt;
35
+ &lt;sonic-modal-actions formDataProvider=&quot;ModalMiniForm&quot;&gt;
36
+ &lt;sonic-button minWidth=&quot;8rem&quot; value=&quot;true&quot; name=&quot;click&quot;&gt;
37
+ Save draft
38
+ &lt;/sonic-button&gt;
39
+ &lt;sonic-button minWidth=&quot;8rem&quot; type=&quot;success&quot; hideModal&gt;Download&lt;/sonic-button&gt;
40
+ &lt;/sonic-modal-actions&gt;
41
+ &lt;/sonic-modal&gt;
42
+ </code></pre>
43
+ <h2 id="scrollable-content">Scrollable content</h2>
44
+ <p>Long copy scrolls inside the dialog. Default <strong><code>maxHeight</code></strong> is <code>90vh</code>. Default <strong><code>align</code></strong> is <code>left</code>.</p>
45
+ <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;modalText&#39;).show()&quot;&gt;Venue details&lt;/sonic-button&gt;
46
+ &lt;sonic-modal align=&quot;left&quot; id=&quot;modalText&quot;&gt;
47
+ &lt;sonic-modal-title&gt;Hours and tickets&lt;/sonic-modal-title&gt;
48
+ &lt;sonic-modal-content&gt;
49
+ &lt;div class=&quot;prose&quot;&gt;
50
+ &lt;p&gt;
51
+ &lt;strong&gt;Opening hours&lt;/strong&gt;&lt;br /&gt;
52
+ Wednesday–Saturday, 1:30 p.m.–7:00 p.m.; Sunday, 1:30 p.m.–6:00 p.m.
53
+ &lt;/p&gt;
54
+ &lt;p&gt;
55
+ &lt;strong&gt;Ticketing&lt;/strong&gt;&lt;br /&gt;
56
+ Some events require online or box-office reservations. Prices vary by event; booking ahead is recommended when capacity is limited.
57
+ &lt;/p&gt;
58
+ &lt;p&gt;
59
+ &lt;strong&gt;Contact&lt;/strong&gt;&lt;br /&gt;
60
+ tickets@example.com · +33 3 28 33 48 33
61
+ &lt;/p&gt;
62
+ &lt;p&gt;
63
+ &lt;strong&gt;Access&lt;/strong&gt;&lt;br /&gt;
64
+ 14 Place Faidherbe, 59100 Roubaix&lt;br /&gt;
65
+ Metro line 2, Eurotéléport stop
66
+ &lt;/p&gt;
67
+ &lt;/div&gt;
68
+ &lt;/sonic-modal-content&gt;
69
+ &lt;/sonic-modal&gt;
70
+ </code></pre>
71
+ <h2 id="force-action">Force action</h2>
72
+ <p>With <strong><code>forceAction</code></strong>, backdrop click, Escape, and the default close button are disabled. Provide <strong><code>sonic-modal-actions</code></strong> (or <strong><code>sonic-modal-close</code></strong>) so users can finish the flow.</p>
73
+ <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;force&#39;).show()&quot;&gt;Cookie consent&lt;/sonic-button&gt;
74
+ &lt;sonic-modal forceAction id=&quot;force&quot;&gt;
75
+ &lt;sonic-modal-title&gt;Allow analytics cookies?&lt;/sonic-modal-title&gt;
76
+ &lt;sonic-modal-content&gt;
77
+ We use cookies to measure traffic and improve the product. You can change this later in settings.
78
+ &lt;/sonic-modal-content&gt;
79
+ &lt;sonic-modal-actions&gt;
80
+ &lt;sonic-button hideModal minWidth=&quot;8rem&quot;&gt;Decline&lt;/sonic-button&gt;
81
+ &lt;sonic-button hideModal minWidth=&quot;8rem&quot; type=&quot;success&quot;&gt;Accept&lt;/sonic-button&gt;
82
+ &lt;/sonic-modal-actions&gt;
83
+ &lt;/sonic-modal&gt;
84
+ </code></pre>
85
+ <h2 id="custom-dimensions">Custom dimensions</h2>
86
+ <p>Set <strong><code>width</code></strong> / <strong><code>height</code></strong> / <strong><code>maxWidth</code></strong> / <strong><code>maxHeight</code></strong> (CSS lengths). On narrow viewports the panel becomes a bottom sheet. Use <strong><code>rounded=&quot;none&quot;</code></strong> for edge-to-edge media.</p>
87
+ <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;CustomWidth&#39;).show()&quot;&gt;Image preview&lt;/sonic-button&gt;
88
+ &lt;sonic-modal
89
+ rounded=&quot;none&quot;
90
+ maxHeight=&quot;50vh&quot;
91
+ maxWidth=&quot;90vw&quot;
92
+ width=&quot;100%&quot;
93
+ height=&quot;100%&quot;
94
+ id=&quot;CustomWidth&quot;
95
+ &gt;
96
+ &lt;sonic-image
97
+ cover
98
+ objectPosition=&quot;center 20%&quot;
99
+ src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
100
+ alt=&quot;View from an airplane window&quot;
101
+ &gt;&lt;/sonic-image&gt;
102
+ &lt;/sonic-modal&gt;
103
+ </code></pre>
104
+ <h2 id="fullscreen">Fullscreen</h2>
105
+ <p><strong><code>fullscreen</code></strong> fills the viewport and hides the backdrop.</p>
106
+ <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;Fullscreen&#39;).show()&quot;&gt;Fullscreen&lt;/sonic-button&gt;
107
+ &lt;sonic-modal fullscreen id=&quot;Fullscreen&quot;&gt;
108
+ &lt;sonic-image
109
+ cover
110
+ src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
111
+ alt=&quot;View from an airplane window&quot;
112
+ &gt;&lt;/sonic-image&gt;
113
+ &lt;/sonic-modal&gt;
114
+ </code></pre>
115
+ <h2 id="programmatic-creation">Programmatic creation</h2>
116
+ <p>Use <strong><code>Modal.create(options)</code></strong> when there is no modal in the template—for confirmations, toasts that need a follow-up, or one-off flows from script. The modal is appended to the nearest <strong><code>sonic-theme</code></strong> pop container (same as declarative modals), opened automatically, and returns the <strong><code>sonic-modal</code></strong> instance. Set <strong><code>removeOnHide: true</code></strong> to detach it from the DOM after close. In the browser, <strong><code>window.SonicModal</code></strong> is the same class after the module loads.</p>
117
+ <p>Pass <strong><code>title</code></strong> / <strong><code>subtitle</code></strong> / <strong><code>content</code></strong> / <strong><code>actions</code></strong> as HTML strings (or Lit template results from application code). Put <strong><code>hideModal</code></strong> on action buttons in the <strong><code>actions</code></strong> string so clicks close the dialog.</p>
118
+ <pre><code>&lt;sonic-button
119
+ onclick=&quot;window.SonicModal.create({
120
+ title: &#39;Send invite?&#39;,
121
+ subtitle: &#39;The recipient can join immediately.&#39;,
122
+ content: &#39;We will email an invitation to alex@example.com.&#39;,
123
+ actions: &#39;&amp;lt;sonic-button hideModal minWidth=\&#39;8rem\&#39;&amp;gt;Cancel&amp;lt;/sonic-button&amp;gt;&amp;lt;sonic-button hideModal minWidth=\&#39;8rem\&#39; type=\&#39;success\&#39;&amp;gt;Send&amp;lt;/sonic-button&amp;gt;&#39;,
124
+ removeOnHide: true
125
+ })&quot;
126
+ &gt;
127
+ Open programmatic modal
128
+ &lt;/sonic-button&gt;
129
+ </code></pre>
130
+ <pre><code class="language-javascript">import { Modal } from &quot;@supersoniks/concorde/core/components/ui/modal/modal&quot;;
131
+
132
+ const modal = Modal.create({
133
+ title: &quot;Delete project?&quot;,
134
+ subtitle: &quot;This cannot be undone.&quot;,
135
+ content: &quot;&lt;p&gt;All files in &lt;strong&gt;Acme HQ&lt;/strong&gt; will be removed.&lt;/p&gt;&quot;,
136
+ actions: `
137
+ &lt;sonic-button hideModal minWidth=&quot;8rem&quot;&gt;Cancel&lt;/sonic-button&gt;
138
+ &lt;sonic-button hideModal minWidth=&quot;8rem&quot; type=&quot;danger&quot;&gt;Delete&lt;/sonic-button&gt;
139
+ `,
140
+ removeOnHide: true,
141
+ forceAction: false,
142
+ maxWidth: &quot;min(100vw, 28rem)&quot;,
143
+ });
144
+
145
+ modal.addEventListener(&quot;hidden&quot;, () =&gt; {
146
+ console.log(&quot;Modal removed from the DOM&quot;);
147
+ });
148
+
149
+ // Or close from script: await modal.hide(); await modal.dispose();
150
+ </code></pre>
151
+ <h2 id="api-reference">API reference</h2>
152
+ <h3 id="sonic-modal"><code>sonic-modal</code></h3>
153
+ <table>
154
+ <thead>
155
+ <tr>
156
+ <th>Attribute</th>
157
+ <th>Values</th>
158
+ <th>Description</th>
159
+ </tr>
160
+ </thead>
161
+ <tbody><tr>
162
+ <td><code>align</code></td>
163
+ <td><code>left</code> (default) · <code>center</code> · <code>right</code></td>
164
+ <td>Align title and slotted content</td>
165
+ </tr>
166
+ <tr>
167
+ <td><code>maxWidth</code></td>
168
+ <td>CSS length (default <code>min(100vw, 40rem)</code>)</td>
169
+ <td>Dialog max width</td>
170
+ </tr>
171
+ <tr>
172
+ <td><code>maxHeight</code></td>
173
+ <td>CSS length (default <code>90vh</code>)</td>
174
+ <td>Scrollable body max height</td>
175
+ </tr>
176
+ <tr>
177
+ <td><code>width</code></td>
178
+ <td>CSS length (default <code>100%</code>)</td>
179
+ <td>Dialog width</td>
180
+ </tr>
181
+ <tr>
182
+ <td><code>height</code></td>
183
+ <td>CSS length (default <code>fit-content</code>)</td>
184
+ <td>Dialog height</td>
185
+ </tr>
186
+ <tr>
187
+ <td><code>paddingX</code> · <code>paddingY</code></td>
188
+ <td>CSS length</td>
189
+ <td>Override content padding (<code>--sc-modal-px</code> / <code>--sc-modal-py</code>)</td>
190
+ </tr>
191
+ <tr>
192
+ <td><code>zIndex</code></td>
193
+ <td>CSS number</td>
194
+ <td>Stacking order (default <code>990</code>)</td>
195
+ </tr>
196
+ <tr>
197
+ <td><code>effect</code></td>
198
+ <td><code>slide</code> (default) · <code>fade</code> · <code>none</code></td>
199
+ <td>Open/close animation</td>
200
+ </tr>
201
+ <tr>
202
+ <td><code>fullscreen</code></td>
203
+ <td>boolean</td>
204
+ <td>Full viewport; no backdrop</td>
205
+ </tr>
206
+ <tr>
207
+ <td><code>forceAction</code></td>
208
+ <td>boolean</td>
209
+ <td>Disable overlay, Escape, and default close button</td>
210
+ </tr>
211
+ <tr>
212
+ <td><code>noCloseButton</code></td>
213
+ <td>boolean</td>
214
+ <td>Hide built-in close when not <strong><code>forceAction</code></strong></td>
215
+ </tr>
216
+ <tr>
217
+ <td><code>closeButtonType</code></td>
218
+ <td><strong><code>sonic-button</code></strong> <code>type</code></td>
219
+ <td>Style of built-in close</td>
220
+ </tr>
221
+ <tr>
222
+ <td><code>visible</code></td>
223
+ <td>boolean</td>
224
+ <td>When toggled, opens or closes the dialog</td>
225
+ </tr>
226
+ <tr>
227
+ <td><code>removeOnHide</code></td>
228
+ <td>boolean</td>
229
+ <td>Remove element from DOM after close</td>
230
+ </tr>
231
+ <tr>
232
+ <td><code>removeHashOnHide</code></td>
233
+ <td>boolean</td>
234
+ <td>Clear URL hash on close</td>
235
+ </tr>
236
+ <tr>
237
+ <td><code>closeOnLocationChange</code></td>
238
+ <td>boolean</td>
239
+ <td>Close when app location changes</td>
240
+ </tr>
241
+ <tr>
242
+ <td><code>resetDataProviderOnHide</code></td>
243
+ <td>string</td>
244
+ <td>Reset named <strong><code>formDataProvider</code></strong> on close</td>
245
+ </tr>
246
+ <tr>
247
+ <td><code>rounded</code></td>
248
+ <td><code>none</code></td>
249
+ <td>Square dialog corners (useful for full-bleed media)</td>
250
+ </tr>
251
+ </tbody></table>
252
+ <table>
253
+ <thead>
254
+ <tr>
255
+ <th>Slot</th>
256
+ <th>Description</th>
257
+ </tr>
258
+ </thead>
259
+ <tbody><tr>
260
+ <td><em>(default)</em></td>
261
+ <td>Additional markup alongside structured children</td>
262
+ </tr>
263
+ </tbody></table>
264
+ <table>
265
+ <thead>
266
+ <tr>
267
+ <th>Event</th>
268
+ <th>Description</th>
269
+ </tr>
270
+ </thead>
271
+ <tbody><tr>
272
+ <td><code>show</code></td>
273
+ <td>Fired when open animation completes</td>
274
+ </tr>
275
+ <tr>
276
+ <td><code>hide</code></td>
277
+ <td>Fired when close starts</td>
278
+ </tr>
279
+ <tr>
280
+ <td><code>hidden</code></td>
281
+ <td>Fired when close finishes</td>
282
+ </tr>
283
+ </tbody></table>
284
+ <p>Methods: <strong><code>show()</code></strong> · <strong><code>hide()</code></strong> · <strong><code>dispose()</code></strong> (hide and remove). Static <strong><code>Modal.create(options)</code></strong> appends a modal to the theme pop container and opens it. <strong><code>options</code></strong> / <strong><code>styleSheet</code></strong> are JavaScript-only.</p>
285
+ <h3 id="sonic-modal-title--sonic-modal-subtitle--sonic-modal-content"><code>sonic-modal-title</code> · <code>sonic-modal-subtitle</code> · <code>sonic-modal-content</code></h3>
286
+ <table>
287
+ <thead>
288
+ <tr>
289
+ <th>Slot</th>
290
+ <th>Description</th>
291
+ </tr>
292
+ </thead>
293
+ <tbody><tr>
294
+ <td><em>(default)</em></td>
295
+ <td>Title, subtitle, or main body content</td>
296
+ </tr>
297
+ </tbody></table>
298
+ <h3 id="sonic-modal-actions"><code>sonic-modal-actions</code></h3>
299
+ <table>
300
+ <thead>
301
+ <tr>
302
+ <th>Slot</th>
303
+ <th>Description</th>
304
+ </tr>
305
+ </thead>
306
+ <tbody><tr>
307
+ <td><em>(default)</em></td>
308
+ <td>Footer actions (typically <strong><code>sonic-button</code></strong>)</td>
309
+ </tr>
310
+ </tbody></table>
311
+ <p>Put <strong><code>hideModal</code></strong> on a <strong><code>sonic-button</code></strong> to close the parent modal on click. Ancestor <strong><code>formDataProvider</code></strong> on this element is inherited by child form controls.</p>
312
+ <h3 id="sonic-modal-close"><code>sonic-modal-close</code></h3>
313
+ <p>Rendered automatically unless <strong><code>forceAction</code></strong> or <strong><code>noCloseButton</code></strong> is set. Calls <strong><code>hide()</code></strong> on the parent modal.</p>
314
+ <table>
315
+ <thead>
316
+ <tr>
317
+ <th>Attribute</th>
318
+ <th>Values</th>
319
+ <th>Description</th>
320
+ </tr>
321
+ </thead>
322
+ <tbody><tr>
323
+ <td><code>type</code></td>
324
+ <td><strong><code>sonic-button</code></strong> <code>type</code></td>
325
+ <td>Close button color</td>
326
+ </tr>
327
+ <tr>
328
+ <td><code>reset</code></td>
329
+ <td>string</td>
330
+ <td>Passed to inner <strong><code>sonic-button</code></strong> <strong><code>reset</code></strong></td>
331
+ </tr>
332
+ <tr>
333
+ <td><code>translation</code></td>
334
+ <td>UI label object</td>
335
+ <td>Overrides default close <strong><code>aria-label</code></strong></td>
336
+ </tr>
337
+ </tbody></table>
338
+
339
+ </article>
340
+ </main>
341
+ </body>
342
+ </html>
package/docs/crawl/core/components/ui/pop/pop.html ADDED
@@ -0,0 +1,296 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/pop/pop.html" data-doc-id="core/components/ui/pop/pop">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Pop — Concorde</title>
7
+ <meta name="description" content="sonic-pop anchors floating panels to a trigger: put the control in the default slot and the panel in slot=&quot;content&quot; (menus, forms, custom markup). Click toggles open/closed unless manual is set; defau">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/pop/pop, pop, Pop, UI component, sonic-pop, web component, slot=&quot;content&quot;, manual, placement, bottom, top, left, right, -start">
9
+ <meta name="concorde-doc-id" content="core/components/ui/pop/pop">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/pop/pop.html">
11
+ </head>
12
+ <body>
13
+ <header>
14
+ <p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/pop/pop.md/pop" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Pop</strong>. sonic-pop anchors floating panels to a trigger: put the control in the default slot and the panel in slot=&quot;content&quot; (menus, forms, custom markup). Click toggles open/closed unless manual is set; defau <span>Doc ID: <code>core/components/ui/pop/pop</code>. Keywords: Concorde, supersoniks, core/components/ui/pop/pop, pop, Pop, UI component, sonic-pop, web component, slot=&quot;content&quot;, manual, placement, bottom, top, left, right, -start. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/pop/pop.html">https://concorde.supersoniks.org/crawl/core/components/ui/pop/pop.html</a>.</span></p>
19
+ <h1 id="pop">Pop</h1>
20
+ <p><strong><code>sonic-pop</code></strong> anchors floating panels to a trigger: put the control in the <strong>default slot</strong> and the panel in <strong><code>slot=&quot;content&quot;</code></strong> (menus, forms, custom markup). Click toggles open/closed unless <strong><code>manual</code></strong> is set; default <strong><code>placement</code></strong> is <strong><code>bottom</code></strong> (start-aligned). Position updates while open and flips inside the viewport when space is tight.</p>
21
+ <h2 id="basic-example">Basic example</h2>
22
+ <pre><code>&lt;sonic-pop class=&quot;inline-block&quot;&gt;
23
+ &lt;sonic-button&gt;Notifications&lt;/sonic-button&gt;
24
+ &lt;sonic-menu slot=&quot;content&quot;&gt;
25
+ &lt;sonic-menu-item&gt;
26
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
27
+ Notifications
28
+ &lt;/sonic-menu-item&gt;
29
+ &lt;sonic-menu-item&gt;
30
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;settings&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
31
+ Settings
32
+ &lt;/sonic-menu-item&gt;
33
+ &lt;/sonic-menu&gt;
34
+ &lt;/sonic-pop&gt;
35
+ </code></pre>
36
+ <h2 id="placement">Placement</h2>
37
+ <p>Use <strong><code>top</code></strong> · <strong><code>bottom</code></strong> · <strong><code>left</code></strong> · <strong><code>right</code></strong> for the main axis. Add <strong><code>-start</code></strong> · <strong><code>-center</code></strong> · <strong><code>-end</code></strong> to align along the trigger edge. With no align suffix, content aligns to <strong><code>start</code></strong>. Legacy space syntax (<code>placement=&quot;bottom center&quot;</code>) still works but is deprecated—prefer <strong><code>bottom-center</code></strong>.</p>
38
+ <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
39
+ &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;left&quot;&gt;
40
+ &lt;sonic-button&gt;Left&lt;/sonic-button&gt;
41
+ &lt;sonic-menu slot=&quot;content&quot;&gt;
42
+ &lt;sonic-menu-item&gt;
43
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
44
+ Notifications
45
+ &lt;/sonic-menu-item&gt;
46
+ &lt;/sonic-menu&gt;
47
+ &lt;/sonic-pop&gt;
48
+ &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;right&quot;&gt;
49
+ &lt;sonic-button&gt;Right&lt;/sonic-button&gt;
50
+ &lt;sonic-menu slot=&quot;content&quot;&gt;
51
+ &lt;sonic-menu-item&gt;
52
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
53
+ Notifications
54
+ &lt;/sonic-menu-item&gt;
55
+ &lt;/sonic-menu&gt;
56
+ &lt;/sonic-pop&gt;
57
+ &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;top&quot;&gt;
58
+ &lt;sonic-button&gt;Top&lt;/sonic-button&gt;
59
+ &lt;sonic-menu slot=&quot;content&quot;&gt;
60
+ &lt;sonic-menu-item&gt;
61
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
62
+ Notifications
63
+ &lt;/sonic-menu-item&gt;
64
+ &lt;/sonic-menu&gt;
65
+ &lt;/sonic-pop&gt;
66
+ &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;bottom&quot;&gt;
67
+ &lt;sonic-button&gt;Bottom&lt;/sonic-button&gt;
68
+ &lt;sonic-menu slot=&quot;content&quot;&gt;
69
+ &lt;sonic-menu-item&gt;
70
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
71
+ Notifications
72
+ &lt;/sonic-menu-item&gt;
73
+ &lt;/sonic-menu&gt;
74
+ &lt;/sonic-pop&gt;
75
+ &lt;/div&gt;
76
+ </code></pre>
77
+ <h3 id="center-aligned-sides">Center-aligned sides</h3>
78
+ <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
79
+ &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;bottom-center&quot;&gt;
80
+ &lt;sonic-button&gt;Bottom center&lt;/sonic-button&gt;
81
+ &lt;sonic-menu slot=&quot;content&quot;&gt;
82
+ &lt;sonic-menu-item&gt;
83
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
84
+ Notifications
85
+ &lt;/sonic-menu-item&gt;
86
+ &lt;/sonic-menu&gt;
87
+ &lt;/sonic-pop&gt;
88
+ &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;top-center&quot;&gt;
89
+ &lt;sonic-button&gt;Top center&lt;/sonic-button&gt;
90
+ &lt;sonic-menu slot=&quot;content&quot;&gt;
91
+ &lt;sonic-menu-item&gt;
92
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
93
+ Notifications
94
+ &lt;/sonic-menu-item&gt;
95
+ &lt;/sonic-menu&gt;
96
+ &lt;/sonic-pop&gt;
97
+ &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;left-center&quot;&gt;
98
+ &lt;sonic-button&gt;Left center&lt;/sonic-button&gt;
99
+ &lt;sonic-menu slot=&quot;content&quot;&gt;
100
+ &lt;sonic-menu-item&gt;
101
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
102
+ Notifications
103
+ &lt;/sonic-menu-item&gt;
104
+ &lt;/sonic-menu&gt;
105
+ &lt;/sonic-pop&gt;
106
+ &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;right-center&quot;&gt;
107
+ &lt;sonic-button&gt;Right center&lt;/sonic-button&gt;
108
+ &lt;sonic-menu slot=&quot;content&quot;&gt;
109
+ &lt;sonic-menu-item&gt;
110
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
111
+ Notifications
112
+ &lt;/sonic-menu-item&gt;
113
+ &lt;/sonic-menu&gt;
114
+ &lt;/sonic-pop&gt;
115
+ &lt;/div&gt;
116
+ </code></pre>
117
+ <h2 id="shadow">Shadow</h2>
118
+ <p>Default <strong><code>shadow</code></strong> is <strong><code>lg</code></strong>. The shadow applies to the floating <strong><code>content</code></strong> panel.</p>
119
+ <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
120
+ &lt;sonic-pop class=&quot;inline-block&quot; shadow=&quot;none&quot; placement=&quot;top&quot;&gt;
121
+ &lt;sonic-button&gt;None&lt;/sonic-button&gt;
122
+ &lt;sonic-menu slot=&quot;content&quot;&gt;
123
+ &lt;sonic-menu-item&gt;
124
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
125
+ Notifications
126
+ &lt;/sonic-menu-item&gt;
127
+ &lt;/sonic-menu&gt;
128
+ &lt;/sonic-pop&gt;
129
+ &lt;sonic-pop class=&quot;inline-block&quot; shadow=&quot;sm&quot; placement=&quot;top&quot;&gt;
130
+ &lt;sonic-button&gt;Small&lt;/sonic-button&gt;
131
+ &lt;sonic-menu slot=&quot;content&quot;&gt;
132
+ &lt;sonic-menu-item&gt;
133
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
134
+ Notifications
135
+ &lt;/sonic-menu-item&gt;
136
+ &lt;/sonic-menu&gt;
137
+ &lt;/sonic-pop&gt;
138
+ &lt;sonic-pop class=&quot;inline-block&quot; shadow=&quot;md&quot; placement=&quot;top&quot;&gt;
139
+ &lt;sonic-button&gt;Medium&lt;/sonic-button&gt;
140
+ &lt;sonic-menu slot=&quot;content&quot;&gt;
141
+ &lt;sonic-menu-item&gt;
142
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
143
+ Notifications
144
+ &lt;/sonic-menu-item&gt;
145
+ &lt;/sonic-menu&gt;
146
+ &lt;/sonic-pop&gt;
147
+ &lt;sonic-pop class=&quot;inline-block&quot; shadow=&quot;lg&quot; placement=&quot;top&quot;&gt;
148
+ &lt;sonic-button&gt;Large&lt;/sonic-button&gt;
149
+ &lt;sonic-menu slot=&quot;content&quot;&gt;
150
+ &lt;sonic-menu-item&gt;
151
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
152
+ Notifications
153
+ &lt;/sonic-menu-item&gt;
154
+ &lt;/sonic-menu&gt;
155
+ &lt;/sonic-pop&gt;
156
+ &lt;/div&gt;
157
+ </code></pre>
158
+ <h2 id="inline">Inline</h2>
159
+ <p>By default the host is middle-aligned with siblings. Set <strong><code>inline</code></strong> to baseline-align the trigger inside running text.</p>
160
+ <pre><code>&lt;p&gt;
161
+ The Concorde flew from Paris to
162
+ &lt;sonic-pop inline&gt;
163
+ &lt;sonic-button variant=&quot;link&quot;&gt;New York&lt;/sonic-button&gt;
164
+ &lt;sonic-menu slot=&quot;content&quot;&gt;
165
+ &lt;sonic-menu-item&gt;See flights&lt;/sonic-menu-item&gt;
166
+ &lt;sonic-menu-item&gt;Book a seat&lt;/sonic-menu-item&gt;
167
+ &lt;/sonic-menu&gt;
168
+ &lt;/sonic-pop&gt;
169
+ in about 3.5 hours.
170
+ &lt;/p&gt;
171
+ </code></pre>
172
+ <h2 id="no-toggle">No toggle</h2>
173
+ <p>With <strong><code>noToggle</code></strong>, a click on the trigger still opens the pop but does not close it when it is already open. Use <strong><code>hide()</code></strong> or an outside click to dismiss.</p>
174
+ <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
175
+ &lt;sonic-pop class=&quot;inline-block&quot; noToggle&gt;
176
+ &lt;sonic-button&gt;No toggle on click&lt;/sonic-button&gt;
177
+ &lt;sonic-menu slot=&quot;content&quot;&gt;
178
+ &lt;sonic-menu-item&gt;
179
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
180
+ Notifications
181
+ &lt;/sonic-menu-item&gt;
182
+ &lt;/sonic-menu&gt;
183
+ &lt;/sonic-pop&gt;
184
+ &lt;sonic-pop class=&quot;inline-block&quot;&gt;
185
+ &lt;sonic-button&gt;Default toggle on click&lt;/sonic-button&gt;
186
+ &lt;sonic-menu slot=&quot;content&quot;&gt;
187
+ &lt;sonic-menu-item&gt;
188
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
189
+ Notifications
190
+ &lt;/sonic-menu-item&gt;
191
+ &lt;/sonic-menu&gt;
192
+ &lt;/sonic-pop&gt;
193
+ &lt;/div&gt;
194
+ </code></pre>
195
+ <h2 id="manual-control">Manual control</h2>
196
+ <p>Set <strong><code>manual</code></strong> to disable built-in click and keyboard toggle on the trigger. Call <strong><code>show()</code></strong> and <strong><code>hide()</code></strong> on the element instead. The pop dispatches <strong><code>show</code></strong> when it opens and <strong><code>hide</code></strong> when it closes.</p>
197
+ <p>Click <strong>Click to open pop</strong> to open the panel programmatically.</p>
198
+ <pre><code>&lt;sonic-pop class=&quot;inline-block&quot; manual id=&quot;manualPop&quot;&gt;
199
+ &lt;sonic-button onclick=&quot;alert(&#39;Custom action without opening the pop&#39;)&quot;&gt;Manual trigger&lt;/sonic-button&gt;
200
+ &lt;sonic-menu slot=&quot;content&quot;&gt;
201
+ &lt;sonic-menu-item&gt;It worked!&lt;/sonic-menu-item&gt;
202
+ &lt;/sonic-menu&gt;
203
+ &lt;/sonic-pop&gt;
204
+ &lt;sonic-button onclick=&quot;document.getElementById(&#39;manualPop&#39;).show()&quot; class=&quot;ml-5&quot; variant=&quot;outline&quot;&gt;
205
+ &lt;sonic-icon name=&quot;sparkles&quot; library=&quot;custom&quot;&gt;&lt;/sonic-icon&gt;
206
+ Click to open pop
207
+ &lt;/sonic-button&gt;
208
+ </code></pre>
209
+ <h2 id="keep-open-on-select">Keep open on select</h2>
210
+ <p>By default, a click inside <strong><code>content</code></strong> closes the pop (same as an outside click). Set <strong><code>data-on-select=&quot;keep&quot;</code></strong> on the panel or a descendant to keep it open while selecting checkboxes, toggles, or menu items.</p>
211
+ <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
212
+ &lt;sonic-pop class=&quot;inline-block&quot;&gt;
213
+ &lt;sonic-button&gt;Closes on select&lt;/sonic-button&gt;
214
+ &lt;div slot=&quot;content&quot; class=&quot;grid gap-2 p-3&quot;&gt;
215
+ &lt;sonic-checkbox&gt;Option A&lt;/sonic-checkbox&gt;
216
+ &lt;sonic-checkbox&gt;Option B&lt;/sonic-checkbox&gt;
217
+ &lt;/div&gt;
218
+ &lt;/sonic-pop&gt;
219
+ &lt;sonic-pop class=&quot;inline-block&quot;&gt;
220
+ &lt;sonic-button&gt;Stays open on select&lt;/sonic-button&gt;
221
+ &lt;div slot=&quot;content&quot; class=&quot;grid gap-2 p-3&quot; data-on-select=&quot;keep&quot;&gt;
222
+ &lt;sonic-checkbox&gt;Option A&lt;/sonic-checkbox&gt;
223
+ &lt;sonic-checkbox&gt;Option B&lt;/sonic-checkbox&gt;
224
+ &lt;/div&gt;
225
+ &lt;/sonic-pop&gt;
226
+ &lt;/div&gt;
227
+ </code></pre>
228
+ <h2 id="keyboard-and-dismissal">Keyboard and dismissal</h2>
229
+ <p><strong><code>ArrowDown</code></strong> on the trigger opens the pop when it is closed. <strong><code>Escape</code></strong> closes the most recently opened pop (capture phase, before ancestors such as <strong><code>sonic-modal</code></strong>) and returns focus to that trigger. Multiple pops on the page stack in open order for Escape.</p>
230
+ <pre><code>&lt;sonic-pop class=&quot;inline-block&quot;&gt;
231
+ &lt;sonic-button&gt;Focus me — ArrowDown opens, Escape closes&lt;/sonic-button&gt;
232
+ &lt;sonic-menu slot=&quot;content&quot;&gt;
233
+ &lt;sonic-menu-item&gt;First item&lt;/sonic-menu-item&gt;
234
+ &lt;sonic-menu-item&gt;Second item&lt;/sonic-menu-item&gt;
235
+ &lt;/sonic-menu&gt;
236
+ &lt;/sonic-pop&gt;
237
+ </code></pre>
238
+ <h2 id="api-reference">API reference</h2>
239
+ <table>
240
+ <thead>
241
+ <tr>
242
+ <th>Attribute</th>
243
+ <th>Values</th>
244
+ <th>Description</th>
245
+ </tr>
246
+ </thead>
247
+ <tbody><tr>
248
+ <td><code>placement</code></td>
249
+ <td><code>bottom</code> (default) · <code>top</code> · <code>left</code> · <code>right</code> · <code>top-start</code> · <code>top-center</code> · <code>top-end</code> · <code>bottom-start</code> · <code>bottom-center</code> · <code>bottom-end</code> · <code>left-start</code> · <code>left-center</code> · <code>left-end</code> · <code>right-start</code> · <code>right-center</code> · <code>right-end</code></td>
250
+ <td>Side and alignment relative to the trigger; repositions while open and flips within the viewport</td>
251
+ </tr>
252
+ <tr>
253
+ <td><code>shadow</code></td>
254
+ <td><code>none</code> · <code>sm</code> · <code>md</code> · <code>lg</code> (default <code>lg</code>)</td>
255
+ <td>Box shadow on the <strong><code>content</code></strong> panel</td>
256
+ </tr>
257
+ <tr>
258
+ <td><code>inline</code></td>
259
+ <td>boolean</td>
260
+ <td>Baseline-align the host for inline triggers</td>
261
+ </tr>
262
+ <tr>
263
+ <td><code>noToggle</code></td>
264
+ <td>boolean</td>
265
+ <td>When open, trigger click does not close the pop</td>
266
+ </tr>
267
+ <tr>
268
+ <td><code>manual</code></td>
269
+ <td>boolean</td>
270
+ <td>Disable default trigger toggle; use <strong><code>show()</code></strong> / <strong><code>hide()</code></strong></td>
271
+ </tr>
272
+ </tbody></table>
273
+ <table>
274
+ <thead>
275
+ <tr>
276
+ <th>Slot</th>
277
+ <th>Description</th>
278
+ </tr>
279
+ </thead>
280
+ <tbody><tr>
281
+ <td><em>(default)</em></td>
282
+ <td>Trigger; listens for <strong><code>click</code></strong> and <strong><code>keydown</code></strong> (<code>ArrowDown</code> opens when closed) unless <strong><code>manual</code></strong></td>
283
+ </tr>
284
+ <tr>
285
+ <td><code>content</code></td>
286
+ <td>Floating panel; receives focus <strong><code>tabindex=&quot;0&quot;</code></strong> while open</td>
287
+ </tr>
288
+ </tbody></table>
289
+ <p><strong>Methods:</strong> <strong><code>show()</code></strong> · <strong><code>hide()</code></strong> on the host element.</p>
290
+ <p><strong>Events:</strong> <strong><code>show</code></strong> · <strong><code>hide</code></strong> (non-bubbling <strong><code>CustomEvent</code></strong>).</p>
291
+ <p><strong>Content attribute:</strong> <strong><code>data-on-select=&quot;keep&quot;</code></strong> on <strong><code>content</code></strong> or descendants prevents close-on-click inside the panel.</p>
292
+
293
+ </article>
294
+ </main>
295
+ </body>
296
+ </html>