@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/src/core/components/ui/menu/menu.md CHANGED
@@ -1,35 +1,9 @@
1
1
  # Menu
2
2
 
3
- **`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 the **`more`** slot (popover “…” trigger). Set **`href`** / **`pushstate`** / **`autoActive`** on each **`sonic-menu-item`**—same API as **`sonic-button`**—not on the menu host.
4
-
5
- ## Basic example
6
-
7
- <sonic-code>
8
- <template>
9
- <sonic-menu direction="row">
10
- <sonic-menu-item variant="ghost">
11
- <sonic-icon library="iconoir" name="home" slot="prefix"></sonic-icon>
12
- Home
13
- </sonic-menu-item>
14
- <sonic-menu-item>
15
- <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
16
- Profile
17
- </sonic-menu-item>
18
- <sonic-menu-item type="danger">
19
- <sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
20
- Log out
21
- </sonic-menu-item>
22
- </sonic-menu>
23
- </template>
24
- </sonic-code>
25
-
26
3
  ## Direction
27
-
28
- Default **`direction`** is **`column`**. Use **`row`** for horizontal toolbars or tabs.
29
-
30
4
  <sonic-code>
31
5
  <template>
32
- <sonic-menu direction="row">
6
+ <sonic-menu direction="row" >
33
7
  <sonic-menu-item variant="ghost">
34
8
  <sonic-icon library="iconoir" name="arrow-right" slot="prefix"></sonic-icon>
35
9
  Row
@@ -38,11 +12,11 @@ Default **`direction`** is **`column`**. Use **`row`** for horizontal toolbars o
38
12
  <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
39
13
  Profile
40
14
  </sonic-menu-item>
41
- <sonic-menu-item>
15
+ <sonic-menu-item >
42
16
  <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
43
17
  History
44
18
  </sonic-menu-item>
45
- <sonic-menu-item>
19
+ <sonic-menu-item >
46
20
  <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
47
21
  Orders
48
22
  </sonic-menu-item>
@@ -51,7 +25,7 @@ Default **`direction`** is **`column`**. Use **`row`** for horizontal toolbars o
51
25
  Log out
52
26
  </sonic-menu-item>
53
27
  </sonic-menu>
54
- <sonic-menu direction="column">
28
+ <sonic-menu direction ="column" >
55
29
  <sonic-menu-item variant="ghost">
56
30
  <sonic-icon library="iconoir" name="arrow-down" slot="prefix"></sonic-icon>
57
31
  Column
@@ -60,11 +34,11 @@ Default **`direction`** is **`column`**. Use **`row`** for horizontal toolbars o
60
34
  <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
61
35
  Profile
62
36
  </sonic-menu-item>
63
- <sonic-menu-item>
37
+ <sonic-menu-item >
64
38
  <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
65
39
  History
66
40
  </sonic-menu-item>
67
- <sonic-menu-item>
41
+ <sonic-menu-item >
68
42
  <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
69
43
  Orders
70
44
  </sonic-menu-item>
@@ -77,83 +51,90 @@ Default **`direction`** is **`column`**. Use **`row`** for horizontal toolbars o
77
51
  </sonic-code>
78
52
 
79
53
  ## Size
80
-
81
- **`size`** on the menu propagates to items and the **`more`** trigger when they omit their own **`size`**.
82
-
83
54
  <sonic-code>
84
55
  <template>
85
56
  <div class="grid gap-3">
86
57
  <sonic-menu size="xs" direction="row">
87
- <sonic-menu-item>XS</sonic-menu-item>
58
+ <sonic-menu-item>
59
+ XS
60
+ </sonic-menu-item>
88
61
  <sonic-menu-item>
89
62
  <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
90
63
  Profile
91
64
  </sonic-menu-item>
92
- <sonic-menu-item>
65
+ <sonic-menu-item >
93
66
  <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
94
67
  History
95
68
  </sonic-menu-item>
96
- <sonic-menu-item>
69
+ <sonic-menu-item >
97
70
  <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
98
71
  Orders
99
72
  </sonic-menu-item>
100
73
  </sonic-menu>
101
74
  <sonic-menu size="sm" direction="row">
102
- <sonic-menu-item>Small</sonic-menu-item>
75
+ <sonic-menu-item>
76
+ Small
77
+ </sonic-menu-item>
103
78
  <sonic-menu-item>
104
79
  <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
105
80
  Profile
106
81
  </sonic-menu-item>
107
- <sonic-menu-item>
82
+ <sonic-menu-item >
108
83
  <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
109
84
  History
110
85
  </sonic-menu-item>
111
- <sonic-menu-item>
86
+ <sonic-menu-item >
112
87
  <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
113
88
  Orders
114
89
  </sonic-menu-item>
115
90
  </sonic-menu>
116
91
  <sonic-menu direction="row">
117
- <sonic-menu-item>Medium</sonic-menu-item>
92
+ <sonic-menu-item>
93
+ Medium
94
+ </sonic-menu-item>
118
95
  <sonic-menu-item>
119
96
  <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
120
97
  Profile
121
98
  </sonic-menu-item>
122
- <sonic-menu-item>
99
+ <sonic-menu-item >
123
100
  <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
124
101
  History
125
102
  </sonic-menu-item>
126
- <sonic-menu-item>
103
+ <sonic-menu-item >
127
104
  <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
128
105
  Orders
129
106
  </sonic-menu-item>
130
107
  </sonic-menu>
131
108
  <sonic-menu size="lg" direction="row">
132
- <sonic-menu-item>Large</sonic-menu-item>
109
+ <sonic-menu-item>
110
+ Large
111
+ </sonic-menu-item>
133
112
  <sonic-menu-item>
134
113
  <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
135
114
  Profile
136
115
  </sonic-menu-item>
137
- <sonic-menu-item>
116
+ <sonic-menu-item >
138
117
  <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
139
118
  History
140
119
  </sonic-menu-item>
141
- <sonic-menu-item>
120
+ <sonic-menu-item >
142
121
  <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
143
122
  Orders
144
123
  </sonic-menu-item>
145
124
  </sonic-menu>
146
125
  <sonic-menu size="xl" direction="row">
147
- <sonic-menu-item>XL</sonic-menu-item>
126
+ <sonic-menu-item>
127
+ XL
128
+ </sonic-menu-item>
148
129
  <sonic-menu-item>
149
130
  <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
150
131
  Profile
151
132
  </sonic-menu-item>
152
- <sonic-menu-item>
133
+ <sonic-menu-item >
153
134
  <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
154
135
  History
155
136
  </sonic-menu-item>
156
- <sonic-menu-item>
137
+ <sonic-menu-item >
157
138
  <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
158
139
  Orders
159
140
  </sonic-menu-item>
@@ -163,73 +144,72 @@ Default **`direction`** is **`column`**. Use **`row`** for horizontal toolbars o
163
144
  </sonic-code>
164
145
 
165
146
  ## Shadow
166
-
167
- Optional **`shadow`** wraps the menu surface (no shadow when omitted).
168
-
169
147
  <sonic-code>
170
148
  <template>
171
149
  <div class="grid gap-3">
172
150
  <sonic-menu direction="row">
173
- <sonic-menu-item>None</sonic-menu-item>
151
+ <sonic-menu-item>
152
+ None
153
+ </sonic-menu-item>
174
154
  </sonic-menu>
175
155
  <sonic-menu shadow="sm" direction="row">
176
- <sonic-menu-item>Small</sonic-menu-item>
156
+ <sonic-menu-item>
157
+ Small
158
+ </sonic-menu-item>
177
159
  </sonic-menu>
178
160
  <sonic-menu shadow="md" direction="row">
179
- <sonic-menu-item>Medium</sonic-menu-item>
161
+ <sonic-menu-item>
162
+ Medium
163
+ </sonic-menu-item>
180
164
  </sonic-menu>
181
165
  <sonic-menu shadow="lg" direction="row">
182
- <sonic-menu-item>Large</sonic-menu-item>
166
+ <sonic-menu-item>
167
+ Large
168
+ </sonic-menu-item>
183
169
  </sonic-menu>
184
170
  </div>
185
171
  </template>
186
172
  </sonic-code>
187
173
 
188
174
  ## Align
189
-
190
- **`align`** propagates to items except square / circle **`shape`**.
191
-
192
175
  <sonic-code>
193
176
  <template>
194
- <div class="grid gap-3">
195
- <sonic-menu align="center">
196
- <sonic-menu-item variant="ghost">
197
- <sonic-icon library="iconoir" name="home"></sonic-icon>
198
- Home
199
- </sonic-menu-item>
200
- <sonic-menu-item>
201
- <sonic-icon library="iconoir" name="user"></sonic-icon>
202
- Profile
203
- </sonic-menu-item>
204
- </sonic-menu>
205
- <sonic-menu align="left">
206
- <sonic-menu-item variant="ghost">
207
- <sonic-icon library="iconoir" name="home"></sonic-icon>
208
- Home
209
- </sonic-menu-item>
210
- <sonic-menu-item>
211
- <sonic-icon library="iconoir" name="user"></sonic-icon>
212
- Profile
213
- </sonic-menu-item>
214
- </sonic-menu>
215
- <sonic-menu align="right">
216
- <sonic-menu-item variant="ghost">
217
- <sonic-icon library="iconoir" name="home"></sonic-icon>
218
- Home
219
- </sonic-menu-item>
220
- <sonic-menu-item>
221
- <sonic-icon library="iconoir" name="user"></sonic-icon>
222
- Profile
223
- </sonic-menu-item>
224
- </sonic-menu>
225
- </div>
177
+ <sonic-menu align="center">
178
+ <sonic-menu-item variant="ghost">
179
+ <sonic-icon library="iconoir" name="home"></sonic-icon>
180
+ Home
181
+ </sonic-menu-item>
182
+ <sonic-menu-item>
183
+ <sonic-icon library="iconoir" name="user"></sonic-icon>
184
+ Profile
185
+ </sonic-menu-item>
186
+ </sonic-menu>
187
+ <sonic-menu align="left">
188
+ <sonic-menu-item variant="ghost">
189
+ <sonic-icon library="iconoir" name="home"></sonic-icon>
190
+ Home
191
+ </sonic-menu-item>
192
+ <sonic-menu-item>
193
+ <sonic-icon library="iconoir" name="user"></sonic-icon>
194
+ Profile
195
+ </sonic-menu-item>
196
+ </sonic-menu>
197
+ <sonic-menu align="right">
198
+ <sonic-menu-item variant="ghost">
199
+ <sonic-icon library="iconoir" name="home"></sonic-icon>
200
+ Home
201
+ </sonic-menu-item>
202
+ <sonic-menu-item>
203
+ <sonic-icon library="iconoir" name="user"></sonic-icon>
204
+ Profile
205
+ </sonic-menu-item>
206
+ </sonic-menu>
226
207
  </template>
227
208
  </sonic-code>
228
209
 
229
- ## More
230
210
 
231
- Assign nodes to **`slot="more"`** to show the overflow popover. The trigger appears only when the slot has content. Icon orientation follows **`direction`** (vertical ellipsis in a row menu).
232
211
 
212
+ ## More
233
213
  <sonic-code>
234
214
  <template>
235
215
  <sonic-menu direction="row">
@@ -241,20 +221,20 @@ Assign nodes to **`slot="more"`** to show the overflow popover. The trigger appe
241
221
  <sonic-icon library="iconoir" name="user"></sonic-icon>
242
222
  Profile
243
223
  </sonic-menu-item>
244
- <sonic-menu-item>
224
+ <sonic-menu-item >
245
225
  <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
246
226
  History
247
227
  </sonic-menu-item>
248
- <sonic-menu-item>
228
+ <sonic-menu-item >
249
229
  <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
250
230
  Orders
251
231
  </sonic-menu-item>
252
232
  <sonic-menu slot="more">
253
- <sonic-menu-item>
233
+ <sonic-menu-item >
254
234
  <sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
255
235
  Settings
256
236
  </sonic-menu-item>
257
- <sonic-menu-item>
237
+ <sonic-menu-item >
258
238
  <sonic-icon library="iconoir" name="chat-bubble" slot="prefix"></sonic-icon>
259
239
  Messages
260
240
  </sonic-menu-item>
@@ -269,9 +249,6 @@ Assign nodes to **`slot="more"`** to show the overflow popover. The trigger appe
269
249
  </sonic-code>
270
250
 
271
251
  ## Scrollable
272
-
273
- With **`scrollable`**, the main slot scrolls with edge fade masks; drag-to-scroll works on pointer devices. When exactly one item is **`active`**, the menu scrolls it into view.
274
-
275
252
  <sonic-code>
276
253
  <template>
277
254
  <sonic-menu direction="row" scrollable>
@@ -283,15 +260,14 @@ With **`scrollable`**, the main slot scrolls with edge fade masks; drag-to-scrol
283
260
  <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
284
261
  Profile
285
262
  </sonic-menu-item>
286
- <sonic-menu-item>
263
+ <sonic-menu-item >
287
264
  <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
288
265
  History
289
266
  </sonic-menu-item>
290
- <sonic-menu-item>
267
+ <sonic-menu-item >
291
268
  <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
292
269
  Orders
293
- </sonic-menu-item>
294
- <sonic-menu-item variant="ghost">
270
+ </sonic-menu-item> <sonic-menu-item variant="ghost">
295
271
  <sonic-icon library="iconoir" name="home" slot="prefix"></sonic-icon>
296
272
  Home
297
273
  </sonic-menu-item>
@@ -299,15 +275,14 @@ With **`scrollable`**, the main slot scrolls with edge fade masks; drag-to-scrol
299
275
  <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
300
276
  Profile
301
277
  </sonic-menu-item>
302
- <sonic-menu-item>
278
+ <sonic-menu-item >
303
279
  <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
304
280
  History
305
281
  </sonic-menu-item>
306
- <sonic-menu-item>
282
+ <sonic-menu-item >
307
283
  <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
308
284
  Orders
309
- </sonic-menu-item>
310
- <sonic-menu-item variant="ghost">
285
+ </sonic-menu-item> <sonic-menu-item variant="ghost">
311
286
  <sonic-icon library="iconoir" name="home" slot="prefix"></sonic-icon>
312
287
  Home
313
288
  </sonic-menu-item>
@@ -315,28 +290,28 @@ With **`scrollable`**, the main slot scrolls with edge fade masks; drag-to-scrol
315
290
  <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
316
291
  Profile
317
292
  </sonic-menu-item>
318
- <sonic-menu-item>
293
+ <sonic-menu-item >
319
294
  <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
320
295
  History
321
296
  </sonic-menu-item>
322
- <sonic-menu-item>
297
+ <sonic-menu-item >
323
298
  <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
324
299
  Orders
325
300
  </sonic-menu-item>
326
- <sonic-menu-item>
301
+ <sonic-menu-item >
327
302
  <sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
328
303
  Settings
329
304
  </sonic-menu-item>
330
- <sonic-menu-item>
305
+ <sonic-menu-item >
331
306
  <sonic-icon library="iconoir" name="chat-bubble" slot="prefix"></sonic-icon>
332
307
  Messages
333
308
  </sonic-menu-item>
334
309
  <sonic-menu slot="more">
335
- <sonic-menu-item>
310
+ <sonic-menu-item >
336
311
  <sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
337
312
  Settings
338
313
  </sonic-menu-item>
339
- <sonic-menu-item>
314
+ <sonic-menu-item >
340
315
  <sonic-icon library="iconoir" name="chat-bubble" slot="prefix"></sonic-icon>
341
316
  Messages
342
317
  </sonic-menu-item>
@@ -346,25 +321,9 @@ With **`scrollable`**, the main slot scrolls with edge fade masks; drag-to-scrol
346
321
  Log out
347
322
  </sonic-menu-item>
348
323
  </sonic-menu>
349
- </sonic-menu>
324
+
350
325
  </template>
351
326
  </sonic-code>
352
327
 
353
- ## API reference
354
-
355
- | Attribute | Values | Description |
356
- |----------|---------|-------------|
357
- | `direction` | `column` (default) · `row` | Vertical list or horizontal bar |
358
- | `align` | `left` (default) · `center` · `right` | Alignment propagated to items (except square / circle **`shape`**) |
359
- | `size` | `xs` · `sm` · `md` · `lg` · `xl` | Propagated to items and the **`more`** trigger when unset on the item |
360
- | `shadow` | `sm` · `md` · `lg` | Shadow around the menu; omitted for none |
361
- | `minWidth` | CSS length | Minimum width of the container (default `0`) |
362
- | `scrollable` | boolean | Scroll with edge fade; auto-scroll when a single item is **`active`** |
363
- | `moreShape` | `circle` (default) · `square` | Shape of the **`more`** slot trigger button |
364
-
365
- | Slot | Description |
366
- |------|-------------|
367
- | *(default)* | Visible items: **`sonic-menu-item`**, **`sonic-divider`**, nested **`sonic-menu`** |
368
- | `more` | Popover content for the “…” control; shown only when the slot has assigned nodes |
369
328
 
370
- **`sonic-menu-item`** extends **`sonic-button`** (defaults: **`variant="ghost"`**, **`shape="block"`**). Use the button docs for **`type`**, **`variant`**, **`href`**, **`pushstate`**, **`autoActive`**, and item slots.
329
+