@panphora/bevel 0.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 (539) hide show
  1. package/LICENSE +16 -0
  2. package/README.md +226 -0
  3. package/bevel-fonts.css +16 -0
  4. package/bevel.css +3075 -0
  5. package/bevel.js +2126 -0
  6. package/dist/react/components/activity-feed.d.ts +89 -0
  7. package/dist/react/components/activity-feed.js +54 -0
  8. package/dist/react/components/alert-dialog.d.ts +14 -0
  9. package/dist/react/components/alert-dialog.js +19 -0
  10. package/dist/react/components/app-shell.d.ts +98 -0
  11. package/dist/react/components/app-shell.js +86 -0
  12. package/dist/react/components/app-toolbar.d.ts +19 -0
  13. package/dist/react/components/app-toolbar.js +22 -0
  14. package/dist/react/components/avatar-group.d.ts +67 -0
  15. package/dist/react/components/avatar-group.js +49 -0
  16. package/dist/react/components/badge-and-pill.d.ts +34 -0
  17. package/dist/react/components/badge-and-pill.js +12 -0
  18. package/dist/react/components/breadcrumbs.d.ts +56 -0
  19. package/dist/react/components/breadcrumbs.js +44 -0
  20. package/dist/react/components/bulk-bar.d.ts +22 -0
  21. package/dist/react/components/bulk-bar.js +59 -0
  22. package/dist/react/components/button.d.ts +15 -0
  23. package/dist/react/components/button.js +20 -0
  24. package/dist/react/components/callout-and-hint.d.ts +17 -0
  25. package/dist/react/components/callout-and-hint.js +8 -0
  26. package/dist/react/components/checkbox.d.ts +5 -0
  27. package/dist/react/components/checkbox.js +13 -0
  28. package/dist/react/components/chip.d.ts +149 -0
  29. package/dist/react/components/chip.js +29 -0
  30. package/dist/react/components/code-block.d.ts +50 -0
  31. package/dist/react/components/code-block.js +77 -0
  32. package/dist/react/components/code-editor.d.ts +122 -0
  33. package/dist/react/components/code-editor.js +695 -0
  34. package/dist/react/components/column-manager.d.ts +28 -0
  35. package/dist/react/components/column-manager.js +85 -0
  36. package/dist/react/components/combobox.d.ts +32 -0
  37. package/dist/react/components/combobox.js +37 -0
  38. package/dist/react/components/data-grid.d.ts +108 -0
  39. package/dist/react/components/data-grid.js +159 -0
  40. package/dist/react/components/data-table.d.ts +2 -0
  41. package/dist/react/components/data-table.js +6 -0
  42. package/dist/react/components/date.d.ts +23 -0
  43. package/dist/react/components/date.js +11 -0
  44. package/dist/react/components/details.d.ts +13 -0
  45. package/dist/react/components/details.js +20 -0
  46. package/dist/react/components/dialog.d.ts +74 -0
  47. package/dist/react/components/dialog.js +31 -0
  48. package/dist/react/components/diff-view.d.ts +73 -0
  49. package/dist/react/components/diff-view.js +68 -0
  50. package/dist/react/components/documents.d.ts +70 -0
  51. package/dist/react/components/documents.js +10 -0
  52. package/dist/react/components/drawer.d.ts +45 -0
  53. package/dist/react/components/drawer.js +35 -0
  54. package/dist/react/components/editable-grid-cells.d.ts +32 -0
  55. package/dist/react/components/editable-grid-cells.js +116 -0
  56. package/dist/react/components/eyebrow-kicker-lede-pull-quote.d.ts +39 -0
  57. package/dist/react/components/eyebrow-kicker-lede-pull-quote.js +12 -0
  58. package/dist/react/components/field.d.ts +32 -0
  59. package/dist/react/components/field.js +27 -0
  60. package/dist/react/components/file-tree.d.ts +75 -0
  61. package/dist/react/components/file-tree.js +247 -0
  62. package/dist/react/components/file.d.ts +43 -0
  63. package/dist/react/components/file.js +73 -0
  64. package/dist/react/components/files-table.d.ts +174 -0
  65. package/dist/react/components/files-table.js +237 -0
  66. package/dist/react/components/filter-builder.d.ts +37 -0
  67. package/dist/react/components/filter-builder.js +109 -0
  68. package/dist/react/components/form-error-summary.d.ts +16 -0
  69. package/dist/react/components/form-error-summary.js +49 -0
  70. package/dist/react/components/icon-button.d.ts +8 -0
  71. package/dist/react/components/icon-button.js +14 -0
  72. package/dist/react/components/icon.d.ts +7 -0
  73. package/dist/react/components/icon.js +15 -0
  74. package/dist/react/components/image.d.ts +72 -0
  75. package/dist/react/components/image.js +24 -0
  76. package/dist/react/components/inline-edit.d.ts +70 -0
  77. package/dist/react/components/inline-edit.js +149 -0
  78. package/dist/react/components/input.d.ts +29 -0
  79. package/dist/react/components/input.js +20 -0
  80. package/dist/react/components/kanban-board.d.ts +140 -0
  81. package/dist/react/components/kanban-board.js +374 -0
  82. package/dist/react/components/layout.d.ts +51 -0
  83. package/dist/react/components/layout.js +28 -0
  84. package/dist/react/components/list.d.ts +28 -0
  85. package/dist/react/components/list.js +6 -0
  86. package/dist/react/components/masthead-and-verdict.d.ts +60 -0
  87. package/dist/react/components/masthead-and-verdict.js +8 -0
  88. package/dist/react/components/menu.d.ts +26 -0
  89. package/dist/react/components/menu.js +31 -0
  90. package/dist/react/components/multi-select-picker.d.ts +49 -0
  91. package/dist/react/components/multi-select-picker.js +20 -0
  92. package/dist/react/components/note.d.ts +33 -0
  93. package/dist/react/components/note.js +8 -0
  94. package/dist/react/components/number-field.d.ts +16 -0
  95. package/dist/react/components/number-field.js +17 -0
  96. package/dist/react/components/pagination.d.ts +45 -0
  97. package/dist/react/components/pagination.js +87 -0
  98. package/dist/react/components/persistent-action-banner.d.ts +71 -0
  99. package/dist/react/components/persistent-action-banner.js +39 -0
  100. package/dist/react/components/popconfirm.d.ts +42 -0
  101. package/dist/react/components/popconfirm.js +59 -0
  102. package/dist/react/components/popover.d.ts +16 -0
  103. package/dist/react/components/popover.js +21 -0
  104. package/dist/react/components/progress-and-gauge.d.ts +44 -0
  105. package/dist/react/components/progress-and-gauge.js +19 -0
  106. package/dist/react/components/radio.d.ts +7 -0
  107. package/dist/react/components/radio.js +13 -0
  108. package/dist/react/components/rich-text-toolbar.d.ts +26 -0
  109. package/dist/react/components/rich-text-toolbar.js +64 -0
  110. package/dist/react/components/rows-and-card.d.ts +88 -0
  111. package/dist/react/components/rows-and-card.js +10 -0
  112. package/dist/react/components/save-status-indicator.d.ts +11 -0
  113. package/dist/react/components/save-status-indicator.js +33 -0
  114. package/dist/react/components/segmented-control.d.ts +21 -0
  115. package/dist/react/components/segmented-control.js +15 -0
  116. package/dist/react/components/select.d.ts +29 -0
  117. package/dist/react/components/select.js +29 -0
  118. package/dist/react/components/selectable-cards.d.ts +30 -0
  119. package/dist/react/components/selectable-cards.js +29 -0
  120. package/dist/react/components/settings-rows.d.ts +51 -0
  121. package/dist/react/components/settings-rows.js +8 -0
  122. package/dist/react/components/sidebar-nav.d.ts +77 -0
  123. package/dist/react/components/sidebar-nav.js +41 -0
  124. package/dist/react/components/skeleton-and-empty.d.ts +51 -0
  125. package/dist/react/components/skeleton-and-empty.js +14 -0
  126. package/dist/react/components/slider.d.ts +19 -0
  127. package/dist/react/components/slider.js +17 -0
  128. package/dist/react/components/small-charts.d.ts +60 -0
  129. package/dist/react/components/small-charts.js +76 -0
  130. package/dist/react/components/sortable.d.ts +30 -0
  131. package/dist/react/components/sortable.js +85 -0
  132. package/dist/react/components/split-button.d.ts +38 -0
  133. package/dist/react/components/split-button.js +43 -0
  134. package/dist/react/components/split-panes.d.ts +35 -0
  135. package/dist/react/components/split-panes.js +102 -0
  136. package/dist/react/components/stat-tiles.d.ts +54 -0
  137. package/dist/react/components/stat-tiles.js +8 -0
  138. package/dist/react/components/steps.d.ts +11 -0
  139. package/dist/react/components/steps.js +13 -0
  140. package/dist/react/components/switch.d.ts +6 -0
  141. package/dist/react/components/switch.js +13 -0
  142. package/dist/react/components/table.d.ts +61 -0
  143. package/dist/react/components/table.js +6 -0
  144. package/dist/react/components/tabs.d.ts +7 -0
  145. package/dist/react/components/tabs.js +13 -0
  146. package/dist/react/components/tags.d.ts +33 -0
  147. package/dist/react/components/tags.js +83 -0
  148. package/dist/react/components/textarea.d.ts +10 -0
  149. package/dist/react/components/textarea.js +6 -0
  150. package/dist/react/components/toast.d.ts +35 -0
  151. package/dist/react/components/toast.js +90 -0
  152. package/dist/react/components/tooltip-and-key.d.ts +20 -0
  153. package/dist/react/components/tooltip-and-key.js +20 -0
  154. package/dist/react/components/tree-view.d.ts +34 -0
  155. package/dist/react/components/tree-view.js +118 -0
  156. package/dist/react/components/upload-dropzone.d.ts +92 -0
  157. package/dist/react/components/upload-dropzone.js +116 -0
  158. package/dist/react/components/wizard-shell.d.ts +78 -0
  159. package/dist/react/components/wizard-shell.js +176 -0
  160. package/dist/react/fonts.css.d.ts +1 -0
  161. package/dist/react/index.d.ts +76 -0
  162. package/dist/react/index.js +77 -0
  163. package/dist/react/integrations/quickcrop.d.ts +58 -0
  164. package/dist/react/integrations/quickcrop.js +137 -0
  165. package/dist/react/integrations/richclay.d.ts +43 -0
  166. package/dist/react/integrations/richclay.js +129 -0
  167. package/dist/react/internal/classes.d.ts +3 -0
  168. package/dist/react/internal/classes.js +10 -0
  169. package/dist/react/internal/close-mark.d.ts +1 -0
  170. package/dist/react/internal/close-mark.js +10 -0
  171. package/dist/react/internal/controllable-state.d.ts +9 -0
  172. package/dist/react/internal/controllable-state.js +22 -0
  173. package/dist/react/internal/drop-effect.d.ts +28 -0
  174. package/dist/react/internal/drop-effect.js +8 -0
  175. package/dist/react/internal/form-reset.d.ts +2 -0
  176. package/dist/react/internal/form-reset.js +22 -0
  177. package/dist/react/internal/format.d.ts +1 -0
  178. package/dist/react/internal/format.js +14 -0
  179. package/dist/react/internal/link.d.ts +2 -0
  180. package/dist/react/internal/link.js +8 -0
  181. package/dist/react/internal/part.d.ts +20 -0
  182. package/dist/react/internal/part.js +47 -0
  183. package/dist/react/internal/pointer-session.d.ts +8 -0
  184. package/dist/react/internal/pointer-session.js +60 -0
  185. package/dist/react/internal/refs.d.ts +2 -0
  186. package/dist/react/internal/refs.js +22 -0
  187. package/dist/react/internal/rich-text.d.ts +28 -0
  188. package/dist/react/internal/rich-text.js +4 -0
  189. package/dist/react/internal/table-context.d.ts +39 -0
  190. package/dist/react/internal/table-context.js +12 -0
  191. package/dist/react/internal/use-object-url.d.ts +1 -0
  192. package/dist/react/internal/use-object-url.js +15 -0
  193. package/dist/react/layout.css +274 -0
  194. package/dist/react/layout.css.d.ts +1 -0
  195. package/dist/react/models/filter.d.ts +31 -0
  196. package/dist/react/models/filter.js +79 -0
  197. package/dist/react/models/kanban.d.ts +51 -0
  198. package/dist/react/models/kanban.js +35 -0
  199. package/dist/react/models/reorder.d.ts +9 -0
  200. package/dist/react/models/reorder.js +23 -0
  201. package/dist/react/models/table.d.ts +85 -0
  202. package/dist/react/models/table.js +144 -0
  203. package/dist/react/models/tree.d.ts +16 -0
  204. package/dist/react/models/tree.js +26 -0
  205. package/dist/react/provider.d.ts +18 -0
  206. package/dist/react/provider.js +31 -0
  207. package/dist/react/recipes/context-hypercms.d.ts +17 -0
  208. package/dist/react/recipes/context-hypercms.js +71 -0
  209. package/dist/react/recipes/context-quickcrop.d.ts +8 -0
  210. package/dist/react/recipes/context-quickcrop.js +49 -0
  211. package/dist/react/theme.css +8004 -0
  212. package/dist/react/theme.css.d.ts +1 -0
  213. package/examples/README.md +34 -0
  214. package/examples/components/activity-feed.html +28 -0
  215. package/examples/components/app-shell.html +12 -0
  216. package/examples/components/app-toolbar.html +38 -0
  217. package/examples/components/avatar-group.html +27 -0
  218. package/examples/components/breadcrumbs.html +26 -0
  219. package/examples/components/bulk-bar.html +22 -0
  220. package/examples/components/code-block.html +12 -0
  221. package/examples/components/code-editor.html +25 -0
  222. package/examples/components/column-manager.html +9 -0
  223. package/examples/components/combobox.html +13 -0
  224. package/examples/components/context-hypercms.css +41 -0
  225. package/examples/components/context-hypercms.html +40 -0
  226. package/examples/components/context-hypercms.js +62 -0
  227. package/examples/components/context-quickcrop.html +137 -0
  228. package/examples/components/diff-view.html +9 -0
  229. package/examples/components/drawer.html +11 -0
  230. package/examples/components/editable-grid-cells.html +9 -0
  231. package/examples/components/file-browser.html +53 -0
  232. package/examples/components/file-tree.html +34 -0
  233. package/examples/components/files-table.html +80 -0
  234. package/examples/components/filter-builder.html +11 -0
  235. package/examples/components/form-error-summary.html +11 -0
  236. package/examples/components/index.html +51 -0
  237. package/examples/components/inline-edit.html +42 -0
  238. package/examples/components/kanban-board.html +42 -0
  239. package/examples/components/manifest.json +3279 -0
  240. package/examples/components/modal.html +11 -0
  241. package/examples/components/multi-select-picker.html +13 -0
  242. package/examples/components/pagination.html +32 -0
  243. package/examples/components/persistent-action-banner.html +23 -0
  244. package/examples/components/popconfirm.html +13 -0
  245. package/examples/components/popover-menu.html +13 -0
  246. package/examples/components/reference/baseline/DECISIONS.md +85 -0
  247. package/examples/components/reference/baseline/README.md +58 -0
  248. package/examples/components/reference/baseline/bevel-fonts.css +16 -0
  249. package/examples/components/reference/baseline/bevel.css +1339 -0
  250. package/examples/components/reference/baseline/bevel.js +496 -0
  251. package/examples/components/reference/baseline/fonts/LICENSE-ibm-plex-mono.txt +93 -0
  252. package/examples/components/reference/baseline/fonts/LICENSE-ibm-plex-sans.txt +93 -0
  253. package/examples/components/reference/baseline/fonts/LICENSE-newsreader.txt +93 -0
  254. package/examples/components/reference/baseline/fonts/ibm-plex-mono-latin-400-normal.woff2 +0 -0
  255. package/examples/components/reference/baseline/fonts/ibm-plex-mono-latin-500-normal.woff2 +0 -0
  256. package/examples/components/reference/baseline/fonts/ibm-plex-mono-latin-600-normal.woff2 +0 -0
  257. package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-400-italic.woff2 +0 -0
  258. package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-400-normal.woff2 +0 -0
  259. package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-500-normal.woff2 +0 -0
  260. package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-600-normal.woff2 +0 -0
  261. package/examples/components/reference/baseline/fonts/newsreader-latin-opsz-italic.woff2 +0 -0
  262. package/examples/components/reference/baseline/fonts/newsreader-latin-opsz-normal.woff2 +0 -0
  263. package/examples/components/reference/fable/IMPROVEMENTS.md +106 -0
  264. package/examples/components/reference/fable/PARENT-REPAIRS.md +17 -0
  265. package/examples/components/reference/fable/__pycache__/build_repairs.cpython-311.pyc +0 -0
  266. package/examples/components/reference/fable/__pycache__/kanban.cpython-311.pyc +0 -0
  267. package/examples/components/reference/fable/as-authored/IMPROVEMENTS-completed.md +106 -0
  268. package/examples/components/reference/fable/as-authored/base-astra.css +17 -0
  269. package/examples/components/reference/fable/as-authored/base-parent.css +416 -0
  270. package/examples/components/reference/fable/as-authored/build.py +858 -0
  271. package/examples/components/reference/fable/as-authored/fable.css +823 -0
  272. package/examples/components/reference/fable/as-authored/kanban-completed.css +235 -0
  273. package/examples/components/reference/fable/as-authored/kanban-completed.html +53 -0
  274. package/examples/components/reference/fable/as-authored/kanban-completed.py +212 -0
  275. package/examples/components/reference/fable/as-authored/kanban.py +207 -0
  276. package/examples/components/reference/fable/base-astra.css +17 -0
  277. package/examples/components/reference/fable/base-parent.css +416 -0
  278. package/examples/components/reference/fable/build.py +858 -0
  279. package/examples/components/reference/fable/build_repairs.py +25 -0
  280. package/examples/components/reference/fable/components/activity-feed.html +3 -0
  281. package/examples/components/reference/fable/components/app-toolbar.html +3 -0
  282. package/examples/components/reference/fable/components/avatar-group.html +4 -0
  283. package/examples/components/reference/fable/components/breadcrumbs.html +3 -0
  284. package/examples/components/reference/fable/components/code-block.html +9 -0
  285. package/examples/components/reference/fable/components/column-manager.html +3 -0
  286. package/examples/components/reference/fable/components/combobox.html +6 -0
  287. package/examples/components/reference/fable/components/context-hypercms.html +3 -0
  288. package/examples/components/reference/fable/components/context-quickcrop.html +4 -0
  289. package/examples/components/reference/fable/components/diff-view.html +13 -0
  290. package/examples/components/reference/fable/components/drawer.html +3 -0
  291. package/examples/components/reference/fable/components/editable-grid-cells.html +3 -0
  292. package/examples/components/reference/fable/components/filter-builder.html +3 -0
  293. package/examples/components/reference/fable/components/form-error-summary.html +4 -0
  294. package/examples/components/reference/fable/components/inline-edit.html +3 -0
  295. package/examples/components/reference/fable/components/kanban-board.html +53 -0
  296. package/examples/components/reference/fable/components/modal.html +3 -0
  297. package/examples/components/reference/fable/components/multi-select-picker.html +5 -0
  298. package/examples/components/reference/fable/components/pagination.html +3 -0
  299. package/examples/components/reference/fable/components/persistent-action-banner.html +4 -0
  300. package/examples/components/reference/fable/components/popconfirm.html +5 -0
  301. package/examples/components/reference/fable/components/popover-menu.html +3 -0
  302. package/examples/components/reference/fable/components/rich-text-toolbar.html +3 -0
  303. package/examples/components/reference/fable/components/save-status-indicator.html +2 -0
  304. package/examples/components/reference/fable/components/selectable-cards.html +3 -0
  305. package/examples/components/reference/fable/components/settings-rows.html +3 -0
  306. package/examples/components/reference/fable/components/sidebar-nav.html +4 -0
  307. package/examples/components/reference/fable/components/small-charts.html +5 -0
  308. package/examples/components/reference/fable/components/split-button.html +4 -0
  309. package/examples/components/reference/fable/components/split-panes.html +8 -0
  310. package/examples/components/reference/fable/components/stat-tiles.html +3 -0
  311. package/examples/components/reference/fable/components/toast-stack.html +5 -0
  312. package/examples/components/reference/fable/components/tree-view.html +4 -0
  313. package/examples/components/reference/fable/components/upload-dropzone.html +6 -0
  314. package/examples/components/reference/fable/components/wizard-shell.html +3 -0
  315. package/examples/components/reference/fable/coverage.json +414 -0
  316. package/examples/components/reference/fable/fable.css +823 -0
  317. package/examples/components/reference/fable/index.html +5 -0
  318. package/examples/components/reference/fable/kanban.css +237 -0
  319. package/examples/components/reference/fable/kanban.py +212 -0
  320. package/examples/components/reference/fable/parent-repairs.css +9 -0
  321. package/examples/components/reference/fixtures/data.json +102 -0
  322. package/examples/components/reference/fixtures/host.js +47 -0
  323. package/examples/components/reference/fixtures/static-host.js +39 -0
  324. package/examples/components/reference/fixtures/workspace.jpg +0 -0
  325. package/examples/components/reference/parent/CHANGES.md +179 -0
  326. package/examples/components/reference/parent/__pycache__/kanban.cpython-311.pyc +0 -0
  327. package/examples/components/reference/parent/base-astra.css +17 -0
  328. package/examples/components/reference/parent/base-parent.css +416 -0
  329. package/examples/components/reference/parent/build.py +148 -0
  330. package/examples/components/reference/parent/components/activity-feed.html +2 -0
  331. package/examples/components/reference/parent/components/app-toolbar.html +2 -0
  332. package/examples/components/reference/parent/components/avatar-group.html +4 -0
  333. package/examples/components/reference/parent/components/breadcrumbs.html +2 -0
  334. package/examples/components/reference/parent/components/code-block.html +8 -0
  335. package/examples/components/reference/parent/components/column-manager.html +2 -0
  336. package/examples/components/reference/parent/components/combobox.html +6 -0
  337. package/examples/components/reference/parent/components/context-hypercms.html +2 -0
  338. package/examples/components/reference/parent/components/context-quickcrop.html +4 -0
  339. package/examples/components/reference/parent/components/diff-view.html +4 -0
  340. package/examples/components/reference/parent/components/drawer.html +2 -0
  341. package/examples/components/reference/parent/components/editable-grid-cells.html +2 -0
  342. package/examples/components/reference/parent/components/filter-builder.html +2 -0
  343. package/examples/components/reference/parent/components/form-error-summary.html +2 -0
  344. package/examples/components/reference/parent/components/inline-edit.html +2 -0
  345. package/examples/components/reference/parent/components/kanban-board.html +84 -0
  346. package/examples/components/reference/parent/components/modal.html +2 -0
  347. package/examples/components/reference/parent/components/multi-select-picker.html +5 -0
  348. package/examples/components/reference/parent/components/pagination.html +2 -0
  349. package/examples/components/reference/parent/components/persistent-action-banner.html +4 -0
  350. package/examples/components/reference/parent/components/popconfirm.html +5 -0
  351. package/examples/components/reference/parent/components/popover-menu.html +2 -0
  352. package/examples/components/reference/parent/components/rich-text-toolbar.html +2 -0
  353. package/examples/components/reference/parent/components/save-status-indicator.html +2 -0
  354. package/examples/components/reference/parent/components/selectable-cards.html +2 -0
  355. package/examples/components/reference/parent/components/settings-rows.html +2 -0
  356. package/examples/components/reference/parent/components/sidebar-nav.html +4 -0
  357. package/examples/components/reference/parent/components/small-charts.html +2 -0
  358. package/examples/components/reference/parent/components/split-button.html +5 -0
  359. package/examples/components/reference/parent/components/split-panes.html +8 -0
  360. package/examples/components/reference/parent/components/stat-tiles.html +2 -0
  361. package/examples/components/reference/parent/components/toast-stack.html +5 -0
  362. package/examples/components/reference/parent/components/tree-view.html +4 -0
  363. package/examples/components/reference/parent/components/upload-dropzone.html +6 -0
  364. package/examples/components/reference/parent/components/wizard-shell.html +2 -0
  365. package/examples/components/reference/parent/coverage.json +414 -0
  366. package/examples/components/reference/parent/index.html +1 -0
  367. package/examples/components/reference/parent/kanban.css +114 -0
  368. package/examples/components/reference/parent/kanban.py +55 -0
  369. package/examples/components/reference/parent/refinement.css +53 -0
  370. package/examples/components/reference/selected/build.py +70 -0
  371. package/examples/components/reference/selected/components/activity-feed.html +3 -0
  372. package/examples/components/reference/selected/components/app-toolbar.html +3 -0
  373. package/examples/components/reference/selected/components/avatar-group.html +4 -0
  374. package/examples/components/reference/selected/components/breadcrumbs.html +3 -0
  375. package/examples/components/reference/selected/components/code-block.html +9 -0
  376. package/examples/components/reference/selected/components/column-manager.html +3 -0
  377. package/examples/components/reference/selected/components/combobox.html +6 -0
  378. package/examples/components/reference/selected/components/context-hypercms.html +3 -0
  379. package/examples/components/reference/selected/components/context-quickcrop.html +4 -0
  380. package/examples/components/reference/selected/components/diff-view.html +13 -0
  381. package/examples/components/reference/selected/components/drawer.html +3 -0
  382. package/examples/components/reference/selected/components/editable-grid-cells.html +3 -0
  383. package/examples/components/reference/selected/components/filter-builder.html +3 -0
  384. package/examples/components/reference/selected/components/form-error-summary.html +4 -0
  385. package/examples/components/reference/selected/components/inline-edit.html +3 -0
  386. package/examples/components/reference/selected/components/kanban-board.html +53 -0
  387. package/examples/components/reference/selected/components/modal.html +2 -0
  388. package/examples/components/reference/selected/components/multi-select-picker.html +5 -0
  389. package/examples/components/reference/selected/components/pagination.html +3 -0
  390. package/examples/components/reference/selected/components/persistent-action-banner.html +4 -0
  391. package/examples/components/reference/selected/components/popconfirm.html +5 -0
  392. package/examples/components/reference/selected/components/popover-menu.html +3 -0
  393. package/examples/components/reference/selected/components/rich-text-toolbar.html +3 -0
  394. package/examples/components/reference/selected/components/save-status-indicator.html +2 -0
  395. package/examples/components/reference/selected/components/selectable-cards.html +3 -0
  396. package/examples/components/reference/selected/components/settings-rows.html +3 -0
  397. package/examples/components/reference/selected/components/sidebar-nav.html +4 -0
  398. package/examples/components/reference/selected/components/small-charts.html +5 -0
  399. package/examples/components/reference/selected/components/split-button.html +4 -0
  400. package/examples/components/reference/selected/components/split-panes.html +8 -0
  401. package/examples/components/reference/selected/components/stat-tiles.html +3 -0
  402. package/examples/components/reference/selected/components/toast-stack.html +5 -0
  403. package/examples/components/reference/selected/components/tree-view.html +4 -0
  404. package/examples/components/reference/selected/components/upload-dropzone.html +6 -0
  405. package/examples/components/reference/selected/components/wizard-shell.html +3 -0
  406. package/examples/components/reference/selected/corrections.css +11 -0
  407. package/examples/components/reference/selected/coverage.json +413 -0
  408. package/examples/components/reference/selected/gallery-build.mjs +49 -0
  409. package/examples/components/reference/selected/gallery-spec.json +12 -0
  410. package/examples/components/reference/selected/index.html +1 -0
  411. package/examples/components/reference/selected/kanban-comparison.json +6 -0
  412. package/examples/components/reference/selected/manifest.json +476 -0
  413. package/examples/components/reference/sha256.json +142 -0
  414. package/examples/components/reference/sources/diagonal-close.svg +1 -0
  415. package/examples/components/reference/sources/hyperclay/public-assets/css/hyperclay-app-source.css +614 -0
  416. package/examples/components/reference/sources/hyperclay/public-assets/js/app.js +94 -0
  417. package/examples/components/reference/sources/hyperclayjs/src/ui/theModal.js +897 -0
  418. package/examples/components/reference/sources/hypercms/scripts/build-theme.js +203 -0
  419. package/examples/components/reference/sources/hypercms/src/anchor.js +24 -0
  420. package/examples/components/reference/sources/hypercms/src/apply-loop.js +167 -0
  421. package/examples/components/reference/sources/hypercms/src/diagnostics.js +44 -0
  422. package/examples/components/reference/sources/hypercms/src/enhance.js +173 -0
  423. package/examples/components/reference/sources/hypercms/src/events.js +955 -0
  424. package/examples/components/reference/sources/hypercms/src/form-builder.js +518 -0
  425. package/examples/components/reference/sources/hypercms/src/form-rules.js +208 -0
  426. package/examples/components/reference/sources/hypercms/src/hooks.js +100 -0
  427. package/examples/components/reference/sources/hypercms/src/hypercms-bundle.js +10 -0
  428. package/examples/components/reference/sources/hypercms/src/hypercms.js +347 -0
  429. package/examples/components/reference/sources/hypercms/src/morph.js +10 -0
  430. package/examples/components/reference/sources/hypercms/src/path.js +61 -0
  431. package/examples/components/reference/sources/hypercms/src/place.js +131 -0
  432. package/examples/components/reference/sources/hypercms/src/platform.js +131 -0
  433. package/examples/components/reference/sources/hypercms/src/refresh.js +87 -0
  434. package/examples/components/reference/sources/hypercms/src/richclay-bridge.js +140 -0
  435. package/examples/components/reference/sources/hypercms/src/row-identity.js +111 -0
  436. package/examples/components/reference/sources/hypercms/src/scaffold.js +10 -0
  437. package/examples/components/reference/sources/hypercms/src/session.js +303 -0
  438. package/examples/components/reference/sources/hypercms/src/shell.js +248 -0
  439. package/examples/components/reference/sources/hypercms/src/styles.css +298 -0
  440. package/examples/components/reference/sources/hypercms/src/targets.js +144 -0
  441. package/examples/components/reference/sources/hypercms/src/templates.js +656 -0
  442. package/examples/components/reference/sources/hypercms/src/theme/pixel-quiet.overrides.css +761 -0
  443. package/examples/components/reference/sources/hypercms/src/theme.generated.css +1772 -0
  444. package/examples/components/reference/sources/hypercms/src/toggle.js +666 -0
  445. package/examples/components/reference/sources/hypercms/src/unresolved.js +211 -0
  446. package/examples/components/reference/sources/hypercms/src/vendor/mirk.vendor.js +212 -0
  447. package/examples/components/reference/sources/hypercms/src/views/inline-layer.js +421 -0
  448. package/examples/components/reference/sources/hypercms/src/views/inline.js +1072 -0
  449. package/examples/components/reference/sources/hypercms/src/views/sidebar.js +97 -0
  450. package/examples/components/reference/sources/modal-reference.html +301 -0
  451. package/examples/components/reference/sources/quickcrop/quickcrop.css +124 -0
  452. package/examples/components/reference/sources/quickcrop/quickcrop.js +400 -0
  453. package/examples/components/reference/sources/richclay/richclay.css +416 -0
  454. package/examples/components/reference/sources/richclay/richclay.js +2962 -0
  455. package/examples/components/reference/sources/richclay/src/a11y.js +67 -0
  456. package/examples/components/reference/sources/richclay/src/browser-global.js +7 -0
  457. package/examples/components/reference/sources/richclay/src/buttons.js +254 -0
  458. package/examples/components/reference/sources/richclay/src/hyperclay.js +470 -0
  459. package/examples/components/reference/sources/richclay/src/normalize.js +380 -0
  460. package/examples/components/reference/sources/richclay/src/richclay.js +1356 -0
  461. package/examples/components/reference/sources/richclay/src/sanitize.js +189 -0
  462. package/examples/components/reference/sources/richclay/src/styles.js +23 -0
  463. package/examples/components/reference/sources/richclay/src/toolbar-float.js +175 -0
  464. package/examples/components/reference/sources/richclay/src/toolbar.js +394 -0
  465. package/examples/components/reference/sources/richclay/src/vendor-bundle.js +15 -0
  466. package/examples/components/reference/sources/richclay/vendor/DOMPURIFY-LICENSE +202 -0
  467. package/examples/components/reference/sources/richclay/vendor/DOMPURIFY-LICENSE-MPL +373 -0
  468. package/examples/components/reference/sources/richclay/vendor/SQUIRE-LICENSE +21 -0
  469. package/examples/components/reference/sources/richclay/vendor/purify.es.mjs +2249 -0
  470. package/examples/components/reference/sources/richclay/vendor/purify.min.js +3 -0
  471. package/examples/components/reference/sources/richclay/vendor/squire.js +22 -0
  472. package/examples/components/reference/sources/richclay/vendor/squire.mjs +22 -0
  473. package/examples/components/reference/sources/richclay/vendor/squire.provenance.json +19 -0
  474. package/examples/components/rich-text-toolbar.html +43 -0
  475. package/examples/components/save-status-indicator.html +11 -0
  476. package/examples/components/selectable-cards.html +9 -0
  477. package/examples/components/settings-rows.html +10 -0
  478. package/examples/components/sidebar-nav.html +9 -0
  479. package/examples/components/small-charts.html +21 -0
  480. package/examples/components/split-button.html +13 -0
  481. package/examples/components/split-panes-editor.html +6 -0
  482. package/examples/components/split-panes.html +9 -0
  483. package/examples/components/stat-tiles.html +23 -0
  484. package/examples/components/toast-stack.html +21 -0
  485. package/examples/components/tree-view.html +9 -0
  486. package/examples/components/upload-dropzone.html +88 -0
  487. package/examples/components/wizard-shell.html +50 -0
  488. package/examples/datastar/index.html +38 -0
  489. package/examples/datastar/server.mjs +31 -0
  490. package/examples/fixtures/field-guide.pdf +14 -0
  491. package/examples/fixtures/workspace.jpg +0 -0
  492. package/examples/setup-peers.mjs +35 -0
  493. package/fonts/LICENSE-ibm-plex-mono.txt +93 -0
  494. package/fonts/LICENSE-ibm-plex-sans.txt +93 -0
  495. package/fonts/LICENSE-newsreader.txt +93 -0
  496. package/fonts/ibm-plex-mono-latin-400-normal.woff2 +0 -0
  497. package/fonts/ibm-plex-mono-latin-500-normal.woff2 +0 -0
  498. package/fonts/ibm-plex-mono-latin-600-normal.woff2 +0 -0
  499. package/fonts/ibm-plex-sans-latin-400-italic.woff2 +0 -0
  500. package/fonts/ibm-plex-sans-latin-400-normal.woff2 +0 -0
  501. package/fonts/ibm-plex-sans-latin-500-normal.woff2 +0 -0
  502. package/fonts/ibm-plex-sans-latin-600-normal.woff2 +0 -0
  503. package/fonts/newsreader-latin-opsz-italic.woff2 +0 -0
  504. package/fonts/newsreader-latin-opsz-normal.woff2 +0 -0
  505. package/icons/LICENSE +21 -0
  506. package/icons/house.json +71 -0
  507. package/icons/icons.d.ts +17 -0
  508. package/icons/icons.js +648 -0
  509. package/icons/icons.svg +126 -0
  510. package/icons/marks/build-tray.source.mjs +45 -0
  511. package/icons/marks/hyperclay-local.svg +11 -0
  512. package/icons/phosphor.json +53 -0
  513. package/icons/round.json +8 -0
  514. package/integrations/datastar.js +202 -0
  515. package/integrations/quickcrop.css +26 -0
  516. package/integrations/quickcrop.js +56 -0
  517. package/integrations/richclay.css +100 -0
  518. package/integrations/richclay.js +131 -0
  519. package/package.json +630 -0
  520. package/react/README.md +244 -0
  521. package/src/README.md +83 -0
  522. package/vendor/datastar/datastar-1.0.3.js +10 -0
  523. package/vendor/datastar/provenance.json +6 -0
  524. package/vendor/floating-ui/LICENSE-core +20 -0
  525. package/vendor/floating-ui/LICENSE-dom +20 -0
  526. package/vendor/floating-ui/floating-ui.core.umd.min.js +1 -0
  527. package/vendor/floating-ui/floating-ui.dom.umd.min.js +1 -0
  528. package/vendor/floating-ui/provenance.json +17 -0
  529. package/vendor/richclay/LICENSE +16 -0
  530. package/vendor/richclay/THIRD-PARTY-NOTICES.md +45 -0
  531. package/vendor/richclay/provenance.json +17 -0
  532. package/vendor/richclay/richclay.css +404 -0
  533. package/vendor/richclay/richclay.js +2940 -0
  534. package/vendor/richclay/vendor/DOMPURIFY-LICENSE +202 -0
  535. package/vendor/richclay/vendor/DOMPURIFY-LICENSE-MPL +373 -0
  536. package/vendor/richclay/vendor/SQUIRE-LICENSE +21 -0
  537. package/vendor/richclay/vendor/purify.min.js +3 -0
  538. package/vendor/richclay/vendor/squire.js +22 -0
  539. package/vendor/richclay/vendor/squire.provenance.json +30 -0
package/dist/react/theme.css.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/examples/README.md ADDED
@@ -0,0 +1,34 @@
1
+ # Bevel examples
2
+
3
+ Serve this package directory over HTTP. Core examples load the public Bevel files directly. Peer examples require distributions supplied by the application.
4
+
5
+ From a Bevel source checkout, prepare the declared local development fixtures before serving:
6
+
7
+ ```bash
8
+ npm run examples:peers
9
+ npm run dev
10
+ ```
11
+
12
+ `npm run dev` also runs that preparation automatically. The generated `examples/peers/` directory is ignored by Git and excluded from the npm package. Preparation copies the inspected distribution files and their licenses, verifies fixture hashes when present, and records the resulting hashes. It does not download dependencies.
13
+
14
+ For an installed or extracted Bevel package, supply the Richclay and Quickcrop package directories explicitly:
15
+
16
+ ```bash
17
+ node examples/setup-peers.mjs richclay /path/to/richclay
18
+ node examples/setup-peers.mjs quickcrop /path/to/quickcrop
19
+ ```
20
+
21
+ The supplied Richclay distribution must include its global build, Squire, DOMPurify and their license files. Quickcrop must include its ES module, stylesheet and license. The helper names any missing file rather than substituting a different dependency. The tested local distributions are identified in the repository fixture manifests; those hashes are not a claim about published releases.
22
+
23
+ The inline editor and rich text toolbar load Richclay from `examples/peers/richclay/`. The upload example imports Quickcrop from `examples/peers/quickcrop/`. Applications can use their own asset URLs instead. Bevel's core never loads these peers automatically.
24
+
25
+ The HyperCMS context also needs the CMS browser bundle and Clay's mutation service:
26
+
27
+ ```bash
28
+ node examples/setup-peers.mjs hypercms /path/to/hyper-cms
29
+ node examples/setup-peers.mjs clay-mutation /path/to/clayjs
30
+ ```
31
+
32
+ HyperCMS supplies `dist/hypercms.min.js` and its license. The Clay package supplies `src/lib/mutation.js` and its four transitive modules plus its license. The context imports only that real mutation service, not a saving host or loader. Its scoped stylesheet and template overrides demonstrate Bevel in the actual CMS shell without changing HyperCMS's default theme.
33
+
34
+ The HyperCMS Save changes button downloads HTML containing the edited page and embedded images. Keep that copy beside the original example so its package-relative assets resolve. The Quickcrop context defaults to preparing an encoded image for download. An application can supply `window.bevelQuickcropTransport` to store the cropped File. Neither example claims to overwrite a source file or upload to a remote host without an application transport.
package/examples/components/activity-feed.html ADDED
@@ -0,0 +1,28 @@
1
+ <!doctype html>
2
+ <html data-theme="light" lang="en">
3
+ <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="../../bevel-fonts.css"><link rel="stylesheet" href="../../bevel.css"><title>Activity feed · Bevel</title></head>
4
+ <body>
5
+ <main class="bevel-display-example"><header class="bevel-example__header"><div class="bevel-eyebrow">Northstar Studio / Field notes</div><h1>The work, as it happens.</h1><p>Small changes add up to something good.</p></header>
6
+ <section class="bevel-activity" data-bevel-key="northstar" data-bevel-has-more aria-labelledby="activity-today">
7
+ <h2 class="bevel-activity__day" id="activity-today">Today / September 07</h2>
8
+ <ol class="bevel-activity__list">
9
+ <li class="bevel-activity__item" data-bevel-key="event-mira-1042"><span class="bevel-activity__avatar" data-bevel-person="mira" aria-hidden="true">MC</span><div class="bevel-activity__head"><p><strong>Mira Chen</strong> updated <strong>A place for good work</strong></p><time datetime="2026-09-07T10:42:00">10:42</time></div><p class="bevel-activity__detail">Clarified the introduction and added the field guide.</p></li>
10
+ <li class="bevel-activity__item" data-bevel-key="event-alex-1018"><span class="bevel-activity__avatar" data-bevel-person="alex" aria-hidden="true">AR</span><div class="bevel-activity__head"><p><strong>Alex Rivera</strong> joined <strong>Field notes</strong></p><time datetime="2026-09-07T10:18:00">10:18</time></div><p class="bevel-activity__detail">Invited by Jules Park.</p></li>
11
+ <li class="bevel-activity__item" data-bevel-key="event-sam-0956"><span class="bevel-activity__avatar" aria-hidden="true">SP</span><div class="bevel-activity__head"><p><strong>Sam Patel</strong> added <strong>workspace.jpg</strong></p><time datetime="2026-09-07T09:56:00">09:56</time></div><p class="bevel-activity__detail">Project cover · 184 KB</p></li>
12
+ </ol>
13
+ <div id="activity-older" data-bevel-activity-older hidden>
14
+ <h2 class="bevel-activity__day">Yesterday / September 06</h2>
15
+ <ol class="bevel-activity__list"><li class="bevel-activity__item" data-bevel-key="event-jules-1632"><span class="bevel-activity__avatar" data-bevel-person="jules" aria-hidden="true">JP</span><div class="bevel-activity__head"><p><strong>Jules Park</strong> created <strong>Field notes</strong></p><time datetime="2026-09-06T16:32:00">16:32</time></div></li></ol>
16
+ </div>
17
+ <button class="bevel-button bevel-button--small bevel-activity__more" data-bevel-activity-more type="button" aria-controls="activity-older"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 9 7 7 7-7"/></svg><span class="bevel-button__label">Show yesterday (1)</span></button>
18
+ </section><output id="activity-status" aria-live="polite"></output></main>
19
+
20
+ <script src="../../bevel.js"></script>
21
+ <script>((host, { standalone = true, assetRoot = "../../", ready } = {}) => {
22
+
23
+ const activity=host.querySelector(".bevel-activity"),status=host.querySelector("#activity-status");
24
+ activity.addEventListener("bevel:action",event=>{if(event.detail.action!=="load-more")return;const key="event-priya-1410";if(activity.querySelector(`[data-bevel-key="${key}"]`))return;const group=document.createElement("div");group.dataset.bevelActivityOlder="";group.innerHTML='<h2 class="bevel-activity__day">September 05</h2><ol class="bevel-activity__list"><li class="bevel-activity__item" data-bevel-key="event-priya-1410"><span class="bevel-activity__avatar" aria-hidden="true">PN</span><div class="bevel-activity__head"><p><strong>Priya Nair</strong> reviewed <strong>Field notes</strong></p><time datetime="2026-09-05T14:10:00">14:10</time></div><p class="bevel-activity__detail">Marked the field guide ready.</p></li></ol>';activity.querySelector("[data-bevel-activity-more]").before(group);activity.removeAttribute("data-bevel-has-more");Bevel.refresh(activity);status.textContent="One older activity item loaded.";});
25
+
26
+ })(document.body, {standalone:true,assetRoot:"../../",ready:callback => { if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", callback, {once:true}); else callback(); }});</script>
27
+ </body>
28
+ </html>
package/examples/components/app-shell.html ADDED
@@ -0,0 +1,12 @@
1
+ <!doctype html>
2
+ <html class="light" lang="en">
3
+ <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>App shell · Bevel</title><link rel="stylesheet" href="../../bevel-fonts.css"><link rel="stylesheet" href="../../bevel.css"></head>
4
+ <body>
5
+ <main class="bevel-example bevel-navigation-example"><header class="bevel-example__header"><div class="bevel-eyebrow">Navigation / 18</div><h1>A frame that holds its shape</h1><p>The bar, the tree and the page stay put while the work inside them changes.</p></header><div class="bevel-app-shell" id="shell-demo"><header class="bevel-app-shell__bar"><a class="bevel-app-shell__brand" href="#shell-files"><span class="bevel-app-shell__mark"><svg aria-hidden="true" height="26" width="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"/></svg></span><span class="bevel-app-shell__word">Northstar</span></a><span class="bevel-app-shell__rule" aria-hidden="true"></span><button type="button" class="bevel-app-shell__switcher" id="shell-switcher" aria-haspopup="menu" aria-controls="shell-accounts" aria-expanded="false" data-bevel-open="shell-accounts"><span class="bevel-app-shell__switcher-icon"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"/></svg></span><span class="bevel-app-shell__switcher-label">jules</span><span class="bevel-app-shell__caret"><svg aria-hidden="true" height="12" width="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 9 7 7 7-7"/></svg></span></button><nav class="bevel-seg bevel-seg--links bevel-app-shell__tabs" aria-label="Workspace"><a class="bevel-button" href="#shell-files" aria-current="page"><span class="bevel-button__label">Files</span></a><a class="bevel-button" href="#shell-files"><span class="bevel-button__label">Shared with me</span></a><a class="bevel-button" href="#shell-files"><span class="bevel-button__label">Trash</span></a></nav><span class="bevel-app-shell__spacer"></span><button type="button" class="bevel-icon-button bevel-icon-button--flat bevel-app-shell__nav-toggle" aria-label="Show files tree" aria-controls="shell-tree" aria-expanded="false" data-bevel-shell-nav><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M80,64a8,8,0,0,1,8-8H216a8,8,0,0,1,0,16H88A8,8,0,0,1,80,64Zm136,56H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Zm0,64H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16ZM44,52A12,12,0,1,0,56,64,12,12,0,0,0,44,52Zm0,64a12,12,0,1,0,12,12A12,12,0,0,0,44,116Zm0,64a12,12,0,1,0,12,12A12,12,0,0,0,44,180Z"/></svg></button><button type="button" class="bevel-button bevel-icon-button bevel-app-shell__account" id="shell-account" aria-label="Account menu" aria-haspopup="menu" aria-controls="shell-account-menu" aria-expanded="false" data-bevel-open="shell-account-menu"><span class="bevel-button__label"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"/></svg></span></button><div id="shell-accounts" class="bevel-menu" popover="manual" role="menu" aria-label="Accounts"><div class="bevel-menu__title">Accounts</div><button type="button" role="menuitemradio" aria-checked="true" data-bevel-key="jules" tabindex="0"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"/></svg></span>jules<span class="bevel-menu__state">Current</span></button><button type="button" role="menuitemradio" aria-checked="false" data-bevel-key="northstar" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6 21c1-2.5 3-4 6-4s5 1.5 6 4M8.5 6.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM15.5 6.5a3 3 0 1 0 6 0 3 3 0 0 0-6 0ZM2 16c1-3 3-4.5 5-4.5M22 16c-1-3-3-4.5-5-4.5"/></svg></span>Northstar Studio</button><button type="button" role="menuitemradio" aria-checked="false" data-bevel-key="field-notes" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6 21c1-2.5 3-4 6-4s5 1.5 6 4M8.5 6.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM15.5 6.5a3 3 0 1 0 6 0 3 3 0 0 0-6 0ZM2 16c1-3 3-4.5 5-4.5M22 16c-1-3-3-4.5-5-4.5"/></svg></span>Field Notes</button><hr><button type="button" role="menuitem" data-bevel-key="new-team" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 5v14M5 12h14"/></svg></span>New team…</button><button type="button" role="menuitem" data-bevel-key="deleted-teams" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z"/></svg></span>Deleted teams…</button></div><div id="shell-account-menu" class="bevel-menu" popover="manual" role="menu" aria-label="My account" data-bevel-placement="bottom-end"><div class="bevel-menu__title">Signed in as jules</div><button type="button" role="menuitem" data-bevel-key="username" tabindex="0"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"/></svg></span>Change username…</button><button type="button" role="menuitem" data-bevel-key="sync-key" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M10 12h11v4M17 12v3M3 12a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/></svg></span>Generate sync key…</button><hr><a href="#shell-files" role="menuitem" data-bevel-key="documentation" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M2.5 4.5H9l3 2 3-2h6.5v13H15l-3 2-3-2H2.5ZM12 6.5v13"/></svg></span>Documentation</a><a href="#shell-files" role="menuitem" data-bevel-key="billing" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 5h18v14H3ZM3 9h18M6 15h4"/></svg></span>Manage billing</a><hr><a href="#shell-files" role="menuitem" data-bevel-key="log-out" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L204.69,120H112a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,229.66,122.34Z"/></svg></span>Log out</a></div></header><div class="bevel-app-shell__body"><aside class="bevel-app-shell__side" id="shell-tree" aria-label="Files tree"><div class="bevel-app-shell__side-head"><label class="bevel-sr-only" for="shell-filter">Filter files</label><input class="bevel-input bevel-input--small" id="shell-filter" type="search" placeholder="Filter files"><button type="button" class="bevel-icon-button bevel-icon-button--flat bevel-app-shell__side-toggle" aria-label="Collapse sidebar" title="Collapse sidebar" aria-controls="shell-tree" aria-expanded="true" data-bevel-shell-collapse><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 4h18v16H3ZM9 4v16"/></svg></button></div><div class="bevel-tree bevel-app-shell-example__tree" data-bevel-selected="shell-card-canvas" aria-label="Northstar files"><details data-bevel-key="shell-archive"><summary role="treeitem" data-bevel-key="shell-archive" data-bevel-label="archive"><i class="bevel-tree__caret" aria-hidden="true">›</i><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg>archive</summary><div class="bevel-tree__group" role="group"><div class="bevel-tree__empty">No files yet</div></div></details><details data-bevel-key="shell-core" open><summary role="treeitem" data-bevel-key="shell-core" data-bevel-label="core"><i class="bevel-tree__caret" aria-hidden="true">›</i><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg>core</summary><div class="bevel-tree__group" role="group"><button class="bevel-tree__item" role="treeitem" data-bevel-key="shell-kanban" data-bevel-label="kanban.html" type="button"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg>kanban.html</button><button class="bevel-tree__item" role="treeitem" data-bevel-key="shell-writer" data-bevel-label="writer.html" type="button"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg>writer.html</button></div></details><details data-bevel-key="shell-writing"><summary role="treeitem" data-bevel-key="shell-writing" data-bevel-label="writing"><i class="bevel-tree__caret" aria-hidden="true">›</i><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg>writing</summary><div class="bevel-tree__group" role="group"><div class="bevel-tree__empty">No files yet</div></div></details><button class="bevel-tree__item" role="treeitem" data-bevel-key="shell-card-canvas" data-bevel-label="card-canvas.html" type="button" aria-selected="true"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg>card-canvas.html</button><button class="bevel-tree__item" role="treeitem" data-bevel-key="shell-notes" data-bevel-label="notes.html" type="button"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg>notes.html</button></div></aside><div class="bevel-app-shell__main" id="shell-files"><div class="bevel-app-shell__content"><div class="bevel-app-shell-example__head"><div><p class="bevel-eyebrow bevel-eyebrow--bare">Personal account</p><h2>Files</h2></div><button type="button" class="bevel-button bevel-button--primary bevel-button--small"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 5v14M5 12h14"/></svg><span class="bevel-button__label">New</span></button></div><div class="bevel-app-shell-example__rows"><div class="bevel-document-row"><svg aria-hidden="true" height="20" width="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg><div><strong>core</strong><p>9 items</p></div><button type="button" class="bevel-icon-button bevel-icon-button--flat" aria-label="Actions for core"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></div><div class="bevel-document-row"><svg aria-hidden="true" height="20" width="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg><div><strong>writing</strong><p>12 items</p></div><button type="button" class="bevel-icon-button bevel-icon-button--flat" aria-label="Actions for writing"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></div><div class="bevel-document-row"><svg aria-hidden="true" height="20" width="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg><div><strong>card-canvas.html</strong><p>card-canvas.northstar.site · 2h ago</p></div><button type="button" class="bevel-icon-button bevel-icon-button--flat" aria-label="Share card-canvas.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-icon-button bevel-icon-button--flat" aria-label="Open card-canvas.html in a new tab"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-icon-button bevel-icon-button--flat" aria-label="Actions for card-canvas.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></div><div class="bevel-document-row"><svg aria-hidden="true" height="20" width="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg><div><strong>notes.html</strong><p>notes.northstar.site · Aug 14</p></div><button type="button" class="bevel-icon-button bevel-icon-button--flat" aria-label="Share notes.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-icon-button bevel-icon-button--flat" aria-label="Open notes.html in a new tab"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-icon-button bevel-icon-button--flat" aria-label="Actions for notes.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></div></div></div></div></div></div></main>
6
+
7
+ <script src="../../vendor/floating-ui/floating-ui.core.umd.min.js"></script>
8
+ <script src="../../vendor/floating-ui/floating-ui.dom.umd.min.js"></script>
9
+ <script src="../../bevel.js"></script>
10
+
11
+ </body>
12
+ </html>
package/examples/components/app-toolbar.html ADDED
@@ -0,0 +1,38 @@
1
+ <!doctype html>
2
+ <html data-theme="light" lang="en">
3
+ <head>
4
+ <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
5
+ <title>App toolbar · Bevel</title>
6
+ <link rel="stylesheet" href="../../bevel-fonts.css"><link rel="stylesheet" href="../../bevel.css">
7
+ </head>
8
+ <body>
9
+ <main class="bevel-example bevel-navigation-example">
10
+ <header class="bevel-example__header"><div class="bevel-eyebrow">Northstar Studio / Field notes</div><h1>The tools, close at hand.</h1><p>Field notes / Documents</p></header>
11
+ <div class="bevel-toolbar" aria-label="Document tools">
12
+ <div class="bevel-toolbar__group" aria-label="Create note"><button class="bevel-toolbar__icon" aria-label="New note" title="New note" type="button" data-bevel-action="new-note"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 5v14M5 12h14"/></svg></button></div>
13
+ <span class="bevel-toolbar__separator" aria-hidden="true"></span>
14
+ <div class="bevel-toolbar__group" aria-label="Layout" data-bevel-toggle-group><button class="bevel-toolbar__icon" aria-label="List view" aria-pressed="true" title="List view" type="button" data-bevel-toggle="list"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M80,64a8,8,0,0,1,8-8H216a8,8,0,0,1,0,16H88A8,8,0,0,1,80,64Zm136,56H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Zm0,64H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16ZM44,52A12,12,0,1,0,56,64,12,12,0,0,0,44,52Zm0,64a12,12,0,1,0,12,12A12,12,0,0,0,44,116Zm0,64a12,12,0,1,0,12,12A12,12,0,0,0,44,180Z"/></svg></button><button class="bevel-toolbar__icon" aria-label="Grid view" aria-pressed="false" title="Grid view" type="button" data-bevel-toggle="grid"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"/></svg></button></div>
15
+ <span class="bevel-toolbar__separator" aria-hidden="true"></span>
16
+ <div class="bevel-toolbar__group" aria-label="Filter notes"><button class="bevel-toolbar__icon" aria-label="Filter notes" aria-pressed="false" title="Filter notes" type="button" data-bevel-toggle="filter"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 5h18l-7 8v6l-4 2v-8Z"/></svg></button></div>
17
+ <span class="bevel-toolbar__spacer"></span>
18
+ <label class="bevel-toolbar__search"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"/></svg><span class="bevel-sr-only">Search notes</span><input class="bevel-input bevel-input--small" aria-label="Search notes" placeholder="Search notes" type="search"><kbd>/</kbd></label>
19
+ <button class="bevel-toolbar__icon bevel-toolbar__more" aria-controls="toolbar-more" aria-expanded="false" aria-label="More actions" title="More actions" type="button" data-bevel-open="toolbar-more"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button>
20
+ <div class="bevel-menu bevel-toolbar__menu" id="toolbar-more" role="menu" popover="manual"><button role="menuitem" tabindex="0" type="button" data-bevel-action="sort" data-bevel-key="last-edited"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M4 6h16M7 12h10M10 18h4"/></svg></span>Sort by last edited</button><button role="menuitem" tabindex="-1" type="button" data-bevel-action="archive"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,48H32A16,16,0,0,0,16,64V88a16,16,0,0,0,16,16v88a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V104a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48ZM208,192H48V104H208ZM224,88H32V64H224V88ZM96,136a8,8,0,0,1,8-8h48a8,8,0,0,1,0,16H104A8,8,0,0,1,96,136Z"/></svg></span>Show archived</button><button role="menuitem" tabindex="-1" type="button" data-bevel-action="export"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 3v12m-4-8 4-4 4 4M5 14v6h14v-6"/></svg></span>Export selection</button></div>
21
+ </div>
22
+ <section class="bevel-toolbar-example__list" aria-label="Documents"><div class="bevel-toolbar-example__summary"><strong>All documents</strong><span>12 NOTES</span></div><article class="bevel-toolbar-example__row"><span class="bevel-toolbar-example__file"><svg aria-hidden="true" height="18" width="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg></span><div><strong>A place for good work</strong><br><small>Mira Chen · Edited today</small></div></article><article class="bevel-toolbar-example__row"><span class="bevel-toolbar-example__file"><svg aria-hidden="true" height="18" width="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg></span><div><strong>The field guide</strong><br><small>Sam Patel · Edited yesterday</small></div></article></section>
23
+ <output class="bevel-local-result" aria-live="polite"></output>
24
+ </main>
25
+ <script src="../../vendor/floating-ui/floating-ui.core.umd.min.js"></script>
26
+ <script src="../../vendor/floating-ui/floating-ui.dom.umd.min.js"></script>
27
+ <script src="../../bevel.js"></script>
28
+ <script>((host, { standalone = true, assetRoot = "../../", ready } = {}) => {
29
+
30
+ const toolbar = host.querySelector(".bevel-toolbar");
31
+ const result = host.querySelector(".bevel-local-result");
32
+ toolbar.addEventListener("bevel:action", event => { result.textContent = `${event.detail.action} requested.`; });
33
+ toolbar.addEventListener("bevel:change", event => { result.textContent = `${event.detail.key} is ${event.detail.next}.`; });
34
+ toolbar.querySelector("input[type=search]").addEventListener("input", event => { const query = event.target.value.toLowerCase(); for (const row of host.querySelectorAll(".bevel-toolbar-example__row")) row.hidden = !row.textContent.toLowerCase().includes(query); });
35
+
36
+ })(document.body, {standalone:true,assetRoot:"../../",ready:callback => { if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", callback, {once:true}); else callback(); }});</script>
37
+ </body>
38
+ </html>
package/examples/components/avatar-group.html ADDED
@@ -0,0 +1,27 @@
1
+ <!doctype html>
2
+ <html data-theme="light" lang="en">
3
+ <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="../../bevel-fonts.css"><link rel="stylesheet" href="../../bevel.css"><title>Avatar group · Bevel</title></head>
4
+ <body>
5
+ <main class="bevel-display-example"><header class="bevel-example__header"><div class="bevel-eyebrow">People / 26</div><h1>A human detail</h1><p>Recognizable at a glance, useful at a small size.</p></header>
6
+ <section class="bevel-avatars" aria-labelledby="avatar-heading"><div class="bevel-chart__header"><div><h2 id="avatar-heading">Working together</h2><p>7 people in Northstar Studio</p></div><span class="bevel-badge">Shared</span></div>
7
+ <div class="bevel-avatars__stack" aria-label="Northstar Studio members">
8
+ <span class="bevel-avatars__person" aria-hidden="true"><img class="bevel-avatars__image" src="../fixtures/workspace.jpg" alt=""><span class="bevel-avatars__avatar bevel-avatars__fallback" hidden>NS</span></span>
9
+ <span class="bevel-avatars__person" aria-hidden="true"><span class="bevel-avatars__avatar" data-bevel-person="mira">MC</span><i class="bevel-avatars__status"></i></span>
10
+ <span class="bevel-avatars__person" aria-hidden="true"><img class="bevel-avatars__image" src="../fixtures/missing-avatar.jpg" alt=""><span class="bevel-avatars__avatar bevel-avatars__fallback" data-bevel-person="alex" hidden>AR</span></span>
11
+ <span class="bevel-avatars__person" aria-hidden="true"><span class="bevel-avatars__avatar">SP</span></span>
12
+ <button class="bevel-avatars__overflow" data-bevel-open="avatar-members" type="button" aria-controls="avatar-members" aria-expanded="false" aria-label="Show three more members">+3</button>
13
+ </div>
14
+ <ul class="bevel-avatars__directory">
15
+ <li class="bevel-avatars__member" data-bevel-key="mira-chen"><span class="bevel-avatars__avatar" data-bevel-person="mira" aria-hidden="true">MC</span><div><strong>Mira Chen</strong><p><i class="bevel-avatars__presence-dot" aria-hidden="true"></i>Online now · Designer</p></div></li>
16
+ <li class="bevel-avatars__member" data-bevel-key="alex-rivera-1"><span class="bevel-avatars__avatar" data-bevel-person="alex" aria-hidden="true">AR</span><div><strong>Alex Rivera</strong><p>Developer</p></div></li>
17
+ <li class="bevel-avatars__member" data-bevel-key="sam-patel"><span class="bevel-avatars__avatar" aria-hidden="true">SP</span><div><strong>Sam Patel</strong><p>Editor</p></div></li>
18
+ <li class="bevel-avatars__member" data-bevel-key="overflow-summary"><span class="bevel-avatars__overflow" aria-hidden="true">+3</span><div><strong>Jules Park, Priya Nair and Tomas Berg</strong><p>Owner, Researcher, Producer</p></div></li>
19
+ </ul>
20
+ <div class="bevel-menu bevel-avatars__members" id="avatar-members" popover="manual" role="dialog" aria-labelledby="avatar-members-title"><h3 id="avatar-members-title">More members</h3><ul class="bevel-avatars__directory"><li class="bevel-avatars__member" data-bevel-key="jules-park"><span class="bevel-avatars__avatar" aria-hidden="true">JP</span><div><strong>Jules Park</strong><p>Owner</p></div></li><li class="bevel-avatars__member" data-bevel-key="priya-nair"><span class="bevel-avatars__avatar" aria-hidden="true">PN</span><div><strong>Priya Nair</strong><p>Researcher</p></div></li><li class="bevel-avatars__member" data-bevel-key="alex-rivera-2"><span class="bevel-avatars__avatar" data-bevel-person="alex" aria-hidden="true">AR</span><div><strong>Alex Rivera</strong><p>Producer</p></div></li></ul><button class="bevel-button bevel-button--small" data-bevel-close type="button">Close</button></div>
21
+ </section></main>
22
+ <script src="../../vendor/floating-ui/floating-ui.core.umd.min.js"></script>
23
+ <script src="../../vendor/floating-ui/floating-ui.dom.umd.min.js"></script>
24
+ <script src="../../bevel.js"></script>
25
+
26
+ </body>
27
+ </html>
package/examples/components/breadcrumbs.html ADDED
@@ -0,0 +1,26 @@
1
+ <!doctype html>
2
+ <html data-theme="light" lang="en">
3
+ <head>
4
+ <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
5
+ <title>Breadcrumbs · Bevel</title>
6
+ <link rel="stylesheet" href="../../bevel-fonts.css"><link rel="stylesheet" href="../../bevel.css">
7
+ </head>
8
+ <body>
9
+ <main class="bevel-example bevel-navigation-example">
10
+ <nav class="bevel-breadcrumbs" aria-label="Breadcrumb"><ol>
11
+ <li><a href="#level-0">Northstar Studio</a><span aria-hidden="true"><svg height="12" width="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span></li>
12
+ <li><details class="bevel-breadcrumbs__overflow"><summary aria-label="Show full path">…</summary><span class="bevel-breadcrumbs__overflow-links"><a href="#level-1">Projects</a><a href="#level-2">Field notes</a><a href="#level-3">Documents</a></span></details></li>
13
+ <li class="bevel-breadcrumbs__middle"><a href="#level-1">Projects</a><span aria-hidden="true"><svg height="12" width="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span></li>
14
+ <li class="bevel-breadcrumbs__middle"><a href="#level-2">Field notes</a><span aria-hidden="true"><svg height="12" width="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span></li>
15
+ <li class="bevel-breadcrumbs__middle"><a href="#level-3">Documents</a><span aria-hidden="true"><svg height="12" width="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span></li>
16
+ <li><a href="#level-4">The field guide</a><span aria-hidden="true"><svg height="12" width="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span></li>
17
+ <li aria-current="page">A place for good work</li>
18
+ </ol></nav>
19
+ <article class="bevel-breadcrumb-example__article"><div class="bevel-eyebrow bevel-eyebrow--bare">Field note / 001</div><h1>A place for<br>good work.</h1><p>Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p></article>
20
+ <footer class="bevel-breadcrumb-example__byline"><span class="bevel-breadcrumb-example__avatar" aria-label="Mira Chen">MC</span><small>Mira Chen · Updated at 10:42</small></footer>
21
+ <div hidden><span id="level-0">Northstar Studio</span><span id="level-1">Projects</span><span id="level-2">Field notes</span><span id="level-3">Documents</span><span id="level-4">The field guide</span></div>
22
+ </main>
23
+ <script src="../../bevel.js"></script>
24
+
25
+ </body>
26
+ </html>
package/examples/components/bulk-bar.html ADDED
@@ -0,0 +1,22 @@
1
+ <!doctype html>
2
+ <html data-theme="light" lang="en">
3
+ <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="../../bevel-fonts.css"><link rel="stylesheet" href="../../bevel.css"><title>Bulk bar · Bevel</title></head>
4
+ <body>
5
+ <main class="bevel-anchor-example"><header class="bevel-anchor-example__header"><div class="bevel-overlay__eyebrow">Selection / 34</div><h1>Act on what you picked</h1><p>The bar arrives with the first pick, counts the selection and leaves when it clears.</p></header><div class="bevel-bulk-bar-example"><ul class="bevel-bulk-bar-example__list" aria-label="Files"><li><label class="bevel-checkbox"><input class="bevel-sr-only" type="checkbox" value="card-canvas.html"><span class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">card-canvas.html</span></label></li><li><label class="bevel-checkbox"><input class="bevel-sr-only" type="checkbox" value="early-access.html"><span class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">early-access.html</span></label></li><li><label class="bevel-checkbox"><input class="bevel-sr-only" type="checkbox" value="hi.html" checked><span class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">hi.html</span></label></li><li><label class="bevel-checkbox"><input class="bevel-sr-only" type="checkbox" value="notes.html" checked><span class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">notes.html</span></label></li></ul><div class="bevel-bulk-bar bevel-bulk-bar--floating" role="toolbar" aria-label="Bulk actions"><span class="bevel-bulk-bar__count">2 selected</span><span class="bevel-bulk-bar__rule" role="separator" aria-orientation="vertical"></span><button class="bevel-bulk-bar__action" data-bevel-action="move" type="button"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3ZM7 13.5h10m-3-3 3 3-3 3"/></svg>Move to folder</button><button class="bevel-bulk-bar__action bevel-bulk-bar__action--danger" data-bevel-action="delete" type="button"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 256 256" fill="currentColor"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"/></svg>Delete</button><span class="bevel-bulk-bar__rule" role="separator" aria-orientation="vertical"></span><button class="bevel-bulk-bar__clear" data-bevel-action="clear" type="button" aria-label="Clear selection"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></div><span id="bulk-bar-announce" class="bevel-sr-only" aria-live="polite"></span></div><output aria-live="polite"></output></main>
6
+ <script src="../../bevel.js"></script>
7
+ <script>((host, { standalone = true, assetRoot = "../../", ready } = {}) => {
8
+
9
+ const list = host.querySelector(".bevel-bulk-bar-example__list"), bar = host.querySelector(".bevel-bulk-bar"), count = bar.querySelector(".bevel-bulk-bar__count"), announce = host.querySelector("#bulk-bar-announce"), output = host.querySelector(".bevel-bulk-bar-example ~ output");
10
+ const picks = () => [...list.querySelectorAll("input:checked")];
11
+ const sync = () => { const size = picks().length; count.textContent = `${size} selected`; announce.textContent = size ? count.textContent : ""; bar.hidden = size === 0; };
12
+ list.addEventListener("change", sync);
13
+ bar.addEventListener("bevel:action", event => {
14
+ if (event.detail.action !== "clear") { output.textContent = `Application action: ${event.detail.action} ${picks().map(pick => pick.value).join(", ")}.`; return; }
15
+ for (const pick of picks()) { pick.checked = false; pick.dispatchEvent(new Event("change", { bubbles: true })); }
16
+ list.querySelector("input").focus();
17
+ output.textContent = "Selection cleared.";
18
+ });
19
+
20
+ })(document.body, {standalone:true,assetRoot:"../../",ready:callback => { if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", callback, {once:true}); else callback(); }});</script>
21
+ </body>
22
+ </html>
package/examples/components/code-block.html ADDED
@@ -0,0 +1,12 @@
1
+ <!doctype html>
2
+ <html lang="en" class="light">
3
+ <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Code block · Bevel</title><link rel="stylesheet" href="../../bevel-fonts.css"><link rel="stylesheet" href="../../bevel.css"></head>
4
+ <body>
5
+ <main class="bevel-example bevel-reference-example"><header class="bevel-example__header"><div class="bevel-eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Small code. Clear intent.</h1><p>A readable home for the details.</p></header><section class="bevel-code" aria-label="field-note.html"><header class="bevel-code__header"><span class="bevel-code__name"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg>field-note.html</span><span class="bevel-code__language">HTML</span><span class="bevel-code__meta">4 lines</span><span class="bevel-code__spacer"></span><button data-bevel-code-wrap aria-pressed="false" class="bevel-button bevel-button--small" type="button"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M19 3v12H5m5-5-5 5 5 5"/></svg><span class="bevel-button__label">Wrap</span></button><button data-bevel-copy class="bevel-button bevel-button--small" type="button"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z"/></svg><span class="bevel-button__label">Copy</span></button></header><pre tabindex="0" aria-label="Source code"><code><span class="bevel-code__line" data-line="1"><span class="bevel-code__tag">&lt;article</span> <span class="bevel-code__attribute">class</span>=<span class="bevel-code__string">"field-note"</span><span class="bevel-code__tag">&gt;</span></span>
6
+ <span class="bevel-code__line" data-line="2"> <span class="bevel-code__tag">&lt;h1&gt;</span>A place for good work<span class="bevel-code__tag">&lt;/h1&gt;</span></span>
7
+ <span class="bevel-code__line" data-line="3"> <span class="bevel-code__tag">&lt;p</span> <span class="bevel-code__attribute">data-description</span>=<span class="bevel-code__string">"Documents, decisions and the small details that make a project feel like home"</span><span class="bevel-code__tag">&gt;</span>Keep the useful things close.<span class="bevel-code__tag">&lt;/p&gt;</span></span>
8
+ <span class="bevel-code__line" data-line="4"><span class="bevel-code__tag">&lt;/article&gt;</span></span></code></pre></section><p class="bevel-reference-note">Copy takes the whole file. Wrap keeps long attribute lines in view.</p></main>
9
+ <script src="../../bevel.js"></script>
10
+
11
+ </body>
12
+ </html>
package/examples/components/code-editor.html ADDED
@@ -0,0 +1,25 @@
1
+ <!doctype html>
2
+ <html data-theme="light" lang="en">
3
+ <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="../../bevel-fonts.css"><link rel="stylesheet" href="../../bevel.css"><title>Code editor · Bevel</title></head>
4
+ <body>
5
+ <main class="bevel-example bevel-code-editor-example">
6
+ <header class="bevel-example__header"><div class="bevel-eyebrow">Files / landing.html</div><h1>The file, open where it lives.</h1><p>The chrome around a mounted editor: the file tab, the tool row, the surface and the status strip. Below 640px the tool row stands down and the bar that rides above the software keyboard takes over.</p></header>
7
+ <div class="bevel-code-editor">
8
+ <div class="bevel-code-editor__tab"><span class="bevel-code-editor__name">landing.html</span><i class="bevel-code-editor__dot" title="Unsaved changes"></i><span class="bevel-code-editor__spacer"></span><span class="bevel-code-editor__host">landing.hyperclay.com</span></div>
9
+ <div class="bevel-code-editor__toolbar" role="toolbar" aria-label="Editor actions"><button class="bevel-code-editor__tool" type="button" aria-label="Undo"><span aria-hidden="true">&#8630;</span></button><button class="bevel-code-editor__tool" type="button" aria-label="Redo"><span aria-hidden="true">&#8631;</span></button><button class="bevel-code-editor__tool" type="button" aria-pressed="false">Find</button><button class="bevel-code-editor__tool" type="button" aria-label="Outdent"><span aria-hidden="true">&#8676;</span></button><button class="bevel-code-editor__tool" type="button" aria-label="Indent"><span aria-hidden="true">&#8677;</span></button><button class="bevel-code-editor__tool" type="button" aria-pressed="true">Wrap</button><span class="bevel-code-editor__spacer"></span><button class="bevel-button bevel-button--primary bevel-button--small" type="button"><span class="bevel-button__label">Save</span></button></div>
10
+ <div class="bevel-code-editor__surface"><pre class="bevel-code-editor__sample" aria-label="Source preview"><code><span class="bevel-code-editor__line" data-line="1"><span class="bevel-code-editor__comment">&lt;!-- the first thing a visitor reads --&gt;</span></span>
11
+ <span class="bevel-code-editor__line" data-line="2"><span class="bevel-code-editor__punct">&lt;</span><span class="bevel-code-editor__tag">header</span> <span class="bevel-code-editor__attr">class</span><span class="bevel-code-editor__punct">=</span><span class="bevel-code-editor__string">"hero"</span> <span class="bevel-code-editor__attr">data-count</span><span class="bevel-code-editor__punct">=</span><span class="bevel-code-editor__string">"3"</span><span class="bevel-code-editor__punct">&gt;</span></span>
12
+ <span class="bevel-code-editor__line" data-line="3" style="padding-inline-start: calc(46px + 4ch); text-indent: -4ch;"> <span class="bevel-code-editor__punct">&lt;</span><span class="bevel-code-editor__tag">p</span><span class="bevel-code-editor__punct">&gt;</span>Everything lives in one file, and the file stays yours the day you stop paying anyone for it.<span class="bevel-code-editor__punct">&lt;/</span><span class="bevel-code-editor__tag">p</span><span class="bevel-code-editor__punct">&gt;</span></span>
13
+ <span class="bevel-code-editor__line" data-line="4"><span class="bevel-code-editor__punct">&lt;/</span><span class="bevel-code-editor__invalid">headr</span><span class="bevel-code-editor__punct">&gt;</span></span>
14
+ <span class="bevel-code-editor__line" data-line="5"><span class="bevel-code-editor__punct">&lt;</span><span class="bevel-code-editor__tag">style</span><span class="bevel-code-editor__punct">&gt;</span></span>
15
+ <span class="bevel-code-editor__line" data-line="6"> <span class="bevel-code-editor__punct">.</span><span class="bevel-code-editor__tag">hero</span> <span class="bevel-code-editor__punct">{</span> <span class="bevel-code-editor__attr">padding</span><span class="bevel-code-editor__punct">:</span> <span class="bevel-code-editor__number">48px</span> <span class="bevel-code-editor__number">0</span><span class="bevel-code-editor__punct">;</span> <span class="bevel-code-editor__punct">}</span></span>
16
+ <span class="bevel-code-editor__line" data-line="7"><span class="bevel-code-editor__punct">&lt;/</span><span class="bevel-code-editor__tag">style</span><span class="bevel-code-editor__punct">&gt;</span></span></code></pre></div>
17
+ <div class="bevel-code-editor__status"><span class="bevel-code-editor__meta">Saved <b>2h ago</b> by panphora</span><span class="bevel-code-editor__spacer"></span><span class="bevel-code-editor__meta">182.6 KB</span><span class="bevel-code-editor__meta">2,625 lines</span></div>
18
+ </div>
19
+ <div class="bevel-code-editor__bar" role="toolbar" aria-label="Editor actions on a narrow screen"><div class="bevel-code-editor__bar-tools"><button class="bevel-code-editor__tool" type="button" aria-label="Undo"><span aria-hidden="true">&#8630;</span></button><button class="bevel-code-editor__tool" type="button" aria-label="Redo"><span aria-hidden="true">&#8631;</span></button><button class="bevel-code-editor__tool" type="button" aria-pressed="false">Find</button><button class="bevel-code-editor__tool" type="button" aria-label="Outdent"><span aria-hidden="true">&#8676;</span></button><button class="bevel-code-editor__tool" type="button" aria-label="Indent"><span aria-hidden="true">&#8677;</span></button><button class="bevel-code-editor__tool" type="button" aria-pressed="true">Wrap</button><button class="bevel-code-editor__tool" type="button">Fold</button><button class="bevel-code-editor__tool" type="button">Sug</button></div><i class="bevel-code-editor__dot" title="Unsaved changes"></i><button class="bevel-button bevel-button--primary bevel-button--small" type="button"><span class="bevel-button__label">Save</span></button></div>
20
+ </main>
21
+
22
+ <script src="../../bevel.js"></script>
23
+
24
+ </body>
25
+ </html>
package/examples/components/column-manager.html ADDED
@@ -0,0 +1,9 @@
1
+ <!doctype html>
2
+ <html data-theme="light" lang="en">
3
+ <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="../../bevel-fonts.css"><link rel="stylesheet" href="../../bevel.css"><title>Column manager · Bevel</title></head>
4
+ <body>
5
+ <main class="bevel-grid-example"><header class="bevel-grid-example__header"><div class="bevel-overlay__eyebrow">Northstar Studio / Field notes</div><h1>Make the table yours.</h1><p>Visibility and order, without losing your place.</p></header><div class="bevel-columns-panel"><div class="bevel-columns__heading"><h2>Your view of the records.</h2><p class="">Choose visible columns. Use arrows to reorder.</p></div><div class="bevel-columns" data-bevel-grid="columns-grid"><div class="bevel-columns__item" data-bevel-column="invoice" data-bevel-column-required><span aria-hidden="true" class="bevel-columns__grip"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 256 256" fill="currentColor"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"/></svg></span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-bevel-column-visible="" disabled="" type="checkbox" value="Invoice"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Invoice</span></label><span class="bevel-columns__badge">Pinned</span><button aria-label="Move Invoice up" class="bevel-columns__button" data-bevel-column-move="up" disabled="" type="button"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 15 7-7 7 7"/></svg></button><button aria-label="Move Invoice down" class="bevel-columns__button" data-bevel-column-move="down" disabled="" type="button"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 9 7 7 7-7"/></svg></button></div><div class="bevel-columns__item" data-bevel-column="client"><span aria-hidden="true" class="bevel-columns__grip"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 256 256" fill="currentColor"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"/></svg></span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-bevel-column-visible="" type="checkbox" value="Client"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Client</span></label><span class="bevel-columns__position" data-bevel-column-position>2</span><button aria-label="Move Client up" class="bevel-columns__button" data-bevel-column-move="up" disabled="" type="button"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 15 7-7 7 7"/></svg></button><button aria-label="Move Client down" class="bevel-columns__button" data-bevel-column-move="down" type="button"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 9 7 7 7-7"/></svg></button></div><div class="bevel-columns__item" data-bevel-column="amount"><span aria-hidden="true" class="bevel-columns__grip"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 256 256" fill="currentColor"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"/></svg></span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-bevel-column-visible="" type="checkbox" value="Amount"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Amount</span></label><span class="bevel-columns__position" data-bevel-column-position>3</span><button aria-label="Move Amount up" class="bevel-columns__button" data-bevel-column-move="up" type="button"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 15 7-7 7 7"/></svg></button><button aria-label="Move Amount down" class="bevel-columns__button" data-bevel-column-move="down" type="button"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 9 7 7 7-7"/></svg></button></div><div class="bevel-columns__item" data-bevel-column="status"><span aria-hidden="true" class="bevel-columns__grip"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 256 256" fill="currentColor"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"/></svg></span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-bevel-column-visible="" type="checkbox" value="Status"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Status</span></label><span class="bevel-columns__position" data-bevel-column-position>4</span><button aria-label="Move Status up" class="bevel-columns__button" data-bevel-column-move="up" type="button"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 15 7-7 7 7"/></svg></button><button aria-label="Move Status down" class="bevel-columns__button" data-bevel-column-move="down" type="button"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 9 7 7 7-7"/></svg></button></div><div class="bevel-columns__item" data-bevel-column="owner"><span aria-hidden="true" class="bevel-columns__grip"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 256 256" fill="currentColor"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"/></svg></span><label class="bevel-checkbox bevel-checkbox--small"><input class="bevel-sr-only" data-bevel-column-visible="" type="checkbox" value="Owner"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Owner</span></label><span class="bevel-columns__position" data-bevel-column-position>5</span><button aria-label="Move Owner up" class="bevel-columns__button" data-bevel-column-move="up" type="button"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 15 7-7 7 7"/></svg></button><button aria-label="Move Owner down" class="bevel-columns__button" data-bevel-column-move="down" disabled="" type="button"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 9 7 7 7-7"/></svg></button></div></div><div class="bevel-columns__footer"><svg aria-hidden="true" height="13" width="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="square" stroke-linejoin="miter"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"/></svg><small>Invoice stays pinned as the record identifier.</small><span class="bevel-columns__spacer"></span><small class="bevel-columns__summary" data-bevel-column-summary>4 of 5 shown</small></div></div><div class="bevel-grid bevel-grid-preview" id="columns-grid"><table class="bevel-grid__table"><colgroup><col><col><col><col><col></colgroup><thead><tr><th data-bevel-column="invoice" data-bevel-pinned>Invoice</th><th data-bevel-column="client" data-bevel-width="180">Client<button class="bevel-grid__resize" role="separator" aria-label="Resize Client" aria-orientation="vertical" aria-valuemin="80" aria-valuemax="800" aria-valuenow="180"></button></th><th data-bevel-column="amount" data-bevel-width="130">Amount<button class="bevel-grid__resize" role="separator" aria-label="Resize Amount" aria-orientation="vertical" aria-valuemin="80" aria-valuemax="800" aria-valuenow="130"></button></th><th data-bevel-column="status">Status</th><th data-bevel-column="owner" hidden>Owner</th></tr></thead><tbody><tr class="bevel-grid__row" data-bevel-key="0432"><td data-bevel-column="invoice">INV-0432</td><td data-bevel-column="client">Northstar Studio</td><td data-bevel-column="amount">$3,200.00</td><td data-bevel-column="status">Overdue</td><td data-bevel-column="owner">Mira Chen</td></tr></tbody></table></div></main>
6
+ <script src="../../bevel.js"></script>
7
+
8
+ </body>
9
+ </html>
package/examples/components/combobox.html ADDED
@@ -0,0 +1,13 @@
1
+ <!doctype html>
2
+ <html data-theme="light" lang="en">
3
+ <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="../../bevel-fonts.css"><link rel="stylesheet" href="../../bevel.css"><title>Combobox · Bevel</title></head>
4
+ <body>
5
+ <main class="bevel-anchor-example"><header class="bevel-anchor-example__header"><div class="bevel-overlay__eyebrow">Choose / 05</div><h1>The right person</h1><p>Find a teammate by name.</p></header><form id="owner-form"><section class="bevel-combobox" id="owner-combo" data-bevel-value="mira"><label class="bevel-picker__label" for="owner-search">Project owner</label><div class="bevel-combobox__control"><svg aria-hidden="true" height="18" width="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"/></svg><input id="owner-search" role="combobox" aria-autocomplete="list" aria-controls="owner-options" aria-expanded="false" autocomplete="off" placeholder="Search people…" required value="Mira Chen"><button type="button" class="bevel-icon-button bevel-combobox__toggle" data-bevel-open="owner-options" aria-controls="owner-options" aria-expanded="false" aria-label="Open owner choices"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 9 7 7 7-7"/></svg></button></div><input type="hidden" name="owner" value="mira"><div id="owner-options" class="bevel-combobox__listbox" popover="manual" role="listbox" aria-label="Project members"><button type="button" id="owner-mira" class="bevel-combobox__option" role="option" data-bevel-key="mira" data-bevel-label="Mira Chen"><span class="bevel-picker__avatar">MC</span><span class="bevel-picker__person"><strong>Mira Chen</strong><small>Designer</small></span><svg aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 12 4 4L19 6"/></svg></button><button type="button" id="owner-alex" class="bevel-combobox__option" role="option" data-bevel-key="alex" data-bevel-label="Alex Rivera"><span class="bevel-picker__avatar bevel-picker__avatar--teal">AR</span><span class="bevel-picker__person"><strong>Alex Rivera</strong><small>Developer</small></span><svg aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 12 4 4L19 6"/></svg></button><button type="button" id="owner-sam" class="bevel-combobox__option" role="option" data-bevel-key="sam" data-bevel-label="Sam Patel"><span class="bevel-picker__avatar">SP</span><span class="bevel-picker__person"><strong>Sam Patel</strong><small>Editor</small></span><svg aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 12 4 4L19 6"/></svg></button><button type="button" id="owner-jules" class="bevel-combobox__option" role="option" data-bevel-key="jules" data-bevel-label="Jules Park"><span class="bevel-picker__avatar bevel-picker__avatar--ink">JP</span><span class="bevel-picker__person"><strong>Jules Park</strong><small>Owner</small></span><svg aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 12 4 4L19 6"/></svg></button><div class="bevel-combobox__empty" role="status" hidden><strong>No one by that name.</strong><p>No member matches your search. Check the spelling or invite them.</p></div><div class="bevel-picker__foot bevel-picker__foot--panel">4 members in Northstar Studio · ↑↓ to move, ↵ to choose</div></div><div class="bevel-picker__foot">4 members in Northstar Studio · ↑↓ to move, ↵ to choose</div></section><section class="bevel-combobox" id="reviewer-combo"><label class="bevel-picker__label" for="reviewer-search">Reviewer, optional</label><div class="bevel-combobox__control"><input id="reviewer-search" role="combobox" aria-autocomplete="list" aria-controls="reviewer-options" aria-expanded="false" autocomplete="off"><button type="button" class="bevel-icon-button" data-bevel-combo-clear aria-label="Clear reviewer"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></div><input type="hidden" name="reviewer" value=""><div id="reviewer-options" class="bevel-combobox__listbox" popover="manual" role="listbox"><button type="button" class="bevel-combobox__option" role="option" data-bevel-key="jules" data-bevel-label="Jules Park">Jules Park</button><button type="button" class="bevel-combobox__option" role="option" data-bevel-key="alex-reviewer" data-bevel-label="Alex Rivera">Alex Rivera</button><button type="button" id="reviewer-jules-guest" class="bevel-combobox__option" role="option" data-bevel-key="jules-guest" data-bevel-label="Jules Park">Jules Park · Guest</button><button type="button" id="reviewer-disabled" class="bevel-combobox__option" role="option" data-bevel-key="taylor" data-bevel-label="Taylor Reed" aria-disabled="true">Taylor Reed · unavailable</button><div class="bevel-combobox__empty" role="status" hidden>No one by that name.</div></div></section><output id="combo-values" aria-live="polite"></output></form><details hidden><summary>Nested combo example</summary><button class="bevel-button" type="button" data-bevel-open="combo-modal">Choose inside modal</button></details><dialog id="combo-modal" class="bevel-modal" aria-labelledby="combo-modal-title"><div class="bevel-modal__inner"><header class="bevel-modal__header"><h2 id="combo-modal-title">Assign in context</h2></header><div class="bevel-modal__body"><section class="bevel-combobox" id="modal-combo"><label class="bevel-picker__label" for="modal-combo-search">Approver</label><div class="bevel-combobox__control"><input id="modal-combo-search" role="combobox" aria-controls="modal-combo-options" aria-expanded="false"><button type="button" data-bevel-open="modal-combo-options" aria-controls="modal-combo-options" aria-expanded="false">⌄</button></div><input type="hidden" name="approver" value=""><div id="modal-combo-options" class="bevel-combobox__listbox" popover="manual" role="listbox"><button type="button" role="option" class="bevel-combobox__option" data-bevel-key="jo" data-bevel-label="Jo Bell">Jo Bell</button></div></section></div><footer class="bevel-modal__footer"><button class="bevel-button" type="button" data-bevel-close>Done</button></footer></div></dialog></main>
6
+ <script src="../../vendor/floating-ui/floating-ui.core.umd.min.js"></script>
7
+ <script src="../../vendor/floating-ui/floating-ui.dom.umd.min.js"></script>
8
+ <script src="../../bevel.js"></script>
9
+ <script>((host, { standalone = true, assetRoot = "../../", ready } = {}) => {
10
+ host.querySelector("#owner-form").addEventListener("submit",event=>{event.preventDefault();host.querySelector("#combo-values").textContent=JSON.stringify(Object.fromEntries(new FormData(event.currentTarget)))})
11
+ })(document.body, {standalone:true,assetRoot:"../../",ready:callback => { if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", callback, {once:true}); else callback(); }});</script>
12
+ </body>
13
+ </html>
package/examples/components/context-hypercms.css ADDED
@@ -0,0 +1,41 @@
1
+ body#hypercms-example.hcms-open, body#hypercms-example { margin: 0; padding: 0; overflow: auto; color: var(--bevel-ink); background: var(--bevel-ground); font-family: var(--bevel-font-sans); }
2
+ .bevel-context-hypercms { display: grid; grid-template-columns: minmax(0, 1fr) 360px; max-width: 1100px; min-height: 720px; margin: 0 auto; }
3
+ .cms-preview { padding: 36px 28px; background: var(--bevel-sunk); min-width: 0; }
4
+ .cms-preview h1 { font: 400 40px/1.05 var(--bevel-font-serif); max-width: 240px; margin: 24px 0 0; }
5
+ .cms-preview > img { width: 100%; height: 130px; object-fit: cover; margin: 22px 0; border: 1px solid var(--bevel-line-2); }
6
+ .cms-preview p { color: var(--bevel-ink-2); font-size: 14.5px; line-height: 1.6; }
7
+ .cms-preview a { color: var(--bevel-ink); font-size: 13px; }
8
+ .page-contributors { border-top: 1px solid var(--bevel-line-2); margin: 24px 0; padding-top: 14px; font: 11px var(--bevel-font-mono); }
9
+ .page-contributor + .page-contributor { margin-top: 8px; }
10
+ #inspector-mount { min-width: 0; }
11
+ #inspector-mount .hcms-shell { position: relative; inset: auto; width: 100%; height: 720px; max-height: none; box-sizing: border-box; border: 0; border-left: 2px solid var(--bevel-ink); background: var(--bevel-surface); color: var(--bevel-ink); box-shadow: none; font-family: var(--bevel-font-sans); overflow: auto; }
12
+ #inspector-mount .hcms-shell-body { padding: 22px; height: 100%; box-sizing: border-box; }
13
+ #inspector-mount .hcms-shell-minibar { display: none; }
14
+ #inspector-mount .hcms-shell-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 24px; padding: 0; border: 0; }
15
+ #inspector-mount .hcms-shell-title { font: 400 27px/1.1 var(--bevel-font-serif); color: var(--bevel-ink); margin: 7px 0 0; }
16
+ #inspector-mount .hcms-shell-eyebrow { color: var(--bevel-brass); font: 500 10px var(--bevel-font-mono); letter-spacing: .14em; }
17
+ #inspector-mount .hcms-shell-close { background: none; border: 0; box-shadow: none; color: var(--bevel-ink); padding: 8px; min-width: 32px; min-height: 32px; cursor: pointer; }
18
+ #inspector-mount .hcms-shell-close svg { display: block; width: 15px; height: 15px; }
19
+ #inspector-mount .hcms-form > .hcms-object { border: 0; padding: 0; }
20
+ #inspector-mount .hcms-form > .hcms-object > .hcms-object-title { display: none; }
21
+ #inspector-mount .hcms-form, #inspector-mount .hcms-object-fields { display: grid; gap: 14px; padding: 0; }
22
+ #inspector-mount .hcms-field { display: grid; gap: 5px; min-width: 0; }
23
+ #inspector-mount .hcms-label { text-transform: none; letter-spacing: normal; color: var(--bevel-ink-2); font: 400 11.5px var(--bevel-font-sans); }
24
+ #inspector-mount .bevel-textarea { width: 100%; min-height: 34px; field-sizing: content; font: 13px/1.4 var(--bevel-font-sans); padding: 7px 9px; resize: vertical; box-sizing: border-box; }
25
+ #inspector-mount .hcms-object { border-top: 1px solid var(--bevel-line-2); margin: 0; padding-top: 13px; }
26
+ #inspector-mount .hcms-object-title, #inspector-mount .hcms-array-title { font: 10.5px var(--bevel-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bevel-muted); margin: 0 0 10px; }
27
+ #inspector-mount .hcms-object .hcms-object .hcms-object-fields { border-left: 1px solid var(--bevel-line-2); padding-left: 14px; }
28
+ #inspector-mount .hcms-array { display: grid; gap: 10px; }
29
+ #inspector-mount .hcms-array > button { justify-self: start; }
30
+ #inspector-mount .hcms-card { display: grid; gap: 10px; background: var(--bevel-sunk); border: 1px solid var(--bevel-line-2); padding: 12px; margin: 0 0 8px; }
31
+ #inspector-mount .hcms-card-controls { display: flex; justify-content: flex-end; gap: 6px; position: static; }
32
+ #inspector-mount .cms-move { color: var(--bevel-ink); background: none; border: 1px solid var(--bevel-line-2); padding: 3px 8px; cursor: pointer; }
33
+ #inspector-mount .cms-image { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
34
+ #inspector-mount .cms-image img { width: 88px; height: 60px; object-fit: cover; border: 1px solid var(--bevel-line-2); }
35
+ #inspector-mount .cms-image img:not([src]), #inspector-mount .cms-image img[src=""] { display: none; }
36
+ #inspector-mount .hcms-shell-footer { display: block; border: 0; margin: 20px 0 0; padding: 0 0 18px; }
37
+ #inspector-mount .hcms-shell-error { background: transparent; border: 0; border-left: 2px solid var(--bevel-ox); color: var(--bevel-ox); padding: 10px 14px; margin-bottom: 16px; font: 13px/1.4 var(--bevel-font-sans); }
38
+ #inspector-mount .hcms-error { color: var(--bevel-ox); font: 12px var(--bevel-font-sans); }
39
+ #inspector-mount .cms-export-note { font: 11px/1.5 var(--bevel-font-sans); color: var(--bevel-muted); margin-top: 10px; }
40
+ #inspector-mount :focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: 3px; }
41
+ @media (max-width: 520px) { .bevel-context-hypercms { grid-template-columns: minmax(0, 1fr); } .cms-preview { padding: 24px; } body.hcms-open .cms-preview { display: none; } #inspector-mount .hcms-shell { border-left: 0; height: 100dvh; } }
package/examples/components/context-hypercms.html ADDED
@@ -0,0 +1,40 @@
1
+ <!doctype html>
2
+ <html lang="en" data-theme="light">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <title>HyperCMS inspector · Bevel</title>
7
+ <link rel="stylesheet" href="../../bevel-fonts.css">
8
+ <link rel="stylesheet" href="../../bevel.css">
9
+ <link rel="stylesheet" href="context-hypercms.css">
10
+ </head>
11
+ <body id="hypercms-example" data-bevel-example="context-hypercms">
12
+ <main class="bevel-context-hypercms">
13
+ <article class="cms-preview" id="page-content">
14
+ <div class="bevel-overlay__eyebrow">LIVE PAGE / FIELD NOTES</div>
15
+ <h1 class="page-title">A place for good work.</h1>
16
+ <img class="page-cover" alt="A laptop and notebook on a sunlit desk" src="../fixtures/workspace.jpg">
17
+ <p class="page-introduction">Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p>
18
+ <a class="page-guide" href="../fixtures/field-guide.pdf">Read the field guide</a>
19
+ <div class="page-contributors"><div class="page-contributor"><span class="contributor-name">Mira Chen</span></div></div>
20
+ <button type="button" class="bevel-button bevel-button--small" id="open-inspector"><span class="bevel-button__label">Edit page content</span></button>
21
+ </article>
22
+ <div id="inspector-mount"></div>
23
+ </main>
24
+ <template data-hcms-tpl="@scalar">
25
+ <label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label></span><textarea class="bevel-textarea" rows="1" data-hcms-field></textarea><span class="hcms-error" hidden></span></label>
26
+ </template>
27
+ <template data-hcms-tpl="@image">
28
+ <div class="hcms-field hcms-upload" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label></span><div class="cms-image"><img data-hcms-field alt="Cover preview"><label class="bevel-button bevel-button--small"><input type="file" accept="image/*" class="bevel-sr-only" data-hcms-upload><span class="bevel-button__label">Choose image</span></label><button type="button" class="bevel-button bevel-button--small" data-hcms-action="clear-upload" aria-label="Remove image"><span class="bevel-button__label">Remove</span></button></div><div class="hcms-error" hidden></div></div>
29
+ </template>
30
+ <template data-hcms-tpl="@object-array">
31
+ <section class="hcms-array" data-hcms-shape="object-array"><header class="hcms-array-header"><h3 class="hcms-array-title" data-hcms-label></h3></header><div class="hcms-array-items"></div><div class="hcms-error" hidden></div><button type="button" class="bevel-button bevel-button--small" data-hcms-action="add"><span class="bevel-button__label">+ Add contributor</span></button></section>
32
+ </template>
33
+ <template data-hcms-tpl="@object-array-item">
34
+ <article class="hcms-card" draggable="true"><div class="hcms-card-fields"></div><div class="hcms-card-controls"><button type="button" class="bevel-button bevel-button--small" data-hcms-action="remove" aria-label="Remove contributor"><span class="bevel-button__label">Remove</span></button><button type="button" class="cms-move" data-hcms-action="move-up" aria-label="Move contributor up">↑</button><button type="button" class="cms-move" data-hcms-action="move-down" aria-label="Move contributor down">↓</button></div><div class="hcms-error" hidden></div></article>
35
+ </template>
36
+ <script src="../../bevel.js"></script>
37
+ <script src="../peers/hypercms/dist/hypercms.min.js"></script>
38
+ <script type="module" src="context-hypercms.js"></script>
39
+ </body>
40
+ </html>