@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,185 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/toast" data-doc-id="core/components/ui/toast/toast">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Toast — Concorde by Supersoniks</title>
7
+ <meta name="description" content="Toasts show short-lived feedback in a fixed stack at the bottom right of the page. Call SonicToast.add() (also window.SonicToast); the sonic-toast host is created on first use. Use label for a heading">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/toast/toast, toast, Toast, UI component, sonic-toast, web component, SonicToast.add(), window.SonicToast, label, preserve, status, text, title">
9
+ <meta name="concorde-doc-id" content="core/components/ui/toast/toast">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/toast">
11
+ <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/toast.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/toast">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 — Toast</strong>. Toasts show short-lived feedback in a fixed stack at the bottom right of the page. Call SonicToast.add() (also window.SonicToast); the sonic-toast host is created on first use. Use label for a heading <span>Doc ID: <code>core/components/ui/toast/toast</code>. Keywords: Concorde, supersoniks, core/components/ui/toast/toast, toast, Toast, UI component, sonic-toast, web component, SonicToast.add(), window.SonicToast, label, preserve, status, text, title. URL: <a href="https://concorde.supersoniks.org/core/components/ui/toast">https://concorde.supersoniks.org/core/components/ui/toast</a>.</span></p>
20
+ <h1 id="toast">Toast</h1>
21
+ <p>Toasts show short-lived feedback in a fixed stack at the bottom right of the page. Call <strong><code>SonicToast.add()</code></strong> (also <code>window.SonicToast</code>); the <strong><code>sonic-toast</code></strong> host is created on first use. Use <strong><code>label</code></strong> for a heading and <strong><code>preserve</code></strong> when the user must read or act before the toast goes away.</p>
22
+ <h2 id="basic-example">Basic example</h2>
23
+ <pre><code>&lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Flight CN 001 is now boarding&#39; })&quot;&gt;
24
+ Show toast
25
+ &lt;/sonic-button&gt;
26
+ </code></pre>
27
+ <h2 id="status">Status</h2>
28
+ <p><strong><code>status</code></strong> sets the color, the icon and the live-region role. With no <code>status</code>, the toast is neutral.</p>
29
+ <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
30
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Default message&#39; })&quot;&gt;Default&lt;/sonic-button&gt;
31
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Operation succeeded&#39;, status: &#39;success&#39; })&quot;&gt;Success&lt;/sonic-button&gt;
32
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Something went wrong&#39;, status: &#39;error&#39; })&quot;&gt;Error&lt;/sonic-button&gt;
33
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Check this detail&#39;, status: &#39;warning&#39; })&quot;&gt;Warning&lt;/sonic-button&gt;
34
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Helpful context&#39;, status: &#39;info&#39; })&quot;&gt;Info&lt;/sonic-button&gt;
35
+ &lt;/div&gt;
36
+ </code></pre>
37
+ <h2 id="label">Label</h2>
38
+ <p><strong><code>label</code></strong> adds a bold heading above <strong><code>text</code></strong>. <code>title</code> is a deprecated alias.</p>
39
+ <pre><code>&lt;sonic-button
40
+ onclick=&quot;SonicToast.add({ label: &#39;Gate change&#39;, text: &#39;Flight CN 001 now departs from gate B12.&#39;, status: &#39;warning&#39; })&quot;
41
+ &gt;
42
+ Toast with label
43
+ &lt;/sonic-button&gt;
44
+ </code></pre>
45
+ <h2 id="html-in-text">HTML in text</h2>
46
+ <p><strong><code>text</code></strong> and <strong><code>label</code></strong> accept HTML strings. A link or form control in <strong><code>text</code></strong> turns on <strong><code>preserve</code></strong> automatically.</p>
47
+ <pre><code>&lt;sonic-button
48
+ onclick=&quot;SonicToast.add({ text: &#39;Message with &lt;strong&gt;HTML&lt;/strong&gt; and an &lt;a href=&amp;quot;#&amp;quot;&gt;action link&lt;/a&gt;&#39;, status: &#39;info&#39; })&quot;
49
+ &gt;
50
+ Toast with HTML
51
+ &lt;/sonic-button&gt;
52
+ </code></pre>
53
+ <h2 id="preserve">Preserve</h2>
54
+ <p>Toasts hide after 6 seconds; the timer pauses on hover and focus. <strong><code>preserve</code></strong> keeps the toast until the user closes it.</p>
55
+ <pre><code>&lt;sonic-button
56
+ onclick=&quot;SonicToast.add({ text: &#39;Turbulence ahead: please fasten your seat belt&#39;, status: &#39;info&#39;, preserve: true })&quot;
57
+ &gt;
58
+ Persistent toast
59
+ &lt;/sonic-button&gt;
60
+ </code></pre>
61
+ <h2 id="dismiss-forever">Dismiss forever</h2>
62
+ <p>With <strong><code>dismissForever</code></strong> and a stable <strong><code>id</code></strong>, closing the toast is stored in <code>localStorage</code> and later <code>add()</code> calls with that <code>id</code> are ignored. A toast identical to one already shown (ignoring <code>id</code>) is never added twice.</p>
63
+ <pre><code>&lt;sonic-button
64
+ onclick=&quot;SonicToast.add({ id: &#39;welcome-toast&#39;, label: &#39;Welcome&#39;, text: &#39;Close me and I will not come back after a reload.&#39;, status: &#39;info&#39;, dismissForever: true })&quot;
65
+ &gt;
66
+ Dismiss forever
67
+ &lt;/sonic-button&gt;
68
+ </code></pre>
69
+ <h2 id="ghost">Ghost</h2>
70
+ <p><strong><code>ghost</code></strong> renders a semi-transparent, non-interactive toast, for example for a background task.</p>
71
+ <pre><code>&lt;sonic-button
72
+ onclick=&quot;SonicToast.add({ text: &#39;Syncing in the background&#39;, status: &#39;info&#39;, ghost: true })&quot;
73
+ &gt;
74
+ Ghost toast
75
+ &lt;/sonic-button&gt;
76
+ </code></pre>
77
+ <h2 id="removing-toasts">Removing toasts</h2>
78
+ <p>Static helpers clear the stack from script, for example after navigation. <strong><code>removeAll()</code></strong> keeps ghost toasts; <strong><code>removeTemporaryItems()</code></strong> keeps preserved ones.</p>
79
+ <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
80
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Temporary success&#39;, status: &#39;success&#39; })&quot;&gt;Add success&lt;/sonic-button&gt;
81
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Temporary error&#39;, status: &#39;error&#39; })&quot;&gt;Add error&lt;/sonic-button&gt;
82
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Persistent info&#39;, status: &#39;info&#39;, preserve: true })&quot;&gt;Add persistent&lt;/sonic-button&gt;
83
+ &lt;/div&gt;
84
+ &lt;div class=&quot;flex flex-wrap gap-2 mt-3&quot;&gt;
85
+ &lt;sonic-button variant=&quot;outline&quot; onclick=&quot;SonicToast.removeItemsByStatus(&#39;success&#39;)&quot;&gt;Remove success&lt;/sonic-button&gt;
86
+ &lt;sonic-button variant=&quot;outline&quot; onclick=&quot;SonicToast.removeTemporaryItems()&quot;&gt;Remove temporary&lt;/sonic-button&gt;
87
+ &lt;sonic-button variant=&quot;outline&quot; onclick=&quot;SonicToast.removeAll()&quot;&gt;Remove all&lt;/sonic-button&gt;
88
+ &lt;/div&gt;
89
+ </code></pre>
90
+ <p>Inside an iframe, toasts are forwarded to the parent window&#39;s stack when the parent also loads Concorde.</p>
91
+ <h2 id="api-reference">API reference</h2>
92
+ <p>Options of <strong><code>SonicToast.add(options)</code></strong>:</p>
93
+ <table>
94
+ <thead>
95
+ <tr>
96
+ <th>Option</th>
97
+ <th>Values</th>
98
+ <th>Description</th>
99
+ </tr>
100
+ </thead>
101
+ <tbody><tr>
102
+ <td><code>text</code></td>
103
+ <td>string · Lit template</td>
104
+ <td>Body, required; HTML strings allowed</td>
105
+ </tr>
106
+ <tr>
107
+ <td><code>label</code></td>
108
+ <td>string · Lit template</td>
109
+ <td>Heading above <code>text</code></td>
110
+ </tr>
111
+ <tr>
112
+ <td><code>title</code></td>
113
+ <td>string · Lit template</td>
114
+ <td>Deprecated alias of <code>label</code></td>
115
+ </tr>
116
+ <tr>
117
+ <td><code>status</code></td>
118
+ <td><code>success</code> · <code>error</code> · <code>warning</code> · <code>info</code> (default neutral)</td>
119
+ <td>Color and icon; <code>error</code> gets <code>role=&quot;alert&quot;</code>, others <code>role=&quot;status&quot;</code></td>
120
+ </tr>
121
+ <tr>
122
+ <td><code>id</code></td>
123
+ <td>string · number (default timestamp)</td>
124
+ <td>Identifier for <code>removeItemById</code> and <code>dismissForever</code></td>
125
+ </tr>
126
+ <tr>
127
+ <td><code>preserve</code></td>
128
+ <td>boolean</td>
129
+ <td>No auto-hide; forced when <code>text</code> contains a link or control</td>
130
+ </tr>
131
+ <tr>
132
+ <td><code>ghost</code></td>
133
+ <td>boolean</td>
134
+ <td>Semi-transparent and non-interactive; kept by <code>removeAll</code></td>
135
+ </tr>
136
+ <tr>
137
+ <td><code>dismissForever</code></td>
138
+ <td>boolean</td>
139
+ <td>Remember the dismissal in <code>localStorage</code>; needs a stable <code>id</code></td>
140
+ </tr>
141
+ <tr>
142
+ <td><code>styleSheet</code></td>
143
+ <td><code>CSSResult</code> · <code>CSSStyleSheet</code> · array</td>
144
+ <td>Extra styles adopted by the toast</td>
145
+ </tr>
146
+ <tr>
147
+ <td><code>useSlot</code></td>
148
+ <td>boolean</td>
149
+ <td>Legacy: render <code>text</code> in the light DOM</td>
150
+ </tr>
151
+ </tbody></table>
152
+ <table>
153
+ <thead>
154
+ <tr>
155
+ <th>Method</th>
156
+ <th>Description</th>
157
+ </tr>
158
+ </thead>
159
+ <tbody><tr>
160
+ <td><code>SonicToast.add(options)</code></td>
161
+ <td>Show a toast; returns the stored config, or <code>null</code> when skipped</td>
162
+ </tr>
163
+ <tr>
164
+ <td><code>SonicToast.removeAll()</code></td>
165
+ <td>Remove every toast except ghosts</td>
166
+ </tr>
167
+ <tr>
168
+ <td><code>SonicToast.removeItemsByStatus(status)</code></td>
169
+ <td>Remove toasts with this <code>status</code></td>
170
+ </tr>
171
+ <tr>
172
+ <td><code>SonicToast.removeItemById(id)</code></td>
173
+ <td>Remove one toast</td>
174
+ </tr>
175
+ <tr>
176
+ <td><code>SonicToast.removeTemporaryItems()</code></td>
177
+ <td>Remove toasts without <code>preserve</code></td>
178
+ </tr>
179
+ </tbody></table>
180
+ <p><code>sonic-toast</code> and <code>sonic-toast-item</code> are created by <code>add()</code>; do not write them in markup. <code>sonic-toast-message-subscriber</code> shows a toast for each <code>{ type: &quot;public&quot;, content, status }</code> entry of its <code>messages</code> property.</p>
181
+
182
+ </article>
183
+ </main>
184
+ </body>
185
+ </html>
@@ -0,0 +1,147 @@
1
+ # Toast
2
+
3
+ Toasts show short-lived feedback in a fixed stack at the bottom right of the page. Call **`SonicToast.add()`** (also `window.SonicToast`); the **`sonic-toast`** host is created on first use. Use **`label`** for a heading and **`preserve`** when the user must read or act before the toast goes away.
4
+
5
+ ## Basic example
6
+
7
+ <sonic-code>
8
+ <template>
9
+ <sonic-button onclick="SonicToast.add({ text: 'Flight CN 001 is now boarding' })">
10
+ Show toast
11
+ </sonic-button>
12
+ </template>
13
+ </sonic-code>
14
+
15
+ ## Status
16
+
17
+ **`status`** sets the color, the icon and the live-region role. With no `status`, the toast is neutral.
18
+
19
+ <sonic-code>
20
+ <template>
21
+ <div class="flex flex-wrap gap-2">
22
+ <sonic-button onclick="SonicToast.add({ text: 'Default message' })">Default</sonic-button>
23
+ <sonic-button onclick="SonicToast.add({ text: 'Operation succeeded', status: 'success' })">Success</sonic-button>
24
+ <sonic-button onclick="SonicToast.add({ text: 'Something went wrong', status: 'error' })">Error</sonic-button>
25
+ <sonic-button onclick="SonicToast.add({ text: 'Check this detail', status: 'warning' })">Warning</sonic-button>
26
+ <sonic-button onclick="SonicToast.add({ text: 'Helpful context', status: 'info' })">Info</sonic-button>
27
+ </div>
28
+ </template>
29
+ </sonic-code>
30
+
31
+ ## Label
32
+
33
+ **`label`** adds a bold heading above **`text`**. `title` is a deprecated alias.
34
+
35
+ <sonic-code>
36
+ <template>
37
+ <sonic-button
38
+ onclick="SonicToast.add({ label: 'Gate change', text: 'Flight CN 001 now departs from gate B12.', status: 'warning' })"
39
+ >
40
+ Toast with label
41
+ </sonic-button>
42
+ </template>
43
+ </sonic-code>
44
+
45
+ ## HTML in text
46
+
47
+ **`text`** and **`label`** accept HTML strings. A link or form control in **`text`** turns on **`preserve`** automatically.
48
+
49
+ <sonic-code>
50
+ <template>
51
+ <sonic-button
52
+ onclick="SonicToast.add({ text: 'Message with <strong>HTML</strong> and an <a href=&quot;#&quot;>action link</a>', status: 'info' })"
53
+ >
54
+ Toast with HTML
55
+ </sonic-button>
56
+ </template>
57
+ </sonic-code>
58
+
59
+ ## Preserve
60
+
61
+ Toasts hide after 6 seconds; the timer pauses on hover and focus. **`preserve`** keeps the toast until the user closes it.
62
+
63
+ <sonic-code>
64
+ <template>
65
+ <sonic-button
66
+ onclick="SonicToast.add({ text: 'Turbulence ahead: please fasten your seat belt', status: 'info', preserve: true })"
67
+ >
68
+ Persistent toast
69
+ </sonic-button>
70
+ </template>
71
+ </sonic-code>
72
+
73
+ ## Dismiss forever
74
+
75
+ With **`dismissForever`** and a stable **`id`**, closing the toast is stored in `localStorage` and later `add()` calls with that `id` are ignored. A toast identical to one already shown (ignoring `id`) is never added twice.
76
+
77
+ <sonic-code>
78
+ <template>
79
+ <sonic-button
80
+ onclick="SonicToast.add({ id: 'welcome-toast', label: 'Welcome', text: 'Close me and I will not come back after a reload.', status: 'info', dismissForever: true })"
81
+ >
82
+ Dismiss forever
83
+ </sonic-button>
84
+ </template>
85
+ </sonic-code>
86
+
87
+ ## Ghost
88
+
89
+ **`ghost`** renders a semi-transparent, non-interactive toast, for example for a background task.
90
+
91
+ <sonic-code>
92
+ <template>
93
+ <sonic-button
94
+ onclick="SonicToast.add({ text: 'Syncing in the background', status: 'info', ghost: true })"
95
+ >
96
+ Ghost toast
97
+ </sonic-button>
98
+ </template>
99
+ </sonic-code>
100
+
101
+ ## Removing toasts
102
+
103
+ Static helpers clear the stack from script, for example after navigation. **`removeAll()`** keeps ghost toasts; **`removeTemporaryItems()`** keeps preserved ones.
104
+
105
+ <sonic-code>
106
+ <template>
107
+ <div class="flex flex-wrap gap-2">
108
+ <sonic-button onclick="SonicToast.add({ text: 'Temporary success', status: 'success' })">Add success</sonic-button>
109
+ <sonic-button onclick="SonicToast.add({ text: 'Temporary error', status: 'error' })">Add error</sonic-button>
110
+ <sonic-button onclick="SonicToast.add({ text: 'Persistent info', status: 'info', preserve: true })">Add persistent</sonic-button>
111
+ </div>
112
+ <div class="flex flex-wrap gap-2 mt-3">
113
+ <sonic-button variant="outline" onclick="SonicToast.removeItemsByStatus('success')">Remove success</sonic-button>
114
+ <sonic-button variant="outline" onclick="SonicToast.removeTemporaryItems()">Remove temporary</sonic-button>
115
+ <sonic-button variant="outline" onclick="SonicToast.removeAll()">Remove all</sonic-button>
116
+ </div>
117
+ </template>
118
+ </sonic-code>
119
+
120
+ Inside an iframe, toasts are forwarded to the parent window's stack when the parent also loads Concorde.
121
+
122
+ ## API reference
123
+
124
+ Options of **`SonicToast.add(options)`**:
125
+
126
+ | Option | Values | Description |
127
+ |----------|---------|-------------|
128
+ | `text` | string · Lit template | Body, required; HTML strings allowed |
129
+ | `label` | string · Lit template | Heading above `text` |
130
+ | `title` | string · Lit template | Deprecated alias of `label` |
131
+ | `status` | `success` · `error` · `warning` · `info` (default neutral) | Color and icon; `error` gets `role="alert"`, others `role="status"` |
132
+ | `id` | string · number (default timestamp) | Identifier for `removeItemById` and `dismissForever` |
133
+ | `preserve` | boolean | No auto-hide; forced when `text` contains a link or control |
134
+ | `ghost` | boolean | Semi-transparent and non-interactive; kept by `removeAll` |
135
+ | `dismissForever` | boolean | Remember the dismissal in `localStorage`; needs a stable `id` |
136
+ | `styleSheet` | `CSSResult` · `CSSStyleSheet` · array | Extra styles adopted by the toast |
137
+ | `useSlot` | boolean | Legacy: render `text` in the light DOM |
138
+
139
+ | Method | Description |
140
+ |--------|-------------|
141
+ | `SonicToast.add(options)` | Show a toast; returns the stored config, or `null` when skipped |
142
+ | `SonicToast.removeAll()` | Remove every toast except ghosts |
143
+ | `SonicToast.removeItemsByStatus(status)` | Remove toasts with this `status` |
144
+ | `SonicToast.removeItemById(id)` | Remove one toast |
145
+ | `SonicToast.removeTemporaryItems()` | Remove toasts without `preserve` |
146
+
147
+ `sonic-toast` and `sonic-toast-item` are created by `add()`; do not write them in markup. `sonic-toast-message-subscriber` shows a toast for each `{ type: "public", content, status }` entry of its `messages` property.
@@ -0,0 +1,112 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/tooltip" data-doc-id="core/components/ui/tooltip/tooltip">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Tooltip — Concorde by Supersoniks</title>
7
+ <meta name="description" content="sonic-tooltip shows a short label in a bubble when the trigger in the default slot is hovered or receives focus. With no placement, the bubble sits on top, centered. An empty label hides the bubble, l">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/tooltip/tooltip, tooltip, Tooltip, UI component, sonic-tooltip, web component, label, placement, top, disabled, bottom, left, right">
9
+ <meta name="concorde-doc-id" content="core/components/ui/tooltip/tooltip">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/tooltip">
11
+ <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/tooltip.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/tooltip">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 — Tooltip</strong>. sonic-tooltip shows a short label in a bubble when the trigger in the default slot is hovered or receives focus. With no placement, the bubble sits on top, centered. An empty label hides the bubble, l <span>Doc ID: <code>core/components/ui/tooltip/tooltip</code>. Keywords: Concorde, supersoniks, core/components/ui/tooltip/tooltip, tooltip, Tooltip, UI component, sonic-tooltip, web component, label, placement, top, disabled, bottom, left, right. URL: <a href="https://concorde.supersoniks.org/core/components/ui/tooltip">https://concorde.supersoniks.org/core/components/ui/tooltip</a>.</span></p>
20
+ <h1 id="tooltip">Tooltip</h1>
21
+ <p><strong><code>sonic-tooltip</code></strong> shows a short <code>label</code> in a bubble when the trigger in the default slot is hovered or receives focus. With no <code>placement</code>, the bubble sits on <code>top</code>, centered. An empty <code>label</code> hides the bubble, like <code>disabled</code>.</p>
22
+ <h2 id="basic-example">Basic example</h2>
23
+ <pre><code>&lt;sonic-tooltip label=&quot;Cruising at Mach 2.04&quot;&gt;
24
+ &lt;sonic-button variant=&quot;outline&quot;&gt;Hover me&lt;/sonic-button&gt;
25
+ &lt;/sonic-tooltip&gt;
26
+ </code></pre>
27
+ <h2 id="placement">Placement</h2>
28
+ <p><code>top</code> · <code>bottom</code> · <code>left</code> · <code>right</code> set the side. Add <code>-start</code> or <code>-end</code> to align the bubble with an edge of the trigger instead of its center. The bubble is repositioned while open to stay in the viewport.</p>
29
+ <pre><code>&lt;div class=&quot;flex flex-wrap gap-3&quot;&gt;
30
+ &lt;sonic-tooltip placement=&quot;top&quot; label=&quot;top&quot;&gt;&lt;sonic-button minWidth=&quot;9rem&quot;&gt;top&lt;/sonic-button&gt;&lt;/sonic-tooltip&gt;
31
+ &lt;sonic-tooltip placement=&quot;top-start&quot; label=&quot;top-start&quot;&gt;&lt;sonic-button minWidth=&quot;9rem&quot;&gt;top-start&lt;/sonic-button&gt;&lt;/sonic-tooltip&gt;
32
+ &lt;sonic-tooltip placement=&quot;top-end&quot; label=&quot;top-end&quot;&gt;&lt;sonic-button minWidth=&quot;9rem&quot;&gt;top-end&lt;/sonic-button&gt;&lt;/sonic-tooltip&gt;
33
+ &lt;sonic-tooltip placement=&quot;bottom&quot; label=&quot;bottom&quot;&gt;&lt;sonic-button minWidth=&quot;9rem&quot;&gt;bottom&lt;/sonic-button&gt;&lt;/sonic-tooltip&gt;
34
+ &lt;sonic-tooltip placement=&quot;bottom-start&quot; label=&quot;bottom-start&quot;&gt;&lt;sonic-button minWidth=&quot;9rem&quot;&gt;bottom-start&lt;/sonic-button&gt;&lt;/sonic-tooltip&gt;
35
+ &lt;sonic-tooltip placement=&quot;bottom-end&quot; label=&quot;bottom-end&quot;&gt;&lt;sonic-button minWidth=&quot;9rem&quot;&gt;bottom-end&lt;/sonic-button&gt;&lt;/sonic-tooltip&gt;
36
+ &lt;sonic-tooltip placement=&quot;left&quot; label=&quot;left&quot;&gt;&lt;sonic-button minWidth=&quot;9rem&quot;&gt;left&lt;/sonic-button&gt;&lt;/sonic-tooltip&gt;
37
+ &lt;sonic-tooltip placement=&quot;left-start&quot; label=&quot;left-start&quot;&gt;&lt;sonic-button minWidth=&quot;9rem&quot;&gt;left-start&lt;/sonic-button&gt;&lt;/sonic-tooltip&gt;
38
+ &lt;sonic-tooltip placement=&quot;left-end&quot; label=&quot;left-end&quot;&gt;&lt;sonic-button minWidth=&quot;9rem&quot;&gt;left-end&lt;/sonic-button&gt;&lt;/sonic-tooltip&gt;
39
+ &lt;sonic-tooltip placement=&quot;right&quot; label=&quot;right&quot;&gt;&lt;sonic-button minWidth=&quot;9rem&quot;&gt;right&lt;/sonic-button&gt;&lt;/sonic-tooltip&gt;
40
+ &lt;sonic-tooltip placement=&quot;right-start&quot; label=&quot;right-start&quot;&gt;&lt;sonic-button minWidth=&quot;9rem&quot;&gt;right-start&lt;/sonic-button&gt;&lt;/sonic-tooltip&gt;
41
+ &lt;sonic-tooltip placement=&quot;right-end&quot; label=&quot;right-end&quot;&gt;&lt;sonic-button minWidth=&quot;9rem&quot;&gt;right-end&lt;/sonic-button&gt;&lt;/sonic-tooltip&gt;
42
+ &lt;/div&gt;
43
+ </code></pre>
44
+ <h2 id="multiline-label">Multiline label</h2>
45
+ <p>Line breaks in <code>label</code> (a real newline or <code>&amp;#10;</code>) are kept. Each line is trimmed and the bubble wraps at <code>18rem</code>.</p>
46
+ <pre><code>&lt;sonic-tooltip label=&quot;Gate B12&amp;#10;Boarding at 08:15&quot;&gt;
47
+ &lt;sonic-button variant=&quot;outline&quot;&gt;Multiline label&lt;/sonic-button&gt;
48
+ &lt;/sonic-tooltip&gt;
49
+ </code></pre>
50
+ <h2 id="focusable">Focusable</h2>
51
+ <p>Set <code>focusable</code> when the trigger is not focusable itself (text, icon): the host gets <code>tabindex=&quot;0&quot;</code> so keyboard users can open the tooltip. The bubble uses <code>popover=&quot;hint&quot;</code>; without Popover API support, the label falls back to a native <code>title</code> on one line.</p>
52
+ <pre><code>&lt;sonic-tooltip
53
+ focusable
54
+ label=&quot;The Concorde made its first transatlantic crossing on September 26, 1973&quot;
55
+ &gt;
56
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble-question&quot;&gt;&lt;/sonic-icon&gt;
57
+ Focus or hover this text
58
+ &lt;/sonic-tooltip&gt;
59
+ </code></pre>
60
+ <h2 id="disabled">Disabled</h2>
61
+ <p><code>disabled</code> never shows the bubble and sets <code>tabindex=&quot;-1&quot;</code> on the host.</p>
62
+ <pre><code>&lt;sonic-tooltip disabled label=&quot;Not shown&quot;&gt;
63
+ &lt;sonic-button&gt;Tooltip disabled&lt;/sonic-button&gt;
64
+ &lt;/sonic-tooltip&gt;
65
+ </code></pre>
66
+ <h2 id="api-reference">API reference</h2>
67
+ <table>
68
+ <thead>
69
+ <tr>
70
+ <th>Attribute</th>
71
+ <th>Values</th>
72
+ <th>Description</th>
73
+ </tr>
74
+ </thead>
75
+ <tbody><tr>
76
+ <td><code>label</code></td>
77
+ <td>string</td>
78
+ <td>Tooltip text; empty or whitespace-only hides the bubble</td>
79
+ </tr>
80
+ <tr>
81
+ <td><code>placement</code></td>
82
+ <td><code>top</code> (default) · <code>bottom</code> · <code>left</code> · <code>right</code>, each with optional <code>-start</code> · <code>-end</code></td>
83
+ <td>Side and alignment relative to the trigger</td>
84
+ </tr>
85
+ <tr>
86
+ <td><code>disabled</code></td>
87
+ <td>boolean</td>
88
+ <td>Never show the bubble; sets <code>tabindex=&quot;-1&quot;</code> on the host</td>
89
+ </tr>
90
+ <tr>
91
+ <td><code>focusable</code></td>
92
+ <td>boolean</td>
93
+ <td>Sets <code>tabindex=&quot;0&quot;</code> on the host so the tooltip opens on keyboard focus</td>
94
+ </tr>
95
+ </tbody></table>
96
+ <table>
97
+ <thead>
98
+ <tr>
99
+ <th>Slot</th>
100
+ <th>Description</th>
101
+ </tr>
102
+ </thead>
103
+ <tbody><tr>
104
+ <td><em>(default)</em></td>
105
+ <td>Trigger content</td>
106
+ </tr>
107
+ </tbody></table>
108
+
109
+ </article>
110
+ </main>
111
+ </body>
112
+ </html>
@@ -0,0 +1,89 @@
1
+ # Tooltip
2
+
3
+ **`sonic-tooltip`** shows a short `label` in a bubble when the trigger in the default slot is hovered or receives focus. With no `placement`, the bubble sits on `top`, centered. An empty `label` hides the bubble, like `disabled`.
4
+
5
+ ## Basic example
6
+
7
+ <sonic-code>
8
+ <template>
9
+ <sonic-tooltip label="Cruising at Mach 2.04">
10
+ <sonic-button variant="outline">Hover me</sonic-button>
11
+ </sonic-tooltip>
12
+ </template>
13
+ </sonic-code>
14
+
15
+ ## Placement
16
+
17
+ `top` · `bottom` · `left` · `right` set the side. Add `-start` or `-end` to align the bubble with an edge of the trigger instead of its center. The bubble is repositioned while open to stay in the viewport.
18
+
19
+ <sonic-code>
20
+ <template>
21
+ <div class="flex flex-wrap gap-3">
22
+ <sonic-tooltip placement="top" label="top"><sonic-button minWidth="9rem">top</sonic-button></sonic-tooltip>
23
+ <sonic-tooltip placement="top-start" label="top-start"><sonic-button minWidth="9rem">top-start</sonic-button></sonic-tooltip>
24
+ <sonic-tooltip placement="top-end" label="top-end"><sonic-button minWidth="9rem">top-end</sonic-button></sonic-tooltip>
25
+ <sonic-tooltip placement="bottom" label="bottom"><sonic-button minWidth="9rem">bottom</sonic-button></sonic-tooltip>
26
+ <sonic-tooltip placement="bottom-start" label="bottom-start"><sonic-button minWidth="9rem">bottom-start</sonic-button></sonic-tooltip>
27
+ <sonic-tooltip placement="bottom-end" label="bottom-end"><sonic-button minWidth="9rem">bottom-end</sonic-button></sonic-tooltip>
28
+ <sonic-tooltip placement="left" label="left"><sonic-button minWidth="9rem">left</sonic-button></sonic-tooltip>
29
+ <sonic-tooltip placement="left-start" label="left-start"><sonic-button minWidth="9rem">left-start</sonic-button></sonic-tooltip>
30
+ <sonic-tooltip placement="left-end" label="left-end"><sonic-button minWidth="9rem">left-end</sonic-button></sonic-tooltip>
31
+ <sonic-tooltip placement="right" label="right"><sonic-button minWidth="9rem">right</sonic-button></sonic-tooltip>
32
+ <sonic-tooltip placement="right-start" label="right-start"><sonic-button minWidth="9rem">right-start</sonic-button></sonic-tooltip>
33
+ <sonic-tooltip placement="right-end" label="right-end"><sonic-button minWidth="9rem">right-end</sonic-button></sonic-tooltip>
34
+ </div>
35
+ </template>
36
+ </sonic-code>
37
+
38
+ ## Multiline label
39
+
40
+ Line breaks in `label` (a real newline or `&#10;`) are kept. Each line is trimmed and the bubble wraps at `18rem`.
41
+
42
+ <sonic-code>
43
+ <template>
44
+ <sonic-tooltip label="Gate B12&#10;Boarding at 08:15">
45
+ <sonic-button variant="outline">Multiline label</sonic-button>
46
+ </sonic-tooltip>
47
+ </template>
48
+ </sonic-code>
49
+
50
+ ## Focusable
51
+
52
+ Set `focusable` when the trigger is not focusable itself (text, icon): the host gets `tabindex="0"` so keyboard users can open the tooltip. The bubble uses `popover="hint"`; without Popover API support, the label falls back to a native `title` on one line.
53
+
54
+ <sonic-code>
55
+ <template>
56
+ <sonic-tooltip
57
+ focusable
58
+ label="The Concorde made its first transatlantic crossing on September 26, 1973"
59
+ >
60
+ <sonic-icon library="iconoir" name="chat-bubble-question"></sonic-icon>
61
+ Focus or hover this text
62
+ </sonic-tooltip>
63
+ </template>
64
+ </sonic-code>
65
+
66
+ ## Disabled
67
+
68
+ `disabled` never shows the bubble and sets `tabindex="-1"` on the host.
69
+
70
+ <sonic-code>
71
+ <template>
72
+ <sonic-tooltip disabled label="Not shown">
73
+ <sonic-button>Tooltip disabled</sonic-button>
74
+ </sonic-tooltip>
75
+ </template>
76
+ </sonic-code>
77
+
78
+ ## API reference
79
+
80
+ | Attribute | Values | Description |
81
+ |----------|---------|-------------|
82
+ | `label` | string | Tooltip text; empty or whitespace-only hides the bubble |
83
+ | `placement` | `top` (default) · `bottom` · `left` · `right`, each with optional `-start` · `-end` | Side and alignment relative to the trigger |
84
+ | `disabled` | boolean | Never show the bubble; sets `tabindex="-1"` on the host |
85
+ | `focusable` | boolean | Sets `tabindex="0"` on the host so the tooltip opens on keyboard focus |
86
+
87
+ | Slot | Description |
88
+ |------|-------------|
89
+ | *(default)* | Trigger content |
@@ -0,0 +1,71 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-doc-url="https://concorde.supersoniks.org/docs/decorators/ancestor-attribute" data-doc-id="docs/decorators/ancestor-attribute">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>@ancestorAttribute — Concorde by Supersoniks</title>
7
+ <meta name="description" content="Copies the value of an attribute from the nearest element that carries it (the host itself, then its ancestors, across shadow roots) into a class property. Use it to pick up a scope such as dataProvid">
8
+ <meta name="keywords" content="Concorde, supersoniks, docs/decorators/ancestor-attribute, ancestor-attribute, @ancestorAttribute, decorator, ancestorAttribute, dataProvider, connectedCallback, , &quot;&quot;, dataprovider, { dynamic: true }, null, @state(), &quot;${dataProvider}&quot;">
9
+ <meta name="concorde-doc-id" content="docs/decorators/ancestor-attribute">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/docs/decorators/ancestor-attribute">
11
+ <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/docs/decorators/ancestor-attribute.md">
12
+ </head>
13
+ <body>
14
+ <header>
15
+ <p><a href="/docs/index.html">Concorde documentation</a> · <a href="https://concorde.supersoniks.org/docs/decorators/ancestor-attribute">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 decorator — @ancestorAttribute</strong>. Copies the value of an attribute from the nearest element that carries it (the host itself, then its ancestors, across shadow roots) into a class property. Use it to pick up a scope such as dataProvid <span>Doc ID: <code>docs/decorators/ancestor-attribute</code>. Keywords: Concorde, supersoniks, docs/decorators/ancestor-attribute, ancestor-attribute, @ancestorAttribute, decorator, ancestorAttribute, dataProvider, connectedCallback, , &quot;&quot;, dataprovider, { dynamic: true }, null, @state(), &quot;${dataProvider}&quot;. URL: <a href="https://concorde.supersoniks.org/docs/decorators/ancestor-attribute">https://concorde.supersoniks.org/docs/decorators/ancestor-attribute</a>.</span></p>
20
+ <h1 id="ancestorattribute">@ancestorAttribute</h1>
21
+ <p>Copies the value of an attribute from the nearest element that carries it (the host itself, then its ancestors, across shadow roots) into a class property. Use it to pick up a scope such as <code>dataProvider</code> without passing it down by hand, typically to feed a dynamic key of <a href="/docs/decorators/subscribe">@subscribe</a>.</p>
22
+ <h2 id="import">Import</h2>
23
+ <pre><code class="language-typescript">import { ancestorAttribute } from &quot;@supersoniks/concorde/decorators&quot;;
24
+
25
+ @ancestorAttribute(&quot;dataProvider&quot;)
26
+ dataProvider: string | null = null;
27
+ </code></pre>
28
+ <h2 id="read-once-at-connect">Read once at connect</h2>
29
+ <p>By default the value is read once, just before the component&#39;s <code>connectedCallback</code>, and never updated. The closest element with the attribute wins. If no ancestor has it, the property keeps its initial value.</p>
30
+ <pre><code>&lt;div dataProvider=&quot;flights.CN001&quot; gate=&quot;B12&quot;&gt;
31
+ &lt;docs-demo-sources for=&quot;demo-ancestor-attribute&quot;&gt;&lt;/docs-demo-sources&gt;
32
+ &lt;demo-ancestor-attribute&gt;&lt;/demo-ancestor-attribute&gt;
33
+ &lt;/div&gt;
34
+ </code></pre>
35
+ <p>An attribute present without a value (<code>&lt;div gate&gt;</code>) resolves to <code>&quot;&quot;</code>. A camelCase name also matches its lowercase form (<code>dataProvider</code> and <code>dataprovider</code>).</p>
36
+ <h2 id="follow-dom-changes">Follow DOM changes</h2>
37
+ <p>With <code>{ dynamic: true }</code>, the property stays in sync while the component is connected: when an ancestor changes the attribute, when a closer ancestor gains or loses it, and when the component is moved. When no ancestor has the attribute, the property becomes <code>null</code>. Add <code>@state()</code> so Lit re-renders on each assignment.</p>
38
+ <pre><code class="language-typescript">@ancestorAttribute(&quot;dataProvider&quot;, { dynamic: true })
39
+ @state()
40
+ dataProvider: string | null = null;
41
+ </code></pre>
42
+ <p>Change the parent or outer value, insert a closer wrapper, or remove an attribute: the child always shows the nearest one.</p>
43
+ <pre><code>&lt;docs-demo-sources for=&quot;demo-ancestor-attribute-dynamic-section&quot;&gt;&lt;/docs-demo-sources&gt;
44
+ &lt;demo-ancestor-attribute-dynamic-section&gt;&lt;/demo-ancestor-attribute-dynamic-section&gt;
45
+ </code></pre>
46
+ <p>Keys of <a href="/docs/decorators/subscribe">@subscribe</a> and <a href="/docs/decorators/bind">@bind</a> that use the property as a placeholder (<code>&quot;${dataProvider}&quot;</code>) are re-resolved on each change.</p>
47
+ <h2 id="api-reference">API reference</h2>
48
+ <table>
49
+ <thead>
50
+ <tr>
51
+ <th>Argument</th>
52
+ <th>Type</th>
53
+ <th>Description</th>
54
+ </tr>
55
+ </thead>
56
+ <tbody><tr>
57
+ <td><code>attributeName</code></td>
58
+ <td><code>string</code></td>
59
+ <td>Attribute to look up on the host, then on its ancestors</td>
60
+ </tr>
61
+ <tr>
62
+ <td><code>options.dynamic</code></td>
63
+ <td><code>boolean</code> (default <code>false</code>)</td>
64
+ <td>Keep the property in sync with attribute changes and reparenting until disconnect; assigns <code>null</code> when no ancestor has the attribute</td>
65
+ </tr>
66
+ </tbody></table>
67
+
68
+ </article>
69
+ </main>
70
+ </body>
71
+ </html>