@supersoniks/concorde 5.0.5 → 5.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (282) hide show
  1. package/.claude/launch.json +15 -0
  2. package/.claude/vite.http.config.mjs +7 -0
  3. package/.taste-skill/after/desktop-fold.jpg +0 -0
  4. package/.taste-skill/after/desktop-page-01.jpg +0 -0
  5. package/.taste-skill/after/desktop-page-02.jpg +0 -0
  6. package/.taste-skill/after/desktop-page-03.jpg +0 -0
  7. package/.taste-skill/after/mobile-fold.jpg +0 -0
  8. package/.taste-skill/after/mobile-page-01.jpg +0 -0
  9. package/.taste-skill/after/report.json +4103 -0
  10. package/.taste-skill/after/tablet-fold.jpg +0 -0
  11. package/.taste-skill/after/tablet-page-01.jpg +0 -0
  12. package/.taste-skill/after/tablet-page-02.jpg +0 -0
  13. package/.taste-skill/before/desktop-fold.jpg +0 -0
  14. package/.taste-skill/before/desktop-page-01.jpg +0 -0
  15. package/.taste-skill/before/desktop-page-02.jpg +0 -0
  16. package/.taste-skill/before/mobile-fold.jpg +0 -0
  17. package/.taste-skill/before/mobile-page-01.jpg +0 -0
  18. package/.taste-skill/before/report.json +2556 -0
  19. package/.taste-skill/before/tablet-fold.jpg +0 -0
  20. package/.taste-skill/before/tablet-page-01.jpg +0 -0
  21. package/.taste-skill/direction.json +510 -0
  22. package/.taste-skill/notes.md +84 -0
  23. package/.taste-skill/prod/desktop-fold.jpg +0 -0
  24. package/.taste-skill/prod/desktop-page-01.jpg +0 -0
  25. package/.taste-skill/prod/desktop-page-02.jpg +0 -0
  26. package/.taste-skill/prod/desktop-page-03.jpg +0 -0
  27. package/.taste-skill/prod/mobile-fold.jpg +0 -0
  28. package/.taste-skill/prod/mobile-page-01.jpg +0 -0
  29. package/.taste-skill/prod/mobile-page-02.jpg +0 -0
  30. package/.taste-skill/prod/report.json +1973 -0
  31. package/.taste-skill/prod/tablet-fold.jpg +0 -0
  32. package/.taste-skill/prod/tablet-page-01.jpg +0 -0
  33. package/.taste-skill/prod/tablet-page-02.jpg +0 -0
  34. package/.tmp-cem/custom-elements.json +13705 -0
  35. package/AUDIT.md +228 -0
  36. package/PLAN-AMELIORATION.md +220 -0
  37. package/build-infos.json +1 -1
  38. package/concorde-core.bundle.js +196 -196
  39. package/concorde-core.es.js +3854 -3572
  40. package/custom-elements-manifest.config.mjs +14 -0
  41. package/dist/concorde-core.bundle.js +196 -196
  42. package/dist/concorde-core.es.js +3854 -3572
  43. package/dist/img/archive/concorde-001-2cv.webp +0 -0
  44. package/dist/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  45. package/dist/img/archive/concorde-red-arrows-2002.webm +0 -0
  46. package/dist/img/archive/credits.json +28 -0
  47. package/docs/assets/index-Bb-_LRyY.js +12280 -0
  48. package/docs/index.html +1 -1
  49. package/index.html +27 -63
  50. package/package.json +44 -3
  51. package/public/img/archive/concorde-001-2cv.webp +0 -0
  52. package/public/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  53. package/public/img/archive/concorde-red-arrows-2002.webm +0 -0
  54. package/public/img/archive/credits.json +28 -0
  55. package/scripts/generate-sdui-catalog.mjs +250 -0
  56. package/scripts/generate-sdui-catalog.spec.ts +91 -0
  57. package/scripts/pre-build.mjs +15 -0
  58. package/src/core/components/functional/fetch/fetch.md +2 -2
  59. package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +5 -5
  60. package/src/core/components/functional/sdui/__fixtures__/descriptors.ts +251 -0
  61. package/src/core/components/functional/sdui/__snapshots__/sdui-action.spec.ts.snap +73 -0
  62. package/src/core/components/functional/sdui/__snapshots__/sdui-incremental.spec.ts.snap +50 -0
  63. package/src/core/components/functional/sdui/__snapshots__/sdui-partial.spec.ts.snap +50 -0
  64. package/src/core/components/functional/sdui/__snapshots__/sdui.regression.spec.ts.snap +461 -0
  65. package/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
  66. package/src/core/components/functional/sdui/component-catalog.json +3103 -0
  67. package/src/core/components/functional/sdui/component-catalog.spec.ts +23 -0
  68. package/src/core/components/functional/sdui/sdui-action.spec.ts +99 -0
  69. package/src/core/components/functional/sdui/sdui-dom-snapshot.ts +61 -0
  70. package/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
  71. package/src/core/components/functional/sdui/sdui-incremental.spec.ts +137 -0
  72. package/src/core/components/functional/sdui/sdui-partial.spec.ts +83 -0
  73. package/src/core/components/functional/sdui/sdui-partial.ts +19 -0
  74. package/src/core/components/functional/sdui/sdui-safe.spec.ts +188 -0
  75. package/src/core/components/functional/sdui/sdui-safe.ts +100 -0
  76. package/src/core/components/functional/sdui/sdui.md +122 -0
  77. package/src/core/components/functional/sdui/sdui.regression.spec.ts +64 -0
  78. package/src/core/components/functional/sdui/sdui.ts +442 -34
  79. package/src/core/components/functional/sdui/types.ts +49 -0
  80. package/src/core/components/ui/modal/modal.ts +14 -11
  81. package/src/docs/_getting-started/components.md +5 -0
  82. package/src/docs/_getting-started/theming.md +2 -2
  83. package/src/docs/code.ts +88 -75
  84. package/src/docs/components/docs-demo-sources.ts +16 -8
  85. package/src/docs/components/docs-lit-demo.ts +19 -37
  86. package/src/docs/docs.ts +5 -0
  87. package/src/docs/example/docs-boarding-pass-demo.ts +134 -0
  88. package/src/docs/example/docs-provider-keys.ts +12 -0
  89. package/src/docs/header/header.ts +233 -69
  90. package/src/docs/home/catalog.ts +44 -0
  91. package/src/docs/home/home.ts +513 -0
  92. package/src/docs/home/mach-stage.ts +389 -0
  93. package/src/docs/layout.ts +3 -1
  94. package/src/docs/navigation/components-index.ts +56 -0
  95. package/src/docs/navigation/navigation.ts +240 -232
  96. package/src/docs/navigation/pager.ts +67 -0
  97. package/src/docs/navigation/toc.ts +98 -0
  98. package/src/docs/search/docs-search.json +330 -20
  99. package/src/docs/search/markdown-renderer.ts +11 -3
  100. package/src/docs/shiki/index.ts +109 -0
  101. package/src/docs/tailwind/css/base/scrollbar.css +22 -0
  102. package/src/docs/tailwind/css/base/theme.css +96 -0
  103. package/src/docs/tailwind/css/base/typography.css +4 -0
  104. package/src/docs/tailwind/css/docs/boarding-pass.css +65 -0
  105. package/src/docs/tailwind/css/docs/content.css +32 -0
  106. package/src/docs/tailwind/css/docs/page.css +10 -0
  107. package/src/docs/tailwind/css/docs.css +9 -0
  108. package/src/docs/tailwind/css/home/hero.css +210 -0
  109. package/src/docs/tailwind/css/home/motion.css +84 -0
  110. package/src/docs/tailwind/css/home/sections.css +416 -0
  111. package/src/docs/tailwind/css/tailwind.css +7 -185
  112. package/src/tsconfig.json +113 -2
  113. package/src/tsconfig.tsbuildinfo +1 -1
  114. package/tailwind.config.js +8 -4
  115. package/docs/assets/index-wVZpLVYW.js +0 -12122
  116. package/docs/crawl/core/components/functional/date/date.html +0 -190
  117. package/docs/crawl/core/components/functional/fetch/fetch.html +0 -109
  118. package/docs/crawl/core/components/functional/if/if.html +0 -27
  119. package/docs/crawl/core/components/functional/jsonata/jsonata.html +0 -79
  120. package/docs/crawl/core/components/functional/list/list.html +0 -70
  121. package/docs/crawl/core/components/functional/mix/mix.html +0 -45
  122. package/docs/crawl/core/components/functional/queue/queue.html +0 -96
  123. package/docs/crawl/core/components/functional/router/router.html +0 -106
  124. package/docs/crawl/core/components/functional/sdui/sdui.html +0 -269
  125. package/docs/crawl/core/components/functional/states/states.html +0 -66
  126. package/docs/crawl/core/components/functional/submit/submit.html +0 -160
  127. package/docs/crawl/core/components/functional/subscriber/subscriber.html +0 -67
  128. package/docs/crawl/core/components/functional/value/value.html +0 -51
  129. package/docs/crawl/core/components/ui/alert/alert.html +0 -211
  130. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +0 -131
  131. package/docs/crawl/core/components/ui/badge/badge.html +0 -197
  132. package/docs/crawl/core/components/ui/button/button.html +0 -150
  133. package/docs/crawl/core/components/ui/captcha/captcha.html +0 -112
  134. package/docs/crawl/core/components/ui/card/card.html +0 -253
  135. package/docs/crawl/core/components/ui/divider/divider.html +0 -144
  136. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +0 -73
  137. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +0 -266
  138. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +0 -122
  139. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +0 -121
  140. package/docs/crawl/core/components/ui/form/input/input.html +0 -109
  141. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +0 -38
  142. package/docs/crawl/core/components/ui/form/radio/radio.html +0 -56
  143. package/docs/crawl/core/components/ui/form/select/select.html +0 -73
  144. package/docs/crawl/core/components/ui/form/switch/switch.html +0 -56
  145. package/docs/crawl/core/components/ui/form/textarea/textarea.html +0 -59
  146. package/docs/crawl/core/components/ui/group/group.html +0 -104
  147. package/docs/crawl/core/components/ui/icon/icon.html +0 -222
  148. package/docs/crawl/core/components/ui/image/image.html +0 -298
  149. package/docs/crawl/core/components/ui/link/link.html +0 -100
  150. package/docs/crawl/core/components/ui/loader/loader.html +0 -124
  151. package/docs/crawl/core/components/ui/menu/menu.html +0 -394
  152. package/docs/crawl/core/components/ui/modal/modal.html +0 -342
  153. package/docs/crawl/core/components/ui/pop/pop.html +0 -296
  154. package/docs/crawl/core/components/ui/progress/progress.html +0 -131
  155. package/docs/crawl/core/components/ui/table/table.html +0 -545
  156. package/docs/crawl/core/components/ui/theme/theme.html +0 -131
  157. package/docs/crawl/core/components/ui/toast/toast.html +0 -233
  158. package/docs/crawl/core/components/ui/tooltip/tooltip.html +0 -140
  159. package/docs/crawl/docs/_core-concept/dataFlow.html +0 -177
  160. package/docs/crawl/docs/_core-concept/overview.html +0 -66
  161. package/docs/crawl/docs/_core-concept/subscriber.html +0 -75
  162. package/docs/crawl/docs/_decorators/ancestor-attribute.html +0 -117
  163. package/docs/crawl/docs/_decorators/auto-subscribe.html +0 -202
  164. package/docs/crawl/docs/_decorators/bind.html +0 -141
  165. package/docs/crawl/docs/_decorators/get.html +0 -149
  166. package/docs/crawl/docs/_decorators/handle.html +0 -165
  167. package/docs/crawl/docs/_decorators/on-assign.html +0 -355
  168. package/docs/crawl/docs/_decorators/patch.html +0 -78
  169. package/docs/crawl/docs/_decorators/post.html +0 -139
  170. package/docs/crawl/docs/_decorators/publish.html +0 -61
  171. package/docs/crawl/docs/_decorators/put.html +0 -78
  172. package/docs/crawl/docs/_decorators/subscribe.html +0 -109
  173. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +0 -137
  174. package/docs/crawl/docs/_directives/sub.html +0 -93
  175. package/docs/crawl/docs/_getting-started/ai-agents.html +0 -173
  176. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +0 -100
  177. package/docs/crawl/docs/_getting-started/concorde-outside.html +0 -58
  178. package/docs/crawl/docs/_getting-started/create-a-component.html +0 -111
  179. package/docs/crawl/docs/_getting-started/my-first-component.html +0 -189
  180. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +0 -110
  181. package/docs/crawl/docs/_getting-started/pubsub.html +0 -62
  182. package/docs/crawl/docs/_getting-started/start.html +0 -76
  183. package/docs/crawl/docs/_getting-started/theming.html +0 -333
  184. package/docs/crawl/docs/_misc/api-configuration.html +0 -149
  185. package/docs/crawl/docs/_misc/dataProviderKey.html +0 -135
  186. package/docs/crawl/docs/_misc/docs-mock-api.html +0 -158
  187. package/docs/crawl/docs/_misc/dynamic-path.html +0 -180
  188. package/docs/crawl/docs/_misc/endpoint.html +0 -50
  189. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +0 -138
  190. package/docs/crawl/docs/_misc/html-integration.html +0 -48
  191. package/docs/crawl/hubs/decorators.html +0 -547
  192. package/docs/crawl/hubs/form-components.html +0 -381
  193. package/docs/crawl/hubs/remote-data.html +0 -452
  194. package/docs/crawl/index.html +0 -102
  195. package/docs/llms-full.txt +0 -7008
  196. package/docs/llms.txt +0 -97
  197. package/docs/sitemap.xml +0 -240
  198. package/docs/src/core/components/functional/date/date.md +0 -290
  199. package/docs/src/core/components/functional/fetch/fetch.md +0 -125
  200. package/docs/src/core/components/functional/if/if.md +0 -9
  201. package/docs/src/core/components/functional/jsonata/jsonata.md +0 -56
  202. package/docs/src/core/components/functional/list/list.md +0 -65
  203. package/docs/src/core/components/functional/mix/mix.md +0 -41
  204. package/docs/src/core/components/functional/queue/queue.md +0 -72
  205. package/docs/src/core/components/functional/router/router.md +0 -94
  206. package/docs/src/core/components/functional/sdui/default-library.json +0 -108
  207. package/docs/src/core/components/functional/sdui/example.json +0 -99
  208. package/docs/src/core/components/functional/sdui/sdui.md +0 -356
  209. package/docs/src/core/components/functional/states/states.md +0 -87
  210. package/docs/src/core/components/functional/submit/submit.md +0 -114
  211. package/docs/src/core/components/functional/subscriber/subscriber.md +0 -91
  212. package/docs/src/core/components/functional/value/value.md +0 -35
  213. package/docs/src/core/components/ui/alert/alert.md +0 -196
  214. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -85
  215. package/docs/src/core/components/ui/badge/badge.md +0 -188
  216. package/docs/src/core/components/ui/button/button.md +0 -183
  217. package/docs/src/core/components/ui/captcha/captcha.md +0 -71
  218. package/docs/src/core/components/ui/card/card.md +0 -215
  219. package/docs/src/core/components/ui/divider/divider.md +0 -129
  220. package/docs/src/core/components/ui/form/checkbox/checkbox.md +0 -77
  221. package/docs/src/core/components/ui/form/fieldset/fieldset.md +0 -205
  222. package/docs/src/core/components/ui/form/form-actions/form-actions.md +0 -100
  223. package/docs/src/core/components/ui/form/form-layout/form-layout.md +0 -119
  224. package/docs/src/core/components/ui/form/input/input.md +0 -142
  225. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
  226. package/docs/src/core/components/ui/form/radio/radio.md +0 -57
  227. package/docs/src/core/components/ui/form/select/select.md +0 -71
  228. package/docs/src/core/components/ui/form/switch/switch.md +0 -57
  229. package/docs/src/core/components/ui/form/textarea/textarea.md +0 -65
  230. package/docs/src/core/components/ui/group/group.md +0 -75
  231. package/docs/src/core/components/ui/icon/icon.md +0 -214
  232. package/docs/src/core/components/ui/icon/icons.json +0 -1
  233. package/docs/src/core/components/ui/image/image.md +0 -233
  234. package/docs/src/core/components/ui/link/link.md +0 -81
  235. package/docs/src/core/components/ui/loader/loader.md +0 -112
  236. package/docs/src/core/components/ui/menu/menu.md +0 -370
  237. package/docs/src/core/components/ui/modal/modal.md +0 -235
  238. package/docs/src/core/components/ui/pop/pop.md +0 -294
  239. package/docs/src/core/components/ui/progress/progress.md +0 -109
  240. package/docs/src/core/components/ui/table/table.md +0 -431
  241. package/docs/src/core/components/ui/theme/theme.md +0 -122
  242. package/docs/src/core/components/ui/toast/toast.md +0 -216
  243. package/docs/src/core/components/ui/tooltip/tooltip.md +0 -124
  244. package/docs/src/docs/_core-concept/dataFlow.md +0 -88
  245. package/docs/src/docs/_core-concept/overview.md +0 -57
  246. package/docs/src/docs/_core-concept/subscriber.md +0 -75
  247. package/docs/src/docs/_decorators/ancestor-attribute.md +0 -128
  248. package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
  249. package/docs/src/docs/_decorators/bind.md +0 -167
  250. package/docs/src/docs/_decorators/get.md +0 -162
  251. package/docs/src/docs/_decorators/handle.md +0 -175
  252. package/docs/src/docs/_decorators/on-assign.md +0 -390
  253. package/docs/src/docs/_decorators/patch.md +0 -70
  254. package/docs/src/docs/_decorators/post.md +0 -146
  255. package/docs/src/docs/_decorators/publish.md +0 -55
  256. package/docs/src/docs/_decorators/put.md +0 -70
  257. package/docs/src/docs/_decorators/subscribe.md +0 -100
  258. package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
  259. package/docs/src/docs/_directives/sub.md +0 -91
  260. package/docs/src/docs/_getting-started/ai-agents.md +0 -76
  261. package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
  262. package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
  263. package/docs/src/docs/_getting-started/create-a-component.md +0 -139
  264. package/docs/src/docs/_getting-started/my-first-component.md +0 -236
  265. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
  266. package/docs/src/docs/_getting-started/pubsub.md +0 -37
  267. package/docs/src/docs/_getting-started/start.md +0 -47
  268. package/docs/src/docs/_getting-started/theming.md +0 -253
  269. package/docs/src/docs/_misc/api-configuration.md +0 -81
  270. package/docs/src/docs/_misc/dataProviderKey.md +0 -168
  271. package/docs/src/docs/_misc/docs-mock-api.md +0 -63
  272. package/docs/src/docs/_misc/dynamic-path.md +0 -71
  273. package/docs/src/docs/_misc/endpoint.md +0 -45
  274. package/docs/src/docs/_misc/formelement-subscriber-removal.md +0 -115
  275. package/docs/src/docs/_misc/html-integration.md +0 -15
  276. package/docs/src/docs/search/docs-search.json +0 -12242
  277. package/docs/src/tag-list.json +0 -1
  278. package/docs/src/tsconfig-model.json +0 -23
  279. package/docs/src/tsconfig.json +0 -1242
  280. package/src/docs/prism/index.ts +0 -6
  281. package/src/docs/prism/prism.css +0 -158
  282. package/src/docs/prism/prism.js +0 -1022
package/docs/crawl/core/components/ui/loader/loader.html DELETED
@@ -1,124 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/loader/loader.html" data-doc-id="core/components/ui/loader/loader">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Loader — Concorde</title>
7
- <meta name="description" content="sonic-loader shows a loading animation in the page or as a viewport overlay. Default mode is fixed (centered overlay). Use inline inside lists and fetch placeholders. Pair noDelay when the spinner sho">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/loader/loader, loader, Loader, UI component, sonic-loader, web component, mode, fixed, inline, noDelay, sonic-fetch, sonic-list, currentColor">
9
- <meta name="concorde-doc-id" content="core/components/ui/loader/loader">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/loader/loader.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/loader/loader.md/loader" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Loader</strong>. sonic-loader shows a loading animation in the page or as a viewport overlay. Default mode is fixed (centered overlay). Use inline inside lists and fetch placeholders. Pair noDelay when the spinner sho <span>Doc ID: <code>core/components/ui/loader/loader</code>. Keywords: Concorde, supersoniks, core/components/ui/loader/loader, loader, Loader, UI component, sonic-loader, web component, mode, fixed, inline, noDelay, sonic-fetch, sonic-list, currentColor. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/loader/loader.html">https://concorde.supersoniks.org/crawl/core/components/ui/loader/loader.html</a>.</span></p>
19
- <h1 id="loader">Loader</h1>
20
- <p><strong><code>sonic-loader</code></strong> shows a loading animation in the page or as a viewport overlay. Default <strong><code>mode</code></strong> is <strong><code>fixed</code></strong> (centered overlay). Use <strong><code>inline</code></strong> inside lists and fetch placeholders. Pair <strong><code>noDelay</code></strong> when the spinner should appear without the default fade-in wait. For <strong><code>sonic-fetch</code></strong> / <strong><code>sonic-list</code></strong>, set the parent <strong><code>loader</code></strong> attribute instead of embedding a tag manually.</p>
21
- <h2 id="basic-example">Basic example</h2>
22
- <p>Inline loaders fit content areas; they use the theme primary color unless <strong><code>currentColor</code></strong> is set.</p>
23
- <pre><code>&lt;sonic-loader mode=&quot;inline&quot;&gt;&lt;/sonic-loader&gt;
24
- </code></pre>
25
- <h2 id="mode">Mode</h2>
26
- <p><strong><code>inline</code></strong> — ellipsis animation in the document flow. <strong><code>fixed</code></strong> — centered overlay (<code>position: fixed</code>); default when the tag is omitted.</p>
27
- <pre><code>&lt;sonic-loader mode=&quot;inline&quot;&gt;&lt;/sonic-loader&gt;
28
- </code></pre>
29
- <p>Use the checkbox below to toggle a <strong><code>fixed</code></strong> loader over the page (default <strong><code>mode</code></strong> on <strong><code>sonic-loader</code></strong>).</p>
30
- <p><docs-lit-demo for="docs-toggle-loader-demo"></docs-lit-demo></p>
31
- <h2 id="inline-alignment-and-color">Inline alignment and color</h2>
32
- <p><strong><code>align</code></strong> only affects <strong><code>mode=&quot;inline&quot;</code></strong>: <strong><code>left</code></strong> · <strong><code>center</code></strong> (default) · <strong><code>right</code></strong>. Set <strong><code>currentColor</code></strong> so dots follow the host <code>color</code> (for example on a purple parent).</p>
33
- <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
34
- &lt;sonic-loader mode=&quot;inline&quot; currentColor style=&quot;color: purple;&quot;&gt;&lt;/sonic-loader&gt;
35
- &lt;div class=&quot;flex flex-col gap-2&quot;&gt;
36
- &lt;sonic-loader mode=&quot;inline&quot; align=&quot;left&quot;&gt;&lt;/sonic-loader&gt;
37
- &lt;sonic-loader mode=&quot;inline&quot; align=&quot;center&quot;&gt;&lt;/sonic-loader&gt;
38
- &lt;sonic-loader mode=&quot;inline&quot; align=&quot;right&quot;&gt;&lt;/sonic-loader&gt;
39
- &lt;/div&gt;
40
- &lt;/div&gt;
41
- </code></pre>
42
- <h2 id="nodelay"><code>noDelay</code></h2>
43
- <p>By default <strong><code>mode=&quot;fixed&quot;</code></strong> waits briefly before fading in. <strong><code>mode=&quot;inline&quot;</code></strong> already skips that wait. Set <strong><code>noDelay</code></strong> on <strong><code>fixed</code></strong> (or pass <strong><code>noDelay: true</code></strong> to <strong><code>Loader.show()</code></strong>) to appear immediately.</p>
44
- <pre><code>&lt;sonic-loader mode=&quot;inline&quot; noDelay&gt;&lt;/sonic-loader&gt;
45
- </code></pre>
46
- <h2 id="accessibility-announce">Accessibility (<code>announce</code>)</h2>
47
- <p>The animation is <strong><code>aria-hidden</code></strong> by default so screen readers are not spammed on every fetch. Set <strong><code>announce</code></strong> when the loader is injected <strong>after</strong> user action (for example a global overlay): the host gets <strong><code>role=&quot;status&quot;</code></strong>, <strong><code>aria-live=&quot;polite&quot;</code></strong>, and a localized <strong><code>aria-label</code></strong> (“Loading” / “Chargement en cours”, …). For in-button loading, prefer <strong><code>sonic-button</code></strong> <strong><code>loading</code></strong> and <strong><code>aria-busy</code></strong> on the control—not on the loader.</p>
48
- <pre><code>&lt;sonic-loader mode=&quot;inline&quot; announce&gt;&lt;/sonic-loader&gt;
49
- </code></pre>
50
- <h2 id="show-and-hide-programmatically">Show and hide programmatically</h2>
51
- <p>Import <strong><code>Loader</code></strong> and call <strong><code>Loader.show()</code></strong> / <strong><code>Loader.hide()</code></strong>. <strong><code>hide()</code></strong> is reference-counted: call it once per <strong><code>show()</code></strong>. With no <strong><code>container</code></strong>, the loader is appended to the theme pop container and <strong><code>mode</code></strong> is always <strong><code>fixed</code></strong>. Pass <strong><code>container</code></strong> and <strong><code>mode: &quot;inline&quot;</code></strong> to mount an inline instance in a specific element.</p>
52
- <pre><code class="language-javascript">import { Loader } from &quot;@supersoniks/concorde/core/components/ui/loader/loader&quot;;
53
-
54
- Loader.show({
55
- mode: &quot;fixed&quot;,
56
- noDelay: false,
57
- announce: true,
58
- container: document.querySelector(&quot;#foo&quot;),
59
- });
60
-
61
- Loader.hide();
62
- </code></pre>
63
- <h2 id="composition">Composition</h2>
64
- <p><strong><code>sonic-button</code></strong> <strong><code>loading</code></strong> shows an icon spinner and sets <strong><code>aria-busy</code></strong> on the button. <strong><code>sonic-fetch</code></strong> and <strong><code>sonic-list</code></strong> render <strong><code>sonic-loader</code></strong> when their <strong><code>loader</code></strong> attribute is set: <strong><code>true</code></strong> or an empty string maps to <strong><code>fixed</code></strong>; otherwise use <strong><code>inline</code></strong> or <strong><code>fixed</code></strong>.</p>
65
- <pre><code>&lt;sonic-button loading&gt;Save changes&lt;/sonic-button&gt;
66
- </code></pre>
67
- <h2 id="api-reference">API reference</h2>
68
- <table>
69
- <thead>
70
- <tr>
71
- <th>Attribute</th>
72
- <th>Values</th>
73
- <th>Description</th>
74
- </tr>
75
- </thead>
76
- <tbody><tr>
77
- <td><code>mode</code></td>
78
- <td><code>inline</code> · <code>fixed</code> (default <code>fixed</code>)</td>
79
- <td>Layout: in-flow ellipsis vs viewport-centered overlay</td>
80
- </tr>
81
- <tr>
82
- <td><code>noDelay</code></td>
83
- <td>boolean</td>
84
- <td>Skips the initial fade-in delay before the animation appears</td>
85
- </tr>
86
- <tr>
87
- <td><code>announce</code></td>
88
- <td>boolean</td>
89
- <td><strong><code>role=&quot;status&quot;</code></strong> and <strong><code>aria-live=&quot;polite&quot;</code></strong> with localized loading label when the loader should be announced</td>
90
- </tr>
91
- <tr>
92
- <td><code>align</code></td>
93
- <td><code>left</code> · <code>center</code> · <code>right</code></td>
94
- <td>Horizontal alignment for <strong><code>mode=&quot;inline&quot;</code></strong> only (attribute selector; default centered)</td>
95
- </tr>
96
- <tr>
97
- <td><code>currentColor</code></td>
98
- <td>boolean</td>
99
- <td>Uses <code>currentColor</code> for dot fill instead of <strong><code>--sc-primary</code></strong></td>
100
- </tr>
101
- </tbody></table>
102
- <p>This component has <strong>no slots</strong>. The animation markup is internal.</p>
103
- <h3 id="static-methods">Static methods</h3>
104
- <table>
105
- <thead>
106
- <tr>
107
- <th>Method</th>
108
- <th>Description</th>
109
- </tr>
110
- </thead>
111
- <tbody><tr>
112
- <td><code>Loader.show(conf?)</code></td>
113
- <td>Mounts the shared loader instance. <strong><code>conf.mode</code></strong>, <strong><code>conf.noDelay</code></strong>, <strong><code>conf.announce</code></strong>, optional <strong><code>conf.container</code></strong>. Without <strong><code>container</code></strong>, uses the theme pop container and forces <strong><code>fixed</code></strong>.</td>
114
- </tr>
115
- <tr>
116
- <td><code>Loader.hide()</code></td>
117
- <td>Decrements the show counter and removes the instance from the DOM when it reaches zero.</td>
118
- </tr>
119
- </tbody></table>
120
-
121
- </article>
122
- </main>
123
- </body>
124
- </html>
package/docs/crawl/core/components/ui/menu/menu.html DELETED
@@ -1,394 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/menu/menu.html" data-doc-id="core/components/ui/menu/menu">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Menu — Concorde</title>
7
- <meta name="description" content="sonic-menu lays out navigation or actions as a direction row or column of sonic-menu-item entries (ghost variant and block shape by default), optional sonic-divider separators, and overflow content in">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/menu/menu, menu, Menu, UI component, sonic-menu, web component, direction, sonic-menu-item, variant, shape, sonic-divider, more, href, pushstate, autoActive">
9
- <meta name="concorde-doc-id" content="core/components/ui/menu/menu">
10
- <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/menu/menu.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/menu/menu.md/menu" rel="nofollow">interactive version</a></p>
15
- </header>
16
- <main>
17
- <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Menu</strong>. sonic-menu lays out navigation or actions as a direction row or column of sonic-menu-item entries (ghost variant and block shape by default), optional sonic-divider separators, and overflow content in <span>Doc ID: <code>core/components/ui/menu/menu</code>. Keywords: Concorde, supersoniks, core/components/ui/menu/menu, menu, Menu, UI component, sonic-menu, web component, direction, sonic-menu-item, variant, shape, sonic-divider, more, href, pushstate, autoActive. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/menu/menu.html">https://concorde.supersoniks.org/crawl/core/components/ui/menu/menu.html</a>.</span></p>
19
- <h1 id="menu">Menu</h1>
20
- <p><strong><code>sonic-menu</code></strong> lays out navigation or actions as a <strong><code>direction</code></strong> row or column of <strong><code>sonic-menu-item</code></strong> entries (ghost <strong><code>variant</code></strong> and block <strong><code>shape</code></strong> by default), optional <strong><code>sonic-divider</code></strong> separators, and overflow content in the <strong><code>more</code></strong> slot (popover “…” trigger). Set <strong><code>href</code></strong> / <strong><code>pushstate</code></strong> / <strong><code>autoActive</code></strong> on each <strong><code>sonic-menu-item</code></strong>—same API as <strong><code>sonic-button</code></strong>—not on the menu host.</p>
21
- <h2 id="basic-example">Basic example</h2>
22
- <pre><code>&lt;sonic-menu direction=&quot;row&quot;&gt;
23
- &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
24
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
25
- Home
26
- &lt;/sonic-menu-item&gt;
27
- &lt;sonic-menu-item&gt;
28
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
29
- Profile
30
- &lt;/sonic-menu-item&gt;
31
- &lt;sonic-menu-item type=&quot;danger&quot;&gt;
32
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;log-out&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
33
- Log out
34
- &lt;/sonic-menu-item&gt;
35
- &lt;/sonic-menu&gt;
36
- </code></pre>
37
- <h2 id="direction">Direction</h2>
38
- <p>Default <strong><code>direction</code></strong> is <strong><code>column</code></strong>. Use <strong><code>row</code></strong> for horizontal toolbars or tabs.</p>
39
- <pre><code>&lt;sonic-menu direction=&quot;row&quot;&gt;
40
- &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
41
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;arrow-right&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
42
- Row
43
- &lt;/sonic-menu-item&gt;
44
- &lt;sonic-menu-item&gt;
45
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
46
- Profile
47
- &lt;/sonic-menu-item&gt;
48
- &lt;sonic-menu-item&gt;
49
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
50
- History
51
- &lt;/sonic-menu-item&gt;
52
- &lt;sonic-menu-item&gt;
53
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
54
- Orders
55
- &lt;/sonic-menu-item&gt;
56
- &lt;sonic-menu-item type=&quot;danger&quot;&gt;
57
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;log-out&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
58
- Log out
59
- &lt;/sonic-menu-item&gt;
60
- &lt;/sonic-menu&gt;
61
- &lt;sonic-menu direction=&quot;column&quot;&gt;
62
- &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
63
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;arrow-down&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
64
- Column
65
- &lt;/sonic-menu-item&gt;
66
- &lt;sonic-menu-item&gt;
67
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
68
- Profile
69
- &lt;/sonic-menu-item&gt;
70
- &lt;sonic-menu-item&gt;
71
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
72
- History
73
- &lt;/sonic-menu-item&gt;
74
- &lt;sonic-menu-item&gt;
75
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
76
- Orders
77
- &lt;/sonic-menu-item&gt;
78
- &lt;sonic-menu-item type=&quot;danger&quot;&gt;
79
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;log-out&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
80
- Log out
81
- &lt;/sonic-menu-item&gt;
82
- &lt;/sonic-menu&gt;
83
- </code></pre>
84
- <h2 id="size">Size</h2>
85
- <p><strong><code>size</code></strong> on the menu propagates to items and the <strong><code>more</code></strong> trigger when they omit their own <strong><code>size</code></strong>.</p>
86
- <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
87
- &lt;sonic-menu size=&quot;xs&quot; direction=&quot;row&quot;&gt;
88
- &lt;sonic-menu-item&gt;XS&lt;/sonic-menu-item&gt;
89
- &lt;sonic-menu-item&gt;
90
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
91
- Profile
92
- &lt;/sonic-menu-item&gt;
93
- &lt;sonic-menu-item&gt;
94
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
95
- History
96
- &lt;/sonic-menu-item&gt;
97
- &lt;sonic-menu-item&gt;
98
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
99
- Orders
100
- &lt;/sonic-menu-item&gt;
101
- &lt;/sonic-menu&gt;
102
- &lt;sonic-menu size=&quot;sm&quot; direction=&quot;row&quot;&gt;
103
- &lt;sonic-menu-item&gt;Small&lt;/sonic-menu-item&gt;
104
- &lt;sonic-menu-item&gt;
105
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
106
- Profile
107
- &lt;/sonic-menu-item&gt;
108
- &lt;sonic-menu-item&gt;
109
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
110
- History
111
- &lt;/sonic-menu-item&gt;
112
- &lt;sonic-menu-item&gt;
113
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
114
- Orders
115
- &lt;/sonic-menu-item&gt;
116
- &lt;/sonic-menu&gt;
117
- &lt;sonic-menu direction=&quot;row&quot;&gt;
118
- &lt;sonic-menu-item&gt;Medium&lt;/sonic-menu-item&gt;
119
- &lt;sonic-menu-item&gt;
120
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
121
- Profile
122
- &lt;/sonic-menu-item&gt;
123
- &lt;sonic-menu-item&gt;
124
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
125
- History
126
- &lt;/sonic-menu-item&gt;
127
- &lt;sonic-menu-item&gt;
128
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
129
- Orders
130
- &lt;/sonic-menu-item&gt;
131
- &lt;/sonic-menu&gt;
132
- &lt;sonic-menu size=&quot;lg&quot; direction=&quot;row&quot;&gt;
133
- &lt;sonic-menu-item&gt;Large&lt;/sonic-menu-item&gt;
134
- &lt;sonic-menu-item&gt;
135
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
136
- Profile
137
- &lt;/sonic-menu-item&gt;
138
- &lt;sonic-menu-item&gt;
139
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
140
- History
141
- &lt;/sonic-menu-item&gt;
142
- &lt;sonic-menu-item&gt;
143
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
144
- Orders
145
- &lt;/sonic-menu-item&gt;
146
- &lt;/sonic-menu&gt;
147
- &lt;sonic-menu size=&quot;xl&quot; direction=&quot;row&quot;&gt;
148
- &lt;sonic-menu-item&gt;XL&lt;/sonic-menu-item&gt;
149
- &lt;sonic-menu-item&gt;
150
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
151
- Profile
152
- &lt;/sonic-menu-item&gt;
153
- &lt;sonic-menu-item&gt;
154
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
155
- History
156
- &lt;/sonic-menu-item&gt;
157
- &lt;sonic-menu-item&gt;
158
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
159
- Orders
160
- &lt;/sonic-menu-item&gt;
161
- &lt;/sonic-menu&gt;
162
- &lt;/div&gt;
163
- </code></pre>
164
- <h2 id="shadow">Shadow</h2>
165
- <p>Optional <strong><code>shadow</code></strong> wraps the menu surface (no shadow when omitted).</p>
166
- <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
167
- &lt;sonic-menu direction=&quot;row&quot;&gt;
168
- &lt;sonic-menu-item&gt;None&lt;/sonic-menu-item&gt;
169
- &lt;/sonic-menu&gt;
170
- &lt;sonic-menu shadow=&quot;sm&quot; direction=&quot;row&quot;&gt;
171
- &lt;sonic-menu-item&gt;Small&lt;/sonic-menu-item&gt;
172
- &lt;/sonic-menu&gt;
173
- &lt;sonic-menu shadow=&quot;md&quot; direction=&quot;row&quot;&gt;
174
- &lt;sonic-menu-item&gt;Medium&lt;/sonic-menu-item&gt;
175
- &lt;/sonic-menu&gt;
176
- &lt;sonic-menu shadow=&quot;lg&quot; direction=&quot;row&quot;&gt;
177
- &lt;sonic-menu-item&gt;Large&lt;/sonic-menu-item&gt;
178
- &lt;/sonic-menu&gt;
179
- &lt;/div&gt;
180
- </code></pre>
181
- <h2 id="align">Align</h2>
182
- <p><strong><code>align</code></strong> propagates to items except square / circle <strong><code>shape</code></strong>.</p>
183
- <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
184
- &lt;sonic-menu align=&quot;center&quot;&gt;
185
- &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
186
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
187
- Home
188
- &lt;/sonic-menu-item&gt;
189
- &lt;sonic-menu-item&gt;
190
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
191
- Profile
192
- &lt;/sonic-menu-item&gt;
193
- &lt;/sonic-menu&gt;
194
- &lt;sonic-menu align=&quot;left&quot;&gt;
195
- &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
196
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
197
- Home
198
- &lt;/sonic-menu-item&gt;
199
- &lt;sonic-menu-item&gt;
200
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
201
- Profile
202
- &lt;/sonic-menu-item&gt;
203
- &lt;/sonic-menu&gt;
204
- &lt;sonic-menu align=&quot;right&quot;&gt;
205
- &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
206
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
207
- Home
208
- &lt;/sonic-menu-item&gt;
209
- &lt;sonic-menu-item&gt;
210
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
211
- Profile
212
- &lt;/sonic-menu-item&gt;
213
- &lt;/sonic-menu&gt;
214
- &lt;/div&gt;
215
- </code></pre>
216
- <h2 id="more">More</h2>
217
- <p>Assign nodes to <strong><code>slot=&quot;more&quot;</code></strong> to show the overflow popover. The trigger appears only when the slot has content. Icon orientation follows <strong><code>direction</code></strong> (vertical ellipsis in a row menu).</p>
218
- <pre><code>&lt;sonic-menu direction=&quot;row&quot;&gt;
219
- &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
220
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
221
- Home
222
- &lt;/sonic-menu-item&gt;
223
- &lt;sonic-menu-item&gt;
224
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
225
- Profile
226
- &lt;/sonic-menu-item&gt;
227
- &lt;sonic-menu-item&gt;
228
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
229
- History
230
- &lt;/sonic-menu-item&gt;
231
- &lt;sonic-menu-item&gt;
232
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
233
- Orders
234
- &lt;/sonic-menu-item&gt;
235
- &lt;sonic-menu slot=&quot;more&quot;&gt;
236
- &lt;sonic-menu-item&gt;
237
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;settings&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
238
- Settings
239
- &lt;/sonic-menu-item&gt;
240
- &lt;sonic-menu-item&gt;
241
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
242
- Messages
243
- &lt;/sonic-menu-item&gt;
244
- &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
245
- &lt;sonic-menu-item type=&quot;danger&quot;&gt;
246
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;log-out&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
247
- Log out
248
- &lt;/sonic-menu-item&gt;
249
- &lt;/sonic-menu&gt;
250
- &lt;/sonic-menu&gt;
251
- </code></pre>
252
- <h2 id="scrollable">Scrollable</h2>
253
- <p>With <strong><code>scrollable</code></strong>, the main slot scrolls with edge fade masks; drag-to-scroll works on pointer devices. When exactly one item is <strong><code>active</code></strong>, the menu scrolls it into view.</p>
254
- <pre><code>&lt;sonic-menu direction=&quot;row&quot; scrollable&gt;
255
- &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
256
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
257
- Home
258
- &lt;/sonic-menu-item&gt;
259
- &lt;sonic-menu-item&gt;
260
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
261
- Profile
262
- &lt;/sonic-menu-item&gt;
263
- &lt;sonic-menu-item&gt;
264
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
265
- History
266
- &lt;/sonic-menu-item&gt;
267
- &lt;sonic-menu-item&gt;
268
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
269
- Orders
270
- &lt;/sonic-menu-item&gt;
271
- &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
272
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
273
- Home
274
- &lt;/sonic-menu-item&gt;
275
- &lt;sonic-menu-item&gt;
276
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
277
- Profile
278
- &lt;/sonic-menu-item&gt;
279
- &lt;sonic-menu-item&gt;
280
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
281
- History
282
- &lt;/sonic-menu-item&gt;
283
- &lt;sonic-menu-item&gt;
284
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
285
- Orders
286
- &lt;/sonic-menu-item&gt;
287
- &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
288
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
289
- Home
290
- &lt;/sonic-menu-item&gt;
291
- &lt;sonic-menu-item&gt;
292
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
293
- Profile
294
- &lt;/sonic-menu-item&gt;
295
- &lt;sonic-menu-item&gt;
296
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
297
- History
298
- &lt;/sonic-menu-item&gt;
299
- &lt;sonic-menu-item&gt;
300
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
301
- Orders
302
- &lt;/sonic-menu-item&gt;
303
- &lt;sonic-menu-item&gt;
304
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;settings&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
305
- Settings
306
- &lt;/sonic-menu-item&gt;
307
- &lt;sonic-menu-item&gt;
308
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
309
- Messages
310
- &lt;/sonic-menu-item&gt;
311
- &lt;sonic-menu slot=&quot;more&quot;&gt;
312
- &lt;sonic-menu-item&gt;
313
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;settings&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
314
- Settings
315
- &lt;/sonic-menu-item&gt;
316
- &lt;sonic-menu-item&gt;
317
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
318
- Messages
319
- &lt;/sonic-menu-item&gt;
320
- &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
321
- &lt;sonic-menu-item type=&quot;danger&quot;&gt;
322
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;log-out&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
323
- Log out
324
- &lt;/sonic-menu-item&gt;
325
- &lt;/sonic-menu&gt;
326
- &lt;/sonic-menu&gt;
327
- </code></pre>
328
- <h2 id="api-reference">API reference</h2>
329
- <table>
330
- <thead>
331
- <tr>
332
- <th>Attribute</th>
333
- <th>Values</th>
334
- <th>Description</th>
335
- </tr>
336
- </thead>
337
- <tbody><tr>
338
- <td><code>direction</code></td>
339
- <td><code>column</code> (default) · <code>row</code></td>
340
- <td>Vertical list or horizontal bar</td>
341
- </tr>
342
- <tr>
343
- <td><code>align</code></td>
344
- <td><code>left</code> (default) · <code>center</code> · <code>right</code></td>
345
- <td>Alignment propagated to items (except square / circle <strong><code>shape</code></strong>)</td>
346
- </tr>
347
- <tr>
348
- <td><code>size</code></td>
349
- <td><code>xs</code> · <code>sm</code> · <code>md</code> · <code>lg</code> · <code>xl</code></td>
350
- <td>Propagated to items and the <strong><code>more</code></strong> trigger when unset on the item</td>
351
- </tr>
352
- <tr>
353
- <td><code>shadow</code></td>
354
- <td><code>sm</code> · <code>md</code> · <code>lg</code></td>
355
- <td>Shadow around the menu; omitted for none</td>
356
- </tr>
357
- <tr>
358
- <td><code>minWidth</code></td>
359
- <td>CSS length</td>
360
- <td>Minimum width of the container (default <code>0</code>)</td>
361
- </tr>
362
- <tr>
363
- <td><code>scrollable</code></td>
364
- <td>boolean</td>
365
- <td>Scroll with edge fade; auto-scroll when a single item is <strong><code>active</code></strong></td>
366
- </tr>
367
- <tr>
368
- <td><code>moreShape</code></td>
369
- <td><code>circle</code> (default) · <code>square</code></td>
370
- <td>Shape of the <strong><code>more</code></strong> slot trigger button</td>
371
- </tr>
372
- </tbody></table>
373
- <table>
374
- <thead>
375
- <tr>
376
- <th>Slot</th>
377
- <th>Description</th>
378
- </tr>
379
- </thead>
380
- <tbody><tr>
381
- <td><em>(default)</em></td>
382
- <td>Visible items: <strong><code>sonic-menu-item</code></strong>, <strong><code>sonic-divider</code></strong>, nested <strong><code>sonic-menu</code></strong></td>
383
- </tr>
384
- <tr>
385
- <td><code>more</code></td>
386
- <td>Popover content for the “…” control; shown only when the slot has assigned nodes</td>
387
- </tr>
388
- </tbody></table>
389
- <p><strong><code>sonic-menu-item</code></strong> extends <strong><code>sonic-button</code></strong> (defaults: <strong><code>variant=&quot;ghost&quot;</code></strong>, <strong><code>shape=&quot;block&quot;</code></strong>). Use the button docs for <strong><code>type</code></strong>, <strong><code>variant</code></strong>, <strong><code>href</code></strong>, <strong><code>pushstate</code></strong>, <strong><code>autoActive</code></strong>, and item slots.</p>
390
-
391
- </article>
392
- </main>
393
- </body>
394
- </html>