@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/docs/_getting-started/theming.html DELETED
@@ -1,333 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_getting-started/theming.html" data-doc-id="docs/_getting-started/theming">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Customization — Concorde</title>
7
- <meta name="description" content="Concorde components ship with default styles (fallback values in each component and in &lt;sonic-theme&gt;).">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_getting-started/theming, theming, Customization, guide, , :root, theme=&quot;custom&quot;, --sc-*, theme=&quot;light&quot;, &quot;dark&quot;, &quot;auto&quot;, auto, prefers-color-scheme">
9
- <meta name="concorde-doc-id" content="docs/_getting-started/theming">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_getting-started/theming.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_getting-started/theming.md/theming" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde guide — Customization</strong>. Concorde components ship with default styles (fallback values in each component and in &lt;sonic-theme&gt;). <span>Doc ID: <code>docs/_getting-started/theming</code>. Keywords: Concorde, supersoniks, docs/_getting-started/theming, theming, Customization, guide, , :root, theme=&quot;custom&quot;, --sc-*, theme=&quot;light&quot;, &quot;dark&quot;, &quot;auto&quot;, auto, prefers-color-scheme. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/theming.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/theming.html</a>.</span></p>
19
- <h1 id="customization">Customization</h1>
20
- <h2 id="theme-first-customization">Theme-first customization</h2>
21
- <p>Concorde components ship with <strong>default styles</strong> (fallback values in each component and in <code>&lt;sonic-theme&gt;</code>).<br>You do not need to define any CSS variables to get a usable UI.</p>
22
- <p>To align the kit with your brand, override <strong>only the essential theme tokens</strong> on <code>&lt;sonic-theme&gt;</code>, on <code>:root</code>, or in a project stylesheet.<br>Concorde derives radius steps, button/input rounding, shadows, and most per-component layout from these primitives—<strong>do not copy long lists of derived variables</strong> unless you have a specific need.</p>
23
- <pre><code class="language-html">&lt;sonic-theme color font class=&quot;block bg-base min-h-screen&quot;&gt;
24
- &lt;!-- your app --&gt;
25
- &lt;/sonic-theme&gt;
26
- </code></pre>
27
- <pre><code class="language-javascript">import &quot;@supersoniks/concorde/theme&quot;;
28
- </code></pre>
29
- <table>
30
- <thead>
31
- <tr>
32
- <th>Attribute</th>
33
- <th>Effect</th>
34
- </tr>
35
- </thead>
36
- <tbody><tr>
37
- <td><em>(omit)</em> | <code>theme=&quot;custom&quot;</code></td>
38
- <td>Default: core tokens + your <code>--sc-*</code>; no built-in light/dark palette</td>
39
- </tr>
40
- <tr>
41
- <td><code>theme=&quot;light&quot;</code> | <code>&quot;dark&quot;</code> | <code>&quot;auto&quot;</code></td>
42
- <td>Opt-in presets; <code>auto</code> follows <code>prefers-color-scheme</code></td>
43
- </tr>
44
- <tr>
45
- <td><code>class=&quot;bg-base block&quot;</code> (Tailwind)</td>
46
- <td>Page/surface background (<code>--sc-base</code>)</td>
47
- </tr>
48
- <tr>
49
- <td><code>color</code></td>
50
- <td>Text color (<code>--sc-base-content</code>)</td>
51
- </tr>
52
- <tr>
53
- <td><code>font</code></td>
54
- <td>Base font family/weight (<code>--sc-font-family-base</code>, etc.)</td>
55
- </tr>
56
- </tbody></table>
57
- <p>Popovers, modals, and toasts mount under the nearest <code>&lt;sonic-theme&gt;</code>.</p>
58
- <h2 id="customization-example">Customization example</h2>
59
- <p>Example (full brand override on <code>&lt;sonic-theme&gt;</code> or <code>:root</code>). Set every essential token below; derived radii and shadows still come from the theme engine—only <code>--sc-rounded</code> is listed here.</p>
60
- <pre><code class="language-css">sonic-theme {
61
- /* Semantic fills */
62
- --sc-primary: #353429;
63
- --sc-secondary: #f43f5e;
64
- --sc-info: #7c3aed;
65
- --sc-danger: #d71839;
66
- --sc-warning: #f97316;
67
- --sc-success: #10b981;
68
- --sc-contrast: #111;
69
-
70
- /* Text/icons on semantic fills */
71
- --sc-primary-content: #fff;
72
- --sc-secondary-content: #fff;
73
- --sc-info-content: #fff;
74
- --sc-danger-content: #fff;
75
- --sc-warning-content: #fff;
76
- --sc-success-content: #fff;
77
- --sc-contrast-content: #fff;
78
-
79
- /* Neutral fills */
80
- --sc-base: #fff;
81
- --sc-base-50: #f6f6f5;
82
- --sc-base-100: #ededec;
83
- --sc-base-200: #d7d7d4;
84
- --sc-base-300: #c8c7c4;
85
- --sc-base-400: #a8a7a2;
86
- --sc-base-500: #94938c;
87
- --sc-base-600: #76756c;
88
- --sc-base-700: #59584e;
89
- --sc-base-800: #47463b;
90
- --sc-base-900: #353429;
91
-
92
- /* Text/icons on neutral surfaces */
93
- --sc-base-content: var(--sc-base-900);
94
-
95
- /* Typography */
96
- --sc-font-family-base: &quot;Oswald&quot;, system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto,
97
- &quot;Helvetica Neue&quot;, Arial, sans-serif;
98
- --sc-headings-font-family: &quot;alternate-gothic-compressed&quot;, system-ui, sans-serif;
99
- --sc-headings-line-height: 1.1;
100
- --sc-headings-font-weight: bold;
101
- --sc-headings-text-transform: none;
102
-
103
- /* Shape (primitive only) */
104
- --sc-rounded: 0;
105
-
106
- /* Forms */
107
- --sc-border-width: 0.2rem;
108
- --sc-form-height: 2em;
109
- --sc-input-bg: var(--sc-base);
110
- --sc-input-color: var(--sc-base-content);
111
- --sc-input-border-color: var(--sc-input-color);
112
- --sc-input-active-bg: var(--sc-primary);
113
- --sc-input-active-color: var(--sc-primary-content);
114
- --sc-input-active-border-color: var(--sc-primary);
115
- }
116
- </code></pre>
117
- <p><sonic-button href="https://delanfranchi.github.io/concordecolors/"> Palette generator: concordecolors</sonic-button></p>
118
- <p><strong>Without these overrides</strong>, components keep Concorde’s per-component fallbacks. Built-in light/dark palettes apply only when you set <code>theme=&quot;light&quot;</code>, <code>theme=&quot;dark&quot;</code>, or <code>theme=&quot;auto&quot;</code>.</p>
119
- <p><strong>What we intentionally avoid:</strong> large public <code>--sc-alert-*</code> / <code>--sc-badge-*</code> APIs or <code>::part()</code> styling hooks on most components. Prefer attributes (<code>type</code>, <code>status</code>, <code>size</code>, …) and the theme tokens above.</p>
120
- <h2 id="only-essential-css-variables-public-theme-api">Only essential CSS variables (public theme API)</h2>
121
- <p>These are the <strong>smallest set</strong> we recommend customizing. Everything else should stay internal to the theme or to components (<code>--sc_*</code> private variables, attributes like <code>type</code>, <code>size</code>, <code>variant</code>).</p>
122
- <h3 id="surfaces-and-foreground">Surfaces and foreground</h3>
123
- <p>Tokens <strong>without</strong> a <code>-content</code> suffix are <strong>fill / background</strong> colors.<br>Tokens <strong>with</strong> <code>-content</code> are <strong>text and icons</strong> on top of the matching fill (solid buttons, badges, alerts, etc.).</p>
124
- <h4 id="neutral-fills">Neutral fills</h4>
125
- <table>
126
- <thead>
127
- <tr>
128
- <th>Variable</th>
129
- <th>Role</th>
130
- </tr>
131
- </thead>
132
- <tbody><tr>
133
- <td><code>--sc-base</code></td>
134
- <td>Main surface / page background</td>
135
- </tr>
136
- <tr>
137
- <td><code>--sc-base-50</code> … <code>--sc-base-900</code></td>
138
- <td>Neutral scale (borders, subtle backgrounds, muted UI)</td>
139
- </tr>
140
- </tbody></table>
141
- <h4 id="neutral-foreground">Neutral foreground</h4>
142
- <table>
143
- <thead>
144
- <tr>
145
- <th>Variable</th>
146
- <th>Role</th>
147
- </tr>
148
- </thead>
149
- <tbody><tr>
150
- <td><code>--sc-base-content</code></td>
151
- <td>Default body text and icons on neutral surfaces</td>
152
- </tr>
153
- </tbody></table>
154
- <h4 id="semantic-fills">Semantic fills</h4>
155
- <table>
156
- <thead>
157
- <tr>
158
- <th>Variable</th>
159
- <th>Role</th>
160
- </tr>
161
- </thead>
162
- <tbody><tr>
163
- <td><code>--sc-primary</code></td>
164
- <td>Primary actions, links, emphasis</td>
165
- </tr>
166
- <tr>
167
- <td><code>--sc-secondary</code></td>
168
- <td>Secondary brand accent (when used)</td>
169
- </tr>
170
- <tr>
171
- <td><code>--sc-info</code>, <code>--sc-success</code>, <code>--sc-warning</code>, <code>--sc-danger</code></td>
172
- <td>Status and feedback</td>
173
- </tr>
174
- <tr>
175
- <td><code>--sc-contrast</code></td>
176
- <td>High-contrast fills (e.g. on media)</td>
177
- </tr>
178
- </tbody></table>
179
- <h4 id="semantic-foreground">Semantic foreground</h4>
180
- <table>
181
- <thead>
182
- <tr>
183
- <th>Variable</th>
184
- <th>Role</th>
185
- </tr>
186
- </thead>
187
- <tbody><tr>
188
- <td><code>--sc-primary-content</code>, <code>--sc-secondary-content</code>, …</td>
189
- <td>Text/icons on the matching semantic <strong>fill</strong> (<code>--sc-primary</code>, etc.)</td>
190
- </tr>
191
- </tbody></table>
192
- <h3 id="shape">Shape</h3>
193
- <table>
194
- <thead>
195
- <tr>
196
- <th>Variable</th>
197
- <th>Role</th>
198
- </tr>
199
- </thead>
200
- <tbody><tr>
201
- <td><code>--sc-rounded</code></td>
202
- <td><strong>Single primitive</strong> corner radius; the theme computes <code>--sc-rounded-sm</code>, <code>--sc-btn-rounded</code>, <code>--sc-input-rounded</code>, etc.</td>
203
- </tr>
204
- </tbody></table>
205
- <h3 id="typography">Typography</h3>
206
- <table>
207
- <thead>
208
- <tr>
209
- <th>Variable</th>
210
- <th>Role</th>
211
- </tr>
212
- </thead>
213
- <tbody><tr>
214
- <td><code>--sc-font-family-base</code></td>
215
- <td>Body UI text</td>
216
- </tr>
217
- <tr>
218
- <td><code>--sc-font-weight-base</code>, <code>--sc-font-style-base</code></td>
219
- <td>Optional</td>
220
- </tr>
221
- <tr>
222
- <td><code>--sc-headings-font-family</code>, <code>--sc-headings-line-height</code>, <code>--sc-headings-font-weight</code>, <code>--sc-headings-text-transform</code></td>
223
- <td>Headings (modal titles, etc.)</td>
224
- </tr>
225
- </tbody></table>
226
- <h3 id="forms-only-if-you-customize-inputs-globally">Forms (only if you customize inputs globally)</h3>
227
- <p>Interactive controls expose a few extra <strong>theme-level</strong> tokens; prefer these over styling individual inputs from outside.</p>
228
- <table>
229
- <thead>
230
- <tr>
231
- <th>Variable</th>
232
- <th>Role</th>
233
- </tr>
234
- </thead>
235
- <tbody><tr>
236
- <td><code>--sc-border-width</code></td>
237
- <td>Default border thickness</td>
238
- </tr>
239
- <tr>
240
- <td><code>--sc-form-height</code></td>
241
- <td>Control height</td>
242
- </tr>
243
- <tr>
244
- <td><code>--sc-input-bg</code>, <code>--sc-input-color</code>, <code>--sc-input-border-color</code></td>
245
- <td>Default field chrome</td>
246
- </tr>
247
- <tr>
248
- <td><code>--sc-input-active-bg</code>, <code>--sc-input-active-color</code>, <code>--sc-input-active-border-color</code></td>
249
- <td>Focus/active state</td>
250
- </tr>
251
- </tbody></table>
252
- <hr>
253
- <h2 id="tailwind-in-new-components-">Tailwind in new components ?</h2>
254
- <p>Set <code>tailwind.config.js</code> to match concorde style token in your custom component.</p>
255
- <pre><code class="language-js">...
256
- theme: {
257
- borderRadius: {
258
- DEFAULT: &quot;var(--sc-rounded)&quot;,
259
- none: &quot;0&quot;,
260
- sm: &quot;var(--sc-rounded-sm)&quot;,
261
- md: &quot;var(--sc-rounded-md)&quot;,
262
- lg: &quot;var(--sc-rounded-lg)&quot;,
263
- xl: &quot;var(--sc-rounded-xl)&quot;,
264
- full: &quot;9999px&quot;,
265
- },
266
- boxShadow: {
267
- DEFAULT: &quot;var(--sc-shadow)&quot;,
268
- none: &quot;none&quot;,
269
- sm: &quot;var(--sc-shadow-sm)&quot;,
270
- md: &quot;var(--sc-shadow-md)&quot;,
271
- lg: &quot;var(--sc-shadow-lg)&quot;,
272
- xl: &quot;var(--sc-shadow-xl)&quot;,
273
- },
274
- colors: {
275
- transparent: &quot;transparent&quot;,
276
- current: &quot;currentColor&quot;,
277
- content: &quot;var(--sc-base-content)&quot;,
278
- base: &quot;var(--sc-base)&quot;,
279
- neutral: {
280
- 0: &quot;var(--sc-base)&quot;,
281
- 50: &quot;var(--sc-base-50)&quot;,
282
- 100: &quot;var(--sc-base-100)&quot;,
283
- 200: &quot;var(--sc-base-200)&quot;,
284
- 300: &quot;var(--sc-base-300)&quot;,
285
- 400: &quot;var(--sc-base-400)&quot;,
286
- 500: &quot;var(--sc-base-500)&quot;,
287
- 600: &quot;var(--sc-base-600)&quot;,
288
- 700: &quot;var(--sc-base-700)&quot;,
289
- 800: &quot;var(--sc-base-800)&quot;,
290
- 900: &quot;var(--sc-base-900)&quot;,
291
- content: &quot;var(--sc-base)&quot;,
292
- },
293
- primary: {
294
- DEFAULT: &quot;var(--sc-primary)&quot;,
295
- content: &quot;var(--sc-primary-content)&quot;,
296
- },
297
- success: {
298
- DEFAULT: &quot;var(--sc-success)&quot;,
299
- content: &quot;var(--sc-success-content)&quot;,
300
- },
301
- danger: {
302
- DEFAULT: &quot;var(--sc-danger)&quot;,
303
- content: &quot;var(--sc-danger-content)&quot;,
304
- },
305
- warning: {
306
- DEFAULT: &quot;var(--sc-warning)&quot;,
307
- content: &quot;var(--sc-warning-content)&quot;,
308
- },
309
- info: {
310
- DEFAULT: &quot;var(--sc-info)&quot;,
311
- content: &quot;var(--sc-info-content)&quot;,
312
- },
313
- contrast: {
314
- DEFAULT: &quot;var(--sc-contrast)&quot;,
315
- content: &quot;var(--sc-contrast-content)&quot;,
316
- },
317
- },
318
- extend: {
319
- borderWidth: {
320
- DEFAULT: &quot;var(--sc-border-width)&quot;,
321
- },
322
- fontFamily: {
323
- headings: [&quot;var(--sc-headings-font-family, var(--sc-font-family-base, sans-serif))&quot;],
324
- body: [&quot;var(--sc-font-family-base)&quot;],
325
- monospace: [&quot;var(--sc-font-family-monospace, monospace)&quot;],
326
- }
327
- }
328
- </code></pre>
329
-
330
- </article>
331
- </main>
332
- </body>
333
- </html>
package/docs/crawl/docs/_misc/api-configuration.html DELETED
@@ -1,149 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_misc/api-configuration.html" data-doc-id="docs/_misc/api-configuration">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>API configuration — Concorde</title>
7
- <meta name="description" content="APIConfiguration is the object built by HTML.getApiConfiguration from ancestor attributes on the DOM (or from a typed publisher — see @get / @post configuration key). It is passed to API by fetchers, ">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_misc/api-configuration, api-configuration, API configuration, reference, APIConfiguration, HTML.getApiConfiguration, API, wording(), @get, @post, @put, @patch, serviceURL">
9
- <meta name="concorde-doc-id" content="docs/_misc/api-configuration">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_misc/api-configuration.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_misc/api-configuration.md/api-configuration" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde reference — API configuration</strong>. APIConfiguration is the object built by HTML.getApiConfiguration from ancestor attributes on the DOM (or from a typed publisher — see @get / @post configuration key). It is passed to API by fetchers, <span>Doc ID: <code>docs/_misc/api-configuration</code>. Keywords: Concorde, supersoniks, docs/_misc/api-configuration, api-configuration, API configuration, reference, APIConfiguration, HTML.getApiConfiguration, API, wording(), @get, @post, @put, @patch, serviceURL. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_misc/api-configuration.html">https://concorde.supersoniks.org/crawl/docs/_misc/api-configuration.html</a>.</span></p>
19
- <h1 id="api-configuration">API configuration</h1>
20
- <p><code>APIConfiguration</code> is the object built by <a href="../../core/utils/HTML.ts"><code>HTML.getApiConfiguration</code></a> from <strong>ancestor attributes</strong> on the DOM (or from a typed publisher — see <a href="../_decorators/get.html#get">@get</a> / <a href="../_decorators/post.html#post">@post</a> configuration key). It is passed to <a href="../../core/utils/api.ts"><code>API</code></a> by fetchers, <strong>sonic-submit</strong>, the <strong><code>wording()</code></strong> directive, <strong><code>@get</code></strong>, <strong><code>@post</code></strong>, <strong><code>@put</code></strong>, and <strong><code>@patch</code></strong>.</p>
21
- <blockquote>
22
- <p><strong>Mock service:</strong> same <a href="./docs-mock-api.html#docs-mock-api">Local API demos</a> Service Worker / Vite middleware. Routes used on this page are listed in the <a href="#api-config-routes">API config routes</a> section below.</p>
23
- </blockquote>
24
- <h2 id="attribute-map">Attribute map</h2>
25
- <table>
26
- <thead>
27
- <tr>
28
- <th>Attribute (ancestor)</th>
29
- <th><code>APIConfiguration</code> field</th>
30
- <th>Role</th>
31
- </tr>
32
- </thead>
33
- <tbody><tr>
34
- <td><code>serviceURL</code></td>
35
- <td><code>serviceURL</code></td>
36
- <td>Base URL (e.g. <code>/docs-mock-api</code>)</td>
37
- </tr>
38
- <tr>
39
- <td><code>token</code></td>
40
- <td><code>token</code></td>
41
- <td>Static Bearer sent on REST calls</td>
42
- </tr>
43
- <tr>
44
- <td><code>userName</code> / <code>password</code></td>
45
- <td><code>userName</code> / <code>password</code></td>
46
- <td>Basic auth for <strong>tokenProvider</strong> fetch only</td>
47
- </tr>
48
- <tr>
49
- <td><code>eventsApiToken</code></td>
50
- <td><code>authToken</code></td>
51
- <td>Bearer for <strong>tokenProvider</strong> when no Basic</td>
52
- </tr>
53
- <tr>
54
- <td><code>tokenProvider</code></td>
55
- <td><code>tokenProvider</code></td>
56
- <td>Path to GET a new token (<code>{ token }</code> JSON)</td>
57
- </tr>
58
- <tr>
59
- <td><code>wordingProvider</code></td>
60
- <td>— (read by <code>wording()</code>)</td>
61
- <td>Base path + query for label batch GET</td>
62
- </tr>
63
- <tr>
64
- <td><code>wordingVersionProvider</code></td>
65
- <td>—</td>
66
- <td>Publisher id; bump version → reload wordings</td>
67
- </tr>
68
- <tr>
69
- <td><code>credentials</code></td>
70
- <td><code>credentials</code></td>
71
- <td><code>fetch</code> credentials mode</td>
72
- </tr>
73
- <tr>
74
- <td><code>addHTTPResponse</code></td>
75
- <td><code>addHTTPResponse</code></td>
76
- <td>Attach <code>_sonic_http_response_</code> on result</td>
77
- </tr>
78
- <tr>
79
- <td><code>cache</code></td>
80
- <td><code>cache</code></td>
81
- <td><code>fetch</code> cache mode</td>
82
- </tr>
83
- <tr>
84
- <td><code>blockUntilDone</code></td>
85
- <td><code>blockUntilDone</code></td>
86
- <td>Serialize calls per <code>serviceURL</code></td>
87
- </tr>
88
- <tr>
89
- <td><code>keepAlive</code></td>
90
- <td><code>keepAlive</code></td>
91
- <td><code>fetch</code> keepalive</td>
92
- </tr>
93
- </tbody></table>
94
- <p><strong>Lit / TypeScript:</strong> store the same shape in a publisher and pass <code>DataProviderKey&lt;APIConfiguration&gt;</code> as the second argument of <code>@get</code> (see <a href="./dataProviderKey.html#dataProviderKey">DataProviderKey</a>).</p>
95
- <h2 id="bearer-token-static">Bearer token (static)</h2>
96
- <p>Publisher <code>docsApiConfBearerKey</code> (<code>set(docsApiConfBearerKey, { token: &quot;docs-mock-valid-token&quot;, … })</code>) — mock returns the protected payload.</p>
97
- <p><docs-lit-demo for="docs-api-config-bearer-demo"></docs-lit-demo></p>
98
- <h2 id="tokenprovider--basic-auth">tokenProvider + Basic auth</h2>
99
- <p>No static <code>token</code>: <code>API.auth()</code> calls <code>GET /docs-mock-api/auth/token</code> with Basic <strong>demo</strong> / <strong>secret</strong>, stores <code>token</code>, then calls the protected route.</p>
100
- <p><docs-lit-demo for="docs-api-config-token-provider-demo"></docs-lit-demo></p>
101
- <h2 id="http-498--stale-token-refresh">HTTP 498 — stale token refresh</h2>
102
- <p>Initial <code>token=&quot;docs-mock-stale-token&quot;</code> → mock responds <strong>498</strong> → Concorde invalidates the token, runs <code>auth()</code> again (same <code>tokenProvider</code> + Basic), retries with <code>docs-mock-fresh-token</code>.</p>
103
- <p><docs-lit-demo for="docs-api-config-stale-token-demo"></docs-lit-demo></p>
104
- <h2 id="eventsapitoken">eventsApiToken</h2>
105
- <p>Attribute <strong><code>eventsApiToken</code></strong> on an ancestor maps to <strong><code>authToken</code></strong> in config (used as Bearer when calling <code>tokenProvider</code>, instead of Basic).</p>
106
- <p><docs-lit-demo for="docs-api-config-events-token-demo"></docs-lit-demo></p>
107
- <h2 id="wording-api">Wording API</h2>
108
- <p><code>wordingProvider=&quot;wording/labels?lang=fr&quot;</code> + <code>wording(&#39;api-config.greeting&#39;)</code> in Lit. Mock returns label map from <code>labels[]</code> query params.</p>
109
- <p><docs-lit-demo for="docs-api-config-wording-demo"></docs-lit-demo></p>
110
- <h2 id="scoped-attributes-html--sonic-scope">Scoped attributes (HTML / sonic-scope)</h2>
111
- <p>Attributes on <strong><code>sonic-scope</code></strong> (or any ancestor) are visible to descendants via <code>getAncestorAttributeValue</code>.</p>
112
- <p><docs-lit-demo for="docs-api-config-scoped-attrs-demo"></docs-lit-demo></p>
113
- <h2 id="api-config-routes">API config routes</h2>
114
- <table>
115
- <thead>
116
- <tr>
117
- <th>Route</th>
118
- <th>Demo</th>
119
- </tr>
120
- </thead>
121
- <tbody><tr>
122
- <td><code>GET /docs-mock-api/auth/token</code></td>
123
- <td>tokenProvider, eventsApiToken</td>
124
- </tr>
125
- <tr>
126
- <td><code>GET /docs-mock-api/api/config/protected</code></td>
127
- <td>Bearer / Basic / 498</td>
128
- </tr>
129
- <tr>
130
- <td><code>GET /docs-mock-api/wording/labels?labels[]=…&amp;lang=fr</code></td>
131
- <td><code>wording()</code></td>
132
- </tr>
133
- </tbody></table>
134
- <p>Mock tokens (doc only): <code>docs-mock-valid-token</code>, <code>docs-mock-stale-token</code> (498), <code>docs-mock-fresh-token</code> (after refresh). Basic: <strong>demo</strong> / <strong>secret</strong>. Events token: <code>docs-mock-events-token</code>.</p>
135
- <p>Implementation: <code>src/docs/mock-api/api-config-mock.ts</code> (bundled in the Service Worker with <code>router.ts</code>).</p>
136
- <h2 id="see-also">See also</h2>
137
- <ul>
138
- <li><a href="../_decorators/get.html#get">@get</a> — <code>APIConfiguration</code> + <code>Endpoint</code></li>
139
- <li><a href="../_decorators/post.html#post">@post</a> — same configuration model for POST</li>
140
- <li><a href="../_decorators/put.html#put">@put</a> · <a href="../_decorators/patch.html#patch">@patch</a> — PUT / PATCH</li>
141
- <li><a href="./endpoint.html#endpoint">Endpoint</a> — typed path</li>
142
- <li><a href="./docs-mock-api.html#docs-mock-api">Local API demos</a> — offline <code>serviceURL</code></li>
143
- <li><a href="../../core/components/functional/fetch/fetch.html#fetch">Fetch</a> — attribute table (legacy sonic-fetch)</li>
144
- </ul>
145
-
146
- </article>
147
- </main>
148
- </body>
149
- </html>
package/docs/crawl/docs/_misc/dataProviderKey.html DELETED
@@ -1,135 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/docs/_misc/dataProviderKey.html" data-doc-id="docs/_misc/dataProviderKey">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>DataProviderKey — Concorde</title>
7
- <meta name="description" content="The DataProviderKey&lt;T&gt; utility provides type-safe navigation through composite data structures. Each property or index access extends the path, and the final key can be retrieved via toString() or the">
8
- <meta name="keywords" content="Concorde, supersoniks, docs/_misc/dataProviderKey, dataProviderKey, DataProviderKey, reference, toString(), path, myKey.items[0], items, Item[], .path">
9
- <meta name="concorde-doc-id" content="docs/_misc/dataProviderKey">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/docs/_misc/dataProviderKey.html">
11
- </head>
12
- <body>
13
- <header>
14
- <p><a href="../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#docs/_misc/dataProviderKey.md/dataProviderKey" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde reference — DataProviderKey</strong>. The DataProviderKey&lt;T&gt; utility provides type-safe navigation through composite data structures. Each property or index access extends the path, and the final key can be retrieved via toString() or the <span>Doc ID: <code>docs/_misc/dataProviderKey</code>. Keywords: Concorde, supersoniks, docs/_misc/dataProviderKey, dataProviderKey, DataProviderKey, reference, toString(), path, myKey.items[0], items, Item[], .path. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_misc/dataProviderKey.html">https://concorde.supersoniks.org/crawl/docs/_misc/dataProviderKey.html</a>.</span></p>
19
- <h1 id="dataproviderkey">DataProviderKey</h1>
20
- <p>The <code>DataProviderKey&lt;T&gt;</code> utility provides type-safe navigation through composite data structures. Each property or index access extends the path, and the final key can be retrieved via <code>toString()</code> or the <code>path</code> property.</p>
21
- <p>For a <strong>single HTTP path string</strong> (no dot-syntax), see <a href="./endpoint.html#endpoint">Endpoint</a>. For <strong><code>DataProviderKey&lt;APIConfiguration&gt;</code></strong>, see <a href="./api-configuration.html#api-configuration">API configuration</a>.</p>
22
- <h2 id="principle">Principle</h2>
23
- <p><code>DataProviderKey</code> uses a Proxy to intercept property access and build a cumulative path string. TypeScript infers the nested type at each level, so <code>myKey.items[0]</code> is correctly typed as <code>DataProviderKey&lt;Item&gt;</code> when <code>items</code> is <code>Item[]</code>.</p>
24
- <p>In Lit demos, bind HTML attributes from a key’s <strong><code>.path</code></strong> (single source of truth), and use <strong><code>get</code> / <code>set</code> / <code>dp</code></strong> instead of <code>PublisherManager.get(&quot;…&quot;)</code>:</p>
25
- <pre><code class="language-typescript">import { DataProviderKey } from &quot;@supersoniks/concorde/dataProviderKey&quot;;
26
- import { get, set } from &quot;@supersoniks/concorde/utils&quot;;
27
-
28
- export const myFormKey = new DataProviderKey&amp;lt;{ email: string }&amp;gt;(&quot;myForm&quot;);
29
- set(myFormKey, { email: &quot;a@b.c&quot; });
30
-
31
- // template: formDataProvider=${myFormKey.path}
32
- </code></pre>
33
- <h2 id="usage">Usage</h2>
34
- <h3 id="import">Import</h3>
35
- <pre><code class="language-typescript">import { DataProviderKey } from &quot;@supersoniks/concorde/dataProviderKey&quot;;
36
- </code></pre>
37
- <h3 id="basic-example">Basic example</h3>
38
- <pre><code class="language-typescript">type Item = { id: string; name: string };
39
- //
40
- type Data = {
41
- items: Item[];
42
- count: number;
43
- };
44
- //
45
- const myKey = new DataProviderKey&amp;lt;Data&amp;gt;(&quot;data&quot;).items[0];
46
- // Equivalent to: new DataProviderKey&amp;lt;Item&amp;gt;(&quot;data.items.0&quot;)
47
- myKey.toString(); // &quot;data.items.0&quot;
48
- myKey.path; // same value
49
- // myKey is typed as DataProviderKey&amp;lt;Item&amp;gt;
50
- </code></pre>
51
- <h3 id="object-property-access">Object property access</h3>
52
- <pre><code class="language-typescript">const key = new DataProviderKey&amp;lt;Data&amp;gt;(&quot;data&quot;);
53
- const countKey = key.count;
54
- countKey.path; // &quot;data.count&quot;
55
- countKey.toString(); // &quot;data.count&quot;
56
- </code></pre>
57
- <h3 id="array-index-access">Array index access</h3>
58
- <pre><code class="language-typescript">const itemsKey = new DataProviderKey&amp;lt;Data&amp;gt;(&quot;data&quot;).items;
59
- itemsKey.path; // &quot;data.items&quot;
60
- // itemsKey is DataProviderKey&amp;lt;Item[]&amp;gt;
61
- //
62
- const firstItem = itemsKey[0];
63
- firstItem.path; // &quot;data.items.0&quot;
64
- // firstItem is DataProviderKey&amp;lt;Item&amp;gt;
65
- </code></pre>
66
- <h3 id="dynamic-paths">Dynamic paths</h3>
67
- <p>Use placeholders <code>${prop}</code> or <code>{$prop}</code> in the path string. The path is resolved at runtime from the component&#39;s properties. See <a href="./dynamic-path.html#dynamic-path">Dynamic path placeholders</a> for resolution rules and <code>skipEmptyPlaceholder</code>. The type remains declarative:</p>
68
- <pre><code class="language-typescript">type User = { name: string; email: string };
69
- //
70
- // Path resolved from component.userIndex at runtime
71
- @subscribe(new DataProviderKey&amp;lt;User&amp;gt;(&quot;users.${userIndex}&quot;))
72
- @state()
73
- user: User | null = null;
74
- </code></pre>
75
- <p>Dynamic keys are <strong>not</strong> supported by <code>get</code>, <code>set</code>, or <code>dp</code> — those APIs take a snapshot at call time with no component context. For dynamic paths use decorators (<code>@subscribe</code>, <code>@publish</code>, <code>@handle</code>) or <strong><code>sub(key)</code></strong> in Lit templates (resolves <code>${…}</code> from the host component). See <a href="../_directives/sub.html#sub">sub()</a>.</p>
76
- <h3 id="get--set--dp-with-static-keys">get / set / dp with static keys</h3>
77
- <p>For programmatic access, pass a <code>DataProviderKey</code> or a static path string. Dynamic placeholders are rejected:</p>
78
- <pre><code class="language-typescript">import { dp, get, set } from &quot;@supersoniks/concorde/utils&quot;;
79
- import { DataProviderKey } from &quot;@supersoniks/concorde/dataProviderKey&quot;;
80
- //
81
- const counterKey = new DataProviderKey&amp;lt;{ count: number }&amp;gt;(&quot;myCounter&quot;);
82
- //
83
- set(counterKey, { count: 0 });
84
- dp(counterKey.count).set(1);
85
- get(counterKey); // snapshot: { count: 1 }
86
- </code></pre>
87
- <h2 id="path-retrieval">Path retrieval</h2>
88
- <p>The final path is built by concatenating each accessed property with a dot:</p>
89
- <ul>
90
- <li><code>new DataProviderKey&lt;T&gt;(&quot;base&quot;)</code> → <code>&quot;base&quot;</code></li>
91
- <li><code>key.prop</code> → <code>&quot;base.prop&quot;</code></li>
92
- <li><code>key.items[0]</code> → <code>&quot;base.items.0&quot;</code></li>
93
- </ul>
94
- <p>Use <code>toString()</code> or <code>path</code> to get the full path string:</p>
95
- <pre><code class="language-typescript">const key = new DataProviderKey&amp;lt;Data&amp;gt;(&quot;data&quot;).count;
96
- const pathString = key.toString(); // &quot;data.count&quot;
97
- const pathProp = key.path; // &quot;data.count&quot;
98
- </code></pre>
99
- <h2 id="use-cases">Use cases</h2>
100
- <ul>
101
- <li><strong>Type-safe bindings</strong>: paths for <code>@bind</code>, <code>@subscribe</code>, <code>@publish</code>, <code>@handle</code></li>
102
- <li><strong>Dynamic paths</strong>: reusable keys with <code>${...}</code> placeholders</li>
103
- <li><strong>Form fields</strong>: form data paths with compile-time checking</li>
104
- </ul>
105
- <h2 id="integration-with-subscribe-publish-and-handle">Integration with @subscribe, @publish and @handle</h2>
106
- <p>Use <code>DataProviderKey</code> with <code>@subscribe</code> (read-only), <code>@publish</code> (write-only), or <code>@handle</code> (method callback on assign). With <code>@subscribe</code> / <code>@publish</code>, the decorated property <strong>must</strong> match the key’s value type. With <code>@handle</code>, the method receives <code>(value: T)</code>.</p>
107
- <pre><code class="language-typescript">import { subscribe } from &quot;@supersoniks/concorde/decorators&quot;;
108
- import { DataProviderKey } from &quot;@supersoniks/concorde/dataProviderKey&quot;;
109
- //
110
- type FormData = { email: string };
111
- const formKey = new DataProviderKey&amp;lt;FormData&amp;gt;(&quot;formData&quot;);
112
- //
113
- @customElement(&quot;user-form&quot;)
114
- export class UserForm extends LitElement {
115
- @subscribe(formKey.email)
116
- @state()
117
- email = &quot;&quot;;
118
- //
119
- render() {
120
- return html`&amp;lt;input .value=${this.email} @input=${(e) =&gt; this.email = (e.target as HTMLInputElement).value}&amp;gt;`;
121
- }
122
- }
123
- </code></pre>
124
- <p>These decorators support dynamic paths: <code>&quot;base.${prop}&quot;</code> in the constructor. A wrong property type (e.g. <code>number</code> for <code>DataProviderKey&lt;string&gt;</code>) is a TypeScript error. Resolution rules: <a href="./dynamic-path.html#dynamic-path">Dynamic path placeholders</a>. See <a href="../_decorators/handle.html#handle">@handle</a> for method callbacks.</p>
125
- <h2 id="notes">Notes</h2>
126
- <ul>
127
- <li>Function properties are excluded from navigation (no <code>key.method()</code> chaining)</li>
128
- <li>Primitives have no navigable properties</li>
129
- <li>The <code>path</code> property and <code>toString()</code> are equivalent for retrieving the key</li>
130
- </ul>
131
-
132
- </article>
133
- </main>
134
- </body>
135
- </html>