@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,250 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/pop" 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 by Supersoniks</title>
7
- <meta name="description" content="sonic-pop anchors a floating panel to a trigger: put the control in the default slot and the panel (menu, form, any markup) in slot=&quot;content&quot;. A click on the trigger toggles the panel unless manual is">
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, top, bottom, left, right, -start, -center">
9
- <meta name="concorde-doc-id" content="core/components/ui/pop/pop">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/pop">
11
- <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/pop.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/pop">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 — Pop</strong>. sonic-pop anchors a floating panel to a trigger: put the control in the default slot and the panel (menu, form, any markup) in slot=&quot;content&quot;. A click on the trigger toggles the panel unless manual is <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, top, bottom, left, right, -start, -center. URL: <a href="https://concorde.supersoniks.org/core/components/ui/pop">https://concorde.supersoniks.org/core/components/ui/pop</a>.</span></p>
20
- <h1 id="pop">Pop</h1>
21
- <p><strong><code>sonic-pop</code></strong> anchors a floating panel to a trigger: put the control in the default slot and the panel (menu, form, any markup) in <strong><code>slot=&quot;content&quot;</code></strong>. A click on the trigger toggles the panel unless <strong><code>manual</code></strong> is set. The panel follows the trigger while open and flips to stay inside the viewport.</p>
22
- <h2 id="basic-example">Basic example</h2>
23
- <pre><code>&lt;sonic-pop&gt;
24
- &lt;sonic-button&gt;Notifications&lt;/sonic-button&gt;
25
- &lt;sonic-menu slot=&quot;content&quot;&gt;
26
- &lt;sonic-menu-item&gt;
27
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
28
- Notifications
29
- &lt;/sonic-menu-item&gt;
30
- &lt;sonic-menu-item&gt;
31
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;settings&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
32
- Settings
33
- &lt;/sonic-menu-item&gt;
34
- &lt;/sonic-menu&gt;
35
- &lt;/sonic-pop&gt;
36
- </code></pre>
37
- <h2 id="placement">Placement</h2>
38
- <p><strong><code>placement</code></strong> is a side (<code>top</code> · <code>bottom</code> · <code>left</code> · <code>right</code>) with an optional alignment suffix (<code>-start</code> · <code>-center</code> · <code>-end</code>). Default is <code>bottom</code>; without a suffix, the panel aligns to <code>start</code>. The space syntax (<code>bottom center</code>) is deprecated.</p>
39
- <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
40
- &lt;sonic-pop placement=&quot;top&quot;&gt;
41
- &lt;sonic-button&gt;Top&lt;/sonic-button&gt;
42
- &lt;sonic-menu slot=&quot;content&quot;&gt;&lt;sonic-menu-item&gt;Item&lt;/sonic-menu-item&gt;&lt;/sonic-menu&gt;
43
- &lt;/sonic-pop&gt;
44
- &lt;sonic-pop placement=&quot;bottom&quot;&gt;
45
- &lt;sonic-button&gt;Bottom&lt;/sonic-button&gt;
46
- &lt;sonic-menu slot=&quot;content&quot;&gt;&lt;sonic-menu-item&gt;Item&lt;/sonic-menu-item&gt;&lt;/sonic-menu&gt;
47
- &lt;/sonic-pop&gt;
48
- &lt;sonic-pop placement=&quot;left&quot;&gt;
49
- &lt;sonic-button&gt;Left&lt;/sonic-button&gt;
50
- &lt;sonic-menu slot=&quot;content&quot;&gt;&lt;sonic-menu-item&gt;Item&lt;/sonic-menu-item&gt;&lt;/sonic-menu&gt;
51
- &lt;/sonic-pop&gt;
52
- &lt;sonic-pop placement=&quot;right&quot;&gt;
53
- &lt;sonic-button&gt;Right&lt;/sonic-button&gt;
54
- &lt;sonic-menu slot=&quot;content&quot;&gt;&lt;sonic-menu-item&gt;Item&lt;/sonic-menu-item&gt;&lt;/sonic-menu&gt;
55
- &lt;/sonic-pop&gt;
56
- &lt;sonic-pop placement=&quot;top-center&quot;&gt;
57
- &lt;sonic-button&gt;Top center&lt;/sonic-button&gt;
58
- &lt;sonic-menu slot=&quot;content&quot;&gt;&lt;sonic-menu-item&gt;Item&lt;/sonic-menu-item&gt;&lt;/sonic-menu&gt;
59
- &lt;/sonic-pop&gt;
60
- &lt;sonic-pop placement=&quot;bottom-center&quot;&gt;
61
- &lt;sonic-button&gt;Bottom center&lt;/sonic-button&gt;
62
- &lt;sonic-menu slot=&quot;content&quot;&gt;&lt;sonic-menu-item&gt;Item&lt;/sonic-menu-item&gt;&lt;/sonic-menu&gt;
63
- &lt;/sonic-pop&gt;
64
- &lt;sonic-pop placement=&quot;left-center&quot;&gt;
65
- &lt;sonic-button&gt;Left center&lt;/sonic-button&gt;
66
- &lt;sonic-menu slot=&quot;content&quot;&gt;&lt;sonic-menu-item&gt;Item&lt;/sonic-menu-item&gt;&lt;/sonic-menu&gt;
67
- &lt;/sonic-pop&gt;
68
- &lt;sonic-pop placement=&quot;bottom-end&quot;&gt;
69
- &lt;sonic-button&gt;Bottom end&lt;/sonic-button&gt;
70
- &lt;sonic-menu slot=&quot;content&quot;&gt;&lt;sonic-menu-item&gt;Item&lt;/sonic-menu-item&gt;&lt;/sonic-menu&gt;
71
- &lt;/sonic-pop&gt;
72
- &lt;/div&gt;
73
- </code></pre>
74
- <h2 id="shadow">Shadow</h2>
75
- <p>The panel shadow defaults to <code>lg</code>.</p>
76
- <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
77
- &lt;sonic-pop shadow=&quot;none&quot;&gt;
78
- &lt;sonic-button&gt;None&lt;/sonic-button&gt;
79
- &lt;sonic-menu slot=&quot;content&quot;&gt;&lt;sonic-menu-item&gt;Item&lt;/sonic-menu-item&gt;&lt;/sonic-menu&gt;
80
- &lt;/sonic-pop&gt;
81
- &lt;sonic-pop shadow=&quot;sm&quot;&gt;
82
- &lt;sonic-button&gt;Small&lt;/sonic-button&gt;
83
- &lt;sonic-menu slot=&quot;content&quot;&gt;&lt;sonic-menu-item&gt;Item&lt;/sonic-menu-item&gt;&lt;/sonic-menu&gt;
84
- &lt;/sonic-pop&gt;
85
- &lt;sonic-pop shadow=&quot;md&quot;&gt;
86
- &lt;sonic-button&gt;Medium&lt;/sonic-button&gt;
87
- &lt;sonic-menu slot=&quot;content&quot;&gt;&lt;sonic-menu-item&gt;Item&lt;/sonic-menu-item&gt;&lt;/sonic-menu&gt;
88
- &lt;/sonic-pop&gt;
89
- &lt;sonic-pop shadow=&quot;lg&quot;&gt;
90
- &lt;sonic-button&gt;Large&lt;/sonic-button&gt;
91
- &lt;sonic-menu slot=&quot;content&quot;&gt;&lt;sonic-menu-item&gt;Item&lt;/sonic-menu-item&gt;&lt;/sonic-menu&gt;
92
- &lt;/sonic-pop&gt;
93
- &lt;/div&gt;
94
- </code></pre>
95
- <h2 id="inline">Inline</h2>
96
- <p>The host is middle-aligned by default. Set <strong><code>inline</code></strong> to baseline-align a trigger inside running text.</p>
97
- <pre><code>&lt;p&gt;
98
- You are signed in as
99
- &lt;sonic-pop inline&gt;
100
- &lt;sonic-button variant=&quot;link&quot;&gt;ada.lindqvist@example.com&lt;/sonic-button&gt;
101
- &lt;sonic-menu slot=&quot;content&quot;&gt;
102
- &lt;sonic-menu-item&gt;Profile&lt;/sonic-menu-item&gt;
103
- &lt;sonic-menu-item&gt;Sign out&lt;/sonic-menu-item&gt;
104
- &lt;/sonic-menu&gt;
105
- &lt;/sonic-pop&gt;
106
- on this device.
107
- &lt;/p&gt;
108
- </code></pre>
109
- <h2 id="no-toggle">No toggle</h2>
110
- <p>With <strong><code>noToggle</code></strong>, clicking the trigger opens the pop but does not close it. Close it with an outside click, Escape or <strong><code>hide()</code></strong>.</p>
111
- <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
112
- &lt;sonic-pop noToggle&gt;
113
- &lt;sonic-button&gt;No toggle&lt;/sonic-button&gt;
114
- &lt;sonic-menu slot=&quot;content&quot;&gt;&lt;sonic-menu-item&gt;Item&lt;/sonic-menu-item&gt;&lt;/sonic-menu&gt;
115
- &lt;/sonic-pop&gt;
116
- &lt;sonic-pop&gt;
117
- &lt;sonic-button&gt;Default toggle&lt;/sonic-button&gt;
118
- &lt;sonic-menu slot=&quot;content&quot;&gt;&lt;sonic-menu-item&gt;Item&lt;/sonic-menu-item&gt;&lt;/sonic-menu&gt;
119
- &lt;/sonic-pop&gt;
120
- &lt;/div&gt;
121
- </code></pre>
122
- <h2 id="manual-control">Manual control</h2>
123
- <p><strong><code>manual</code></strong> disables the built-in click and keyboard handling on the trigger. Call <strong><code>show()</code></strong> and <strong><code>hide()</code></strong> instead.</p>
124
- <pre><code>&lt;sonic-pop manual id=&quot;manualPop&quot;&gt;
125
- &lt;sonic-button onclick=&quot;alert(&#39;Custom action, the pop stays closed&#39;)&quot;&gt;Manual trigger&lt;/sonic-button&gt;
126
- &lt;sonic-menu slot=&quot;content&quot;&gt;
127
- &lt;sonic-menu-item&gt;Opened from script&lt;/sonic-menu-item&gt;
128
- &lt;/sonic-menu&gt;
129
- &lt;/sonic-pop&gt;
130
- &lt;sonic-button onclick=&quot;document.getElementById(&#39;manualPop&#39;).show()&quot; class=&quot;ml-5&quot; variant=&quot;outline&quot;&gt;
131
- Open the pop
132
- &lt;/sonic-button&gt;
133
- </code></pre>
134
- <h2 id="keep-open-on-select">Keep open on select</h2>
135
- <p>A click inside the panel closes the pop by default. Set <strong><code>data-on-select=&quot;keep&quot;</code></strong> on the panel or a descendant to keep it open, for example while ticking checkboxes.</p>
136
- <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
137
- &lt;sonic-pop&gt;
138
- &lt;sonic-button&gt;Closes on select&lt;/sonic-button&gt;
139
- &lt;div slot=&quot;content&quot; class=&quot;grid gap-2 p-3&quot;&gt;
140
- &lt;sonic-checkbox&gt;Window seat&lt;/sonic-checkbox&gt;
141
- &lt;sonic-checkbox&gt;Extra baggage&lt;/sonic-checkbox&gt;
142
- &lt;/div&gt;
143
- &lt;/sonic-pop&gt;
144
- &lt;sonic-pop&gt;
145
- &lt;sonic-button&gt;Stays open on select&lt;/sonic-button&gt;
146
- &lt;div slot=&quot;content&quot; class=&quot;grid gap-2 p-3&quot; data-on-select=&quot;keep&quot;&gt;
147
- &lt;sonic-checkbox&gt;Window seat&lt;/sonic-checkbox&gt;
148
- &lt;sonic-checkbox&gt;Extra baggage&lt;/sonic-checkbox&gt;
149
- &lt;/div&gt;
150
- &lt;/sonic-pop&gt;
151
- &lt;/div&gt;
152
- </code></pre>
153
- <h2 id="keyboard">Keyboard</h2>
154
- <p><strong>ArrowDown</strong> on the trigger opens the pop. <strong>Escape</strong> closes the most recently opened pop, before an enclosing <code>sonic-modal</code>, and returns focus to its trigger.</p>
155
- <pre><code>&lt;sonic-pop&gt;
156
- &lt;sonic-button&gt;Focus me, then press ArrowDown&lt;/sonic-button&gt;
157
- &lt;sonic-menu slot=&quot;content&quot;&gt;
158
- &lt;sonic-menu-item&gt;First item&lt;/sonic-menu-item&gt;
159
- &lt;sonic-menu-item&gt;Second item&lt;/sonic-menu-item&gt;
160
- &lt;/sonic-menu&gt;
161
- &lt;/sonic-pop&gt;
162
- </code></pre>
163
- <h2 id="api-reference">API reference</h2>
164
- <table>
165
- <thead>
166
- <tr>
167
- <th>Attribute</th>
168
- <th>Values</th>
169
- <th>Description</th>
170
- </tr>
171
- </thead>
172
- <tbody><tr>
173
- <td><code>placement</code></td>
174
- <td><code>top</code> · <code>bottom</code> (default) · <code>left</code> · <code>right</code>, each with optional <code>-start</code> · <code>-center</code> · <code>-end</code></td>
175
- <td>Side and alignment relative to the trigger</td>
176
- </tr>
177
- <tr>
178
- <td><code>shadow</code></td>
179
- <td><code>none</code> · <code>sm</code> · <code>md</code> · <code>lg</code> (default <code>lg</code>)</td>
180
- <td>Panel shadow</td>
181
- </tr>
182
- <tr>
183
- <td><code>inline</code></td>
184
- <td>boolean</td>
185
- <td>Baseline-align the host in text</td>
186
- </tr>
187
- <tr>
188
- <td><code>noToggle</code></td>
189
- <td>boolean</td>
190
- <td>A trigger click does not close an open pop</td>
191
- </tr>
192
- <tr>
193
- <td><code>manual</code></td>
194
- <td>boolean</td>
195
- <td>Disable trigger click and keyboard handling</td>
196
- </tr>
197
- </tbody></table>
198
- <table>
199
- <thead>
200
- <tr>
201
- <th>Slot</th>
202
- <th>Description</th>
203
- </tr>
204
- </thead>
205
- <tbody><tr>
206
- <td><em>(default)</em></td>
207
- <td>Trigger</td>
208
- </tr>
209
- <tr>
210
- <td><code>content</code></td>
211
- <td>Floating panel; <code>data-on-select=&quot;keep&quot;</code> inside it prevents close on click</td>
212
- </tr>
213
- </tbody></table>
214
- <table>
215
- <thead>
216
- <tr>
217
- <th>Method</th>
218
- <th>Description</th>
219
- </tr>
220
- </thead>
221
- <tbody><tr>
222
- <td><code>show()</code></td>
223
- <td>Open the panel</td>
224
- </tr>
225
- <tr>
226
- <td><code>hide()</code></td>
227
- <td>Close the panel</td>
228
- </tr>
229
- </tbody></table>
230
- <table>
231
- <thead>
232
- <tr>
233
- <th>Event</th>
234
- <th>Description</th>
235
- </tr>
236
- </thead>
237
- <tbody><tr>
238
- <td><code>show</code></td>
239
- <td>Panel opened</td>
240
- </tr>
241
- <tr>
242
- <td><code>hide</code></td>
243
- <td>Panel closed</td>
244
- </tr>
245
- </tbody></table>
246
-
247
- </article>
248
- </main>
249
- </body>
250
- </html>
@@ -1,216 +0,0 @@
1
- # Pop
2
-
3
- **`sonic-pop`** anchors a floating panel to a trigger: put the control in the default slot and the panel (menu, form, any markup) in **`slot="content"`**. A click on the trigger toggles the panel unless **`manual`** is set. The panel follows the trigger while open and flips to stay inside the viewport.
4
-
5
- ## Basic example
6
-
7
- <sonic-code>
8
- <template>
9
- <sonic-pop>
10
- <sonic-button>Notifications</sonic-button>
11
- <sonic-menu slot="content">
12
- <sonic-menu-item>
13
- <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
14
- Notifications
15
- </sonic-menu-item>
16
- <sonic-menu-item>
17
- <sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
18
- Settings
19
- </sonic-menu-item>
20
- </sonic-menu>
21
- </sonic-pop>
22
- </template>
23
- </sonic-code>
24
-
25
- ## Placement
26
-
27
- **`placement`** is a side (`top` · `bottom` · `left` · `right`) with an optional alignment suffix (`-start` · `-center` · `-end`). Default is `bottom`; without a suffix, the panel aligns to `start`. The space syntax (`bottom center`) is deprecated.
28
-
29
- <sonic-code>
30
- <template>
31
- <div class="flex flex-wrap gap-2">
32
- <sonic-pop placement="top">
33
- <sonic-button>Top</sonic-button>
34
- <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
35
- </sonic-pop>
36
- <sonic-pop placement="bottom">
37
- <sonic-button>Bottom</sonic-button>
38
- <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
39
- </sonic-pop>
40
- <sonic-pop placement="left">
41
- <sonic-button>Left</sonic-button>
42
- <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
43
- </sonic-pop>
44
- <sonic-pop placement="right">
45
- <sonic-button>Right</sonic-button>
46
- <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
47
- </sonic-pop>
48
- <sonic-pop placement="top-center">
49
- <sonic-button>Top center</sonic-button>
50
- <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
51
- </sonic-pop>
52
- <sonic-pop placement="bottom-center">
53
- <sonic-button>Bottom center</sonic-button>
54
- <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
55
- </sonic-pop>
56
- <sonic-pop placement="left-center">
57
- <sonic-button>Left center</sonic-button>
58
- <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
59
- </sonic-pop>
60
- <sonic-pop placement="bottom-end">
61
- <sonic-button>Bottom end</sonic-button>
62
- <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
63
- </sonic-pop>
64
- </div>
65
- </template>
66
- </sonic-code>
67
-
68
- ## Shadow
69
-
70
- The panel shadow defaults to `lg`.
71
-
72
- <sonic-code>
73
- <template>
74
- <div class="flex flex-wrap gap-2">
75
- <sonic-pop shadow="none">
76
- <sonic-button>None</sonic-button>
77
- <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
78
- </sonic-pop>
79
- <sonic-pop shadow="sm">
80
- <sonic-button>Small</sonic-button>
81
- <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
82
- </sonic-pop>
83
- <sonic-pop shadow="md">
84
- <sonic-button>Medium</sonic-button>
85
- <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
86
- </sonic-pop>
87
- <sonic-pop shadow="lg">
88
- <sonic-button>Large</sonic-button>
89
- <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
90
- </sonic-pop>
91
- </div>
92
- </template>
93
- </sonic-code>
94
-
95
- ## Inline
96
-
97
- The host is middle-aligned by default. Set **`inline`** to baseline-align a trigger inside running text.
98
-
99
- <sonic-code>
100
- <template>
101
- <p>
102
- You are signed in as
103
- <sonic-pop inline>
104
- <sonic-button variant="link">ada.lindqvist@example.com</sonic-button>
105
- <sonic-menu slot="content">
106
- <sonic-menu-item>Profile</sonic-menu-item>
107
- <sonic-menu-item>Sign out</sonic-menu-item>
108
- </sonic-menu>
109
- </sonic-pop>
110
- on this device.
111
- </p>
112
- </template>
113
- </sonic-code>
114
-
115
- ## No toggle
116
-
117
- With **`noToggle`**, clicking the trigger opens the pop but does not close it. Close it with an outside click, Escape or **`hide()`**.
118
-
119
- <sonic-code>
120
- <template>
121
- <div class="flex flex-wrap gap-2">
122
- <sonic-pop noToggle>
123
- <sonic-button>No toggle</sonic-button>
124
- <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
125
- </sonic-pop>
126
- <sonic-pop>
127
- <sonic-button>Default toggle</sonic-button>
128
- <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
129
- </sonic-pop>
130
- </div>
131
- </template>
132
- </sonic-code>
133
-
134
- ## Manual control
135
-
136
- **`manual`** disables the built-in click and keyboard handling on the trigger. Call **`show()`** and **`hide()`** instead.
137
-
138
- <sonic-code>
139
- <template>
140
- <sonic-pop manual id="manualPop">
141
- <sonic-button onclick="alert('Custom action, the pop stays closed')">Manual trigger</sonic-button>
142
- <sonic-menu slot="content">
143
- <sonic-menu-item>Opened from script</sonic-menu-item>
144
- </sonic-menu>
145
- </sonic-pop>
146
- <sonic-button onclick="document.getElementById('manualPop').show()" class="ml-5" variant="outline">
147
- Open the pop
148
- </sonic-button>
149
- </template>
150
- </sonic-code>
151
-
152
- ## Keep open on select
153
-
154
- A click inside the panel closes the pop by default. Set **`data-on-select="keep"`** on the panel or a descendant to keep it open, for example while ticking checkboxes.
155
-
156
- <sonic-code>
157
- <template>
158
- <div class="flex flex-wrap gap-2">
159
- <sonic-pop>
160
- <sonic-button>Closes on select</sonic-button>
161
- <div slot="content" class="grid gap-2 p-3">
162
- <sonic-checkbox>Window seat</sonic-checkbox>
163
- <sonic-checkbox>Extra baggage</sonic-checkbox>
164
- </div>
165
- </sonic-pop>
166
- <sonic-pop>
167
- <sonic-button>Stays open on select</sonic-button>
168
- <div slot="content" class="grid gap-2 p-3" data-on-select="keep">
169
- <sonic-checkbox>Window seat</sonic-checkbox>
170
- <sonic-checkbox>Extra baggage</sonic-checkbox>
171
- </div>
172
- </sonic-pop>
173
- </div>
174
- </template>
175
- </sonic-code>
176
-
177
- ## Keyboard
178
-
179
- **ArrowDown** on the trigger opens the pop. **Escape** closes the most recently opened pop, before an enclosing `sonic-modal`, and returns focus to its trigger.
180
-
181
- <sonic-code>
182
- <template>
183
- <sonic-pop>
184
- <sonic-button>Focus me, then press ArrowDown</sonic-button>
185
- <sonic-menu slot="content">
186
- <sonic-menu-item>First item</sonic-menu-item>
187
- <sonic-menu-item>Second item</sonic-menu-item>
188
- </sonic-menu>
189
- </sonic-pop>
190
- </template>
191
- </sonic-code>
192
-
193
- ## API reference
194
-
195
- | Attribute | Values | Description |
196
- |----------|---------|-------------|
197
- | `placement` | `top` · `bottom` (default) · `left` · `right`, each with optional `-start` · `-center` · `-end` | Side and alignment relative to the trigger |
198
- | `shadow` | `none` · `sm` · `md` · `lg` (default `lg`) | Panel shadow |
199
- | `inline` | boolean | Baseline-align the host in text |
200
- | `noToggle` | boolean | A trigger click does not close an open pop |
201
- | `manual` | boolean | Disable trigger click and keyboard handling |
202
-
203
- | Slot | Description |
204
- |------|-------------|
205
- | *(default)* | Trigger |
206
- | `content` | Floating panel; `data-on-select="keep"` inside it prevents close on click |
207
-
208
- | Method | Description |
209
- |--------|-------------|
210
- | `show()` | Open the panel |
211
- | `hide()` | Close the panel |
212
-
213
- | Event | Description |
214
- |-------|-------------|
215
- | `show` | Panel opened |
216
- | `hide` | Panel closed |
@@ -1,109 +0,0 @@
1
- # Progress
2
-
3
- Shows **task completion** on a **`value`** / **`max`** scale via a native `<progress>` bar. Omit **`value`** for an **indeterminate** loading animation. Put primary copy in the default slot and optional secondary text in **`remaining`**; set **`invert`** when the bar sits on a colored surface such as **`sonic-card`**.
4
-
5
- ## Basic example
6
-
7
- Set **`value`** from `0` to **`max`** (default `100`). Label text uses the type color.
8
-
9
- <sonic-code>
10
- <template>
11
- <sonic-progress value="50">Boarding 50%</sonic-progress>
12
- </template>
13
- </sonic-code>
14
-
15
- ## Indeterminate
16
-
17
- With no **`value`**, the bar animates until progress is known.
18
-
19
- <sonic-code>
20
- <template>
21
- <sonic-progress></sonic-progress>
22
- </template>
23
- </sonic-code>
24
-
25
- ## Type
26
-
27
- Semantic color follows **`type`**. With no **`type`**, behavior is `default`.
28
-
29
- <sonic-code>
30
- <template>
31
- <div class="grid gap-3">
32
- <sonic-progress value="50">50%</sonic-progress>
33
- <sonic-progress type="primary" value="50">50%</sonic-progress>
34
- <sonic-progress type="neutral" value="50">50%</sonic-progress>
35
- <sonic-progress type="info" value="50">50%</sonic-progress>
36
- <sonic-progress type="warning" value="50">50%</sonic-progress>
37
- <sonic-progress type="success" value="50">50%</sonic-progress>
38
- <sonic-progress type="danger" value="50">50%</sonic-progress>
39
- </div>
40
- </template>
41
- </sonic-code>
42
-
43
- ## Size
44
-
45
- Bar height scales with typography via **`size`**. With no **`size`**, font size matches **`md`** (`1rem`).
46
-
47
- <sonic-code>
48
- <template>
49
- <div class="grid gap-3">
50
- <sonic-progress size="2xs" value="25">25%</sonic-progress>
51
- <sonic-progress size="xs" value="25">25%</sonic-progress>
52
- <sonic-progress size="sm" value="25">25%</sonic-progress>
53
- <sonic-progress size="md" value="25">25%</sonic-progress>
54
- <sonic-progress size="lg" value="25">25%</sonic-progress>
55
- <sonic-progress size="xl" value="25">25%</sonic-progress>
56
- <sonic-progress size="2xl" value="25">25%</sonic-progress>
57
- </div>
58
- </template>
59
- </sonic-code>
60
-
61
- ## Default and remaining slots
62
-
63
- The default slot is the main label (left). **`remaining`** is right-aligned with lighter weight—use it for “left to complete” copy.
64
-
65
- <sonic-code>
66
- <template>
67
- <sonic-progress type="danger" value="80">
68
- 80% fuel used <span slot="remaining">20% left</span>
69
- </sonic-progress>
70
- </template>
71
- </sonic-code>
72
-
73
- ## Invert
74
-
75
- On tinted backgrounds, **`invert`** adjusts track and fill tokens so the bar stays readable (pair with matching **`type`** on **`sonic-card`** or similar).
76
-
77
- <sonic-code>
78
- <template>
79
- <div class="grid gap-3">
80
- <sonic-card type="info">
81
- <sonic-progress invert type="info" value="50">50%</sonic-progress>
82
- </sonic-card>
83
- <sonic-card type="warning">
84
- <sonic-progress invert type="warning" value="50">50%</sonic-progress>
85
- </sonic-card>
86
- <sonic-card type="success">
87
- <sonic-progress invert type="success" value="50">50%</sonic-progress>
88
- </sonic-card>
89
- <sonic-card type="danger">
90
- <sonic-progress invert type="danger" value="50">50%</sonic-progress>
91
- </sonic-card>
92
- </div>
93
- </template>
94
- </sonic-code>
95
-
96
- ## API reference
97
-
98
- | Attribute | Values | Description |
99
- |----------|---------|-------------|
100
- | `value` | number | Completion amount; omit for indeterminate state |
101
- | `max` | number (default `100`) | Upper bound for **`value`** |
102
- | `type` | `default` (default) · `primary` · `neutral` · `warning` · `info` · `success` · `danger` | Semantic bar and label color |
103
- | `size` | `2xs` · `xs` · `sm` · `md` · `lg` · `xl` · `2xl` · `inherit` | Typography scale (bar height follows `em`) |
104
- | `invert` | boolean | High-contrast tokens on colored backgrounds |
105
-
106
- | Slot | Description |
107
- |------|-------------|
108
- | *(default)* | Primary label below the bar (left) |
109
- | `remaining` | Secondary label below the bar (right) |