@supersoniks/concorde 5.1.1 → 5.1.3

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 (494) hide show
  1. package/.agents/skills/concorde-docs/SKILL.md +153 -0
  2. package/.agents/skills/{concorde-component-docs/template.md → concorde-docs/templates/component.md} +6 -2
  3. package/.agents/skills/concorde-docs/templates/decorator.md +43 -0
  4. package/.agents/skills/concorde-docs/templates/guide.md +25 -0
  5. package/PLAN-DOCS-AGENTS.md +80 -0
  6. package/README.md +4 -4
  7. package/ai/README.md +29 -41
  8. package/ai/skills/concorde/SKILL.md +54 -324
  9. package/ai/skills/concorde/rules/composition.md +32 -0
  10. package/ai/skills/concorde/rules/data.md +47 -0
  11. package/ai/skills/concorde/rules/http.md +25 -0
  12. package/ai/skills/concorde/rules/lists-forms.md +35 -0
  13. package/ai/skills/concorde/rules/styling.md +46 -0
  14. package/ai/skills/concorde/rules/troubleshooting.md +45 -0
  15. package/build-infos.json +1 -1
  16. package/concorde-core.bundle.js +21 -21
  17. package/concorde-core.es.js +977 -980
  18. package/custom-elements-manifest.public.config.mjs +8 -0
  19. package/{.tmp-cem/custom-elements.json → custom-elements.json} +11758 -8904
  20. package/dist/concorde-core.bundle.js +21 -21
  21. package/dist/concorde-core.es.js +977 -980
  22. package/dist/docs-mock-api-sw.js +58 -223
  23. package/dist/docs-mock-api-sw.js.map +4 -4
  24. package/dist/img/concorde/plane_01.jpg +0 -0
  25. package/dist/img/concorde/plane_02.jpg +0 -0
  26. package/dist/img/concorde/plane_03.jpg +0 -0
  27. package/dist/img/concorde/plane_04.jpg +0 -0
  28. package/dist/img/concorde/plane_05.jpg +0 -0
  29. package/dist/img/concorde/plane_06.jpg +0 -0
  30. package/dist/img/concorde/plane_07.jpg +0 -0
  31. package/dist/img/concorde/plane_08.jpg +0 -0
  32. package/dist/img/concorde/plane_09.jpg +0 -0
  33. package/dist/img/concorde/plane_10.jpg +0 -0
  34. package/dist/img/concorde/plane_11.jpg +0 -0
  35. package/dist/img/concorde/plane_12.jpg +0 -0
  36. package/dist/img/concorde/plane_13.jpg +0 -0
  37. package/dist/img/og-concorde.jpg +0 -0
  38. package/dist/robots.txt +11 -10
  39. package/docs/.htaccess +82 -0
  40. package/docs/404.html +15 -0
  41. package/docs/404.md +5 -0
  42. package/docs/about.html +111 -0
  43. package/docs/about.md +22 -0
  44. package/docs/assets/{index-Bb-_LRyY.js → index-6sS76xWj.js} +2625 -3158
  45. package/docs/assets/index-DkdPbH0F.css +1 -0
  46. package/docs/core/components/functional/date/date.html +211 -0
  47. package/docs/core/components/functional/date/date.md +150 -0
  48. package/docs/core/components/functional/fetch/fetch.html +180 -0
  49. package/docs/core/components/functional/fetch/fetch.md +108 -0
  50. package/docs/core/components/functional/if/if.html +65 -0
  51. package/docs/core/components/functional/if/if.md +34 -0
  52. package/docs/core/components/functional/jsonata/jsonata.html +110 -0
  53. package/docs/core/components/functional/jsonata/jsonata.md +61 -0
  54. package/docs/core/components/functional/list/list.html +200 -0
  55. package/docs/core/components/functional/list/list.md +125 -0
  56. package/docs/core/components/functional/mix/mix.html +78 -0
  57. package/docs/core/components/functional/mix/mix.md +46 -0
  58. package/docs/core/components/functional/queue/queue.html +155 -0
  59. package/docs/core/components/functional/queue/queue.md +51 -0
  60. package/docs/core/components/functional/router/router.html +154 -0
  61. package/docs/core/components/functional/router/router.md +93 -0
  62. package/docs/core/components/functional/sdui/sdui-extension-points.html +127 -0
  63. package/docs/core/components/functional/sdui/sdui-extension-points.md +94 -0
  64. package/docs/core/components/functional/sdui/sdui.html +397 -0
  65. package/docs/core/components/functional/sdui/sdui.md +307 -0
  66. package/docs/core/components/functional/states/states.html +141 -0
  67. package/docs/core/components/functional/states/states.md +112 -0
  68. package/docs/core/components/functional/submit/submit.html +178 -0
  69. package/docs/core/components/functional/submit/submit.md +106 -0
  70. package/docs/core/components/functional/subscriber/subscriber.html +68 -0
  71. package/docs/core/components/functional/subscriber/subscriber.md +91 -0
  72. package/docs/core/components/functional/translation/translation.html +60 -0
  73. package/docs/core/components/functional/translation/translation.md +38 -0
  74. package/docs/core/components/functional/value/value.html +81 -0
  75. package/docs/core/components/functional/value/value.md +47 -0
  76. package/docs/core/components/ui/alert/alert.html +201 -0
  77. package/docs/core/components/ui/alert/alert.md +186 -0
  78. package/docs/core/components/ui/alert-messages/alert-messages.html +132 -0
  79. package/docs/core/components/ui/alert-messages/alert-messages.md +85 -0
  80. package/docs/core/components/ui/badge/badge.html +197 -0
  81. package/docs/core/components/ui/badge/badge.md +181 -0
  82. package/docs/core/components/ui/button/button.html +309 -0
  83. package/docs/core/components/ui/button/button.md +216 -0
  84. package/docs/core/components/ui/captcha/captcha.html +80 -0
  85. package/docs/core/components/ui/captcha/captcha.md +56 -0
  86. package/docs/core/components/ui/card/card.html +254 -0
  87. package/docs/core/components/ui/card/card.md +215 -0
  88. package/docs/core/components/ui/divider/divider.html +144 -0
  89. package/docs/core/components/ui/divider/divider.md +126 -0
  90. package/docs/core/components/ui/form/checkbox/checkbox.html +200 -0
  91. package/docs/core/components/ui/form/checkbox/checkbox.md +125 -0
  92. package/docs/core/components/ui/form/fieldset/fieldset.html +238 -0
  93. package/docs/core/components/ui/form/fieldset/fieldset.md +161 -0
  94. package/docs/core/components/ui/form/form-actions/form-actions.html +122 -0
  95. package/docs/core/components/ui/form/form-actions/form-actions.md +98 -0
  96. package/docs/core/components/ui/form/form-layout/form-layout.html +115 -0
  97. package/docs/core/components/ui/form/form-layout/form-layout.md +109 -0
  98. package/docs/core/components/ui/form/input/input.html +235 -0
  99. package/docs/core/components/ui/form/input/input.md +142 -0
  100. package/docs/core/components/ui/form/radio/radio.html +144 -0
  101. package/docs/core/components/ui/form/radio/radio.md +78 -0
  102. package/docs/core/components/ui/form/select/select.html +178 -0
  103. package/docs/core/components/ui/form/select/select.md +86 -0
  104. package/docs/core/components/ui/form/switch/switch.html +146 -0
  105. package/docs/core/components/ui/form/switch/switch.md +80 -0
  106. package/docs/core/components/ui/form/textarea/textarea.html +162 -0
  107. package/docs/core/components/ui/form/textarea/textarea.md +82 -0
  108. package/docs/core/components/ui/group/group.html +113 -0
  109. package/docs/core/components/ui/group/group.md +77 -0
  110. package/docs/core/components/ui/icon/icon.html +223 -0
  111. package/docs/core/components/ui/icon/icon.md +214 -0
  112. package/docs/core/components/ui/image/image.html +194 -0
  113. package/docs/core/components/ui/image/image.md +167 -0
  114. package/docs/core/components/ui/link/link.html +101 -0
  115. package/docs/core/components/ui/link/link.md +81 -0
  116. package/docs/core/components/ui/loader/loader.html +114 -0
  117. package/docs/core/components/ui/loader/loader.md +87 -0
  118. package/docs/core/components/ui/menu/menu.html +395 -0
  119. package/docs/core/components/ui/menu/menu.md +370 -0
  120. package/docs/core/components/ui/modal/modal.html +324 -0
  121. package/docs/core/components/ui/modal/modal.md +211 -0
  122. package/docs/core/components/ui/pop/pop.html +250 -0
  123. package/docs/core/components/ui/pop/pop.md +216 -0
  124. package/docs/core/components/ui/progress/progress.html +132 -0
  125. package/docs/core/components/ui/progress/progress.md +109 -0
  126. package/docs/core/components/ui/table/table.html +333 -0
  127. package/docs/core/components/ui/table/table.md +267 -0
  128. package/docs/core/components/ui/theme/theme.html +116 -0
  129. package/docs/core/components/ui/theme/theme.md +97 -0
  130. package/docs/core/components/ui/toast/toast.html +185 -0
  131. package/docs/core/components/ui/toast/toast.md +147 -0
  132. package/docs/core/components/ui/tooltip/tooltip.html +112 -0
  133. package/docs/core/components/ui/tooltip/tooltip.md +89 -0
  134. package/docs/custom-elements.json +16559 -0
  135. package/docs/docs/decorators/ancestor-attribute.html +71 -0
  136. package/docs/docs/decorators/ancestor-attribute.md +59 -0
  137. package/docs/docs/decorators/auto-subscribe.html +61 -0
  138. package/docs/docs/decorators/auto-subscribe.md +40 -0
  139. package/docs/docs/decorators/bind.html +87 -0
  140. package/docs/docs/decorators/bind.md +76 -0
  141. package/docs/docs/decorators/get.html +166 -0
  142. package/docs/docs/decorators/get.md +160 -0
  143. package/docs/docs/decorators/handle.html +139 -0
  144. package/docs/docs/decorators/handle.md +119 -0
  145. package/docs/docs/decorators/on-assign.html +72 -0
  146. package/docs/docs/decorators/on-assign.md +63 -0
  147. package/docs/docs/decorators/patch.html +76 -0
  148. package/docs/docs/decorators/patch.md +44 -0
  149. package/docs/docs/decorators/post.html +150 -0
  150. package/docs/docs/decorators/post.md +134 -0
  151. package/docs/docs/decorators/publish.html +74 -0
  152. package/docs/docs/decorators/publish.md +56 -0
  153. package/docs/docs/decorators/put.html +83 -0
  154. package/docs/docs/decorators/put.md +51 -0
  155. package/docs/docs/decorators/subscribe.html +91 -0
  156. package/docs/docs/decorators/subscribe.md +87 -0
  157. package/docs/docs/decorators/wait-for-ancestors.html +82 -0
  158. package/docs/docs/decorators/wait-for-ancestors.md +76 -0
  159. package/docs/docs/directives/sub.html +79 -0
  160. package/docs/docs/directives/sub.md +75 -0
  161. package/docs/docs/directives/t.html +91 -0
  162. package/docs/docs/directives/t.md +73 -0
  163. package/docs/docs/getting-started/ai-agents.html +130 -0
  164. package/docs/docs/getting-started/ai-agents.md +50 -0
  165. package/docs/docs/getting-started/components.html +27 -0
  166. package/docs/docs/getting-started/create-a-component.html +108 -0
  167. package/{src/docs/_getting-started → docs/docs/getting-started}/create-a-component.md +3 -6
  168. package/docs/docs/getting-started/dataFlow.html +174 -0
  169. package/{src/docs/_core-concept → docs/docs/getting-started}/dataFlow.md +18 -19
  170. package/docs/docs/getting-started/installation.html +69 -0
  171. package/docs/docs/getting-started/installation.md +36 -0
  172. package/docs/docs/getting-started/my-first-component.html +180 -0
  173. package/{src/docs/_getting-started → docs/docs/getting-started}/my-first-component.md +5 -14
  174. package/docs/docs/getting-started/start.html +47 -0
  175. package/{src/docs/_getting-started → docs/docs/getting-started}/start.md +1 -13
  176. package/docs/docs/getting-started/theming.html +334 -0
  177. package/docs/docs/index.html +99 -0
  178. package/docs/docs/misc/api-configuration.html +149 -0
  179. package/{src/docs/_misc → docs/docs/misc}/api-configuration.md +10 -12
  180. package/docs/docs/misc/dataProviderKey.html +136 -0
  181. package/{src/docs/_misc → docs/docs/misc}/dataProviderKey.md +4 -4
  182. package/docs/docs/misc/docs-mock-api.html +155 -0
  183. package/{src/docs/_misc → docs/docs/misc}/docs-mock-api.md +12 -13
  184. package/docs/docs/misc/dynamic-path.html +181 -0
  185. package/{src/docs/_misc → docs/docs/misc}/dynamic-path.md +8 -8
  186. package/docs/docs/misc/endpoint.html +51 -0
  187. package/{src/docs/_misc → docs/docs/misc}/endpoint.md +8 -8
  188. package/docs/docs/misc/html-integration.html +45 -0
  189. package/{src/docs/_misc → docs/docs/misc}/html-integration.md +4 -5
  190. package/docs/docs-mock-api-sw.js +58 -223
  191. package/docs/docs-mock-api-sw.js.map +4 -4
  192. package/docs/hubs/decorators.html +438 -0
  193. package/docs/hubs/form-components.html +404 -0
  194. package/docs/hubs/remote-data.html +367 -0
  195. package/docs/img/archive/concorde-001-2cv.webp +0 -0
  196. package/docs/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
  197. package/docs/img/archive/concorde-red-arrows-2002.webm +0 -0
  198. package/docs/img/archive/credits.json +28 -0
  199. package/docs/img/concorde/plane_01.jpg +0 -0
  200. package/docs/img/concorde/plane_02.jpg +0 -0
  201. package/docs/img/concorde/plane_03.jpg +0 -0
  202. package/docs/img/concorde/plane_04.jpg +0 -0
  203. package/docs/img/concorde/plane_05.jpg +0 -0
  204. package/docs/img/concorde/plane_06.jpg +0 -0
  205. package/docs/img/concorde/plane_07.jpg +0 -0
  206. package/docs/img/concorde/plane_08.jpg +0 -0
  207. package/docs/img/concorde/plane_09.jpg +0 -0
  208. package/docs/img/concorde/plane_10.jpg +0 -0
  209. package/docs/img/concorde/plane_11.jpg +0 -0
  210. package/docs/img/concorde/plane_12.jpg +0 -0
  211. package/docs/img/concorde/plane_13.jpg +0 -0
  212. package/docs/img/og-concorde.jpg +0 -0
  213. package/docs/index.html +184 -68
  214. package/docs/index.md +22 -0
  215. package/docs/llms-full.txt +5779 -0
  216. package/docs/llms.txt +108 -0
  217. package/docs/privacy.html +122 -0
  218. package/docs/privacy.md +32 -0
  219. package/docs/robots.txt +11 -10
  220. package/docs/sitemap.xml +243 -0
  221. package/docs/src/core/components/functional/date/date.md +150 -0
  222. package/docs/src/core/components/functional/fetch/fetch.md +108 -0
  223. package/docs/src/core/components/functional/if/if.md +34 -0
  224. package/docs/src/core/components/functional/jsonata/jsonata.md +61 -0
  225. package/docs/src/core/components/functional/list/list.md +125 -0
  226. package/docs/src/core/components/functional/mix/mix.md +46 -0
  227. package/docs/src/core/components/functional/queue/queue.md +51 -0
  228. package/docs/src/core/components/functional/router/router.md +93 -0
  229. package/docs/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
  230. package/docs/src/core/components/functional/sdui/component-catalog.json +3103 -0
  231. package/docs/src/core/components/functional/sdui/default-library.json +108 -0
  232. package/docs/src/core/components/functional/sdui/example.json +32 -0
  233. package/docs/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
  234. package/docs/src/core/components/functional/sdui/sdui.md +307 -0
  235. package/docs/src/core/components/functional/states/states.md +112 -0
  236. package/docs/src/core/components/functional/submit/submit.md +106 -0
  237. package/docs/src/core/components/functional/subscriber/subscriber.md +91 -0
  238. package/docs/src/core/components/functional/translation/translation.md +38 -0
  239. package/docs/src/core/components/functional/value/value.md +47 -0
  240. package/docs/src/core/components/ui/alert/alert.md +186 -0
  241. package/docs/src/core/components/ui/alert-messages/alert-messages.md +85 -0
  242. package/docs/src/core/components/ui/badge/badge.md +181 -0
  243. package/docs/src/core/components/ui/button/button.md +216 -0
  244. package/docs/src/core/components/ui/captcha/captcha.md +56 -0
  245. package/docs/src/core/components/ui/card/card.md +215 -0
  246. package/docs/src/core/components/ui/divider/divider.md +126 -0
  247. package/docs/src/core/components/ui/form/checkbox/checkbox.md +125 -0
  248. package/docs/src/core/components/ui/form/fieldset/fieldset.md +161 -0
  249. package/docs/src/core/components/ui/form/form-actions/form-actions.md +98 -0
  250. package/docs/src/core/components/ui/form/form-layout/form-layout.md +109 -0
  251. package/docs/src/core/components/ui/form/input/input.md +142 -0
  252. package/docs/src/core/components/ui/form/radio/radio.md +78 -0
  253. package/docs/src/core/components/ui/form/select/select.md +86 -0
  254. package/docs/src/core/components/ui/form/switch/switch.md +80 -0
  255. package/docs/src/core/components/ui/form/textarea/textarea.md +82 -0
  256. package/docs/src/core/components/ui/group/group.md +77 -0
  257. package/docs/src/core/components/ui/icon/icon.md +214 -0
  258. package/docs/src/core/components/ui/icon/icons.json +1 -0
  259. package/docs/src/core/components/ui/image/image.md +167 -0
  260. package/docs/src/core/components/ui/link/link.md +81 -0
  261. package/docs/src/core/components/ui/loader/loader.md +87 -0
  262. package/docs/src/core/components/ui/menu/menu.md +370 -0
  263. package/docs/src/core/components/ui/modal/modal.md +211 -0
  264. package/docs/src/core/components/ui/pop/pop.md +216 -0
  265. package/docs/src/core/components/ui/progress/progress.md +109 -0
  266. package/docs/src/core/components/ui/table/table.md +267 -0
  267. package/docs/src/core/components/ui/theme/theme.md +97 -0
  268. package/docs/src/core/components/ui/toast/toast.md +147 -0
  269. package/docs/src/core/components/ui/tooltip/tooltip.md +89 -0
  270. package/docs/src/docs/decorators/ancestor-attribute.md +59 -0
  271. package/docs/src/docs/decorators/auto-subscribe.md +40 -0
  272. package/docs/src/docs/decorators/bind.md +76 -0
  273. package/docs/src/docs/decorators/get.md +160 -0
  274. package/docs/src/docs/decorators/handle.md +119 -0
  275. package/docs/src/docs/decorators/on-assign.md +63 -0
  276. package/docs/src/docs/decorators/patch.md +44 -0
  277. package/docs/src/docs/decorators/post.md +134 -0
  278. package/docs/src/docs/decorators/publish.md +56 -0
  279. package/docs/src/docs/decorators/put.md +51 -0
  280. package/docs/src/docs/decorators/subscribe.md +87 -0
  281. package/docs/src/docs/decorators/wait-for-ancestors.md +76 -0
  282. package/docs/src/docs/directives/sub.md +75 -0
  283. package/docs/src/docs/directives/t.md +73 -0
  284. package/docs/src/docs/getting-started/ai-agents.md +50 -0
  285. package/docs/src/docs/getting-started/components.md +5 -0
  286. package/docs/src/docs/getting-started/create-a-component.md +136 -0
  287. package/docs/src/docs/getting-started/dataFlow.md +87 -0
  288. package/docs/src/docs/getting-started/installation.md +36 -0
  289. package/docs/src/docs/getting-started/my-first-component.md +227 -0
  290. package/docs/src/docs/getting-started/start.md +35 -0
  291. package/docs/src/docs/getting-started/theming.md +253 -0
  292. package/docs/src/docs/misc/api-configuration.md +79 -0
  293. package/docs/src/docs/misc/dataProviderKey.md +168 -0
  294. package/docs/src/docs/misc/docs-mock-api.md +62 -0
  295. package/docs/src/docs/misc/dynamic-path.md +71 -0
  296. package/docs/src/docs/misc/endpoint.md +45 -0
  297. package/docs/src/docs/misc/html-integration.md +14 -0
  298. package/docs/src/docs/search/docs-search.json +10332 -0
  299. package/docs/src/tag-list.json +1 -0
  300. package/docs/src/tsconfig-model.json +23 -0
  301. package/docs/src/tsconfig.json +1359 -0
  302. package/index.html +157 -5
  303. package/package.json +8 -4
  304. package/public/docs-mock-api-sw.js +58 -223
  305. package/public/docs-mock-api-sw.js.map +4 -4
  306. package/public/img/concorde/plane_01.jpg +0 -0
  307. package/public/img/concorde/plane_02.jpg +0 -0
  308. package/public/img/concorde/plane_03.jpg +0 -0
  309. package/public/img/concorde/plane_04.jpg +0 -0
  310. package/public/img/concorde/plane_05.jpg +0 -0
  311. package/public/img/concorde/plane_06.jpg +0 -0
  312. package/public/img/concorde/plane_07.jpg +0 -0
  313. package/public/img/concorde/plane_08.jpg +0 -0
  314. package/public/img/concorde/plane_09.jpg +0 -0
  315. package/public/img/concorde/plane_10.jpg +0 -0
  316. package/public/img/concorde/plane_11.jpg +0 -0
  317. package/public/img/concorde/plane_12.jpg +0 -0
  318. package/public/img/concorde/plane_13.jpg +0 -0
  319. package/public/img/og-concorde.jpg +0 -0
  320. package/public/robots.txt +11 -10
  321. package/scripts/ai-init.mjs +104 -379
  322. package/scripts/ai-init.test.mjs +81 -239
  323. package/scripts/docs-markdown-vite-plugin.ts +43 -0
  324. package/scripts/docs-public-url.mjs +56 -0
  325. package/scripts/docs.htaccess +82 -0
  326. package/scripts/generate-cem.mjs +244 -0
  327. package/scripts/generate-cem.test.mjs +122 -0
  328. package/scripts/generate-crawl-docs.mjs +233 -118
  329. package/scripts/generate-crawl-docs.test.mjs +124 -0
  330. package/scripts/generate-sdui-catalog.mjs +11 -10
  331. package/scripts/post-build-docs.js +37 -50
  332. package/scripts/pre-publish.mjs +2 -1
  333. package/scripts/site-pages.mjs +212 -0
  334. package/scripts/site-pages.test.mjs +116 -0
  335. package/site-pages/about.md +22 -0
  336. package/site-pages/privacy.md +32 -0
  337. package/src/core/components/functional/date/date.md +91 -231
  338. package/src/core/components/functional/fetch/fetch.md +66 -83
  339. package/src/core/components/functional/if/if.md +28 -3
  340. package/src/core/components/functional/jsonata/jsonata.md +42 -37
  341. package/src/core/components/functional/list/list.md +103 -43
  342. package/src/core/components/functional/mix/mix.md +31 -26
  343. package/src/core/components/functional/queue/queue.demo.ts +10 -7
  344. package/src/core/components/functional/queue/queue.md +40 -61
  345. package/src/core/components/functional/router/router.demo.ts +16 -16
  346. package/src/core/components/functional/router/router.md +64 -65
  347. package/src/core/components/functional/sdui/component-catalog.gaps.json +1 -1
  348. package/src/core/components/functional/sdui/component-catalog.json +1 -1
  349. package/src/core/components/functional/sdui/example.json +19 -86
  350. package/src/core/components/functional/sdui/sdui-extension-points.md +1 -1
  351. package/src/core/components/functional/sdui/sdui.md +187 -358
  352. package/src/core/components/functional/states/states.demo.ts +21 -22
  353. package/src/core/components/functional/states/states.md +86 -61
  354. package/src/core/components/functional/states/states.ts +1 -1
  355. package/src/core/components/functional/submit/submit.md +64 -72
  356. package/src/core/components/functional/translation/translation.md +38 -0
  357. package/src/core/components/functional/value/value.md +34 -22
  358. package/src/core/components/ui/alert/alert.md +48 -58
  359. package/src/core/components/ui/badge/badge.md +27 -34
  360. package/src/core/components/ui/button/button.md +139 -106
  361. package/src/core/components/ui/captcha/captcha.md +17 -32
  362. package/src/core/components/ui/card/card.md +6 -6
  363. package/src/core/components/ui/divider/divider.md +8 -11
  364. package/src/core/components/ui/form/checkbox/checkbox.md +90 -42
  365. package/src/core/components/ui/form/fieldset/fieldset.md +31 -75
  366. package/src/core/components/ui/form/form-actions/form-actions.md +14 -16
  367. package/src/core/components/ui/form/form-layout/form-layout.md +19 -29
  368. package/src/core/components/ui/form/input/input.md +95 -95
  369. package/src/core/components/ui/form/radio/radio.md +55 -34
  370. package/src/core/components/ui/form/select/select.md +60 -45
  371. package/src/core/components/ui/form/switch/switch.md +57 -34
  372. package/src/core/components/ui/form/textarea/textarea.md +55 -38
  373. package/src/core/components/ui/group/group.md +35 -33
  374. package/src/core/components/ui/icon/icon.md +4 -4
  375. package/src/core/components/ui/image/image.md +41 -107
  376. package/src/core/components/ui/link/link.md +6 -6
  377. package/src/core/components/ui/loader/loader.md +30 -55
  378. package/src/core/components/ui/menu/menu.md +27 -27
  379. package/src/core/components/ui/modal/modal.md +72 -96
  380. package/src/core/components/ui/pop/pop.md +80 -158
  381. package/src/core/components/ui/progress/progress.md +2 -2
  382. package/src/core/components/ui/table/table.md +91 -255
  383. package/src/core/components/ui/theme/theme.md +11 -36
  384. package/src/core/components/ui/toast/toast.md +48 -117
  385. package/src/core/components/ui/tooltip/tooltip.md +27 -62
  386. package/src/core/decorators/subscriber/bind.ts +9 -14
  387. package/src/core/utils/LocationHandler.spec.ts +80 -0
  388. package/src/core/utils/LocationHandler.ts +5 -9
  389. package/src/docs/components/docs-demo-sources.ts +55 -140
  390. package/src/docs/components/docs-lit-demo.ts +1 -3
  391. package/src/docs/components/docs-source-link.ts +0 -82
  392. package/src/docs/decorators/ancestor-attribute.md +59 -0
  393. package/src/docs/decorators/auto-subscribe.md +40 -0
  394. package/src/docs/decorators/bind.md +76 -0
  395. package/src/docs/decorators/get.md +160 -0
  396. package/src/docs/decorators/handle.md +119 -0
  397. package/src/docs/decorators/on-assign.md +63 -0
  398. package/src/docs/decorators/patch.md +44 -0
  399. package/src/docs/decorators/post.md +134 -0
  400. package/src/docs/decorators/publish.md +56 -0
  401. package/src/docs/decorators/put.md +51 -0
  402. package/src/docs/decorators/subscribe.md +87 -0
  403. package/src/docs/decorators/wait-for-ancestors.md +76 -0
  404. package/src/docs/directives/sub.md +75 -0
  405. package/src/docs/directives/t.md +73 -0
  406. package/src/docs/docs-location.spec.ts +56 -0
  407. package/src/docs/docs-location.ts +133 -32
  408. package/src/docs/docs.ts +1 -2
  409. package/src/docs/example/decorators-demo-bind-demos.ts +83 -135
  410. package/src/docs/example/decorators-demo-geo.ts +30 -19
  411. package/src/docs/example/decorators-demo-post.ts +88 -186
  412. package/src/docs/example/decorators-demo-subscribe-publish-get-demos.ts +165 -268
  413. package/src/docs/example/decorators-demo.ts +85 -98
  414. package/src/docs/example/docs-api-config-demos.ts +19 -20
  415. package/src/docs/example/docs-flight-demos.ts +147 -0
  416. package/src/docs/example/docs-jsonata-demos.ts +52 -52
  417. package/src/docs/example/docs-list-demos.ts +43 -123
  418. package/src/docs/example/docs-provider-keys.ts +21 -28
  419. package/src/docs/example/docs-queue-demos.ts +37 -77
  420. package/src/docs/example/docs-router-demos.ts +20 -25
  421. package/src/docs/example/docs-submit-demos.ts +48 -48
  422. package/src/docs/example/docs-toggle-demos.ts +4 -3
  423. package/src/docs/getting-started/ai-agents.md +50 -0
  424. package/src/docs/getting-started/components.md +5 -0
  425. package/src/docs/getting-started/create-a-component.md +136 -0
  426. package/src/docs/getting-started/dataFlow.md +87 -0
  427. package/src/docs/getting-started/installation.md +36 -0
  428. package/src/docs/getting-started/my-first-component.md +227 -0
  429. package/src/docs/getting-started/start.md +35 -0
  430. package/src/docs/getting-started/theming.md +253 -0
  431. package/src/docs/header/header.ts +11 -6
  432. package/src/docs/home/catalog.ts +1 -1
  433. package/src/docs/home/home.ts +20 -11
  434. package/src/docs/layout.ts +12 -13
  435. package/src/docs/misc/api-configuration.md +79 -0
  436. package/src/docs/misc/dataProviderKey.md +168 -0
  437. package/src/docs/misc/docs-mock-api.md +62 -0
  438. package/src/docs/misc/dynamic-path.md +71 -0
  439. package/src/docs/misc/endpoint.md +45 -0
  440. package/src/docs/misc/html-integration.md +14 -0
  441. package/src/docs/mock-api/api-config-mock.ts +5 -0
  442. package/src/docs/mock-api/fixtures.ts +0 -278
  443. package/src/docs/mock-api/flights.ts +89 -0
  444. package/src/docs/mock-api/router.ts +3 -4
  445. package/src/docs/mock-api/urls.ts +1 -2
  446. package/src/docs/navigation/navigation.ts +82 -103
  447. package/src/docs/navigation/toc.ts +7 -4
  448. package/src/docs/search/docs-search.json +2804 -5024
  449. package/src/docs/search/markdown-renderer.ts +31 -8
  450. package/src/docs/search/page.ts +9 -6
  451. package/src/docs/search/search.ts +154 -122
  452. package/src/docs/tailwind/css/docs/content.css +4 -5
  453. package/src/tsconfig.json +11 -5
  454. package/src/tsconfig.tsbuildinfo +1 -1
  455. package/vite.config.mts +11 -2
  456. package/.agents/skills/concorde-component-docs/SKILL.md +0 -194
  457. package/ai/AGENTS.md +0 -56
  458. package/ai/cursor/rules/concorde-menu.mdc +0 -15
  459. package/ai/cursor/rules/concorde-scope.mdc +0 -14
  460. package/ai/cursor/rules/concorde-theme.mdc +0 -13
  461. package/ai/cursor/rules/concorde.mdc +0 -66
  462. package/ai/jetbrains/rules/concorde.md +0 -53
  463. package/ai/skills/concorde-get-set-dp/SKILL.md +0 -194
  464. package/ai/skills/concorde-imports/SKILL.md +0 -78
  465. package/ai/skills/concorde-menu/SKILL.md +0 -74
  466. package/ai/skills/concorde-scope/SKILL.md +0 -70
  467. package/ai/skills/concorde-theme/SKILL.md +0 -57
  468. package/docs/assets/index-CD4WyL6o.css +0 -1
  469. package/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
  470. package/src/docs/_core-concept/overview.md +0 -57
  471. package/src/docs/_core-concept/subscriber.md +0 -75
  472. package/src/docs/_decorators/ancestor-attribute.md +0 -128
  473. package/src/docs/_decorators/auto-subscribe.md +0 -202
  474. package/src/docs/_decorators/bind.md +0 -167
  475. package/src/docs/_decorators/get.md +0 -162
  476. package/src/docs/_decorators/handle.md +0 -175
  477. package/src/docs/_decorators/on-assign.md +0 -390
  478. package/src/docs/_decorators/patch.md +0 -70
  479. package/src/docs/_decorators/post.md +0 -146
  480. package/src/docs/_decorators/publish.md +0 -55
  481. package/src/docs/_decorators/put.md +0 -70
  482. package/src/docs/_decorators/subscribe.md +0 -100
  483. package/src/docs/_decorators/wait-for-ancestors.md +0 -163
  484. package/src/docs/_directives/sub.md +0 -91
  485. package/src/docs/_getting-started/ai-agents.md +0 -76
  486. package/src/docs/_getting-started/concorde-manual-install.md +0 -133
  487. package/src/docs/_getting-started/concorde-outside.md +0 -33
  488. package/src/docs/_getting-started/my-first-subscriber.md +0 -120
  489. package/src/docs/_getting-started/pubsub.md +0 -37
  490. package/src/docs/_misc/formelement-subscriber-removal.md +0 -115
  491. package/src/docs/example/docs-input-autocomplete-demos.ts +0 -110
  492. package/src/docs/example/docs-joke-demos.ts +0 -297
  493. /package/{src/docs/_getting-started → docs/docs/getting-started}/components.md +0 -0
  494. /package/{src/docs/_getting-started → docs/docs/getting-started}/theming.md +0 -0
package/docs/core/components/ui/loader/loader.html ADDED
@@ -0,0 +1,114 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/loader" 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 by Supersoniks</title>
7
+ <meta name="description" content="sonic-loader shows a loading animation, either in the content flow or as a viewport overlay. With no mode, it is fixed (centered overlay); use mode=&quot;inline&quot; inside content areas. For Fetch and List, s">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/loader/loader, loader, Loader, UI component, sonic-loader, web component, mode, fixed, mode=&quot;inline&quot;, inline, align, left">
9
+ <meta name="concorde-doc-id" content="core/components/ui/loader/loader">
10
+ <link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/loader">
11
+ <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/loader.md">
12
+ </head>
13
+ <body>
14
+ <header>
15
+ <p><a href="/docs/index.html">Concorde documentation</a> · <a href="https://concorde.supersoniks.org/core/components/ui/loader">same URL (interactive)</a> · <a href="/llms.txt">llms.txt</a></p>
16
+ </header>
17
+ <main>
18
+ <article>
19
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Loader</strong>. sonic-loader shows a loading animation, either in the content flow or as a viewport overlay. With no mode, it is fixed (centered overlay); use mode=&quot;inline&quot; inside content areas. For Fetch and List, s <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, mode=&quot;inline&quot;, inline, align, left. URL: <a href="https://concorde.supersoniks.org/core/components/ui/loader">https://concorde.supersoniks.org/core/components/ui/loader</a>.</span></p>
20
+ <h1 id="loader">Loader</h1>
21
+ <p><strong><code>sonic-loader</code></strong> shows a loading animation, either in the content flow or as a viewport overlay. With no <code>mode</code>, it is <code>fixed</code> (centered overlay); use <code>mode=&quot;inline&quot;</code> inside content areas. For <a href="/core/components/functional/fetch">Fetch</a> and <a href="/core/components/functional/list">List</a>, set their <code>loader</code> attribute instead of adding the tag yourself.</p>
22
+ <h2 id="mode">Mode</h2>
23
+ <p><code>inline</code> renders an ellipsis animation in the document flow. <code>fixed</code> (default) covers the viewport with a centered animation; toggle it with the checkbox below.</p>
24
+ <pre><code>&lt;sonic-loader mode=&quot;inline&quot;&gt;&lt;/sonic-loader&gt;
25
+ </code></pre>
26
+ <p><docs-lit-demo for="docs-toggle-loader-demo"></docs-lit-demo></p>
27
+ <h2 id="alignment-and-color">Alignment and color</h2>
28
+ <p><code>align</code> only affects <code>mode=&quot;inline&quot;</code>: <code>left</code> · <code>center</code> (default) · <code>right</code>. Dots use <code>--sc-primary</code>; set <code>currentColor</code> to follow the host <code>color</code>.</p>
29
+ <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
30
+ &lt;sonic-loader mode=&quot;inline&quot; currentColor style=&quot;color: purple;&quot;&gt;&lt;/sonic-loader&gt;
31
+ &lt;sonic-loader mode=&quot;inline&quot; align=&quot;left&quot;&gt;&lt;/sonic-loader&gt;
32
+ &lt;sonic-loader mode=&quot;inline&quot; align=&quot;center&quot;&gt;&lt;/sonic-loader&gt;
33
+ &lt;sonic-loader mode=&quot;inline&quot; align=&quot;right&quot;&gt;&lt;/sonic-loader&gt;
34
+ &lt;/div&gt;
35
+ </code></pre>
36
+ <h2 id="delay">Delay</h2>
37
+ <p>A <code>fixed</code> loader waits 0.5 s before fading in, so short requests show nothing. <code>inline</code> loaders appear at once. Set <code>noDelay</code> (or pass <code>noDelay: true</code> to <code>Loader.show()</code>) to show a <code>fixed</code> loader immediately.</p>
38
+ <pre><code>&lt;sonic-loader mode=&quot;inline&quot; noDelay&gt;&lt;/sonic-loader&gt;
39
+ </code></pre>
40
+ <h2 id="accessibility">Accessibility</h2>
41
+ <p>The animation is <code>aria-hidden</code> by default so screen readers are not flooded on every request. Set <code>announce</code> when the loader appears after a user action: the host gets <code>role=&quot;status&quot;</code>, <code>aria-live=&quot;polite&quot;</code> and a localized &quot;Loading&quot; label. For a busy button, use the <code>loading</code> attribute of <code>sonic-button</code> instead.</p>
42
+ <pre><code>&lt;div class=&quot;flex flex-wrap items-center gap-4&quot;&gt;
43
+ &lt;sonic-loader mode=&quot;inline&quot; announce&gt;&lt;/sonic-loader&gt;
44
+ &lt;sonic-button loading&gt;Confirm check-in&lt;/sonic-button&gt;
45
+ &lt;/div&gt;
46
+ </code></pre>
47
+ <h2 id="show-and-hide-programmatically">Show and hide programmatically</h2>
48
+ <p><code>Loader.show()</code> mounts one shared instance; <code>Loader.hide()</code> is reference-counted, so call it once per <code>show()</code>. <strong>Without <code>container</code>, the loader goes to the theme pop container and <code>mode</code> is forced to <code>fixed</code>.</strong></p>
49
+ <pre><code class="language-javascript">import { Loader } from &quot;@supersoniks/concorde/ui/loader&quot;;
50
+
51
+ Loader.show({ announce: true });
52
+ // …
53
+ Loader.hide();
54
+
55
+ // Inline loader inside a given element
56
+ Loader.show({ mode: &quot;inline&quot;, container: document.querySelector(&quot;#results&quot;) });
57
+ </code></pre>
58
+ <h2 id="api-reference">API reference</h2>
59
+ <table>
60
+ <thead>
61
+ <tr>
62
+ <th>Attribute</th>
63
+ <th>Values</th>
64
+ <th>Description</th>
65
+ </tr>
66
+ </thead>
67
+ <tbody><tr>
68
+ <td><code>mode</code></td>
69
+ <td><code>inline</code> · <code>fixed</code> (default <code>fixed</code>)</td>
70
+ <td>In-flow ellipsis or viewport-centered overlay</td>
71
+ </tr>
72
+ <tr>
73
+ <td><code>noDelay</code></td>
74
+ <td>boolean</td>
75
+ <td>Skips the 0.5 s fade-in delay of <code>fixed</code></td>
76
+ </tr>
77
+ <tr>
78
+ <td><code>announce</code></td>
79
+ <td>boolean</td>
80
+ <td>Adds <code>role=&quot;status&quot;</code>, <code>aria-live=&quot;polite&quot;</code> and a localized label</td>
81
+ </tr>
82
+ <tr>
83
+ <td><code>align</code></td>
84
+ <td><code>left</code> · <code>center</code> · <code>right</code> (default <code>center</code>)</td>
85
+ <td>Horizontal alignment, <code>mode=&quot;inline&quot;</code> only</td>
86
+ </tr>
87
+ <tr>
88
+ <td><code>currentColor</code></td>
89
+ <td>boolean</td>
90
+ <td>Dots use <code>currentColor</code> instead of <code>--sc-primary</code></td>
91
+ </tr>
92
+ </tbody></table>
93
+ <p>No slots.</p>
94
+ <table>
95
+ <thead>
96
+ <tr>
97
+ <th>Static method</th>
98
+ <th>Description</th>
99
+ </tr>
100
+ </thead>
101
+ <tbody><tr>
102
+ <td><code>Loader.show(conf?)</code></td>
103
+ <td>Mounts the shared instance. <code>conf</code>: <code>mode</code> · <code>noDelay</code> · <code>announce</code> · <code>container</code></td>
104
+ </tr>
105
+ <tr>
106
+ <td><code>Loader.hide()</code></td>
107
+ <td>Decrements the show counter; removes the instance when it reaches zero</td>
108
+ </tr>
109
+ </tbody></table>
110
+
111
+ </article>
112
+ </main>
113
+ </body>
114
+ </html>
package/docs/core/components/ui/loader/loader.md ADDED
@@ -0,0 +1,87 @@
1
+ # Loader
2
+
3
+ **`sonic-loader`** shows a loading animation, either in the content flow or as a viewport overlay. With no `mode`, it is `fixed` (centered overlay); use `mode="inline"` inside content areas. For [Fetch](/core/components/functional/fetch) and [List](/core/components/functional/list), set their `loader` attribute instead of adding the tag yourself.
4
+
5
+ ## Mode
6
+
7
+ `inline` renders an ellipsis animation in the document flow. `fixed` (default) covers the viewport with a centered animation; toggle it with the checkbox below.
8
+
9
+ <sonic-code>
10
+ <template>
11
+ <sonic-loader mode="inline"></sonic-loader>
12
+ </template>
13
+ </sonic-code>
14
+
15
+ <docs-lit-demo for="docs-toggle-loader-demo"></docs-lit-demo>
16
+
17
+ ## Alignment and color
18
+
19
+ `align` only affects `mode="inline"`: `left` · `center` (default) · `right`. Dots use `--sc-primary`; set `currentColor` to follow the host `color`.
20
+
21
+ <sonic-code>
22
+ <template>
23
+ <div class="grid gap-4">
24
+ <sonic-loader mode="inline" currentColor style="color: purple;"></sonic-loader>
25
+ <sonic-loader mode="inline" align="left"></sonic-loader>
26
+ <sonic-loader mode="inline" align="center"></sonic-loader>
27
+ <sonic-loader mode="inline" align="right"></sonic-loader>
28
+ </div>
29
+ </template>
30
+ </sonic-code>
31
+
32
+ ## Delay
33
+
34
+ A `fixed` loader waits 0.5 s before fading in, so short requests show nothing. `inline` loaders appear at once. Set `noDelay` (or pass `noDelay: true` to `Loader.show()`) to show a `fixed` loader immediately.
35
+
36
+ <sonic-code>
37
+ <template>
38
+ <sonic-loader mode="inline" noDelay></sonic-loader>
39
+ </template>
40
+ </sonic-code>
41
+
42
+ ## Accessibility
43
+
44
+ The animation is `aria-hidden` by default so screen readers are not flooded on every request. Set `announce` when the loader appears after a user action: the host gets `role="status"`, `aria-live="polite"` and a localized "Loading" label. For a busy button, use the `loading` attribute of `sonic-button` instead.
45
+
46
+ <sonic-code>
47
+ <template>
48
+ <div class="flex flex-wrap items-center gap-4">
49
+ <sonic-loader mode="inline" announce></sonic-loader>
50
+ <sonic-button loading>Confirm check-in</sonic-button>
51
+ </div>
52
+ </template>
53
+ </sonic-code>
54
+
55
+ ## Show and hide programmatically
56
+
57
+ `Loader.show()` mounts one shared instance; `Loader.hide()` is reference-counted, so call it once per `show()`. **Without `container`, the loader goes to the theme pop container and `mode` is forced to `fixed`.**
58
+
59
+ <sonic-code language="javascript">
60
+ <template>
61
+ import { Loader } from "@supersoniks/concorde/ui/loader";
62
+
63
+ Loader.show({ announce: true });
64
+ // …
65
+ Loader.hide();
66
+
67
+ // Inline loader inside a given element
68
+ Loader.show({ mode: "inline", container: document.querySelector("#results") });
69
+ </template>
70
+ </sonic-code>
71
+
72
+ ## API reference
73
+
74
+ | Attribute | Values | Description |
75
+ |----------|---------|-------------|
76
+ | `mode` | `inline` · `fixed` (default `fixed`) | In-flow ellipsis or viewport-centered overlay |
77
+ | `noDelay` | boolean | Skips the 0.5 s fade-in delay of `fixed` |
78
+ | `announce` | boolean | Adds `role="status"`, `aria-live="polite"` and a localized label |
79
+ | `align` | `left` · `center` · `right` (default `center`) | Horizontal alignment, `mode="inline"` only |
80
+ | `currentColor` | boolean | Dots use `currentColor` instead of `--sc-primary` |
81
+
82
+ No slots.
83
+
84
+ | Static method | Description |
85
+ |--------|-------------|
86
+ | `Loader.show(conf?)` | Mounts the shared instance. `conf`: `mode` · `noDelay` · `announce` · `container` |
87
+ | `Loader.hide()` | Decrements the show counter; removes the instance when it reaches zero |
package/docs/core/components/ui/menu/menu.html ADDED
@@ -0,0 +1,395 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/menu" 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 by Supersoniks</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/core/components/ui/menu">
11
+ <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/menu.md">
12
+ </head>
13
+ <body>
14
+ <header>
15
+ <p><a href="/docs/index.html">Concorde documentation</a> · <a href="https://concorde.supersoniks.org/core/components/ui/menu">same URL (interactive)</a> · <a href="/llms.txt">llms.txt</a></p>
16
+ </header>
17
+ <main>
18
+ <article>
19
+ <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/core/components/ui/menu">https://concorde.supersoniks.org/core/components/ui/menu</a>.</span></p>
20
+ <h1 id="menu">Menu</h1>
21
+ <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 <code>href</code> / <code>pushstate</code> / <code>autoActive</code> on each <code>sonic-menu-item</code> (same API as <code>sonic-button</code>), not on the menu host.</p>
22
+ <h2 id="basic-example">Basic example</h2>
23
+ <pre><code>&lt;sonic-menu direction=&quot;row&quot;&gt;
24
+ &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
25
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
26
+ Home
27
+ &lt;/sonic-menu-item&gt;
28
+ &lt;sonic-menu-item&gt;
29
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
30
+ Profile
31
+ &lt;/sonic-menu-item&gt;
32
+ &lt;sonic-menu-item type=&quot;danger&quot;&gt;
33
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;log-out&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
34
+ Log out
35
+ &lt;/sonic-menu-item&gt;
36
+ &lt;/sonic-menu&gt;
37
+ </code></pre>
38
+ <h2 id="direction">Direction</h2>
39
+ <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>
40
+ <pre><code>&lt;sonic-menu direction=&quot;row&quot;&gt;
41
+ &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
42
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;arrow-right&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
43
+ Row
44
+ &lt;/sonic-menu-item&gt;
45
+ &lt;sonic-menu-item&gt;
46
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
47
+ Profile
48
+ &lt;/sonic-menu-item&gt;
49
+ &lt;sonic-menu-item&gt;
50
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
51
+ Flights
52
+ &lt;/sonic-menu-item&gt;
53
+ &lt;sonic-menu-item&gt;
54
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
55
+ Baggage
56
+ &lt;/sonic-menu-item&gt;
57
+ &lt;sonic-menu-item type=&quot;danger&quot;&gt;
58
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;log-out&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
59
+ Log out
60
+ &lt;/sonic-menu-item&gt;
61
+ &lt;/sonic-menu&gt;
62
+ &lt;sonic-menu direction=&quot;column&quot;&gt;
63
+ &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
64
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;arrow-down&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
65
+ Column
66
+ &lt;/sonic-menu-item&gt;
67
+ &lt;sonic-menu-item&gt;
68
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
69
+ Profile
70
+ &lt;/sonic-menu-item&gt;
71
+ &lt;sonic-menu-item&gt;
72
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
73
+ Flights
74
+ &lt;/sonic-menu-item&gt;
75
+ &lt;sonic-menu-item&gt;
76
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
77
+ Baggage
78
+ &lt;/sonic-menu-item&gt;
79
+ &lt;sonic-menu-item type=&quot;danger&quot;&gt;
80
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;log-out&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
81
+ Log out
82
+ &lt;/sonic-menu-item&gt;
83
+ &lt;/sonic-menu&gt;
84
+ </code></pre>
85
+ <h2 id="size">Size</h2>
86
+ <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>
87
+ <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
88
+ &lt;sonic-menu size=&quot;xs&quot; direction=&quot;row&quot;&gt;
89
+ &lt;sonic-menu-item&gt;XS&lt;/sonic-menu-item&gt;
90
+ &lt;sonic-menu-item&gt;
91
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
92
+ Profile
93
+ &lt;/sonic-menu-item&gt;
94
+ &lt;sonic-menu-item&gt;
95
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
96
+ Flights
97
+ &lt;/sonic-menu-item&gt;
98
+ &lt;sonic-menu-item&gt;
99
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
100
+ Baggage
101
+ &lt;/sonic-menu-item&gt;
102
+ &lt;/sonic-menu&gt;
103
+ &lt;sonic-menu size=&quot;sm&quot; direction=&quot;row&quot;&gt;
104
+ &lt;sonic-menu-item&gt;Small&lt;/sonic-menu-item&gt;
105
+ &lt;sonic-menu-item&gt;
106
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
107
+ Profile
108
+ &lt;/sonic-menu-item&gt;
109
+ &lt;sonic-menu-item&gt;
110
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
111
+ Flights
112
+ &lt;/sonic-menu-item&gt;
113
+ &lt;sonic-menu-item&gt;
114
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
115
+ Baggage
116
+ &lt;/sonic-menu-item&gt;
117
+ &lt;/sonic-menu&gt;
118
+ &lt;sonic-menu direction=&quot;row&quot;&gt;
119
+ &lt;sonic-menu-item&gt;Medium&lt;/sonic-menu-item&gt;
120
+ &lt;sonic-menu-item&gt;
121
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
122
+ Profile
123
+ &lt;/sonic-menu-item&gt;
124
+ &lt;sonic-menu-item&gt;
125
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
126
+ Flights
127
+ &lt;/sonic-menu-item&gt;
128
+ &lt;sonic-menu-item&gt;
129
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
130
+ Baggage
131
+ &lt;/sonic-menu-item&gt;
132
+ &lt;/sonic-menu&gt;
133
+ &lt;sonic-menu size=&quot;lg&quot; direction=&quot;row&quot;&gt;
134
+ &lt;sonic-menu-item&gt;Large&lt;/sonic-menu-item&gt;
135
+ &lt;sonic-menu-item&gt;
136
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
137
+ Profile
138
+ &lt;/sonic-menu-item&gt;
139
+ &lt;sonic-menu-item&gt;
140
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
141
+ Flights
142
+ &lt;/sonic-menu-item&gt;
143
+ &lt;sonic-menu-item&gt;
144
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
145
+ Baggage
146
+ &lt;/sonic-menu-item&gt;
147
+ &lt;/sonic-menu&gt;
148
+ &lt;sonic-menu size=&quot;xl&quot; direction=&quot;row&quot;&gt;
149
+ &lt;sonic-menu-item&gt;XL&lt;/sonic-menu-item&gt;
150
+ &lt;sonic-menu-item&gt;
151
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
152
+ Profile
153
+ &lt;/sonic-menu-item&gt;
154
+ &lt;sonic-menu-item&gt;
155
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
156
+ Flights
157
+ &lt;/sonic-menu-item&gt;
158
+ &lt;sonic-menu-item&gt;
159
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
160
+ Baggage
161
+ &lt;/sonic-menu-item&gt;
162
+ &lt;/sonic-menu&gt;
163
+ &lt;/div&gt;
164
+ </code></pre>
165
+ <h2 id="shadow">Shadow</h2>
166
+ <p>Optional <strong><code>shadow</code></strong> wraps the menu surface (no shadow when omitted).</p>
167
+ <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
168
+ &lt;sonic-menu direction=&quot;row&quot;&gt;
169
+ &lt;sonic-menu-item&gt;None&lt;/sonic-menu-item&gt;
170
+ &lt;/sonic-menu&gt;
171
+ &lt;sonic-menu shadow=&quot;sm&quot; direction=&quot;row&quot;&gt;
172
+ &lt;sonic-menu-item&gt;Small&lt;/sonic-menu-item&gt;
173
+ &lt;/sonic-menu&gt;
174
+ &lt;sonic-menu shadow=&quot;md&quot; direction=&quot;row&quot;&gt;
175
+ &lt;sonic-menu-item&gt;Medium&lt;/sonic-menu-item&gt;
176
+ &lt;/sonic-menu&gt;
177
+ &lt;sonic-menu shadow=&quot;lg&quot; direction=&quot;row&quot;&gt;
178
+ &lt;sonic-menu-item&gt;Large&lt;/sonic-menu-item&gt;
179
+ &lt;/sonic-menu&gt;
180
+ &lt;/div&gt;
181
+ </code></pre>
182
+ <h2 id="align">Align</h2>
183
+ <p><strong><code>align</code></strong> propagates to items except square / circle <strong><code>shape</code></strong>.</p>
184
+ <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
185
+ &lt;sonic-menu align=&quot;center&quot;&gt;
186
+ &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
187
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
188
+ Home
189
+ &lt;/sonic-menu-item&gt;
190
+ &lt;sonic-menu-item&gt;
191
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
192
+ Profile
193
+ &lt;/sonic-menu-item&gt;
194
+ &lt;/sonic-menu&gt;
195
+ &lt;sonic-menu align=&quot;left&quot;&gt;
196
+ &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
197
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
198
+ Home
199
+ &lt;/sonic-menu-item&gt;
200
+ &lt;sonic-menu-item&gt;
201
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
202
+ Profile
203
+ &lt;/sonic-menu-item&gt;
204
+ &lt;/sonic-menu&gt;
205
+ &lt;sonic-menu align=&quot;right&quot;&gt;
206
+ &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
207
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
208
+ Home
209
+ &lt;/sonic-menu-item&gt;
210
+ &lt;sonic-menu-item&gt;
211
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
212
+ Profile
213
+ &lt;/sonic-menu-item&gt;
214
+ &lt;/sonic-menu&gt;
215
+ &lt;/div&gt;
216
+ </code></pre>
217
+ <h2 id="more">More</h2>
218
+ <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>
219
+ <pre><code>&lt;sonic-menu direction=&quot;row&quot;&gt;
220
+ &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
221
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
222
+ Home
223
+ &lt;/sonic-menu-item&gt;
224
+ &lt;sonic-menu-item&gt;
225
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
226
+ Profile
227
+ &lt;/sonic-menu-item&gt;
228
+ &lt;sonic-menu-item&gt;
229
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
230
+ Flights
231
+ &lt;/sonic-menu-item&gt;
232
+ &lt;sonic-menu-item&gt;
233
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
234
+ Baggage
235
+ &lt;/sonic-menu-item&gt;
236
+ &lt;sonic-menu slot=&quot;more&quot;&gt;
237
+ &lt;sonic-menu-item&gt;
238
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;settings&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
239
+ Settings
240
+ &lt;/sonic-menu-item&gt;
241
+ &lt;sonic-menu-item&gt;
242
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
243
+ Messages
244
+ &lt;/sonic-menu-item&gt;
245
+ &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
246
+ &lt;sonic-menu-item type=&quot;danger&quot;&gt;
247
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;log-out&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
248
+ Log out
249
+ &lt;/sonic-menu-item&gt;
250
+ &lt;/sonic-menu&gt;
251
+ &lt;/sonic-menu&gt;
252
+ </code></pre>
253
+ <h2 id="scrollable">Scrollable</h2>
254
+ <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>
255
+ <pre><code>&lt;sonic-menu direction=&quot;row&quot; scrollable&gt;
256
+ &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
257
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
258
+ Home
259
+ &lt;/sonic-menu-item&gt;
260
+ &lt;sonic-menu-item&gt;
261
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
262
+ Profile
263
+ &lt;/sonic-menu-item&gt;
264
+ &lt;sonic-menu-item&gt;
265
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
266
+ Flights
267
+ &lt;/sonic-menu-item&gt;
268
+ &lt;sonic-menu-item&gt;
269
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
270
+ Baggage
271
+ &lt;/sonic-menu-item&gt;
272
+ &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
273
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
274
+ Home
275
+ &lt;/sonic-menu-item&gt;
276
+ &lt;sonic-menu-item&gt;
277
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
278
+ Profile
279
+ &lt;/sonic-menu-item&gt;
280
+ &lt;sonic-menu-item&gt;
281
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
282
+ Flights
283
+ &lt;/sonic-menu-item&gt;
284
+ &lt;sonic-menu-item&gt;
285
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
286
+ Baggage
287
+ &lt;/sonic-menu-item&gt;
288
+ &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
289
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
290
+ Home
291
+ &lt;/sonic-menu-item&gt;
292
+ &lt;sonic-menu-item&gt;
293
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
294
+ Profile
295
+ &lt;/sonic-menu-item&gt;
296
+ &lt;sonic-menu-item&gt;
297
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
298
+ Flights
299
+ &lt;/sonic-menu-item&gt;
300
+ &lt;sonic-menu-item&gt;
301
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
302
+ Baggage
303
+ &lt;/sonic-menu-item&gt;
304
+ &lt;sonic-menu-item&gt;
305
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;settings&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
306
+ Settings
307
+ &lt;/sonic-menu-item&gt;
308
+ &lt;sonic-menu-item&gt;
309
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
310
+ Messages
311
+ &lt;/sonic-menu-item&gt;
312
+ &lt;sonic-menu slot=&quot;more&quot;&gt;
313
+ &lt;sonic-menu-item&gt;
314
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;settings&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
315
+ Settings
316
+ &lt;/sonic-menu-item&gt;
317
+ &lt;sonic-menu-item&gt;
318
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
319
+ Messages
320
+ &lt;/sonic-menu-item&gt;
321
+ &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
322
+ &lt;sonic-menu-item type=&quot;danger&quot;&gt;
323
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;log-out&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
324
+ Log out
325
+ &lt;/sonic-menu-item&gt;
326
+ &lt;/sonic-menu&gt;
327
+ &lt;/sonic-menu&gt;
328
+ </code></pre>
329
+ <h2 id="api-reference">API reference</h2>
330
+ <table>
331
+ <thead>
332
+ <tr>
333
+ <th>Attribute</th>
334
+ <th>Values</th>
335
+ <th>Description</th>
336
+ </tr>
337
+ </thead>
338
+ <tbody><tr>
339
+ <td><code>direction</code></td>
340
+ <td><code>column</code> (default) · <code>row</code></td>
341
+ <td>Vertical list or horizontal bar</td>
342
+ </tr>
343
+ <tr>
344
+ <td><code>align</code></td>
345
+ <td><code>left</code> (default) · <code>center</code> · <code>right</code></td>
346
+ <td>Alignment propagated to items (except square / circle <strong><code>shape</code></strong>)</td>
347
+ </tr>
348
+ <tr>
349
+ <td><code>size</code></td>
350
+ <td><code>2xs</code> … <code>2xl</code> (default: items keep their own size)</td>
351
+ <td>Propagated to items and the <strong><code>more</code></strong> trigger when unset on the item</td>
352
+ </tr>
353
+ <tr>
354
+ <td><code>shadow</code></td>
355
+ <td><code>none</code> · <code>sm</code> · <code>md</code> · <code>lg</code></td>
356
+ <td>Shadow around the menu; none when omitted</td>
357
+ </tr>
358
+ <tr>
359
+ <td><code>minWidth</code></td>
360
+ <td>CSS length</td>
361
+ <td>Minimum width of the container (default <code>0</code>)</td>
362
+ </tr>
363
+ <tr>
364
+ <td><code>scrollable</code></td>
365
+ <td>boolean</td>
366
+ <td>Scroll with edge fade; auto-scroll when a single item is <strong><code>active</code></strong></td>
367
+ </tr>
368
+ <tr>
369
+ <td><code>moreShape</code></td>
370
+ <td><code>circle</code> (default) · <code>square</code></td>
371
+ <td>Shape of the <strong><code>more</code></strong> slot trigger button</td>
372
+ </tr>
373
+ </tbody></table>
374
+ <table>
375
+ <thead>
376
+ <tr>
377
+ <th>Slot</th>
378
+ <th>Description</th>
379
+ </tr>
380
+ </thead>
381
+ <tbody><tr>
382
+ <td><em>(default)</em></td>
383
+ <td>Visible items: <code>sonic-menu-item</code> · <code>sonic-divider</code> · nested <code>sonic-menu</code></td>
384
+ </tr>
385
+ <tr>
386
+ <td><code>more</code></td>
387
+ <td>Popover content for the “…” control; shown only when the slot has assigned nodes</td>
388
+ </tr>
389
+ </tbody></table>
390
+ <p><strong><code>sonic-menu-item</code></strong> extends <strong><code>sonic-button</code></strong> (defaults <code>variant=&quot;ghost&quot;</code> and <code>shape=&quot;block&quot;</code>). See <a href="/core/components/ui/button">Button</a> for <code>type</code> · <code>variant</code> · <code>href</code> · <code>pushstate</code> · <code>autoActive</code> and the item slots.</p>
391
+
392
+ </article>
393
+ </main>
394
+ </body>
395
+ </html>