@supersoniks/concorde 5.0.0 → 5.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (314) hide show
  1. package/.gitlab-ci.yml +0 -13
  2. package/build-infos.json +1 -1
  3. package/concorde-core.bundle.js +606 -689
  4. package/concorde-core.es.js +4511 -4329
  5. package/dist/concorde-core.bundle.js +606 -689
  6. package/dist/concorde-core.es.js +4511 -4329
  7. package/gitlab/job_tests.sh +25 -12
  8. package/index.html +3 -3
  9. package/package.json +16 -1
  10. package/scripts/post-build-docs.js +0 -0
  11. package/scripts/post-build.mjs +0 -0
  12. package/src/core/components/functional/fetch/fetch.md +0 -0
  13. package/src/core/components/functional/if/if.md +0 -0
  14. package/src/core/components/functional/list/list.demo.ts +0 -0
  15. package/src/core/components/functional/list/list.md +0 -0
  16. package/src/core/components/functional/list/list.ts +0 -0
  17. package/src/core/components/functional/router/router.md +0 -0
  18. package/src/core/components/functional/router/router.ts +0 -0
  19. package/src/core/components/functional/sdui/sdui.md +0 -0
  20. package/src/core/components/functional/states/states.md +0 -0
  21. package/src/core/components/functional/submit/submit.md +0 -0
  22. package/src/core/components/ui/_css/rounded.ts +36 -0
  23. package/src/core/components/ui/_css/size.ts +0 -0
  24. package/src/core/components/ui/_css/type.ts +49 -0
  25. package/src/core/components/ui/_i18n/ui-aria-labels.ts +104 -0
  26. package/src/core/components/ui/alert/alert.md +128 -72
  27. package/src/core/components/ui/alert/alert.spec.ts +145 -0
  28. package/src/core/components/ui/alert/alert.ts +86 -91
  29. package/src/core/components/ui/alert-messages/alert-messages.ts +1 -1
  30. package/src/core/components/ui/badge/badge.md +126 -78
  31. package/src/core/components/ui/badge/badge.ts +29 -81
  32. package/src/core/components/ui/button/button.md +1 -0
  33. package/src/core/components/ui/button/button.ts +11 -8
  34. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  35. package/src/core/components/ui/captcha/captcha.md +0 -0
  36. package/src/core/components/ui/card/card-header.ts +7 -2
  37. package/src/core/components/ui/card/card.md +120 -65
  38. package/src/core/components/ui/divider/divider.ts +4 -9
  39. package/src/core/components/ui/form/fieldset/legend-description.ts +1 -1
  40. package/src/core/components/ui/form/fieldset/legend.ts +1 -1
  41. package/src/core/components/ui/form/input/input.md +1 -1
  42. package/src/core/components/ui/form/input/input.ts +19 -15
  43. package/src/core/components/ui/form/radio/radio.md +0 -0
  44. package/src/core/components/ui/form/select/select.md +0 -0
  45. package/src/core/components/ui/form/switch/switch.md +0 -0
  46. package/src/core/components/ui/form/textarea/textarea.md +1 -1
  47. package/src/core/components/ui/image/image.md +147 -53
  48. package/src/core/components/ui/image/image.ts +10 -44
  49. package/src/core/components/ui/link/link.md +2 -2
  50. package/src/core/components/ui/link/link.ts +42 -37
  51. package/src/core/components/ui/loader/loader.md +0 -0
  52. package/src/core/components/ui/menu/menu.md +0 -0
  53. package/src/core/components/ui/modal/modal-close.ts +8 -12
  54. package/src/core/components/ui/modal/modal.md +0 -0
  55. package/src/core/components/ui/modal/modal.ts +18 -18
  56. package/src/core/components/ui/pop/pop.md +105 -1
  57. package/src/core/components/ui/pop/pop.ts +143 -148
  58. package/src/core/components/ui/table/table-caption.ts +0 -0
  59. package/src/core/components/ui/table/table.md +0 -0
  60. package/src/core/components/ui/table/table.ts +2 -8
  61. package/src/core/components/ui/theme/theme.ts +1 -1
  62. package/src/core/components/ui/toast/dismissed.ts +14 -0
  63. package/src/core/components/ui/toast/toast-item.ts +139 -91
  64. package/src/core/components/ui/toast/toast.ts +4 -7
  65. package/src/core/components/ui/tooltip/tooltip.ts +176 -154
  66. package/src/core/utils/LocationHandler.ts +12 -5
  67. package/src/core/utils/dismissed.ts +22 -0
  68. package/src/core/utils/positioning.spec.ts +208 -0
  69. package/src/core/utils/positioning.ts +183 -0
  70. package/src/core/utils/route.ts +0 -0
  71. package/src/directives.ts +2 -3
  72. package/src/docs/_core-concept/subscriber.md +0 -0
  73. package/src/docs/_getting-started/concorde-outside.md +3 -3
  74. package/src/docs/_getting-started/my-first-subscriber.md +0 -0
  75. package/src/docs/_getting-started/pubsub.md +0 -0
  76. package/src/docs/_getting-started/start.md +0 -0
  77. package/src/docs/code.ts +3 -1
  78. package/src/docs/example/users.ts +0 -0
  79. package/src/docs/search/docs-search.json +651 -21
  80. package/src/docs/search/page.ts +0 -0
  81. package/src/docs/tailwind/css/tailwind.css +13 -6
  82. package/src/tsconfig.json +45 -0
  83. package/src/tsconfig.tsbuildinfo +1 -1
  84. package/tailwind.config.js +50 -3
  85. package/vitest.setup.ts +49 -13
  86. package/.github/workflows/ci.yml +0 -21
  87. package/.github-export-ignore +0 -30
  88. package/CONTRIBUTING.md +0 -59
  89. package/DEV.md +0 -54
  90. package/LICENSE +0 -21
  91. package/OPEN_SOURCE_CHECKPOINT.md +0 -133
  92. package/concorde-3d.bundle.js +0 -3960
  93. package/concorde-3d.es.js +0 -33433
  94. package/concorde-hugging-face-infer.bundle.js +0 -32
  95. package/concorde-hugging-face-infer.es.js +0 -2952
  96. package/concorde-shader.bundle.js +0 -116
  97. package/concorde-shader.es.js +0 -8353
  98. package/concorde-webgpu.bundle.js +0 -307
  99. package/concorde-webgpu.es.js +0 -8627
  100. package/docs/altcha-widget.js +0 -2662
  101. package/docs/assets/index-BZiZXMU-.css +0 -1
  102. package/docs/assets/index-FmK4JaIM.js +0 -11992
  103. package/docs/crawl/core/components/functional/date/date.html +0 -190
  104. package/docs/crawl/core/components/functional/fetch/fetch.html +0 -109
  105. package/docs/crawl/core/components/functional/if/if.html +0 -27
  106. package/docs/crawl/core/components/functional/jsonata/jsonata.html +0 -79
  107. package/docs/crawl/core/components/functional/list/list.html +0 -70
  108. package/docs/crawl/core/components/functional/mix/mix.html +0 -45
  109. package/docs/crawl/core/components/functional/queue/queue.html +0 -96
  110. package/docs/crawl/core/components/functional/router/router.html +0 -106
  111. package/docs/crawl/core/components/functional/sdui/sdui.html +0 -269
  112. package/docs/crawl/core/components/functional/states/states.html +0 -66
  113. package/docs/crawl/core/components/functional/submit/submit.html +0 -160
  114. package/docs/crawl/core/components/functional/subscriber/subscriber.html +0 -67
  115. package/docs/crawl/core/components/functional/value/value.html +0 -51
  116. package/docs/crawl/core/components/ui/alert/alert.html +0 -110
  117. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +0 -23
  118. package/docs/crawl/core/components/ui/badge/badge.html +0 -119
  119. package/docs/crawl/core/components/ui/button/button.html +0 -149
  120. package/docs/crawl/core/components/ui/captcha/captcha.html +0 -30
  121. package/docs/crawl/core/components/ui/card/card.html +0 -99
  122. package/docs/crawl/core/components/ui/divider/divider.html +0 -58
  123. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +0 -73
  124. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +0 -135
  125. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +0 -79
  126. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +0 -62
  127. package/docs/crawl/core/components/ui/form/input/input.html +0 -109
  128. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +0 -106
  129. package/docs/crawl/core/components/ui/form/radio/radio.html +0 -56
  130. package/docs/crawl/core/components/ui/form/select/select.html +0 -73
  131. package/docs/crawl/core/components/ui/form/switch/switch.html +0 -56
  132. package/docs/crawl/core/components/ui/form/textarea/textarea.html +0 -59
  133. package/docs/crawl/core/components/ui/group/group.html +0 -82
  134. package/docs/crawl/core/components/ui/icon/icon.html +0 -133
  135. package/docs/crawl/core/components/ui/image/image.html +0 -110
  136. package/docs/crawl/core/components/ui/link/link.html +0 -42
  137. package/docs/crawl/core/components/ui/loader/loader.html +0 -50
  138. package/docs/crawl/core/components/ui/menu/menu.html +0 -322
  139. package/docs/crawl/core/components/ui/modal/modal.html +0 -117
  140. package/docs/crawl/core/components/ui/pop/pop.html +0 -102
  141. package/docs/crawl/core/components/ui/progress/progress.html +0 -58
  142. package/docs/crawl/core/components/ui/table/table.html +0 -413
  143. package/docs/crawl/core/components/ui/toast/toast.html +0 -122
  144. package/docs/crawl/core/components/ui/tooltip/tooltip.html +0 -79
  145. package/docs/crawl/docs/_core-concept/dataFlow.html +0 -177
  146. package/docs/crawl/docs/_core-concept/overview.html +0 -66
  147. package/docs/crawl/docs/_core-concept/subscriber.html +0 -75
  148. package/docs/crawl/docs/_decorators/ancestor-attribute.html +0 -116
  149. package/docs/crawl/docs/_decorators/auto-subscribe.html +0 -202
  150. package/docs/crawl/docs/_decorators/bind.html +0 -141
  151. package/docs/crawl/docs/_decorators/get.html +0 -149
  152. package/docs/crawl/docs/_decorators/handle.html +0 -165
  153. package/docs/crawl/docs/_decorators/on-assign.html +0 -355
  154. package/docs/crawl/docs/_decorators/patch.html +0 -78
  155. package/docs/crawl/docs/_decorators/post.html +0 -139
  156. package/docs/crawl/docs/_decorators/publish.html +0 -61
  157. package/docs/crawl/docs/_decorators/put.html +0 -78
  158. package/docs/crawl/docs/_decorators/subscribe.html +0 -109
  159. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +0 -137
  160. package/docs/crawl/docs/_directives/sub.html +0 -93
  161. package/docs/crawl/docs/_getting-started/ai-agents.html +0 -173
  162. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +0 -100
  163. package/docs/crawl/docs/_getting-started/concorde-outside.html +0 -58
  164. package/docs/crawl/docs/_getting-started/create-a-component.html +0 -111
  165. package/docs/crawl/docs/_getting-started/my-first-component.html +0 -189
  166. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +0 -110
  167. package/docs/crawl/docs/_getting-started/pubsub.html +0 -62
  168. package/docs/crawl/docs/_getting-started/start.html +0 -76
  169. package/docs/crawl/docs/_getting-started/theming.html +0 -85
  170. package/docs/crawl/docs/_misc/api-configuration.html +0 -149
  171. package/docs/crawl/docs/_misc/dataProviderKey.html +0 -135
  172. package/docs/crawl/docs/_misc/docs-mock-api.html +0 -158
  173. package/docs/crawl/docs/_misc/dynamic-path.html +0 -180
  174. package/docs/crawl/docs/_misc/endpoint.html +0 -50
  175. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +0 -138
  176. package/docs/crawl/docs/_misc/html-integration.html +0 -48
  177. package/docs/crawl/hubs/decorators.html +0 -547
  178. package/docs/crawl/hubs/form-components.html +0 -357
  179. package/docs/crawl/hubs/remote-data.html +0 -452
  180. package/docs/crawl/index.html +0 -101
  181. package/docs/css/docs.css +0 -0
  182. package/docs/docs-mock-api-sw.js +0 -720
  183. package/docs/docs-mock-api-sw.js.map +0 -7
  184. package/docs/fonts/ClashGrotesk-Bold.eot +0 -0
  185. package/docs/fonts/ClashGrotesk-Bold.ttf +0 -0
  186. package/docs/fonts/ClashGrotesk-Bold.woff +0 -0
  187. package/docs/fonts/ClashGrotesk-Bold.woff2 +0 -0
  188. package/docs/fonts/ClashGrotesk-Extralight.eot +0 -0
  189. package/docs/fonts/ClashGrotesk-Extralight.ttf +0 -0
  190. package/docs/fonts/ClashGrotesk-Extralight.woff +0 -0
  191. package/docs/fonts/ClashGrotesk-Extralight.woff2 +0 -0
  192. package/docs/fonts/ClashGrotesk-Light.eot +0 -0
  193. package/docs/fonts/ClashGrotesk-Light.ttf +0 -0
  194. package/docs/fonts/ClashGrotesk-Light.woff +0 -0
  195. package/docs/fonts/ClashGrotesk-Light.woff2 +0 -0
  196. package/docs/fonts/ClashGrotesk-Medium.eot +0 -0
  197. package/docs/fonts/ClashGrotesk-Medium.ttf +0 -0
  198. package/docs/fonts/ClashGrotesk-Medium.woff +0 -0
  199. package/docs/fonts/ClashGrotesk-Medium.woff2 +0 -0
  200. package/docs/fonts/ClashGrotesk-Regular.eot +0 -0
  201. package/docs/fonts/ClashGrotesk-Regular.ttf +0 -0
  202. package/docs/fonts/ClashGrotesk-Regular.woff +0 -0
  203. package/docs/fonts/ClashGrotesk-Regular.woff2 +0 -0
  204. package/docs/fonts/ClashGrotesk-Semibold.eot +0 -0
  205. package/docs/fonts/ClashGrotesk-Semibold.ttf +0 -0
  206. package/docs/fonts/ClashGrotesk-Semibold.woff +0 -0
  207. package/docs/fonts/ClashGrotesk-Semibold.woff2 +0 -0
  208. package/docs/fonts/ClashGrotesk-Variable.eot +0 -0
  209. package/docs/fonts/ClashGrotesk-Variable.ttf +0 -0
  210. package/docs/fonts/ClashGrotesk-Variable.woff +0 -0
  211. package/docs/fonts/ClashGrotesk-Variable.woff2 +0 -0
  212. package/docs/img/concorde-icon.svg +0 -5
  213. package/docs/img/concorde-logo.svg +0 -1
  214. package/docs/img/concorde.png +0 -0
  215. package/docs/img/concorde_def.png +0 -0
  216. package/docs/img/concorde_seuil.png.webp +0 -0
  217. package/docs/img/concorde_seuil_invert.png +0 -0
  218. package/docs/img/paul_metrand.jpg +0 -0
  219. package/docs/img/paul_metrand_xs.jpg +0 -0
  220. package/docs/index.html +0 -93
  221. package/docs/llms-full.txt +0 -5787
  222. package/docs/llms.txt +0 -104
  223. package/docs/robots.txt +0 -16
  224. package/docs/sitemap.xml +0 -237
  225. package/docs/src/core/components/functional/date/date.md +0 -290
  226. package/docs/src/core/components/functional/fetch/fetch.md +0 -125
  227. package/docs/src/core/components/functional/if/if.md +0 -9
  228. package/docs/src/core/components/functional/jsonata/jsonata.md +0 -56
  229. package/docs/src/core/components/functional/list/list.md +0 -65
  230. package/docs/src/core/components/functional/mix/mix.md +0 -41
  231. package/docs/src/core/components/functional/queue/queue.md +0 -72
  232. package/docs/src/core/components/functional/router/router.md +0 -94
  233. package/docs/src/core/components/functional/sdui/default-library.json +0 -108
  234. package/docs/src/core/components/functional/sdui/example.json +0 -99
  235. package/docs/src/core/components/functional/sdui/sdui.md +0 -356
  236. package/docs/src/core/components/functional/states/states.md +0 -87
  237. package/docs/src/core/components/functional/submit/submit.md +0 -114
  238. package/docs/src/core/components/functional/subscriber/subscriber.md +0 -91
  239. package/docs/src/core/components/functional/value/value.md +0 -35
  240. package/docs/src/core/components/ui/alert/alert.md +0 -121
  241. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -0
  242. package/docs/src/core/components/ui/badge/badge.md +0 -127
  243. package/docs/src/core/components/ui/button/button.md +0 -182
  244. package/docs/src/core/components/ui/captcha/captcha.md +0 -12
  245. package/docs/src/core/components/ui/card/card.md +0 -97
  246. package/docs/src/core/components/ui/divider/divider.md +0 -35
  247. package/docs/src/core/components/ui/form/checkbox/checkbox.md +0 -77
  248. package/docs/src/core/components/ui/form/fieldset/fieldset.md +0 -129
  249. package/docs/src/core/components/ui/form/form-actions/form-actions.md +0 -77
  250. package/docs/src/core/components/ui/form/form-layout/form-layout.md +0 -44
  251. package/docs/src/core/components/ui/form/input/input.md +0 -142
  252. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -133
  253. package/docs/src/core/components/ui/form/radio/radio.md +0 -57
  254. package/docs/src/core/components/ui/form/select/select.md +0 -71
  255. package/docs/src/core/components/ui/form/switch/switch.md +0 -57
  256. package/docs/src/core/components/ui/form/textarea/textarea.md +0 -65
  257. package/docs/src/core/components/ui/group/group.md +0 -75
  258. package/docs/src/core/components/ui/icon/icon.md +0 -125
  259. package/docs/src/core/components/ui/icon/icons.json +0 -1
  260. package/docs/src/core/components/ui/image/image.md +0 -107
  261. package/docs/src/core/components/ui/link/link.md +0 -43
  262. package/docs/src/core/components/ui/loader/loader.md +0 -55
  263. package/docs/src/core/components/ui/menu/menu.md +0 -329
  264. package/docs/src/core/components/ui/modal/modal.md +0 -119
  265. package/docs/src/core/components/ui/pop/pop.md +0 -96
  266. package/docs/src/core/components/ui/progress/progress.md +0 -63
  267. package/docs/src/core/components/ui/table/table.md +0 -455
  268. package/docs/src/core/components/ui/toast/toast.md +0 -166
  269. package/docs/src/core/components/ui/tooltip/tooltip.md +0 -82
  270. package/docs/src/docs/_core-concept/dataFlow.md +0 -88
  271. package/docs/src/docs/_core-concept/overview.md +0 -57
  272. package/docs/src/docs/_core-concept/subscriber.md +0 -75
  273. package/docs/src/docs/_decorators/ancestor-attribute.md +0 -127
  274. package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
  275. package/docs/src/docs/_decorators/bind.md +0 -167
  276. package/docs/src/docs/_decorators/get.md +0 -162
  277. package/docs/src/docs/_decorators/handle.md +0 -175
  278. package/docs/src/docs/_decorators/on-assign.md +0 -390
  279. package/docs/src/docs/_decorators/patch.md +0 -70
  280. package/docs/src/docs/_decorators/post.md +0 -146
  281. package/docs/src/docs/_decorators/publish.md +0 -55
  282. package/docs/src/docs/_decorators/put.md +0 -70
  283. package/docs/src/docs/_decorators/subscribe.md +0 -100
  284. package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
  285. package/docs/src/docs/_directives/sub.md +0 -91
  286. package/docs/src/docs/_getting-started/ai-agents.md +0 -76
  287. package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
  288. package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
  289. package/docs/src/docs/_getting-started/create-a-component.md +0 -139
  290. package/docs/src/docs/_getting-started/my-first-component.md +0 -236
  291. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
  292. package/docs/src/docs/_getting-started/pubsub.md +0 -37
  293. package/docs/src/docs/_getting-started/start.md +0 -47
  294. package/docs/src/docs/_getting-started/theming.md +0 -91
  295. package/docs/src/docs/_misc/api-configuration.md +0 -81
  296. package/docs/src/docs/_misc/dataProviderKey.md +0 -168
  297. package/docs/src/docs/_misc/docs-mock-api.md +0 -63
  298. package/docs/src/docs/_misc/dynamic-path.md +0 -71
  299. package/docs/src/docs/_misc/endpoint.md +0 -45
  300. package/docs/src/docs/_misc/formelement-subscriber-removal.md +0 -115
  301. package/docs/src/docs/_misc/html-integration.md +0 -15
  302. package/docs/src/docs/search/docs-search.json +0 -9512
  303. package/docs/src/tag-list.json +0 -1
  304. package/docs/src/tsconfig-model.json +0 -23
  305. package/docs/src/tsconfig.declarations.json +0 -22
  306. package/docs/src/tsconfig.emit.json +0 -23
  307. package/docs/src/tsconfig.json +0 -858
  308. package/docs/svg/regular/plane.svg +0 -1
  309. package/docs/svg/solid/plane.svg +0 -1
  310. package/gitlab/job_github_mirror.sh +0 -39
  311. package/scripts/github-export.mjs +0 -150
  312. package/src/css.d.ts +0 -19
  313. package/src/tsconfig.declarations.json +0 -22
  314. package/src/tsconfig.emit.json +0 -23
package/gitlab/job_tests.sh CHANGED
@@ -1,16 +1,14 @@
1
1
  #!/usr/bin/env bash
2
2
  # Tests CI de concorde : install + vitest (sans watch).
3
3
  #
4
- # Contexte : le runner shell (ssks7, hôte manu) checkout le code dans $CI_PROJECT_DIR
5
- # (sous /home/gitlab-runner/...), invisible depuis le conteneur nodejs.
4
+ # Contexte : le runner shell (ssks7) checkout le code dans $CI_PROJECT_DIR
5
+ # (sous /home/ssks/...), invisible depuis le conteneur nodejs.
6
6
  # Le conteneur nodejs monte /usr2/sites -> /sites. On copie donc le code du runner vers
7
- # un dossier CI DÉDIÉ et appartenant au runner : /usr2/sites/concorde-ci/<branche>
8
- # (= /sites/concorde-ci/<branche> dans le conteneur), puis on lance yarn dans le conteneur
9
- # nodejs existant via /scripts/cmd-yes.sh. Aucune image construite.
7
+ # un dossier CI sous /usr2/sites writable par le runner, puis on lance yarn dans le
8
+ # conteneur nodejs existant via /scripts/cmd-yes.sh. Aucune image construite.
10
9
  #
11
- # Pré-requis (une seule fois, en root sur manu) :
12
- # sudo mkdir -p /usr2/sites/concorde-ci
13
- # sudo chown -R gitlab-runner:gitlab-runner /usr2/sites/concorde-ci
10
+ # Si /usr2/sites/concorde-ci n'est pas writable (ex. tree laissé par un autre uid),
11
+ # on bascule automatiquement sur /usr2/sites/concorde-ci-u<uid>.
14
12
  #
15
13
  # Concorde n'est PAS un workspace -> commandes yarn directes.
16
14
  #
@@ -19,15 +17,30 @@
19
17
  set -euo pipefail
20
18
 
21
19
  NODEJS_CONTAINER=nodejs
22
- SITE_BASE="/usr2/sites/concorde-ci"
23
20
 
24
21
  # En pipeline de Merge Request, CI_COMMIT_BRANCH est vide -> fallback sur CI_COMMIT_REF_NAME.
25
22
  BRANCH="${CI_COMMIT_BRANCH:-${CI_COMMIT_REF_NAME:-ci}}"
23
+ RUN_UID="$(id -u):$(id -g)"
24
+ RUN_UID_NUM="$(id -u)"
25
+
26
+ # Dossier CI writable par le runner (évite Permission denied si un ancien tree
27
+ # appartient à un autre uid, ex. 1001 via docker -u 1001).
28
+ SITE_BASE="/usr2/sites/concorde-ci"
29
+ mkdir -p "$SITE_BASE" 2>/dev/null || true
30
+ if [[ ! -d "$SITE_BASE" || ! -w "$SITE_BASE" ]]; then
31
+ SITE_BASE="/usr2/sites/concorde-ci-u${RUN_UID_NUM}"
32
+ mkdir -p "$SITE_BASE"
33
+ fi
34
+
26
35
  SITE_PATH="$SITE_BASE/$BRANCH"
27
- SITE_CONTAINER_PATH="/sites/concorde-ci/$BRANCH"
36
+ if [[ -e "$SITE_PATH" && ! -w "$SITE_PATH" ]]; then
37
+ SITE_BASE="/usr2/sites/concorde-ci-u${RUN_UID_NUM}"
38
+ mkdir -p "$SITE_BASE"
39
+ SITE_PATH="$SITE_BASE/$BRANCH"
40
+ fi
28
41
 
29
- # On exécute le conteneur avec l'uid du runner (cohérence des droits en écriture).
30
- RUN_UID="$(id -u):$(id -g)"
42
+ # /usr2/sites/<...> -> /sites/<...> dans le conteneur.
43
+ SITE_CONTAINER_PATH="/sites/${SITE_BASE#/usr2/sites/}/$BRANCH"
31
44
 
32
45
  echo "=== Configuration ==="
33
46
  echo "- CI_PROJECT_DIR '$CI_PROJECT_DIR'"
package/index.html CHANGED
@@ -1,11 +1,11 @@
1
- <!DOCTYPE html>
1
+ <!doctype html>
2
2
  <html lang="fr">
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
5
  <link rel="icon" type="image/svg+xml" href="./svg/favicon.svg" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <meta name="robots" content="noindex, nofollow" />
8
7
  <title>Concorde - A supersonic design system</title>
8
+ <link rel="stylesheet" href="https://use.typekit.net/eda3clw.css" />
9
9
  <script src="https://cdn.jsdelivr.net/npm/fuzzysort@2.0.1/fuzzysort.min.js"></script>
10
10
  <!-- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
11
11
  -->
@@ -84,7 +84,7 @@
84
84
  <div class="min-h-[100vh] pt-3">
85
85
  <docs-page
86
86
  noShadowDom
87
- class="prose lg:prose-lg max-w-prose block py-8 prose-li:my-[.2em] leading-[1.5] lg:leading-[1.5] prose-h1:font-normal prose-h1:text-[4.2em]"
87
+ class="prose max-w-prose block py-8 prose-li:my-[.2em] leading-[1.5] lg:leading-[1.5] prose-h1:font-normal prose-h1:text-[3.25em] prose-code:before:content-none prose-code:after:content-none prose-pre:font-mono"
88
88
  ></docs-page>
89
89
  </div>
90
90
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@supersoniks/concorde",
3
- "version": "5.0.0",
3
+ "version": "5.0.2",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "",
@@ -96,6 +96,9 @@
96
96
  "./functional/translation": "./src/core/components/functional/translation/translation.ts",
97
97
  "./value": "./src/core/components/functional/value/value.ts",
98
98
  "./functional/value": "./src/core/components/functional/value/value.ts",
99
+ "./rounded": "./src/core/components/ui/_css/rounded.ts",
100
+ "./ui/rounded": "./src/core/components/ui/_css/rounded.ts",
101
+ "./ui/_css/rounded": "./src/core/components/ui/_css/rounded.ts",
99
102
  "./scroll": "./src/core/components/ui/_css/scroll.ts",
100
103
  "./ui/scroll": "./src/core/components/ui/_css/scroll.ts",
101
104
  "./ui/_css/scroll": "./src/core/components/ui/_css/scroll.ts",
@@ -108,6 +111,12 @@
108
111
  "./type": "./src/core/components/ui/_css/type.ts",
109
112
  "./ui/type": "./src/core/components/ui/_css/type.ts",
110
113
  "./ui/_css/type": "./src/core/components/ui/_css/type.ts",
114
+ "./ui-aria-labels": "./src/core/components/ui/_i18n/ui-aria-labels.ts",
115
+ "./ui/ui-aria-labels": "./src/core/components/ui/_i18n/ui-aria-labels.ts",
116
+ "./ui/_i18n/ui-aria-labels": "./src/core/components/ui/_i18n/ui-aria-labels.ts",
117
+ "./alert.spec": "./src/core/components/ui/alert/alert.spec.ts",
118
+ "./ui/alert.spec": "./src/core/components/ui/alert/alert.spec.ts",
119
+ "./ui/alert/alert.spec": "./src/core/components/ui/alert/alert.spec.ts",
111
120
  "./alert": "./src/core/components/ui/alert/alert.ts",
112
121
  "./ui/alert": "./src/core/components/ui/alert/alert.ts",
113
122
  "./alert-messages": "./src/core/components/ui/alert-messages/alert-messages.ts",
@@ -270,6 +279,9 @@
270
279
  "./ui/theme/light": "./src/core/components/ui/theme/theme-collection/light.ts",
271
280
  "./theme": "./src/core/components/ui/theme/theme.ts",
272
281
  "./ui/theme": "./src/core/components/ui/theme/theme.ts",
282
+ "./dismissed": "./src/core/components/ui/toast/dismissed.ts",
283
+ "./ui/dismissed": "./src/core/components/ui/toast/dismissed.ts",
284
+ "./ui/toast/dismissed": "./src/core/components/ui/toast/dismissed.ts",
273
285
  "./message-subscriber": "./src/core/components/ui/toast/message-subscriber.ts",
274
286
  "./ui/message-subscriber": "./src/core/components/ui/toast/message-subscriber.ts",
275
287
  "./ui/toast/message-subscriber": "./src/core/components/ui/toast/message-subscriber.ts",
@@ -340,11 +352,14 @@
340
352
  "./utils/dataProviderKey": "./src/core/utils/dataProviderKey.ts",
341
353
  "./utils/derive.spec": "./src/core/utils/derive.spec.ts",
342
354
  "./utils/derive": "./src/core/utils/derive.ts",
355
+ "./utils/dismissed": "./src/core/utils/dismissed.ts",
343
356
  "./utils/dpOptions.spec": "./src/core/utils/dpOptions.spec.ts",
344
357
  "./utils/endpoint.spec": "./src/core/utils/endpoint.spec.ts",
345
358
  "./utils/endpoint": "./src/core/utils/endpoint.ts",
346
359
  "./utils/jsonataHelpers": "./src/core/utils/jsonataHelpers.ts",
347
360
  "./utils/jsonataRuntime": "./src/core/utils/jsonataRuntime.ts",
361
+ "./utils/positioning.spec": "./src/core/utils/positioning.spec.ts",
362
+ "./utils/positioning": "./src/core/utils/positioning.ts",
348
363
  "./utils/publisherPathKey.spec": "./src/core/utils/publisherPathKey.spec.ts",
349
364
  "./utils/route.spec": "./src/core/utils/route.spec.ts",
350
365
  "./utils/route": "./src/core/utils/route.ts",
package/scripts/post-build-docs.js CHANGED
File without changes
package/scripts/post-build.mjs CHANGED
File without changes
package/src/core/components/functional/fetch/fetch.md CHANGED
File without changes
package/src/core/components/functional/if/if.md CHANGED
File without changes
package/src/core/components/functional/list/list.demo.ts CHANGED
File without changes
package/src/core/components/functional/list/list.md CHANGED
File without changes
package/src/core/components/functional/list/list.ts CHANGED
File without changes
package/src/core/components/functional/router/router.md CHANGED
File without changes
package/src/core/components/functional/router/router.ts CHANGED
File without changes
package/src/core/components/functional/sdui/sdui.md CHANGED
File without changes
package/src/core/components/functional/states/states.md CHANGED
File without changes
package/src/core/components/functional/submit/submit.md CHANGED
File without changes
package/src/core/components/ui/_css/rounded.ts ADDED
@@ -0,0 +1,36 @@
1
+ import { css } from "lit";
2
+
3
+ export type Rounded = "" | "base" | "none" | "full" | "sm" | "md" | "lg" | "xl";
4
+
5
+ export const hostRounded = css`
6
+ :host {
7
+ --sc-_rounded: 0;
8
+ border-radius: var(--sc-_rounded);
9
+ }
10
+ :host([rounded]),
11
+ :host([rounded="base"]) {
12
+ --sc-_rounded: var(--sc-rounded);
13
+ overflow: hidden;
14
+ }
15
+ :host([rounded="sm"]) {
16
+ --sc-_rounded: var(--sc-rounded-sm);
17
+ }
18
+
19
+ :host([rounded="md"]) {
20
+ --sc-_rounded: var(--sc-rounded-md);
21
+ }
22
+
23
+ :host([rounded="lg"]) {
24
+ --sc-_rounded: var(--sc-rounded-lg);
25
+ }
26
+ :host([rounded="xl"]) {
27
+ --sc-_rounded: var(--sc-rounded-xl);
28
+ }
29
+
30
+ :host([rounded="full"]) {
31
+ --sc-_rounded: 50% !important;
32
+ }
33
+ :host([rounded="none"]) {
34
+ --sc-_rounded: 0 !important;
35
+ }
36
+ `;
package/src/core/components/ui/_css/size.ts CHANGED
File without changes
package/src/core/components/ui/_css/type.ts CHANGED
@@ -1,5 +1,54 @@
1
1
  import { css } from "lit";
2
2
 
3
+ /** Icônes pour les composants à `status` (API messages, alert, toast). */
4
+ export const statusIcon = {
5
+ default: "info-empty",
6
+ info: "info-empty",
7
+ success: "check-circled-outline",
8
+ warning: "warning-circled-outline",
9
+ error: "warning-circled-outline",
10
+ };
11
+
12
+ export type StatusIconKey = keyof typeof statusIcon;
13
+
14
+ export function toStatus(value?: string): StatusIconKey | undefined {
15
+ if (!value) return undefined;
16
+ if (value === "danger") return "error";
17
+ return value in statusIcon ? (value as StatusIconKey) : undefined;
18
+ }
19
+
20
+ export function statusAriaRole(status?: StatusIconKey): "alert" | "status" {
21
+ return status === "error" ? "alert" : "status";
22
+ }
23
+
24
+ export function statusAriaLive(status?: StatusIconKey): "polite" | null {
25
+ return status === "error" ? null : "polite";
26
+ }
27
+
28
+ export const statusColor = css`
29
+ :host {
30
+ --sc-_color: var(--sc-base-content, #000);
31
+ color: var(--sc-_color);
32
+ }
33
+
34
+ :host([status="warning"]) {
35
+ --sc-_color: var(--sc-warning, var(--sc-base-content, #000));
36
+ }
37
+ :host([status="error"]) {
38
+ --sc-_color: var(--sc-danger, var(--sc-base-content, #000));
39
+ }
40
+ :host([status="info"]) {
41
+ --sc-_color: var(--sc-info, var(--sc-base-content, #000));
42
+ }
43
+ :host([status="success"]) {
44
+ --sc-_color: var(--sc-success, var(--sc-base-content, #000));
45
+ }
46
+
47
+ .inherit-color {
48
+ color: var(--sc-_color);
49
+ }
50
+ `;
51
+
3
52
  export const typeColor = css`
4
53
  :host {
5
54
  --sc-_color: inherit;
package/src/core/components/ui/_i18n/ui-aria-labels.ts ADDED
@@ -0,0 +1,104 @@
1
+ import HTML from "@supersoniks/concorde/core/utils/HTML";
2
+
3
+ /** Langues supportées pour les libellés ARIA UI (anglais par défaut). */
4
+ export type UiLang = "en" | "fr" | "de" | "nl" | "es" | "it";
5
+
6
+ export type UiLabelDict = Partial<Record<UiLang, string>> & { en: string };
7
+
8
+ const supported = new Set<string>(["en", "fr", "de", "nl", "es", "it"]);
9
+
10
+ /** Lit la langue courante à chaque appel (pas d'état par composant). */
11
+ export function resolveUiLabel(dict: UiLabelDict, lang?: string): string {
12
+ const code = (lang ?? HTML.getLanguage() ?? "en").split("-")[0].toLowerCase();
13
+ if (supported.has(code) && dict[code as UiLang]) {
14
+ return dict[code as UiLang]!;
15
+ }
16
+ return dict.en;
17
+ }
18
+
19
+ export const uiAriaLabels = {
20
+ closeWindow: {
21
+ en: "Close window",
22
+ fr: "Fermer la fenêtre",
23
+ de: "Fenster schließen",
24
+ nl: "Venster sluiten",
25
+ es: "Cerrar ventana",
26
+ it: "Chiudi finestra",
27
+ },
28
+ closeAlert: {
29
+ en: "Close",
30
+ fr: "Fermer",
31
+ de: "Schließen",
32
+ nl: "Sluiten",
33
+ es: "Cerrar",
34
+ it: "Chiudi",
35
+ },
36
+ showPassword: {
37
+ en: "Show password",
38
+ fr: "Afficher le mot de passe",
39
+ de: "Passwort anzeigen",
40
+ nl: "Wachtwoord tonen",
41
+ es: "Mostrar contraseña",
42
+ it: "Mostra password",
43
+ },
44
+ hidePassword: {
45
+ en: "Hide password",
46
+ fr: "Masquer le mot de passe",
47
+ de: "Passwort ausblenden",
48
+ nl: "Wachtwoord verbergen",
49
+ es: "Ocultar contraseña",
50
+ it: "Nascondi password",
51
+ },
52
+ closeToast: {
53
+ en: "Close notification",
54
+ fr: "Fermer la notification",
55
+ de: "Benachrichtigung schließen",
56
+ nl: "Melding sluiten",
57
+ es: "Cerrar notificación",
58
+ it: "Chiudi notifica",
59
+ },
60
+ closeToastError: {
61
+ en: "Close error message",
62
+ fr: "Fermer le message d'erreur",
63
+ de: "Fehlermeldung schließen",
64
+ nl: "Foutmelding sluiten",
65
+ es: "Cerrar mensaje de error",
66
+ it: "Chiudi messaggio di errore",
67
+ },
68
+ closeToastWarning: {
69
+ en: "Close warning",
70
+ fr: "Fermer l'avertissement",
71
+ de: "Warnung schließen",
72
+ nl: "Waarschuwing sluiten",
73
+ es: "Cerrar advertencia",
74
+ it: "Chiudi avviso",
75
+ },
76
+ closeToastSuccess: {
77
+ en: "Close success message",
78
+ fr: "Fermer le message de succès",
79
+ de: "Erfolgsmeldung schließen",
80
+ nl: "Succesmelding sluiten",
81
+ es: "Cerrar mensaje de éxito",
82
+ it: "Chiudi messaggio di successo",
83
+ },
84
+ closeToastInfo: {
85
+ en: "Close information message",
86
+ fr: "Fermer l'information",
87
+ de: "Information schließen",
88
+ nl: "Informatie sluiten",
89
+ es: "Cerrar información",
90
+ it: "Chiudi informazione",
91
+ },
92
+ } as const satisfies Record<string, UiLabelDict>;
93
+
94
+ const toastCloseByStatus: Record<string, UiLabelDict> = {
95
+ error: uiAriaLabels.closeToastError,
96
+ warning: uiAriaLabels.closeToastWarning,
97
+ success: uiAriaLabels.closeToastSuccess,
98
+ info: uiAriaLabels.closeToastInfo,
99
+ };
100
+
101
+ export function resolveToastCloseLabel(status?: string): string {
102
+ const dict = status ? toastCloseByStatus[status] : undefined;
103
+ return resolveUiLabel(dict ?? uiAriaLabels.closeToast);
104
+ }
package/src/core/components/ui/alert/alert.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # Alert
2
2
 
3
+ Inline message in the page: title (`label`), body (`text` or default slot), icon from `status`. For HTML or actions, use the slot instead of `label` / `text` (plain text only).
4
+
5
+ Use **`status`**: `default`, `info`, `success`, `warning`, `error`.
6
+
3
7
  <sonic-code>
4
8
  <template>
5
9
  <sonic-alert status="error" label="Email error" text="This address is already in use" background></sonic-alert>
@@ -8,15 +12,52 @@
8
12
 
9
13
  ## Status
10
14
 
15
+ Color and icon follow `status`. With no `status`, behavior is `default`.
16
+
11
17
  <sonic-code>
12
18
  <template>
13
- <div class="grid gap-4">
14
- <sonic-alert label="Default"> This address is already in use. </sonic-alert>
15
- <sonic-alert status="success" label="Success"> This address is already in use. </sonic-alert>
16
- <sonic-alert status="error" label="Error"> This address is already in use. </sonic-alert>
17
- <sonic-alert status="warning" label="Warning"> This address is already in use. </sonic-alert>
18
- <sonic-alert status="info" label="Info"> This address is already in use. </sonic-alert>
19
- </div>
19
+ <div class="grid gap-4">
20
+ <sonic-alert label="Default">This address is already in use.</sonic-alert>
21
+ <sonic-alert status="success" label="Success">This address is already in use.</sonic-alert>
22
+ <sonic-alert status="error" label="Error">This address is already in use.</sonic-alert>
23
+ <sonic-alert status="warning" label="Warning">This address is already in use.</sonic-alert>
24
+ <sonic-alert status="info" label="Info">This address is already in use.</sonic-alert>
25
+ </div>
26
+ </template>
27
+ </sonic-code>
28
+
29
+ ## Accessibility (`announce`)
30
+
31
+ By default, an alert already in the DOM is **not** announced (no `role` / `aria-live`). Set **`announce`** when the message appears **after** user action (API response, validation, etc.): screen readers get `role="alert"` for `error`, otherwise `role="status"` and `aria-live="polite"`.
32
+
33
+ `sonic-alert-messages` sets `announce` on every rendered alert.
34
+
35
+ <sonic-code>
36
+ <template>
37
+ <sonic-alert announce status="success" label="Saved" text="Your changes were saved."></sonic-alert>
38
+ </template>
39
+ </sonic-code>
40
+
41
+ ## Content and icon
42
+
43
+ `label` and `text` accept plain text only. The default slot is rendered after `text`. Use the **`icon`** slot to replace the default `sonic-icon`. **`noIcon`** hides the icon.
44
+
45
+ <sonic-code>
46
+ <template>
47
+ <sonic-alert status="info" noIcon label="No icon" text="Informational message."></sonic-alert>
48
+ </template>
49
+ </sonic-code>
50
+
51
+ ## Custom icon slot
52
+
53
+ Project any markup into **`slot="icon"`** (emoji, image, custom component). Keep it decorative with `aria-hidden="true"` when the message text already conveys meaning.
54
+
55
+ <sonic-code>
56
+ <template>
57
+ <sonic-alert status="success" label="Achievement unlocked" background>
58
+ <span slot="icon" aria-hidden="true" class="text-lg leading-none">🎉</span>
59
+ You unlocked a new badge.
60
+ </sonic-alert>
20
61
  </template>
21
62
  </sonic-code>
22
63
 
@@ -24,98 +65,113 @@
24
65
 
25
66
  <sonic-code>
26
67
  <template>
27
- <div class="grid gap-4">
28
- <sonic-alert status="error" label="Email error" size="2xs">
29
- This address is already in use. Lorem ipsum dolor sit amet.
30
- </sonic-alert>
31
- <sonic-alert status="error" label="Email error" size="xs">
32
- This address is already in use. Lorem ipsum dolor sit amet.
33
- </sonic-alert>
34
- <sonic-alert status="error" label="Email error" size="sm">
35
- This address is already in use. Lorem ipsum dolor sit amet.
36
- </sonic-alert>
37
- <sonic-alert status="error" label="Email error">
38
- This address is already in use. Lorem ipsum dolor sit amet.
39
- </sonic-alert>
40
- <sonic-alert status="error" label="Email error" size="lg">
41
- This address is already in use. Lorem ipsum dolor sit amet.
42
- </sonic-alert>
43
- <sonic-alert status="error" label="Email error" size="xl">
44
- This address is already in use. Lorem ipsum dolor sit amet.
45
- </sonic-alert>
46
- <sonic-alert status="error" label="Email error" size="2xl">
47
- This address is already in use. Lorem ipsum dolor sit amet.
48
- </sonic-alert>
49
- </div>
68
+ <div class="grid gap-4">
69
+ <sonic-alert status="error" label="Email error" size="2xs">
70
+ This address is already in use. Lorem ipsum dolor sit amet.
71
+ </sonic-alert>
72
+ <sonic-alert status="error" label="Email error" size="xs">
73
+ This address is already in use. Lorem ipsum dolor sit amet.
74
+ </sonic-alert>
75
+ <sonic-alert status="error" label="Email error" size="sm">
76
+ This address is already in use. Lorem ipsum dolor sit amet.
77
+ </sonic-alert>
78
+ <sonic-alert status="error" label="Email error">
79
+ This address is already in use. Lorem ipsum dolor sit amet.
80
+ </sonic-alert>
81
+ <sonic-alert status="error" label="Email error" size="lg">
82
+ This address is already in use. Lorem ipsum dolor sit amet.
83
+ </sonic-alert>
84
+ <sonic-alert status="error" label="Email error" size="xl">
85
+ This address is already in use. Lorem ipsum dolor sit amet.
86
+ </sonic-alert>
87
+ <sonic-alert status="error" label="Email error" size="2xl">
88
+ This address is already in use. Lorem ipsum dolor sit amet.
89
+ </sonic-alert>
90
+ </div>
50
91
  </template>
51
92
  </sonic-code>
52
93
 
53
94
  ## Alert with link
54
95
 
96
+ Rich content in the slot (buttons, links).
97
+
55
98
  <sonic-code>
56
99
  <template>
57
- <sonic-alert status="info" label="New messages !">
58
- You have 2 unread messages<br />
59
- <div class="flex gap-2 mt-1">
60
- <sonic-button variant="outline" type="info" size="xs">See messages</sonic-button>
61
- <sonic-button variant="ghost" type="info" size="xs">dismiss</sonic-button>
62
- </div>
63
- </sonic-alert>
100
+ <sonic-alert status="info" label="New messages !">
101
+ You have 2 unread messages<br />
102
+ <div class="flex gap-2 mt-1">
103
+ <sonic-button variant="outline" type="info" size="xs">See messages</sonic-button>
104
+ <sonic-button variant="ghost" type="info" size="xs">Dismiss</sonic-button>
105
+ </div>
106
+ </sonic-alert>
64
107
  </template>
65
108
  </sonic-code>
66
109
 
67
110
  ## Background
68
111
 
112
+ Tinted background from the `status` color (`color-mix` on `currentColor`).
113
+
69
114
  <sonic-code>
70
115
  <template>
71
- <div class="grid gap-4">
72
- <sonic-alert background label="Lorem ipsum dolor">
73
- This address is already in use.
74
- </sonic-alert>
75
- <sonic-alert status="success" background label="Lorem ipsum dolor">
76
- This address is already in use.
77
- </sonic-alert>
78
- <sonic-alert status="error" background label="Lorem ipsum dolor">
79
- This address is already in use.
80
- </sonic-alert>
81
- <sonic-alert status="warning" background label="Lorem ipsum dolor">
82
- This address is already in use.
83
- </sonic-alert>
84
- <sonic-alert status="info" background label="Lorem ipsum dolor">
85
- This address is already in use.
86
- </sonic-alert>
87
- </div>
116
+ <div class="grid gap-4">
117
+ <sonic-alert background label="Lorem ipsum dolor">This address is already in use.</sonic-alert>
118
+ <sonic-alert status="success" background label="Lorem ipsum dolor">
119
+ This address is already in use.
120
+ </sonic-alert>
121
+ <sonic-alert status="error" background label="Lorem ipsum dolor">
122
+ This address is already in use.
123
+ </sonic-alert>
124
+ <sonic-alert status="warning" background label="Lorem ipsum dolor">
125
+ This address is already in use.
126
+ </sonic-alert>
127
+ <sonic-alert status="info" background label="Lorem ipsum dolor">
128
+ This address is already in use.
129
+ </sonic-alert>
130
+ </div>
88
131
  </template>
89
132
  </sonic-code>
90
133
 
91
134
  ## Dismissible
92
135
 
136
+ `dismissible` removes the alert from the DOM when the close control is clicked (i18n aria label). **`dismissible`** and **`background`** are independent: without `background`, close sits at the end of the row; with `background`, top-right.
137
+
93
138
  <sonic-code>
94
139
  <template>
95
- <sonic-alert class="mb-3" dismissible label="Lorem ipsum dolor">
96
- This address is already in use.
97
- </sonic-alert>
98
- <sonic-alert status="success" class="mb-3" dismissible label="Lorem ipsum dolor">
99
- This address is already in use.
100
- </sonic-alert>
101
- <sonic-alert status="error" class="mb-3" dismissible label="Lorem ipsum dolor">
102
- This address is already in use.
103
- </sonic-alert>
104
- <sonic-alert status="warning" class="mb-3" dismissible label="Lorem ipsum dolor">
105
- This address is already in use.
106
- </sonic-alert>
107
- <sonic-alert status="info" class="mb-3" dismissible label="Lorem ipsum dolor">
108
- This address is already in use.
109
- </sonic-alert>
140
+ <sonic-alert status="info" class="mb-3" dismissible label="This address is already in use.">
141
+ </sonic-alert>
142
+ <sonic-alert class="mb-3" dismissible background label="Lorem ipsum dolor">
143
+ This address is already in use.
144
+ </sonic-alert>
145
+ <sonic-alert status="success" class="mb-3" dismissible background label="Lorem ipsum dolor">
146
+ This address is already in use.
147
+ </sonic-alert>
148
+ <sonic-alert status="error" class="mb-3" dismissible background label="Lorem ipsum dolor">
149
+ This address is already in use.
150
+ </sonic-alert>
151
+ <sonic-alert status="warning" class="mb-3" dismissible background label="Lorem ipsum dolor">
152
+ This address is already in use.
153
+ </sonic-alert>
154
+ <sonic-alert status="info" class="mb-3" dismissible background label="Lorem ipsum dolor">
155
+ This address is already in use.
156
+ </sonic-alert>
110
157
  </template>
111
158
  </sonic-code>
112
159
 
113
160
  ## Dismiss forever
114
161
 
162
+ With **`dismissForever`**, dismissal is stored in `localStorage` (key `sonic-alert-dismissed`). A stable **`id`** on the element is **required**; without `id`, a warning is logged and nothing is persisted.
163
+
115
164
  <sonic-code>
116
165
  <template>
117
- <sonic-alert class="mb-3" dismissible dismissForever label="Lorem ipsum dolor" id="addressUniqueId">
118
- This address is already in use.
119
- </sonic-alert>
166
+ <sonic-alert
167
+ class="mb-3"
168
+ dismissible
169
+ background
170
+ dismissForever
171
+ label="Lorem ipsum dolor"
172
+ id="addressUniqueId"
173
+ >
174
+ This address is already in use.
175
+ </sonic-alert>
120
176
  </template>
121
177
  </sonic-code>