@supersoniks/concorde 5.1.0 → 5.1.2

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 (628) hide show
  1. package/.agents/skills/concorde-docs/SKILL.md +153 -0
  2. package/.agents/skills/{concorde-component-docs/template.md → concorde-docs/templates/component.md} +6 -2
  3. package/.agents/skills/concorde-docs/templates/decorator.md +43 -0
  4. package/.agents/skills/concorde-docs/templates/guide.md +25 -0
  5. package/.claude/launch.json +15 -0
  6. package/.claude/vite.http.config.mjs +7 -0
  7. package/.taste-skill/after/desktop-fold.jpg +0 -0
  8. package/.taste-skill/after/desktop-page-01.jpg +0 -0
  9. package/.taste-skill/after/desktop-page-02.jpg +0 -0
  10. package/.taste-skill/after/desktop-page-03.jpg +0 -0
  11. package/.taste-skill/after/mobile-fold.jpg +0 -0
  12. package/.taste-skill/after/mobile-page-01.jpg +0 -0
  13. package/.taste-skill/after/report.json +4103 -0
  14. package/.taste-skill/after/tablet-fold.jpg +0 -0
  15. package/.taste-skill/after/tablet-page-01.jpg +0 -0
  16. package/.taste-skill/after/tablet-page-02.jpg +0 -0
  17. package/.taste-skill/before/desktop-fold.jpg +0 -0
  18. package/.taste-skill/before/desktop-page-01.jpg +0 -0
  19. package/.taste-skill/before/desktop-page-02.jpg +0 -0
  20. package/.taste-skill/before/mobile-fold.jpg +0 -0
  21. package/.taste-skill/before/mobile-page-01.jpg +0 -0
  22. package/.taste-skill/before/report.json +2556 -0
  23. package/.taste-skill/before/tablet-fold.jpg +0 -0
  24. package/.taste-skill/before/tablet-page-01.jpg +0 -0
  25. package/.taste-skill/direction.json +510 -0
  26. package/.taste-skill/notes.md +84 -0
  27. package/.taste-skill/prod/desktop-fold.jpg +0 -0
  28. package/.taste-skill/prod/desktop-page-01.jpg +0 -0
  29. package/.taste-skill/prod/desktop-page-02.jpg +0 -0
  30. package/.taste-skill/prod/desktop-page-03.jpg +0 -0
  31. package/.taste-skill/prod/mobile-fold.jpg +0 -0
  32. package/.taste-skill/prod/mobile-page-01.jpg +0 -0
  33. package/.taste-skill/prod/mobile-page-02.jpg +0 -0
  34. package/.taste-skill/prod/report.json +1973 -0
  35. package/.taste-skill/prod/tablet-fold.jpg +0 -0
  36. package/.taste-skill/prod/tablet-page-01.jpg +0 -0
  37. package/.taste-skill/prod/tablet-page-02.jpg +0 -0
  38. package/.tmp-cem/custom-elements.json +2013 -2013
  39. package/AUDIT.md +228 -0
  40. package/PLAN-AMELIORATION.md +220 -0
  41. package/PLAN-DOCS-AGENTS.md +80 -0
  42. package/README.md +3 -3
  43. package/ai/skills/concorde/SKILL.md +1 -1
  44. package/ai/skills/concorde-get-set-dp/SKILL.md +3 -3
  45. package/ai/skills/concorde-theme/SKILL.md +1 -1
  46. package/build-infos.json +1 -1
  47. package/concorde-core.bundle.js +16 -16
  48. package/concorde-core.es.js +235 -233
  49. package/dist/concorde-core.bundle.js +16 -16
  50. package/dist/concorde-core.es.js +235 -233
  51. package/dist/img/archive/concorde-001-2cv.webp +0 -0
  52. package/dist/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  53. package/dist/img/archive/concorde-red-arrows-2002.webm +0 -0
  54. package/dist/img/archive/credits.json +28 -0
  55. package/docs/.htaccess +75 -0
  56. package/docs/404.html +15 -0
  57. package/docs/404.md +5 -0
  58. package/docs/assets/index-BgG6FFPt.js +11765 -0
  59. package/docs/assets/index-x89XINSG.css +1 -0
  60. package/docs/core/components/functional/date/date.html +211 -0
  61. package/docs/core/components/functional/date/date.md +150 -0
  62. package/docs/core/components/functional/fetch/fetch.html +180 -0
  63. package/docs/core/components/functional/fetch/fetch.md +108 -0
  64. package/docs/core/components/functional/if/if.html +65 -0
  65. package/docs/core/components/functional/if/if.md +34 -0
  66. package/docs/core/components/functional/jsonata/jsonata.html +110 -0
  67. package/docs/core/components/functional/jsonata/jsonata.md +61 -0
  68. package/docs/core/components/functional/list/list.html +198 -0
  69. package/docs/core/components/functional/list/list.md +121 -0
  70. package/docs/core/components/functional/mix/mix.html +78 -0
  71. package/docs/core/components/functional/mix/mix.md +46 -0
  72. package/docs/core/components/functional/queue/queue.html +155 -0
  73. package/docs/core/components/functional/queue/queue.md +51 -0
  74. package/docs/core/components/functional/router/router.html +154 -0
  75. package/docs/core/components/functional/router/router.md +93 -0
  76. package/docs/core/components/functional/sdui/sdui-extension-points.html +127 -0
  77. package/docs/core/components/functional/sdui/sdui-extension-points.md +94 -0
  78. package/docs/core/components/functional/sdui/sdui.html +397 -0
  79. package/docs/core/components/functional/sdui/sdui.md +307 -0
  80. package/docs/core/components/functional/states/states.html +141 -0
  81. package/docs/core/components/functional/states/states.md +112 -0
  82. package/docs/core/components/functional/submit/submit.html +178 -0
  83. package/docs/core/components/functional/submit/submit.md +106 -0
  84. package/docs/{crawl/core → core}/components/functional/subscriber/subscriber.html +6 -5
  85. package/docs/core/components/functional/subscriber/subscriber.md +91 -0
  86. package/docs/core/components/functional/translation/translation.html +60 -0
  87. package/docs/core/components/functional/translation/translation.md +38 -0
  88. package/docs/core/components/functional/value/value.html +81 -0
  89. package/docs/core/components/functional/value/value.md +47 -0
  90. package/docs/core/components/ui/alert/alert.html +201 -0
  91. package/docs/core/components/ui/alert/alert.md +186 -0
  92. package/docs/core/components/ui/alert-messages/alert-messages.html +132 -0
  93. package/docs/core/components/ui/alert-messages/alert-messages.md +85 -0
  94. package/docs/core/components/ui/badge/badge.html +197 -0
  95. package/docs/core/components/ui/badge/badge.md +181 -0
  96. package/docs/core/components/ui/button/button.html +309 -0
  97. package/docs/core/components/ui/button/button.md +216 -0
  98. package/docs/core/components/ui/captcha/captcha.html +80 -0
  99. package/docs/core/components/ui/captcha/captcha.md +56 -0
  100. package/docs/core/components/ui/card/card.html +254 -0
  101. package/docs/core/components/ui/card/card.md +215 -0
  102. package/docs/core/components/ui/divider/divider.html +144 -0
  103. package/docs/core/components/ui/divider/divider.md +126 -0
  104. package/docs/core/components/ui/form/checkbox/checkbox.html +200 -0
  105. package/docs/core/components/ui/form/checkbox/checkbox.md +125 -0
  106. package/docs/core/components/ui/form/fieldset/fieldset.html +238 -0
  107. package/docs/core/components/ui/form/fieldset/fieldset.md +161 -0
  108. package/docs/core/components/ui/form/form-actions/form-actions.html +122 -0
  109. package/docs/core/components/ui/form/form-actions/form-actions.md +98 -0
  110. package/docs/core/components/ui/form/form-layout/form-layout.html +115 -0
  111. package/docs/core/components/ui/form/form-layout/form-layout.md +109 -0
  112. package/docs/core/components/ui/form/input/input.html +235 -0
  113. package/docs/core/components/ui/form/input/input.md +142 -0
  114. package/docs/core/components/ui/form/radio/radio.html +144 -0
  115. package/docs/core/components/ui/form/radio/radio.md +78 -0
  116. package/docs/core/components/ui/form/select/select.html +178 -0
  117. package/docs/core/components/ui/form/select/select.md +86 -0
  118. package/docs/core/components/ui/form/switch/switch.html +146 -0
  119. package/docs/core/components/ui/form/switch/switch.md +80 -0
  120. package/docs/core/components/ui/form/textarea/textarea.html +162 -0
  121. package/docs/core/components/ui/form/textarea/textarea.md +82 -0
  122. package/docs/core/components/ui/group/group.html +113 -0
  123. package/docs/core/components/ui/group/group.md +77 -0
  124. package/docs/core/components/ui/icon/icon.html +223 -0
  125. package/docs/core/components/ui/icon/icon.md +214 -0
  126. package/docs/core/components/ui/image/image.html +194 -0
  127. package/docs/core/components/ui/image/image.md +167 -0
  128. package/docs/core/components/ui/link/link.html +101 -0
  129. package/docs/core/components/ui/link/link.md +81 -0
  130. package/docs/core/components/ui/loader/loader.html +114 -0
  131. package/docs/core/components/ui/loader/loader.md +87 -0
  132. package/docs/{crawl/core → core}/components/ui/menu/menu.html +189 -116
  133. package/docs/core/components/ui/menu/menu.md +370 -0
  134. package/docs/core/components/ui/modal/modal.html +324 -0
  135. package/docs/core/components/ui/modal/modal.md +211 -0
  136. package/docs/core/components/ui/pop/pop.html +250 -0
  137. package/docs/core/components/ui/pop/pop.md +216 -0
  138. package/docs/core/components/ui/progress/progress.html +132 -0
  139. package/docs/core/components/ui/progress/progress.md +109 -0
  140. package/docs/core/components/ui/table/table.html +333 -0
  141. package/docs/core/components/ui/table/table.md +267 -0
  142. package/docs/core/components/ui/theme/theme.html +116 -0
  143. package/docs/core/components/ui/theme/theme.md +97 -0
  144. package/docs/core/components/ui/toast/toast.html +185 -0
  145. package/docs/core/components/ui/toast/toast.md +147 -0
  146. package/docs/core/components/ui/tooltip/tooltip.html +112 -0
  147. package/docs/core/components/ui/tooltip/tooltip.md +89 -0
  148. package/docs/docs/decorators/ancestor-attribute.html +71 -0
  149. package/docs/docs/decorators/ancestor-attribute.md +59 -0
  150. package/docs/docs/decorators/auto-subscribe.html +61 -0
  151. package/docs/docs/decorators/auto-subscribe.md +40 -0
  152. package/docs/docs/decorators/bind.html +86 -0
  153. package/docs/docs/decorators/bind.md +77 -0
  154. package/docs/docs/decorators/get.html +166 -0
  155. package/docs/docs/decorators/get.md +160 -0
  156. package/docs/docs/decorators/handle.html +139 -0
  157. package/docs/docs/decorators/handle.md +119 -0
  158. package/docs/docs/decorators/on-assign.html +72 -0
  159. package/docs/docs/decorators/on-assign.md +63 -0
  160. package/docs/docs/decorators/patch.html +76 -0
  161. package/docs/docs/decorators/patch.md +44 -0
  162. package/docs/docs/decorators/post.html +150 -0
  163. package/docs/docs/decorators/post.md +134 -0
  164. package/docs/docs/decorators/publish.html +74 -0
  165. package/docs/docs/decorators/publish.md +56 -0
  166. package/docs/docs/decorators/put.html +83 -0
  167. package/docs/docs/decorators/put.md +51 -0
  168. package/docs/docs/decorators/subscribe.html +91 -0
  169. package/docs/docs/decorators/subscribe.md +87 -0
  170. package/docs/docs/decorators/wait-for-ancestors.html +82 -0
  171. package/docs/docs/decorators/wait-for-ancestors.md +76 -0
  172. package/docs/docs/directives/sub.html +79 -0
  173. package/docs/docs/directives/sub.md +75 -0
  174. package/docs/docs/directives/t.html +91 -0
  175. package/docs/docs/directives/t.md +73 -0
  176. package/docs/{crawl/docs/_getting-started → docs/getting-started}/ai-agents.html +12 -11
  177. package/{src/docs/_getting-started → docs/docs/getting-started}/ai-agents.md +3 -3
  178. package/docs/docs/getting-started/components.html +27 -0
  179. package/docs/docs/getting-started/components.md +5 -0
  180. package/docs/{crawl/docs/_getting-started → docs/getting-started}/create-a-component.html +11 -14
  181. package/docs/{src/docs/_getting-started → docs/getting-started}/create-a-component.md +3 -6
  182. package/docs/{crawl/docs/_core-concept → docs/getting-started}/dataFlow.html +26 -29
  183. package/docs/{src/docs/_core-concept → docs/getting-started}/dataFlow.md +17 -18
  184. package/docs/docs/getting-started/installation.html +69 -0
  185. package/docs/docs/getting-started/installation.md +36 -0
  186. package/docs/{crawl/docs/_getting-started → docs/getting-started}/my-first-component.html +13 -22
  187. package/docs/{src/docs/_getting-started → docs/getting-started}/my-first-component.md +5 -14
  188. package/docs/docs/getting-started/start.html +47 -0
  189. package/{src/docs/_getting-started → docs/docs/getting-started}/start.md +1 -13
  190. package/docs/docs/getting-started/theming.html +334 -0
  191. package/{src/docs/_getting-started → docs/docs/getting-started}/theming.md +2 -2
  192. package/docs/docs/index.html +99 -0
  193. package/docs/{crawl/docs/_misc → docs/misc}/api-configuration.html +18 -18
  194. package/docs/{src/docs/_misc → docs/misc}/api-configuration.md +10 -12
  195. package/docs/{crawl/docs/_misc → docs/misc}/dataProviderKey.html +12 -11
  196. package/{src/docs/_misc → docs/docs/misc}/dataProviderKey.md +4 -4
  197. package/docs/{crawl/docs/_misc → docs/misc}/docs-mock-api.html +25 -28
  198. package/docs/{src/docs/_misc → docs/misc}/docs-mock-api.md +12 -13
  199. package/docs/{crawl/docs/_misc → docs/misc}/dynamic-path.html +16 -15
  200. package/{src/docs/_misc → docs/docs/misc}/dynamic-path.md +8 -8
  201. package/docs/{crawl/docs/_misc → docs/misc}/endpoint.html +16 -15
  202. package/{src/docs/_misc → docs/docs/misc}/endpoint.md +8 -8
  203. package/docs/{crawl/docs/_misc → docs/misc}/html-integration.html +12 -15
  204. package/docs/{src/docs/_misc → docs/misc}/html-integration.md +4 -5
  205. package/docs/docs-mock-api-sw.js +60 -223
  206. package/docs/docs-mock-api-sw.js.map +4 -4
  207. package/docs/hubs/decorators.html +443 -0
  208. package/docs/hubs/form-components.html +404 -0
  209. package/docs/hubs/remote-data.html +371 -0
  210. package/docs/img/archive/concorde-001-2cv.webp +0 -0
  211. package/docs/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  212. package/docs/img/archive/concorde-red-arrows-2002.webm +0 -0
  213. package/docs/img/archive/credits.json +28 -0
  214. package/docs/img/concorde/plane_01.jpg +0 -0
  215. package/docs/img/concorde/plane_02.jpg +0 -0
  216. package/docs/img/concorde/plane_03.jpg +0 -0
  217. package/docs/img/concorde/plane_04.jpg +0 -0
  218. package/docs/img/concorde/plane_05.jpg +0 -0
  219. package/docs/img/concorde/plane_06.jpg +0 -0
  220. package/docs/img/concorde/plane_07.jpg +0 -0
  221. package/docs/img/concorde/plane_08.jpg +0 -0
  222. package/docs/img/concorde/plane_09.jpg +0 -0
  223. package/docs/img/concorde/plane_10.jpg +0 -0
  224. package/docs/img/concorde/plane_11.jpg +0 -0
  225. package/docs/img/concorde/plane_12.jpg +0 -0
  226. package/docs/img/concorde/plane_13.jpg +0 -0
  227. package/docs/index.html +96 -67
  228. package/docs/index.md +22 -0
  229. package/docs/llms-full.txt +3329 -3295
  230. package/docs/llms.txt +94 -92
  231. package/docs/robots.txt +11 -10
  232. package/docs/sitemap.xml +78 -78
  233. package/docs/src/core/components/functional/date/date.md +91 -231
  234. package/docs/src/core/components/functional/fetch/fetch.md +66 -83
  235. package/docs/src/core/components/functional/if/if.md +28 -3
  236. package/docs/src/core/components/functional/jsonata/jsonata.md +42 -37
  237. package/docs/src/core/components/functional/list/list.md +99 -43
  238. package/docs/src/core/components/functional/mix/mix.md +31 -26
  239. package/docs/src/core/components/functional/queue/queue.md +40 -61
  240. package/docs/src/core/components/functional/router/router.md +64 -65
  241. package/docs/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
  242. package/docs/src/core/components/functional/sdui/component-catalog.json +3103 -0
  243. package/docs/src/core/components/functional/sdui/example.json +19 -86
  244. package/docs/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
  245. package/docs/src/core/components/functional/sdui/sdui.md +196 -245
  246. package/docs/src/core/components/functional/states/states.md +86 -61
  247. package/docs/src/core/components/functional/submit/submit.md +64 -72
  248. package/docs/src/core/components/functional/translation/translation.md +38 -0
  249. package/docs/src/core/components/functional/value/value.md +34 -22
  250. package/docs/src/core/components/ui/alert/alert.md +139 -74
  251. package/docs/src/core/components/ui/alert-messages/alert-messages.md +85 -0
  252. package/docs/src/core/components/ui/badge/badge.md +137 -83
  253. package/docs/src/core/components/ui/button/button.md +139 -105
  254. package/docs/src/core/components/ui/captcha/captcha.md +50 -6
  255. package/docs/src/core/components/ui/card/card.md +183 -65
  256. package/docs/src/core/components/ui/divider/divider.md +104 -13
  257. package/docs/src/core/components/ui/form/checkbox/checkbox.md +90 -42
  258. package/docs/src/core/components/ui/form/fieldset/fieldset.md +135 -103
  259. package/docs/src/core/components/ui/form/form-actions/form-actions.md +71 -50
  260. package/docs/src/core/components/ui/form/form-layout/form-layout.md +99 -34
  261. package/docs/src/core/components/ui/form/input/input.md +95 -95
  262. package/docs/src/core/components/ui/form/radio/radio.md +55 -34
  263. package/docs/src/core/components/ui/form/select/select.md +60 -45
  264. package/docs/src/core/components/ui/form/switch/switch.md +57 -34
  265. package/docs/src/core/components/ui/form/textarea/textarea.md +55 -38
  266. package/docs/src/core/components/ui/group/group.md +49 -47
  267. package/docs/src/core/components/ui/icon/icon.md +132 -43
  268. package/docs/src/core/components/ui/image/image.md +132 -72
  269. package/docs/src/core/components/ui/link/link.md +46 -8
  270. package/docs/src/core/components/ui/loader/loader.md +55 -23
  271. package/docs/src/core/components/ui/menu/menu.md +155 -114
  272. package/docs/src/core/components/ui/modal/modal.md +154 -62
  273. package/docs/src/core/components/ui/pop/pop.md +185 -65
  274. package/docs/src/core/components/ui/progress/progress.md +76 -30
  275. package/docs/src/core/components/ui/table/table.md +146 -334
  276. package/docs/src/core/components/ui/theme/theme.md +97 -0
  277. package/docs/src/core/components/ui/toast/toast.md +80 -99
  278. package/docs/src/core/components/ui/tooltip/tooltip.md +52 -45
  279. package/docs/src/docs/decorators/ancestor-attribute.md +59 -0
  280. package/docs/src/docs/decorators/auto-subscribe.md +40 -0
  281. package/docs/src/docs/decorators/bind.md +77 -0
  282. package/docs/src/docs/decorators/get.md +160 -0
  283. package/docs/src/docs/decorators/handle.md +119 -0
  284. package/docs/src/docs/decorators/on-assign.md +63 -0
  285. package/docs/src/docs/decorators/patch.md +44 -0
  286. package/docs/src/docs/decorators/post.md +134 -0
  287. package/docs/src/docs/decorators/publish.md +56 -0
  288. package/docs/src/docs/decorators/put.md +51 -0
  289. package/docs/src/docs/decorators/subscribe.md +87 -0
  290. package/docs/src/docs/decorators/wait-for-ancestors.md +76 -0
  291. package/docs/src/docs/directives/sub.md +75 -0
  292. package/docs/src/docs/directives/t.md +73 -0
  293. package/docs/src/docs/{_getting-started → getting-started}/ai-agents.md +3 -3
  294. package/docs/src/docs/getting-started/components.md +5 -0
  295. package/{src/docs/_getting-started → docs/src/docs/getting-started}/create-a-component.md +3 -6
  296. package/{src/docs/_core-concept → docs/src/docs/getting-started}/dataFlow.md +17 -18
  297. package/docs/src/docs/getting-started/installation.md +36 -0
  298. package/{src/docs/_getting-started → docs/src/docs/getting-started}/my-first-component.md +5 -14
  299. package/docs/src/docs/getting-started/start.md +35 -0
  300. package/docs/src/docs/getting-started/theming.md +253 -0
  301. package/{src/docs/_misc → docs/src/docs/misc}/api-configuration.md +10 -12
  302. package/docs/src/docs/{_misc → misc}/dataProviderKey.md +4 -4
  303. package/{src/docs/_misc → docs/src/docs/misc}/docs-mock-api.md +12 -13
  304. package/docs/src/docs/{_misc → misc}/dynamic-path.md +8 -8
  305. package/docs/src/docs/{_misc → misc}/endpoint.md +8 -8
  306. package/{src/docs/_misc → docs/src/docs/misc}/html-integration.md +4 -5
  307. package/docs/src/docs/search/docs-search.json +3729 -2949
  308. package/docs/src/tsconfig.json +176 -5
  309. package/index.html +94 -67
  310. package/package.json +11 -4
  311. package/public/docs-mock-api-sw.js +58 -223
  312. package/public/docs-mock-api-sw.js.map +4 -4
  313. package/public/img/archive/concorde-001-2cv.webp +0 -0
  314. package/public/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  315. package/public/img/archive/concorde-red-arrows-2002.webm +0 -0
  316. package/public/img/archive/credits.json +28 -0
  317. package/public/img/concorde/plane_01.jpg +0 -0
  318. package/public/img/concorde/plane_02.jpg +0 -0
  319. package/public/img/concorde/plane_03.jpg +0 -0
  320. package/public/img/concorde/plane_04.jpg +0 -0
  321. package/public/img/concorde/plane_05.jpg +0 -0
  322. package/public/img/concorde/plane_06.jpg +0 -0
  323. package/public/img/concorde/plane_07.jpg +0 -0
  324. package/public/img/concorde/plane_08.jpg +0 -0
  325. package/public/img/concorde/plane_09.jpg +0 -0
  326. package/public/img/concorde/plane_10.jpg +0 -0
  327. package/public/img/concorde/plane_11.jpg +0 -0
  328. package/public/img/concorde/plane_12.jpg +0 -0
  329. package/public/img/concorde/plane_13.jpg +0 -0
  330. package/public/robots.txt +11 -10
  331. package/scripts/docs-markdown-vite-plugin.ts +37 -0
  332. package/scripts/docs-public-url.mjs +50 -0
  333. package/scripts/docs.htaccess +75 -0
  334. package/scripts/generate-crawl-docs.mjs +207 -116
  335. package/scripts/generate-crawl-docs.test.mjs +124 -0
  336. package/scripts/post-build-docs.js +34 -50
  337. package/scripts/post-build.mjs +0 -0
  338. package/src/core/components/functional/date/date.md +91 -231
  339. package/src/core/components/functional/fetch/fetch.md +66 -83
  340. package/src/core/components/functional/if/if.md +28 -3
  341. package/src/core/components/functional/if/if.ts +0 -0
  342. package/src/core/components/functional/jsonata/jsonata.md +42 -37
  343. package/src/core/components/functional/list/list.demo.ts +0 -0
  344. package/src/core/components/functional/list/list.md +99 -43
  345. package/src/core/components/functional/mix/mix.md +31 -26
  346. package/src/core/components/functional/queue/queue.demo.ts +10 -7
  347. package/src/core/components/functional/queue/queue.md +40 -61
  348. package/src/core/components/functional/router/router.demo.ts +16 -16
  349. package/src/core/components/functional/router/router.md +64 -65
  350. package/src/core/components/functional/router/router.ts +0 -0
  351. package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +0 -0
  352. package/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
  353. package/src/core/components/functional/sdui/component-catalog.json +1 -1
  354. package/src/core/components/functional/sdui/example.json +19 -86
  355. package/src/core/components/functional/sdui/sdui-extension-points.md +1 -1
  356. package/src/core/components/functional/sdui/sdui.md +187 -358
  357. package/src/core/components/functional/sdui/types.ts +0 -0
  358. package/src/core/components/functional/states/states.demo.ts +21 -22
  359. package/src/core/components/functional/states/states.md +86 -61
  360. package/src/core/components/functional/states/states.ts +1 -1
  361. package/src/core/components/functional/submit/submit.md +64 -72
  362. package/src/core/components/functional/subscriber/subscriber.ts +0 -0
  363. package/src/core/components/functional/translation/translation.md +38 -0
  364. package/src/core/components/functional/value/value.md +34 -22
  365. package/src/core/components/functional/value/value.ts +0 -0
  366. package/src/core/components/ui/_css/size.ts +0 -0
  367. package/src/core/components/ui/alert/alert.md +48 -58
  368. package/src/core/components/ui/badge/badge.md +27 -34
  369. package/src/core/components/ui/button/button.md +139 -106
  370. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  371. package/src/core/components/ui/captcha/captcha.md +17 -32
  372. package/src/core/components/ui/card/card.md +6 -6
  373. package/src/core/components/ui/divider/divider.md +8 -11
  374. package/src/core/components/ui/form/checkbox/checkbox.md +90 -42
  375. package/src/core/components/ui/form/fieldset/fieldset.md +31 -75
  376. package/src/core/components/ui/form/form-actions/form-actions.md +14 -16
  377. package/src/core/components/ui/form/form-layout/form-layout.md +19 -29
  378. package/src/core/components/ui/form/input/input.md +95 -95
  379. package/src/core/components/ui/form/radio/radio.md +55 -34
  380. package/src/core/components/ui/form/select/select.md +60 -45
  381. package/src/core/components/ui/form/switch/switch.md +57 -34
  382. package/src/core/components/ui/form/textarea/textarea.md +55 -38
  383. package/src/core/components/ui/group/group.md +35 -33
  384. package/src/core/components/ui/icon/icon.md +4 -4
  385. package/src/core/components/ui/image/image.md +41 -107
  386. package/src/core/components/ui/link/link.md +6 -6
  387. package/src/core/components/ui/loader/loader.md +30 -55
  388. package/src/core/components/ui/menu/menu.md +27 -27
  389. package/src/core/components/ui/modal/modal.md +72 -96
  390. package/src/core/components/ui/modal/modal.ts +14 -11
  391. package/src/core/components/ui/pop/pop.md +80 -158
  392. package/src/core/components/ui/progress/progress.md +2 -2
  393. package/src/core/components/ui/table/table.md +91 -255
  394. package/src/core/components/ui/theme/theme.md +11 -36
  395. package/src/core/components/ui/toast/toast.md +48 -117
  396. package/src/core/components/ui/tooltip/tooltip.md +27 -62
  397. package/src/core/mixins/Subscriber.ts +0 -0
  398. package/src/core/utils/DataBindObserver.ts +0 -0
  399. package/src/core/utils/LocationHandler.spec.ts +80 -0
  400. package/src/core/utils/LocationHandler.ts +5 -9
  401. package/src/core/utils/Objects.ts +0 -0
  402. package/src/core/utils/route.ts +0 -0
  403. package/src/docs/code.ts +88 -75
  404. package/src/docs/components/docs-demo-sources.ts +70 -147
  405. package/src/docs/components/docs-lit-demo.ts +20 -40
  406. package/src/docs/components/docs-source-link.ts +0 -82
  407. package/src/docs/decorators/ancestor-attribute.md +59 -0
  408. package/src/docs/decorators/auto-subscribe.md +40 -0
  409. package/src/docs/decorators/bind.md +77 -0
  410. package/src/docs/decorators/get.md +160 -0
  411. package/src/docs/decorators/handle.md +119 -0
  412. package/src/docs/decorators/on-assign.md +63 -0
  413. package/src/docs/decorators/patch.md +44 -0
  414. package/src/docs/decorators/post.md +134 -0
  415. package/src/docs/decorators/publish.md +56 -0
  416. package/src/docs/decorators/put.md +51 -0
  417. package/src/docs/decorators/subscribe.md +87 -0
  418. package/src/docs/decorators/wait-for-ancestors.md +76 -0
  419. package/src/docs/directives/sub.md +75 -0
  420. package/src/docs/directives/t.md +73 -0
  421. package/src/docs/docs-location.spec.ts +46 -0
  422. package/src/docs/docs-location.ts +123 -32
  423. package/src/docs/docs.ts +6 -2
  424. package/src/docs/example/decorators-demo-bind-demos.ts +81 -116
  425. package/src/docs/example/decorators-demo-geo.ts +30 -19
  426. package/src/docs/example/decorators-demo-post.ts +88 -186
  427. package/src/docs/example/decorators-demo-subscribe-publish-get-demos.ts +165 -268
  428. package/src/docs/example/decorators-demo.ts +85 -98
  429. package/src/docs/example/docs-api-config-demos.ts +19 -20
  430. package/src/docs/example/docs-boarding-pass-demo.ts +134 -0
  431. package/src/docs/example/docs-flight-demos.ts +147 -0
  432. package/src/docs/example/docs-jsonata-demos.ts +52 -52
  433. package/src/docs/example/docs-list-demos.ts +43 -123
  434. package/src/docs/example/docs-provider-keys.ts +33 -28
  435. package/src/docs/example/docs-queue-demos.ts +37 -77
  436. package/src/docs/example/docs-router-demos.ts +20 -25
  437. package/src/docs/example/docs-submit-demos.ts +48 -48
  438. package/src/docs/example/docs-toggle-demos.ts +4 -3
  439. package/src/docs/example/users.ts +0 -0
  440. package/src/docs/getting-started/ai-agents.md +76 -0
  441. package/src/docs/getting-started/components.md +5 -0
  442. package/src/docs/getting-started/create-a-component.md +136 -0
  443. package/src/docs/getting-started/dataFlow.md +87 -0
  444. package/src/docs/getting-started/installation.md +36 -0
  445. package/src/docs/getting-started/my-first-component.md +227 -0
  446. package/src/docs/getting-started/start.md +35 -0
  447. package/src/docs/getting-started/theming.md +253 -0
  448. package/src/docs/header/header.ts +240 -71
  449. package/src/docs/home/catalog.ts +44 -0
  450. package/src/docs/home/home.ts +520 -0
  451. package/src/docs/home/mach-stage.ts +389 -0
  452. package/src/docs/layout.ts +12 -11
  453. package/src/docs/misc/api-configuration.md +79 -0
  454. package/src/docs/misc/dataProviderKey.md +168 -0
  455. package/src/docs/misc/docs-mock-api.md +62 -0
  456. package/src/docs/misc/dynamic-path.md +71 -0
  457. package/src/docs/misc/endpoint.md +45 -0
  458. package/src/docs/misc/html-integration.md +14 -0
  459. package/src/docs/mock-api/api-config-mock.ts +5 -0
  460. package/src/docs/mock-api/fixtures.ts +0 -278
  461. package/src/docs/mock-api/flights.ts +89 -0
  462. package/src/docs/mock-api/router.ts +3 -4
  463. package/src/docs/mock-api/urls.ts +1 -2
  464. package/src/docs/navigation/components-index.ts +56 -0
  465. package/src/docs/navigation/navigation.ts +219 -232
  466. package/src/docs/navigation/pager.ts +67 -0
  467. package/src/docs/navigation/toc.ts +101 -0
  468. package/src/docs/search/docs-search.json +2419 -4374
  469. package/src/docs/search/markdown-renderer.ts +33 -7
  470. package/src/docs/search/page.ts +9 -6
  471. package/src/docs/search/search.ts +154 -122
  472. package/src/docs/shiki/index.ts +109 -0
  473. package/src/docs/tailwind/css/base/scrollbar.css +22 -0
  474. package/src/docs/tailwind/css/base/theme.css +96 -0
  475. package/src/docs/tailwind/css/base/typography.css +4 -0
  476. package/src/docs/tailwind/css/docs/boarding-pass.css +65 -0
  477. package/src/docs/tailwind/css/docs/content.css +32 -0
  478. package/src/docs/tailwind/css/docs/page.css +10 -0
  479. package/src/docs/tailwind/css/docs.css +9 -0
  480. package/src/docs/tailwind/css/home/hero.css +210 -0
  481. package/src/docs/tailwind/css/home/motion.css +84 -0
  482. package/src/docs/tailwind/css/home/sections.css +416 -0
  483. package/src/docs/tailwind/css/tailwind.css +7 -185
  484. package/src/tsconfig.json +23 -2
  485. package/src/tsconfig.tsbuildinfo +1 -1
  486. package/tailwind.config.js +8 -4
  487. package/vite.config.mts +11 -2
  488. package/.agents/skills/concorde-component-docs/SKILL.md +0 -194
  489. package/.github/workflows/ci.yml +0 -21
  490. package/.github-export-ignore +0 -30
  491. package/CONTRIBUTING.md +0 -59
  492. package/DEV.md +0 -54
  493. package/LICENSE +0 -21
  494. package/OPEN_SOURCE_CHECKPOINT.md +0 -133
  495. package/concorde-3d.bundle.js +0 -3960
  496. package/concorde-3d.es.js +0 -33433
  497. package/concorde-hugging-face-infer.bundle.js +0 -32
  498. package/concorde-hugging-face-infer.es.js +0 -2952
  499. package/concorde-interactive.bundle.js +0 -1157
  500. package/concorde-interactive.es.js +0 -10734
  501. package/concorde-shader.bundle.js +0 -116
  502. package/concorde-shader.es.js +0 -8353
  503. package/concorde-webgpu.bundle.js +0 -307
  504. package/concorde-webgpu.es.js +0 -8627
  505. package/docs/assets/index-D8MVWqY6.js +0 -12251
  506. package/docs/assets/index-DiD0qYvE.css +0 -1
  507. package/docs/crawl/core/components/functional/date/date.html +0 -190
  508. package/docs/crawl/core/components/functional/fetch/fetch.html +0 -109
  509. package/docs/crawl/core/components/functional/if/if.html +0 -27
  510. package/docs/crawl/core/components/functional/jsonata/jsonata.html +0 -79
  511. package/docs/crawl/core/components/functional/list/list.html +0 -70
  512. package/docs/crawl/core/components/functional/mix/mix.html +0 -45
  513. package/docs/crawl/core/components/functional/queue/queue.html +0 -96
  514. package/docs/crawl/core/components/functional/router/router.html +0 -106
  515. package/docs/crawl/core/components/functional/sdui/sdui.html +0 -269
  516. package/docs/crawl/core/components/functional/states/states.html +0 -66
  517. package/docs/crawl/core/components/functional/submit/submit.html +0 -160
  518. package/docs/crawl/core/components/functional/value/value.html +0 -51
  519. package/docs/crawl/core/components/ui/alert/alert.html +0 -110
  520. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +0 -23
  521. package/docs/crawl/core/components/ui/badge/badge.html +0 -119
  522. package/docs/crawl/core/components/ui/button/button.html +0 -149
  523. package/docs/crawl/core/components/ui/captcha/captcha.html +0 -30
  524. package/docs/crawl/core/components/ui/card/card.html +0 -99
  525. package/docs/crawl/core/components/ui/divider/divider.html +0 -58
  526. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +0 -73
  527. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +0 -135
  528. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +0 -79
  529. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +0 -62
  530. package/docs/crawl/core/components/ui/form/input/input.html +0 -109
  531. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +0 -38
  532. package/docs/crawl/core/components/ui/form/radio/radio.html +0 -56
  533. package/docs/crawl/core/components/ui/form/select/select.html +0 -73
  534. package/docs/crawl/core/components/ui/form/switch/switch.html +0 -56
  535. package/docs/crawl/core/components/ui/form/textarea/textarea.html +0 -59
  536. package/docs/crawl/core/components/ui/group/group.html +0 -82
  537. package/docs/crawl/core/components/ui/icon/icon.html +0 -133
  538. package/docs/crawl/core/components/ui/image/image.html +0 -110
  539. package/docs/crawl/core/components/ui/link/link.html +0 -42
  540. package/docs/crawl/core/components/ui/loader/loader.html +0 -50
  541. package/docs/crawl/core/components/ui/modal/modal.html +0 -117
  542. package/docs/crawl/core/components/ui/pop/pop.html +0 -102
  543. package/docs/crawl/core/components/ui/progress/progress.html +0 -58
  544. package/docs/crawl/core/components/ui/table/table.html +0 -413
  545. package/docs/crawl/core/components/ui/toast/toast.html +0 -122
  546. package/docs/crawl/core/components/ui/tooltip/tooltip.html +0 -79
  547. package/docs/crawl/docs/_core-concept/overview.html +0 -66
  548. package/docs/crawl/docs/_core-concept/subscriber.html +0 -75
  549. package/docs/crawl/docs/_decorators/ancestor-attribute.html +0 -116
  550. package/docs/crawl/docs/_decorators/auto-subscribe.html +0 -202
  551. package/docs/crawl/docs/_decorators/bind.html +0 -141
  552. package/docs/crawl/docs/_decorators/get.html +0 -149
  553. package/docs/crawl/docs/_decorators/handle.html +0 -165
  554. package/docs/crawl/docs/_decorators/on-assign.html +0 -355
  555. package/docs/crawl/docs/_decorators/patch.html +0 -78
  556. package/docs/crawl/docs/_decorators/post.html +0 -139
  557. package/docs/crawl/docs/_decorators/publish.html +0 -61
  558. package/docs/crawl/docs/_decorators/put.html +0 -78
  559. package/docs/crawl/docs/_decorators/subscribe.html +0 -109
  560. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +0 -137
  561. package/docs/crawl/docs/_directives/sub.html +0 -93
  562. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +0 -100
  563. package/docs/crawl/docs/_getting-started/concorde-outside.html +0 -58
  564. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +0 -110
  565. package/docs/crawl/docs/_getting-started/pubsub.html +0 -62
  566. package/docs/crawl/docs/_getting-started/start.html +0 -76
  567. package/docs/crawl/docs/_getting-started/theming.html +0 -85
  568. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +0 -138
  569. package/docs/crawl/hubs/decorators.html +0 -547
  570. package/docs/crawl/hubs/form-components.html +0 -359
  571. package/docs/crawl/hubs/remote-data.html +0 -452
  572. package/docs/crawl/index.html +0 -101
  573. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
  574. package/docs/src/docs/_core-concept/overview.md +0 -57
  575. package/docs/src/docs/_core-concept/subscriber.md +0 -75
  576. package/docs/src/docs/_decorators/ancestor-attribute.md +0 -127
  577. package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
  578. package/docs/src/docs/_decorators/bind.md +0 -167
  579. package/docs/src/docs/_decorators/get.md +0 -162
  580. package/docs/src/docs/_decorators/handle.md +0 -175
  581. package/docs/src/docs/_decorators/on-assign.md +0 -390
  582. package/docs/src/docs/_decorators/patch.md +0 -70
  583. package/docs/src/docs/_decorators/post.md +0 -146
  584. package/docs/src/docs/_decorators/publish.md +0 -55
  585. package/docs/src/docs/_decorators/put.md +0 -70
  586. package/docs/src/docs/_decorators/subscribe.md +0 -100
  587. package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
  588. package/docs/src/docs/_directives/sub.md +0 -91
  589. package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
  590. package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
  591. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
  592. package/docs/src/docs/_getting-started/pubsub.md +0 -37
  593. package/docs/src/docs/_getting-started/start.md +0 -47
  594. package/docs/src/docs/_getting-started/theming.md +0 -91
  595. package/docs/src/docs/_misc/formelement-subscriber-removal.md +0 -115
  596. package/docs/src/tsconfig.declarations.json +0 -22
  597. package/docs/src/tsconfig.emit.json +0 -23
  598. package/gitlab/job_github_mirror.sh +0 -39
  599. package/scripts/github-export.mjs +0 -150
  600. package/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
  601. package/src/css.d.ts +0 -19
  602. package/src/docs/_core-concept/overview.md +0 -57
  603. package/src/docs/_core-concept/subscriber.md +0 -75
  604. package/src/docs/_decorators/ancestor-attribute.md +0 -128
  605. package/src/docs/_decorators/auto-subscribe.md +0 -202
  606. package/src/docs/_decorators/bind.md +0 -167
  607. package/src/docs/_decorators/get.md +0 -162
  608. package/src/docs/_decorators/handle.md +0 -175
  609. package/src/docs/_decorators/on-assign.md +0 -390
  610. package/src/docs/_decorators/patch.md +0 -70
  611. package/src/docs/_decorators/post.md +0 -146
  612. package/src/docs/_decorators/publish.md +0 -55
  613. package/src/docs/_decorators/put.md +0 -70
  614. package/src/docs/_decorators/subscribe.md +0 -100
  615. package/src/docs/_decorators/wait-for-ancestors.md +0 -163
  616. package/src/docs/_directives/sub.md +0 -91
  617. package/src/docs/_getting-started/concorde-manual-install.md +0 -133
  618. package/src/docs/_getting-started/concorde-outside.md +0 -33
  619. package/src/docs/_getting-started/my-first-subscriber.md +0 -120
  620. package/src/docs/_getting-started/pubsub.md +0 -37
  621. package/src/docs/_misc/formelement-subscriber-removal.md +0 -115
  622. package/src/docs/example/docs-input-autocomplete-demos.ts +0 -110
  623. package/src/docs/example/docs-joke-demos.ts +0 -297
  624. package/src/docs/prism/index.ts +0 -6
  625. package/src/docs/prism/prism.css +0 -158
  626. package/src/docs/prism/prism.js +0 -1022
  627. package/src/tsconfig.declarations.json +0 -22
  628. package/src/tsconfig.emit.json +0 -23
@@ -0,0 +1,250 @@
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>
@@ -0,0 +1,216 @@
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 |
@@ -0,0 +1,132 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/progress" data-doc-id="core/components/ui/progress/progress">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Progress — Concorde by Supersoniks</title>
7
+ <meta name="description" content="Shows task completion on a value / max scale via a native &lt;progress&gt; bar. Omit value for an indeterminate loading animation. Put primary copy in the default slot and optional secondary text in remaini">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/progress/progress, progress, Progress, UI component, sonic-progress, web component, value, max, , remaining, invert, sonic-card, to **, ** (default ">
9
+ <meta name="concorde-doc-id" content="core/components/ui/progress/progress">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/progress">
11
+ <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/progress.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/progress">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 — Progress</strong>. Shows task completion on a value / max scale via a native &lt;progress&gt; bar. Omit value for an indeterminate loading animation. Put primary copy in the default slot and optional secondary text in remaini <span>Doc ID: <code>core/components/ui/progress/progress</code>. Keywords: Concorde, supersoniks, core/components/ui/progress/progress, progress, Progress, UI component, sonic-progress, web component, value, max, , remaining, invert, sonic-card, to **, ** (default . URL: <a href="https://concorde.supersoniks.org/core/components/ui/progress">https://concorde.supersoniks.org/core/components/ui/progress</a>.</span></p>
20
+ <h1 id="progress">Progress</h1>
21
+ <p>Shows <strong>task completion</strong> on a <strong><code>value</code></strong> / <strong><code>max</code></strong> scale via a native <code>&lt;progress&gt;</code> bar. Omit <strong><code>value</code></strong> for an <strong>indeterminate</strong> loading animation. Put primary copy in the default slot and optional secondary text in <strong><code>remaining</code></strong>; set <strong><code>invert</code></strong> when the bar sits on a colored surface such as <strong><code>sonic-card</code></strong>.</p>
22
+ <h2 id="basic-example">Basic example</h2>
23
+ <p>Set <strong><code>value</code></strong> from <code>0</code> to <strong><code>max</code></strong> (default <code>100</code>). Label text uses the type color.</p>
24
+ <pre><code>&lt;sonic-progress value=&quot;50&quot;&gt;Boarding 50%&lt;/sonic-progress&gt;
25
+ </code></pre>
26
+ <h2 id="indeterminate">Indeterminate</h2>
27
+ <p>With no <strong><code>value</code></strong>, the bar animates until progress is known.</p>
28
+ <pre><code>&lt;sonic-progress&gt;&lt;/sonic-progress&gt;
29
+ </code></pre>
30
+ <h2 id="type">Type</h2>
31
+ <p>Semantic color follows <strong><code>type</code></strong>. With no <strong><code>type</code></strong>, behavior is <code>default</code>.</p>
32
+ <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
33
+ &lt;sonic-progress value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
34
+ &lt;sonic-progress type=&quot;primary&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
35
+ &lt;sonic-progress type=&quot;neutral&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
36
+ &lt;sonic-progress type=&quot;info&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
37
+ &lt;sonic-progress type=&quot;warning&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
38
+ &lt;sonic-progress type=&quot;success&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
39
+ &lt;sonic-progress type=&quot;danger&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
40
+ &lt;/div&gt;
41
+ </code></pre>
42
+ <h2 id="size">Size</h2>
43
+ <p>Bar height scales with typography via <strong><code>size</code></strong>. With no <strong><code>size</code></strong>, font size matches <strong><code>md</code></strong> (<code>1rem</code>).</p>
44
+ <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
45
+ &lt;sonic-progress size=&quot;2xs&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
46
+ &lt;sonic-progress size=&quot;xs&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
47
+ &lt;sonic-progress size=&quot;sm&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
48
+ &lt;sonic-progress size=&quot;md&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
49
+ &lt;sonic-progress size=&quot;lg&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
50
+ &lt;sonic-progress size=&quot;xl&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
51
+ &lt;sonic-progress size=&quot;2xl&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
52
+ &lt;/div&gt;
53
+ </code></pre>
54
+ <h2 id="default-and-remaining-slots">Default and remaining slots</h2>
55
+ <p>The default slot is the main label (left). <strong><code>remaining</code></strong> is right-aligned with lighter weight—use it for “left to complete” copy.</p>
56
+ <pre><code>&lt;sonic-progress type=&quot;danger&quot; value=&quot;80&quot;&gt;
57
+ 80% fuel used &lt;span slot=&quot;remaining&quot;&gt;20% left&lt;/span&gt;
58
+ &lt;/sonic-progress&gt;
59
+ </code></pre>
60
+ <h2 id="invert">Invert</h2>
61
+ <p>On tinted backgrounds, <strong><code>invert</code></strong> adjusts track and fill tokens so the bar stays readable (pair with matching <strong><code>type</code></strong> on <strong><code>sonic-card</code></strong> or similar).</p>
62
+ <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
63
+ &lt;sonic-card type=&quot;info&quot;&gt;
64
+ &lt;sonic-progress invert type=&quot;info&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
65
+ &lt;/sonic-card&gt;
66
+ &lt;sonic-card type=&quot;warning&quot;&gt;
67
+ &lt;sonic-progress invert type=&quot;warning&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
68
+ &lt;/sonic-card&gt;
69
+ &lt;sonic-card type=&quot;success&quot;&gt;
70
+ &lt;sonic-progress invert type=&quot;success&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
71
+ &lt;/sonic-card&gt;
72
+ &lt;sonic-card type=&quot;danger&quot;&gt;
73
+ &lt;sonic-progress invert type=&quot;danger&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
74
+ &lt;/sonic-card&gt;
75
+ &lt;/div&gt;
76
+ </code></pre>
77
+ <h2 id="api-reference">API reference</h2>
78
+ <table>
79
+ <thead>
80
+ <tr>
81
+ <th>Attribute</th>
82
+ <th>Values</th>
83
+ <th>Description</th>
84
+ </tr>
85
+ </thead>
86
+ <tbody><tr>
87
+ <td><code>value</code></td>
88
+ <td>number</td>
89
+ <td>Completion amount; omit for indeterminate state</td>
90
+ </tr>
91
+ <tr>
92
+ <td><code>max</code></td>
93
+ <td>number (default <code>100</code>)</td>
94
+ <td>Upper bound for <strong><code>value</code></strong></td>
95
+ </tr>
96
+ <tr>
97
+ <td><code>type</code></td>
98
+ <td><code>default</code> (default) · <code>primary</code> · <code>neutral</code> · <code>warning</code> · <code>info</code> · <code>success</code> · <code>danger</code></td>
99
+ <td>Semantic bar and label color</td>
100
+ </tr>
101
+ <tr>
102
+ <td><code>size</code></td>
103
+ <td><code>2xs</code> · <code>xs</code> · <code>sm</code> · <code>md</code> · <code>lg</code> · <code>xl</code> · <code>2xl</code> · <code>inherit</code></td>
104
+ <td>Typography scale (bar height follows <code>em</code>)</td>
105
+ </tr>
106
+ <tr>
107
+ <td><code>invert</code></td>
108
+ <td>boolean</td>
109
+ <td>High-contrast tokens on colored backgrounds</td>
110
+ </tr>
111
+ </tbody></table>
112
+ <table>
113
+ <thead>
114
+ <tr>
115
+ <th>Slot</th>
116
+ <th>Description</th>
117
+ </tr>
118
+ </thead>
119
+ <tbody><tr>
120
+ <td><em>(default)</em></td>
121
+ <td>Primary label below the bar (left)</td>
122
+ </tr>
123
+ <tr>
124
+ <td><code>remaining</code></td>
125
+ <td>Secondary label below the bar (right)</td>
126
+ </tr>
127
+ </tbody></table>
128
+
129
+ </article>
130
+ </main>
131
+ </body>
132
+ </html>