@supersoniks/concorde 5.0.5 → 5.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (282) hide show
  1. package/.claude/launch.json +15 -0
  2. package/.claude/vite.http.config.mjs +7 -0
  3. package/.taste-skill/after/desktop-fold.jpg +0 -0
  4. package/.taste-skill/after/desktop-page-01.jpg +0 -0
  5. package/.taste-skill/after/desktop-page-02.jpg +0 -0
  6. package/.taste-skill/after/desktop-page-03.jpg +0 -0
  7. package/.taste-skill/after/mobile-fold.jpg +0 -0
  8. package/.taste-skill/after/mobile-page-01.jpg +0 -0
  9. package/.taste-skill/after/report.json +4103 -0
  10. package/.taste-skill/after/tablet-fold.jpg +0 -0
  11. package/.taste-skill/after/tablet-page-01.jpg +0 -0
  12. package/.taste-skill/after/tablet-page-02.jpg +0 -0
  13. package/.taste-skill/before/desktop-fold.jpg +0 -0
  14. package/.taste-skill/before/desktop-page-01.jpg +0 -0
  15. package/.taste-skill/before/desktop-page-02.jpg +0 -0
  16. package/.taste-skill/before/mobile-fold.jpg +0 -0
  17. package/.taste-skill/before/mobile-page-01.jpg +0 -0
  18. package/.taste-skill/before/report.json +2556 -0
  19. package/.taste-skill/before/tablet-fold.jpg +0 -0
  20. package/.taste-skill/before/tablet-page-01.jpg +0 -0
  21. package/.taste-skill/direction.json +510 -0
  22. package/.taste-skill/notes.md +84 -0
  23. package/.taste-skill/prod/desktop-fold.jpg +0 -0
  24. package/.taste-skill/prod/desktop-page-01.jpg +0 -0
  25. package/.taste-skill/prod/desktop-page-02.jpg +0 -0
  26. package/.taste-skill/prod/desktop-page-03.jpg +0 -0
  27. package/.taste-skill/prod/mobile-fold.jpg +0 -0
  28. package/.taste-skill/prod/mobile-page-01.jpg +0 -0
  29. package/.taste-skill/prod/mobile-page-02.jpg +0 -0
  30. package/.taste-skill/prod/report.json +1973 -0
  31. package/.taste-skill/prod/tablet-fold.jpg +0 -0
  32. package/.taste-skill/prod/tablet-page-01.jpg +0 -0
  33. package/.taste-skill/prod/tablet-page-02.jpg +0 -0
  34. package/.tmp-cem/custom-elements.json +13705 -0
  35. package/AUDIT.md +228 -0
  36. package/PLAN-AMELIORATION.md +220 -0
  37. package/build-infos.json +1 -1
  38. package/concorde-core.bundle.js +196 -196
  39. package/concorde-core.es.js +3854 -3572
  40. package/custom-elements-manifest.config.mjs +14 -0
  41. package/dist/concorde-core.bundle.js +196 -196
  42. package/dist/concorde-core.es.js +3854 -3572
  43. package/dist/img/archive/concorde-001-2cv.webp +0 -0
  44. package/dist/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  45. package/dist/img/archive/concorde-red-arrows-2002.webm +0 -0
  46. package/dist/img/archive/credits.json +28 -0
  47. package/docs/assets/index-Bb-_LRyY.js +12280 -0
  48. package/docs/index.html +1 -1
  49. package/index.html +27 -63
  50. package/package.json +44 -3
  51. package/public/img/archive/concorde-001-2cv.webp +0 -0
  52. package/public/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  53. package/public/img/archive/concorde-red-arrows-2002.webm +0 -0
  54. package/public/img/archive/credits.json +28 -0
  55. package/scripts/generate-sdui-catalog.mjs +250 -0
  56. package/scripts/generate-sdui-catalog.spec.ts +91 -0
  57. package/scripts/pre-build.mjs +15 -0
  58. package/src/core/components/functional/fetch/fetch.md +2 -2
  59. package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +5 -5
  60. package/src/core/components/functional/sdui/__fixtures__/descriptors.ts +251 -0
  61. package/src/core/components/functional/sdui/__snapshots__/sdui-action.spec.ts.snap +73 -0
  62. package/src/core/components/functional/sdui/__snapshots__/sdui-incremental.spec.ts.snap +50 -0
  63. package/src/core/components/functional/sdui/__snapshots__/sdui-partial.spec.ts.snap +50 -0
  64. package/src/core/components/functional/sdui/__snapshots__/sdui.regression.spec.ts.snap +461 -0
  65. package/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
  66. package/src/core/components/functional/sdui/component-catalog.json +3103 -0
  67. package/src/core/components/functional/sdui/component-catalog.spec.ts +23 -0
  68. package/src/core/components/functional/sdui/sdui-action.spec.ts +99 -0
  69. package/src/core/components/functional/sdui/sdui-dom-snapshot.ts +61 -0
  70. package/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
  71. package/src/core/components/functional/sdui/sdui-incremental.spec.ts +137 -0
  72. package/src/core/components/functional/sdui/sdui-partial.spec.ts +83 -0
  73. package/src/core/components/functional/sdui/sdui-partial.ts +19 -0
  74. package/src/core/components/functional/sdui/sdui-safe.spec.ts +188 -0
  75. package/src/core/components/functional/sdui/sdui-safe.ts +100 -0
  76. package/src/core/components/functional/sdui/sdui.md +122 -0
  77. package/src/core/components/functional/sdui/sdui.regression.spec.ts +64 -0
  78. package/src/core/components/functional/sdui/sdui.ts +442 -34
  79. package/src/core/components/functional/sdui/types.ts +49 -0
  80. package/src/core/components/ui/modal/modal.ts +14 -11
  81. package/src/docs/_getting-started/components.md +5 -0
  82. package/src/docs/_getting-started/theming.md +2 -2
  83. package/src/docs/code.ts +88 -75
  84. package/src/docs/components/docs-demo-sources.ts +16 -8
  85. package/src/docs/components/docs-lit-demo.ts +19 -37
  86. package/src/docs/docs.ts +5 -0
  87. package/src/docs/example/docs-boarding-pass-demo.ts +134 -0
  88. package/src/docs/example/docs-provider-keys.ts +12 -0
  89. package/src/docs/header/header.ts +233 -69
  90. package/src/docs/home/catalog.ts +44 -0
  91. package/src/docs/home/home.ts +513 -0
  92. package/src/docs/home/mach-stage.ts +389 -0
  93. package/src/docs/layout.ts +3 -1
  94. package/src/docs/navigation/components-index.ts +56 -0
  95. package/src/docs/navigation/navigation.ts +240 -232
  96. package/src/docs/navigation/pager.ts +67 -0
  97. package/src/docs/navigation/toc.ts +98 -0
  98. package/src/docs/search/docs-search.json +330 -20
  99. package/src/docs/search/markdown-renderer.ts +11 -3
  100. package/src/docs/shiki/index.ts +109 -0
  101. package/src/docs/tailwind/css/base/scrollbar.css +22 -0
  102. package/src/docs/tailwind/css/base/theme.css +96 -0
  103. package/src/docs/tailwind/css/base/typography.css +4 -0
  104. package/src/docs/tailwind/css/docs/boarding-pass.css +65 -0
  105. package/src/docs/tailwind/css/docs/content.css +32 -0
  106. package/src/docs/tailwind/css/docs/page.css +10 -0
  107. package/src/docs/tailwind/css/docs.css +9 -0
  108. package/src/docs/tailwind/css/home/hero.css +210 -0
  109. package/src/docs/tailwind/css/home/motion.css +84 -0
  110. package/src/docs/tailwind/css/home/sections.css +416 -0
  111. package/src/docs/tailwind/css/tailwind.css +7 -185
  112. package/src/tsconfig.json +113 -2
  113. package/src/tsconfig.tsbuildinfo +1 -1
  114. package/tailwind.config.js +8 -4
  115. package/docs/assets/index-wVZpLVYW.js +0 -12122
  116. package/docs/crawl/core/components/functional/date/date.html +0 -190
  117. package/docs/crawl/core/components/functional/fetch/fetch.html +0 -109
  118. package/docs/crawl/core/components/functional/if/if.html +0 -27
  119. package/docs/crawl/core/components/functional/jsonata/jsonata.html +0 -79
  120. package/docs/crawl/core/components/functional/list/list.html +0 -70
  121. package/docs/crawl/core/components/functional/mix/mix.html +0 -45
  122. package/docs/crawl/core/components/functional/queue/queue.html +0 -96
  123. package/docs/crawl/core/components/functional/router/router.html +0 -106
  124. package/docs/crawl/core/components/functional/sdui/sdui.html +0 -269
  125. package/docs/crawl/core/components/functional/states/states.html +0 -66
  126. package/docs/crawl/core/components/functional/submit/submit.html +0 -160
  127. package/docs/crawl/core/components/functional/subscriber/subscriber.html +0 -67
  128. package/docs/crawl/core/components/functional/value/value.html +0 -51
  129. package/docs/crawl/core/components/ui/alert/alert.html +0 -211
  130. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +0 -131
  131. package/docs/crawl/core/components/ui/badge/badge.html +0 -197
  132. package/docs/crawl/core/components/ui/button/button.html +0 -150
  133. package/docs/crawl/core/components/ui/captcha/captcha.html +0 -112
  134. package/docs/crawl/core/components/ui/card/card.html +0 -253
  135. package/docs/crawl/core/components/ui/divider/divider.html +0 -144
  136. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +0 -73
  137. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +0 -266
  138. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +0 -122
  139. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +0 -121
  140. package/docs/crawl/core/components/ui/form/input/input.html +0 -109
  141. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +0 -38
  142. package/docs/crawl/core/components/ui/form/radio/radio.html +0 -56
  143. package/docs/crawl/core/components/ui/form/select/select.html +0 -73
  144. package/docs/crawl/core/components/ui/form/switch/switch.html +0 -56
  145. package/docs/crawl/core/components/ui/form/textarea/textarea.html +0 -59
  146. package/docs/crawl/core/components/ui/group/group.html +0 -104
  147. package/docs/crawl/core/components/ui/icon/icon.html +0 -222
  148. package/docs/crawl/core/components/ui/image/image.html +0 -298
  149. package/docs/crawl/core/components/ui/link/link.html +0 -100
  150. package/docs/crawl/core/components/ui/loader/loader.html +0 -124
  151. package/docs/crawl/core/components/ui/menu/menu.html +0 -394
  152. package/docs/crawl/core/components/ui/modal/modal.html +0 -342
  153. package/docs/crawl/core/components/ui/pop/pop.html +0 -296
  154. package/docs/crawl/core/components/ui/progress/progress.html +0 -131
  155. package/docs/crawl/core/components/ui/table/table.html +0 -545
  156. package/docs/crawl/core/components/ui/theme/theme.html +0 -131
  157. package/docs/crawl/core/components/ui/toast/toast.html +0 -233
  158. package/docs/crawl/core/components/ui/tooltip/tooltip.html +0 -140
  159. package/docs/crawl/docs/_core-concept/dataFlow.html +0 -177
  160. package/docs/crawl/docs/_core-concept/overview.html +0 -66
  161. package/docs/crawl/docs/_core-concept/subscriber.html +0 -75
  162. package/docs/crawl/docs/_decorators/ancestor-attribute.html +0 -117
  163. package/docs/crawl/docs/_decorators/auto-subscribe.html +0 -202
  164. package/docs/crawl/docs/_decorators/bind.html +0 -141
  165. package/docs/crawl/docs/_decorators/get.html +0 -149
  166. package/docs/crawl/docs/_decorators/handle.html +0 -165
  167. package/docs/crawl/docs/_decorators/on-assign.html +0 -355
  168. package/docs/crawl/docs/_decorators/patch.html +0 -78
  169. package/docs/crawl/docs/_decorators/post.html +0 -139
  170. package/docs/crawl/docs/_decorators/publish.html +0 -61
  171. package/docs/crawl/docs/_decorators/put.html +0 -78
  172. package/docs/crawl/docs/_decorators/subscribe.html +0 -109
  173. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +0 -137
  174. package/docs/crawl/docs/_directives/sub.html +0 -93
  175. package/docs/crawl/docs/_getting-started/ai-agents.html +0 -173
  176. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +0 -100
  177. package/docs/crawl/docs/_getting-started/concorde-outside.html +0 -58
  178. package/docs/crawl/docs/_getting-started/create-a-component.html +0 -111
  179. package/docs/crawl/docs/_getting-started/my-first-component.html +0 -189
  180. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +0 -110
  181. package/docs/crawl/docs/_getting-started/pubsub.html +0 -62
  182. package/docs/crawl/docs/_getting-started/start.html +0 -76
  183. package/docs/crawl/docs/_getting-started/theming.html +0 -333
  184. package/docs/crawl/docs/_misc/api-configuration.html +0 -149
  185. package/docs/crawl/docs/_misc/dataProviderKey.html +0 -135
  186. package/docs/crawl/docs/_misc/docs-mock-api.html +0 -158
  187. package/docs/crawl/docs/_misc/dynamic-path.html +0 -180
  188. package/docs/crawl/docs/_misc/endpoint.html +0 -50
  189. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +0 -138
  190. package/docs/crawl/docs/_misc/html-integration.html +0 -48
  191. package/docs/crawl/hubs/decorators.html +0 -547
  192. package/docs/crawl/hubs/form-components.html +0 -381
  193. package/docs/crawl/hubs/remote-data.html +0 -452
  194. package/docs/crawl/index.html +0 -102
  195. package/docs/llms-full.txt +0 -7008
  196. package/docs/llms.txt +0 -97
  197. package/docs/sitemap.xml +0 -240
  198. package/docs/src/core/components/functional/date/date.md +0 -290
  199. package/docs/src/core/components/functional/fetch/fetch.md +0 -125
  200. package/docs/src/core/components/functional/if/if.md +0 -9
  201. package/docs/src/core/components/functional/jsonata/jsonata.md +0 -56
  202. package/docs/src/core/components/functional/list/list.md +0 -65
  203. package/docs/src/core/components/functional/mix/mix.md +0 -41
  204. package/docs/src/core/components/functional/queue/queue.md +0 -72
  205. package/docs/src/core/components/functional/router/router.md +0 -94
  206. package/docs/src/core/components/functional/sdui/default-library.json +0 -108
  207. package/docs/src/core/components/functional/sdui/example.json +0 -99
  208. package/docs/src/core/components/functional/sdui/sdui.md +0 -356
  209. package/docs/src/core/components/functional/states/states.md +0 -87
  210. package/docs/src/core/components/functional/submit/submit.md +0 -114
  211. package/docs/src/core/components/functional/subscriber/subscriber.md +0 -91
  212. package/docs/src/core/components/functional/value/value.md +0 -35
  213. package/docs/src/core/components/ui/alert/alert.md +0 -196
  214. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -85
  215. package/docs/src/core/components/ui/badge/badge.md +0 -188
  216. package/docs/src/core/components/ui/button/button.md +0 -183
  217. package/docs/src/core/components/ui/captcha/captcha.md +0 -71
  218. package/docs/src/core/components/ui/card/card.md +0 -215
  219. package/docs/src/core/components/ui/divider/divider.md +0 -129
  220. package/docs/src/core/components/ui/form/checkbox/checkbox.md +0 -77
  221. package/docs/src/core/components/ui/form/fieldset/fieldset.md +0 -205
  222. package/docs/src/core/components/ui/form/form-actions/form-actions.md +0 -100
  223. package/docs/src/core/components/ui/form/form-layout/form-layout.md +0 -119
  224. package/docs/src/core/components/ui/form/input/input.md +0 -142
  225. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
  226. package/docs/src/core/components/ui/form/radio/radio.md +0 -57
  227. package/docs/src/core/components/ui/form/select/select.md +0 -71
  228. package/docs/src/core/components/ui/form/switch/switch.md +0 -57
  229. package/docs/src/core/components/ui/form/textarea/textarea.md +0 -65
  230. package/docs/src/core/components/ui/group/group.md +0 -75
  231. package/docs/src/core/components/ui/icon/icon.md +0 -214
  232. package/docs/src/core/components/ui/icon/icons.json +0 -1
  233. package/docs/src/core/components/ui/image/image.md +0 -233
  234. package/docs/src/core/components/ui/link/link.md +0 -81
  235. package/docs/src/core/components/ui/loader/loader.md +0 -112
  236. package/docs/src/core/components/ui/menu/menu.md +0 -370
  237. package/docs/src/core/components/ui/modal/modal.md +0 -235
  238. package/docs/src/core/components/ui/pop/pop.md +0 -294
  239. package/docs/src/core/components/ui/progress/progress.md +0 -109
  240. package/docs/src/core/components/ui/table/table.md +0 -431
  241. package/docs/src/core/components/ui/theme/theme.md +0 -122
  242. package/docs/src/core/components/ui/toast/toast.md +0 -216
  243. package/docs/src/core/components/ui/tooltip/tooltip.md +0 -124
  244. package/docs/src/docs/_core-concept/dataFlow.md +0 -88
  245. package/docs/src/docs/_core-concept/overview.md +0 -57
  246. package/docs/src/docs/_core-concept/subscriber.md +0 -75
  247. package/docs/src/docs/_decorators/ancestor-attribute.md +0 -128
  248. package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
  249. package/docs/src/docs/_decorators/bind.md +0 -167
  250. package/docs/src/docs/_decorators/get.md +0 -162
  251. package/docs/src/docs/_decorators/handle.md +0 -175
  252. package/docs/src/docs/_decorators/on-assign.md +0 -390
  253. package/docs/src/docs/_decorators/patch.md +0 -70
  254. package/docs/src/docs/_decorators/post.md +0 -146
  255. package/docs/src/docs/_decorators/publish.md +0 -55
  256. package/docs/src/docs/_decorators/put.md +0 -70
  257. package/docs/src/docs/_decorators/subscribe.md +0 -100
  258. package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
  259. package/docs/src/docs/_directives/sub.md +0 -91
  260. package/docs/src/docs/_getting-started/ai-agents.md +0 -76
  261. package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
  262. package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
  263. package/docs/src/docs/_getting-started/create-a-component.md +0 -139
  264. package/docs/src/docs/_getting-started/my-first-component.md +0 -236
  265. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
  266. package/docs/src/docs/_getting-started/pubsub.md +0 -37
  267. package/docs/src/docs/_getting-started/start.md +0 -47
  268. package/docs/src/docs/_getting-started/theming.md +0 -253
  269. package/docs/src/docs/_misc/api-configuration.md +0 -81
  270. package/docs/src/docs/_misc/dataProviderKey.md +0 -168
  271. package/docs/src/docs/_misc/docs-mock-api.md +0 -63
  272. package/docs/src/docs/_misc/dynamic-path.md +0 -71
  273. package/docs/src/docs/_misc/endpoint.md +0 -45
  274. package/docs/src/docs/_misc/formelement-subscriber-removal.md +0 -115
  275. package/docs/src/docs/_misc/html-integration.md +0 -15
  276. package/docs/src/docs/search/docs-search.json +0 -12242
  277. package/docs/src/tag-list.json +0 -1
  278. package/docs/src/tsconfig-model.json +0 -23
  279. package/docs/src/tsconfig.json +0 -1242
  280. package/src/docs/prism/index.ts +0 -6
  281. package/src/docs/prism/prism.css +0 -158
  282. package/src/docs/prism/prism.js +0 -1022
package/docs/crawl/core/components/ui/theme/theme.html DELETED
@@ -1,131 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/theme/theme.html" data-doc-id="core/components/ui/theme/theme">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Theme — Concorde</title>
7
- <meta name="description" content="sonic-theme wraps a Concorde UI: it registers --sc-* design tokens and provides the default slot for your app. With no theme attribute (or theme=&quot;custom&quot;), only shared primitives and your overrides ap">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/theme/theme, theme, Theme, UI component, sonic-theme, web component, --sc-*, theme=&quot;custom&quot;, light, dark, auto, color, font, bg-base">
9
- <meta name="concorde-doc-id" content="core/components/ui/theme/theme">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/theme/theme.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/theme/theme.md/theme" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Theme</strong>. sonic-theme wraps a Concorde UI: it registers --sc-* design tokens and provides the default slot for your app. With no theme attribute (or theme=&quot;custom&quot;), only shared primitives and your overrides ap <span>Doc ID: <code>core/components/ui/theme/theme</code>. Keywords: Concorde, supersoniks, core/components/ui/theme/theme, theme, Theme, UI component, sonic-theme, web component, --sc-*, theme=&quot;custom&quot;, light, dark, auto, color, font, bg-base. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/theme/theme.html">https://concorde.supersoniks.org/crawl/core/components/ui/theme/theme.html</a>.</span></p>
19
- <h1 id="theme">Theme</h1>
20
- <p><strong><code>sonic-theme</code></strong> wraps a Concorde UI: it registers <strong><code>--sc-*</code></strong> design tokens and provides the default slot for your app. With no <strong><code>theme</code></strong> attribute (or <strong><code>theme=&quot;custom&quot;</code></strong>), only shared primitives and your overrides apply—built-in <strong><code>light</code></strong> / <strong><code>dark</code></strong> / <strong><code>auto</code></strong> palettes are opt-in. Set <strong><code>color</code></strong> and <strong><code>font</code></strong> when the host should carry base text and typography; add Tailwind <strong><code>bg-base</code></strong> and <strong><code>block</code></strong> (or <strong><code>min-h-screen</code></strong>) on the tag for a full surface fill. <strong>Popovers</strong>, <strong>modals</strong>, and <strong>toasts</strong> mount under the nearest connected theme (see <a href="#pop-container">Pop container</a>). Import <strong><code>@supersoniks/concorde/theme</code></strong> once at the app entry. For the full public token list and brand overrides, see <a href="../../../../docs/_getting-started/theming.html#theming">Customization</a>.</p>
21
- <h2 id="basic-example">Basic example</h2>
22
- <p>Wrap interactive components so tokens and overlays resolve from one root.</p>
23
- <pre><code>&lt;sonic-theme color font class=&quot;block bg-base p-6 rounded-lg&quot;&gt;
24
- &lt;sonic-button type=&quot;primary&quot;&gt;Save changes&lt;/sonic-button&gt;
25
- &lt;/sonic-theme&gt;
26
- </code></pre>
27
- <h2 id="theme-mode">Theme mode</h2>
28
- <p><strong>Default:</strong> omit <strong><code>theme</code></strong> or set <strong><code>theme=&quot;custom&quot;</code></strong>. The host loads core tokens (<code>--sc-rounded</code>, shadows, form defaults, …) and any <strong><code>--sc-*</code></strong> you set; it does <strong>not</strong> apply the built-in light or dark palette.</p>
29
- <p>Set <strong><code>theme</code></strong> to <strong><code>light</code></strong> or <strong><code>dark</code></strong> for Concorde’s preset palettes. Set <strong><code>theme=&quot;auto&quot;</code></strong> to follow <strong><code>prefers-color-scheme</code></strong> (light palette until the OS prefers dark).</p>
30
- <pre><code>&lt;div class=&quot;grid gap-4 md:grid-cols-2&quot;&gt;
31
- &lt;sonic-theme theme=&quot;light&quot; color font class=&quot;block bg-base p-4 rounded-md border border-neutral-200&quot;&gt;
32
- &lt;p class=&quot;text-sm mb-3 opacity-80&quot;&gt;theme=&quot;light&quot;&lt;/p&gt;
33
- &lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
34
- &lt;sonic-badge type=&quot;primary&quot;&gt;Primary&lt;/sonic-badge&gt;
35
- &lt;sonic-badge type=&quot;success&quot;&gt;Success&lt;/sonic-badge&gt;
36
- &lt;sonic-badge type=&quot;danger&quot;&gt;Danger&lt;/sonic-badge&gt;
37
- &lt;/div&gt;
38
- &lt;/sonic-theme&gt;
39
- &lt;sonic-theme theme=&quot;dark&quot; color font class=&quot;block bg-base p-4 rounded-md&quot;&gt;
40
- &lt;p class=&quot;text-sm mb-3 opacity-80&quot;&gt;theme=&quot;dark&quot;&lt;/p&gt;
41
- &lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
42
- &lt;sonic-badge type=&quot;primary&quot;&gt;Primary&lt;/sonic-badge&gt;
43
- &lt;sonic-badge type=&quot;success&quot;&gt;Success&lt;/sonic-badge&gt;
44
- &lt;sonic-badge type=&quot;danger&quot;&gt;Danger&lt;/sonic-badge&gt;
45
- &lt;/div&gt;
46
- &lt;/sonic-theme&gt;
47
- &lt;/div&gt;
48
- </code></pre>
49
- <h2 id="presentation">Presentation</h2>
50
- <p><strong><code>color</code></strong> sets text from <strong><code>--sc-base-content</code></strong>. <strong><code>font</code></strong> applies <strong><code>--sc-font-family-base</code></strong>, <strong><code>--sc-font-weight-base</code></strong>, and <strong><code>--sc-font-style-base</code></strong>. For the page or shell background, use <strong><code>bg-base</code></strong> on <strong><code>sonic-theme</code></strong> (maps to <strong><code>--sc-base</code></strong> in Tailwind) with <strong><code>block</code></strong> so the host paints the surface. Components keep their own fallbacks when <strong><code>color</code></strong> / <strong><code>font</code></strong> are omitted.</p>
51
- <pre><code>&lt;sonic-theme theme=&quot;light&quot; color font class=&quot;block bg-base p-6 min-h-[8rem] rounded-lg&quot;&gt;
52
- &lt;p&gt;Body copy inherits base content color and font from the theme host.&lt;/p&gt;
53
- &lt;/sonic-theme&gt;
54
- </code></pre>
55
- <h2 id="custom-tokens">Custom tokens</h2>
56
- <p>Override <strong>primitives</strong> on <strong><code>sonic-theme</code></strong> (or <strong><code>:root</code></strong> / a project stylesheet). Derived radii, shadows, and control rounding are computed from tokens such as <strong><code>--sc-rounded</code></strong>—avoid copying long lists of internal variables unless you have a specific need.</p>
57
- <pre><code>&lt;sonic-theme
58
- theme=&quot;custom&quot;
59
- color
60
- font
61
- class=&quot;block bg-base p-6 rounded-lg&quot;
62
- style=&quot;--sc-primary: #353429; --sc-rounded: 0.25rem;&quot;
63
- &gt;
64
- &lt;sonic-button type=&quot;primary&quot;&gt;Brand primary&lt;/sonic-button&gt;
65
- &lt;/sonic-theme&gt;
66
- </code></pre>
67
- <h2 id="pop-container">Pop container</h2>
68
- <p><strong><code>Theme.getPopContainer()</code></strong> returns the last connected <strong><code>sonic-theme</code></strong>, or <strong><code>document.body</code></strong> if none is connected. When a theme disconnects, the previous connected instance is adopted. Imperative <strong><code>Modal.create()</code></strong> and declarative <strong><code>sonic-modal</code></strong> use the same container.</p>
69
- <pre><code>&lt;sonic-theme theme=&quot;light&quot; color font class=&quot;block bg-base p-4 rounded-lg&quot;&gt;
70
- &lt;sonic-button onclick=&quot;document.getElementById(&#39;themePopModal&#39;).show()&quot;&gt;
71
- Open modal
72
- &lt;/sonic-button&gt;
73
- &lt;sonic-modal id=&quot;themePopModal&quot;&gt;
74
- &lt;sonic-modal-title&gt;Mounted on theme&lt;/sonic-modal-title&gt;
75
- &lt;sonic-modal-content&gt;
76
- This dialog is appended under the nearest sonic-theme pop container.
77
- &lt;/sonic-modal-content&gt;
78
- &lt;sonic-modal-actions&gt;
79
- &lt;sonic-button hideModal&gt;Close&lt;/sonic-button&gt;
80
- &lt;/sonic-modal-actions&gt;
81
- &lt;/sonic-modal&gt;
82
- &lt;/sonic-theme&gt;
83
- </code></pre>
84
- <h2 id="embedded-iframes">Embedded iframes</h2>
85
- <p>On connect, the theme publishes resolved <strong><code>--sc-*</code></strong> values and linked font stylesheet URLs (Google Fonts / Adobe Fonts) to the <strong><code>sonic-theme</code></strong> data channel and **<code>postMessage</code>**s them to same-page iframes. Iframes can request a refresh by posting <strong><code>{ type: &quot;GetSonicTheme&quot; }</code></strong>.</p>
86
- <pre><code class="language-javascript">// Inside the iframe — ask the parent theme to rebroadcast tokens
87
- window.parent.postMessage({ type: &quot;GetSonicTheme&quot; }, &quot;*&quot;);
88
- </code></pre>
89
- <h2 id="api-reference">API reference</h2>
90
- <table>
91
- <thead>
92
- <tr>
93
- <th>Attribute</th>
94
- <th>Values</th>
95
- <th>Description</th>
96
- </tr>
97
- </thead>
98
- <tbody><tr>
99
- <td><code>theme</code></td>
100
- <td>omitted · <code>custom</code> (default) · <code>light</code> · <code>dark</code> · <code>auto</code></td>
101
- <td>Omitted or <code>custom</code>: core tokens and your <code>--sc-*</code> only. <code>light</code> / <code>dark</code>: fixed presets. <code>auto</code>: presets follow <code>prefers-color-scheme</code></td>
102
- </tr>
103
- <tr>
104
- <td><code>color</code></td>
105
- <td>boolean</td>
106
- <td>Host text color uses <code>--sc-base-content</code></td>
107
- </tr>
108
- <tr>
109
- <td><code>font</code></td>
110
- <td>boolean</td>
111
- <td>Host font uses <code>--sc-font-family-base</code> and related base weight/style tokens</td>
112
- </tr>
113
- </tbody></table>
114
- <table>
115
- <thead>
116
- <tr>
117
- <th>Slot</th>
118
- <th>Description</th>
119
- </tr>
120
- </thead>
121
- <tbody><tr>
122
- <td><em>(default)</em></td>
123
- <td>Application markup and Concorde components</td>
124
- </tr>
125
- </tbody></table>
126
- <p>Surface background: Tailwind <strong><code>bg-base</code></strong> on <strong><code>sonic-theme</code></strong> (requires Concorde Tailwind color <strong><code>base</code></strong> → <strong><code>--sc-base</code></strong>).</p>
127
-
128
- </article>
129
- </main>
130
- </body>
131
- </html>
package/docs/crawl/core/components/ui/toast/toast.html DELETED
@@ -1,233 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/toast/toast.html" 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</title>
7
- <meta name="description" content="Toasts surface short-lived feedback in a fixed stack (bottom-right in the main window). Queue messages with SonicToast.add() on the global SonicToast class—the host sonic-toast is created automaticall">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/toast/toast, toast, Toast, UI component, sonic-toast, web component, SonicToast.add(), SonicToast, label, preserve, text, status">
9
- <meta name="concorde-doc-id" content="core/components/ui/toast/toast">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/toast/toast.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/toast/toast.md/toast" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Toast</strong>. Toasts surface short-lived feedback in a fixed stack (bottom-right in the main window). Queue messages with SonicToast.add() on the global SonicToast class—the host sonic-toast is created automaticall <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(), SonicToast, label, preserve, text, status. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/toast/toast.html">https://concorde.supersoniks.org/crawl/core/components/ui/toast/toast.html</a>.</span></p>
19
- <h1 id="toast">Toast</h1>
20
- <p>Toasts surface <strong>short-lived feedback</strong> in a fixed stack (bottom-right in the main window). Queue messages with <strong><code>SonicToast.add()</code></strong> on the global <strong><code>SonicToast</code></strong> class—the host <strong><code>sonic-toast</code></strong> is created automatically. Prefer <strong><code>label</code></strong> for a heading; use <strong><code>preserve</code></strong> or interactive <strong><code>text</code></strong> when the user must read or act before dismiss.</p>
21
- <h2 id="basic-example">Basic example</h2>
22
- <p>Click the button to show a toast.</p>
23
- <pre><code>&lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Simple notification&#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> drives color, icon, and live-region behavior. Omit <strong><code>status</code></strong> or pass an empty string for a neutral toast.</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;, status: &#39;&#39; })&quot;&gt;
31
- Default
32
- &lt;/sonic-button&gt;
33
- &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Operation succeeded&#39;, status: &#39;success&#39; })&quot;&gt;
34
- Success
35
- &lt;/sonic-button&gt;
36
- &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Something went wrong&#39;, status: &#39;error&#39; })&quot;&gt;
37
- Error
38
- &lt;/sonic-button&gt;
39
- &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Check this detail&#39;, status: &#39;warning&#39; })&quot;&gt;
40
- Warning
41
- &lt;/sonic-button&gt;
42
- &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Helpful context&#39;, status: &#39;info&#39; })&quot;&gt;
43
- Info
44
- &lt;/sonic-button&gt;
45
- &lt;/div&gt;
46
- </code></pre>
47
- <h2 id="label">Label</h2>
48
- <p>Set <strong><code>label</code></strong> for a bold title above <strong><code>text</code></strong>. <strong><code>title</code></strong> still works but is deprecated—use <strong><code>label</code></strong> in new code.</p>
49
- <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
50
- &lt;sonic-button
51
- onclick=&quot;SonicToast.add({ label: &#39;Success&#39;, text: &#39;Your request was processed.&#39;, status: &#39;success&#39; })&quot;
52
- &gt;
53
- Toast with label
54
- &lt;/sonic-button&gt;
55
- &lt;sonic-button
56
- onclick=&quot;SonicToast.add({ label: &#39;Error&#39;, text: &#39;Processing failed. Try again.&#39;, status: &#39;error&#39; })&quot;
57
- &gt;
58
- Error with label
59
- &lt;/sonic-button&gt;
60
- &lt;/div&gt;
61
- </code></pre>
62
- <h2 id="html-in-text">HTML in text</h2>
63
- <p><strong><code>text</code></strong> (and <strong><code>label</code></strong>) can include HTML strings. Links and controls in <strong><code>text</code></strong> automatically enable <strong><code>preserve</code></strong> so the toast does not auto-hide while the user interacts.</p>
64
- <pre><code>&lt;sonic-button
65
- 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;
66
- &gt;
67
- Toast with HTML
68
- &lt;/sonic-button&gt;
69
- </code></pre>
70
- <h2 id="preserve">Preserve</h2>
71
- <p>Without <strong><code>preserve</code></strong>, toasts auto-hide after about six seconds (timer pauses on hover or focus). Set <strong><code>preserve</code></strong> to keep the toast until the user closes it.</p>
72
- <pre><code>&lt;sonic-button
73
- onclick=&quot;SonicToast.add({ text: &#39;This toast stays until you dismiss it&#39;, status: &#39;info&#39;, preserve: true })&quot;
74
- &gt;
75
- Persistent toast
76
- &lt;/sonic-button&gt;
77
- </code></pre>
78
- <h2 id="dismiss-forever">Dismiss forever</h2>
79
- <p>With <strong><code>dismissForever</code></strong> and a stable <strong><code>id</code></strong>, closing the toast stores dismissal in <strong><code>localStorage</code></strong>—<strong><code>SonicToast.add</code></strong> skips it on later visits. Duplicate payloads (same fields, ignoring <strong><code>id</code></strong>) are not queued twice.</p>
80
- <pre><code>&lt;sonic-button
81
- onclick=&quot;SonicToast.add({ id: &#39;unique-toast-id&#39;, text: &#39;Dismiss forever hides this across reloads&#39;, status: &#39;info&#39;, dismissForever: true })&quot;
82
- &gt;
83
- Dismiss forever
84
- &lt;/sonic-button&gt;
85
- </code></pre>
86
- <h2 id="ghost">Ghost</h2>
87
- <p><strong><code>ghost</code></strong> renders a semi-transparent, non-interactive toast—useful for loading or background states. <strong><code>SonicToast.removeAll</code></strong> leaves ghost toasts in place.</p>
88
- <pre><code>&lt;sonic-button
89
- onclick=&quot;SonicToast.add({ text: &#39;Ghost toast (non-interactive)&#39;, status: &#39;info&#39;, ghost: true })&quot;
90
- &gt;
91
- Ghost toast
92
- &lt;/sonic-button&gt;
93
- </code></pre>
94
- <h2 id="dismissal">Dismissal</h2>
95
- <p>Use static helpers to clear the stack from app logic (for example after navigation).</p>
96
- <h3 id="remove-all">Remove all</h3>
97
- <p>Removes every toast except <strong><code>ghost</code></strong> items.</p>
98
- <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
99
- &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Toast 1&#39;, status: &#39;info&#39; })&quot;&gt;Add toast 1&lt;/sonic-button&gt;
100
- &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Toast 2&#39;, status: &#39;success&#39; })&quot;&gt;Add toast 2&lt;/sonic-button&gt;
101
- &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Toast 3&#39;, status: &#39;warning&#39; })&quot;&gt;Add toast 3&lt;/sonic-button&gt;
102
- &lt;sonic-button onclick=&quot;SonicToast.removeAll()&quot;&gt;Remove all&lt;/sonic-button&gt;
103
- &lt;/div&gt;
104
- </code></pre>
105
- <h3 id="remove-by-status">Remove by status</h3>
106
- <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
107
- &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Success toast&#39;, status: &#39;success&#39; })&quot;&gt;Success&lt;/sonic-button&gt;
108
- &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Error toast&#39;, status: &#39;error&#39; })&quot;&gt;Error&lt;/sonic-button&gt;
109
- &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Warning toast&#39;, status: &#39;warning&#39; })&quot;&gt;Warning&lt;/sonic-button&gt;
110
- &lt;sonic-button onclick=&quot;SonicToast.removeItemsByStatus(&#39;success&#39;)&quot;&gt;Remove success&lt;/sonic-button&gt;
111
- &lt;sonic-button onclick=&quot;SonicToast.removeItemsByStatus(&#39;error&#39;)&quot;&gt;Remove error&lt;/sonic-button&gt;
112
- &lt;/div&gt;
113
- </code></pre>
114
- <h3 id="remove-temporary-items">Remove temporary items</h3>
115
- <p>Removes toasts that are not <strong><code>preserve</code></strong>.</p>
116
- <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
117
- &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Temporary toast&#39;, status: &#39;info&#39; })&quot;&gt;Temporary&lt;/sonic-button&gt;
118
- &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Persistent toast&#39;, status: &#39;success&#39;, preserve: true })&quot;&gt;
119
- Persistent
120
- &lt;/sonic-button&gt;
121
- &lt;sonic-button onclick=&quot;SonicToast.removeTemporaryItems()&quot;&gt;Remove temporary&lt;/sonic-button&gt;
122
- &lt;/div&gt;
123
- </code></pre>
124
- <h2 id="combined-options">Combined options</h2>
125
- <pre><code>&lt;sonic-button
126
- onclick=&quot;SonicToast.add({
127
- id: &#39;welcome-toast&#39;,
128
- label: &#39;Welcome&#39;,
129
- text: &#39;Welcome to the platform. Explore the docs to get started.&#39;,
130
- status: &#39;success&#39;,
131
- dismissForever: true
132
- })&quot;
133
- &gt;
134
- Full example
135
- &lt;/sonic-button&gt;
136
- </code></pre>
137
- <h2 id="accessibility">Accessibility</h2>
138
- <p>Each toast uses <strong><code>role=&quot;alert&quot;</code></strong> for <strong><code>error</code></strong> and <strong><code>role=&quot;status&quot;</code></strong> otherwise (with <strong><code>aria-live=&quot;polite&quot;</code></strong> when applicable). Status icons are decorative (<strong><code>aria-hidden</code></strong>). The close control has an i18n <strong><code>aria-label</code></strong>. When there is no <strong><code>label</code></strong>, a truncated string <strong><code>aria-label</code></strong> may be derived from plain <strong><code>text</code></strong>.</p>
139
- <h2 id="api-reference">API reference</h2>
140
- <p>Options passed to <strong><code>SonicToast.add(conf)</code></strong>:</p>
141
- <table>
142
- <thead>
143
- <tr>
144
- <th>Option</th>
145
- <th>Values</th>
146
- <th>Description</th>
147
- </tr>
148
- </thead>
149
- <tbody><tr>
150
- <td><code>text</code></td>
151
- <td>string · Lit template</td>
152
- <td>Main body; HTML strings are supported</td>
153
- </tr>
154
- <tr>
155
- <td><code>label</code></td>
156
- <td>string · Lit template</td>
157
- <td>Optional heading above <strong><code>text</code></strong></td>
158
- </tr>
159
- <tr>
160
- <td><code>title</code></td>
161
- <td>string · Lit template</td>
162
- <td>Deprecated alias for <strong><code>label</code></strong></td>
163
- </tr>
164
- <tr>
165
- <td><code>status</code></td>
166
- <td><code>success</code> · <code>error</code> · <code>warning</code> · <code>info</code> · `` (empty)</td>
167
- <td>Semantic styling and live region behavior</td>
168
- </tr>
169
- <tr>
170
- <td><code>id</code></td>
171
- <td>string · number</td>
172
- <td>Stable id for deduplication and <strong><code>dismissForever</code></strong> (defaults to timestamp)</td>
173
- </tr>
174
- <tr>
175
- <td><code>preserve</code></td>
176
- <td>boolean</td>
177
- <td>Skip auto-hide; forced when <strong><code>text</code></strong> contains interactive markup</td>
178
- </tr>
179
- <tr>
180
- <td><code>ghost</code></td>
181
- <td>boolean</td>
182
- <td>Semi-transparent and non-interactive; kept by <strong><code>removeAll</code></strong></td>
183
- </tr>
184
- <tr>
185
- <td><code>dismissForever</code></td>
186
- <td>boolean</td>
187
- <td>Persist dismissal in <strong><code>localStorage</code></strong> when closed (requires stable <strong><code>id</code></strong>)</td>
188
- </tr>
189
- <tr>
190
- <td><code>styleSheet</code></td>
191
- <td>modal style input</td>
192
- <td>Extra adopted styles on the toast item shadow root</td>
193
- </tr>
194
- <tr>
195
- <td><code>useSlot</code></td>
196
- <td>boolean</td>
197
- <td>Legacy: project <strong><code>text</code></strong> into the light DOM slot</td>
198
- </tr>
199
- </tbody></table>
200
- <table>
201
- <thead>
202
- <tr>
203
- <th>Method</th>
204
- <th>Description</th>
205
- </tr>
206
- </thead>
207
- <tbody><tr>
208
- <td><code>SonicToast.add(conf)</code></td>
209
- <td>Append a toast; returns the config or <strong><code>null</code></strong> if skipped (dismissed forever or duplicate)</td>
210
- </tr>
211
- <tr>
212
- <td><code>SonicToast.removeAll()</code></td>
213
- <td>Remove all non-<strong><code>ghost</code></strong> toasts</td>
214
- </tr>
215
- <tr>
216
- <td><code>SonicToast.removeItemsByStatus(status)</code></td>
217
- <td>Remove toasts matching <strong><code>status</code></strong></td>
218
- </tr>
219
- <tr>
220
- <td><code>SonicToast.removeItemById(id)</code></td>
221
- <td>Remove a single toast by <strong><code>id</code></strong></td>
222
- </tr>
223
- <tr>
224
- <td><code>SonicToast.removeTemporaryItems()</code></td>
225
- <td>Remove toasts without <strong><code>preserve</code></strong></td>
226
- </tr>
227
- </tbody></table>
228
- <p><strong><code>sonic-toast</code></strong> is mounted automatically; <strong><code>sonic-toast-item</code></strong> is internal. In iframes, toasts can delegate to the parent window via <strong><code>postMessage</code></strong>.</p>
229
-
230
- </article>
231
- </main>
232
- </body>
233
- </html>
package/docs/crawl/core/components/ui/tooltip/tooltip.html DELETED
@@ -1,140 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/tooltip/tooltip.html" 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</title>
7
- <meta name="description" content="Tooltip shows a short label on hover (and on focus when the trigger can receive focus). Wrap the trigger in the default slot—buttons, icons, or plain text. Default placement is top (center-aligned). A">
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, -start">
9
- <meta name="concorde-doc-id" content="core/components/ui/tooltip/tooltip">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/tooltip/tooltip.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/tooltip/tooltip.md/tooltip" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Tooltip</strong>. Tooltip shows a short label on hover (and on focus when the trigger can receive focus). Wrap the trigger in the default slot—buttons, icons, or plain text. Default placement is top (center-aligned). A <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, -start. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/tooltip/tooltip.html">https://concorde.supersoniks.org/crawl/core/components/ui/tooltip/tooltip.html</a>.</span></p>
19
- <h1 id="tooltip">Tooltip</h1>
20
- <p>Tooltip shows a short <strong><code>label</code></strong> on hover (and on focus when the trigger can receive focus). Wrap the trigger in the default slot—buttons, icons, or plain text. Default <strong><code>placement</code></strong> is <strong><code>top</code></strong> (center-aligned). An empty <strong><code>label</code></strong> hides the bubble the same way as <strong><code>disabled</code></strong>.</p>
21
- <h2 id="basic-example">Basic example</h2>
22
- <pre><code>&lt;sonic-tooltip label=&quot;Additional context on hover&quot;&gt;
23
- &lt;sonic-button variant=&quot;outline&quot;&gt;Hover me&lt;/sonic-button&gt;
24
- &lt;/sonic-tooltip&gt;
25
- </code></pre>
26
- <h2 id="placement">Placement</h2>
27
- <p>Use <strong><code>top</code></strong> · <strong><code>bottom</code></strong> · <strong><code>left</code></strong> · <strong><code>right</code></strong> for the main axis. Add <strong><code>-start</code></strong> or <strong><code>-end</code></strong> to align the bubble along the anchor edge.</p>
28
- <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
29
- &lt;sonic-tooltip placement=&quot;top&quot; label=&quot;Top&quot;&gt;
30
- &lt;sonic-button&gt;Top&lt;/sonic-button&gt;
31
- &lt;/sonic-tooltip&gt;
32
- &lt;sonic-tooltip placement=&quot;bottom&quot; label=&quot;Bottom&quot;&gt;
33
- &lt;sonic-button&gt;Bottom&lt;/sonic-button&gt;
34
- &lt;/sonic-tooltip&gt;
35
- &lt;sonic-tooltip placement=&quot;right&quot; label=&quot;Right&quot;&gt;
36
- &lt;sonic-button&gt;Right&lt;/sonic-button&gt;
37
- &lt;/sonic-tooltip&gt;
38
- &lt;sonic-tooltip placement=&quot;left&quot; label=&quot;Left&quot;&gt;
39
- &lt;sonic-button&gt;Left&lt;/sonic-button&gt;
40
- &lt;/sonic-tooltip&gt;
41
- &lt;/div&gt;
42
- </code></pre>
43
- <h3 id="aligned-placements">Aligned placements</h3>
44
- <pre><code>&lt;div class=&quot;flex gap-3 flex-wrap&quot;&gt;
45
- &lt;sonic-tooltip placement=&quot;top-start&quot; label=&quot;Top start&quot;&gt;
46
- &lt;sonic-button class=&quot;size-40 bg-neutral-200 rounded-lg&quot;&gt;Top start&lt;/sonic-button&gt;
47
- &lt;/sonic-tooltip&gt;
48
- &lt;sonic-tooltip placement=&quot;top-end&quot; label=&quot;Top end&quot;&gt;
49
- &lt;sonic-button class=&quot;size-40 bg-neutral-200 rounded-lg&quot;&gt;Top end&lt;/sonic-button&gt;
50
- &lt;/sonic-tooltip&gt;
51
- &lt;sonic-tooltip placement=&quot;bottom-start&quot; label=&quot;Bottom start&quot;&gt;
52
- &lt;sonic-button class=&quot;size-40 bg-neutral-200 rounded-lg&quot;&gt;Bottom start&lt;/sonic-button&gt;
53
- &lt;/sonic-tooltip&gt;
54
- &lt;sonic-tooltip placement=&quot;bottom-end&quot; label=&quot;Bottom end&quot;&gt;
55
- &lt;sonic-button class=&quot;size-40 bg-neutral-200 rounded-lg&quot;&gt;Bottom end&lt;/sonic-button&gt;
56
- &lt;/sonic-tooltip&gt;
57
- &lt;sonic-tooltip placement=&quot;right-start&quot; label=&quot;Right start&quot;&gt;
58
- &lt;sonic-button class=&quot;size-40 bg-neutral-200 rounded-lg&quot;&gt;Right start&lt;/sonic-button&gt;
59
- &lt;/sonic-tooltip&gt;
60
- &lt;sonic-tooltip placement=&quot;right-end&quot; label=&quot;Right end&quot;&gt;
61
- &lt;sonic-button class=&quot;size-40 bg-neutral-200 rounded-lg&quot;&gt;Right end&lt;/sonic-button&gt;
62
- &lt;/sonic-tooltip&gt;
63
- &lt;sonic-tooltip placement=&quot;left-start&quot; label=&quot;Left start&quot;&gt;
64
- &lt;sonic-button class=&quot;size-40 bg-neutral-200 rounded-lg&quot;&gt;Left start&lt;/sonic-button&gt;
65
- &lt;/sonic-tooltip&gt;
66
- &lt;sonic-tooltip placement=&quot;left-end&quot; label=&quot;Left end&quot;&gt;
67
- &lt;sonic-button class=&quot;size-40 bg-neutral-200 rounded-lg&quot;&gt;Left end&lt;/sonic-button&gt;
68
- &lt;/sonic-tooltip&gt;
69
- &lt;/div&gt;
70
- </code></pre>
71
- <h2 id="label-formatting">Label formatting</h2>
72
- <p><strong><code>label</code></strong> supports line breaks (<code>\n</code> in markup or multiline text). Lines are trimmed; <strong><code>&amp;nbsp;</code></strong> is normalized to spaces. <strong><code>white-space: pre-line</code></strong> preserves breaks in the bubble (max width <strong>18rem</strong>).</p>
73
- <pre><code>&lt;sonic-tooltip label=&quot;First line&amp;#10;Second line&quot;&gt;
74
- &lt;sonic-button variant=&quot;outline&quot;&gt;Multiline label&lt;/sonic-button&gt;
75
- &lt;/sonic-tooltip&gt;
76
- </code></pre>
77
- <h2 id="focusable">Focusable</h2>
78
- <p>On non-interactive triggers, set <strong><code>focusable</code></strong> so the host gets <strong><code>tabindex=&quot;0&quot;</code></strong> and the tooltip opens on keyboard focus as well as hover.</p>
79
- <pre><code>&lt;sonic-tooltip
80
- focusable
81
- label=&quot;The Concorde made its first transatlantic crossing on September 26, 1973&quot;
82
- &gt;
83
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble-question&quot;&gt;&lt;/sonic-icon&gt;
84
- Focus or hover this text
85
- &lt;/sonic-tooltip&gt;
86
- </code></pre>
87
- <h2 id="disabled">Disabled</h2>
88
- <pre><code>&lt;sonic-tooltip disabled label=&quot;Not shown&quot;&gt;
89
- &lt;sonic-button&gt;Tooltip disabled&lt;/sonic-button&gt;
90
- &lt;/sonic-tooltip&gt;
91
- </code></pre>
92
- <h2 id="accessibility">Accessibility</h2>
93
- <p>The bubble uses <strong><code>popover=&quot;hint&quot;</code></strong> (non-modal, no pointer capture). Prefer <strong><code>focusable</code></strong> when the slotted content is not already focusable. When the Popover API is unavailable, the host falls back to the native <strong><code>title</code></strong> attribute with a single-line label. Opacity transitions respect <strong><code>prefers-reduced-motion</code></strong>.</p>
94
- <h2 id="api-reference">API reference</h2>
95
- <table>
96
- <thead>
97
- <tr>
98
- <th>Attribute</th>
99
- <th>Values</th>
100
- <th>Description</th>
101
- </tr>
102
- </thead>
103
- <tbody><tr>
104
- <td><code>label</code></td>
105
- <td>string</td>
106
- <td>Tooltip copy; whitespace-only values suppress the bubble</td>
107
- </tr>
108
- <tr>
109
- <td><code>placement</code></td>
110
- <td><code>top</code> (default) · <code>bottom</code> · <code>left</code> · <code>right</code> · <code>top-start</code> · <code>top-end</code> · <code>bottom-start</code> · <code>bottom-end</code> · <code>left-start</code> · <code>left-end</code> · <code>right-start</code> · <code>right-end</code></td>
111
- <td>Position relative to the trigger; repositions while open</td>
112
- </tr>
113
- <tr>
114
- <td><code>disabled</code></td>
115
- <td>boolean</td>
116
- <td>Suppress show/hide; sets <strong><code>tabindex=&quot;-1&quot;</code></strong> on the host</td>
117
- </tr>
118
- <tr>
119
- <td><code>focusable</code></td>
120
- <td>boolean</td>
121
- <td>Add <strong><code>tabindex=&quot;0&quot;</code></strong> on the host for keyboard access</td>
122
- </tr>
123
- </tbody></table>
124
- <table>
125
- <thead>
126
- <tr>
127
- <th>Slot</th>
128
- <th>Description</th>
129
- </tr>
130
- </thead>
131
- <tbody><tr>
132
- <td><em>(default)</em></td>
133
- <td>Trigger content (hover target)</td>
134
- </tr>
135
- </tbody></table>
136
-
137
- </article>
138
- </main>
139
- </body>
140
- </html>