@supersoniks/concorde 5.0.4 → 5.0.5

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 (208) hide show
  1. package/.agents/skills/concorde-component-docs/SKILL.md +194 -0
  2. package/.agents/skills/concorde-component-docs/template.md +45 -0
  3. package/ai/cursor/rules/concorde-theme.mdc +1 -1
  4. package/ai/cursor/rules/concorde.mdc +1 -1
  5. package/ai/skills/concorde/SKILL.md +1 -1
  6. package/ai/skills/concorde-theme/SKILL.md +21 -10
  7. package/build-infos.json +1 -1
  8. package/concorde-core.bundle.js +528 -534
  9. package/concorde-core.es.js +4257 -4212
  10. package/dist/concorde-core.bundle.js +528 -534
  11. package/dist/concorde-core.es.js +4257 -4212
  12. package/dist/docs-mock-api-sw.js +2 -0
  13. package/dist/docs-mock-api-sw.js.map +2 -2
  14. package/docs/assets/index-CD4WyL6o.css +1 -0
  15. package/docs/assets/{index-D8MVWqY6.js → index-wVZpLVYW.js} +1221 -1350
  16. package/docs/crawl/core/components/ui/alert/alert.html +172 -71
  17. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +113 -5
  18. package/docs/crawl/core/components/ui/badge/badge.html +157 -79
  19. package/docs/crawl/core/components/ui/button/button.html +1 -0
  20. package/docs/crawl/core/components/ui/captcha/captcha.html +90 -8
  21. package/docs/crawl/core/components/ui/card/card.html +222 -68
  22. package/docs/crawl/core/components/ui/divider/divider.html +117 -31
  23. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +232 -101
  24. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +95 -52
  25. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +97 -38
  26. package/docs/crawl/core/components/ui/form/input/input.html +3 -3
  27. package/docs/crawl/core/components/ui/form/textarea/textarea.html +3 -3
  28. package/docs/crawl/core/components/ui/group/group.html +60 -38
  29. package/docs/crawl/core/components/ui/icon/icon.html +136 -47
  30. package/docs/crawl/core/components/ui/image/image.html +244 -56
  31. package/docs/crawl/core/components/ui/link/link.html +67 -9
  32. package/docs/crawl/core/components/ui/loader/loader.html +97 -23
  33. package/docs/crawl/core/components/ui/menu/menu.html +162 -90
  34. package/docs/crawl/core/components/ui/modal/modal.html +275 -50
  35. package/docs/crawl/core/components/ui/pop/pop.html +260 -66
  36. package/docs/crawl/core/components/ui/progress/progress.html +103 -30
  37. package/docs/crawl/core/components/ui/table/table.html +303 -171
  38. package/docs/crawl/core/components/ui/theme/theme.html +131 -0
  39. package/docs/crawl/core/components/ui/toast/toast.html +170 -59
  40. package/docs/crawl/core/components/ui/tooltip/tooltip.html +90 -29
  41. package/docs/crawl/docs/_decorators/ancestor-attribute.html +3 -2
  42. package/docs/crawl/docs/_getting-started/concorde-outside.html +3 -3
  43. package/docs/crawl/docs/_getting-started/start.html +1 -1
  44. package/docs/crawl/docs/_getting-started/theming.html +311 -63
  45. package/docs/crawl/hubs/form-components.html +75 -53
  46. package/docs/crawl/index.html +7 -6
  47. package/docs/docs-mock-api-sw.js +2 -0
  48. package/docs/docs-mock-api-sw.js.map +2 -2
  49. package/docs/index.html +9 -7
  50. package/docs/llms-full.txt +1703 -456
  51. package/docs/llms.txt +25 -32
  52. package/docs/sitemap.xml +3 -0
  53. package/docs/src/core/components/functional/fetch/fetch.md +0 -0
  54. package/docs/src/core/components/functional/if/if.md +0 -0
  55. package/docs/src/core/components/functional/list/list.md +0 -0
  56. package/docs/src/core/components/functional/router/router.md +0 -0
  57. package/docs/src/core/components/functional/sdui/sdui.md +0 -0
  58. package/docs/src/core/components/functional/states/states.md +0 -0
  59. package/docs/src/core/components/functional/submit/submit.md +0 -0
  60. package/docs/src/core/components/ui/alert/alert.md +147 -72
  61. package/docs/src/core/components/ui/alert-messages/alert-messages.md +85 -0
  62. package/docs/src/core/components/ui/badge/badge.md +141 -80
  63. package/docs/src/core/components/ui/button/button.md +1 -0
  64. package/docs/src/core/components/ui/captcha/captcha.md +65 -6
  65. package/docs/src/core/components/ui/card/card.md +183 -65
  66. package/docs/src/core/components/ui/divider/divider.md +107 -13
  67. package/docs/src/core/components/ui/form/fieldset/fieldset.md +175 -99
  68. package/docs/src/core/components/ui/form/form-actions/form-actions.md +75 -52
  69. package/docs/src/core/components/ui/form/form-layout/form-layout.md +109 -34
  70. package/docs/src/core/components/ui/form/input/input.md +1 -1
  71. package/docs/src/core/components/ui/form/radio/radio.md +0 -0
  72. package/docs/src/core/components/ui/form/select/select.md +0 -0
  73. package/docs/src/core/components/ui/form/switch/switch.md +0 -0
  74. package/docs/src/core/components/ui/form/textarea/textarea.md +1 -1
  75. package/docs/src/core/components/ui/group/group.md +36 -36
  76. package/docs/src/core/components/ui/icon/icon.md +132 -43
  77. package/docs/src/core/components/ui/image/image.md +179 -53
  78. package/docs/src/core/components/ui/link/link.md +45 -7
  79. package/docs/src/core/components/ui/loader/loader.md +79 -22
  80. package/docs/src/core/components/ui/menu/menu.md +133 -92
  81. package/docs/src/core/components/ui/modal/modal.md +163 -47
  82. package/docs/src/core/components/ui/pop/pop.md +262 -64
  83. package/docs/src/core/components/ui/progress/progress.md +76 -30
  84. package/docs/src/core/components/ui/table/table.md +147 -171
  85. package/docs/src/core/components/ui/theme/theme.md +122 -0
  86. package/docs/src/core/components/ui/toast/toast.md +108 -58
  87. package/docs/src/core/components/ui/tooltip/tooltip.md +68 -26
  88. package/docs/src/docs/_core-concept/subscriber.md +0 -0
  89. package/docs/src/docs/_decorators/ancestor-attribute.md +3 -2
  90. package/docs/src/docs/_getting-started/concorde-outside.md +3 -3
  91. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -0
  92. package/docs/src/docs/_getting-started/pubsub.md +0 -0
  93. package/docs/src/docs/_getting-started/start.md +1 -1
  94. package/docs/src/docs/_getting-started/theming.md +223 -61
  95. package/docs/src/docs/search/docs-search.json +3083 -348
  96. package/docs/src/tsconfig.json +63 -3
  97. package/gitlab/job_tests.sh +0 -0
  98. package/index.html +4 -2
  99. package/package.json +7 -1
  100. package/public/docs-mock-api-sw.js +2 -0
  101. package/public/docs-mock-api-sw.js.map +2 -2
  102. package/scripts/post-build-docs.js +0 -0
  103. package/scripts/post-build.mjs +0 -0
  104. package/src/core/components/functional/fetch/fetch.md +0 -0
  105. package/src/core/components/functional/if/if.md +0 -0
  106. package/src/core/components/functional/list/list.demo.ts +0 -0
  107. package/src/core/components/functional/list/list.md +0 -0
  108. package/src/core/components/functional/router/router.md +0 -0
  109. package/src/core/components/functional/router/router.ts +0 -0
  110. package/src/core/components/functional/sdui/sdui.md +0 -0
  111. package/src/core/components/functional/states/states.md +0 -0
  112. package/src/core/components/functional/submit/submit.md +0 -0
  113. package/src/core/components/functional/subscriber/subscriber.ts +0 -0
  114. package/src/core/components/ui/_css/align.ts +1 -0
  115. package/src/core/components/ui/_css/size.ts +0 -0
  116. package/src/core/components/ui/_css/type.ts +86 -8
  117. package/src/core/components/ui/_i18n/ui-aria-labels.ts +8 -0
  118. package/src/core/components/ui/alert/alert.md +21 -2
  119. package/src/core/components/ui/alert-messages/alert-messages.md +85 -0
  120. package/src/core/components/ui/badge/badge.md +19 -6
  121. package/src/core/components/ui/badge/badge.ts +8 -9
  122. package/src/core/components/ui/button/button.ts +5 -15
  123. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  124. package/src/core/components/ui/captcha/captcha.md +65 -6
  125. package/src/core/components/ui/card/card.md +73 -10
  126. package/src/core/components/ui/card/card.ts +24 -22
  127. package/src/core/components/ui/divider/divider.md +107 -13
  128. package/src/core/components/ui/divider/divider.ts +40 -33
  129. package/src/core/components/ui/form/fieldset/fieldset.md +175 -99
  130. package/src/core/components/ui/form/fieldset/fieldset.ts +15 -28
  131. package/src/core/components/ui/form/fieldset/legend.ts +13 -13
  132. package/src/core/components/ui/form/form-actions/form-actions.md +75 -52
  133. package/src/core/components/ui/form/form-actions/form-actions.ts +7 -5
  134. package/src/core/components/ui/form/form-layout/form-layout.md +109 -34
  135. package/src/core/components/ui/form/form-layout/form-layout.ts +27 -24
  136. package/src/core/components/ui/form/radio/radio.md +0 -0
  137. package/src/core/components/ui/form/select/select.md +0 -0
  138. package/src/core/components/ui/form/switch/switch.md +0 -0
  139. package/src/core/components/ui/form/textarea/textarea.ts +4 -3
  140. package/src/core/components/ui/group/group.md +36 -36
  141. package/src/core/components/ui/group/group.ts +5 -10
  142. package/src/core/components/ui/icon/icon.md +132 -43
  143. package/src/core/components/ui/image/image.md +35 -3
  144. package/src/core/components/ui/link/link.md +43 -5
  145. package/src/core/components/ui/loader/loader.md +79 -22
  146. package/src/core/components/ui/loader/loader.ts +67 -27
  147. package/src/core/components/ui/loader/styles/fixed.ts +6 -11
  148. package/src/core/components/ui/menu/menu.md +133 -92
  149. package/src/core/components/ui/menu/menu.ts +53 -58
  150. package/src/core/components/ui/modal/modal.md +163 -47
  151. package/src/core/components/ui/modal/modal.ts +2 -4
  152. package/src/core/components/ui/pop/pop.md +217 -123
  153. package/src/core/components/ui/pop/pop.ts +0 -1
  154. package/src/core/components/ui/progress/progress.md +76 -30
  155. package/src/core/components/ui/progress/progress.ts +25 -56
  156. package/src/core/components/ui/table/table-caption.ts +2 -2
  157. package/src/core/components/ui/table/table-tbody.ts +3 -3
  158. package/src/core/components/ui/table/table-td.ts +23 -18
  159. package/src/core/components/ui/table/table-th.ts +8 -8
  160. package/src/core/components/ui/table/table-tr.ts +4 -4
  161. package/src/core/components/ui/table/table.md +147 -171
  162. package/src/core/components/ui/table/table.ts +20 -19
  163. package/src/core/components/ui/theme/theme-collection/auto.ts +15 -0
  164. package/src/core/components/ui/theme/theme-collection/core-variables.ts +8 -31
  165. package/src/core/components/ui/theme/theme-collection/dark.ts +1 -7
  166. package/src/core/components/ui/theme/theme-collection/light.ts +30 -26
  167. package/src/core/components/ui/theme/theme.md +122 -0
  168. package/src/core/components/ui/theme/theme.ts +30 -7
  169. package/src/core/components/ui/toast/toast-item.ts +6 -9
  170. package/src/core/components/ui/toast/toast.md +108 -58
  171. package/src/core/components/ui/toast/types.ts +1 -1
  172. package/src/core/components/ui/tooltip/tooltip.md +68 -26
  173. package/src/core/mixins/Subscriber.ts +0 -0
  174. package/src/core/utils/DataBindObserver.ts +0 -0
  175. package/src/core/utils/Objects.ts +0 -0
  176. package/src/core/utils/route.ts +0 -0
  177. package/src/docs/_core-concept/subscriber.md +0 -0
  178. package/src/docs/_getting-started/my-first-subscriber.md +0 -0
  179. package/src/docs/_getting-started/pubsub.md +0 -0
  180. package/src/docs/_getting-started/start.md +1 -1
  181. package/src/docs/_getting-started/theming.md +223 -61
  182. package/src/docs/code.ts +125 -58
  183. package/src/docs/example/users.ts +0 -0
  184. package/src/docs/header/header.ts +62 -54
  185. package/src/docs/mock-api/router.ts +2 -0
  186. package/src/docs/navigation/navigation.ts +6 -3
  187. package/src/docs/search/docs-search.json +2504 -399
  188. package/src/docs/search/markdown-renderer.ts +6 -6
  189. package/src/docs/search/page.ts +0 -0
  190. package/src/docs/search/search.ts +4 -4
  191. package/src/docs/tailwind/css/tailwind.css +6 -5
  192. package/src/tsconfig.json +18 -0
  193. package/src/tsconfig.tsbuildinfo +1 -1
  194. package/tailwind.config.js +19 -0
  195. package/.github/workflows/ci.yml +0 -21
  196. package/.github-export-ignore +0 -30
  197. package/CONTRIBUTING.md +0 -59
  198. package/DEV.md +0 -54
  199. package/LICENSE +0 -21
  200. package/OPEN_SOURCE_CHECKPOINT.md +0 -133
  201. package/docs/assets/index-DiD0qYvE.css +0 -1
  202. package/docs/src/tsconfig.declarations.json +0 -22
  203. package/docs/src/tsconfig.emit.json +0 -23
  204. package/gitlab/job_github_mirror.sh +0 -39
  205. package/scripts/github-export.mjs +0 -150
  206. package/src/css.d.ts +0 -19
  207. package/src/tsconfig.declarations.json +0 -22
  208. package/src/tsconfig.emit.json +0 -23
package/docs/crawl/core/components/ui/theme/theme.html ADDED
@@ -0,0 +1,131 @@
1
+ <!DOCTYPE html>
2
+ <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/theme/theme.html" data-doc-id="core/components/ui/theme/theme">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Theme — Concorde</title>
7
+ <meta name="description" content="sonic-theme wraps a Concorde UI: it registers --sc-* design tokens and provides the default slot for your app. With no theme attribute (or theme=&quot;custom&quot;), only shared primitives and your overrides ap">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/theme/theme, theme, Theme, UI component, sonic-theme, web component, --sc-*, theme=&quot;custom&quot;, light, dark, auto, color, font, bg-base">
9
+ <meta name="concorde-doc-id" content="core/components/ui/theme/theme">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/theme/theme.html">
11
+ </head>
12
+ <body>
13
+ <header>
14
+ <p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/theme/theme.md/theme" rel="nofollow">interactive version</a></p>
15
+ </header>
16
+ <main>
17
+ <article>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Theme</strong>. sonic-theme wraps a Concorde UI: it registers --sc-* design tokens and provides the default slot for your app. With no theme attribute (or theme=&quot;custom&quot;), only shared primitives and your overrides ap <span>Doc ID: <code>core/components/ui/theme/theme</code>. Keywords: Concorde, supersoniks, core/components/ui/theme/theme, theme, Theme, UI component, sonic-theme, web component, --sc-*, theme=&quot;custom&quot;, light, dark, auto, color, font, bg-base. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/theme/theme.html">https://concorde.supersoniks.org/crawl/core/components/ui/theme/theme.html</a>.</span></p>
19
+ <h1 id="theme">Theme</h1>
20
+ <p><strong><code>sonic-theme</code></strong> wraps a Concorde UI: it registers <strong><code>--sc-*</code></strong> design tokens and provides the default slot for your app. With no <strong><code>theme</code></strong> attribute (or <strong><code>theme=&quot;custom&quot;</code></strong>), only shared primitives and your overrides apply—built-in <strong><code>light</code></strong> / <strong><code>dark</code></strong> / <strong><code>auto</code></strong> palettes are opt-in. Set <strong><code>color</code></strong> and <strong><code>font</code></strong> when the host should carry base text and typography; add Tailwind <strong><code>bg-base</code></strong> and <strong><code>block</code></strong> (or <strong><code>min-h-screen</code></strong>) on the tag for a full surface fill. <strong>Popovers</strong>, <strong>modals</strong>, and <strong>toasts</strong> mount under the nearest connected theme (see <a href="#pop-container">Pop container</a>). Import <strong><code>@supersoniks/concorde/theme</code></strong> once at the app entry. For the full public token list and brand overrides, see <a href="../../../../docs/_getting-started/theming.html#theming">Customization</a>.</p>
21
+ <h2 id="basic-example">Basic example</h2>
22
+ <p>Wrap interactive components so tokens and overlays resolve from one root.</p>
23
+ <pre><code>&lt;sonic-theme color font class=&quot;block bg-base p-6 rounded-lg&quot;&gt;
24
+ &lt;sonic-button type=&quot;primary&quot;&gt;Save changes&lt;/sonic-button&gt;
25
+ &lt;/sonic-theme&gt;
26
+ </code></pre>
27
+ <h2 id="theme-mode">Theme mode</h2>
28
+ <p><strong>Default:</strong> omit <strong><code>theme</code></strong> or set <strong><code>theme=&quot;custom&quot;</code></strong>. The host loads core tokens (<code>--sc-rounded</code>, shadows, form defaults, …) and any <strong><code>--sc-*</code></strong> you set; it does <strong>not</strong> apply the built-in light or dark palette.</p>
29
+ <p>Set <strong><code>theme</code></strong> to <strong><code>light</code></strong> or <strong><code>dark</code></strong> for Concorde’s preset palettes. Set <strong><code>theme=&quot;auto&quot;</code></strong> to follow <strong><code>prefers-color-scheme</code></strong> (light palette until the OS prefers dark).</p>
30
+ <pre><code>&lt;div class=&quot;grid gap-4 md:grid-cols-2&quot;&gt;
31
+ &lt;sonic-theme theme=&quot;light&quot; color font class=&quot;block bg-base p-4 rounded-md border border-neutral-200&quot;&gt;
32
+ &lt;p class=&quot;text-sm mb-3 opacity-80&quot;&gt;theme=&quot;light&quot;&lt;/p&gt;
33
+ &lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
34
+ &lt;sonic-badge type=&quot;primary&quot;&gt;Primary&lt;/sonic-badge&gt;
35
+ &lt;sonic-badge type=&quot;success&quot;&gt;Success&lt;/sonic-badge&gt;
36
+ &lt;sonic-badge type=&quot;danger&quot;&gt;Danger&lt;/sonic-badge&gt;
37
+ &lt;/div&gt;
38
+ &lt;/sonic-theme&gt;
39
+ &lt;sonic-theme theme=&quot;dark&quot; color font class=&quot;block bg-base p-4 rounded-md&quot;&gt;
40
+ &lt;p class=&quot;text-sm mb-3 opacity-80&quot;&gt;theme=&quot;dark&quot;&lt;/p&gt;
41
+ &lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
42
+ &lt;sonic-badge type=&quot;primary&quot;&gt;Primary&lt;/sonic-badge&gt;
43
+ &lt;sonic-badge type=&quot;success&quot;&gt;Success&lt;/sonic-badge&gt;
44
+ &lt;sonic-badge type=&quot;danger&quot;&gt;Danger&lt;/sonic-badge&gt;
45
+ &lt;/div&gt;
46
+ &lt;/sonic-theme&gt;
47
+ &lt;/div&gt;
48
+ </code></pre>
49
+ <h2 id="presentation">Presentation</h2>
50
+ <p><strong><code>color</code></strong> sets text from <strong><code>--sc-base-content</code></strong>. <strong><code>font</code></strong> applies <strong><code>--sc-font-family-base</code></strong>, <strong><code>--sc-font-weight-base</code></strong>, and <strong><code>--sc-font-style-base</code></strong>. For the page or shell background, use <strong><code>bg-base</code></strong> on <strong><code>sonic-theme</code></strong> (maps to <strong><code>--sc-base</code></strong> in Tailwind) with <strong><code>block</code></strong> so the host paints the surface. Components keep their own fallbacks when <strong><code>color</code></strong> / <strong><code>font</code></strong> are omitted.</p>
51
+ <pre><code>&lt;sonic-theme theme=&quot;light&quot; color font class=&quot;block bg-base p-6 min-h-[8rem] rounded-lg&quot;&gt;
52
+ &lt;p&gt;Body copy inherits base content color and font from the theme host.&lt;/p&gt;
53
+ &lt;/sonic-theme&gt;
54
+ </code></pre>
55
+ <h2 id="custom-tokens">Custom tokens</h2>
56
+ <p>Override <strong>primitives</strong> on <strong><code>sonic-theme</code></strong> (or <strong><code>:root</code></strong> / a project stylesheet). Derived radii, shadows, and control rounding are computed from tokens such as <strong><code>--sc-rounded</code></strong>—avoid copying long lists of internal variables unless you have a specific need.</p>
57
+ <pre><code>&lt;sonic-theme
58
+ theme=&quot;custom&quot;
59
+ color
60
+ font
61
+ class=&quot;block bg-base p-6 rounded-lg&quot;
62
+ style=&quot;--sc-primary: #353429; --sc-rounded: 0.25rem;&quot;
63
+ &gt;
64
+ &lt;sonic-button type=&quot;primary&quot;&gt;Brand primary&lt;/sonic-button&gt;
65
+ &lt;/sonic-theme&gt;
66
+ </code></pre>
67
+ <h2 id="pop-container">Pop container</h2>
68
+ <p><strong><code>Theme.getPopContainer()</code></strong> returns the last connected <strong><code>sonic-theme</code></strong>, or <strong><code>document.body</code></strong> if none is connected. When a theme disconnects, the previous connected instance is adopted. Imperative <strong><code>Modal.create()</code></strong> and declarative <strong><code>sonic-modal</code></strong> use the same container.</p>
69
+ <pre><code>&lt;sonic-theme theme=&quot;light&quot; color font class=&quot;block bg-base p-4 rounded-lg&quot;&gt;
70
+ &lt;sonic-button onclick=&quot;document.getElementById(&#39;themePopModal&#39;).show()&quot;&gt;
71
+ Open modal
72
+ &lt;/sonic-button&gt;
73
+ &lt;sonic-modal id=&quot;themePopModal&quot;&gt;
74
+ &lt;sonic-modal-title&gt;Mounted on theme&lt;/sonic-modal-title&gt;
75
+ &lt;sonic-modal-content&gt;
76
+ This dialog is appended under the nearest sonic-theme pop container.
77
+ &lt;/sonic-modal-content&gt;
78
+ &lt;sonic-modal-actions&gt;
79
+ &lt;sonic-button hideModal&gt;Close&lt;/sonic-button&gt;
80
+ &lt;/sonic-modal-actions&gt;
81
+ &lt;/sonic-modal&gt;
82
+ &lt;/sonic-theme&gt;
83
+ </code></pre>
84
+ <h2 id="embedded-iframes">Embedded iframes</h2>
85
+ <p>On connect, the theme publishes resolved <strong><code>--sc-*</code></strong> values and linked font stylesheet URLs (Google Fonts / Adobe Fonts) to the <strong><code>sonic-theme</code></strong> data channel and **<code>postMessage</code>**s them to same-page iframes. Iframes can request a refresh by posting <strong><code>{ type: &quot;GetSonicTheme&quot; }</code></strong>.</p>
86
+ <pre><code class="language-javascript">// Inside the iframe — ask the parent theme to rebroadcast tokens
87
+ window.parent.postMessage({ type: &quot;GetSonicTheme&quot; }, &quot;*&quot;);
88
+ </code></pre>
89
+ <h2 id="api-reference">API reference</h2>
90
+ <table>
91
+ <thead>
92
+ <tr>
93
+ <th>Attribute</th>
94
+ <th>Values</th>
95
+ <th>Description</th>
96
+ </tr>
97
+ </thead>
98
+ <tbody><tr>
99
+ <td><code>theme</code></td>
100
+ <td>omitted · <code>custom</code> (default) · <code>light</code> · <code>dark</code> · <code>auto</code></td>
101
+ <td>Omitted or <code>custom</code>: core tokens and your <code>--sc-*</code> only. <code>light</code> / <code>dark</code>: fixed presets. <code>auto</code>: presets follow <code>prefers-color-scheme</code></td>
102
+ </tr>
103
+ <tr>
104
+ <td><code>color</code></td>
105
+ <td>boolean</td>
106
+ <td>Host text color uses <code>--sc-base-content</code></td>
107
+ </tr>
108
+ <tr>
109
+ <td><code>font</code></td>
110
+ <td>boolean</td>
111
+ <td>Host font uses <code>--sc-font-family-base</code> and related base weight/style tokens</td>
112
+ </tr>
113
+ </tbody></table>
114
+ <table>
115
+ <thead>
116
+ <tr>
117
+ <th>Slot</th>
118
+ <th>Description</th>
119
+ </tr>
120
+ </thead>
121
+ <tbody><tr>
122
+ <td><em>(default)</em></td>
123
+ <td>Application markup and Concorde components</td>
124
+ </tr>
125
+ </tbody></table>
126
+ <p>Surface background: Tailwind <strong><code>bg-base</code></strong> on <strong><code>sonic-theme</code></strong> (requires Concorde Tailwind color <strong><code>base</code></strong> → <strong><code>--sc-base</code></strong>).</p>
127
+
128
+ </article>
129
+ </main>
130
+ </body>
131
+ </html>
package/docs/crawl/core/components/ui/toast/toast.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Toast — Concorde</title>
7
- <meta name="description" content="Afficher un toast">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/toast/toast, toast, Toast, UI component, sonic-toast, web component, success, error, warning, info, preserve: true, dismissForever: true, id, ghost: true">
7
+ <meta name="description" content="Toasts surface short-lived feedback in a fixed stack (bottom-right in the main window). Queue messages with SonicToast.add() on the global SonicToast class—the host sonic-toast is created automaticall">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/toast/toast, toast, Toast, UI component, sonic-toast, web component, SonicToast.add(), SonicToast, label, preserve, text, status">
9
9
  <meta name="concorde-doc-id" content="core/components/ui/toast/toast">
10
10
  <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/toast/toast.html">
11
11
  </head>
@@ -15,106 +15,217 @@
15
15
  </header>
16
16
  <main>
17
17
  <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Toast</strong>. Afficher un toast <span>Doc ID: <code>core/components/ui/toast/toast</code>. Keywords: Concorde, supersoniks, core/components/ui/toast/toast, toast, Toast, UI component, sonic-toast, web component, success, error, warning, info, preserve: true, dismissForever: true, id, ghost: true. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/toast/toast.html">https://concorde.supersoniks.org/crawl/core/components/ui/toast/toast.html</a>.</span></p>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Toast</strong>. Toasts surface short-lived feedback in a fixed stack (bottom-right in the main window). Queue messages with SonicToast.add() on the global SonicToast class—the host sonic-toast is created automaticall <span>Doc ID: <code>core/components/ui/toast/toast</code>. Keywords: Concorde, supersoniks, core/components/ui/toast/toast, toast, Toast, UI component, sonic-toast, web component, SonicToast.add(), SonicToast, label, preserve, text, status. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/toast/toast.html">https://concorde.supersoniks.org/crawl/core/components/ui/toast/toast.html</a>.</span></p>
19
19
  <h1 id="toast">Toast</h1>
20
- <h2 id="utilisation-de-base">Utilisation de base</h2>
21
- <pre><code>&lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Message de notification simple&#39; })&quot;&gt;
22
- Afficher un toast
20
+ <p>Toasts surface <strong>short-lived feedback</strong> in a fixed stack (bottom-right in the main window). Queue messages with <strong><code>SonicToast.add()</code></strong> on the global <strong><code>SonicToast</code></strong> class—the host <strong><code>sonic-toast</code></strong> is created automatically. Prefer <strong><code>label</code></strong> for a heading; use <strong><code>preserve</code></strong> or interactive <strong><code>text</code></strong> when the user must read or act before dismiss.</p>
21
+ <h2 id="basic-example">Basic example</h2>
22
+ <p>Click the button to show a toast.</p>
23
+ <pre><code>&lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Simple notification&#39; })&quot;&gt;
24
+ Show toast
23
25
  &lt;/sonic-button&gt;
24
26
  </code></pre>
25
- <h2 id="statut">Statut</h2>
26
- <p>Les statuts disponibles sont : <code>success</code>, <code>error</code>, <code>warning</code>, <code>info</code> ou vide (par défaut).</p>
27
+ <h2 id="status">Status</h2>
28
+ <p><strong><code>status</code></strong> drives color, icon, and live-region behavior. Omit <strong><code>status</code></strong> or pass an empty string for a neutral toast.</p>
27
29
  <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
28
- &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Message par défaut&#39;, status: &#39;&#39; })&quot;&gt;
30
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Default message&#39;, status: &#39;&#39; })&quot;&gt;
29
31
  Default
30
32
  &lt;/sonic-button&gt;
31
- &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Opération réussie !&#39;, status: &#39;success&#39; })&quot;&gt;
33
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Operation succeeded&#39;, status: &#39;success&#39; })&quot;&gt;
32
34
  Success
33
35
  &lt;/sonic-button&gt;
34
- &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Une erreur est survenue&#39;, status: &#39;error&#39; })&quot;&gt;
36
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Something went wrong&#39;, status: &#39;error&#39; })&quot;&gt;
35
37
  Error
36
38
  &lt;/sonic-button&gt;
37
- &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Attention à ce point&#39;, status: &#39;warning&#39; })&quot;&gt;
39
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Check this detail&#39;, status: &#39;warning&#39; })&quot;&gt;
38
40
  Warning
39
41
  &lt;/sonic-button&gt;
40
- &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Information importante&#39;, status: &#39;info&#39; })&quot;&gt;
42
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Helpful context&#39;, status: &#39;info&#39; })&quot;&gt;
41
43
  Info
42
44
  &lt;/sonic-button&gt;
43
45
  &lt;/div&gt;
44
46
  </code></pre>
45
- <h2 id="avec-titre">Avec titre</h2>
47
+ <h2 id="label">Label</h2>
48
+ <p>Set <strong><code>label</code></strong> for a bold title above <strong><code>text</code></strong>. <strong><code>title</code></strong> still works but is deprecated—use <strong><code>label</code></strong> in new code.</p>
46
49
  <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
47
- &lt;sonic-button onclick=&quot;window.SonicToast.add({ title: &#39;Succès&#39;, text: &#39;Votre demande a été traitée avec succès.&#39;, status: &#39;success&#39; })&quot;&gt;
48
- Toast avec titre
50
+ &lt;sonic-button
51
+ onclick=&quot;SonicToast.add({ label: &#39;Success&#39;, text: &#39;Your request was processed.&#39;, status: &#39;success&#39; })&quot;
52
+ &gt;
53
+ Toast with label
49
54
  &lt;/sonic-button&gt;
50
- &lt;sonic-button onclick=&quot;window.SonicToast.add({ title: &#39;Test&#39;, text: &#39;Une erreur est survenue lors du traitement.&#39;, status: &#39;error&#39; })&quot;&gt;
51
- Toast d&#39;erreur avec titre
55
+ &lt;sonic-button
56
+ onclick=&quot;SonicToast.add({ label: &#39;Error&#39;, text: &#39;Processing failed. Try again.&#39;, status: &#39;error&#39; })&quot;
57
+ &gt;
58
+ Error with label
52
59
  &lt;/sonic-button&gt;
53
60
  &lt;/div&gt;
54
61
  </code></pre>
55
- <h2 id="avec-contenu-html">Avec contenu HTML</h2>
56
- <p>Le contenu du toast peut contenir du HTML.</p>
57
- <pre><code>&lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Message avec &lt;strong&gt;HTML&lt;/strong&gt; et un &lt;a href=&amp;quot;#&amp;quot;&gt;lien cliquable&lt;/a&gt;&#39;, status: &#39;info&#39; })&quot;&gt;
58
- Toast avec HTML
62
+ <h2 id="html-in-text">HTML in text</h2>
63
+ <p><strong><code>text</code></strong> (and <strong><code>label</code></strong>) can include HTML strings. Links and controls in <strong><code>text</code></strong> automatically enable <strong><code>preserve</code></strong> so the toast does not auto-hide while the user interacts.</p>
64
+ <pre><code>&lt;sonic-button
65
+ onclick=&quot;SonicToast.add({ text: &#39;Message with &lt;strong&gt;HTML&lt;/strong&gt; and an &lt;a href=&amp;quot;#&amp;quot;&gt;action link&lt;/a&gt;&#39;, status: &#39;info&#39; })&quot;
66
+ &gt;
67
+ Toast with HTML
59
68
  &lt;/sonic-button&gt;
60
69
  </code></pre>
61
- <h2 id="persistance">Persistance</h2>
62
- <p>Par défaut, les toasts disparaissent automatiquement. Avec <code>preserve: true</code>, le toast reste affiché jusqu&#39;à ce qu&#39;il soit fermé manuellement.</p>
63
- <pre><code>&lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Ce toast ne disparaîtra pas automatiquement&#39;, status: &#39;info&#39;, preserve: true })&quot;&gt;
64
- Toast persistant
70
+ <h2 id="preserve">Preserve</h2>
71
+ <p>Without <strong><code>preserve</code></strong>, toasts auto-hide after about six seconds (timer pauses on hover or focus). Set <strong><code>preserve</code></strong> to keep the toast until the user closes it.</p>
72
+ <pre><code>&lt;sonic-button
73
+ onclick=&quot;SonicToast.add({ text: &#39;This toast stays until you dismiss it&#39;, status: &#39;info&#39;, preserve: true })&quot;
74
+ &gt;
75
+ Persistent toast
65
76
  &lt;/sonic-button&gt;
66
77
  </code></pre>
67
- <h2 id="masquer-définitivement">Masquer définitivement</h2>
68
- <p>Avec <code>dismissForever: true</code> et un <code>id</code>, le toast peut être masqué définitivement. Une fois fermé, il ne réapparaîtra plus même après rechargement de la page.</p>
69
- <pre><code>&lt;sonic-button onclick=&quot;window.SonicToast.add({ id: &#39;unique-toast-id&#39;, text: &#39;Ce toast peut être masqué définitivement&#39;, status: &#39;info&#39;, dismissForever: true })&quot;&gt;
70
- Toast avec dismiss forever
78
+ <h2 id="dismiss-forever">Dismiss forever</h2>
79
+ <p>With <strong><code>dismissForever</code></strong> and a stable <strong><code>id</code></strong>, closing the toast stores dismissal in <strong><code>localStorage</code></strong>—<strong><code>SonicToast.add</code></strong> skips it on later visits. Duplicate payloads (same fields, ignoring <strong><code>id</code></strong>) are not queued twice.</p>
80
+ <pre><code>&lt;sonic-button
81
+ onclick=&quot;SonicToast.add({ id: &#39;unique-toast-id&#39;, text: &#39;Dismiss forever hides this across reloads&#39;, status: &#39;info&#39;, dismissForever: true })&quot;
82
+ &gt;
83
+ Dismiss forever
71
84
  &lt;/sonic-button&gt;
72
85
  </code></pre>
73
- <h2 id="fantôme">Fantôme</h2>
74
- <p>Avec <code>ghost: true</code>, le toast devient semi-transparent et non-interactif.</p>
75
- <pre><code>&lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Toast fantôme (semi-transparent)&#39;, status: &#39;info&#39;, ghost: true })&quot;&gt;
76
- Toast ghost
86
+ <h2 id="ghost">Ghost</h2>
87
+ <p><strong><code>ghost</code></strong> renders a semi-transparent, non-interactive toast—useful for loading or background states. <strong><code>SonicToast.removeAll</code></strong> leaves ghost toasts in place.</p>
88
+ <pre><code>&lt;sonic-button
89
+ onclick=&quot;SonicToast.add({ text: &#39;Ghost toast (non-interactive)&#39;, status: &#39;info&#39;, ghost: true })&quot;
90
+ &gt;
91
+ Ghost toast
77
92
  &lt;/sonic-button&gt;
78
93
  </code></pre>
79
- <h2 id="méthodes-de-suppression">Méthodes de suppression</h2>
80
- <h3 id="tout-supprimer">Tout supprimer</h3>
81
- <p>Supprime tous les toasts sauf ceux marqués comme <code>ghost</code>.</p>
94
+ <h2 id="dismissal">Dismissal</h2>
95
+ <p>Use static helpers to clear the stack from app logic (for example after navigation).</p>
96
+ <h3 id="remove-all">Remove all</h3>
97
+ <p>Removes every toast except <strong><code>ghost</code></strong> items.</p>
82
98
  <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
83
- &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Toast 1&#39;, status: &#39;info&#39; })&quot;&gt;Ajouter toast 1&lt;/sonic-button&gt;
84
- &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Toast 2&#39;, status: &#39;success&#39; })&quot;&gt;Ajouter toast 2&lt;/sonic-button&gt;
85
- &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Toast 3&#39;, status: &#39;warning&#39; })&quot;&gt;Ajouter toast 3&lt;/sonic-button&gt;
86
- &lt;sonic-button onclick=&quot;window.SonicToast.removeAll()&quot;&gt;Supprimer tous&lt;/sonic-button&gt;
99
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Toast 1&#39;, status: &#39;info&#39; })&quot;&gt;Add toast 1&lt;/sonic-button&gt;
100
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Toast 2&#39;, status: &#39;success&#39; })&quot;&gt;Add toast 2&lt;/sonic-button&gt;
101
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Toast 3&#39;, status: &#39;warning&#39; })&quot;&gt;Add toast 3&lt;/sonic-button&gt;
102
+ &lt;sonic-button onclick=&quot;SonicToast.removeAll()&quot;&gt;Remove all&lt;/sonic-button&gt;
87
103
  &lt;/div&gt;
88
104
  </code></pre>
89
- <h3 id="supprimer-par-statut">Supprimer par statut</h3>
90
- <p>Supprime tous les toasts d&#39;un statut spécifique.</p>
105
+ <h3 id="remove-by-status">Remove by status</h3>
91
106
  <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
92
- &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Toast success&#39;, status: &#39;success&#39; })&quot;&gt;Success&lt;/sonic-button&gt;
93
- &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Toast error&#39;, status: &#39;error&#39; })&quot;&gt;Error&lt;/sonic-button&gt;
94
- &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Toast warning&#39;, status: &#39;warning&#39; })&quot;&gt;Warning&lt;/sonic-button&gt;
95
- &lt;sonic-button onclick=&quot;window.SonicToast.removeItemsByStatus(&#39;success&#39;)&quot;&gt;Supprimer success&lt;/sonic-button&gt;
96
- &lt;sonic-button onclick=&quot;window.SonicToast.removeItemsByStatus(&#39;error&#39;)&quot;&gt;Supprimer error&lt;/sonic-button&gt;
107
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Success toast&#39;, status: &#39;success&#39; })&quot;&gt;Success&lt;/sonic-button&gt;
108
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Error toast&#39;, status: &#39;error&#39; })&quot;&gt;Error&lt;/sonic-button&gt;
109
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Warning toast&#39;, status: &#39;warning&#39; })&quot;&gt;Warning&lt;/sonic-button&gt;
110
+ &lt;sonic-button onclick=&quot;SonicToast.removeItemsByStatus(&#39;success&#39;)&quot;&gt;Remove success&lt;/sonic-button&gt;
111
+ &lt;sonic-button onclick=&quot;SonicToast.removeItemsByStatus(&#39;error&#39;)&quot;&gt;Remove error&lt;/sonic-button&gt;
97
112
  &lt;/div&gt;
98
113
  </code></pre>
99
- <h3 id="supprimer-les-éléments-temporaires">Supprimer les éléments temporaires</h3>
100
- <p>Supprime tous les toasts qui ne sont pas marqués comme <code>preserve</code>.</p>
114
+ <h3 id="remove-temporary-items">Remove temporary items</h3>
115
+ <p>Removes toasts that are not <strong><code>preserve</code></strong>.</p>
101
116
  <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
102
- &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Toast temporaire&#39;, status: &#39;info&#39; })&quot;&gt;Temporaire&lt;/sonic-button&gt;
103
- &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Toast persistant&#39;, status: &#39;success&#39;, preserve: true })&quot;&gt;Persistant&lt;/sonic-button&gt;
104
- &lt;sonic-button onclick=&quot;window.SonicToast.removeTemporaryItems()&quot;&gt;Supprimer temporaires&lt;/sonic-button&gt;
117
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Temporary toast&#39;, status: &#39;info&#39; })&quot;&gt;Temporary&lt;/sonic-button&gt;
118
+ &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Persistent toast&#39;, status: &#39;success&#39;, preserve: true })&quot;&gt;
119
+ Persistent
120
+ &lt;/sonic-button&gt;
121
+ &lt;sonic-button onclick=&quot;SonicToast.removeTemporaryItems()&quot;&gt;Remove temporary&lt;/sonic-button&gt;
105
122
  &lt;/div&gt;
106
123
  </code></pre>
107
- <h2 id="exemple-complet">Exemple complet</h2>
108
- <pre><code>&lt;sonic-button onclick=&quot;window.SonicToast.add({
124
+ <h2 id="combined-options">Combined options</h2>
125
+ <pre><code>&lt;sonic-button
126
+ onclick=&quot;SonicToast.add({
109
127
  id: &#39;welcome-toast&#39;,
110
- title: &#39;Bienvenue&#39;,
111
- text: &#39;Bienvenue sur notre plateforme ! Vous pouvez commencer à explorer les fonctionnalités.&#39;,
128
+ label: &#39;Welcome&#39;,
129
+ text: &#39;Welcome to the platform. Explore the docs to get started.&#39;,
112
130
  status: &#39;success&#39;,
113
131
  dismissForever: true
114
- })&quot;&gt;
115
- Toast complet
132
+ })&quot;
133
+ &gt;
134
+ Full example
116
135
  &lt;/sonic-button&gt;
117
136
  </code></pre>
137
+ <h2 id="accessibility">Accessibility</h2>
138
+ <p>Each toast uses <strong><code>role=&quot;alert&quot;</code></strong> for <strong><code>error</code></strong> and <strong><code>role=&quot;status&quot;</code></strong> otherwise (with <strong><code>aria-live=&quot;polite&quot;</code></strong> when applicable). Status icons are decorative (<strong><code>aria-hidden</code></strong>). The close control has an i18n <strong><code>aria-label</code></strong>. When there is no <strong><code>label</code></strong>, a truncated string <strong><code>aria-label</code></strong> may be derived from plain <strong><code>text</code></strong>.</p>
139
+ <h2 id="api-reference">API reference</h2>
140
+ <p>Options passed to <strong><code>SonicToast.add(conf)</code></strong>:</p>
141
+ <table>
142
+ <thead>
143
+ <tr>
144
+ <th>Option</th>
145
+ <th>Values</th>
146
+ <th>Description</th>
147
+ </tr>
148
+ </thead>
149
+ <tbody><tr>
150
+ <td><code>text</code></td>
151
+ <td>string · Lit template</td>
152
+ <td>Main body; HTML strings are supported</td>
153
+ </tr>
154
+ <tr>
155
+ <td><code>label</code></td>
156
+ <td>string · Lit template</td>
157
+ <td>Optional heading above <strong><code>text</code></strong></td>
158
+ </tr>
159
+ <tr>
160
+ <td><code>title</code></td>
161
+ <td>string · Lit template</td>
162
+ <td>Deprecated alias for <strong><code>label</code></strong></td>
163
+ </tr>
164
+ <tr>
165
+ <td><code>status</code></td>
166
+ <td><code>success</code> · <code>error</code> · <code>warning</code> · <code>info</code> · `` (empty)</td>
167
+ <td>Semantic styling and live region behavior</td>
168
+ </tr>
169
+ <tr>
170
+ <td><code>id</code></td>
171
+ <td>string · number</td>
172
+ <td>Stable id for deduplication and <strong><code>dismissForever</code></strong> (defaults to timestamp)</td>
173
+ </tr>
174
+ <tr>
175
+ <td><code>preserve</code></td>
176
+ <td>boolean</td>
177
+ <td>Skip auto-hide; forced when <strong><code>text</code></strong> contains interactive markup</td>
178
+ </tr>
179
+ <tr>
180
+ <td><code>ghost</code></td>
181
+ <td>boolean</td>
182
+ <td>Semi-transparent and non-interactive; kept by <strong><code>removeAll</code></strong></td>
183
+ </tr>
184
+ <tr>
185
+ <td><code>dismissForever</code></td>
186
+ <td>boolean</td>
187
+ <td>Persist dismissal in <strong><code>localStorage</code></strong> when closed (requires stable <strong><code>id</code></strong>)</td>
188
+ </tr>
189
+ <tr>
190
+ <td><code>styleSheet</code></td>
191
+ <td>modal style input</td>
192
+ <td>Extra adopted styles on the toast item shadow root</td>
193
+ </tr>
194
+ <tr>
195
+ <td><code>useSlot</code></td>
196
+ <td>boolean</td>
197
+ <td>Legacy: project <strong><code>text</code></strong> into the light DOM slot</td>
198
+ </tr>
199
+ </tbody></table>
200
+ <table>
201
+ <thead>
202
+ <tr>
203
+ <th>Method</th>
204
+ <th>Description</th>
205
+ </tr>
206
+ </thead>
207
+ <tbody><tr>
208
+ <td><code>SonicToast.add(conf)</code></td>
209
+ <td>Append a toast; returns the config or <strong><code>null</code></strong> if skipped (dismissed forever or duplicate)</td>
210
+ </tr>
211
+ <tr>
212
+ <td><code>SonicToast.removeAll()</code></td>
213
+ <td>Remove all non-<strong><code>ghost</code></strong> toasts</td>
214
+ </tr>
215
+ <tr>
216
+ <td><code>SonicToast.removeItemsByStatus(status)</code></td>
217
+ <td>Remove toasts matching <strong><code>status</code></strong></td>
218
+ </tr>
219
+ <tr>
220
+ <td><code>SonicToast.removeItemById(id)</code></td>
221
+ <td>Remove a single toast by <strong><code>id</code></strong></td>
222
+ </tr>
223
+ <tr>
224
+ <td><code>SonicToast.removeTemporaryItems()</code></td>
225
+ <td>Remove toasts without <strong><code>preserve</code></strong></td>
226
+ </tr>
227
+ </tbody></table>
228
+ <p><strong><code>sonic-toast</code></strong> is mounted automatically; <strong><code>sonic-toast-item</code></strong> is internal. In iframes, toasts can delegate to the parent window via <strong><code>postMessage</code></strong>.</p>
118
229
 
119
230
  </article>
120
231
  </main>