@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/reference/parent/components/split-button.html ADDED
@@ -0,0 +1,5 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Split button · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-parent.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="split-button" data-reference-phase="static" data-selected-source="parent">
4
+
5
+ <section data-ref-state="line" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Actions / 12</div><h1>One action, a few ways</h1><p>Keep the usual action easy to reach.</p></div></header><div class="p-panel" style="min-height:345px"><p class="r-split-label">Single dark divider</p><div class="p-between"><div><h2>Field notes</h2><p class="p-muted p-small" style="margin-top:6px">A working guide for Northstar Studio</p></div><div class="p-split-button" data-divider="line"><button class="bevel-button bevel-button--small" data-local-action="PDF export preview" type="button"><span class="bevel-button__label">Export PDF</span></button><button aria-label="Other export formats" class="p-icon-button" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m5 9 7 7 7-7"></path></svg></button></div></div><p class="p-small p-muted" style="margin-top:42px">12 pages · last saved at 10:42</p></div></main></section><section data-ref-state="inset" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Actions / 12</div><h1>One action, a few ways</h1><p>Keep the usual action easy to reach.</p></div></header><div class="p-panel" style="min-height:345px"><p class="r-split-label">Slight inset bevel</p><div class="p-between"><div><h2>Field notes</h2><p class="p-muted p-small" style="margin-top:6px">A working guide for Northstar Studio</p></div><div class="p-split-button" data-divider="inset"><button class="bevel-button bevel-button--small" data-local-action="PDF export preview" type="button"><span class="bevel-button__label">Export PDF</span></button><button aria-label="Other export formats" class="p-icon-button" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m5 9 7 7 7-7"></path></svg></button></div></div><p class="p-small p-muted" style="margin-top:42px">12 pages · last saved at 10:42</p></div></main></section><section data-ref-state="line-open" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Actions / 12</div><h1>One action, a few ways</h1><p>Keep the usual action easy to reach.</p></div></header><div class="p-panel" style="min-height:345px"><p class="r-split-label">Single dark divider</p><div class="p-between"><div><h2>Field notes</h2><p class="p-muted p-small" style="margin-top:6px">A working guide for Northstar Studio</p></div><div class="p-split-button" data-divider="line"><button class="bevel-button bevel-button--small" data-local-action="PDF export preview" type="button"><span class="bevel-button__label">Export PDF</span></button><button aria-label="Other export formats" class="p-icon-button" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m5 9 7 7 7-7"></path></svg></button></div></div><div aria-label="Export formats" class="p-menu" role="menu" style="margin:20px 0 0 auto"><div class="p-menu-title">Export document</div><button data-local-action="PDF document export preview" role="menuitem"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>PDF document</span><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="m5 12 4 4L19 6"></path></svg></button><button data-local-action="HTML file export preview" role="menuitem"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>HTML file</span></button><button data-local-action="Markdown export preview" role="menuitem"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Markdown</span></button></div></div></main></section><section data-ref-state="inset-open" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Actions / 12</div><h1>One action, a few ways</h1><p>Keep the usual action easy to reach.</p></div></header><div class="p-panel" style="min-height:345px"><p class="r-split-label">Slight inset bevel</p><div class="p-between"><div><h2>Field notes</h2><p class="p-muted p-small" style="margin-top:6px">A working guide for Northstar Studio</p></div><div class="p-split-button" data-divider="inset"><button class="bevel-button bevel-button--small" data-local-action="PDF export preview" type="button"><span class="bevel-button__label">Export PDF</span></button><button aria-label="Other export formats" class="p-icon-button" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m5 9 7 7 7-7"></path></svg></button></div></div><div aria-label="Export formats" class="p-menu" role="menu" style="margin:20px 0 0 auto"><div class="p-menu-title">Export document</div><button data-local-action="PDF document export preview" role="menuitem"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>PDF document</span><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="m5 12 4 4L19 6"></path></svg></button><button data-local-action="HTML file export preview" role="menuitem"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>HTML file</span></button><button data-local-action="Markdown export preview" role="menuitem"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Markdown</span></button></div></div></main></section><section data-ref-state="disabled" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Actions / 12</div><h1>One action, a few ways</h1><p>Keep the usual action easy to reach.</p></div></header><div class="p-panel" style="min-height:345px"><p class="r-split-label">Single dark divider</p><div class="p-between"><div><h2>Field notes</h2><p class="p-muted p-small" style="margin-top:6px">A working guide for Northstar Studio</p></div><div class="p-split-button" data-divider="line"><button class="bevel-button bevel-button--small" disabled="" type="button"><span class="bevel-button__label">Export PDF</span></button><button aria-label="Other export formats" class="p-icon-button" disabled="" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m5 9 7 7 7-7"></path></svg></button></div></div><p class="p-small p-muted" style="margin-top:42px">Export is unavailable while the document is loading.</p></div></main></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/components/split-panes.html ADDED
@@ -0,0 +1,8 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Split panes · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-parent.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="split-panes" data-reference-phase="static" data-selected-source="parent"><section data-ref-state="list-detail" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Workspace / 31</div><h1>Give each side enough room</h1><p>A clear divider between the list and the detail.</p></div></header><div class="p-split-panes" data-split="" style="--split:35%"><section class="p-pane"><div class="p-eyebrow">Documents</div><div class="p-pane-item active"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg> Field notes</div><div class="p-pane-item"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg> Project brief</div><div class="p-pane-item"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg> Shared references</div></section><div aria-hidden="true" class="p-pane-divider">⠿</div><section class="p-pane p-pane-detail"><div class="p-eyebrow">Document</div><h2>Field notes</h2><p>Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p><div class="p-row" style="margin-top:25px"><span aria-hidden="true" class="p-avatar small">MC</span><span class="p-small p-muted">Edited today at 10:42</span></div></section></div><label class="p-pane-adjust">Pane width <input data-pane-range="" max="60" min="25" type="range" value="35"/></label></main></section>
4
+ <section data-ref-state="editor-preview" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Workspace / 31</div><h1>Give each side enough room</h1><p>A clear divider between the list and the detail.</p></div></header><div class="p-split-panes" data-split="" style="--split:46%"><section class="p-pane"><div class="p-eyebrow">Source</div><pre>&lt;article&gt;
5
+ &lt;h1&gt;Field notes&lt;/h1&gt;
6
+ &lt;p&gt;Keep the useful
7
+ things close.&lt;/p&gt;
8
+ &lt;/article&gt;</pre></section><div aria-hidden="true" class="p-pane-divider">⠿</div><section class="p-pane p-pane-detail"><div class="p-eyebrow">Preview</div><h2>Field notes</h2><p>Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p><div class="p-row" style="margin-top:25px"><span aria-hidden="true" class="p-avatar small">MC</span><span class="p-small p-muted">Edited today at 10:42</span></div></section></div><label class="p-pane-adjust">Pane width <input data-pane-range="" max="60" min="25" type="range" value="46"/></label></main></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/components/stat-tiles.html ADDED
@@ -0,0 +1,2 @@
1
+ <!DOCTYPE html>
2
+ <html data-theme="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Stat tiles · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-astra.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="stat-tiles" data-reference-phase="static" data-selected-source="astra"><section data-ref-state="default" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>A week, at a glance.</h1><p>A little perspective on the work in motion.</p></header><div class="stat-grid"><div class="stat"><div class="eyebrow">Weekly views</div><div class="stat-value">162</div><small class="good">↑ 18% this week</small><svg aria-label="Activity increased over the week" class="sparkline" viewBox="0 0 160 42"><polyline fill="none" points="0,36 26,29 53,33 80,16 106,20 133,5 160,10" stroke="currentColor" stroke-width="2"></polyline><line stroke="var(--bevel-line)" x1="0" x2="160" y1="41" y2="41"></line></svg></div><div class="stat"><div class="eyebrow">Documents</div><div class="stat-value">12</div><small class="good">↑ 3 this week</small><svg aria-label="Activity increased over the week" class="sparkline" viewBox="0 0 160 42"><polyline fill="none" points="0,36 26,29 53,33 80,16 106,20 133,5 160,10" stroke="currentColor" stroke-width="2"></polyline><line stroke="var(--bevel-line)" x1="0" x2="160" y1="41" y2="41"></line></svg></div><div class="stat"><div class="eyebrow">Open reviews</div><div class="stat-value">4</div><small class="bad">↓ 2 completed</small><svg aria-label="Activity increased over the week" class="sparkline" viewBox="0 0 160 42"><polyline fill="none" points="0,36 26,29 53,33 80,16 106,20 133,5 160,10" stroke="currentColor" stroke-width="2"></polyline><line stroke="var(--bevel-line)" x1="0" x2="160" y1="41" y2="41"></line></svg></div></div><div class="row between rule"><small>Northstar Studio</small><span class="mono muted" style="font-size:11px">SEP 01–07, 2026</span></div></div></section><section data-ref-state="zero" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>A week, at a glance.</h1><p>Your next chapter starts with the first small step.</p></header><div class="stat-grid"><div class="stat"><div class="eyebrow">Weekly views</div><div class="stat-value">0</div><small class="good">No activity yet</small><div class="sparkline"></div></div><div class="stat"><div class="eyebrow">Documents</div><div class="stat-value">0</div><small class="good">No activity yet</small><div class="sparkline"></div></div><div class="stat"><div class="eyebrow">Open reviews</div><div class="stat-value">0</div><small class="bad">No activity yet</small><div class="sparkline"></div></div></div><div class="row between rule"><small>Northstar Studio</small><span class="mono muted" style="font-size:11px">SEP 01–07, 2026</span></div></div></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/components/toast-stack.html ADDED
@@ -0,0 +1,5 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Toast stack · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-parent.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="toast-stack" data-reference-phase="static" data-selected-source="parent"><section data-ref-state="stack" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Feedback / 19</div><h1>A small acknowledgement</h1><p>Enough feedback to know what happened.</p></div></header><div class="p-toast-stage" data-part="notification-stack"><article class="p-toast success" data-dismissible=""><span class="p-toast-icon"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m5 12 4 4L19 6"></path></svg></span><div class="p-toast-body"><h3>Changes saved</h3><p>Field notes is up to date.</p></div><button aria-label="Dismiss Changes saved" class="p-icon-button" data-dismiss="" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></article><article class="p-toast" data-dismissible=""><span class="p-toast-icon"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg></span><div class="p-toast-body"><h3>Document archived</h3><p>You can bring it back whenever you need it.</p><button class="p-text-action" data-local-action="Action preview complete">Undo</button></div><button aria-label="Dismiss Document archived" class="p-icon-button" data-dismiss="" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></article><article class="p-toast error" data-dismissible=""><span class="p-toast-icon"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg></span><div class="p-toast-body"><h3>Upload interrupted</h3><p>workspace.jpg did not finish uploading.</p><button class="p-text-action" data-local-action="Action preview complete">Try again</button></div><button aria-label="Dismiss Upload interrupted" class="p-icon-button" data-dismiss="" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></article></div></main></section>
4
+ <section data-ref-state="success" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Feedback / 19</div><h1>A small acknowledgement</h1><p>Enough feedback to know what happened.</p></div></header><div class="p-toast-stage" data-part="notification-stack"><article class="p-toast success" data-dismissible=""><span class="p-toast-icon"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m5 12 4 4L19 6"></path></svg></span><div class="p-toast-body"><h3>Changes saved</h3><p>Field notes is up to date.</p></div><button aria-label="Dismiss Changes saved" class="p-icon-button" data-dismiss="" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></article></div></main></section>
5
+ <section data-ref-state="error" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Feedback / 19</div><h1>A small acknowledgement</h1><p>Enough feedback to know what happened.</p></div></header><div class="p-toast-stage" data-part="notification-stack"><article class="p-toast error" data-dismissible=""><span class="p-toast-icon"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg></span><div class="p-toast-body"><h3>Upload interrupted</h3><p>workspace.jpg did not finish uploading.</p><button class="p-text-action" data-local-action="Action preview complete">Try again</button></div><button aria-label="Dismiss Upload interrupted" class="p-icon-button" data-dismiss="" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></article></div></main></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/components/tree-view.html ADDED
@@ -0,0 +1,4 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Tree view · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-parent.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="tree-view" data-reference-phase="static" data-selected-source="parent"><section data-ref-state="expanded" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Navigation / 17</div><h1>A place for every document</h1><p>Folders open in place and keep their contents aligned.</p></div></header><div class="p-tree" data-part="tree"><div class="p-between p-tree-head"><div class="p-eyebrow">Northstar Studio</div><span class="p-badge">12 files</span></div><details open=""><summary><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M3 7V4h6l3 3h9v13H3Z"></path></svg> Projects</summary><div class="p-tree-children"><details open=""><summary><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M3 7V4h6l3 3h9v13H3Z"></path></svg> Field notes</summary><div class="p-tree-children"><button class="p-tree-leaf selected" data-tree-node="" type="button"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Project brief</span><span class="p-badge">Open</span></button><button class="p-tree-leaf" data-tree-node="" type="button"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Research notes</span></button><button class="p-tree-leaf" data-tree-node="" type="button"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Shared references</span></button></div></details><details><summary><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M3 7V4h6l3 3h9v13H3Z"></path></svg> Website</summary><div class="p-tree-children"><button class="p-tree-leaf" data-tree-node="" type="button"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Home page</span></button></div></details></div></details><details><summary><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M3 7V4h6l3 3h9v13H3Z"></path></svg> Archive <span class="p-badge">0</span></summary><div class="p-tree-empty">No documents here yet.</div></details><button class="p-tree-leaf" data-tree-node="" type="button"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Workspace guide</span></button></div></main></section>
4
+ <section data-ref-state="empty" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Navigation / 17</div><h1>A place for every document</h1><p>Folders open in place and keep their contents aligned.</p></div></header><div class="p-tree" data-part="tree"><div class="p-between p-tree-head"><div class="p-eyebrow">Northstar Studio</div><span class="p-badge">12 files</span></div><details open=""><summary><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M3 7V4h6l3 3h9v13H3Z"></path></svg> Projects</summary><div class="p-tree-children"><details open=""><summary><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M3 7V4h6l3 3h9v13H3Z"></path></svg> Field notes</summary><div class="p-tree-children"><button class="p-tree-leaf" data-tree-node="" type="button"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Project brief</span></button><button class="p-tree-leaf" data-tree-node="" type="button"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Research notes</span></button><button class="p-tree-leaf" data-tree-node="" type="button"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Shared references</span></button></div></details><details><summary><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M3 7V4h6l3 3h9v13H3Z"></path></svg> Website</summary><div class="p-tree-children"><button class="p-tree-leaf" data-tree-node="" type="button"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Home page</span></button></div></details></div></details><details open=""><summary><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M3 7V4h6l3 3h9v13H3Z"></path></svg> Archive <span class="p-badge">0</span></summary><div class="p-tree-empty">No documents here yet.</div></details><button class="p-tree-leaf" data-tree-node="" type="button"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Workspace guide</span></button></div></main></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/components/upload-dropzone.html ADDED
@@ -0,0 +1,6 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Upload dropzone · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-parent.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="upload-dropzone" data-reference-phase="static" data-selected-source="parent"><section data-ref-state="empty" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Files / 08</div><h1>Bring your work along</h1><p>Images and documents, ready for the project.</p></div></header><div class="p-dropzone"><svg aria-hidden="true" fill="none" height="28" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="28"><path d="M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5"></path></svg><h3>Drop a file here</h3><p>Images, PDFs and documents · up to 10 MB</p><label class="bevel-button bevel-button--small"><input class="bevel-sr-only" data-file-preview="" type="file"/><span class="bevel-button__label">Choose a file</span></label></div></main></section>
4
+ <section data-ref-state="queue" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Files / 08</div><h1>Bring your work along</h1><p>Images and documents, ready for the project.</p></div></header><div class="p-dropzone"><svg aria-hidden="true" fill="none" height="28" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="28"><path d="M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5"></path></svg><h3>Drop a file here</h3><p>Images, PDFs and documents · up to 10 MB</p><label class="bevel-button bevel-button--small"><input class="bevel-sr-only" data-file-preview="" type="file"/><span class="bevel-button__label">Choose a file</span></label></div><div class="p-upload-row"><img alt="Workspace image preview" src="../../fixtures/workspace.jpg"/><div style="flex:1"><strong class="p-small">workspace.jpg</strong><p class="p-small p-muted">184 KB · Uploading…</p><span class="p-progress"><span style="width:68%"></span></span></div><span class="p-badge brass">68%</span></div><div class="p-upload-row"><svg aria-hidden="true" fill="none" height="26" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="26"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div style="flex:1"><strong class="p-small">field-guide.pdf</strong><p class="p-small p-muted">420 KB · ready</p></div><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m5 12 4 4L19 6"></path></svg></div></main></section>
5
+ <section data-ref-state="error" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Files / 08</div><h1>Bring your work along</h1><p>Images and documents, ready for the project.</p></div></header><div class="p-dropzone"><svg aria-hidden="true" fill="none" height="28" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="28"><path d="M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5"></path></svg><h3>Drop a file here</h3><p>Images, PDFs and documents · up to 10 MB</p><label class="bevel-button bevel-button--small"><input class="bevel-sr-only" data-file-preview="" type="file"/><span class="bevel-button__label">Choose a file</span></label></div><div class="p-upload-row"><img alt="Workspace image preview" src="../../fixtures/workspace.jpg"/><div style="flex:1"><strong class="p-small">workspace.jpg</strong><p class="p-small p-muted">184 KB · Could not upload</p></div><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Retry preview</span></button></div><div class="p-upload-row"><svg aria-hidden="true" fill="none" height="26" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="26"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div style="flex:1"><strong class="p-small">field-guide.pdf</strong><p class="p-small p-muted">420 KB · ready</p></div><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m5 12 4 4L19 6"></path></svg></div></main></section>
6
+ <section data-ref-state="crop" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Files / 08</div><h1>Bring your work along</h1><p>Images and documents, ready for the project.</p></div></header><div class="p-dropzone"><svg aria-hidden="true" fill="none" height="28" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="28"><path d="M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5"></path></svg><h3>Drop a file here</h3><p>Images, PDFs and documents · up to 10 MB</p><label class="bevel-button bevel-button--small"><input class="bevel-sr-only" data-file-preview="" type="file"/><span class="bevel-button__label">Choose a file</span></label></div><div class="p-between" style="margin:18px 0 12px"><strong>Crop workspace.jpg</strong><span class="p-badge">Square crop</span></div><div class="qc-stage" data-part="crop-stage"><img alt="A bright workspace with a laptop and monitor" src="../../fixtures/workspace.jpg"/><div class="qc-dim"></div><div class="qc-box"><div class="qc-handle qc-nw"></div><div class="qc-handle qc-ne"></div><div class="qc-handle qc-sw"></div><div class="qc-handle qc-se"></div><i class="qc-rule horizontal one"></i><i class="qc-rule horizontal two"></i><i class="qc-rule vertical one"></i><i class="qc-rule vertical two"></i></div><span class="p-crop-size">800 × 800</span></div><div class="p-actions"><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Cancel crop</span></button><button class="bevel-button bevel-button--small bevel-button--primary" type="button"><span class="bevel-button__label">Use crop preview</span></button></div></main></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/components/wizard-shell.html ADDED
@@ -0,0 +1,2 @@
1
+ <!DOCTYPE html>
2
+ <html data-theme="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Wizard shell · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-astra.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="wizard-shell" data-reference-phase="static" data-selected-source="astra"><section data-ref-state="current" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Make a space for good work.</h1><p>A few thoughtful choices to get started.</p></header><div class="wizard"><div class="wizard-steps"><div class="wizard-step"><b>01</b>The basics<small style="display:block;margin-top:5px">Complete</small></div><div class="wizard-step current"><b>02</b>Invite people<small style="display:block;margin-top:5px">Current step</small></div><div class="wizard-step"><b>03</b>Ready to go<small style="display:block;margin-top:5px">Up next</small></div></div><div><div class="eyebrow">STEP 02 OF 03</div><h2>Good work needs good people.</h2><p class="muted" style="font-size:13px;margin:13px 0 24px">Invite someone to help shape Field notes.</p><label class="field">Email address<input class="bevel-input" value="mira@example.test"/></label><div style="margin-top:16px"><label class="bevel-select"><span class="bevel-sr-only">Role</span><select class="bevel-select__field"><option>Editor</option><option>Viewer</option><option>Owner</option></select></label></div><div class="actions"><button class="bevel-button" type="button"><span class="bevel-button__label">Back</span></button><button class="bevel-button bevel-button--primary" type="button"><span class="bevel-button__label">Next step</span></button></div><p class="note">Only invited people can join this workspace.</p></div></div></div></section><section data-ref-state="error" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Make a space for good work.</h1><p>A few thoughtful choices to get started.</p></header><div class="wizard"><div class="wizard-steps"><div class="wizard-step"><b>01</b>The basics<small style="display:block;margin-top:5px">Complete</small></div><div class="wizard-step current"><b>02</b>Invite people<small style="display:block;margin-top:5px">Current step</small></div><div class="wizard-step"><b>03</b>Ready to go<small style="display:block;margin-top:5px">Up next</small></div></div><div><div class="eyebrow">STEP 02 OF 03</div><h2>Good work needs good people.</h2><p class="muted" style="font-size:13px;margin:13px 0 24px">Invite someone to help shape Field notes.</p><label class="field">Email address<input class="bevel-input" value="mira@"/></label><p class="bad" style="font-size:12px;margin-top:7px">Enter a complete email address.</p><div style="margin-top:16px"><label class="bevel-select"><span class="bevel-sr-only">Role</span><select class="bevel-select__field"><option>Editor</option><option>Viewer</option><option>Owner</option></select></label></div><div class="actions"><button class="bevel-button" type="button"><span class="bevel-button__label">Back</span></button><button class="bevel-button bevel-button--primary" type="button"><span class="bevel-button__label">Next step</span></button></div><p class="note">Only invited people can join this workspace.</p></div></div></div></section><section data-ref-state="complete" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Make a space for good work.</h1><p>A few thoughtful choices to get started.</p></header><div class="wizard"><div class="wizard-steps"><div class="wizard-step"><b>01</b>The basics<small style="display:block;margin-top:5px">Complete</small></div><div class="wizard-step"><b>02</b>Invite people<small style="display:block;margin-top:5px">Complete</small></div><div class="wizard-step"><b>03</b>Ready to go<small style="display:block;margin-top:5px">Complete</small></div></div><div><span class="badge good">✓ SETUP COMPLETE</span><h2 style="margin-top:20px">Your space is ready.</h2><p class="muted" style="margin:15px 0 25px">Field notes brings your documents, decisions and people together.</p><div class="well"><strong>Field notes</strong><br/><small>Northstar Studio · Private project</small></div><div class="actions"><button class="bevel-button" type="button"><span class="bevel-button__label">Back</span></button><button class="bevel-button bevel-button--primary" data-action="Project opened in the local preview." type="button"><span class="bevel-button__label">Open project</span></button></div></div></div></div></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/coverage.json ADDED
@@ -0,0 +1,414 @@
1
+ {
2
+ "seat": "parent",
3
+ "phase": "static",
4
+ "components": [
5
+ {
6
+ "id": "modal",
7
+ "states": [
8
+ "form",
9
+ "prompt",
10
+ "confirm",
11
+ "long"
12
+ ],
13
+ "source": "astra",
14
+ "file": "components/modal.html",
15
+ "behavior": "static",
16
+ "feedback": "But use the diagonal close svg that we use in themodal in clay.js/hyperclay.js"
17
+ },
18
+ {
19
+ "id": "popover-menu",
20
+ "states": [
21
+ "open",
22
+ "closed"
23
+ ],
24
+ "source": "astra",
25
+ "file": "components/popover-menu.html",
26
+ "behavior": "static",
27
+ "feedback": ""
28
+ },
29
+ {
30
+ "id": "drawer",
31
+ "states": [
32
+ "open",
33
+ "long",
34
+ "closed"
35
+ ],
36
+ "source": "astra",
37
+ "file": "components/drawer.html",
38
+ "behavior": "static",
39
+ "feedback": "But again use the diagonal close svg that we use in themodal in clay.js/hyperclay.js"
40
+ },
41
+ {
42
+ "id": "popconfirm",
43
+ "states": [
44
+ "open",
45
+ "confirmed",
46
+ "closed"
47
+ ],
48
+ "source": "parent",
49
+ "file": "components/popconfirm.html",
50
+ "behavior": "static",
51
+ "feedback": "Yes parent, but I do want the nub pointing to the item the dialog is referring to. Can use floating-ui library."
52
+ },
53
+ {
54
+ "id": "combobox",
55
+ "states": [
56
+ "open",
57
+ "closed",
58
+ "filtered",
59
+ "empty"
60
+ ],
61
+ "source": "parent",
62
+ "file": "components/combobox.html",
63
+ "behavior": "static",
64
+ "feedback": ""
65
+ },
66
+ {
67
+ "id": "multi-select-picker",
68
+ "states": [
69
+ "selected",
70
+ "open",
71
+ "empty"
72
+ ],
73
+ "source": "parent",
74
+ "file": "components/multi-select-picker.html",
75
+ "behavior": "static",
76
+ "feedback": ""
77
+ },
78
+ {
79
+ "id": "selectable-cards",
80
+ "states": [
81
+ "radio",
82
+ "checkbox"
83
+ ],
84
+ "source": "astra",
85
+ "file": "components/selectable-cards.html",
86
+ "behavior": "static",
87
+ "feedback": ""
88
+ },
89
+ {
90
+ "id": "upload-dropzone",
91
+ "states": [
92
+ "empty",
93
+ "queue",
94
+ "error",
95
+ "crop"
96
+ ],
97
+ "source": "parent",
98
+ "file": "components/upload-dropzone.html",
99
+ "behavior": "static",
100
+ "feedback": ""
101
+ },
102
+ {
103
+ "id": "inline-edit",
104
+ "states": [
105
+ "resting",
106
+ "editing",
107
+ "error",
108
+ "saved"
109
+ ],
110
+ "source": "astra",
111
+ "file": "components/inline-edit.html",
112
+ "behavior": "static",
113
+ "feedback": "Should probably use hyper/richclay/ library here"
114
+ },
115
+ {
116
+ "id": "settings-rows",
117
+ "states": [
118
+ "default",
119
+ "disabled"
120
+ ],
121
+ "source": "astra",
122
+ "file": "components/settings-rows.html",
123
+ "behavior": "static",
124
+ "feedback": "In general I like the higher contrast"
125
+ },
126
+ {
127
+ "id": "form-error-summary",
128
+ "states": [
129
+ "errors",
130
+ "corrected"
131
+ ],
132
+ "source": "astra",
133
+ "file": "components/form-error-summary.html",
134
+ "behavior": "static",
135
+ "feedback": "Again, in general I like the higher contrast of not having a container and all the noise that comes from a container"
136
+ },
137
+ {
138
+ "id": "split-button",
139
+ "states": [
140
+ "line",
141
+ "inset",
142
+ "line-open",
143
+ "inset-open",
144
+ "disabled"
145
+ ],
146
+ "source": "parent",
147
+ "file": "components/split-button.html",
148
+ "behavior": "static",
149
+ "feedback": "Yes, but it's not great yet. The two part button should share the same color (the gray instead of white) and the left button should not have it's right side bevel, so it looks mostly flush -- it should just have a single dark line between the left and right button or maybe a slight inset bevel, I would like to see both"
150
+ },
151
+ {
152
+ "id": "sidebar-nav",
153
+ "states": [
154
+ "expanded",
155
+ "compact"
156
+ ],
157
+ "source": "parent",
158
+ "file": "components/sidebar-nav.html",
159
+ "behavior": "static",
160
+ "feedback": "But bring the identity footer from Astra and move the collapse icon to the top right of the sidebar and have it be a left arrow icon."
161
+ },
162
+ {
163
+ "id": "app-toolbar",
164
+ "states": [
165
+ "default",
166
+ "overflow"
167
+ ],
168
+ "source": "astra",
169
+ "file": "components/app-toolbar.html",
170
+ "behavior": "static",
171
+ "feedback": "But use icons instead of text and never use white buttons here, only the darker gray/blue secondary ones"
172
+ },
173
+ {
174
+ "id": "breadcrumbs",
175
+ "states": [
176
+ "short",
177
+ "long"
178
+ ],
179
+ "source": "astra",
180
+ "file": "components/breadcrumbs.html",
181
+ "behavior": "static",
182
+ "feedback": ""
183
+ },
184
+ {
185
+ "id": "pagination",
186
+ "states": [
187
+ "first",
188
+ "middle",
189
+ "last"
190
+ ],
191
+ "source": "astra",
192
+ "file": "components/pagination.html",
193
+ "behavior": "static",
194
+ "feedback": ""
195
+ },
196
+ {
197
+ "id": "tree-view",
198
+ "states": [
199
+ "expanded",
200
+ "empty"
201
+ ],
202
+ "source": "parent",
203
+ "file": "components/tree-view.html",
204
+ "behavior": "static",
205
+ "feedback": "Yes but add the thinner height/line height on selected item from Astra (keep the same relative distance as parent between the items, but use margin instead of padding/line-height) and the left gold border on the selected item"
206
+ },
207
+ {
208
+ "id": "wizard-shell",
209
+ "states": [
210
+ "current",
211
+ "error",
212
+ "complete"
213
+ ],
214
+ "source": "astra",
215
+ "file": "components/wizard-shell.html",
216
+ "behavior": "static",
217
+ "feedback": "In general I like the higher contrast, but I do like this from the parent, let's try to incorporate it: the numbers are clearer inside their squares and the selected square being high contrast against its bg is nice"
218
+ },
219
+ {
220
+ "id": "toast-stack",
221
+ "states": [
222
+ "stack",
223
+ "success",
224
+ "error"
225
+ ],
226
+ "source": "parent",
227
+ "file": "components/toast-stack.html",
228
+ "behavior": "static",
229
+ "feedback": ""
230
+ },
231
+ {
232
+ "id": "persistent-action-banner",
233
+ "states": [
234
+ "offline",
235
+ "resolved"
236
+ ],
237
+ "source": "parent",
238
+ "file": "components/persistent-action-banner.html",
239
+ "behavior": "static",
240
+ "feedback": "But let's use the left border highlight from Astra instead of the top border -- we should be consistent"
241
+ },
242
+ {
243
+ "id": "save-status-indicator",
244
+ "states": [
245
+ "saved"
246
+ ],
247
+ "source": "new iteration",
248
+ "file": "components/save-status-indicator.html",
249
+ "behavior": "static",
250
+ "feedback": "It doesnt really need to capture all states. The only interesting state is saved. Look at the htmlfile skill and the \"Saved\" indicator there. It's just a small rounded notice in the bottom right of the page. Its bg coloring could use some work, but it's nice and out of the way like a little toast chip."
251
+ },
252
+ {
253
+ "id": "code-block",
254
+ "states": [
255
+ "default",
256
+ "wrapped"
257
+ ],
258
+ "source": "astra",
259
+ "file": "components/code-block.html",
260
+ "behavior": "static",
261
+ "feedback": "In general I like the higher contrast"
262
+ },
263
+ {
264
+ "id": "diff-view",
265
+ "states": [
266
+ "unified",
267
+ "split"
268
+ ],
269
+ "source": "parent",
270
+ "file": "components/diff-view.html",
271
+ "behavior": "static",
272
+ "feedback": ""
273
+ },
274
+ {
275
+ "id": "activity-feed",
276
+ "states": [
277
+ "recent",
278
+ "expanded"
279
+ ],
280
+ "source": "astra",
281
+ "file": "components/activity-feed.html",
282
+ "behavior": "static",
283
+ "feedback": "In general I like the higher contrast and fewer containers"
284
+ },
285
+ {
286
+ "id": "stat-tiles",
287
+ "states": [
288
+ "default",
289
+ "zero"
290
+ ],
291
+ "source": "astra",
292
+ "file": "components/stat-tiles.html",
293
+ "behavior": "static",
294
+ "feedback": "In general I like the higher contrast and fewer containers"
295
+ },
296
+ {
297
+ "id": "avatar-group",
298
+ "states": [
299
+ "group",
300
+ "fallback"
301
+ ],
302
+ "source": "parent",
303
+ "file": "components/avatar-group.html",
304
+ "behavior": "static",
305
+ "feedback": ""
306
+ },
307
+ {
308
+ "id": "small-charts",
309
+ "states": [
310
+ "bars",
311
+ "line",
312
+ "spark"
313
+ ],
314
+ "source": "astra",
315
+ "file": "components/small-charts.html",
316
+ "behavior": "static",
317
+ "feedback": "In general I like the higher contrast and fewer containers"
318
+ },
319
+ {
320
+ "id": "filter-builder",
321
+ "states": [
322
+ "applied",
323
+ "empty"
324
+ ],
325
+ "source": "astra",
326
+ "file": "components/filter-builder.html",
327
+ "behavior": "static",
328
+ "feedback": "Much stronger. The spacing, the colors, the layout."
329
+ },
330
+ {
331
+ "id": "column-manager",
332
+ "states": [
333
+ "default",
334
+ "reordered"
335
+ ],
336
+ "source": "astra",
337
+ "file": "components/column-manager.html",
338
+ "behavior": "static",
339
+ "feedback": ""
340
+ },
341
+ {
342
+ "id": "editable-grid-cells",
343
+ "states": [
344
+ "idle",
345
+ "editing",
346
+ "error"
347
+ ],
348
+ "source": "astra",
349
+ "file": "components/editable-grid-cells.html",
350
+ "behavior": "static",
351
+ "feedback": "In general I like the higher contrast and fewer containers"
352
+ },
353
+ {
354
+ "id": "split-panes",
355
+ "states": [
356
+ "list-detail",
357
+ "editor-preview"
358
+ ],
359
+ "source": "parent",
360
+ "file": "components/split-panes.html",
361
+ "behavior": "static",
362
+ "feedback": ""
363
+ },
364
+ {
365
+ "id": "rich-text-toolbar",
366
+ "states": [
367
+ "toolbar",
368
+ "menu",
369
+ "link",
370
+ "floating"
371
+ ],
372
+ "source": "astra",
373
+ "file": "components/rich-text-toolbar.html",
374
+ "behavior": "static",
375
+ "feedback": ""
376
+ },
377
+ {
378
+ "id": "kanban-board",
379
+ "states": [
380
+ "default",
381
+ "empty",
382
+ "selected"
383
+ ],
384
+ "source": "new iteration",
385
+ "file": "components/kanban-board.html",
386
+ "behavior": "static",
387
+ "feedback": "The current iterations look a bit bland and uninspired, I think we need a full bells and whistles independent bake off for this"
388
+ }
389
+ ],
390
+ "contexts": [
391
+ {
392
+ "id": "context-hypercms",
393
+ "states": [
394
+ "default",
395
+ "error"
396
+ ],
397
+ "source": "new iteration",
398
+ "file": "components/context-hypercms.html",
399
+ "behavior": "static",
400
+ "feedback": ""
401
+ },
402
+ {
403
+ "id": "context-quickcrop",
404
+ "states": [
405
+ "locked",
406
+ "free"
407
+ ],
408
+ "source": "new iteration",
409
+ "file": "components/context-quickcrop.html",
410
+ "behavior": "static",
411
+ "feedback": ""
412
+ }
413
+ ]
414
+ }
package/examples/components/reference/parent/index.html ADDED
@@ -0,0 +1 @@
1
+ <!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Parent corrected UI · Bevel</title><link rel="stylesheet" href="../baseline/bevel-fonts.css"><link rel="stylesheet" href="../baseline/bevel.css"><style>body{max-width:1000px;margin:40px auto;padding:24px;font:16px var(--bevel-font-sans)}h1{font:42px var(--bevel-font-serif)}nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}a{border:1px solid var(--bevel-line-2);padding:16px;color:var(--bevel-ink);text-decoration:none}small{display:block;color:var(--bevel-muted);font:11px var(--bevel-font-mono);margin-top:8px}</style><h1>Bevel, shaped by your choices.</h1><p>33 corrected static components. Application behavior comes after visual selection.</p><nav><a href="components/modal.html">Modal<small>4 visual states</small></a><a href="components/popover-menu.html">Popover menu<small>2 visual states</small></a><a href="components/drawer.html">Drawer<small>3 visual states</small></a><a href="components/popconfirm.html">Popconfirm<small>3 visual states</small></a><a href="components/combobox.html">Combobox<small>4 visual states</small></a><a href="components/multi-select-picker.html">Multi-select picker<small>3 visual states</small></a><a href="components/selectable-cards.html">Selectable cards<small>2 visual states</small></a><a href="components/upload-dropzone.html">Upload dropzone<small>4 visual states</small></a><a href="components/inline-edit.html">Inline edit<small>4 visual states</small></a><a href="components/settings-rows.html">Settings rows<small>2 visual states</small></a><a href="components/form-error-summary.html">Form error summary<small>2 visual states</small></a><a href="components/split-button.html">Split button<small>5 visual states</small></a><a href="components/sidebar-nav.html">Sidebar nav<small>2 visual states</small></a><a href="components/app-toolbar.html">App toolbar<small>2 visual states</small></a><a href="components/breadcrumbs.html">Breadcrumbs<small>2 visual states</small></a><a href="components/pagination.html">Pagination<small>3 visual states</small></a><a href="components/tree-view.html">Tree view<small>2 visual states</small></a><a href="components/wizard-shell.html">Wizard shell<small>3 visual states</small></a><a href="components/toast-stack.html">Toast stack<small>3 visual states</small></a><a href="components/persistent-action-banner.html">Persistent action banner<small>2 visual states</small></a><a href="components/save-status-indicator.html">Save-status indicator<small>1 visual states</small></a><a href="components/code-block.html">Code block<small>2 visual states</small></a><a href="components/diff-view.html">Diff view<small>2 visual states</small></a><a href="components/activity-feed.html">Activity feed<small>2 visual states</small></a><a href="components/stat-tiles.html">Stat tiles<small>2 visual states</small></a><a href="components/avatar-group.html">Avatar group<small>2 visual states</small></a><a href="components/small-charts.html">Small charts<small>3 visual states</small></a><a href="components/filter-builder.html">Filter builder<small>2 visual states</small></a><a href="components/column-manager.html">Column manager<small>2 visual states</small></a><a href="components/editable-grid-cells.html">Editable grid cells<small>3 visual states</small></a><a href="components/split-panes.html">Split panes<small>2 visual states</small></a><a href="components/rich-text-toolbar.html">Rich text toolbar<small>4 visual states</small></a><a href="components/kanban-board.html">Kanban board<small>3 visual states</small></a></nav></html>