@supersoniks/concorde 5.0.4 → 5.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (208) hide show
  1. package/.agents/skills/concorde-component-docs/SKILL.md +194 -0
  2. package/.agents/skills/concorde-component-docs/template.md +45 -0
  3. package/ai/cursor/rules/concorde-theme.mdc +1 -1
  4. package/ai/cursor/rules/concorde.mdc +1 -1
  5. package/ai/skills/concorde/SKILL.md +1 -1
  6. package/ai/skills/concorde-theme/SKILL.md +21 -10
  7. package/build-infos.json +1 -1
  8. package/concorde-core.bundle.js +528 -534
  9. package/concorde-core.es.js +4257 -4212
  10. package/dist/concorde-core.bundle.js +528 -534
  11. package/dist/concorde-core.es.js +4257 -4212
  12. package/dist/docs-mock-api-sw.js +2 -0
  13. package/dist/docs-mock-api-sw.js.map +2 -2
  14. package/docs/assets/index-CD4WyL6o.css +1 -0
  15. package/docs/assets/{index-D8MVWqY6.js → index-wVZpLVYW.js} +1221 -1350
  16. package/docs/crawl/core/components/ui/alert/alert.html +172 -71
  17. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +113 -5
  18. package/docs/crawl/core/components/ui/badge/badge.html +157 -79
  19. package/docs/crawl/core/components/ui/button/button.html +1 -0
  20. package/docs/crawl/core/components/ui/captcha/captcha.html +90 -8
  21. package/docs/crawl/core/components/ui/card/card.html +222 -68
  22. package/docs/crawl/core/components/ui/divider/divider.html +117 -31
  23. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +232 -101
  24. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +95 -52
  25. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +97 -38
  26. package/docs/crawl/core/components/ui/form/input/input.html +3 -3
  27. package/docs/crawl/core/components/ui/form/textarea/textarea.html +3 -3
  28. package/docs/crawl/core/components/ui/group/group.html +60 -38
  29. package/docs/crawl/core/components/ui/icon/icon.html +136 -47
  30. package/docs/crawl/core/components/ui/image/image.html +244 -56
  31. package/docs/crawl/core/components/ui/link/link.html +67 -9
  32. package/docs/crawl/core/components/ui/loader/loader.html +97 -23
  33. package/docs/crawl/core/components/ui/menu/menu.html +162 -90
  34. package/docs/crawl/core/components/ui/modal/modal.html +275 -50
  35. package/docs/crawl/core/components/ui/pop/pop.html +260 -66
  36. package/docs/crawl/core/components/ui/progress/progress.html +103 -30
  37. package/docs/crawl/core/components/ui/table/table.html +303 -171
  38. package/docs/crawl/core/components/ui/theme/theme.html +131 -0
  39. package/docs/crawl/core/components/ui/toast/toast.html +170 -59
  40. package/docs/crawl/core/components/ui/tooltip/tooltip.html +90 -29
  41. package/docs/crawl/docs/_decorators/ancestor-attribute.html +3 -2
  42. package/docs/crawl/docs/_getting-started/concorde-outside.html +3 -3
  43. package/docs/crawl/docs/_getting-started/start.html +1 -1
  44. package/docs/crawl/docs/_getting-started/theming.html +311 -63
  45. package/docs/crawl/hubs/form-components.html +75 -53
  46. package/docs/crawl/index.html +7 -6
  47. package/docs/docs-mock-api-sw.js +2 -0
  48. package/docs/docs-mock-api-sw.js.map +2 -2
  49. package/docs/index.html +9 -7
  50. package/docs/llms-full.txt +1703 -456
  51. package/docs/llms.txt +25 -32
  52. package/docs/sitemap.xml +3 -0
  53. package/docs/src/core/components/functional/fetch/fetch.md +0 -0
  54. package/docs/src/core/components/functional/if/if.md +0 -0
  55. package/docs/src/core/components/functional/list/list.md +0 -0
  56. package/docs/src/core/components/functional/router/router.md +0 -0
  57. package/docs/src/core/components/functional/sdui/sdui.md +0 -0
  58. package/docs/src/core/components/functional/states/states.md +0 -0
  59. package/docs/src/core/components/functional/submit/submit.md +0 -0
  60. package/docs/src/core/components/ui/alert/alert.md +147 -72
  61. package/docs/src/core/components/ui/alert-messages/alert-messages.md +85 -0
  62. package/docs/src/core/components/ui/badge/badge.md +141 -80
  63. package/docs/src/core/components/ui/button/button.md +1 -0
  64. package/docs/src/core/components/ui/captcha/captcha.md +65 -6
  65. package/docs/src/core/components/ui/card/card.md +183 -65
  66. package/docs/src/core/components/ui/divider/divider.md +107 -13
  67. package/docs/src/core/components/ui/form/fieldset/fieldset.md +175 -99
  68. package/docs/src/core/components/ui/form/form-actions/form-actions.md +75 -52
  69. package/docs/src/core/components/ui/form/form-layout/form-layout.md +109 -34
  70. package/docs/src/core/components/ui/form/input/input.md +1 -1
  71. package/docs/src/core/components/ui/form/radio/radio.md +0 -0
  72. package/docs/src/core/components/ui/form/select/select.md +0 -0
  73. package/docs/src/core/components/ui/form/switch/switch.md +0 -0
  74. package/docs/src/core/components/ui/form/textarea/textarea.md +1 -1
  75. package/docs/src/core/components/ui/group/group.md +36 -36
  76. package/docs/src/core/components/ui/icon/icon.md +132 -43
  77. package/docs/src/core/components/ui/image/image.md +179 -53
  78. package/docs/src/core/components/ui/link/link.md +45 -7
  79. package/docs/src/core/components/ui/loader/loader.md +79 -22
  80. package/docs/src/core/components/ui/menu/menu.md +133 -92
  81. package/docs/src/core/components/ui/modal/modal.md +163 -47
  82. package/docs/src/core/components/ui/pop/pop.md +262 -64
  83. package/docs/src/core/components/ui/progress/progress.md +76 -30
  84. package/docs/src/core/components/ui/table/table.md +147 -171
  85. package/docs/src/core/components/ui/theme/theme.md +122 -0
  86. package/docs/src/core/components/ui/toast/toast.md +108 -58
  87. package/docs/src/core/components/ui/tooltip/tooltip.md +68 -26
  88. package/docs/src/docs/_core-concept/subscriber.md +0 -0
  89. package/docs/src/docs/_decorators/ancestor-attribute.md +3 -2
  90. package/docs/src/docs/_getting-started/concorde-outside.md +3 -3
  91. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -0
  92. package/docs/src/docs/_getting-started/pubsub.md +0 -0
  93. package/docs/src/docs/_getting-started/start.md +1 -1
  94. package/docs/src/docs/_getting-started/theming.md +223 -61
  95. package/docs/src/docs/search/docs-search.json +3083 -348
  96. package/docs/src/tsconfig.json +63 -3
  97. package/gitlab/job_tests.sh +0 -0
  98. package/index.html +4 -2
  99. package/package.json +7 -1
  100. package/public/docs-mock-api-sw.js +2 -0
  101. package/public/docs-mock-api-sw.js.map +2 -2
  102. package/scripts/post-build-docs.js +0 -0
  103. package/scripts/post-build.mjs +0 -0
  104. package/src/core/components/functional/fetch/fetch.md +0 -0
  105. package/src/core/components/functional/if/if.md +0 -0
  106. package/src/core/components/functional/list/list.demo.ts +0 -0
  107. package/src/core/components/functional/list/list.md +0 -0
  108. package/src/core/components/functional/router/router.md +0 -0
  109. package/src/core/components/functional/router/router.ts +0 -0
  110. package/src/core/components/functional/sdui/sdui.md +0 -0
  111. package/src/core/components/functional/states/states.md +0 -0
  112. package/src/core/components/functional/submit/submit.md +0 -0
  113. package/src/core/components/functional/subscriber/subscriber.ts +0 -0
  114. package/src/core/components/ui/_css/align.ts +1 -0
  115. package/src/core/components/ui/_css/size.ts +0 -0
  116. package/src/core/components/ui/_css/type.ts +86 -8
  117. package/src/core/components/ui/_i18n/ui-aria-labels.ts +8 -0
  118. package/src/core/components/ui/alert/alert.md +21 -2
  119. package/src/core/components/ui/alert-messages/alert-messages.md +85 -0
  120. package/src/core/components/ui/badge/badge.md +19 -6
  121. package/src/core/components/ui/badge/badge.ts +8 -9
  122. package/src/core/components/ui/button/button.ts +5 -15
  123. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  124. package/src/core/components/ui/captcha/captcha.md +65 -6
  125. package/src/core/components/ui/card/card.md +73 -10
  126. package/src/core/components/ui/card/card.ts +24 -22
  127. package/src/core/components/ui/divider/divider.md +107 -13
  128. package/src/core/components/ui/divider/divider.ts +40 -33
  129. package/src/core/components/ui/form/fieldset/fieldset.md +175 -99
  130. package/src/core/components/ui/form/fieldset/fieldset.ts +15 -28
  131. package/src/core/components/ui/form/fieldset/legend.ts +13 -13
  132. package/src/core/components/ui/form/form-actions/form-actions.md +75 -52
  133. package/src/core/components/ui/form/form-actions/form-actions.ts +7 -5
  134. package/src/core/components/ui/form/form-layout/form-layout.md +109 -34
  135. package/src/core/components/ui/form/form-layout/form-layout.ts +27 -24
  136. package/src/core/components/ui/form/radio/radio.md +0 -0
  137. package/src/core/components/ui/form/select/select.md +0 -0
  138. package/src/core/components/ui/form/switch/switch.md +0 -0
  139. package/src/core/components/ui/form/textarea/textarea.ts +4 -3
  140. package/src/core/components/ui/group/group.md +36 -36
  141. package/src/core/components/ui/group/group.ts +5 -10
  142. package/src/core/components/ui/icon/icon.md +132 -43
  143. package/src/core/components/ui/image/image.md +35 -3
  144. package/src/core/components/ui/link/link.md +43 -5
  145. package/src/core/components/ui/loader/loader.md +79 -22
  146. package/src/core/components/ui/loader/loader.ts +67 -27
  147. package/src/core/components/ui/loader/styles/fixed.ts +6 -11
  148. package/src/core/components/ui/menu/menu.md +133 -92
  149. package/src/core/components/ui/menu/menu.ts +53 -58
  150. package/src/core/components/ui/modal/modal.md +163 -47
  151. package/src/core/components/ui/modal/modal.ts +2 -4
  152. package/src/core/components/ui/pop/pop.md +217 -123
  153. package/src/core/components/ui/pop/pop.ts +0 -1
  154. package/src/core/components/ui/progress/progress.md +76 -30
  155. package/src/core/components/ui/progress/progress.ts +25 -56
  156. package/src/core/components/ui/table/table-caption.ts +2 -2
  157. package/src/core/components/ui/table/table-tbody.ts +3 -3
  158. package/src/core/components/ui/table/table-td.ts +23 -18
  159. package/src/core/components/ui/table/table-th.ts +8 -8
  160. package/src/core/components/ui/table/table-tr.ts +4 -4
  161. package/src/core/components/ui/table/table.md +147 -171
  162. package/src/core/components/ui/table/table.ts +20 -19
  163. package/src/core/components/ui/theme/theme-collection/auto.ts +15 -0
  164. package/src/core/components/ui/theme/theme-collection/core-variables.ts +8 -31
  165. package/src/core/components/ui/theme/theme-collection/dark.ts +1 -7
  166. package/src/core/components/ui/theme/theme-collection/light.ts +30 -26
  167. package/src/core/components/ui/theme/theme.md +122 -0
  168. package/src/core/components/ui/theme/theme.ts +30 -7
  169. package/src/core/components/ui/toast/toast-item.ts +6 -9
  170. package/src/core/components/ui/toast/toast.md +108 -58
  171. package/src/core/components/ui/toast/types.ts +1 -1
  172. package/src/core/components/ui/tooltip/tooltip.md +68 -26
  173. package/src/core/mixins/Subscriber.ts +0 -0
  174. package/src/core/utils/DataBindObserver.ts +0 -0
  175. package/src/core/utils/Objects.ts +0 -0
  176. package/src/core/utils/route.ts +0 -0
  177. package/src/docs/_core-concept/subscriber.md +0 -0
  178. package/src/docs/_getting-started/my-first-subscriber.md +0 -0
  179. package/src/docs/_getting-started/pubsub.md +0 -0
  180. package/src/docs/_getting-started/start.md +1 -1
  181. package/src/docs/_getting-started/theming.md +223 -61
  182. package/src/docs/code.ts +125 -58
  183. package/src/docs/example/users.ts +0 -0
  184. package/src/docs/header/header.ts +62 -54
  185. package/src/docs/mock-api/router.ts +2 -0
  186. package/src/docs/navigation/navigation.ts +6 -3
  187. package/src/docs/search/docs-search.json +2504 -399
  188. package/src/docs/search/markdown-renderer.ts +6 -6
  189. package/src/docs/search/page.ts +0 -0
  190. package/src/docs/search/search.ts +4 -4
  191. package/src/docs/tailwind/css/tailwind.css +6 -5
  192. package/src/tsconfig.json +18 -0
  193. package/src/tsconfig.tsbuildinfo +1 -1
  194. package/tailwind.config.js +19 -0
  195. package/.github/workflows/ci.yml +0 -21
  196. package/.github-export-ignore +0 -30
  197. package/CONTRIBUTING.md +0 -59
  198. package/DEV.md +0 -54
  199. package/LICENSE +0 -21
  200. package/OPEN_SOURCE_CHECKPOINT.md +0 -133
  201. package/docs/assets/index-DiD0qYvE.css +0 -1
  202. package/docs/src/tsconfig.declarations.json +0 -22
  203. package/docs/src/tsconfig.emit.json +0 -23
  204. package/gitlab/job_github_mirror.sh +0 -39
  205. package/scripts/github-export.mjs +0 -150
  206. package/src/css.d.ts +0 -19
  207. package/src/tsconfig.declarations.json +0 -22
  208. package/src/tsconfig.emit.json +0 -23
package/docs/crawl/core/components/ui/menu/menu.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Menu — Concorde</title>
7
- <meta name="description" content="Row">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/menu/menu, menu, Menu, UI component, sonic-menu, web component">
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
9
  <meta name="concorde-doc-id" content="core/components/ui/menu/menu">
10
10
  <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/menu/menu.html">
11
11
  </head>
@@ -15,10 +15,28 @@
15
15
  </header>
16
16
  <main>
17
17
  <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Menu</strong>. Row <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. 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>
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
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>
20
37
  <h2 id="direction">Direction</h2>
21
- <pre><code>&lt;sonic-menu direction=&quot;row&quot; &gt;
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;
22
40
  &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
23
41
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;arrow-right&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
24
42
  Row
@@ -27,11 +45,11 @@
27
45
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
28
46
  Profile
29
47
  &lt;/sonic-menu-item&gt;
30
- &lt;sonic-menu-item &gt;
48
+ &lt;sonic-menu-item&gt;
31
49
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
32
50
  History
33
51
  &lt;/sonic-menu-item&gt;
34
- &lt;sonic-menu-item &gt;
52
+ &lt;sonic-menu-item&gt;
35
53
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
36
54
  Orders
37
55
  &lt;/sonic-menu-item&gt;
@@ -40,7 +58,7 @@
40
58
  Log out
41
59
  &lt;/sonic-menu-item&gt;
42
60
  &lt;/sonic-menu&gt;
43
- &lt;sonic-menu direction =&quot;column&quot; &gt;
61
+ &lt;sonic-menu direction=&quot;column&quot;&gt;
44
62
  &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
45
63
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;arrow-down&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
46
64
  Column
@@ -49,11 +67,11 @@
49
67
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
50
68
  Profile
51
69
  &lt;/sonic-menu-item&gt;
52
- &lt;sonic-menu-item &gt;
70
+ &lt;sonic-menu-item&gt;
53
71
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
54
72
  History
55
73
  &lt;/sonic-menu-item&gt;
56
- &lt;sonic-menu-item &gt;
74
+ &lt;sonic-menu-item&gt;
57
75
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
58
76
  Orders
59
77
  &lt;/sonic-menu-item&gt;
@@ -64,88 +82,79 @@
64
82
  &lt;/sonic-menu&gt;
65
83
  </code></pre>
66
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>
67
86
  <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
68
87
  &lt;sonic-menu size=&quot;xs&quot; direction=&quot;row&quot;&gt;
69
- &lt;sonic-menu-item&gt;
70
- XS
71
- &lt;/sonic-menu-item&gt;
88
+ &lt;sonic-menu-item&gt;XS&lt;/sonic-menu-item&gt;
72
89
  &lt;sonic-menu-item&gt;
73
90
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
74
91
  Profile
75
92
  &lt;/sonic-menu-item&gt;
76
- &lt;sonic-menu-item &gt;
93
+ &lt;sonic-menu-item&gt;
77
94
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
78
95
  History
79
96
  &lt;/sonic-menu-item&gt;
80
- &lt;sonic-menu-item &gt;
97
+ &lt;sonic-menu-item&gt;
81
98
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
82
99
  Orders
83
100
  &lt;/sonic-menu-item&gt;
84
101
  &lt;/sonic-menu&gt;
85
102
  &lt;sonic-menu size=&quot;sm&quot; direction=&quot;row&quot;&gt;
86
- &lt;sonic-menu-item&gt;
87
- Small
88
- &lt;/sonic-menu-item&gt;
103
+ &lt;sonic-menu-item&gt;Small&lt;/sonic-menu-item&gt;
89
104
  &lt;sonic-menu-item&gt;
90
105
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
91
106
  Profile
92
107
  &lt;/sonic-menu-item&gt;
93
- &lt;sonic-menu-item &gt;
108
+ &lt;sonic-menu-item&gt;
94
109
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
95
110
  History
96
111
  &lt;/sonic-menu-item&gt;
97
- &lt;sonic-menu-item &gt;
112
+ &lt;sonic-menu-item&gt;
98
113
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
99
114
  Orders
100
115
  &lt;/sonic-menu-item&gt;
101
116
  &lt;/sonic-menu&gt;
102
117
  &lt;sonic-menu direction=&quot;row&quot;&gt;
103
- &lt;sonic-menu-item&gt;
104
- Medium
105
- &lt;/sonic-menu-item&gt;
118
+ &lt;sonic-menu-item&gt;Medium&lt;/sonic-menu-item&gt;
106
119
  &lt;sonic-menu-item&gt;
107
120
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
108
121
  Profile
109
122
  &lt;/sonic-menu-item&gt;
110
- &lt;sonic-menu-item &gt;
123
+ &lt;sonic-menu-item&gt;
111
124
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
112
125
  History
113
126
  &lt;/sonic-menu-item&gt;
114
- &lt;sonic-menu-item &gt;
127
+ &lt;sonic-menu-item&gt;
115
128
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
116
129
  Orders
117
130
  &lt;/sonic-menu-item&gt;
118
131
  &lt;/sonic-menu&gt;
119
132
  &lt;sonic-menu size=&quot;lg&quot; direction=&quot;row&quot;&gt;
120
- &lt;sonic-menu-item&gt;
121
- Large
122
- &lt;/sonic-menu-item&gt;
133
+ &lt;sonic-menu-item&gt;Large&lt;/sonic-menu-item&gt;
123
134
  &lt;sonic-menu-item&gt;
124
135
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
125
136
  Profile
126
137
  &lt;/sonic-menu-item&gt;
127
- &lt;sonic-menu-item &gt;
138
+ &lt;sonic-menu-item&gt;
128
139
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
129
140
  History
130
141
  &lt;/sonic-menu-item&gt;
131
- &lt;sonic-menu-item &gt;
142
+ &lt;sonic-menu-item&gt;
132
143
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
133
144
  Orders
134
145
  &lt;/sonic-menu-item&gt;
135
146
  &lt;/sonic-menu&gt;
136
147
  &lt;sonic-menu size=&quot;xl&quot; direction=&quot;row&quot;&gt;
137
- &lt;sonic-menu-item&gt;
138
- XL
139
- &lt;/sonic-menu-item&gt;
148
+ &lt;sonic-menu-item&gt;XL&lt;/sonic-menu-item&gt;
140
149
  &lt;sonic-menu-item&gt;
141
150
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
142
151
  Profile
143
152
  &lt;/sonic-menu-item&gt;
144
- &lt;sonic-menu-item &gt;
153
+ &lt;sonic-menu-item&gt;
145
154
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
146
155
  History
147
156
  &lt;/sonic-menu-item&gt;
148
- &lt;sonic-menu-item &gt;
157
+ &lt;sonic-menu-item&gt;
149
158
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
150
159
  Orders
151
160
  &lt;/sonic-menu-item&gt;
@@ -153,62 +162,59 @@
153
162
  &lt;/div&gt;
154
163
  </code></pre>
155
164
  <h2 id="shadow">Shadow</h2>
165
+ <p>Optional <strong><code>shadow</code></strong> wraps the menu surface (no shadow when omitted).</p>
156
166
  <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
157
167
  &lt;sonic-menu direction=&quot;row&quot;&gt;
158
- &lt;sonic-menu-item&gt;
159
- None
160
- &lt;/sonic-menu-item&gt;
168
+ &lt;sonic-menu-item&gt;None&lt;/sonic-menu-item&gt;
161
169
  &lt;/sonic-menu&gt;
162
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;
163
189
  &lt;sonic-menu-item&gt;
164
- Small
190
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
191
+ Profile
165
192
  &lt;/sonic-menu-item&gt;
166
193
  &lt;/sonic-menu&gt;
167
- &lt;sonic-menu shadow=&quot;md&quot; direction=&quot;row&quot;&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;
168
199
  &lt;sonic-menu-item&gt;
169
- Medium
200
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
201
+ Profile
170
202
  &lt;/sonic-menu-item&gt;
171
203
  &lt;/sonic-menu&gt;
172
- &lt;sonic-menu shadow=&quot;lg&quot; direction=&quot;row&quot;&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;
173
209
  &lt;sonic-menu-item&gt;
174
- Large
210
+ &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
211
+ Profile
175
212
  &lt;/sonic-menu-item&gt;
176
213
  &lt;/sonic-menu&gt;
177
214
  &lt;/div&gt;
178
215
  </code></pre>
179
- <h2 id="align">Align</h2>
180
- <pre><code>&lt;sonic-menu align=&quot;center&quot;&gt;
181
- &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
182
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
183
- Home
184
- &lt;/sonic-menu-item&gt;
185
- &lt;sonic-menu-item&gt;
186
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
187
- Profile
188
- &lt;/sonic-menu-item&gt;
189
- &lt;/sonic-menu&gt;
190
- &lt;sonic-menu align=&quot;left&quot;&gt;
191
- &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
192
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
193
- Home
194
- &lt;/sonic-menu-item&gt;
195
- &lt;sonic-menu-item&gt;
196
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
197
- Profile
198
- &lt;/sonic-menu-item&gt;
199
- &lt;/sonic-menu&gt;
200
- &lt;sonic-menu align=&quot;right&quot;&gt;
201
- &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
202
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
203
- Home
204
- &lt;/sonic-menu-item&gt;
205
- &lt;sonic-menu-item&gt;
206
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
207
- Profile
208
- &lt;/sonic-menu-item&gt;
209
- &lt;/sonic-menu&gt;
210
- </code></pre>
211
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>
212
218
  <pre><code>&lt;sonic-menu direction=&quot;row&quot;&gt;
213
219
  &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
214
220
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
@@ -218,20 +224,20 @@
218
224
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
219
225
  Profile
220
226
  &lt;/sonic-menu-item&gt;
221
- &lt;sonic-menu-item &gt;
227
+ &lt;sonic-menu-item&gt;
222
228
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
223
229
  History
224
230
  &lt;/sonic-menu-item&gt;
225
- &lt;sonic-menu-item &gt;
231
+ &lt;sonic-menu-item&gt;
226
232
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
227
233
  Orders
228
234
  &lt;/sonic-menu-item&gt;
229
235
  &lt;sonic-menu slot=&quot;more&quot;&gt;
230
- &lt;sonic-menu-item &gt;
236
+ &lt;sonic-menu-item&gt;
231
237
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;settings&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
232
238
  Settings
233
239
  &lt;/sonic-menu-item&gt;
234
- &lt;sonic-menu-item &gt;
240
+ &lt;sonic-menu-item&gt;
235
241
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
236
242
  Messages
237
243
  &lt;/sonic-menu-item&gt;
@@ -244,6 +250,7 @@
244
250
  &lt;/sonic-menu&gt;
245
251
  </code></pre>
246
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>
247
254
  <pre><code>&lt;sonic-menu direction=&quot;row&quot; scrollable&gt;
248
255
  &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
249
256
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
@@ -253,14 +260,15 @@
253
260
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
254
261
  Profile
255
262
  &lt;/sonic-menu-item&gt;
256
- &lt;sonic-menu-item &gt;
263
+ &lt;sonic-menu-item&gt;
257
264
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
258
265
  History
259
266
  &lt;/sonic-menu-item&gt;
260
- &lt;sonic-menu-item &gt;
267
+ &lt;sonic-menu-item&gt;
261
268
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
262
269
  Orders
263
- &lt;/sonic-menu-item&gt; &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
270
+ &lt;/sonic-menu-item&gt;
271
+ &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
264
272
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
265
273
  Home
266
274
  &lt;/sonic-menu-item&gt;
@@ -268,14 +276,15 @@
268
276
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
269
277
  Profile
270
278
  &lt;/sonic-menu-item&gt;
271
- &lt;sonic-menu-item &gt;
279
+ &lt;sonic-menu-item&gt;
272
280
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
273
281
  History
274
282
  &lt;/sonic-menu-item&gt;
275
- &lt;sonic-menu-item &gt;
283
+ &lt;sonic-menu-item&gt;
276
284
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
277
285
  Orders
278
- &lt;/sonic-menu-item&gt; &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
286
+ &lt;/sonic-menu-item&gt;
287
+ &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
279
288
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
280
289
  Home
281
290
  &lt;/sonic-menu-item&gt;
@@ -283,28 +292,28 @@
283
292
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
284
293
  Profile
285
294
  &lt;/sonic-menu-item&gt;
286
- &lt;sonic-menu-item &gt;
295
+ &lt;sonic-menu-item&gt;
287
296
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
288
297
  History
289
298
  &lt;/sonic-menu-item&gt;
290
- &lt;sonic-menu-item &gt;
299
+ &lt;sonic-menu-item&gt;
291
300
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
292
301
  Orders
293
302
  &lt;/sonic-menu-item&gt;
294
- &lt;sonic-menu-item &gt;
303
+ &lt;sonic-menu-item&gt;
295
304
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;settings&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
296
305
  Settings
297
306
  &lt;/sonic-menu-item&gt;
298
- &lt;sonic-menu-item &gt;
307
+ &lt;sonic-menu-item&gt;
299
308
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
300
309
  Messages
301
310
  &lt;/sonic-menu-item&gt;
302
311
  &lt;sonic-menu slot=&quot;more&quot;&gt;
303
- &lt;sonic-menu-item &gt;
312
+ &lt;sonic-menu-item&gt;
304
313
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;settings&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
305
314
  Settings
306
315
  &lt;/sonic-menu-item&gt;
307
- &lt;sonic-menu-item &gt;
316
+ &lt;sonic-menu-item&gt;
308
317
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
309
318
  Messages
310
319
  &lt;/sonic-menu-item&gt;
@@ -314,7 +323,70 @@
314
323
  Log out
315
324
  &lt;/sonic-menu-item&gt;
316
325
  &lt;/sonic-menu&gt;
326
+ &lt;/sonic-menu&gt;
317
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>
318
390
 
319
391
  </article>
320
392
  </main>