@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/examples/components/context-hypercms.js ADDED
@@ -0,0 +1,62 @@
1
+ import '../peers/clay-mutation/src/lib/mutation.js';
2
+
3
+ const page = document.querySelector('#page-content');
4
+ const mount = document.querySelector('#inspector-mount');
5
+ const rules = {
6
+ pageTitle: '.page-title',
7
+ introduction: '.page-introduction',
8
+ fieldGuideLink: { label: '.page-guide', destination: '.page-guide@href' },
9
+ contributors: ['.page-contributor', { name: '.contributor-name' }],
10
+ coverImage: '.page-cover@src'
11
+ };
12
+ const cms = window.hypercms.cms;
13
+ const closeIcon = '<svg aria-hidden="true" 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>';
14
+
15
+ function clearChrome(root) {
16
+ root.querySelectorAll('[data-hcms-shell], [data-hcms-overlay], [data-hcms-bundled-styles], #hcms-shell-styles').forEach(node => node.remove());
17
+ const body = root.querySelector('body');
18
+ body?.classList.remove('hcms-open', 'hcms-overlay', 'hcms-side-left', 'hcms-session-open');
19
+ }
20
+ function serialize() {
21
+ const clone = document.documentElement.cloneNode(true);
22
+ Bevel.prepareForSave(clone);
23
+ clearChrome(clone);
24
+ return `<!doctype html>${clone.outerHTML}`;
25
+ }
26
+ function valid() {
27
+ const field = mount.querySelector('[data-hcms-path="pageTitle"] textarea');
28
+ const validTitle = Boolean(field?.value.trim());
29
+ field?.setAttribute('aria-invalid', String(!validTitle));
30
+ field?.setCustomValidity(validTitle ? '' : 'A title is required.');
31
+ const error = mount.querySelector('.hcms-shell-error');
32
+ if (error) { error.textContent = validTitle ? '' : 'Give the page a title before saving.'; error.hidden = validTitle; }
33
+ return validTitle;
34
+ }
35
+ function open() {
36
+ if (cms.isOpen) return;
37
+ cms.open({ pageRoot: page, mountTo: mount, rules, title: 'Page content', eyebrow: 'HYPERCMS / INSPECTOR', showSaveButton: true, richText: false, confirmRemove: false, theme: document.documentElement.dataset.theme || 'light' });
38
+ for (const button of mount.querySelectorAll('[data-hcms-action="close"]')) {
39
+ button.className = 'hcms-shell-close'; button.innerHTML = closeIcon; button.setAttribute('aria-label', 'Close inspector');
40
+ }
41
+ const save = mount.querySelector('[trigger-save]');
42
+ save.className = 'bevel-button'; save.innerHTML = '<span class="bevel-button__label">Save changes</span>';
43
+ const note = document.createElement('p'); note.className = 'cms-export-note'; note.textContent = 'Downloads an HTML copy. Keep it beside this example to reopen with its local assets.';
44
+ save.after(note);
45
+ const field = mount.querySelector('[data-hcms-path="pageTitle"] textarea');
46
+ if (field) field.required = true;
47
+ }
48
+ mount.querySelectorAll('[data-hcms-shell]').forEach(node => node.remove());
49
+ document.body.classList.remove('hcms-open', 'hcms-overlay', 'hcms-side-left', 'hcms-session-open');
50
+ document.querySelector('#open-inspector').addEventListener('click', open);
51
+ document.addEventListener('click', event => {
52
+ if (!event.target.closest('#inspector-mount [trigger-save]')) return;
53
+ event.preventDefault();
54
+ if (!valid()) { mount.querySelector('[aria-invalid="true"]')?.focus(); return; }
55
+ const url = URL.createObjectURL(new Blob([serialize()], { type: 'text/html' }));
56
+ const link = document.createElement('a'); link.href = url; link.download = 'field-notes.html'; link.click();
57
+ setTimeout(() => URL.revokeObjectURL(url), 1000);
58
+ mount.querySelector('.cms-export-note').textContent = 'HTML copy downloaded. Keep it beside this example to reopen with its local assets.';
59
+ });
60
+ document.addEventListener('hcms:change', () => { if (mount.querySelector('[aria-invalid="true"]')) valid(); });
61
+ window.bevelCmsExample = { serialize, open };
62
+ open();
package/examples/components/context-quickcrop.html ADDED
@@ -0,0 +1,137 @@
1
+ <!doctype html>
2
+ <html data-theme="light" lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <title>Quickcrop upload and crop · Bevel</title>
7
+ <link rel="stylesheet" href="../../bevel-fonts.css">
8
+ <link rel="stylesheet" href="../../bevel.css">
9
+ <link rel="stylesheet" href="../../integrations/quickcrop.css">
10
+ <link rel="stylesheet" href="../peers/quickcrop/quickcrop.css">
11
+ </head>
12
+ <body data-bevel-example="context-quickcrop">
13
+ <main class="bevel-anchor-example bevel-quickcrop-context">
14
+ <header class="bevel-anchor-example__header">
15
+ <div class="bevel-overlay__eyebrow">Theme in context</div>
16
+ <h1>Finish the image before it lands</h1>
17
+ <p>Quickcrop’s stage inside the Hyperclay modal family.</p>
18
+ </header>
19
+ <section class="bevel-dropzone" data-bevel-max-bytes="10485760" data-bevel-download aria-labelledby="quickcrop-upload-title">
20
+ <div class="bevel-dropzone__target">
21
+ <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.5 18H6a4 4 0 0 1 0-8c0-3.5 2.5-6 6-6s6 2.5 6 6a4 4 0 0 1 0 8h-2.5M12 21v-9m-3 3 3-3 3 3"/></svg>
22
+ <h2 class="bevel-dropzone__title" id="quickcrop-upload-title">Drop an image here</h2>
23
+ <p class="bevel-dropzone__hint">Images up to 10 MB · crop before upload</p>
24
+ <label class="bevel-button bevel-button--small"><input class="bevel-sr-only" type="file" accept="image/*"><span class="bevel-button__label">Choose an image</span></label>
25
+ </div>
26
+ <div class="bevel-upload" data-bevel-upload-list></div>
27
+ <p class="bevel-dropzone__transport">This example prepares a local download. Applications can replace that operation with their own storage transport.</p>
28
+ </section>
29
+ </main>
30
+ <script src="../../bevel.js"></script>
31
+ <script src="../../integrations/quickcrop.js"></script>
32
+ <script type="module">
33
+ import quickcrop from "../peers/quickcrop/quickcrop.js";
34
+
35
+ const root = document.querySelector(".bevel-dropzone");
36
+ const files = new Map();
37
+
38
+ const labelCropDialog = (file, aspect) => {
39
+ let frames = 0;
40
+ const label = () => {
41
+ const dialog = document.querySelector("dialog.bevel-quickcrop");
42
+ if (!dialog) {
43
+ if (frames++ < 120) requestAnimationFrame(label);
44
+ return;
45
+ }
46
+ dialog.querySelector(".bevel-modal__heading").textContent = "Find the useful part.";
47
+ dialog.querySelector(".bevel-modal__description").textContent = `Image / ${file.name}`;
48
+ const badge = document.createElement("span");
49
+ badge.className = "bevel-quickcrop__badge";
50
+ badge.textContent = aspect === 1 ? "1:1 crop" : "Free crop";
51
+ dialog.querySelector(".bevel-modal__header").append(badge);
52
+ };
53
+ requestAnimationFrame(label);
54
+ };
55
+
56
+ const upload = async (key, file) => {
57
+ if (!file) return false;
58
+ if (window.bevelQuickcropTransport) return window.bevelQuickcropTransport({ root, key, file });
59
+ const url = await new Promise((resolve, reject) => {
60
+ const reader = new FileReader();
61
+ reader.addEventListener("load", () => resolve(reader.result), { once: true });
62
+ reader.addEventListener("error", () => reject(reader.error), { once: true });
63
+ reader.readAsDataURL(file);
64
+ });
65
+ const row = root.querySelector(`[data-bevel-file-key="${CSS.escape(key)}"]`);
66
+ if (!row || !Bevel.upload.update(root, key, { status: "uploaded", url, name: file.name })) return false;
67
+ row.querySelector(".bevel-upload__status").textContent = "Ready to download";
68
+ row.querySelector(".bevel-upload__link").textContent = "Download image";
69
+ return true;
70
+ };
71
+
72
+ const crop = async (key, trigger) => {
73
+ const original = files.get(key);
74
+ if (!original) return;
75
+ let aspect = 1;
76
+ while (root.querySelector(`[data-bevel-file-key="${CSS.escape(key)}"]`)) {
77
+ let preset = null;
78
+ const pending = Bevel.crop(original, {
79
+ quickcrop,
80
+ aspect,
81
+ trigger,
82
+ presets: [
83
+ { label: "Square", value: "square" },
84
+ { label: "Free", value: "free" },
85
+ { label: "Reset preview", value: "reset" }
86
+ ],
87
+ onPreset(value) { preset = value; }
88
+ });
89
+ labelCropDialog(original, aspect);
90
+ const result = await pending;
91
+ if (preset) {
92
+ if (preset === "square") aspect = 1;
93
+ if (preset === "free") aspect = null;
94
+ continue;
95
+ }
96
+ if (!result) return;
97
+ const cropped = new File([result.blob], original.name, { type: result.blob.type, lastModified: Date.now() });
98
+ files.set(key, cropped);
99
+ const row = root.querySelector(`[data-bevel-file-key="${CSS.escape(key)}"]`);
100
+ row?.querySelector(".bevel-upload__meta")?.replaceChildren(`${result.width} × ${result.height} pixels after crop`);
101
+ await upload(key, cropped);
102
+ return;
103
+ }
104
+ };
105
+
106
+ root.addEventListener("bevel:files", event => {
107
+ for (const { key, file } of event.detail.files) {
108
+ files.set(key, file);
109
+ const row = root.querySelector(`[data-bevel-file-key="${CSS.escape(key)}"]`);
110
+ const actions = row.querySelector(".bevel-upload__actions");
111
+ const useOriginal = document.createElement("button");
112
+ useOriginal.type = "button";
113
+ useOriginal.className = "bevel-button bevel-button--small";
114
+ useOriginal.dataset.bevelTransient = "upload-file-action";
115
+ useOriginal.dataset.bevelUploadSelectAction = "";
116
+ useOriginal.textContent = "Use original";
117
+ useOriginal.addEventListener("click", () => upload(key, files.get(key)));
118
+ const edit = document.createElement("button");
119
+ edit.type = "button";
120
+ edit.className = "bevel-button bevel-button--small bevel-button--primary";
121
+ edit.dataset.bevelTransient = "upload-file-action";
122
+ edit.dataset.bevelUploadSelectAction = "";
123
+ edit.textContent = "Crop image";
124
+ edit.addEventListener("click", () => crop(key, edit));
125
+ actions.prepend(edit, useOriginal);
126
+ }
127
+ });
128
+
129
+ root.addEventListener("bevel:action", event => {
130
+ if (event.detail.action === "retry") upload(event.detail.key, files.get(event.detail.key));
131
+ if (event.detail.action === "remove") files.delete(event.detail.key);
132
+ });
133
+
134
+ window.quickcropContext = { root, files, crop, upload };
135
+ </script>
136
+ </body>
137
+ </html>
package/examples/components/diff-view.html ADDED
@@ -0,0 +1,9 @@
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>Diff view · 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><div class="bevel-eyebrow">Reference / 23</div><h1>See what changed</h1><p>The before and after stay close enough to compare.</p></div></header><section class="bevel-diff" aria-label="Changes to field-note.html" data-bevel-layout="unified" data-bevel-filename="field-note.html @ 1,4" data-bevel-hunk="@@ 1,4 → 1,4 @@"><header class="bevel-diff__header"><span class="bevel-diff__group"><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><div class="bevel-diff__group"><span class="bevel-diff__count" data-bevel-kind="add">+2</span><span class="bevel-diff__count" data-bevel-kind="remove">−2</span><div aria-label="Layout" class="bevel-diff__controls" role="group"><button data-bevel-layout="unified" aria-pressed="true" class="bevel-button" type="button"><span class="bevel-button__label">Unified</span></button><button data-bevel-layout="split" aria-pressed="false" class="bevel-button" type="button"><span class="bevel-button__label">Split</span></button></div></div></header><template data-bevel-diff-records><div data-bevel-kind="same" data-bevel-key="line-1" data-bevel-old="1" data-bevel-new="1" ><code>&lt;article class="field-note"&gt;</code></div><div data-bevel-kind="remove" data-bevel-key="line-2" data-bevel-old="2" ><code>&lt;h1&gt;A place for <mark>ideas</mark>&lt;/h1&gt;</code></div><div data-bevel-kind="add" data-bevel-key="line-3" data-bevel-new="2" ><code>&lt;h1&gt;A place for <mark>good work</mark>&lt;/h1&gt;</code></div><div data-bevel-kind="remove" data-bevel-key="line-4" data-bevel-old="3" ><code>&lt;p&gt;Keep <mark>everything</mark> close.&lt;/p&gt;</code></div><div data-bevel-kind="add" data-bevel-key="line-5" data-bevel-new="3" ><code>&lt;p&gt;Keep <mark>the useful things</mark> close.&lt;/p&gt;</code></div><div data-bevel-kind="same" data-bevel-key="line-6" data-bevel-old="4" data-bevel-new="4" ><code>&lt;/article&gt;</code></div></template><footer>Updated by Mira Chen · today at 10:42</footer></section></main>
6
+ <script src="../../bevel.js"></script>
7
+
8
+ </body>
9
+ </html>
package/examples/components/drawer.html ADDED
@@ -0,0 +1,11 @@
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>Drawer · Bevel</title></head>
4
+ <body class="bevel-example-page">
5
+ <main class="bevel-drawer-context"><div class="bevel-overlay__eyebrow">Workspace</div><h1 class="bevel-drawer-context__title">Invoices</h1><p class="bevel-drawer-context__note">4 records · Northstar Studio</p><div class="bevel-drawer-context__list"><div class="bevel-drawer-context__row"><span class="bevel-overlay__mono">INV-0431</span><span>Juniper Health</span></div><div class="bevel-drawer-context__row" data-current><span class="bevel-overlay__mono">INV-0432</span><span>Northstar Studio</span></div><div class="bevel-drawer-context__row"><span class="bevel-overlay__mono">INV-0433</span><span>Maple House</span></div><div class="bevel-drawer-context__row"><span class="bevel-overlay__mono">INV-0434</span><span>Juniper Health</span></div></div><div class="bevel-example__actions"><button type="button" class="bevel-button" data-bevel-open="drawer-detail" aria-controls="drawer-detail" aria-expanded="false"><span class="bevel-button__label">Open invoice</span></button><button type="button" class="bevel-button" data-bevel-open="drawer-long" aria-controls="drawer-long" aria-expanded="false"><span class="bevel-button__label">Open long invoice</span></button></div></main><dialog class="bevel-drawer" id="drawer-detail" aria-labelledby="drawer-detail-title"><div class="bevel-drawer__inner"><header class="bevel-drawer__header"><button type="button" class="bevel-overlay__close" data-bevel-close aria-label="Close details"><svg aria-hidden="true" focusable="false" 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 class="bevel-overlay__eyebrow">INVOICE / 0432</div><h2 id="drawer-detail-title" class="bevel-drawer__heading">Northstar Studio</h2><div class="bevel-drawer__amount"><span class="bevel-overlay__mono">$3,200.00</span><span class="bevel-overlay__badge bevel-overlay__badge--bad">Overdue</span></div></header><div class="bevel-drawer__body"><dl class="bevel-drawer__details"><dt>Client</dt><dd>Northstar Studio</dd><dt>Issued</dt><dd class="bevel-overlay__mono">Aug 24, 2026</dd><dt>Due</dt><dd class="bevel-overlay__mono bevel-overlay__bad">Sep 01, 2026</dd><dt>Owner</dt><dd>Mira Chen</dd></dl><section class="bevel-drawer__section"><div class="bevel-overlay__eyebrow">LINE ITEMS</div><div class="bevel-drawer__row"><span>Design direction <small>× 1</small></span><span class="bevel-overlay__mono">$2,400</span></div><div class="bevel-drawer__row"><span>Editorial review <small>× 2</small></span><span class="bevel-overlay__mono">$800</span></div></section></div><footer class="bevel-drawer__footer"><small>Updated at 10:42</small><button type="button" class="bevel-button bevel-button--primary" data-bevel-action="mark-paid"><span class="bevel-button__label">Mark as paid</span></button></footer></div></dialog><dialog class="bevel-drawer" id="drawer-long" aria-labelledby="drawer-long-title"><div class="bevel-drawer__inner"><header class="bevel-drawer__header"><button type="button" class="bevel-overlay__close" data-bevel-close aria-label="Close details"><svg aria-hidden="true" focusable="false" 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 class="bevel-overlay__eyebrow">INVOICE / 0432</div><h2 id="drawer-long-title" class="bevel-drawer__heading">Northstar Studio</h2><div class="bevel-drawer__amount"><span class="bevel-overlay__mono">$3,200.00</span><span class="bevel-overlay__badge bevel-overlay__badge--bad">Overdue</span></div></header><div class="bevel-drawer__body"><dl class="bevel-drawer__details"><dt>Client</dt><dd>Northstar Studio</dd><dt>Issued</dt><dd class="bevel-overlay__mono">Aug 24, 2026</dd><dt>Due</dt><dd class="bevel-overlay__mono bevel-overlay__bad">Sep 01, 2026</dd><dt>Owner</dt><dd>Mira Chen</dd></dl><section class="bevel-drawer__section"><div class="bevel-overlay__eyebrow">LINE ITEMS</div><div class="bevel-drawer__row"><span>Design direction <small>× 1</small></span><span class="bevel-overlay__mono">$2,400</span></div><div class="bevel-drawer__row"><span>Editorial review <small>× 2</small></span><span class="bevel-overlay__mono">$800</span></div></section><section class="bevel-drawer__section"><div class="bevel-overlay__eyebrow">Activity</div><div class="bevel-drawer__row"><span class="bevel-overlay__mono">01</span><div>Payment reminder prepared<br><small>Sep 07, 2026 · Mira Chen</small></div></div><div class="bevel-drawer__row"><span class="bevel-overlay__mono">02</span><div>Due date reached<br><small>Sep 06, 2026 · Mira Chen</small></div></div><div class="bevel-drawer__row"><span class="bevel-overlay__mono">03</span><div>Invoice viewed by client<br><small>Sep 05, 2026 · Mira Chen</small></div></div><div class="bevel-drawer__row"><span class="bevel-overlay__mono">04</span><div>Invoice sent<br><small>Sep 04, 2026 · Mira Chen</small></div></div><div class="bevel-drawer__row"><span class="bevel-overlay__mono">05</span><div>Draft approved<br><small>Sep 03, 2026 · Mira Chen</small></div></div><div class="bevel-drawer__row"><span class="bevel-overlay__mono">06</span><div>Line items updated<br><small>Sep 02, 2026 · Mira Chen</small></div></div></section></div><footer class="bevel-drawer__footer"><small>Updated at 10:42</small><button type="button" class="bevel-button bevel-button--primary" data-bevel-action="mark-paid"><span class="bevel-button__label">Mark as paid</span></button></footer></div></dialog>
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
+
10
+ </body>
11
+ </html>
package/examples/components/editable-grid-cells.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>Editable grid cells · 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>The detail, right in the row.</h1><p>Invoices / Amount</p></header><div class="bevel-grid bevel-grid-edit-example" id="editable-grid" tabindex="-1"><table class="bevel-grid__table"><thead><tr><th data-bevel-column="invoice">Invoice</th><th data-bevel-column="client">Client</th><th data-bevel-column="amount" style="text-align:right">Amount</th><th data-bevel-column="status">Status</th></tr></thead><tbody><tr class="bevel-grid__row" data-bevel-key="0431"><td data-bevel-column="invoice">INV-0431</td><td data-bevel-column="client">Juniper Health</td><td class="bevel-grid__cell" data-bevel-column="amount" data-bevel-edit="number" data-bevel-format="currency" data-value="1240"><button type="button" data-bevel-cell-edit><span class="bevel-grid__cell-value">$1,240.00</span><svg aria-hidden="true" width="12" height="12" 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></button><small class="bevel-grid__cell-error" role="alert" hidden>Enter a number, like 3200</small></td><td data-bevel-column="status"><span class="bevel-badge bevel-badge--for" data-bevel-tone="good">Paid</span></td></tr><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 class="bevel-grid__cell" data-bevel-column="amount" data-bevel-edit="number" data-bevel-format="currency" data-value="3200"><button type="button" data-bevel-cell-edit><span class="bevel-grid__cell-value">$3,200.00</span><svg aria-hidden="true" width="12" height="12" 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></button><small class="bevel-grid__cell-error" role="alert" hidden>Enter a number, like 3200</small></td><td data-bevel-column="status"><span class="bevel-badge bevel-badge--alert" data-bevel-tone="bad">Overdue</span></td></tr><tr class="bevel-grid__row" data-bevel-key="0433"><td data-bevel-column="invoice">INV-0433</td><td data-bevel-column="client">Maple House</td><td class="bevel-grid__cell" data-bevel-column="amount" data-bevel-edit="number" data-bevel-format="currency" data-value="860"><button type="button" data-bevel-cell-edit><span class="bevel-grid__cell-value">$860.00</span><svg aria-hidden="true" width="12" height="12" 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></button><small class="bevel-grid__cell-error" role="alert" hidden>Enter a number, like 3200</small></td><td data-bevel-column="status"><span class="bevel-badge" data-bevel-tone="neutral">Sent</span></td></tr><tr class="bevel-grid__row" data-bevel-key="0434"><td data-bevel-column="invoice">INV-0434</td><td data-bevel-column="client">Juniper Health</td><td class="bevel-grid__cell" data-bevel-column="amount" data-bevel-edit="number" data-bevel-format="currency" data-value="410"><button type="button" data-bevel-cell-edit><span class="bevel-grid__cell-value">$410.00</span><svg aria-hidden="true" width="12" height="12" 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></button><small class="bevel-grid__cell-error" role="alert" hidden>Enter a number, like 3200</small></td><td data-bevel-column="status"><span class="bevel-badge" data-bevel-tone="neutral">Due soon</span></td></tr></tbody></table></div><p class="bevel-grid-edit-note"><svg aria-hidden="true" width="12" height="12" 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>Amounts can be edited in place. Choose a value to change it.</p><template><span class="bevel-grid__cell-editor"><input class="bevel-grid__cell-input"><button class="bevel-grid__cell-action" type="button" data-bevel-cell-action="save" aria-label="Save cell">Save</button><button class="bevel-grid__cell-action" type="button" data-bevel-cell-action="cancel" aria-label="Cancel cell">Cancel</button></span></template></main>
6
+ <script src="../../bevel.js"></script>
7
+
8
+ </body>
9
+ </html>