@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/modal.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>Modal · Bevel</title></head>
4
+ <body class="bevel-example-page">
5
+ <main class="bevel-example"><header class="bevel-example__header"><div class="bevel-overlay__eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Modal</h1><p>Open each real native dialog to inspect its selected state.</p></header><div class="bevel-example__actions"><button type="button" class="bevel-button" data-bevel-open="modal-form" aria-controls="modal-form" aria-expanded="false"><span class="bevel-button__label">Create project</span></button><button type="button" class="bevel-button" data-bevel-open="modal-prompt" aria-controls="modal-prompt" aria-expanded="false"><span class="bevel-button__label">Name field note</span></button><button type="button" class="bevel-button" data-bevel-open="modal-confirm" aria-controls="modal-confirm" aria-expanded="false"><span class="bevel-button__label">Archive project</span></button><button type="button" class="bevel-button" data-bevel-open="modal-overlay" aria-controls="modal-overlay" aria-expanded="false">Overlay demo</button><button type="button" class="bevel-button" data-bevel-open="modal-long" aria-controls="modal-long" aria-expanded="false"><span class="bevel-button__label">Read workspace guide</span></button></div></main><dialog class="bevel-modal" id="modal-form" aria-labelledby="modal-form-title" aria-describedby="modal-form-description" ><div class="bevel-modal__inner"><header class="bevel-modal__header"><button type="button" class="bevel-overlay__close" data-bevel-close aria-label="Close"><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">FIELD NOTES / A NEW BEGINNING</div><h2 id="modal-form-title" class="bevel-modal__heading">Make room for an idea.</h2><p id="modal-form-description" class="bevel-modal__description">Give your project a name and a place to begin. You can change these details later.</p></header><div class="bevel-modal__body"><form id="modal-project-form" method="dialog" class="bevel-overlay__stack"><label class="bevel-overlay__field">Project name<input class="bevel-input" name="project" value="Field notes" required autofocus></label><label class="bevel-overlay__field">Workspace<span class="bevel-select"><select class="bevel-select__field" name="workspace"><option>Northstar Studio</option><option>Personal workspace</option></select></span></label></form></div><footer class="bevel-modal__footer"><button type="button" class="bevel-button" data-bevel-close><span class="bevel-button__label">Cancel</span></button><button type="submit" class="bevel-button bevel-button--primary" form="project-form"><span class="bevel-button__label">Create project</span></button></footer></div></dialog><dialog class="bevel-modal" id="modal-prompt" aria-labelledby="modal-prompt-title" aria-describedby="modal-prompt-description" ><div class="bevel-modal__inner"><header class="bevel-modal__header"><button type="button" class="bevel-overlay__close" data-bevel-close aria-label="Close"><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">FIELD NOTES / A NEW BEGINNING</div><h2 id="modal-prompt-title" class="bevel-modal__heading">Name this field note.</h2><p id="modal-prompt-description" class="bevel-modal__description">A good name makes it easier to find your way back.</p></header><div class="bevel-modal__body"><label class="bevel-overlay__field">Title<input class="bevel-input" value="A place for good work" autofocus></label></div><footer class="bevel-modal__footer"><button type="button" class="bevel-button" data-bevel-close><span class="bevel-button__label">Cancel</span></button><button type="button" class="bevel-button bevel-button--primary" data-bevel-action="save-name"><span class="bevel-button__label">Save name</span></button></footer></div></dialog><dialog class="bevel-modal" id="modal-confirm" aria-labelledby="modal-confirm-title" aria-describedby="modal-confirm-description" ><div class="bevel-modal__inner"><header class="bevel-modal__header"><button type="button" class="bevel-overlay__close" data-bevel-close aria-label="Close"><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">FIELD NOTES / PROJECT SETTINGS</div><h2 id="modal-confirm-title" class="bevel-modal__heading">Archive this project?</h2><p id="modal-confirm-description" class="bevel-modal__description">Field notes will leave your active workspace. Your documents and history stay together.</p></header><div class="bevel-modal__body"><div class="bevel-overlay__well"><span aria-hidden="true">▧</span><div><strong>Field notes</strong><br><small>12 documents · 4 collaborators</small></div></div></div><footer class="bevel-modal__footer"><button type="button" class="bevel-button" data-bevel-close><span class="bevel-button__label">Cancel</span></button><button type="button" class="bevel-button bevel-button--danger" data-bevel-action="archive"><span class="bevel-button__label">Archive project</span></button></footer></div></dialog><dialog class="bevel-modal" id="modal-long" aria-labelledby="modal-long-title" aria-describedby="modal-long-description" ><div class="bevel-modal__inner"><header class="bevel-modal__header"><button type="button" class="bevel-overlay__close" data-bevel-close aria-label="Close"><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">FIELD NOTES / A NEW BEGINNING</div><h2 id="modal-long-title" class="bevel-modal__heading">A little shared understanding.</h2><p id="modal-long-description" class="bevel-modal__description">Before inviting your team, take a moment to review how this workspace works.</p></header><div class="bevel-modal__body"><div class="bevel-modal__scroll" tabindex="0" autofocus><h3>Keep useful things close</h3><p>Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p><h3>One place, one team</h3><p>Everyone you invite can read shared documents. Editors can update content, and owners can manage workspace settings.</p><h3>Your work stays yours</h3><p>You can export your notes at any time. Archived projects keep their documents, decisions and complete history.</p><h3>A thoughtful default</h3><p>New projects start private. Choose who to invite when the work is ready for another pair of eyes.</p></div></div><footer class="bevel-modal__footer"><button type="button" class="bevel-button" data-bevel-close><span class="bevel-button__label">Cancel</span></button><button type="button" class="bevel-button bevel-button--primary" data-bevel-close><span class="bevel-button__label">I understand</span></button></footer></div></dialog><dialog class="bevel-modal" id="modal-overlay" aria-labelledby="modal-overlay-title"><div class="bevel-modal__inner"><header class="bevel-modal__header"><button type="button" class="bevel-overlay__close" data-bevel-close aria-label="Close"><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">FIELD NOTES / OPTIONS</div><h2 id="modal-overlay-title" class="bevel-modal__heading">Project options</h2></header><div class="bevel-modal__body"><button type="button" class="bevel-button" id="modal-menu-trigger" data-bevel-open="modal-menu" aria-controls="modal-menu" aria-expanded="false">Project options</button><div class="bevel-menu" id="modal-menu" popover="manual" role="menu"><button role="menuitem" data-bevel-key="duplicate" data-bevel-action="duplicate" tabindex="0">Duplicate project</button><button role="menuitem" data-bevel-key="template" data-bevel-action="template" tabindex="-1">Save as template</button></div></div><footer class="bevel-modal__footer"><button type="button" class="bevel-button" data-bevel-close>Done</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/multi-select-picker.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>Multi-select picker · Bevel</title></head>
4
+ <body>
5
+ <main class="bevel-anchor-example"><header class="bevel-anchor-example__header"><div class="bevel-overlay__eyebrow">Choose / 06</div><h1>A few useful labels</h1><p>Make a set from the options you already know.</p></header><form id="skills-form"><section class="bevel-multiselect" id="skills-picker" data-bevel-name="skills"><label class="bevel-picker__label" id="skills-label">Project labels</label><div class="bevel-multiselect__control"><div class="bevel-multiselect__tags"></div><button type="button" class="bevel-icon-button bevel-multiselect__toggle" data-bevel-open="skills-options" aria-controls="skills-options" aria-expanded="false" aria-label="Open label 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><div id="skills-options" class="bevel-multiselect__panel" popover="manual" role="dialog" aria-labelledby="skills-label"><label class="bevel-sr-only" for="skills-search">Search labels</label><div class="bevel-multiselect__search-row"><input id="skills-search" class="bevel-multiselect__search" autocomplete="off" placeholder="Find a label…"><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></div><div role="group" aria-labelledby="skills-label"><label class="bevel-multiselect__option bevel-checkbox"><input class="bevel-sr-only" type="checkbox" value="design" data-bevel-label="Design" data-bevel-tone="brass" checked><span class="bevel-checkbox__box"></span><i class="bevel-label-dot bevel-label-dot--brass"></i>Design</label><label class="bevel-multiselect__option bevel-checkbox"><input class="bevel-sr-only" type="checkbox" value="editorial" data-bevel-label="Editorial" data-bevel-tone="teal" checked><span class="bevel-checkbox__box"></span><i class="bevel-label-dot bevel-label-dot--teal"></i>Editorial</label><label class="bevel-multiselect__option bevel-checkbox"><input class="bevel-sr-only" type="checkbox" value="engineering" data-bevel-label="Engineering" data-bevel-tone="blue"><span class="bevel-checkbox__box"></span><i class="bevel-label-dot bevel-label-dot--blue"></i>Engineering</label><label class="bevel-multiselect__option bevel-checkbox"><input class="bevel-sr-only" type="checkbox" value="research" data-bevel-label="Research" data-bevel-tone="ox"><span class="bevel-checkbox__box"></span><i class="bevel-label-dot bevel-label-dot--ox"></i>Research</label></div><div class="bevel-multiselect__empty" role="status" hidden>No matching labels</div><div class="bevel-picker__foot bevel-picker__foot--panel"><span data-bevel-multiselect-count>2</span> of 4 labels selected</div></div><div class="bevel-picker__foot"><span data-bevel-multiselect-count>2</span> of 4 labels selected</div></section><output id="skill-values" aria-live="polite"></output></form><details hidden><summary>Nested picker example</summary><button class="bevel-button" type="button" data-bevel-open="multi-modal">Choose labels inside modal</button></details><dialog id="multi-modal" class="bevel-modal" aria-labelledby="multi-modal-title"><div class="bevel-modal__inner"><header class="bevel-modal__header"><h2 id="multi-modal-title">Labels in context</h2></header><div class="bevel-modal__body"><section class="bevel-multiselect" id="modal-labels" data-bevel-name="modal-label"><div class="bevel-multiselect__tags"></div><button type="button" class="bevel-multiselect__control" data-bevel-open="modal-label-options" aria-controls="modal-label-options" aria-expanded="false"><span class="bevel-multiselect__summary">Choose options</span></button><div id="modal-label-options" class="bevel-multiselect__panel" popover="manual"><input class="bevel-multiselect__search" aria-label="Search modal labels"><label class="bevel-multiselect__option"><input type="checkbox" value="brief" data-bevel-label="Brief">Brief</label><label class="bevel-multiselect__option"><input type="checkbox" value="locked" data-bevel-label="Locked" checked disabled>Locked</label></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("#skills-form").addEventListener("submit",event=>{event.preventDefault();host.querySelector("#skill-values").textContent=JSON.stringify(new FormData(event.currentTarget).getAll("skills"))})
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/pagination.html ADDED
@@ -0,0 +1,32 @@
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>Pagination · 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>Every record has a place.</h1><p>Invoices / All clients</p></header>
11
+ <div class="bevel-pagination-example__table-wrap"><table class="bevel-pagination-example__table"><thead><tr><th>Invoice</th><th>Client</th><th>Amount</th><th>Status</th></tr></thead><tbody></tbody></table></div>
12
+ <div class="bevel-pagination" data-bevel-page="1" data-bevel-page-size="4" data-bevel-total="48">
13
+ <output class="bevel-pagination__range" aria-live="polite">1 to 4 of 48</output>
14
+ <nav class="bevel-pagination__pages" aria-label="Invoice pages"><button class="bevel-button" aria-label="Previous page" type="button" data-bevel-page="prev"><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 5-7 7 7 7"/></svg></button><span class="bevel-pagination__gap" aria-hidden="true">…</span><button class="bevel-button" aria-label="Next page" type="button" data-bevel-page="next"><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="m9 5 7 7-7 7"/></svg></button></nav>
15
+ <label class="bevel-pagination__size">Invoices per page <span class="bevel-select"><select class="bevel-select__field" data-bevel-page-size><option value="4" selected>4</option><option value="8">8</option><option value="12">12</option></select></span></label>
16
+ </div>
17
+ <output class="bevel-local-result" aria-live="polite">Page 1 of 12</output>
18
+ </main>
19
+ <script src="../../bevel.js"></script>
20
+ <script>((host, { standalone = true, assetRoot = "../../", ready } = {}) => {
21
+
22
+ const pager = host.querySelector(".bevel-pagination");
23
+ const clients = ["Juniper Health", "Northstar Studio", "Maple House", "Juniper Health"];
24
+ const states = ["Paid", "Overdue", "Sent", "Due soon"];
25
+ const amounts = ["$1,240.00", "$3,200.00", "$860.00", "$410.00"];
26
+ const render = () => { const page = Number(pager.dataset.bevelPage), size = Number(pager.dataset.bevelPageSize), first = (page - 1) * size; host.querySelector("tbody").innerHTML = Array.from({ length: Math.min(size, 48 - first) }, (_, offset) => { const index = first + offset, tone = index % 4 === 0 ? "good" : index % 4 === 1 ? "bad" : "neutral"; return `<tr><td>INV-${String(431 + index).padStart(4, "0")}</td><td>${clients[index % clients.length]}</td><td>${amounts[index % amounts.length]}</td><td><span class="bevel-badge" data-bevel-tone="${tone}">${states[index % states.length]}</span></td></tr>`; }).join(""); host.querySelector(".bevel-local-result").textContent = `Page ${page} of ${Math.ceil(48 / size)}`; };
27
+ pager.addEventListener("bevel:change", render);
28
+ render();
29
+
30
+ })(document.body, {standalone:true,assetRoot:"../../",ready:callback => { if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", callback, {once:true}); else callback(); }});</script>
31
+ </body>
32
+ </html>
package/examples/components/persistent-action-banner.html ADDED
@@ -0,0 +1,23 @@
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>Persistent action banner · Bevel</title></head>
4
+ <body>
5
+ <main class="bevel-anchor-example"><header class="bevel-anchor-example__header"><div class="bevel-overlay__eyebrow">Feedback / 20</div><h1>Keep an unresolved thing visible</h1><p>A lasting notice belongs with the work it affects.</p></header><section class="bevel-action-banner" data-bevel-key="connection" aria-labelledby="connection-title"><span class="bevel-action-banner__icon"><svg aria-hidden="true" viewBox="0 0 256 256" fill="currentColor"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg></span><div class="bevel-action-banner__body"><h2 id="connection-title">You are working offline.</h2><p>Your recent changes are waiting to sync. Keep this page open until the connection returns.</p></div><div class="bevel-action-banner__actions"><button class="bevel-button bevel-button--small" data-bevel-action="retry" data-bevel-key="connection" type="button"><span class="bevel-button__label">Retry connection</span></button><button class="bevel-action-banner__dismiss" data-bevel-banner-dismiss type="button" aria-label="Dismiss offline notice"><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></button></div></section><small class="bevel-action-banner-example__transport">Example transport: deterministic local application response.</small><section class="bevel-action-banner-example__panel"><div><h2>Field notes</h2><span class="bevel-action-banner-example__badge">Draft</span></div><p>A working collection of ideas, decisions and useful details.</p></section><section class="bevel-action-banner bevel-action-banner--running" data-bevel-key="delete-12-items" aria-labelledby="running-delete-title" tabindex="-1"><span class="bevel-action-banner__icon"><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="M12 3a9 9 0 1 1-9 9"/></svg></span><div class="bevel-action-banner__body"><div class="bevel-action-banner__head"><h2 id="running-delete-title">Deleting 12 items…</h2><span class="bevel-action-banner__count">7 of 12</span></div><progress class="bevel-action-banner__progress" aria-labelledby="running-delete-title" max="12" value="7">7 of 12</progress><p class="bevel-action-banner__status" aria-live="polite">Delete results: 6 succeeded, 1 unchanged. Each item reports as it finishes.</p></div></section><section class="bevel-action-banner bevel-action-banner--uncertain" data-bevel-key="move-3-items" aria-labelledby="uncertain-move-title" tabindex="-1"><span class="bevel-action-banner__icon"><svg aria-hidden="true" viewBox="0 0 256 256" fill="currentColor"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg></span><div class="bevel-action-banner__body"><h2 id="uncertain-move-title">We didn't get a response for Move 3 items</h2><p>The response was lost. This change may have completed.</p><p class="bevel-action-banner__observation" aria-live="polite">Current state matches the requested change. Current name: notes.html · Folder: client-work · Visibility: Private</p><div class="bevel-action-banner__actions"><button class="bevel-button bevel-button--small" data-bevel-action="check" data-bevel-key="move-3-items" 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="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"/></svg><span class="bevel-button__label">Check current state</span></button><button class="bevel-button bevel-button--small bevel-button--quiet" data-bevel-banner-dismiss type="button"><span class="bevel-button__label">Dismiss after checking</span></button><span class="bevel-action-banner__meta">Started 2 minutes ago · This is a snapshot, not an operation receipt.</span></div></div></section><div class="bevel-buttons"><button class="bevel-button bevel-button--small" id="finish-delete-item" type="button">Finish one item</button><button class="bevel-button bevel-button--small" id="lose-delete-response" type="button">Lose the response</button></div><output aria-live="polite"></output></main>
6
+ <script src="../../bevel.js"></script>
7
+ <script>((host, { standalone = true, assetRoot = "../../", ready } = {}) => {
8
+
9
+ const banner=host.querySelector(".bevel-action-banner"), output=host.querySelector("output");
10
+ banner.addEventListener("bevel:action",event=>{ if(event.detail.action!=="retry")return; const button=banner.querySelector('[data-bevel-action="retry"]'); button.disabled=true; button.textContent="Retrying…"; output.textContent="Application request pending."; setTimeout(()=>{ banner.dataset.bevelCondition="resolved"; banner.querySelector("h2").textContent="You are back online."; banner.querySelector("p").textContent="The connection is available again. Your work can continue."; button.disabled=false; button.textContent="Preview offline"; output.textContent="Application response received."; },120); });
11
+
12
+ const uncertain=host.querySelector(".bevel-action-banner--uncertain"), observation=uncertain.querySelector(".bevel-action-banner__observation");
13
+ uncertain.addEventListener("bevel:action",event=>{ if(event.detail.action!=="check")return; const check=uncertain.querySelector('[data-bevel-action="check"]'), label=check.querySelector(".bevel-button__label"); check.disabled=true; label.textContent="Checking…"; setTimeout(()=>{ observation.textContent="Checked just now. Current state matches the requested change. Current name: notes.html · Folder: client-work · Visibility: Private"; label.textContent="Refresh observation"; check.disabled=false; },120); });
14
+
15
+ const running=host.querySelector(".bevel-action-banner--running"), finish=host.querySelector("#finish-delete-item"), lose=host.querySelector("#lose-delete-response");
16
+ let deleted=7;
17
+ finish.addEventListener("click",()=>{ deleted=Math.min(12,deleted+1); running.querySelector(".bevel-action-banner__progress").value=deleted; running.querySelector(".bevel-action-banner__progress").textContent=`${deleted} of 12`; running.querySelector(".bevel-action-banner__count").textContent=`${deleted} of 12`; running.querySelector(".bevel-action-banner__status").textContent=`Delete results: ${deleted-1} succeeded, 1 unchanged. Each item reports as it finishes.`; finish.disabled=deleted===12; });
18
+ lose.addEventListener("click",()=>{ running.classList.replace("bevel-action-banner--running","bevel-action-banner--uncertain"); running.querySelector(".bevel-action-banner__icon").innerHTML='<svg aria-hidden="true" viewBox="0 0 256 256" fill="currentColor"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg>'; const body=running.querySelector(".bevel-action-banner__body"), title=body.querySelector("h2"); title.textContent="We didn't get a response for Delete 12 items"; body.replaceChildren(title); body.insertAdjacentHTML("beforeend",`<p>The response was lost after ${deleted} of 12 items reported. The rest may have been deleted.</p><p class="bevel-action-banner__observation" aria-live="polite">Check the current state before deleting again.</p><div class="bevel-action-banner__actions"><button class="bevel-button bevel-button--small" data-bevel-action="check" type="button"><span class="bevel-button__label">Check current state</span></button><button class="bevel-button bevel-button--small bevel-button--quiet" data-bevel-banner-dismiss type="button"><span class="bevel-button__label">Dismiss after checking</span></button></div>`); finish.disabled=true; lose.disabled=true; running.focus(); });
19
+ running.addEventListener("bevel:action",event=>{ if(event.detail.action==="check") running.querySelector(".bevel-action-banner__observation").textContent="Checked just now. 9 of the 12 items are gone; 3 are still in the folder."; });
20
+
21
+ })(document.body, {standalone:true,assetRoot:"../../",ready:callback => { if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", callback, {once:true}); else callback(); }});</script>
22
+ </body>
23
+ </html>
package/examples/components/popconfirm.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>Popconfirm · Bevel</title></head>
4
+ <body>
5
+ <main class="bevel-anchor-example"><header class="bevel-anchor-example__header"><div class="bevel-overlay__eyebrow">Overlay / 04</div><h1>A pause before removing</h1><p>The confirmation stays attached to the action.</p></header><div class="bevel-document-card" data-bevel-record-key="field-notes"><div class="bevel-anchor-row"><div class="bevel-document-card__identity"><svg aria-hidden="true" height="24" width="24" 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>Field notes</strong><p><small>Document · 12 pages</small></p></div></div><button id="remove-trigger" class="bevel-icon-button" aria-label="Remove document" aria-controls="remove-confirm" aria-expanded="false" data-bevel-open="remove-confirm" type="button"><svg aria-hidden="true" height="17" width="17" 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></button></div><section id="remove-confirm" class="bevel-popconfirm" popover="manual" role="dialog" aria-labelledby="remove-title" aria-describedby="remove-description" data-bevel-placement="bottom-end"><span class="bevel-popconfirm__arrow" data-bevel-arrow></span><div class="bevel-popconfirm__head"><svg aria-hidden="true" height="18" width="18" viewBox="0 0 256 256" fill="currentColor"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg><h3 id="remove-title">Remove this document?</h3></div><p id="remove-description" class="bevel-popconfirm__description">Field notes will move to the archive. The other documents will stay here.</p><div class="bevel-popconfirm__actions"><button class="bevel-button bevel-button--small" data-bevel-close autofocus type="button"><span class="bevel-button__label">Keep it</span></button><button class="bevel-button bevel-button--small bevel-button--danger" data-bevel-confirm="remove" data-bevel-key="field-notes" type="button"><span class="bevel-button__label">Remove</span></button></div></section><div class="bevel-document-card__status" aria-live="polite">Everything is up to date.</div></div></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(".bevel-popconfirm").addEventListener("bevel:action",event=>{if(event.detail.action!=="remove"||event.detail.key!=="field-notes")return;const card=host.querySelector('[data-bevel-record-key="field-notes"]'),status=card.querySelector(".bevel-document-card__status");status.classList.add("bevel-document-card__status--good");status.innerHTML='<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><span><strong>Document moved to the archive.</strong> Field notes is no longer in this project.</span><button class="bevel-button bevel-button--small" type="button">Undo</button>';card.dataset.bevelRemoved=""})
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/popover-menu.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>Popover menu · Bevel</title></head>
4
+ <body>
5
+ <main class="bevel-anchor-example"><header class="bevel-anchor-example__header"><div class="bevel-overlay__eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>A place for every action.</h1><p>Useful project actions, right where you need them.</p></header><div class="bevel-anchor-stage"><div class="bevel-anchor-row"><div><strong>Field notes</strong><br><small>Last edited today at 10:42</small></div><button id="project-actions-trigger" aria-expanded="false" aria-controls="project-actions" aria-haspopup="menu" aria-label="Project actions" title="Project actions" class="bevel-icon-button" data-bevel-open="project-actions" type="button"><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 12h1m5 0h1m5 0h1"/></svg></button></div><div id="project-actions" class="bevel-menu" popover="manual" role="menu" aria-label="Field notes project actions"><div class="bevel-menu__title">Field notes · Project</div><a href="#opened" role="menuitem" data-bevel-key="open" data-bevel-action="open" tabindex="0"><span><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></span>Open project<kbd>↵</kbd></a><button role="menuitem" data-bevel-key="rename" data-bevel-action="rename" tabindex="-1"><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>Rename<kbd>⌘ R</kbd></button><button role="menuitem" data-bevel-key="duplicate" data-bevel-action="duplicate" tabindex="-1"><span><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>Duplicate<kbd>⌘ D</kbd></button><hr><button role="menuitem" data-bevel-key="move" disabled 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="M4 12h16m-6-6 6 6-6 6"/></svg></span>Move to workspace</button><hr><button role="menuitem" data-tone="danger" data-bevel-key="archive" data-bevel-action="archive" tabindex="-1"><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>Archive project</button></div></div><details hidden><summary>Additional menu states</summary><button id="preference-trigger" type="button" data-bevel-open="preference-menu" aria-controls="preference-menu" aria-expanded="false">Open preference menu</button><div id="preference-menu" class="bevel-menu" popover="manual" role="menu"><button role="menuitemcheckbox" aria-checked="true" data-bevel-key="updates" data-bevel-action="updates" tabindex="0">Project updates<span class="bevel-menu__state">On</span></button><button role="menuitemradio" aria-checked="true" data-bevel-key="list" data-bevel-action="view" tabindex="-1">List view</button><button role="menuitemradio" aria-checked="false" data-bevel-key="board" data-bevel-action="view" tabindex="-1">Board view</button></div></details><output id="menu-result" aria-live="polite"></output></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(".bevel-menu").addEventListener("bevel:action",event=>{host.querySelector("#menu-result").textContent=`${event.detail.action}:${event.detail.key}`})
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/reference/baseline/DECISIONS.md ADDED
@@ -0,0 +1,85 @@
1
+ # Decisions
2
+
3
+ Numbered, never renumbered. A reversed decision stays and gets a note. mirk-interface's DECISIONS.md is the prior log; the entries that carry over are named where they apply.
4
+
5
+ ## 0001 Checked state: shallow recess, provisional
6
+
7
+ The checked checkbox, the selected radio and the pressed segment swap their edges, but the dark edge sits at half depth (`--bevel-edge-mid`, a 50/50 mix of edge-lo and the face) and the face keeps its colour. Full inversion plus a darkened face looked like a hole in dark mode. This is the placeholder until the design round (plans/bevel/checked-state-round) picks the final treatment; David chooses from four rendered candidates. Whatever wins replaces the three rules that read `--bevel-edge-mid`. Superseded by 0011 on 2026-09-02: the three rules read `--bevel-face-in`, `--bevel-edge-in` and `--bevel-edge-in-hi` now, and `--bevel-edge-mid` is gone.
8
+
9
+ ## 0002 Square corners everywhere, no gradients
10
+
11
+ Reverses the plan's 3px recommendation at David's call. `border-radius` is 0 or 50%; the 50% cases are the radio ring and the small round remove buttons. mirk's round register (gradient pills, `--mirk-pill-*` tokens) is not carried over. No gradient shades anything; the one `repeating-linear-gradient` is the blocked progress fill, a pattern rather than a shade, and `check.mjs` exempts that rule alone.
12
+
13
+ ## 0003 The toggle's on state is gray, not an accent
14
+
15
+ `--bevel-line-2` track with a `--bevel-faint` border. A switch is a setting that applies immediately, and brass on it read as a warning. From David's form note.
16
+
17
+ ## 0004 Fonts by family name only in bevel.css
18
+
19
+ `bevel.css` names "IBM Plex Sans", "IBM Plex Mono" and Newsreader with system fallbacks and never declares `@font-face`. `bevel-fonts.css` loads the vendored latin woff2 files; a Google Fonts link is the documented alternative. A page that loads neither still lays out correctly.
20
+
21
+ ## 0005 The script mirrors state into attributes
22
+
23
+ mirk relied on the host (Hyperclay's persist) to mirror form values. bevel does it itself: on input or change, every bevel control writes `value`, `checked`, `selected` or the textarea's text back into the markup. `scripts/roundtrip.mjs` proves the contract on the docs page. Carried over from mirk unchanged: no init, delegated listeners, idempotent.
24
+
25
+ ## 0006 The docs page generates its own samples
26
+
27
+ Each demo carries `data-ex`; the page script serializes the demo's markup into the `pre` under it. One source for the demo and the sample, so they cannot drift. The page still reads without script, just without samples.
28
+
29
+ ## 0007 Icons live in the repo, not the package
30
+
31
+ `icons/svg` is the pixelarticons fork (832 glyphs, 3.3 MB). It stays in the repo for copying inline and is excluded from the npm `files` so an install is fonts plus three files. The three glyphs the kit needs (calendar, close, warning) are inline SVG in the markup.
32
+
33
+ ## 0008 Warm palette re-declares only what differs
34
+
35
+ `[data-theme="warm"]` sets fourteen of the eighteen tokens; brass, brass-soft, teal and teal-soft inherit. Three warm values were moved off mirk's originals to pass the contrast pairs: light faint `#9A8A70`, light ox `#A83A2C`, dark edge-hi `#343952`. Superseded by 0010 on 2026-09-02: those values are the `:root` values now and `data-theme="warm"` matches nothing.
36
+
37
+ ## 0009 Faint is tertiary and held at 3:1
38
+
39
+ `--bevel-faint` is for placeholders, disabled text, hover borders, decoration and the small caps sub-labels beside a primary label. Text that carries information alone uses `--bevel-muted` (4.5:1). Default light faint moved from the Broadsheet's `#8A93A1` to `#848D9B` so it holds 3:1 on the ground as well as the surface. From the 0.1.0 review.
40
+
41
+ ## 0010 Warm is the only palette
42
+
43
+ The Broadsheet's cool grays are gone. `:root` carries mirk's cream and navy (the former `[data-theme="warm"]` values; brass and teal unchanged), so a page is cream by day and navy by night with nothing to opt into, and `data-theme="warm"` on old markup is inert. David's call from the checked-state round: no gray anywhere on the cream page, and one palette to maintain. `contrast.mjs` checks two palettes instead of four.
44
+
45
+ ## 0011 Checked state: the recess is a body
46
+
47
+ Replaces 0001. A checked checkbox, a selected radio and a pressed segment get their own floor (`--bevel-face-in`) and two walls: the one the light misses on the top and left (`--bevel-edge-in`) and the one it reaches on the bottom and right (`--bevel-edge-in-hi`). In light all three sit below the cream; in dark all three sit above the navy, so no side of the perimeter can land on the page or on a card, which is what made the round-1 ring read as a crescent. Every stop is a literal: a `color-mix()` between a navy face and a near-black edge lands on gray, and gray was the complaint. The mark sinks 1px with the floor. The radio keeps only the shadow wall: on a circle the lit lip read as a highlight rather than an edge, so David had it removed. `--bevel-edge-hi` warmed to `#FFF9ED` and `--bevel-edge-lo` to `#D6C3A5` so the raised bevel sits on the same cream axis. Winner of round 2 (plans/bevel/checked-state-round-2), the Opus candidate.
48
+
49
+ ## 0012 The switch knob has its own tokens
50
+
51
+ `--bevel-knob` and `--bevel-knob-hi` draw the thumb's face and lit edge. In light they equal face and edge-hi. In dark the face (`#1A1D2C`) was darker than the on channel (`--bevel-line-2`, `#353B52`) and equal to the off channel, so an on switch read as a hole; the knob is `#4A5275` with a `#6C759A` edge, in both states.
52
+
53
+ ## 0013 The raised face is a material of its own
54
+
55
+ `--bevel-face` moved from `#FCF8F1` to `#F1E7D4` in light and from `#1A1D2C` to `#22273E` in dark, with the dark lit edge raised to `#3C4260` so it still reads against the face. The old face sat within 1.03:1 of the surface in light and 1.11:1 in dark, so a resting checkbox showed only its tan bottom wall by day and only its lit top wall by night, an open bracket either way, and a resting button beside the ink primary read smaller than its box. The principle: the face carries the shape, and an edge only has to read against the face. The lit edge merges with cream by day and the shadow edge merges with navy by night, the way a real bevel would; both walls stay, so a resting box, a resting ring, a chip, a step and a button remain one family and the checked recess of 0011 keeps its walls unchanged. Rejected: dropping the bottom and right walls from an unchecked box. It fixed the bracket in dark, but in light the tan wall was the only edge that read, and it split the checkbox from the button beside it. `contrast.mjs` holds face against surface at 1.15 in both modes. The light knob no longer equals the face (0012), which is what the knob's own tokens were for. From David's feedback pass of 2026-09-06, items 2, 4 and 5.
56
+
57
+ ## 0014 The danger button is a solid block with its own stops
58
+
59
+ Four new tokens: `--bevel-ox-face` (`#7A2A1F` / `#842E22`), `--bevel-ox-edge-hi`, `--bevel-ox-edge-lo` and `--bevel-ox-ink`, the cream that sits on the face. A dark red nearing brown, a step brighter at night so it stays red on navy. Literal stops because no neutral token is dark in both modes, so no mix of face and edge could produce the shadow wall. The modifier only sets the three custom properties and the label colour, so the base button's hover and press rules work on it unchanged. `--bevel-ox` itself is untouched: it still draws text, borders and pills. From David's item 1.
60
+
61
+ ## 0015 The radio dot does not sink
62
+
63
+ `.bevel-radio:has(:checked) .bevel-radio__ring::after` lost its `translate: 1px 1px`. The checked ring keeps only its shadow wall (0011), so the well is already off centre; sinking the dot into the well put it 1px low and right of the ring, which David read as a misplaced dot. The dot is centred in the ring, wall included. The checkbox mark still sinks: its recess has both walls, so its well is centred. From David's item 7.
64
+
65
+ ## 0016 Details is a boxed stack with a latch
66
+
67
+ Replaces the hairline treatment (a rule above each summary, one under the last, a floating left rule beside the body). A stack of `bevel-details` is one box: surface, a hairline frame, adjacent drawers sharing their dividers. The summary is pressable, so it carries a 22px beveled latch drawn from its pseudo-elements, with a hairline chevron that points right when closed and down when open; the open latch takes the checked recess of 0011. The open body is a sunk panel under the summary, edge to edge, its text aligned with the summary text. Still native details and summary, so it works without script and `open` round-trips. From David's item 6, the one component he asked to be redesigned outright.
68
+
69
+ ## 0017 The data grid is its own component
70
+
71
+ `bevel-grid` beside `bevel-table`, not an evolution of it. The content table is mono, centred, opened by a caption, with value and context pairs; the grid is a tool: sans language, mono figures, alignment by type, a sticky head, a sticky spine (pick, row number, anchor), a sticky aggregate strip, a toolbar and a status bar. Folding one into the other would have made both worse. Three calls inside it: column heads sort flat, like tabs, because a row of twelve bevels would out-shout the data, while the expander and the row menu are pressable and get the bevel; every state is an attribute (`aria-sort`, `checked`, `aria-expanded`, `data-page`, `value`) and rows never leave the DOM, search and paging set `hidden` and sorting reorders, so a saved grid reopens as it was; the select-all's mixed flag and a detail row's `hidden` are derived from the rows on every layout rather than stored. The table is `border-collapse: separate` because a collapsed border does not travel with a sticky cell. The row-number gutter is a CSS counter, so it counts the rows on screen and follows a sort with no script. Left out on purpose: inline editing, column resizing, range selection, and filter or group builders; those are app behaviour, and the grid gives them attributes to write into.
72
+
73
+ ## 0018 The shadow wall must clear the dark ground
74
+
75
+ Amends 0013: the shadow edge no longer merges with navy at night. David chose to keep both walls and the lighter face, then asked for a lighter bottom and right wall on the unchecked checkbox and radio. The shared `--bevel-edge-lo` dark value moves from `#0E1120` to `#1B2033`, above the `#0B0C13` ground and still darker than the `#22273E` face. Its contrast against the ground rises from 1.04 to 1.21; `contrast.mjs` holds that pair at 1.2 in dark mode. The existing lit edge and knob pairs still pass. The light value stays `#D6C3A5`: it already contrasts with the cream ground by being darker, so lightening it would reduce the contrast David asked for. One token changes all raised controls; the checked recess tokens stay as they were.
76
+
77
+ ## 0019 One grid, the selected masthead above the selected body
78
+
79
+ David chose Astra's masthead, four aggregate cells and counted view tabs above Fable's toolbar, table and footer. The port lives in `bevel-grid`: `__masthead`, `__description`, `__stats`, `__stat`, `__views` and `__view`. The masthead scopes the large serif treatment of `__title` and the small muted register treatment of `__id`; the anatomy grid keeps its plain title bar. The showcase gets its own wide data table section, forty invoices, twenty per page, and an invoice expanded in the initial markup. The anatomy, empty and loading examples stay intact, as does the details drawer component of 0016.
80
+
81
+ The tabs replace the showcase's All / Open / Overdue segmented control. The starting segment only changed its pressed state; it had no row filter. The delegated grid layout now intersects search with the active tab's `data-grid-match` values in its zero based `data-grid-column`. Open includes Sent, Due soon and Overdue. Changing a view resets the page; sorting retains the page. Tab counts follow the search, and the four top aggregates use every matching invoice before paging. The existing aggregate foot continues to describe the full register. The active view is `aria-pressed`, and counts, totals, row visibility and pages are written into the DOM. Initial page 2 rows are already hidden in the source, so both the original showcase and a saved filtered view render without script. `bevel:view` announces a view change.
82
+
83
+ ## Carried from mirk
84
+
85
+ 0012 (bevel = real per-side borders), 0031 (bevel means pressable), 0033 (a control owns every pixel of its face), 0005 (no pure white or black), 0007 (`line-height: 1.5` explicit on controls). Reversed on purpose: mirk 0004 (one pixel face everywhere).
package/examples/components/reference/baseline/README.md ADDED
@@ -0,0 +1,58 @@
1
+ # bevel
2
+
3
+ Beveled controls in an editorial page. One stylesheet, one script, no build.
4
+
5
+ Buttons, switches, radios and steppers with a real machined edge (light top and left, dark right and bottom, mitred corners), set in a page that reads like a broadsheet: IBM Plex Sans body at 17px, Newsreader headings, IBM Plex Mono for every label and figure. Every state lives in the markup, so `document.documentElement.outerHTML` is a complete save. Built for self-saving HTML (Hyperclay, htmlclay, clayjs) and fine anywhere else.
6
+
7
+ The docs page is the spec: [index.html](index.html) shows every component with its markup. [starter.html](starter.html) is a page to copy.
8
+
9
+ ## Use
10
+
11
+ ```html
12
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@panphora/bevel@0.1.0/bevel-fonts.css">
13
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@panphora/bevel@0.1.0/bevel.css">
14
+ <script src="https://cdn.jsdelivr.net/npm/@panphora/bevel@0.1.0/bevel.js" defer></script>
15
+ ```
16
+
17
+ Or `npm install @panphora/bevel` and import `@panphora/bevel/bevel.css`, `@panphora/bevel/bevel-fonts.css` and `@panphora/bevel/bevel.js`. The font files ship in the package with relative URLs, so a vendored copy works offline. To use Google Fonts instead, drop the fonts file and add:
18
+
19
+ ```html
20
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap">
21
+ ```
22
+
23
+ Put `bevel-page` on `body` for the column and the typographic defaults, then copy components from the docs page.
24
+
25
+ ## Rules
26
+
27
+ 1. Bevel means pressable. Buttons, boxes, rings, thumbs, nubs, steppers and chips get the edge. Nothing else does.
28
+ 2. Fields are flat and recessed: a hairline box on the surface, a 2px brass focus ring.
29
+ 3. Ink acts, brass works, ox warns, teal confirms. One primary button per view.
30
+ 4. Anything with a digit is mono. Language is sans. Headlines are the serif.
31
+ 5. Square corners, no gradients. The radio ring is the exception.
32
+ 6. Twenty-seven colour tokens, cream by day and navy by night, every in-between state a `color-mix()`. Dark mode is `light-dark()` on the same names; `.light` and `.dark` force any subtree.
33
+ 7. One shadow tier.
34
+ 8. State lives in the markup. The script mirrors live values back into attributes.
35
+
36
+ ## Architecture
37
+
38
+ - Components live in `@layer components`. Any utility or unlayered rule wins with no `!important`.
39
+ - BEM with a `bevel-` prefix: `bevel-button`, `bevel-button__label`, `bevel-button--primary`.
40
+ - `bevel.js` is one delegated listener per interaction on `document`. No init, no observer, safe to include twice. Custom events: `bevel:tags`, `bevel:reorder`, `bevel:tab`, `bevel:seg`, `bevel:remove`, and on the data grid `bevel:sort`, `bevel:select`, `bevel:expand`, `bevel:page`, `bevel:search`.
41
+ - No build. Hand-written CSS, a classic script.
42
+
43
+ ## Develop
44
+
45
+ ```
46
+ npm install
47
+ npm run fonts # vendor the woff2 files out of the Fontsource packages
48
+ npm run check # static rules: prefix, tokens only, square, coverage, ids
49
+ npm run contrast # WCAG pairs in both modes
50
+ npm run roundtrip # playwright: change every state on the docs page, save, reload, assert
51
+ npm run dev # serve on :7383
52
+ ```
53
+
54
+ `npm test` runs the three checks. The round trip needs `npx playwright install chromium` once.
55
+
56
+ ## License
57
+
58
+ MIT-0. Fonts are OFL-1.1 (see `fonts/`). The icons in `icons/svg` are a fork of pixelarticons, MIT (see `icons/LICENSE`); they are in the repo for copying inline and are not part of the npm package.
package/examples/components/reference/baseline/bevel-fonts.css ADDED
@@ -0,0 +1,16 @@
1
+ /*
2
+ * bevel-fonts.css — the kit's three families, latin subset, self-hosted.
3
+ * IBM Plex Sans and IBM Plex Mono (IBM, OFL-1.1), Newsreader (Production Type,
4
+ * OFL-1.1), via Fontsource. Regenerate the files with `npm run fonts`.
5
+ * The URLs are relative to this file, so it works from npm, jsDelivr and a
6
+ * vendored copy alike. The alternative is one Google Fonts link (README).
7
+ */
8
+ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
9
+ @font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-italic.woff2) format("woff2"); }
10
+ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
11
+ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
12
+ @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
13
+ @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }
14
+ @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2"); }
15
+ @font-face { font-family: Newsreader; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/newsreader-latin-opsz-normal.woff2) format("woff2-variations"); }
16
+ @font-face { font-family: Newsreader; font-style: italic; font-weight: 200 800; font-display: swap; src: url(fonts/newsreader-latin-opsz-italic.woff2) format("woff2-variations"); }