@supersoniks/concorde 5.0.5 → 5.1.0

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 (168) hide show
  1. package/.github/workflows/ci.yml +21 -0
  2. package/.github-export-ignore +30 -0
  3. package/.tmp-cem/custom-elements.json +13705 -0
  4. package/CONTRIBUTING.md +59 -0
  5. package/DEV.md +54 -0
  6. package/LICENSE +21 -0
  7. package/OPEN_SOURCE_CHECKPOINT.md +133 -0
  8. package/build-infos.json +1 -1
  9. package/concorde-3d.bundle.js +3960 -0
  10. package/concorde-3d.es.js +33433 -0
  11. package/concorde-core.bundle.js +196 -196
  12. package/concorde-core.es.js +3685 -3405
  13. package/concorde-hugging-face-infer.bundle.js +32 -0
  14. package/concorde-hugging-face-infer.es.js +2952 -0
  15. package/concorde-interactive.bundle.js +1157 -0
  16. package/concorde-interactive.es.js +10734 -0
  17. package/concorde-shader.bundle.js +116 -0
  18. package/concorde-shader.es.js +8353 -0
  19. package/concorde-webgpu.bundle.js +307 -0
  20. package/concorde-webgpu.es.js +8627 -0
  21. package/custom-elements-manifest.config.mjs +14 -0
  22. package/dist/concorde-core.bundle.js +196 -196
  23. package/dist/concorde-core.es.js +3685 -3405
  24. package/docs/assets/{index-wVZpLVYW.js → index-D8MVWqY6.js} +1351 -1222
  25. package/docs/assets/index-DiD0qYvE.css +1 -0
  26. package/docs/crawl/core/components/ui/alert/alert.html +71 -172
  27. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +5 -113
  28. package/docs/crawl/core/components/ui/badge/badge.html +79 -157
  29. package/docs/crawl/core/components/ui/button/button.html +0 -1
  30. package/docs/crawl/core/components/ui/captcha/captcha.html +8 -90
  31. package/docs/crawl/core/components/ui/card/card.html +68 -222
  32. package/docs/crawl/core/components/ui/divider/divider.html +31 -117
  33. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +101 -232
  34. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +52 -95
  35. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +38 -97
  36. package/docs/crawl/core/components/ui/form/input/input.html +3 -3
  37. package/docs/crawl/core/components/ui/form/textarea/textarea.html +3 -3
  38. package/docs/crawl/core/components/ui/group/group.html +38 -60
  39. package/docs/crawl/core/components/ui/icon/icon.html +47 -136
  40. package/docs/crawl/core/components/ui/image/image.html +56 -244
  41. package/docs/crawl/core/components/ui/link/link.html +9 -67
  42. package/docs/crawl/core/components/ui/loader/loader.html +23 -97
  43. package/docs/crawl/core/components/ui/menu/menu.html +90 -162
  44. package/docs/crawl/core/components/ui/modal/modal.html +50 -275
  45. package/docs/crawl/core/components/ui/pop/pop.html +66 -260
  46. package/docs/crawl/core/components/ui/progress/progress.html +30 -103
  47. package/docs/crawl/core/components/ui/table/table.html +171 -303
  48. package/docs/crawl/core/components/ui/toast/toast.html +59 -170
  49. package/docs/crawl/core/components/ui/tooltip/tooltip.html +29 -90
  50. package/docs/crawl/docs/_decorators/ancestor-attribute.html +2 -3
  51. package/docs/crawl/docs/_getting-started/concorde-outside.html +3 -3
  52. package/docs/crawl/docs/_getting-started/start.html +1 -1
  53. package/docs/crawl/docs/_getting-started/theming.html +63 -311
  54. package/docs/crawl/hubs/form-components.html +53 -75
  55. package/docs/crawl/index.html +6 -7
  56. package/docs/docs-mock-api-sw.js +0 -2
  57. package/docs/docs-mock-api-sw.js.map +2 -2
  58. package/docs/index.html +7 -9
  59. package/docs/llms-full.txt +456 -1703
  60. package/docs/llms.txt +32 -25
  61. package/docs/sitemap.xml +0 -3
  62. package/docs/src/core/components/functional/fetch/fetch.md +0 -0
  63. package/docs/src/core/components/functional/if/if.md +0 -0
  64. package/docs/src/core/components/functional/list/list.md +0 -0
  65. package/docs/src/core/components/functional/router/router.md +0 -0
  66. package/docs/src/core/components/functional/sdui/sdui.md +0 -0
  67. package/docs/src/core/components/functional/states/states.md +0 -0
  68. package/docs/src/core/components/functional/submit/submit.md +0 -0
  69. package/docs/src/core/components/ui/alert/alert.md +72 -147
  70. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -85
  71. package/docs/src/core/components/ui/badge/badge.md +80 -141
  72. package/docs/src/core/components/ui/button/button.md +0 -1
  73. package/docs/src/core/components/ui/captcha/captcha.md +6 -65
  74. package/docs/src/core/components/ui/card/card.md +65 -183
  75. package/docs/src/core/components/ui/divider/divider.md +13 -107
  76. package/docs/src/core/components/ui/form/fieldset/fieldset.md +99 -175
  77. package/docs/src/core/components/ui/form/form-actions/form-actions.md +52 -75
  78. package/docs/src/core/components/ui/form/form-layout/form-layout.md +34 -109
  79. package/docs/src/core/components/ui/form/input/input.md +1 -1
  80. package/docs/src/core/components/ui/form/radio/radio.md +0 -0
  81. package/docs/src/core/components/ui/form/select/select.md +0 -0
  82. package/docs/src/core/components/ui/form/switch/switch.md +0 -0
  83. package/docs/src/core/components/ui/form/textarea/textarea.md +1 -1
  84. package/docs/src/core/components/ui/group/group.md +36 -36
  85. package/docs/src/core/components/ui/icon/icon.md +43 -132
  86. package/docs/src/core/components/ui/image/image.md +53 -179
  87. package/docs/src/core/components/ui/link/link.md +7 -45
  88. package/docs/src/core/components/ui/loader/loader.md +22 -79
  89. package/docs/src/core/components/ui/menu/menu.md +92 -133
  90. package/docs/src/core/components/ui/modal/modal.md +47 -163
  91. package/docs/src/core/components/ui/pop/pop.md +64 -262
  92. package/docs/src/core/components/ui/progress/progress.md +30 -76
  93. package/docs/src/core/components/ui/table/table.md +171 -147
  94. package/docs/src/core/components/ui/toast/toast.md +58 -108
  95. package/docs/src/core/components/ui/tooltip/tooltip.md +26 -68
  96. package/docs/src/docs/_core-concept/subscriber.md +0 -0
  97. package/docs/src/docs/_decorators/ancestor-attribute.md +2 -3
  98. package/docs/src/docs/_getting-started/concorde-outside.md +3 -3
  99. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -0
  100. package/docs/src/docs/_getting-started/pubsub.md +0 -0
  101. package/docs/src/docs/_getting-started/start.md +1 -1
  102. package/docs/src/docs/_getting-started/theming.md +61 -223
  103. package/docs/src/docs/search/docs-search.json +348 -3083
  104. package/docs/src/tsconfig.declarations.json +22 -0
  105. package/docs/src/tsconfig.emit.json +23 -0
  106. package/docs/src/tsconfig.json +3 -63
  107. package/gitlab/job_github_mirror.sh +39 -0
  108. package/package.json +36 -2
  109. package/scripts/generate-sdui-catalog.mjs +250 -0
  110. package/scripts/generate-sdui-catalog.spec.ts +91 -0
  111. package/scripts/github-export.mjs +150 -0
  112. package/scripts/post-build-docs.js +0 -0
  113. package/scripts/post-build.mjs +0 -0
  114. package/scripts/pre-build.mjs +15 -0
  115. package/src/core/components/functional/fetch/fetch.md +0 -0
  116. package/src/core/components/functional/if/if.md +0 -0
  117. package/src/core/components/functional/if/if.ts +0 -0
  118. package/src/core/components/functional/list/list.demo.ts +0 -0
  119. package/src/core/components/functional/list/list.md +0 -0
  120. package/src/core/components/functional/router/router.md +0 -0
  121. package/src/core/components/functional/router/router.ts +0 -0
  122. package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +5 -5
  123. package/src/core/components/functional/sdui/__fixtures__/descriptors.ts +251 -0
  124. package/src/core/components/functional/sdui/__snapshots__/sdui-action.spec.ts.snap +73 -0
  125. package/src/core/components/functional/sdui/__snapshots__/sdui-incremental.spec.ts.snap +50 -0
  126. package/src/core/components/functional/sdui/__snapshots__/sdui-partial.spec.ts.snap +50 -0
  127. package/src/core/components/functional/sdui/__snapshots__/sdui.regression.spec.ts.snap +461 -0
  128. package/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
  129. package/src/core/components/functional/sdui/component-catalog.json +3103 -0
  130. package/src/core/components/functional/sdui/component-catalog.spec.ts +23 -0
  131. package/src/core/components/functional/sdui/sdui-action.spec.ts +99 -0
  132. package/src/core/components/functional/sdui/sdui-dom-snapshot.ts +61 -0
  133. package/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
  134. package/src/core/components/functional/sdui/sdui-incremental.spec.ts +137 -0
  135. package/src/core/components/functional/sdui/sdui-partial.spec.ts +83 -0
  136. package/src/core/components/functional/sdui/sdui-partial.ts +19 -0
  137. package/src/core/components/functional/sdui/sdui-safe.spec.ts +188 -0
  138. package/src/core/components/functional/sdui/sdui-safe.ts +100 -0
  139. package/src/core/components/functional/sdui/sdui.md +122 -0
  140. package/src/core/components/functional/sdui/sdui.regression.spec.ts +64 -0
  141. package/src/core/components/functional/sdui/sdui.ts +442 -34
  142. package/src/core/components/functional/sdui/types.ts +49 -0
  143. package/src/core/components/functional/states/states.md +0 -0
  144. package/src/core/components/functional/submit/submit.md +0 -0
  145. package/src/core/components/functional/subscriber/subscriber.ts +0 -0
  146. package/src/core/components/functional/value/value.ts +0 -0
  147. package/src/core/components/ui/_css/size.ts +0 -0
  148. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  149. package/src/core/components/ui/form/radio/radio.md +0 -0
  150. package/src/core/components/ui/form/select/select.md +0 -0
  151. package/src/core/components/ui/form/switch/switch.md +0 -0
  152. package/src/core/mixins/Subscriber.ts +0 -0
  153. package/src/core/utils/DataBindObserver.ts +0 -0
  154. package/src/core/utils/Objects.ts +0 -0
  155. package/src/core/utils/route.ts +0 -0
  156. package/src/css.d.ts +19 -0
  157. package/src/docs/_core-concept/subscriber.md +0 -0
  158. package/src/docs/_getting-started/my-first-subscriber.md +0 -0
  159. package/src/docs/_getting-started/pubsub.md +0 -0
  160. package/src/docs/example/users.ts +0 -0
  161. package/src/docs/search/page.ts +0 -0
  162. package/src/tsconfig.declarations.json +22 -0
  163. package/src/tsconfig.emit.json +23 -0
  164. package/src/tsconfig.json +90 -0
  165. package/src/tsconfig.tsbuildinfo +1 -1
  166. package/docs/assets/index-CD4WyL6o.css +0 -1
  167. package/docs/crawl/core/components/ui/theme/theme.html +0 -131
  168. package/docs/src/core/components/ui/theme/theme.md +0 -122
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="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">
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">
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,28 +15,10 @@
15
15
  </header>
16
16
  <main>
17
17
  <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Menu</strong>. sonic-menu lays out navigation or actions as a direction row or column of sonic-menu-item entries (ghost variant and block shape by default), optional sonic-divider separators, and overflow content in <span>Doc ID: <code>core/components/ui/menu/menu</code>. Keywords: Concorde, supersoniks, core/components/ui/menu/menu, menu, Menu, UI component, sonic-menu, web component, direction, sonic-menu-item, variant, shape, sonic-divider, more, href, pushstate, autoActive. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/menu/menu.html">https://concorde.supersoniks.org/crawl/core/components/ui/menu/menu.html</a>.</span></p>
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>
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>
37
20
  <h2 id="direction">Direction</h2>
38
- <p>Default <strong><code>direction</code></strong> is <strong><code>column</code></strong>. Use <strong><code>row</code></strong> for horizontal toolbars or tabs.</p>
39
- <pre><code>&lt;sonic-menu direction=&quot;row&quot;&gt;
21
+ <pre><code>&lt;sonic-menu direction=&quot;row&quot; &gt;
40
22
  &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
41
23
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;arrow-right&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
42
24
  Row
@@ -45,11 +27,11 @@
45
27
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
46
28
  Profile
47
29
  &lt;/sonic-menu-item&gt;
48
- &lt;sonic-menu-item&gt;
30
+ &lt;sonic-menu-item &gt;
49
31
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
50
32
  History
51
33
  &lt;/sonic-menu-item&gt;
52
- &lt;sonic-menu-item&gt;
34
+ &lt;sonic-menu-item &gt;
53
35
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
54
36
  Orders
55
37
  &lt;/sonic-menu-item&gt;
@@ -58,7 +40,7 @@
58
40
  Log out
59
41
  &lt;/sonic-menu-item&gt;
60
42
  &lt;/sonic-menu&gt;
61
- &lt;sonic-menu direction=&quot;column&quot;&gt;
43
+ &lt;sonic-menu direction =&quot;column&quot; &gt;
62
44
  &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
63
45
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;arrow-down&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
64
46
  Column
@@ -67,11 +49,11 @@
67
49
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
68
50
  Profile
69
51
  &lt;/sonic-menu-item&gt;
70
- &lt;sonic-menu-item&gt;
52
+ &lt;sonic-menu-item &gt;
71
53
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
72
54
  History
73
55
  &lt;/sonic-menu-item&gt;
74
- &lt;sonic-menu-item&gt;
56
+ &lt;sonic-menu-item &gt;
75
57
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
76
58
  Orders
77
59
  &lt;/sonic-menu-item&gt;
@@ -82,79 +64,88 @@
82
64
  &lt;/sonic-menu&gt;
83
65
  </code></pre>
84
66
  <h2 id="size">Size</h2>
85
- <p><strong><code>size</code></strong> on the menu propagates to items and the <strong><code>more</code></strong> trigger when they omit their own <strong><code>size</code></strong>.</p>
86
67
  <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
87
68
  &lt;sonic-menu size=&quot;xs&quot; direction=&quot;row&quot;&gt;
88
- &lt;sonic-menu-item&gt;XS&lt;/sonic-menu-item&gt;
69
+ &lt;sonic-menu-item&gt;
70
+ XS
71
+ &lt;/sonic-menu-item&gt;
89
72
  &lt;sonic-menu-item&gt;
90
73
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
91
74
  Profile
92
75
  &lt;/sonic-menu-item&gt;
93
- &lt;sonic-menu-item&gt;
76
+ &lt;sonic-menu-item &gt;
94
77
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
95
78
  History
96
79
  &lt;/sonic-menu-item&gt;
97
- &lt;sonic-menu-item&gt;
80
+ &lt;sonic-menu-item &gt;
98
81
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
99
82
  Orders
100
83
  &lt;/sonic-menu-item&gt;
101
84
  &lt;/sonic-menu&gt;
102
85
  &lt;sonic-menu size=&quot;sm&quot; direction=&quot;row&quot;&gt;
103
- &lt;sonic-menu-item&gt;Small&lt;/sonic-menu-item&gt;
86
+ &lt;sonic-menu-item&gt;
87
+ Small
88
+ &lt;/sonic-menu-item&gt;
104
89
  &lt;sonic-menu-item&gt;
105
90
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
106
91
  Profile
107
92
  &lt;/sonic-menu-item&gt;
108
- &lt;sonic-menu-item&gt;
93
+ &lt;sonic-menu-item &gt;
109
94
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
110
95
  History
111
96
  &lt;/sonic-menu-item&gt;
112
- &lt;sonic-menu-item&gt;
97
+ &lt;sonic-menu-item &gt;
113
98
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
114
99
  Orders
115
100
  &lt;/sonic-menu-item&gt;
116
101
  &lt;/sonic-menu&gt;
117
102
  &lt;sonic-menu direction=&quot;row&quot;&gt;
118
- &lt;sonic-menu-item&gt;Medium&lt;/sonic-menu-item&gt;
103
+ &lt;sonic-menu-item&gt;
104
+ Medium
105
+ &lt;/sonic-menu-item&gt;
119
106
  &lt;sonic-menu-item&gt;
120
107
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
121
108
  Profile
122
109
  &lt;/sonic-menu-item&gt;
123
- &lt;sonic-menu-item&gt;
110
+ &lt;sonic-menu-item &gt;
124
111
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
125
112
  History
126
113
  &lt;/sonic-menu-item&gt;
127
- &lt;sonic-menu-item&gt;
114
+ &lt;sonic-menu-item &gt;
128
115
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
129
116
  Orders
130
117
  &lt;/sonic-menu-item&gt;
131
118
  &lt;/sonic-menu&gt;
132
119
  &lt;sonic-menu size=&quot;lg&quot; direction=&quot;row&quot;&gt;
133
- &lt;sonic-menu-item&gt;Large&lt;/sonic-menu-item&gt;
120
+ &lt;sonic-menu-item&gt;
121
+ Large
122
+ &lt;/sonic-menu-item&gt;
134
123
  &lt;sonic-menu-item&gt;
135
124
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
136
125
  Profile
137
126
  &lt;/sonic-menu-item&gt;
138
- &lt;sonic-menu-item&gt;
127
+ &lt;sonic-menu-item &gt;
139
128
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
140
129
  History
141
130
  &lt;/sonic-menu-item&gt;
142
- &lt;sonic-menu-item&gt;
131
+ &lt;sonic-menu-item &gt;
143
132
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
144
133
  Orders
145
134
  &lt;/sonic-menu-item&gt;
146
135
  &lt;/sonic-menu&gt;
147
136
  &lt;sonic-menu size=&quot;xl&quot; direction=&quot;row&quot;&gt;
148
- &lt;sonic-menu-item&gt;XL&lt;/sonic-menu-item&gt;
137
+ &lt;sonic-menu-item&gt;
138
+ XL
139
+ &lt;/sonic-menu-item&gt;
149
140
  &lt;sonic-menu-item&gt;
150
141
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
151
142
  Profile
152
143
  &lt;/sonic-menu-item&gt;
153
- &lt;sonic-menu-item&gt;
144
+ &lt;sonic-menu-item &gt;
154
145
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
155
146
  History
156
147
  &lt;/sonic-menu-item&gt;
157
- &lt;sonic-menu-item&gt;
148
+ &lt;sonic-menu-item &gt;
158
149
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
159
150
  Orders
160
151
  &lt;/sonic-menu-item&gt;
@@ -162,59 +153,62 @@
162
153
  &lt;/div&gt;
163
154
  </code></pre>
164
155
  <h2 id="shadow">Shadow</h2>
165
- <p>Optional <strong><code>shadow</code></strong> wraps the menu surface (no shadow when omitted).</p>
166
156
  <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
167
157
  &lt;sonic-menu direction=&quot;row&quot;&gt;
168
- &lt;sonic-menu-item&gt;None&lt;/sonic-menu-item&gt;
158
+ &lt;sonic-menu-item&gt;
159
+ None
160
+ &lt;/sonic-menu-item&gt;
169
161
  &lt;/sonic-menu&gt;
170
162
  &lt;sonic-menu shadow=&quot;sm&quot; direction=&quot;row&quot;&gt;
171
- &lt;sonic-menu-item&gt;Small&lt;/sonic-menu-item&gt;
172
- &lt;/sonic-menu&gt;
173
- &lt;sonic-menu shadow=&quot;md&quot; direction=&quot;row&quot;&gt;
174
- &lt;sonic-menu-item&gt;Medium&lt;/sonic-menu-item&gt;
175
- &lt;/sonic-menu&gt;
176
- &lt;sonic-menu shadow=&quot;lg&quot; direction=&quot;row&quot;&gt;
177
- &lt;sonic-menu-item&gt;Large&lt;/sonic-menu-item&gt;
178
- &lt;/sonic-menu&gt;
179
- &lt;/div&gt;
180
- </code></pre>
181
- <h2 id="align">Align</h2>
182
- <p><strong><code>align</code></strong> propagates to items except square / circle <strong><code>shape</code></strong>.</p>
183
- <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
184
- &lt;sonic-menu align=&quot;center&quot;&gt;
185
- &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
186
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
187
- Home
188
- &lt;/sonic-menu-item&gt;
189
163
  &lt;sonic-menu-item&gt;
190
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
191
- Profile
164
+ Small
192
165
  &lt;/sonic-menu-item&gt;
193
166
  &lt;/sonic-menu&gt;
194
- &lt;sonic-menu align=&quot;left&quot;&gt;
195
- &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
196
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
197
- Home
198
- &lt;/sonic-menu-item&gt;
167
+ &lt;sonic-menu shadow=&quot;md&quot; direction=&quot;row&quot;&gt;
199
168
  &lt;sonic-menu-item&gt;
200
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
201
- Profile
169
+ Medium
202
170
  &lt;/sonic-menu-item&gt;
203
171
  &lt;/sonic-menu&gt;
204
- &lt;sonic-menu align=&quot;right&quot;&gt;
205
- &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
206
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
207
- Home
208
- &lt;/sonic-menu-item&gt;
172
+ &lt;sonic-menu shadow=&quot;lg&quot; direction=&quot;row&quot;&gt;
209
173
  &lt;sonic-menu-item&gt;
210
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
211
- Profile
174
+ Large
212
175
  &lt;/sonic-menu-item&gt;
213
176
  &lt;/sonic-menu&gt;
214
177
  &lt;/div&gt;
215
178
  </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>
216
211
  <h2 id="more">More</h2>
217
- <p>Assign nodes to <strong><code>slot=&quot;more&quot;</code></strong> to show the overflow popover. The trigger appears only when the slot has content. Icon orientation follows <strong><code>direction</code></strong> (vertical ellipsis in a row menu).</p>
218
212
  <pre><code>&lt;sonic-menu direction=&quot;row&quot;&gt;
219
213
  &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
220
214
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
@@ -224,20 +218,20 @@
224
218
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
225
219
  Profile
226
220
  &lt;/sonic-menu-item&gt;
227
- &lt;sonic-menu-item&gt;
221
+ &lt;sonic-menu-item &gt;
228
222
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
229
223
  History
230
224
  &lt;/sonic-menu-item&gt;
231
- &lt;sonic-menu-item&gt;
225
+ &lt;sonic-menu-item &gt;
232
226
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
233
227
  Orders
234
228
  &lt;/sonic-menu-item&gt;
235
229
  &lt;sonic-menu slot=&quot;more&quot;&gt;
236
- &lt;sonic-menu-item&gt;
230
+ &lt;sonic-menu-item &gt;
237
231
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;settings&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
238
232
  Settings
239
233
  &lt;/sonic-menu-item&gt;
240
- &lt;sonic-menu-item&gt;
234
+ &lt;sonic-menu-item &gt;
241
235
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
242
236
  Messages
243
237
  &lt;/sonic-menu-item&gt;
@@ -250,7 +244,6 @@
250
244
  &lt;/sonic-menu&gt;
251
245
  </code></pre>
252
246
  <h2 id="scrollable">Scrollable</h2>
253
- <p>With <strong><code>scrollable</code></strong>, the main slot scrolls with edge fade masks; drag-to-scroll works on pointer devices. When exactly one item is <strong><code>active</code></strong>, the menu scrolls it into view.</p>
254
247
  <pre><code>&lt;sonic-menu direction=&quot;row&quot; scrollable&gt;
255
248
  &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
256
249
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
@@ -260,15 +253,14 @@
260
253
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
261
254
  Profile
262
255
  &lt;/sonic-menu-item&gt;
263
- &lt;sonic-menu-item&gt;
256
+ &lt;sonic-menu-item &gt;
264
257
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
265
258
  History
266
259
  &lt;/sonic-menu-item&gt;
267
- &lt;sonic-menu-item&gt;
260
+ &lt;sonic-menu-item &gt;
268
261
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
269
262
  Orders
270
- &lt;/sonic-menu-item&gt;
271
- &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
263
+ &lt;/sonic-menu-item&gt; &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
272
264
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
273
265
  Home
274
266
  &lt;/sonic-menu-item&gt;
@@ -276,15 +268,14 @@
276
268
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
277
269
  Profile
278
270
  &lt;/sonic-menu-item&gt;
279
- &lt;sonic-menu-item&gt;
271
+ &lt;sonic-menu-item &gt;
280
272
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
281
273
  History
282
274
  &lt;/sonic-menu-item&gt;
283
- &lt;sonic-menu-item&gt;
275
+ &lt;sonic-menu-item &gt;
284
276
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
285
277
  Orders
286
- &lt;/sonic-menu-item&gt;
287
- &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
278
+ &lt;/sonic-menu-item&gt; &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
288
279
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
289
280
  Home
290
281
  &lt;/sonic-menu-item&gt;
@@ -292,28 +283,28 @@
292
283
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
293
284
  Profile
294
285
  &lt;/sonic-menu-item&gt;
295
- &lt;sonic-menu-item&gt;
286
+ &lt;sonic-menu-item &gt;
296
287
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
297
288
  History
298
289
  &lt;/sonic-menu-item&gt;
299
- &lt;sonic-menu-item&gt;
290
+ &lt;sonic-menu-item &gt;
300
291
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
301
292
  Orders
302
293
  &lt;/sonic-menu-item&gt;
303
- &lt;sonic-menu-item&gt;
294
+ &lt;sonic-menu-item &gt;
304
295
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;settings&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
305
296
  Settings
306
297
  &lt;/sonic-menu-item&gt;
307
- &lt;sonic-menu-item&gt;
298
+ &lt;sonic-menu-item &gt;
308
299
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
309
300
  Messages
310
301
  &lt;/sonic-menu-item&gt;
311
302
  &lt;sonic-menu slot=&quot;more&quot;&gt;
312
- &lt;sonic-menu-item&gt;
303
+ &lt;sonic-menu-item &gt;
313
304
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;settings&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
314
305
  Settings
315
306
  &lt;/sonic-menu-item&gt;
316
- &lt;sonic-menu-item&gt;
307
+ &lt;sonic-menu-item &gt;
317
308
  &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
318
309
  Messages
319
310
  &lt;/sonic-menu-item&gt;
@@ -323,70 +314,7 @@
323
314
  Log out
324
315
  &lt;/sonic-menu-item&gt;
325
316
  &lt;/sonic-menu&gt;
326
- &lt;/sonic-menu&gt;
327
317
  </code></pre>
328
- <h2 id="api-reference">API reference</h2>
329
- <table>
330
- <thead>
331
- <tr>
332
- <th>Attribute</th>
333
- <th>Values</th>
334
- <th>Description</th>
335
- </tr>
336
- </thead>
337
- <tbody><tr>
338
- <td><code>direction</code></td>
339
- <td><code>column</code> (default) · <code>row</code></td>
340
- <td>Vertical list or horizontal bar</td>
341
- </tr>
342
- <tr>
343
- <td><code>align</code></td>
344
- <td><code>left</code> (default) · <code>center</code> · <code>right</code></td>
345
- <td>Alignment propagated to items (except square / circle <strong><code>shape</code></strong>)</td>
346
- </tr>
347
- <tr>
348
- <td><code>size</code></td>
349
- <td><code>xs</code> · <code>sm</code> · <code>md</code> · <code>lg</code> · <code>xl</code></td>
350
- <td>Propagated to items and the <strong><code>more</code></strong> trigger when unset on the item</td>
351
- </tr>
352
- <tr>
353
- <td><code>shadow</code></td>
354
- <td><code>sm</code> · <code>md</code> · <code>lg</code></td>
355
- <td>Shadow around the menu; omitted for none</td>
356
- </tr>
357
- <tr>
358
- <td><code>minWidth</code></td>
359
- <td>CSS length</td>
360
- <td>Minimum width of the container (default <code>0</code>)</td>
361
- </tr>
362
- <tr>
363
- <td><code>scrollable</code></td>
364
- <td>boolean</td>
365
- <td>Scroll with edge fade; auto-scroll when a single item is <strong><code>active</code></strong></td>
366
- </tr>
367
- <tr>
368
- <td><code>moreShape</code></td>
369
- <td><code>circle</code> (default) · <code>square</code></td>
370
- <td>Shape of the <strong><code>more</code></strong> slot trigger button</td>
371
- </tr>
372
- </tbody></table>
373
- <table>
374
- <thead>
375
- <tr>
376
- <th>Slot</th>
377
- <th>Description</th>
378
- </tr>
379
- </thead>
380
- <tbody><tr>
381
- <td><em>(default)</em></td>
382
- <td>Visible items: <strong><code>sonic-menu-item</code></strong>, <strong><code>sonic-divider</code></strong>, nested <strong><code>sonic-menu</code></strong></td>
383
- </tr>
384
- <tr>
385
- <td><code>more</code></td>
386
- <td>Popover content for the “…” control; shown only when the slot has assigned nodes</td>
387
- </tr>
388
- </tbody></table>
389
- <p><strong><code>sonic-menu-item</code></strong> extends <strong><code>sonic-button</code></strong> (defaults: <strong><code>variant=&quot;ghost&quot;</code></strong>, <strong><code>shape=&quot;block&quot;</code></strong>). Use the button docs for <strong><code>type</code></strong>, <strong><code>variant</code></strong>, <strong><code>href</code></strong>, <strong><code>pushstate</code></strong>, <strong><code>autoActive</code></strong>, and item slots.</p>
390
318
 
391
319
  </article>
392
320
  </main>