@supersoniks/concorde 5.1.2 → 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 (497) hide show
  1. package/.agents/skills/concorde-docs/SKILL.md +1 -1
  2. package/.claude/skills +1 -0
  3. package/.github/workflows/ci.yml +21 -0
  4. package/.github-export-ignore +30 -0
  5. package/CONTRIBUTING.md +59 -0
  6. package/DEV.md +54 -0
  7. package/LICENSE +21 -0
  8. package/OPEN_SOURCE_CHECKPOINT.md +133 -0
  9. package/README.md +1 -1
  10. package/ai/README.md +29 -41
  11. package/ai/skills/concorde/SKILL.md +54 -324
  12. package/ai/skills/concorde/rules/composition.md +32 -0
  13. package/ai/skills/concorde/rules/data.md +47 -0
  14. package/ai/skills/concorde/rules/http.md +25 -0
  15. package/ai/skills/concorde/rules/lists-forms.md +35 -0
  16. package/ai/skills/concorde/rules/styling.md +46 -0
  17. package/ai/skills/concorde/rules/troubleshooting.md +45 -0
  18. package/build-infos.json +1 -1
  19. package/concorde-core.bundle.js +177 -177
  20. package/concorde-core.es.js +4993 -4833
  21. package/custom-elements-manifest.public.config.mjs +8 -0
  22. package/{.tmp-cem/custom-elements.json → custom-elements.json} +11722 -8868
  23. package/dist/concorde-core.bundle.js +177 -177
  24. package/dist/concorde-core.es.js +4993 -4833
  25. package/dist/docs-mock-api-sw.js +58 -223
  26. package/dist/docs-mock-api-sw.js.map +4 -4
  27. package/dist/img/og-concorde.jpg +0 -0
  28. package/dist/robots.txt +11 -10
  29. package/docs/assets/index-CD4WyL6o.css +1 -0
  30. package/docs/assets/index-D_alEsng.js +12122 -0
  31. package/docs/crawl/core/components/functional/date/date.html +190 -0
  32. package/docs/crawl/core/components/functional/fetch/fetch.html +109 -0
  33. package/docs/crawl/core/components/functional/if/if.html +27 -0
  34. package/docs/crawl/core/components/functional/jsonata/jsonata.html +79 -0
  35. package/docs/crawl/core/components/functional/list/list.html +70 -0
  36. package/docs/crawl/core/components/functional/mix/mix.html +45 -0
  37. package/docs/crawl/core/components/functional/queue/queue.html +96 -0
  38. package/docs/crawl/core/components/functional/router/router.html +106 -0
  39. package/docs/{core → crawl/core}/components/functional/sdui/sdui-extension-points.html +8 -9
  40. package/docs/crawl/core/components/functional/sdui/sdui.html +368 -0
  41. package/docs/crawl/core/components/functional/states/states.html +66 -0
  42. package/docs/crawl/core/components/functional/submit/submit.html +160 -0
  43. package/docs/{core → crawl/core}/components/functional/subscriber/subscriber.html +5 -6
  44. package/docs/crawl/core/components/functional/value/value.html +51 -0
  45. package/docs/{core → crawl/core}/components/ui/alert/alert.html +63 -53
  46. package/docs/{core → crawl/core}/components/ui/alert-messages/alert-messages.html +5 -6
  47. package/docs/{core → crawl/core}/components/ui/badge/badge.html +33 -33
  48. package/docs/crawl/core/components/ui/button/button.html +150 -0
  49. package/docs/crawl/core/components/ui/captcha/captcha.html +112 -0
  50. package/docs/{core → crawl/core}/components/ui/card/card.html +11 -12
  51. package/docs/{core → crawl/core}/components/ui/divider/divider.html +14 -14
  52. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +73 -0
  53. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +266 -0
  54. package/docs/{core → crawl/core}/components/ui/form/form-actions/form-actions.html +23 -23
  55. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +121 -0
  56. package/docs/crawl/core/components/ui/form/input/input.html +109 -0
  57. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +38 -0
  58. package/docs/crawl/core/components/ui/form/radio/radio.html +56 -0
  59. package/docs/crawl/core/components/ui/form/select/select.html +73 -0
  60. package/docs/crawl/core/components/ui/form/switch/switch.html +56 -0
  61. package/docs/crawl/core/components/ui/form/textarea/textarea.html +59 -0
  62. package/docs/crawl/core/components/ui/group/group.html +104 -0
  63. package/docs/{core → crawl/core}/components/ui/icon/icon.html +9 -10
  64. package/docs/crawl/core/components/ui/image/image.html +298 -0
  65. package/docs/{core → crawl/core}/components/ui/link/link.html +11 -12
  66. package/docs/crawl/core/components/ui/loader/loader.html +124 -0
  67. package/docs/{core → crawl/core}/components/ui/menu/menu.html +33 -34
  68. package/docs/crawl/core/components/ui/modal/modal.html +342 -0
  69. package/docs/crawl/core/components/ui/pop/pop.html +296 -0
  70. package/docs/{core → crawl/core}/components/ui/progress/progress.html +7 -8
  71. package/docs/crawl/core/components/ui/table/table.html +545 -0
  72. package/docs/crawl/core/components/ui/theme/theme.html +131 -0
  73. package/docs/crawl/core/components/ui/toast/toast.html +233 -0
  74. package/docs/crawl/core/components/ui/tooltip/tooltip.html +140 -0
  75. package/docs/{docs/getting-started → crawl/docs/_core-concept}/dataFlow.html +29 -26
  76. package/docs/crawl/docs/_core-concept/overview.html +66 -0
  77. package/docs/crawl/docs/_core-concept/subscriber.html +75 -0
  78. package/docs/crawl/docs/_decorators/ancestor-attribute.html +117 -0
  79. package/docs/crawl/docs/_decorators/auto-subscribe.html +202 -0
  80. package/docs/crawl/docs/_decorators/bind.html +141 -0
  81. package/docs/crawl/docs/_decorators/get.html +149 -0
  82. package/docs/crawl/docs/_decorators/handle.html +165 -0
  83. package/docs/crawl/docs/_decorators/on-assign.html +355 -0
  84. package/docs/crawl/docs/_decorators/patch.html +78 -0
  85. package/docs/crawl/docs/_decorators/post.html +139 -0
  86. package/docs/crawl/docs/_decorators/publish.html +61 -0
  87. package/docs/crawl/docs/_decorators/put.html +78 -0
  88. package/docs/crawl/docs/_decorators/subscribe.html +109 -0
  89. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +137 -0
  90. package/docs/crawl/docs/_directives/sub.html +93 -0
  91. package/docs/{docs/getting-started → crawl/docs/_getting-started}/ai-agents.html +11 -12
  92. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +100 -0
  93. package/docs/crawl/docs/_getting-started/concorde-outside.html +58 -0
  94. package/docs/{docs/getting-started → crawl/docs/_getting-started}/create-a-component.html +14 -11
  95. package/docs/{docs/getting-started → crawl/docs/_getting-started}/my-first-component.html +22 -13
  96. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +110 -0
  97. package/docs/crawl/docs/_getting-started/pubsub.html +62 -0
  98. package/docs/crawl/docs/_getting-started/start.html +76 -0
  99. package/docs/{docs/getting-started → crawl/docs/_getting-started}/theming.html +9 -10
  100. package/docs/{docs/misc → crawl/docs/_misc}/api-configuration.html +18 -18
  101. package/docs/{docs/misc → crawl/docs/_misc}/dataProviderKey.html +11 -12
  102. package/docs/{docs/misc → crawl/docs/_misc}/docs-mock-api.html +28 -25
  103. package/docs/{docs/misc → crawl/docs/_misc}/dynamic-path.html +15 -16
  104. package/docs/{docs/misc → crawl/docs/_misc}/endpoint.html +15 -16
  105. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +138 -0
  106. package/docs/{docs/misc → crawl/docs/_misc}/html-integration.html +15 -12
  107. package/docs/crawl/hubs/decorators.html +547 -0
  108. package/docs/crawl/hubs/form-components.html +381 -0
  109. package/docs/crawl/hubs/remote-data.html +452 -0
  110. package/docs/crawl/index.html +103 -0
  111. package/docs/docs-mock-api-sw.js +223 -58
  112. package/docs/docs-mock-api-sw.js.map +4 -4
  113. package/docs/index.html +68 -95
  114. package/docs/llms-full.txt +3610 -2231
  115. package/docs/llms.txt +86 -94
  116. package/docs/robots.txt +10 -11
  117. package/docs/sitemap.xml +84 -78
  118. package/docs/src/core/components/functional/date/date.md +231 -91
  119. package/docs/src/core/components/functional/fetch/fetch.md +83 -66
  120. package/docs/src/core/components/functional/if/if.md +3 -28
  121. package/docs/src/core/components/functional/jsonata/jsonata.md +37 -42
  122. package/docs/src/core/components/functional/list/list.md +43 -99
  123. package/docs/src/core/components/functional/mix/mix.md +26 -31
  124. package/docs/src/core/components/functional/queue/queue.md +61 -40
  125. package/docs/src/core/components/functional/router/router.md +65 -64
  126. package/docs/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
  127. package/docs/src/core/components/functional/sdui/component-catalog.json +1 -1
  128. package/docs/src/core/components/functional/sdui/example.json +86 -19
  129. package/docs/src/core/components/functional/sdui/sdui-extension-points.md +1 -1
  130. package/docs/src/core/components/functional/sdui/sdui.md +358 -187
  131. package/docs/src/core/components/functional/states/states.md +61 -86
  132. package/docs/src/core/components/functional/submit/submit.md +72 -64
  133. package/docs/src/core/components/functional/value/value.md +22 -34
  134. package/docs/src/core/components/ui/alert/alert.md +58 -48
  135. package/docs/src/core/components/ui/badge/badge.md +34 -27
  136. package/docs/src/core/components/ui/button/button.md +106 -139
  137. package/docs/src/core/components/ui/captcha/captcha.md +32 -17
  138. package/docs/src/core/components/ui/card/card.md +6 -6
  139. package/docs/src/core/components/ui/divider/divider.md +11 -8
  140. package/docs/src/core/components/ui/form/checkbox/checkbox.md +42 -90
  141. package/docs/src/core/components/ui/form/fieldset/fieldset.md +75 -31
  142. package/docs/src/core/components/ui/form/form-actions/form-actions.md +16 -14
  143. package/docs/src/core/components/ui/form/form-layout/form-layout.md +29 -19
  144. package/docs/src/core/components/ui/form/input/input.md +95 -95
  145. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +29 -0
  146. package/docs/src/core/components/ui/form/radio/radio.md +34 -55
  147. package/docs/src/core/components/ui/form/select/select.md +45 -60
  148. package/docs/src/core/components/ui/form/switch/switch.md +34 -57
  149. package/docs/src/core/components/ui/form/textarea/textarea.md +38 -55
  150. package/docs/src/core/components/ui/group/group.md +33 -35
  151. package/docs/src/core/components/ui/icon/icon.md +4 -4
  152. package/docs/src/core/components/ui/image/image.md +107 -41
  153. package/docs/src/core/components/ui/link/link.md +6 -6
  154. package/docs/src/core/components/ui/loader/loader.md +55 -30
  155. package/docs/src/core/components/ui/menu/menu.md +27 -27
  156. package/docs/src/core/components/ui/modal/modal.md +96 -72
  157. package/docs/src/core/components/ui/pop/pop.md +158 -80
  158. package/docs/src/core/components/ui/progress/progress.md +2 -2
  159. package/docs/src/core/components/ui/table/table.md +255 -91
  160. package/docs/src/core/components/ui/theme/theme.md +36 -11
  161. package/docs/src/core/components/ui/toast/toast.md +117 -48
  162. package/docs/src/core/components/ui/tooltip/tooltip.md +62 -27
  163. package/docs/{docs/getting-started → src/docs/_core-concept}/dataFlow.md +18 -17
  164. package/docs/src/docs/_core-concept/overview.md +57 -0
  165. package/docs/src/docs/_core-concept/subscriber.md +75 -0
  166. package/docs/src/docs/_decorators/ancestor-attribute.md +128 -0
  167. package/docs/src/docs/_decorators/auto-subscribe.md +202 -0
  168. package/docs/src/docs/_decorators/bind.md +167 -0
  169. package/docs/src/docs/_decorators/get.md +162 -0
  170. package/docs/src/docs/_decorators/handle.md +175 -0
  171. package/docs/src/docs/_decorators/on-assign.md +390 -0
  172. package/docs/src/docs/_decorators/patch.md +70 -0
  173. package/docs/src/docs/_decorators/post.md +146 -0
  174. package/docs/src/docs/_decorators/publish.md +55 -0
  175. package/docs/src/docs/_decorators/put.md +70 -0
  176. package/docs/src/docs/_decorators/subscribe.md +100 -0
  177. package/docs/src/docs/_decorators/wait-for-ancestors.md +163 -0
  178. package/docs/src/docs/_directives/sub.md +91 -0
  179. package/docs/src/docs/{getting-started → _getting-started}/ai-agents.md +3 -3
  180. package/docs/src/docs/_getting-started/concorde-manual-install.md +133 -0
  181. package/docs/src/docs/_getting-started/concorde-outside.md +33 -0
  182. package/docs/{docs/getting-started → src/docs/_getting-started}/create-a-component.md +6 -3
  183. package/docs/src/docs/{getting-started → _getting-started}/my-first-component.md +14 -5
  184. package/docs/src/docs/_getting-started/my-first-subscriber.md +120 -0
  185. package/docs/src/docs/_getting-started/pubsub.md +37 -0
  186. package/docs/src/docs/{getting-started → _getting-started}/start.md +13 -1
  187. package/docs/src/docs/{getting-started → _getting-started}/theming.md +2 -2
  188. package/docs/src/docs/{misc → _misc}/api-configuration.md +12 -10
  189. package/docs/src/docs/{misc → _misc}/dataProviderKey.md +4 -4
  190. package/docs/{docs/misc → src/docs/_misc}/docs-mock-api.md +13 -12
  191. package/docs/{docs/misc → src/docs/_misc}/dynamic-path.md +8 -8
  192. package/docs/{docs/misc → src/docs/_misc}/endpoint.md +8 -8
  193. package/docs/src/docs/_misc/formelement-subscriber-removal.md +115 -0
  194. package/docs/{docs/misc → src/docs/_misc}/html-integration.md +5 -4
  195. package/docs/src/docs/search/docs-search.json +4375 -2420
  196. package/docs/src/tsconfig.declarations.json +22 -0
  197. package/docs/src/tsconfig.emit.json +23 -0
  198. package/docs/src/tsconfig.json +2 -23
  199. package/gitlab/job_github_mirror.sh +39 -0
  200. package/index.html +89 -0
  201. package/package.json +22 -4
  202. package/public/img/og-concorde.jpg +0 -0
  203. package/scripts/ai-init.mjs +104 -379
  204. package/scripts/ai-init.test.mjs +81 -239
  205. package/scripts/docs-markdown-vite-plugin.ts +11 -5
  206. package/scripts/docs-public-url.mjs +6 -0
  207. package/scripts/docs.htaccess +7 -0
  208. package/scripts/generate-cem.mjs +244 -0
  209. package/scripts/generate-cem.test.mjs +122 -0
  210. package/scripts/generate-crawl-docs.mjs +29 -5
  211. package/scripts/generate-sdui-catalog.mjs +11 -10
  212. package/scripts/github-export.mjs +150 -0
  213. package/scripts/post-build-docs.js +3 -0
  214. package/scripts/post-build.mjs +0 -0
  215. package/scripts/pre-publish.mjs +2 -1
  216. package/scripts/site-pages.mjs +212 -0
  217. package/scripts/site-pages.test.mjs +116 -0
  218. package/site-pages/about.md +22 -0
  219. package/site-pages/privacy.md +32 -0
  220. package/src/core/components/functional/date/date.md +1 -1
  221. package/src/core/components/functional/example/example.ts +3 -1
  222. package/src/core/components/functional/if/if.ts +0 -0
  223. package/src/core/components/functional/list/list.demo.ts +0 -0
  224. package/src/core/components/functional/list/list.md +6 -2
  225. package/src/core/components/functional/list/list.ts +17 -4
  226. package/src/core/components/functional/mix/mix.md +0 -0
  227. package/src/core/components/functional/router/router.demo.ts +0 -0
  228. package/src/core/components/functional/router/router.ts +0 -0
  229. package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +0 -0
  230. package/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
  231. package/src/core/components/functional/sdui/component-catalog.json +2 -2
  232. package/src/core/components/functional/sdui/example.json +0 -0
  233. package/src/core/components/functional/sdui/sdui-immutable.spec.ts +74 -0
  234. package/src/core/components/functional/sdui/sdui.ts +33 -8
  235. package/src/core/components/functional/sdui/types.ts +0 -0
  236. package/src/core/components/functional/states/states.ts +0 -0
  237. package/src/core/components/functional/submit/submit.spec.ts +60 -0
  238. package/src/core/components/functional/submit/submit.ts +6 -3
  239. package/src/core/components/functional/subscriber/subscriber.ts +0 -0
  240. package/src/core/components/functional/value/value.md +0 -0
  241. package/src/core/components/functional/value/value.ts +0 -0
  242. package/src/core/components/ui/_css/size.ts +0 -0
  243. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  244. package/src/core/components/ui/card/card.md +1 -1
  245. package/src/core/components/ui/form/input/input.md +19 -1
  246. package/src/core/components/ui/form/input/input.ts +8 -2
  247. package/src/core/components/ui/form/radio/radio.md +14 -0
  248. package/src/core/components/ui/image/image.md +17 -17
  249. package/src/core/components/ui/modal/modal.md +2 -2
  250. package/src/core/decorators/subscriber/bind.ts +9 -14
  251. package/src/core/decorators/subscriber/subscribe.ts +15 -9
  252. package/src/core/decorators/subscriber/subscribe.type-test.ts +14 -5
  253. package/src/core/mixins/Subscriber.ts +0 -0
  254. package/src/core/utils/DataBindObserver.ts +0 -0
  255. package/src/core/utils/Objects.ts +0 -0
  256. package/src/core/utils/PublisherProxy.ts +166 -125
  257. package/src/core/utils/deepReadonly.spec.ts +66 -0
  258. package/src/core/utils/deepReadonly.ts +71 -0
  259. package/src/core/utils/immutableValue.spec.ts +54 -0
  260. package/src/core/utils/immutableValue.ts +102 -0
  261. package/src/core/utils/nestedDotForm.spec.ts +88 -0
  262. package/src/core/utils/publisherImmutable.spec.ts +76 -0
  263. package/src/core/utils/route.ts +0 -0
  264. package/src/core/utils/strictGet.spec.ts +61 -0
  265. package/src/core/utils/strictGet.ts +102 -0
  266. package/src/css.d.ts +19 -0
  267. package/src/docs/components/docs-demo-sources.ts +3 -3
  268. package/src/docs/decorators/bind.md +23 -24
  269. package/src/docs/docs-location.spec.ts +10 -0
  270. package/src/docs/docs-location.ts +10 -0
  271. package/src/docs/example/decorators-demo-bind-demos.ts +11 -28
  272. package/src/docs/example/docs-toggle-demos.ts +1 -1
  273. package/src/docs/example/users.ts +0 -0
  274. package/src/docs/getting-started/ai-agents.md +29 -55
  275. package/src/docs/getting-started/dataFlow.md +2 -2
  276. package/src/docs/home/home.ts +3 -1
  277. package/src/docs/misc/publisher-get-immutability-docs-crawl.json +902 -0
  278. package/src/docs/misc/publisher-get-immutability-docs-recheck.json +13 -0
  279. package/src/docs/misc/publisher-get-immutability-study.md +229 -0
  280. package/src/docs/navigation/navigation.ts +5 -1
  281. package/src/docs/search/docs-search.json +358 -58
  282. package/src/docs/search/markdown-renderer.ts +6 -1
  283. package/src/docs/tailwind/css/docs/content.css +4 -5
  284. package/src/tsconfig.declarations.json +22 -0
  285. package/src/tsconfig.emit.json +23 -0
  286. package/src/tsconfig.json +53 -5
  287. package/src/tsconfig.tsbuildinfo +1 -1
  288. package/.taste-skill/after/desktop-fold.jpg +0 -0
  289. package/.taste-skill/after/desktop-page-01.jpg +0 -0
  290. package/.taste-skill/after/desktop-page-02.jpg +0 -0
  291. package/.taste-skill/after/desktop-page-03.jpg +0 -0
  292. package/.taste-skill/after/mobile-fold.jpg +0 -0
  293. package/.taste-skill/after/mobile-page-01.jpg +0 -0
  294. package/.taste-skill/after/report.json +0 -4103
  295. package/.taste-skill/after/tablet-fold.jpg +0 -0
  296. package/.taste-skill/after/tablet-page-01.jpg +0 -0
  297. package/.taste-skill/after/tablet-page-02.jpg +0 -0
  298. package/.taste-skill/before/desktop-fold.jpg +0 -0
  299. package/.taste-skill/before/desktop-page-01.jpg +0 -0
  300. package/.taste-skill/before/desktop-page-02.jpg +0 -0
  301. package/.taste-skill/before/mobile-fold.jpg +0 -0
  302. package/.taste-skill/before/mobile-page-01.jpg +0 -0
  303. package/.taste-skill/before/report.json +0 -2556
  304. package/.taste-skill/before/tablet-fold.jpg +0 -0
  305. package/.taste-skill/before/tablet-page-01.jpg +0 -0
  306. package/.taste-skill/direction.json +0 -510
  307. package/.taste-skill/notes.md +0 -84
  308. package/.taste-skill/prod/desktop-fold.jpg +0 -0
  309. package/.taste-skill/prod/desktop-page-01.jpg +0 -0
  310. package/.taste-skill/prod/desktop-page-02.jpg +0 -0
  311. package/.taste-skill/prod/desktop-page-03.jpg +0 -0
  312. package/.taste-skill/prod/mobile-fold.jpg +0 -0
  313. package/.taste-skill/prod/mobile-page-01.jpg +0 -0
  314. package/.taste-skill/prod/mobile-page-02.jpg +0 -0
  315. package/.taste-skill/prod/report.json +0 -1973
  316. package/.taste-skill/prod/tablet-fold.jpg +0 -0
  317. package/.taste-skill/prod/tablet-page-01.jpg +0 -0
  318. package/.taste-skill/prod/tablet-page-02.jpg +0 -0
  319. package/AUDIT.md +0 -228
  320. package/PLAN-AMELIORATION.md +0 -220
  321. package/PLAN-DOCS-AGENTS.md +0 -80
  322. package/ai/AGENTS.md +0 -56
  323. package/ai/cursor/rules/concorde-menu.mdc +0 -15
  324. package/ai/cursor/rules/concorde-scope.mdc +0 -14
  325. package/ai/cursor/rules/concorde-theme.mdc +0 -13
  326. package/ai/cursor/rules/concorde.mdc +0 -66
  327. package/ai/jetbrains/rules/concorde.md +0 -53
  328. package/ai/skills/concorde-get-set-dp/SKILL.md +0 -194
  329. package/ai/skills/concorde-imports/SKILL.md +0 -78
  330. package/ai/skills/concorde-menu/SKILL.md +0 -74
  331. package/ai/skills/concorde-scope/SKILL.md +0 -70
  332. package/ai/skills/concorde-theme/SKILL.md +0 -57
  333. package/docs/.htaccess +0 -75
  334. package/docs/404.html +0 -15
  335. package/docs/404.md +0 -5
  336. package/docs/assets/index-BgG6FFPt.js +0 -11765
  337. package/docs/assets/index-x89XINSG.css +0 -1
  338. package/docs/core/components/functional/date/date.html +0 -211
  339. package/docs/core/components/functional/date/date.md +0 -150
  340. package/docs/core/components/functional/fetch/fetch.html +0 -180
  341. package/docs/core/components/functional/fetch/fetch.md +0 -108
  342. package/docs/core/components/functional/if/if.html +0 -65
  343. package/docs/core/components/functional/if/if.md +0 -34
  344. package/docs/core/components/functional/jsonata/jsonata.html +0 -110
  345. package/docs/core/components/functional/jsonata/jsonata.md +0 -61
  346. package/docs/core/components/functional/list/list.html +0 -198
  347. package/docs/core/components/functional/list/list.md +0 -121
  348. package/docs/core/components/functional/mix/mix.html +0 -78
  349. package/docs/core/components/functional/mix/mix.md +0 -46
  350. package/docs/core/components/functional/queue/queue.html +0 -155
  351. package/docs/core/components/functional/queue/queue.md +0 -51
  352. package/docs/core/components/functional/router/router.html +0 -154
  353. package/docs/core/components/functional/router/router.md +0 -93
  354. package/docs/core/components/functional/sdui/sdui-extension-points.md +0 -94
  355. package/docs/core/components/functional/sdui/sdui.html +0 -397
  356. package/docs/core/components/functional/sdui/sdui.md +0 -307
  357. package/docs/core/components/functional/states/states.html +0 -141
  358. package/docs/core/components/functional/states/states.md +0 -112
  359. package/docs/core/components/functional/submit/submit.html +0 -178
  360. package/docs/core/components/functional/submit/submit.md +0 -106
  361. package/docs/core/components/functional/subscriber/subscriber.md +0 -91
  362. package/docs/core/components/functional/translation/translation.html +0 -60
  363. package/docs/core/components/functional/translation/translation.md +0 -38
  364. package/docs/core/components/functional/value/value.html +0 -81
  365. package/docs/core/components/functional/value/value.md +0 -47
  366. package/docs/core/components/ui/alert/alert.md +0 -186
  367. package/docs/core/components/ui/alert-messages/alert-messages.md +0 -85
  368. package/docs/core/components/ui/badge/badge.md +0 -181
  369. package/docs/core/components/ui/button/button.html +0 -309
  370. package/docs/core/components/ui/button/button.md +0 -216
  371. package/docs/core/components/ui/captcha/captcha.html +0 -80
  372. package/docs/core/components/ui/captcha/captcha.md +0 -56
  373. package/docs/core/components/ui/card/card.md +0 -215
  374. package/docs/core/components/ui/divider/divider.md +0 -126
  375. package/docs/core/components/ui/form/checkbox/checkbox.html +0 -200
  376. package/docs/core/components/ui/form/checkbox/checkbox.md +0 -125
  377. package/docs/core/components/ui/form/fieldset/fieldset.html +0 -238
  378. package/docs/core/components/ui/form/fieldset/fieldset.md +0 -161
  379. package/docs/core/components/ui/form/form-actions/form-actions.md +0 -98
  380. package/docs/core/components/ui/form/form-layout/form-layout.html +0 -115
  381. package/docs/core/components/ui/form/form-layout/form-layout.md +0 -109
  382. package/docs/core/components/ui/form/input/input.html +0 -235
  383. package/docs/core/components/ui/form/input/input.md +0 -142
  384. package/docs/core/components/ui/form/radio/radio.html +0 -144
  385. package/docs/core/components/ui/form/radio/radio.md +0 -78
  386. package/docs/core/components/ui/form/select/select.html +0 -178
  387. package/docs/core/components/ui/form/select/select.md +0 -86
  388. package/docs/core/components/ui/form/switch/switch.html +0 -146
  389. package/docs/core/components/ui/form/switch/switch.md +0 -80
  390. package/docs/core/components/ui/form/textarea/textarea.html +0 -162
  391. package/docs/core/components/ui/form/textarea/textarea.md +0 -82
  392. package/docs/core/components/ui/group/group.html +0 -113
  393. package/docs/core/components/ui/group/group.md +0 -77
  394. package/docs/core/components/ui/icon/icon.md +0 -214
  395. package/docs/core/components/ui/image/image.html +0 -194
  396. package/docs/core/components/ui/image/image.md +0 -167
  397. package/docs/core/components/ui/link/link.md +0 -81
  398. package/docs/core/components/ui/loader/loader.html +0 -114
  399. package/docs/core/components/ui/loader/loader.md +0 -87
  400. package/docs/core/components/ui/menu/menu.md +0 -370
  401. package/docs/core/components/ui/modal/modal.html +0 -324
  402. package/docs/core/components/ui/modal/modal.md +0 -211
  403. package/docs/core/components/ui/pop/pop.html +0 -250
  404. package/docs/core/components/ui/pop/pop.md +0 -216
  405. package/docs/core/components/ui/progress/progress.md +0 -109
  406. package/docs/core/components/ui/table/table.html +0 -333
  407. package/docs/core/components/ui/table/table.md +0 -267
  408. package/docs/core/components/ui/theme/theme.html +0 -116
  409. package/docs/core/components/ui/theme/theme.md +0 -97
  410. package/docs/core/components/ui/toast/toast.html +0 -185
  411. package/docs/core/components/ui/toast/toast.md +0 -147
  412. package/docs/core/components/ui/tooltip/tooltip.html +0 -112
  413. package/docs/core/components/ui/tooltip/tooltip.md +0 -89
  414. package/docs/docs/decorators/ancestor-attribute.html +0 -71
  415. package/docs/docs/decorators/ancestor-attribute.md +0 -59
  416. package/docs/docs/decorators/auto-subscribe.html +0 -61
  417. package/docs/docs/decorators/auto-subscribe.md +0 -40
  418. package/docs/docs/decorators/bind.html +0 -86
  419. package/docs/docs/decorators/bind.md +0 -77
  420. package/docs/docs/decorators/get.html +0 -166
  421. package/docs/docs/decorators/get.md +0 -160
  422. package/docs/docs/decorators/handle.html +0 -139
  423. package/docs/docs/decorators/handle.md +0 -119
  424. package/docs/docs/decorators/on-assign.html +0 -72
  425. package/docs/docs/decorators/on-assign.md +0 -63
  426. package/docs/docs/decorators/patch.html +0 -76
  427. package/docs/docs/decorators/patch.md +0 -44
  428. package/docs/docs/decorators/post.html +0 -150
  429. package/docs/docs/decorators/post.md +0 -134
  430. package/docs/docs/decorators/publish.html +0 -74
  431. package/docs/docs/decorators/publish.md +0 -56
  432. package/docs/docs/decorators/put.html +0 -83
  433. package/docs/docs/decorators/put.md +0 -51
  434. package/docs/docs/decorators/subscribe.html +0 -91
  435. package/docs/docs/decorators/subscribe.md +0 -87
  436. package/docs/docs/decorators/wait-for-ancestors.html +0 -82
  437. package/docs/docs/decorators/wait-for-ancestors.md +0 -76
  438. package/docs/docs/directives/sub.html +0 -79
  439. package/docs/docs/directives/sub.md +0 -75
  440. package/docs/docs/directives/t.html +0 -91
  441. package/docs/docs/directives/t.md +0 -73
  442. package/docs/docs/getting-started/ai-agents.md +0 -76
  443. package/docs/docs/getting-started/components.html +0 -27
  444. package/docs/docs/getting-started/components.md +0 -5
  445. package/docs/docs/getting-started/installation.html +0 -69
  446. package/docs/docs/getting-started/installation.md +0 -36
  447. package/docs/docs/getting-started/my-first-component.md +0 -227
  448. package/docs/docs/getting-started/start.html +0 -47
  449. package/docs/docs/getting-started/start.md +0 -35
  450. package/docs/docs/getting-started/theming.md +0 -253
  451. package/docs/docs/index.html +0 -99
  452. package/docs/docs/misc/api-configuration.md +0 -79
  453. package/docs/docs/misc/dataProviderKey.md +0 -168
  454. package/docs/hubs/decorators.html +0 -443
  455. package/docs/hubs/form-components.html +0 -404
  456. package/docs/hubs/remote-data.html +0 -371
  457. package/docs/img/archive/concorde-001-2cv.webp +0 -0
  458. package/docs/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  459. package/docs/img/archive/concorde-red-arrows-2002.webm +0 -0
  460. package/docs/img/archive/credits.json +0 -28
  461. package/docs/index.md +0 -22
  462. package/docs/src/core/components/functional/translation/translation.md +0 -38
  463. package/docs/src/docs/decorators/ancestor-attribute.md +0 -59
  464. package/docs/src/docs/decorators/auto-subscribe.md +0 -40
  465. package/docs/src/docs/decorators/bind.md +0 -77
  466. package/docs/src/docs/decorators/get.md +0 -160
  467. package/docs/src/docs/decorators/handle.md +0 -119
  468. package/docs/src/docs/decorators/on-assign.md +0 -63
  469. package/docs/src/docs/decorators/patch.md +0 -44
  470. package/docs/src/docs/decorators/post.md +0 -134
  471. package/docs/src/docs/decorators/publish.md +0 -56
  472. package/docs/src/docs/decorators/put.md +0 -51
  473. package/docs/src/docs/decorators/subscribe.md +0 -87
  474. package/docs/src/docs/decorators/wait-for-ancestors.md +0 -76
  475. package/docs/src/docs/directives/sub.md +0 -75
  476. package/docs/src/docs/directives/t.md +0 -73
  477. package/docs/src/docs/getting-started/components.md +0 -5
  478. package/docs/src/docs/getting-started/create-a-component.md +0 -136
  479. package/docs/src/docs/getting-started/dataFlow.md +0 -87
  480. package/docs/src/docs/getting-started/installation.md +0 -36
  481. package/docs/src/docs/misc/docs-mock-api.md +0 -62
  482. package/docs/src/docs/misc/dynamic-path.md +0 -71
  483. package/docs/src/docs/misc/endpoint.md +0 -45
  484. package/docs/src/docs/misc/html-integration.md +0 -14
  485. /package/{docs → dist}/img/concorde/plane_01.jpg +0 -0
  486. /package/{docs → dist}/img/concorde/plane_02.jpg +0 -0
  487. /package/{docs → dist}/img/concorde/plane_03.jpg +0 -0
  488. /package/{docs → dist}/img/concorde/plane_04.jpg +0 -0
  489. /package/{docs → dist}/img/concorde/plane_05.jpg +0 -0
  490. /package/{docs → dist}/img/concorde/plane_06.jpg +0 -0
  491. /package/{docs → dist}/img/concorde/plane_07.jpg +0 -0
  492. /package/{docs → dist}/img/concorde/plane_08.jpg +0 -0
  493. /package/{docs → dist}/img/concorde/plane_09.jpg +0 -0
  494. /package/{docs → dist}/img/concorde/plane_10.jpg +0 -0
  495. /package/{docs → dist}/img/concorde/plane_11.jpg +0 -0
  496. /package/{docs → dist}/img/concorde/plane_12.jpg +0 -0
  497. /package/{docs → dist}/img/concorde/plane_13.jpg +0 -0
@@ -1,324 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/modal" 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 by Supersoniks</title>
7
- <meta name="description" content="sonic-modal shows focused content in a dialog with a backdrop, an enter / exit animation and a built-in close button. Compose it with 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(), hide(), hideModal, sonic-button">
9
- <meta name="concorde-doc-id" content="core/components/ui/modal/modal">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/modal">
11
- <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/modal.md">
12
- </head>
13
- <body>
14
- <header>
15
- <p><a href="/docs/index.html">Concorde documentation</a> · <a href="https://concorde.supersoniks.org/core/components/ui/modal">same URL (interactive)</a> · <a href="/llms.txt">llms.txt</a></p>
16
- </header>
17
- <main>
18
- <article>
19
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Modal</strong>. sonic-modal shows focused content in a dialog with a backdrop, an enter / exit animation and a built-in close button. Compose it with 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(), hide(), hideModal, sonic-button. URL: <a href="https://concorde.supersoniks.org/core/components/ui/modal">https://concorde.supersoniks.org/core/components/ui/modal</a>.</span></p>
20
- <h1 id="modal">Modal</h1>
21
- <p><strong><code>sonic-modal</code></strong> shows focused content in a dialog with a backdrop, an enter / exit animation and a built-in close button. Compose it with <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>, open it with <strong><code>show()</code></strong> and close it with <strong><code>hide()</code></strong> or a <strong><code>hideModal</code></strong> button.</p>
22
- <h2 id="basic-example">Basic example</h2>
23
- <p>Backdrop click, Escape and the close button all close the modal. In <strong><code>sonic-modal-actions</code></strong>, a <strong><code>sonic-button</code></strong> with <strong><code>hideModal</code></strong> closes it on click.</p>
24
- <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;modalExample&#39;).show()&quot;&gt;
25
- Open modal
26
- &lt;/sonic-button&gt;
27
- &lt;sonic-modal id=&quot;modalExample&quot;&gt;
28
- &lt;sonic-modal-title&gt;
29
- Boarding pass ready
30
- &lt;sonic-badge type=&quot;success&quot; size=&quot;sm&quot;&gt;New&lt;/sonic-badge&gt;
31
- &lt;/sonic-modal-title&gt;
32
- &lt;sonic-modal-subtitle&gt;Your check-in is complete.&lt;/sonic-modal-subtitle&gt;
33
- &lt;sonic-modal-content&gt;
34
- Download your boarding pass now or review your seat before departure.
35
- &lt;/sonic-modal-content&gt;
36
- &lt;sonic-modal-actions&gt;
37
- &lt;sonic-button minWidth=&quot;8rem&quot; hideModal&gt;Later&lt;/sonic-button&gt;
38
- &lt;sonic-button minWidth=&quot;8rem&quot; type=&quot;success&quot; hideModal&gt;Download&lt;/sonic-button&gt;
39
- &lt;/sonic-modal-actions&gt;
40
- &lt;/sonic-modal&gt;
41
- </code></pre>
42
- <p><strong><code>hideModal</code></strong> only works on <strong><code>sonic-button</code></strong> elements that are direct children of <strong><code>sonic-modal-actions</code></strong>.</p>
43
- <h2 id="scrollable-content">Scrollable content</h2>
44
- <p>Long content scrolls inside the dialog once it reaches <strong><code>maxHeight</code></strong> (default <code>90vh</code>). Content is left-aligned by default; set <strong><code>align</code></strong> to <code>center</code> or <code>right</code>.</p>
45
- <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;modalText&#39;).show()&quot;&gt;Baggage details&lt;/sonic-button&gt;
46
- &lt;sonic-modal id=&quot;modalText&quot; maxHeight=&quot;20rem&quot;&gt;
47
- &lt;sonic-modal-title&gt;Baggage allowance&lt;/sonic-modal-title&gt;
48
- &lt;sonic-modal-content&gt;
49
- &lt;div class=&quot;prose&quot;&gt;
50
- &lt;p&gt;&lt;strong&gt;Cabin bag&lt;/strong&gt;&lt;br /&gt;One cabin bag and one personal item are included in every cabin class.&lt;/p&gt;
51
- &lt;p&gt;&lt;strong&gt;Checked baggage&lt;/strong&gt;&lt;br /&gt;Drop checked bags at the counter at least one hour before departure.&lt;/p&gt;
52
- &lt;p&gt;&lt;strong&gt;Extra baggage&lt;/strong&gt;&lt;br /&gt;Add extra baggage online up to 24 hours before the flight.&lt;/p&gt;
53
- &lt;p&gt;&lt;strong&gt;Contact&lt;/strong&gt;&lt;br /&gt;support@example.com&lt;/p&gt;
54
- &lt;/div&gt;
55
- &lt;/sonic-modal-content&gt;
56
- &lt;/sonic-modal&gt;
57
- </code></pre>
58
- <h2 id="force-action">Force action</h2>
59
- <p>With <strong><code>forceAction</code></strong>, backdrop click, Escape and the close button are disabled. Provide <strong><code>hideModal</code></strong> buttons so users can finish the flow. <strong><code>noCloseButton</code></strong> only hides the close button.</p>
60
- <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;force&#39;).show()&quot;&gt;Cookie consent&lt;/sonic-button&gt;
61
- &lt;sonic-modal forceAction id=&quot;force&quot;&gt;
62
- &lt;sonic-modal-title&gt;Allow analytics cookies?&lt;/sonic-modal-title&gt;
63
- &lt;sonic-modal-content&gt;
64
- Analytics cookies measure traffic. You can change this later in settings.
65
- &lt;/sonic-modal-content&gt;
66
- &lt;sonic-modal-actions&gt;
67
- &lt;sonic-button hideModal minWidth=&quot;8rem&quot;&gt;Decline&lt;/sonic-button&gt;
68
- &lt;sonic-button hideModal minWidth=&quot;8rem&quot; type=&quot;success&quot;&gt;Accept&lt;/sonic-button&gt;
69
- &lt;/sonic-modal-actions&gt;
70
- &lt;/sonic-modal&gt;
71
- </code></pre>
72
- <h2 id="dimensions">Dimensions</h2>
73
- <p>Set <strong><code>width</code></strong> · <strong><code>height</code></strong> · <strong><code>maxWidth</code></strong> · <strong><code>maxHeight</code></strong> with CSS lengths. Below 768px the panel becomes a bottom sheet. <strong><code>rounded=&quot;none&quot;</code></strong> removes the corner radius for edge-to-edge media.</p>
74
- <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;CustomWidth&#39;).show()&quot;&gt;Image preview&lt;/sonic-button&gt;
75
- &lt;sonic-modal
76
- rounded=&quot;none&quot;
77
- maxHeight=&quot;50vh&quot;
78
- maxWidth=&quot;90vw&quot;
79
- width=&quot;100%&quot;
80
- height=&quot;100%&quot;
81
- id=&quot;CustomWidth&quot;
82
- &gt;
83
- &lt;sonic-image
84
- cover
85
- src=&quot;img/concorde/plane_12.jpg&quot;
86
- alt=&quot;Concorde at the gate with boarding stairs&quot;
87
- &gt;&lt;/sonic-image&gt;
88
- &lt;/sonic-modal&gt;
89
- </code></pre>
90
- <h2 id="fullscreen">Fullscreen</h2>
91
- <p><strong><code>fullscreen</code></strong> fills the viewport and hides the backdrop.</p>
92
- <pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;Fullscreen&#39;).show()&quot;&gt;Fullscreen&lt;/sonic-button&gt;
93
- &lt;sonic-modal fullscreen id=&quot;Fullscreen&quot;&gt;
94
- &lt;sonic-image
95
- cover
96
- src=&quot;img/concorde/plane_10.jpg&quot;
97
- alt=&quot;Concorde fleet parked in a star&quot;
98
- &gt;&lt;/sonic-image&gt;
99
- &lt;/sonic-modal&gt;
100
- </code></pre>
101
- <h2 id="programmatic-creation">Programmatic creation</h2>
102
- <p><strong><code>Modal.create(options)</code></strong> (also <code>window.SonicModal.create</code>) appends a modal to the theme pop container, opens it and returns the element. <strong><code>title</code></strong> · <strong><code>subtitle</code></strong> · <strong><code>content</code></strong> · <strong><code>actions</code></strong> accept HTML strings or Lit templates. Set <strong><code>removeOnHide: true</code></strong> to remove it from the DOM after closing.</p>
103
- <pre><code>&lt;sonic-button
104
- onclick=&quot;window.SonicModal.create({
105
- title: &#39;Announce gate change?&#39;,
106
- subtitle: &#39;Passengers are notified immediately.&#39;,
107
- content: &#39;Flight CN 001 now departs from gate B12.&#39;,
108
- 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;,
109
- removeOnHide: true
110
- })&quot;
111
- &gt;
112
- Open programmatic modal
113
- &lt;/sonic-button&gt;
114
- </code></pre>
115
- <pre><code class="language-typescript">import { Modal } from &quot;@supersoniks/concorde/ui/modal&quot;;
116
-
117
- const modal = Modal.create({
118
- title: &quot;Remove flight CN 001?&quot;,
119
- content: &quot;It will no longer appear on the departures board.&quot;,
120
- actions: `
121
- &amp;lt;sonic-button hideModal&amp;gt;Cancel&amp;lt;/sonic-button&amp;gt;
122
- &amp;lt;sonic-button hideModal type=&quot;danger&quot;&amp;gt;Remove&amp;lt;/sonic-button&amp;gt;
123
- `,
124
- removeOnHide: true,
125
- maxWidth: &quot;min(100vw, 28rem)&quot;,
126
- });
127
-
128
- modal.addEventListener(&quot;hidden&quot;, () =&gt; console.log(&quot;closed&quot;));
129
- </code></pre>
130
- <h2 id="api-reference">API reference</h2>
131
- <h3 id="sonic-modal"><code>sonic-modal</code></h3>
132
- <table>
133
- <thead>
134
- <tr>
135
- <th>Attribute</th>
136
- <th>Values</th>
137
- <th>Description</th>
138
- </tr>
139
- </thead>
140
- <tbody><tr>
141
- <td><code>align</code></td>
142
- <td><code>left</code> (default) · <code>center</code> · <code>right</code></td>
143
- <td>Content alignment</td>
144
- </tr>
145
- <tr>
146
- <td><code>width</code></td>
147
- <td>CSS length (default <code>100%</code>)</td>
148
- <td>Dialog width</td>
149
- </tr>
150
- <tr>
151
- <td><code>height</code></td>
152
- <td>CSS length (default <code>fit-content</code>)</td>
153
- <td>Dialog height</td>
154
- </tr>
155
- <tr>
156
- <td><code>maxWidth</code></td>
157
- <td>CSS length (default <code>min(100vw, 40rem)</code>)</td>
158
- <td>Dialog max width</td>
159
- </tr>
160
- <tr>
161
- <td><code>maxHeight</code></td>
162
- <td>CSS length (default <code>90vh</code>)</td>
163
- <td>Dialog max height; content scrolls beyond</td>
164
- </tr>
165
- <tr>
166
- <td><code>paddingX</code> · <code>paddingY</code></td>
167
- <td>CSS length (default <code>1.5rem</code> · <code>2.5rem</code>)</td>
168
- <td>Content padding</td>
169
- </tr>
170
- <tr>
171
- <td><code>zIndex</code></td>
172
- <td>number (default <code>990</code>)</td>
173
- <td>Stacking order</td>
174
- </tr>
175
- <tr>
176
- <td><code>effect</code></td>
177
- <td><code>slide</code> (default) · <code>fade</code> · <code>none</code></td>
178
- <td>Open / close animation</td>
179
- </tr>
180
- <tr>
181
- <td><code>fullscreen</code></td>
182
- <td>boolean</td>
183
- <td>Fill the viewport, no backdrop</td>
184
- </tr>
185
- <tr>
186
- <td><code>rounded</code></td>
187
- <td><code>none</code></td>
188
- <td>Remove the corner radius</td>
189
- </tr>
190
- <tr>
191
- <td><code>forceAction</code></td>
192
- <td>boolean</td>
193
- <td>Disable backdrop click, Escape and close button</td>
194
- </tr>
195
- <tr>
196
- <td><code>noCloseButton</code></td>
197
- <td>boolean</td>
198
- <td>Hide the close button only</td>
199
- </tr>
200
- <tr>
201
- <td><code>closeButtonType</code></td>
202
- <td><code>sonic-button</code> type</td>
203
- <td>Color of the close button</td>
204
- </tr>
205
- <tr>
206
- <td><code>visible</code></td>
207
- <td>boolean</td>
208
- <td>Opens or closes the modal when toggled</td>
209
- </tr>
210
- <tr>
211
- <td><code>removeOnHide</code></td>
212
- <td>boolean</td>
213
- <td>Remove the element after closing</td>
214
- </tr>
215
- <tr>
216
- <td><code>removeHashOnHide</code></td>
217
- <td>boolean</td>
218
- <td>Clear the URL hash after closing</td>
219
- </tr>
220
- <tr>
221
- <td><code>closeOnLocationChange</code></td>
222
- <td>boolean</td>
223
- <td>Close when the location changes</td>
224
- </tr>
225
- <tr>
226
- <td><code>resetDataProviderOnHide</code></td>
227
- <td>publisher id</td>
228
- <td>Reset this data provider to <code>{}</code> after closing</td>
229
- </tr>
230
- </tbody></table>
231
- <p>JavaScript-only properties: <code>options</code> (same keys as <code>Modal.create</code>) and <code>styleSheet</code> (<code>CSSResult</code> or <code>CSSStyleSheet</code>, or an array, adopted in the shadow root).</p>
232
- <table>
233
- <thead>
234
- <tr>
235
- <th>Slot</th>
236
- <th>Description</th>
237
- </tr>
238
- </thead>
239
- <tbody><tr>
240
- <td><em>(default)</em></td>
241
- <td>Modal content, usually the <code>sonic-modal-*</code> children</td>
242
- </tr>
243
- </tbody></table>
244
- <table>
245
- <thead>
246
- <tr>
247
- <th>Method</th>
248
- <th>Description</th>
249
- </tr>
250
- </thead>
251
- <tbody><tr>
252
- <td><code>show()</code></td>
253
- <td>Open the modal</td>
254
- </tr>
255
- <tr>
256
- <td><code>hide()</code></td>
257
- <td>Close the modal (returns a promise)</td>
258
- </tr>
259
- <tr>
260
- <td><code>dispose()</code></td>
261
- <td>Close and remove the modal</td>
262
- </tr>
263
- <tr>
264
- <td><code>Modal.create(options)</code></td>
265
- <td>Static: create, append and open a modal</td>
266
- </tr>
267
- <tr>
268
- <td><code>Modal.disposeAll()</code></td>
269
- <td>Static: close and remove every modal</td>
270
- </tr>
271
- </tbody></table>
272
- <table>
273
- <thead>
274
- <tr>
275
- <th>Event</th>
276
- <th>Description</th>
277
- </tr>
278
- </thead>
279
- <tbody><tr>
280
- <td><code>show</code></td>
281
- <td>Open animation finished</td>
282
- </tr>
283
- <tr>
284
- <td><code>hide</code></td>
285
- <td>Close started</td>
286
- </tr>
287
- <tr>
288
- <td><code>hidden</code></td>
289
- <td>Close finished</td>
290
- </tr>
291
- </tbody></table>
292
- <h3 id="sonic-modal-title--sonic-modal-subtitle--sonic-modal-content--sonic-modal-actions"><code>sonic-modal-title</code> · <code>sonic-modal-subtitle</code> · <code>sonic-modal-content</code> · <code>sonic-modal-actions</code></h3>
293
- <p>No attributes. Default slot only. In <code>sonic-modal-actions</code>, child <code>sonic-button</code> elements with <code>hideModal</code> close the modal.</p>
294
- <h3 id="sonic-modal-close"><code>sonic-modal-close</code></h3>
295
- <p>Rendered automatically unless <code>forceAction</code> or <code>noCloseButton</code> is set. Place it manually to add a close button elsewhere.</p>
296
- <table>
297
- <thead>
298
- <tr>
299
- <th>Attribute</th>
300
- <th>Values</th>
301
- <th>Description</th>
302
- </tr>
303
- </thead>
304
- <tbody><tr>
305
- <td><code>type</code></td>
306
- <td><code>sonic-button</code> type</td>
307
- <td>Button color</td>
308
- </tr>
309
- <tr>
310
- <td><code>reset</code></td>
311
- <td>publisher id</td>
312
- <td>Passed to the inner <code>sonic-button</code> <code>reset</code></td>
313
- </tr>
314
- <tr>
315
- <td><code>translation</code></td>
316
- <td>label object</td>
317
- <td>Overrides the default <code>aria-label</code></td>
318
- </tr>
319
- </tbody></table>
320
-
321
- </article>
322
- </main>
323
- </body>
324
- </html>
@@ -1,211 +0,0 @@
1
- # Modal
2
-
3
- **`sonic-modal`** shows focused content in a dialog with a backdrop, an enter / exit animation and a built-in close button. Compose it with **`sonic-modal-title`** · **`sonic-modal-subtitle`** · **`sonic-modal-content`** · **`sonic-modal-actions`**, open it with **`show()`** and close it with **`hide()`** or a **`hideModal`** button.
4
-
5
- ## Basic example
6
-
7
- Backdrop click, Escape and the close button all close the modal. In **`sonic-modal-actions`**, a **`sonic-button`** with **`hideModal`** closes it on click.
8
-
9
- <sonic-code>
10
- <template>
11
- <sonic-button onclick="document.getElementById('modalExample').show()">
12
- Open modal
13
- </sonic-button>
14
- <sonic-modal id="modalExample">
15
- <sonic-modal-title>
16
- Boarding pass ready
17
- <sonic-badge type="success" size="sm">New</sonic-badge>
18
- </sonic-modal-title>
19
- <sonic-modal-subtitle>Your check-in is complete.</sonic-modal-subtitle>
20
- <sonic-modal-content>
21
- Download your boarding pass now or review your seat before departure.
22
- </sonic-modal-content>
23
- <sonic-modal-actions>
24
- <sonic-button minWidth="8rem" hideModal>Later</sonic-button>
25
- <sonic-button minWidth="8rem" type="success" hideModal>Download</sonic-button>
26
- </sonic-modal-actions>
27
- </sonic-modal>
28
- </template>
29
- </sonic-code>
30
-
31
- **`hideModal`** only works on **`sonic-button`** elements that are direct children of **`sonic-modal-actions`**.
32
-
33
- ## Scrollable content
34
-
35
- Long content scrolls inside the dialog once it reaches **`maxHeight`** (default `90vh`). Content is left-aligned by default; set **`align`** to `center` or `right`.
36
-
37
- <sonic-code>
38
- <template>
39
- <sonic-button onclick="document.getElementById('modalText').show()">Baggage details</sonic-button>
40
- <sonic-modal id="modalText" maxHeight="20rem">
41
- <sonic-modal-title>Baggage allowance</sonic-modal-title>
42
- <sonic-modal-content>
43
- <div class="prose">
44
- <p><strong>Cabin bag</strong><br />One cabin bag and one personal item are included in every cabin class.</p>
45
- <p><strong>Checked baggage</strong><br />Drop checked bags at the counter at least one hour before departure.</p>
46
- <p><strong>Extra baggage</strong><br />Add extra baggage online up to 24 hours before the flight.</p>
47
- <p><strong>Contact</strong><br />support@example.com</p>
48
- </div>
49
- </sonic-modal-content>
50
- </sonic-modal>
51
- </template>
52
- </sonic-code>
53
-
54
- ## Force action
55
-
56
- With **`forceAction`**, backdrop click, Escape and the close button are disabled. Provide **`hideModal`** buttons so users can finish the flow. **`noCloseButton`** only hides the close button.
57
-
58
- <sonic-code>
59
- <template>
60
- <sonic-button onclick="document.getElementById('force').show()">Cookie consent</sonic-button>
61
- <sonic-modal forceAction id="force">
62
- <sonic-modal-title>Allow analytics cookies?</sonic-modal-title>
63
- <sonic-modal-content>
64
- Analytics cookies measure traffic. You can change this later in settings.
65
- </sonic-modal-content>
66
- <sonic-modal-actions>
67
- <sonic-button hideModal minWidth="8rem">Decline</sonic-button>
68
- <sonic-button hideModal minWidth="8rem" type="success">Accept</sonic-button>
69
- </sonic-modal-actions>
70
- </sonic-modal>
71
- </template>
72
- </sonic-code>
73
-
74
- ## Dimensions
75
-
76
- Set **`width`** · **`height`** · **`maxWidth`** · **`maxHeight`** with CSS lengths. Below 768px the panel becomes a bottom sheet. **`rounded="none"`** removes the corner radius for edge-to-edge media.
77
-
78
- <sonic-code>
79
- <template>
80
- <sonic-button onclick="document.getElementById('CustomWidth').show()">Image preview</sonic-button>
81
- <sonic-modal
82
- rounded="none"
83
- maxHeight="50vh"
84
- maxWidth="90vw"
85
- width="100%"
86
- height="100%"
87
- id="CustomWidth"
88
- >
89
- <sonic-image
90
- cover
91
- src="img/concorde/plane_12.jpg"
92
- alt="Concorde at the gate with boarding stairs"
93
- ></sonic-image>
94
- </sonic-modal>
95
- </template>
96
- </sonic-code>
97
-
98
- ## Fullscreen
99
-
100
- **`fullscreen`** fills the viewport and hides the backdrop.
101
-
102
- <sonic-code>
103
- <template>
104
- <sonic-button onclick="document.getElementById('Fullscreen').show()">Fullscreen</sonic-button>
105
- <sonic-modal fullscreen id="Fullscreen">
106
- <sonic-image
107
- cover
108
- src="img/concorde/plane_10.jpg"
109
- alt="Concorde fleet parked in a star"
110
- ></sonic-image>
111
- </sonic-modal>
112
- </template>
113
- </sonic-code>
114
-
115
- ## Programmatic creation
116
-
117
- **`Modal.create(options)`** (also `window.SonicModal.create`) appends a modal to the theme pop container, opens it and returns the element. **`title`** · **`subtitle`** · **`content`** · **`actions`** accept HTML strings or Lit templates. Set **`removeOnHide: true`** to remove it from the DOM after closing.
118
-
119
- <sonic-code>
120
- <template>
121
- <sonic-button
122
- onclick="window.SonicModal.create({
123
- title: 'Announce gate change?',
124
- subtitle: 'Passengers are notified immediately.',
125
- content: 'Flight CN 001 now departs from gate B12.',
126
- actions: '&lt;sonic-button hideModal minWidth=\'8rem\'&gt;Cancel&lt;/sonic-button&gt;&lt;sonic-button hideModal minWidth=\'8rem\' type=\'success\'&gt;Send&lt;/sonic-button&gt;',
127
- removeOnHide: true
128
- })"
129
- >
130
- Open programmatic modal
131
- </sonic-button>
132
- </template>
133
- </sonic-code>
134
-
135
- <sonic-code language="typescript">
136
- <template>
137
- import { Modal } from "@supersoniks/concorde/ui/modal";
138
-
139
- const modal = Modal.create({
140
- title: "Remove flight CN 001?",
141
- content: "It will no longer appear on the departures board.",
142
- actions: `
143
- &lt;sonic-button hideModal&gt;Cancel&lt;/sonic-button&gt;
144
- &lt;sonic-button hideModal type="danger"&gt;Remove&lt;/sonic-button&gt;
145
- `,
146
- removeOnHide: true,
147
- maxWidth: "min(100vw, 28rem)",
148
- });
149
-
150
- modal.addEventListener("hidden", () => console.log("closed"));
151
- </template>
152
- </sonic-code>
153
-
154
- ## API reference
155
-
156
- ### `sonic-modal`
157
-
158
- | Attribute | Values | Description |
159
- |----------|---------|-------------|
160
- | `align` | `left` (default) · `center` · `right` | Content alignment |
161
- | `width` | CSS length (default `100%`) | Dialog width |
162
- | `height` | CSS length (default `fit-content`) | Dialog height |
163
- | `maxWidth` | CSS length (default `min(100vw, 40rem)`) | Dialog max width |
164
- | `maxHeight` | CSS length (default `90vh`) | Dialog max height; content scrolls beyond |
165
- | `paddingX` · `paddingY` | CSS length (default `1.5rem` · `2.5rem`) | Content padding |
166
- | `zIndex` | number (default `990`) | Stacking order |
167
- | `effect` | `slide` (default) · `fade` · `none` | Open / close animation |
168
- | `fullscreen` | boolean | Fill the viewport, no backdrop |
169
- | `rounded` | `none` | Remove the corner radius |
170
- | `forceAction` | boolean | Disable backdrop click, Escape and close button |
171
- | `noCloseButton` | boolean | Hide the close button only |
172
- | `closeButtonType` | `sonic-button` type | Color of the close button |
173
- | `visible` | boolean | Opens or closes the modal when toggled |
174
- | `removeOnHide` | boolean | Remove the element after closing |
175
- | `removeHashOnHide` | boolean | Clear the URL hash after closing |
176
- | `closeOnLocationChange` | boolean | Close when the location changes |
177
- | `resetDataProviderOnHide` | publisher id | Reset this data provider to `{}` after closing |
178
-
179
- JavaScript-only properties: `options` (same keys as `Modal.create`) and `styleSheet` (`CSSResult` or `CSSStyleSheet`, or an array, adopted in the shadow root).
180
-
181
- | Slot | Description |
182
- |------|-------------|
183
- | *(default)* | Modal content, usually the `sonic-modal-*` children |
184
-
185
- | Method | Description |
186
- |--------|-------------|
187
- | `show()` | Open the modal |
188
- | `hide()` | Close the modal (returns a promise) |
189
- | `dispose()` | Close and remove the modal |
190
- | `Modal.create(options)` | Static: create, append and open a modal |
191
- | `Modal.disposeAll()` | Static: close and remove every modal |
192
-
193
- | Event | Description |
194
- |-------|-------------|
195
- | `show` | Open animation finished |
196
- | `hide` | Close started |
197
- | `hidden` | Close finished |
198
-
199
- ### `sonic-modal-title` · `sonic-modal-subtitle` · `sonic-modal-content` · `sonic-modal-actions`
200
-
201
- No attributes. Default slot only. In `sonic-modal-actions`, child `sonic-button` elements with `hideModal` close the modal.
202
-
203
- ### `sonic-modal-close`
204
-
205
- Rendered automatically unless `forceAction` or `noCloseButton` is set. Place it manually to add a close button elsewhere.
206
-
207
- | Attribute | Values | Description |
208
- |----------|---------|-------------|
209
- | `type` | `sonic-button` type | Button color |
210
- | `reset` | publisher id | Passed to the inner `sonic-button` `reset` |
211
- | `translation` | label object | Overrides the default `aria-label` |