@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/avatar-group.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>Avatar group · 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="avatar-group" data-reference-phase="static" data-selected-source="parent"><section data-ref-state="group" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">People / 26</div><h1>A human detail</h1><p>Recognizable at a glance, useful at a small size.</p></div></header><div class="p-panel"><div class="p-between"><div><h2>Working together</h2><p class="p-small p-muted" style="margin-top:7px">7 people in Northstar Studio</p></div><span class="p-badge">Shared</span></div><div class="p-avatar-stack" data-part="avatar-stack"><img alt="Northstar Studio workspace" class="p-avatar-photo" src="../../fixtures/workspace.jpg"/><span aria-label="Mira Chen" class="p-avatar-wrap"><span aria-hidden="true" class="p-avatar">MC</span><i aria-label="Online" class="p-presence"></i></span><span aria-label="Alex Rivera" class="p-avatar-wrap"><span aria-hidden="true" class="p-avatar">AR</span></span><span aria-label="Sam Patel" class="p-avatar-wrap"><span aria-hidden="true" class="p-avatar">SP</span></span><span aria-label="Three more members" class="p-avatar p-overflow">+3</span></div><div class="p-avatar-list"><div class="p-row"><span aria-hidden="true" class="p-avatar">MC</span><div><strong class="p-small">Mira Chen</strong><p class="p-small p-muted">Online now</p></div></div><div class="p-row"><span aria-hidden="true" class="p-avatar">AR</span><div><strong class="p-small">Alex Rivera</strong><p class="p-small p-muted">Developer</p></div></div><div class="p-row"><span aria-hidden="true" class="p-avatar">SP</span><div><strong class="p-small">Sam Patel</strong><p class="p-small p-muted">Editor</p></div></div></div></div></main></section>
4
+ <section data-ref-state="fallback" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">People / 26</div><h1>A human detail</h1><p>Recognizable at a glance, useful at a small size.</p></div></header><div class="p-panel"><div class="p-between"><div><h2>Working together</h2><p class="p-small p-muted" style="margin-top:7px">7 people in Northstar Studio</p></div><span class="p-badge">Shared</span></div><div class="p-avatar-stack" data-part="avatar-stack"><span aria-hidden="true" class="p-avatar">NS</span><span aria-label="Mira Chen" class="p-avatar-wrap"><span aria-hidden="true" class="p-avatar">MC</span><i aria-label="Online" class="p-presence"></i></span><span aria-label="Alex Rivera" class="p-avatar-wrap"><span aria-hidden="true" class="p-avatar">AR</span></span><span aria-label="Sam Patel" class="p-avatar-wrap"><span aria-hidden="true" class="p-avatar">SP</span></span><span aria-label="Three more members" class="p-avatar p-overflow">+3</span></div><div class="p-avatar-list"><div class="p-row"><span aria-hidden="true" class="p-avatar">MC</span><div><strong class="p-small">Mira Chen</strong><p class="p-small p-muted">Online now</p></div></div><div class="p-row"><span aria-hidden="true" class="p-avatar">AR</span><div><strong class="p-small">Alex Rivera</strong><p class="p-small p-muted">Developer</p></div></div><div class="p-row"><span aria-hidden="true" class="p-avatar">SP</span><div><strong class="p-small">Sam Patel</strong><p class="p-small p-muted">Editor</p></div></div></div></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/breadcrumbs.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>Breadcrumbs · 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="breadcrumbs" data-reference-phase="static" data-selected-source="astra"><section data-ref-state="short" inert=""><div class="specimen"><nav aria-label="Breadcrumb" class="breadcrumb"><a href="#level-0">Northstar Studio</a><span aria-hidden="true">/</span><a href="#level-1">Field notes</a><span aria-hidden="true">/</span><strong aria-current="page">A place for good work</strong></nav><div style="padding-top:34px"><div class="eyebrow">FIELD NOTE / 001</div><h1>A place for<br/>good work.</h1><p class="muted" style="max-width:420px;margin-top:20px">Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p></div><div class="rule row"><span class="avatar">MC</span><small>Mira Chen · Updated at 10:42</small></div><div hidden=""><span id="level-0">Northstar Studio</span><span id="level-1">Field notes</span></div></div></section><section data-ref-state="long" hidden="" inert=""><div class="specimen"><nav aria-label="Breadcrumb" class="breadcrumb"><a href="#level-0">Northstar Studio</a><span aria-hidden="true">/</span><a href="#level-1">Projects</a><span aria-hidden="true">/</span><a href="#level-2">Field notes</a><span aria-hidden="true">/</span><a href="#level-3">Documents</a><span aria-hidden="true">/</span><a href="#level-4">The field guide</a><span aria-hidden="true">/</span><strong aria-current="page">A place for good work</strong></nav><div style="padding-top:34px"><div class="eyebrow">FIELD NOTE / 001</div><h1>A place for<br/>good work.</h1><p class="muted" style="max-width:420px;margin-top:20px">Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p></div><div class="rule row"><span class="avatar">MC</span><small>Mira Chen · Updated at 10:42</small></div><div hidden=""><span id="level-0">Northstar Studio</span><span id="level-1">Projects</span><span id="level-2">Field notes</span><span id="level-3">Documents</span><span id="level-4">The field guide</span></div></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/code-block.html ADDED
@@ -0,0 +1,8 @@
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>Code block · 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="code-block" 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>Small code. Clear intent.</h1><p>A readable home for the details.</p></header><div class="code-shell"><div class="code-head"><span>▤ field-note.html</span><span class="badge">HTML</span><div class="spacer"></div><button class="bevel-button" type="button"><span class="bevel-button__label">Wrap lines</span></button><button class="bevel-button" data-copy="" type="button"><span class="bevel-button__label">Copy</span></button></div><ol class="code-lines" data-part="code"><li>&lt;article class="field-note"&gt;</li><li> &lt;h1&gt;A place for good work&lt;/h1&gt;</li><li> &lt;p data-description="Documents, decisions and the small details that make a project feel like home"&gt;Keep the useful things close.&lt;/p&gt;</li><li>&lt;/article&gt;</li></ol><pre data-copy-source="" hidden="">&lt;article class="field-note"&gt;
3
+ &lt;h1&gt;A place for good work&lt;/h1&gt;
4
+ &lt;p data-description="Documents, decisions and the small details that make a project feel like home"&gt;Keep the useful things close.&lt;/p&gt;
5
+ &lt;/article&gt;</pre></div><p class="note">A plain HTML file, ready to make your own.</p></div></section><section data-ref-state="wrapped" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Small code. Clear intent.</h1><p>A readable home for the details.</p></header><div class="code-shell"><div class="code-head"><span>▤ field-note.html</span><span class="badge">HTML</span><div class="spacer"></div><button class="bevel-button" type="button"><span class="bevel-button__label">Unwrap</span></button><button class="bevel-button" data-copy="" type="button"><span class="bevel-button__label">Copy</span></button></div><ol class="code-lines wrap-code" data-part="code"><li>&lt;article class="field-note"&gt;</li><li> &lt;h1&gt;A place for good work&lt;/h1&gt;</li><li> &lt;p data-description="Documents, decisions and the small details that make a project feel like home"&gt;Keep the useful things close.&lt;/p&gt;</li><li>&lt;/article&gt;</li></ol><pre data-copy-source="" hidden="">&lt;article class="field-note"&gt;
6
+ &lt;h1&gt;A place for good work&lt;/h1&gt;
7
+ &lt;p data-description="Documents, decisions and the small details that make a project feel like home"&gt;Keep the useful things close.&lt;/p&gt;
8
+ &lt;/article&gt;</pre></div><p class="note">A plain HTML file, ready to make your own.</p></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/column-manager.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>Column manager · 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="column-manager" 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>Make the table yours.</h1><p>Visibility and order, without losing your place.</p></header><div class="panel" style="max-width:460px;margin:auto"><div class="pad" style="border-bottom:1px solid var(--bevel-line)"><h2>Your view of the records.</h2><p class="note">Choose visible columns. Use arrows to reorder.</p></div><div data-part="column-list"><div class="column-item"><span aria-hidden="true" class="muted">⠿</span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-column-check="" disabled="" type="checkbox" value="Invoice"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Invoice</span></label><span class="badge">Pinned</span><button aria-label="Move Invoice up" class="bevel-button" data-move-column="up" disabled="" type="button"><span class="bevel-button__label">↑</span></button><button aria-label="Move Invoice down" class="bevel-button" data-move-column="down" disabled="" type="button"><span class="bevel-button__label">↓</span></button></div><div class="column-item"><span aria-hidden="true" class="muted">⠿</span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-column-check="" type="checkbox" value="Client"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Client</span></label><span class="mono muted" style="font-size:10px">2</span><button aria-label="Move Client up" class="bevel-button" data-move-column="up" disabled="" type="button"><span class="bevel-button__label">↑</span></button><button aria-label="Move Client down" class="bevel-button" data-move-column="down" type="button"><span class="bevel-button__label">↓</span></button></div><div class="column-item"><span aria-hidden="true" class="muted">⠿</span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-column-check="" type="checkbox" value="Amount"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Amount</span></label><span class="mono muted" style="font-size:10px">3</span><button aria-label="Move Amount up" class="bevel-button" data-move-column="up" type="button"><span class="bevel-button__label">↑</span></button><button aria-label="Move Amount down" class="bevel-button" data-move-column="down" type="button"><span class="bevel-button__label">↓</span></button></div><div class="column-item"><span aria-hidden="true" class="muted">⠿</span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-column-check="" type="checkbox" value="Status"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Status</span></label><span class="mono muted" style="font-size:10px">4</span><button aria-label="Move Status up" class="bevel-button" data-move-column="up" type="button"><span class="bevel-button__label">↑</span></button><button aria-label="Move Status down" class="bevel-button" data-move-column="down" type="button"><span class="bevel-button__label">↓</span></button></div><div class="column-item"><span aria-hidden="true" class="muted">⠿</span><label class="bevel-checkbox bevel-checkbox--small"><input class="bevel-sr-only" data-column-check="" type="checkbox" value="Owner"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Owner</span></label><span class="mono muted" style="font-size:10px">5</span><button aria-label="Move Owner up" class="bevel-button" data-move-column="up" type="button"><span class="bevel-button__label">↑</span></button><button aria-label="Move Owner down" class="bevel-button" data-move-column="down" disabled="" type="button"><span class="bevel-button__label">↓</span></button></div></div><div class="pad"><small>Invoice stays pinned as the record identifier.</small></div></div></div></section><section data-ref-state="reordered" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Make the table yours.</h1><p>Visibility and order, without losing your place.</p></header><div class="panel" style="max-width:460px;margin:auto"><div class="pad" style="border-bottom:1px solid var(--bevel-line)"><h2>Your view of the records.</h2><p class="note">Choose visible columns. Use arrows to reorder.</p></div><div data-part="column-list"><div class="column-item"><span aria-hidden="true" class="muted">⠿</span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-column-check="" disabled="" type="checkbox" value="Invoice"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Invoice</span></label><span class="badge">Pinned</span><button aria-label="Move Invoice up" class="bevel-button" data-move-column="up" disabled="" type="button"><span class="bevel-button__label">↑</span></button><button aria-label="Move Invoice down" class="bevel-button" data-move-column="down" disabled="" type="button"><span class="bevel-button__label">↓</span></button></div><div class="column-item"><span aria-hidden="true" class="muted">⠿</span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-column-check="" type="checkbox" value="Status"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Status</span></label><span class="mono muted" style="font-size:10px">2</span><button aria-label="Move Status up" class="bevel-button" data-move-column="up" disabled="" type="button"><span class="bevel-button__label">↑</span></button><button aria-label="Move Status down" class="bevel-button" data-move-column="down" type="button"><span class="bevel-button__label">↓</span></button></div><div class="column-item"><span aria-hidden="true" class="muted">⠿</span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-column-check="" type="checkbox" value="Client"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Client</span></label><span class="mono muted" style="font-size:10px">3</span><button aria-label="Move Client up" class="bevel-button" data-move-column="up" type="button"><span class="bevel-button__label">↑</span></button><button aria-label="Move Client down" class="bevel-button" data-move-column="down" type="button"><span class="bevel-button__label">↓</span></button></div><div class="column-item"><span aria-hidden="true" class="muted">⠿</span><label class="bevel-checkbox bevel-checkbox--small"><input checked="" class="bevel-sr-only" data-column-check="" type="checkbox" value="Amount"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Amount</span></label><span class="mono muted" style="font-size:10px">4</span><button aria-label="Move Amount up" class="bevel-button" data-move-column="up" type="button"><span class="bevel-button__label">↑</span></button><button aria-label="Move Amount down" class="bevel-button" data-move-column="down" type="button"><span class="bevel-button__label">↓</span></button></div><div class="column-item"><span aria-hidden="true" class="muted">⠿</span><label class="bevel-checkbox bevel-checkbox--small"><input class="bevel-sr-only" data-column-check="" type="checkbox" value="Owner"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Owner</span></label><span class="mono muted" style="font-size:10px">5</span><button aria-label="Move Owner up" class="bevel-button" data-move-column="up" type="button"><span class="bevel-button__label">↑</span></button><button aria-label="Move Owner down" class="bevel-button" data-move-column="down" disabled="" type="button"><span class="bevel-button__label">↓</span></button></div></div><div class="pad"><small>Invoice stays pinned as the record identifier.</small></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/components/combobox.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>Combobox · 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="combobox" data-reference-phase="static" data-selected-source="parent"><section data-ref-state="open" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Choose / 05</div><h1>The right person</h1><p>Find a teammate by name.</p></div></header><div class="p-picker" data-picker=""><label class="p-field" style="margin-bottom:8px"><span>Project owner</span></label><div class="p-search"><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="M16 16l5 5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0"></path></svg><input aria-controls="people-open" aria-expanded="true" aria-label="Search members" autocomplete="off" data-member-search="" placeholder="Search people…" role="combobox" value=""/><button aria-label="Open choices" 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 aria-label="Project members" class="p-options" id="people-open" role="listbox"><button aria-selected="true" class="p-option" data-initials="MC" data-person="Mira Chen" role="option"><span aria-hidden="true" class="p-avatar">MC</span><span class="p-person"><strong>Mira Chen</strong><small>Designer</small></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 aria-selected="false" class="p-option" data-initials="AR" data-person="Alex Rivera" role="option"><span aria-hidden="true" class="p-avatar">AR</span><span class="p-person"><strong>Alex Rivera</strong><small>Developer</small></span></button><button aria-selected="false" class="p-option" data-initials="SP" data-person="Sam Patel" role="option"><span aria-hidden="true" class="p-avatar">SP</span><span class="p-person"><strong>Sam Patel</strong><small>Editor</small></span></button><button aria-selected="false" class="p-option" data-initials="JP" data-person="Jules Park" role="option"><span aria-hidden="true" class="p-avatar">JP</span><span class="p-person"><strong>Jules Park</strong><small>Owner</small></span></button><div class="p-empty" data-picker-empty="" hidden=""><h3>No one by that name.</h3><p class="p-small">Try a different name.</p></div></div><div class="p-picker-foot">4 members in Northstar Studio</div></div></main></section>
4
+ <section data-ref-state="closed" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Choose / 05</div><h1>The right person</h1><p>Find a teammate by name.</p></div></header><div class="p-picker" data-picker=""><label class="p-field" style="margin-bottom:8px"><span>Project owner</span></label><div class="p-search"><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="M16 16l5 5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0"></path></svg><input aria-controls="people-closed" aria-expanded="false" aria-label="Search members" autocomplete="off" data-member-search="" placeholder="Search people…" role="combobox" value="Mira Chen"/><button aria-label="Open choices" 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></main></section>
5
+ <section data-ref-state="filtered" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Choose / 05</div><h1>The right person</h1><p>Find a teammate by name.</p></div></header><div class="p-picker" data-picker=""><label class="p-field" style="margin-bottom:8px"><span>Project owner</span></label><div class="p-search"><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="M16 16l5 5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0"></path></svg><input aria-controls="people-filtered" aria-expanded="true" aria-label="Search members" autocomplete="off" data-member-search="" placeholder="Search people…" role="combobox" value="mi"/><button aria-label="Open choices" 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 aria-label="Project members" class="p-options" id="people-filtered" role="listbox"><button aria-selected="true" class="p-option" data-initials="MC" data-person="Mira Chen" role="option"><span aria-hidden="true" class="p-avatar">MC</span><span class="p-person"><strong>Mira Chen</strong><small>Designer</small></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 aria-selected="false" class="p-option" data-initials="AR" data-person="Alex Rivera" hidden="" role="option"><span aria-hidden="true" class="p-avatar">AR</span><span class="p-person"><strong>Alex Rivera</strong><small>Developer</small></span></button><button aria-selected="false" class="p-option" data-initials="SP" data-person="Sam Patel" hidden="" role="option"><span aria-hidden="true" class="p-avatar">SP</span><span class="p-person"><strong>Sam Patel</strong><small>Editor</small></span></button><button aria-selected="false" class="p-option" data-initials="JP" data-person="Jules Park" hidden="" role="option"><span aria-hidden="true" class="p-avatar">JP</span><span class="p-person"><strong>Jules Park</strong><small>Owner</small></span></button><div class="p-empty" data-picker-empty="" hidden=""><h3>No one by that name.</h3><p class="p-small">Try a different name.</p></div></div><div class="p-picker-foot">4 members in Northstar Studio</div></div></main></section>
6
+ <section data-ref-state="empty" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Choose / 05</div><h1>The right person</h1><p>Find a teammate by name.</p></div></header><div class="p-picker" data-picker=""><label class="p-field" style="margin-bottom:8px"><span>Project owner</span></label><div class="p-search"><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="M16 16l5 5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0"></path></svg><input aria-controls="people-empty" aria-expanded="true" aria-label="Search members" autocomplete="off" data-member-search="" placeholder="Search people…" role="combobox" value="Taylor"/><button aria-label="Open choices" 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 aria-label="Project members" class="p-options" id="people-empty" role="listbox"><button aria-selected="true" class="p-option" data-initials="MC" data-person="Mira Chen" hidden="" role="option"><span aria-hidden="true" class="p-avatar">MC</span><span class="p-person"><strong>Mira Chen</strong><small>Designer</small></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 aria-selected="false" class="p-option" data-initials="AR" data-person="Alex Rivera" hidden="" role="option"><span aria-hidden="true" class="p-avatar">AR</span><span class="p-person"><strong>Alex Rivera</strong><small>Developer</small></span></button><button aria-selected="false" class="p-option" data-initials="SP" data-person="Sam Patel" hidden="" role="option"><span aria-hidden="true" class="p-avatar">SP</span><span class="p-person"><strong>Sam Patel</strong><small>Editor</small></span></button><button aria-selected="false" class="p-option" data-initials="JP" data-person="Jules Park" hidden="" role="option"><span aria-hidden="true" class="p-avatar">JP</span><span class="p-person"><strong>Jules Park</strong><small>Owner</small></span></button><div class="p-empty" data-picker-empty=""><h3>No one by that name.</h3><p class="p-small">Try a different name.</p></div></div><div class="p-picker-foot">4 members in Northstar Studio</div></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/context-hypercms.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>HyperCMS inspector · 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="context-hypercms" data-reference-phase="static" data-selected-source="astra"><section data-ref-state="default" inert=""><div class="hcms-context"><article class="hcms-preview"><div class="eyebrow">LIVE PAGE / FIELD NOTES</div><h1>A place for<br/>good work.</h1><img alt="A laptop and notebook on a sunlit desk" src="../../fixtures/workspace.jpg"/><p class="muted">Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p><div class="rule"><small>Inspector visual reference<br/>Changes stay in this example.</small></div></article><aside class="hcms-shell hcms-panel hcms-side-right" data-hcms-shell=""><div class="hcms-shell-body"><header class="hcms-shell-header"><div class="hcms-shell-heading"><div class="hcms-shell-eyebrow">HYPERCMS / INSPECTOR</div><h2 class="hcms-shell-title">Page content</h2></div><button aria-label="Close inspector" class="bevel-button" data-action="Inspector close simulated" data-hcms-action="close" type="button"><span class="bevel-button__label">×</span></button></header><div class="hcms-shell-notice" hidden="" role="status"></div><div class="hcms-shell-error notice error" hidden="" role="alert">Give the page a title before saving.</div><div class="hcms-form" data-hcms-form-root=""><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Page title</span><textarea aria-invalid="false" class="bevel-input" data-hcms-field="" rows="1">A place for good work</textarea><span class="hcms-error" hidden="">A title is required.</span></label><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Introduction</span><textarea aria-invalid="false" class="bevel-input" data-hcms-field="" rows="1">Keep the useful things close.</textarea><span class="hcms-error" hidden="">A title is required.</span></label><section class="hcms-object" data-hcms-shape="object"><h3 class="hcms-object-title" data-hcms-label="">Field guide link</h3><div class="hcms-object-fields"><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Label</span><textarea aria-invalid="false" class="bevel-input" data-hcms-field="" rows="1">Read the field guide</textarea><span class="hcms-error" hidden="">A title is required.</span></label><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Destination</span><textarea aria-invalid="false" class="bevel-input" data-hcms-field="" rows="1">https://example.test/field-guide</textarea><span class="hcms-error" hidden="">A title is required.</span></label></div><div class="hcms-error" hidden=""></div></section><section class="hcms-array hcms-object-array hcms-array--cards" data-hcms-shape="object-array"><header class="hcms-array-header"><h3 class="hcms-array-title" data-hcms-label="">Contributors <small>1 item</small></h3></header><div class="hcms-array-items"><article class="hcms-card"><div aria-hidden="true" class="hcms-drag-handle">⠿</div><div class="hcms-card-body"><div class="hcms-card-fields"><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Name</span><textarea aria-invalid="false" class="bevel-input" data-hcms-field="" rows="1">Mira Chen</textarea><span class="hcms-error" hidden="">A title is required.</span></label></div><div class="hcms-card-controls"><button class="bevel-button bevel-button--quiet" data-action="Contributor removal simulated" data-hcms-action="remove" type="button"><span class="bevel-button__label">Remove</span></button></div></div><div class="hcms-error" hidden=""></div></article></div><div class="hcms-error" hidden=""></div></section><div class="hcms-field hcms-upload hcms-upload--image" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Cover image</span><div class="row"><img alt="Workspace" data-hcms-field="" src="../../fixtures/workspace.jpg"/><div><small>workspace.jpg · 184 KB</small><br/><button class="bevel-button bevel-button--quiet" data-action="Image chooser simulated" type="button"><span class="bevel-button__label">Change image</span></button></div></div><div class="hcms-error" hidden=""></div></div></div><footer class="hcms-shell-footer"><button class="bevel-button bevel-button--primary hcms-shell-save" data-action="Page changes saved in this local reference" type="button"><span class="bevel-button__label">Save changes</span></button></footer></div></aside></div></section><section data-ref-state="error" hidden="" inert=""><div class="hcms-context"><article class="hcms-preview"><div class="eyebrow">LIVE PAGE / FIELD NOTES</div><h1>A place for<br/>good work.</h1><img alt="A laptop and notebook on a sunlit desk" src="../../fixtures/workspace.jpg"/><p class="muted">Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p><div class="rule"><small>Inspector visual reference<br/>Changes stay in this example.</small></div></article><aside class="hcms-shell hcms-panel hcms-side-right" data-hcms-shell=""><div class="hcms-shell-body"><header class="hcms-shell-header"><div class="hcms-shell-heading"><div class="hcms-shell-eyebrow">HYPERCMS / INSPECTOR</div><h2 class="hcms-shell-title">Page content</h2></div><button aria-label="Close inspector" class="bevel-button" data-action="Inspector close simulated" data-hcms-action="close" type="button"><span class="bevel-button__label">×</span></button></header><div class="hcms-shell-notice" hidden="" role="status"></div><div class="hcms-shell-error notice error" role="alert">Give the page a title before saving.</div><div class="hcms-form" data-hcms-form-root=""><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Page title</span><textarea aria-invalid="true" class="bevel-input invalid" data-hcms-field="" rows="1"></textarea><span class="hcms-error">A title is required.</span></label><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Introduction</span><textarea aria-invalid="false" class="bevel-input" data-hcms-field="" rows="1">Keep the useful things close.</textarea><span class="hcms-error" hidden="">A title is required.</span></label><section class="hcms-object" data-hcms-shape="object"><h3 class="hcms-object-title" data-hcms-label="">Field guide link</h3><div class="hcms-object-fields"><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Label</span><textarea aria-invalid="false" class="bevel-input" data-hcms-field="" rows="1">Read the field guide</textarea><span class="hcms-error" hidden="">A title is required.</span></label><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Destination</span><textarea aria-invalid="false" class="bevel-input" data-hcms-field="" rows="1">https://example.test/field-guide</textarea><span class="hcms-error" hidden="">A title is required.</span></label></div><div class="hcms-error" hidden=""></div></section><section class="hcms-array hcms-object-array hcms-array--cards" data-hcms-shape="object-array"><header class="hcms-array-header"><h3 class="hcms-array-title" data-hcms-label="">Contributors <small>1 item</small></h3></header><div class="hcms-array-items"><article class="hcms-card"><div aria-hidden="true" class="hcms-drag-handle">⠿</div><div class="hcms-card-body"><div class="hcms-card-fields"><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Name</span><textarea aria-invalid="false" class="bevel-input" data-hcms-field="" rows="1">Mira Chen</textarea><span class="hcms-error" hidden="">A title is required.</span></label></div><div class="hcms-card-controls"><button class="bevel-button bevel-button--quiet" data-action="Contributor removal simulated" data-hcms-action="remove" type="button"><span class="bevel-button__label">Remove</span></button></div></div><div class="hcms-error" hidden=""></div></article></div><div class="hcms-error" hidden=""></div></section><div class="hcms-field hcms-upload hcms-upload--image" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Cover image</span><div class="row"><img alt="Workspace" data-hcms-field="" src="../../fixtures/workspace.jpg"/><div><small>workspace.jpg · 184 KB</small><br/><button class="bevel-button bevel-button--quiet" data-action="Image chooser simulated" type="button"><span class="bevel-button__label">Change image</span></button></div></div><div class="hcms-error" hidden=""></div></div></div><footer class="hcms-shell-footer"><button class="bevel-button bevel-button--primary hcms-shell-save" data-action="Page changes saved in this local reference" type="button"><span class="bevel-button__label">Save changes</span></button></footer></div></aside></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/context-quickcrop.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>Quickcrop upload and crop · 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="context-quickcrop" data-reference-phase="static" data-selected-source="parent"><section data-ref-state="locked" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Theme in context</div><h1>Finish the image before it lands</h1><p>Quickcrop’s stage inside the Hyperclay modal family.</p></div></header><div class="p-crop-context"><div class="p-modal" style="width:100%;padding:25px"><button aria-label="Close dialog" class="p-corner" type="button"><svg aria-hidden="true" viewBox="0 0 48 48"><path class="corner-bg" d="M0 0h48v48Z"></path><path class="corner-x" d="M28 8h3v3h3v3h3v-3h3V8h3v6h-3v3h-3v3h3v3h3v6h-3v-3h-3v-3h-3v3h-3v3h-3v-6h3v-3h3v-3h-3v-3h-3Z"></path></svg></button><div class="p-eyebrow">Image / workspace.jpg</div><div class="p-between" style="margin-bottom:20px"><h2 style="margin:0;font-size:28px">Find the useful part.</h2><span class="p-badge">1:1 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-crop-actions"><div class="p-row"><button class="bevel-button bevel-button--small bevel-button--primary" type="button"><span class="bevel-button__label">Square</span></button><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Free</span></button></div><span class="p-small p-muted">Aspect ratio locked</span><div class="qc-bar"><button class="qc-btn" type="button">Reset preview</button><button class="qc-btn qc-btn-primary" data-local-action="Crop confirmed in this preview" type="button">Use image</button></div></div></div></div></main></section>
4
+ <section data-ref-state="free" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Theme in context</div><h1>Finish the image before it lands</h1><p>Quickcrop’s stage inside the Hyperclay modal family.</p></div></header><div class="p-crop-context"><div class="p-modal" style="width:100%;padding:25px"><button aria-label="Close dialog" class="p-corner" type="button"><svg aria-hidden="true" viewBox="0 0 48 48"><path class="corner-bg" d="M0 0h48v48Z"></path><path class="corner-x" d="M28 8h3v3h3v3h3v-3h3V8h3v6h-3v3h-3v3h3v3h3v6h-3v-3h-3v-3h-3v3h-3v3h-3v-6h3v-3h3v-3h-3v-3h-3Z"></path></svg></button><div class="p-eyebrow">Image / workspace.jpg</div><div class="p-between" style="margin-bottom:20px"><h2 style="margin:0;font-size:28px">Find the useful part.</h2><span class="p-badge">Free 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 free"><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">960 × 480</span></div><div class="p-crop-actions"><div class="p-row"><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Square</span></button><button class="bevel-button bevel-button--small bevel-button--primary" type="button"><span class="bevel-button__label">Free</span></button></div><span class="p-small p-muted">Unconstrained crop</span><div class="qc-bar"><button class="qc-btn" type="button">Reset preview</button><button class="qc-btn qc-btn-primary" data-local-action="Crop confirmed in this preview" type="button">Use image</button></div></div></div></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/diff-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>Diff 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="diff-view" data-reference-phase="static" data-selected-source="parent"><section data-ref-state="unified" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Reference / 23</div><h1>See what changed</h1><p>The before and after stay close enough to compare.</p></div></header><div class="p-diff" data-part="diff-frame"><header><span class="p-row"><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-note.html</span><div class="p-row"><span class="p-badge teal">+2</span><span class="p-badge ox">−2</span><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Side by side</span></button></div></header><div class="p-diff-hunk">@@ 1,4 → 1,4 @@</div><div class="p-diff-line"><span>1</span><span> </span><code>&lt;article class="field-note"&gt;</code></div><div class="p-diff-line removed"><span>2</span><span>−</span><code>&lt;h1&gt;A place for <mark>ideas</mark>&lt;/h1&gt;</code></div><div class="p-diff-line added"><span>2</span><span>+</span><code>&lt;h1&gt;A place for <mark>good work</mark>&lt;/h1&gt;</code></div><div class="p-diff-line removed"><span>3</span><span>−</span><code>&lt;p&gt;Keep <mark>everything</mark> close.&lt;/p&gt;</code></div><div class="p-diff-line added"><span>3</span><span>+</span><code>&lt;p&gt;Keep <mark>the useful things</mark> close.&lt;/p&gt;</code></div><div class="p-diff-line"><span>4</span><span> </span><code>&lt;/article&gt;</code></div><footer>Updated by Mira Chen · today at 10:42</footer></div></main></section>
4
+ <section data-ref-state="split" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Reference / 23</div><h1>See what changed</h1><p>The before and after stay close enough to compare.</p></div></header><div class="p-diff" data-part="diff-frame"><header><span class="p-row"><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-note.html</span><div class="p-row"><span class="p-badge teal">+2</span><span class="p-badge ox">−2</span><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Unified view</span></button></div></header><div class="p-diff-split"><section><h3>Before</h3><p class="removed">A place for <mark>ideas</mark></p><p class="removed">Keep <mark>everything</mark> close.</p></section><section><h3>After</h3><p class="added">A place for <mark>good work</mark></p><p class="added">Keep <mark>the useful things</mark> close.</p></section></div><footer>Updated by Mira Chen · today at 10:42</footer></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/drawer.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>Drawer · 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="drawer" data-reference-phase="static" data-selected-source="astra"><section data-ref-state="open" inert=""><div class="drawer-scene" data-part="drawer"><div class="drawer-underlay"><div class="eyebrow">WORKSPACE</div><h2>Invoices</h2><p class="note">4 records</p><div class="rule">INV-0431</div><div class="rule">INV-0432</div><div class="rule">INV-0433</div></div><aside class="drawer-panel"><button aria-label="Close details" class="r-diagonal-close" type="button"><svg viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="micromodal__close-bg" d="M132 132.5 1 1.5h131v131Z" /><path class="micromodal__close-x" fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" /></svg></button><header><div class="row between"><span class="eyebrow">INVOICE / 0432</span></div><h2>Northstar Studio</h2><div class="row between" style="margin-top:18px"><span class="mono" style="font-size:28px">$3,200.00</span><span class="badge bad">Overdue</span></div></header><main><dl class="detail-grid"><dt>Client</dt><dd>Northstar Studio</dd><dt>Issued</dt><dd class="mono">Aug 24, 2026</dd><dt>Due</dt><dd class="mono bad">Sep 01, 2026</dd><dt>Owner</dt><dd>Mira Chen</dd></dl><div class="rule"><div class="eyebrow">LINE ITEMS</div><div class="listrow between"><span>Design direction <small>× 1</small></span><span class="mono">$2,400</span></div><div class="listrow between"><span>Editorial review <small>× 2</small></span><span class="mono">$800</span></div></div></main><footer><div class="row between"><small>Updated at 10:42</small><button class="bevel-button bevel-button--primary" data-action="Invoice marked paid locally" type="button"><span class="bevel-button__label">Mark as paid</span></button></div></footer></aside></div></section><section data-ref-state="long" hidden="" inert=""><div class="drawer-scene" data-part="drawer"><div class="drawer-underlay"><div class="eyebrow">WORKSPACE</div><h2>Invoices</h2><p class="note">4 records</p><div class="rule">INV-0431</div><div class="rule">INV-0432</div><div class="rule">INV-0433</div></div><aside class="drawer-panel"><button aria-label="Close details" class="r-diagonal-close" type="button"><svg viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="micromodal__close-bg" d="M132 132.5 1 1.5h131v131Z" /><path class="micromodal__close-x" fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" /></svg></button><header><div class="row between"><span class="eyebrow">INVOICE / 0432</span></div><h2>Northstar Studio</h2><div class="row between" style="margin-top:18px"><span class="mono" style="font-size:28px">$3,200.00</span><span class="badge bad">Overdue</span></div></header><main><dl class="detail-grid"><dt>Client</dt><dd>Northstar Studio</dd><dt>Issued</dt><dd class="mono">Aug 24, 2026</dd><dt>Due</dt><dd class="mono bad">Sep 01, 2026</dd><dt>Owner</dt><dd>Mira Chen</dd></dl><div class="rule"><div class="eyebrow">LINE ITEMS</div><div class="listrow between"><span>Design direction <small>× 1</small></span><span class="mono">$2,400</span></div><div class="listrow between"><span>Editorial review <small>× 2</small></span><span class="mono">$800</span></div></div><div class="rule"><h3>Activity</h3><div class="listrow"><span class="mono muted">01</span><div>Payment reminder prepared<br/><small>Sep 07, 2026 · Mira Chen</small></div></div><div class="listrow"><span class="mono muted">02</span><div>Due date reached<br/><small>Sep 06, 2026 · Mira Chen</small></div></div><div class="listrow"><span class="mono muted">03</span><div>Invoice viewed by client<br/><small>Sep 05, 2026 · Mira Chen</small></div></div><div class="listrow"><span class="mono muted">04</span><div>Invoice sent<br/><small>Sep 04, 2026 · Mira Chen</small></div></div><div class="listrow"><span class="mono muted">05</span><div>Draft approved<br/><small>Sep 03, 2026 · Mira Chen</small></div></div><div class="listrow"><span class="mono muted">06</span><div>Line items updated<br/><small>Sep 02, 2026 · Mira Chen</small></div></div></div></main><footer><div class="row between"><small>Updated at 10:42</small><button class="bevel-button bevel-button--primary" data-action="Invoice marked paid locally" type="button"><span class="bevel-button__label">Mark as paid</span></button></div></footer></aside></div></section><section data-ref-state="closed" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Invoices</h1><p>Four records in Northstar Studio.</p></header><div class="table-scroll"><table><thead><tr><th>Invoice</th><th>Client</th><th style="text-align:right">Amount</th><th>Status</th></tr></thead><tbody><tr><td class="mono">INV-0431</td><td>Juniper Health</td><td class="numeric">$1,240.00</td><td><span class="badge good">Paid</span></td></tr><tr><td class="mono">INV-0432</td><td>Northstar Studio</td><td class="numeric">$3,200.00</td><td><span class="badge bad">Overdue</span></td></tr><tr><td class="mono">INV-0433</td><td>Maple House</td><td class="numeric">$860.00</td><td><span class="badge">Sent</span></td></tr><tr><td class="mono">INV-0434</td><td>Juniper Health</td><td class="numeric">$410.00</td><td><span class="badge">Due soon</span></td></tr></tbody></table></div><button class="bevel-button" type="button"><span class="bevel-button__label">View INV-0432</span></button></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/editable-grid-cells.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>Editable grid cells · 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="editable-grid-cells" data-reference-phase="static" data-selected-source="astra"><section data-ref-state="idle" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The detail, right in the row.</h1><p>Invoices / Amount</p></header><div class="table-scroll"><table><thead><tr><th>Invoice</th><th>Client</th><th style="text-align:right">Amount</th><th>Status</th></tr></thead><tbody><tr><td class="mono">INV-0431</td><td>Juniper Health</td><td class="numeric">$1,240.00</td><td><span class="badge good">Paid</span></td></tr><tr><td class="mono">INV-0432</td><td>Northstar Studio</td><td class="numeric"><button class="bevel-button bevel-button--quiet" type="button"><span class="bevel-button__label">$3,200.00</span></button></td><td><span class="badge bad">Overdue</span></td></tr><tr><td class="mono">INV-0433</td><td>Maple House</td><td class="numeric">$860.00</td><td><span class="badge">Sent</span></td></tr><tr><td class="mono">INV-0434</td><td>Juniper Health</td><td class="numeric">$410.00</td><td><span class="badge">Due soon</span></td></tr></tbody></table></div><p class="note">Invoice amounts can be edited in place.</p></div></section><section data-ref-state="editing" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The detail, right in the row.</h1><p>Invoices / Amount</p></header><div class="table-scroll"><table><thead><tr><th>Invoice</th><th>Client</th><th style="text-align:right">Amount</th><th>Status</th></tr></thead><tbody><tr><td class="mono">INV-0431</td><td>Juniper Health</td><td class="numeric">$1,240.00</td><td><span class="badge good">Paid</span></td></tr><tr><td class="mono">INV-0432</td><td>Northstar Studio</td><td class="numeric"><input aria-label="Amount for INV-0432" class="bevel-input bevel-input--small" data-cell-value="" value="3200.00"/></td><td><span class="badge bad">Overdue</span></td></tr><tr><td class="mono">INV-0433</td><td>Maple House</td><td class="numeric">$860.00</td><td><span class="badge">Sent</span></td></tr><tr><td class="mono">INV-0434</td><td>Juniper Health</td><td class="numeric">$410.00</td><td><span class="badge">Due soon</span></td></tr></tbody></table></div><div class="actions"><small class="spacer">Editing INV-0432 / Amount</small><button class="bevel-button" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--primary" data-cell-save="" type="button"><span class="bevel-button__label">Save amount</span></button></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>The detail, right in the row.</h1><p>Invoices / Amount</p></header><div class="table-scroll"><table><thead><tr><th>Invoice</th><th>Client</th><th style="text-align:right">Amount</th><th>Status</th></tr></thead><tbody><tr><td class="mono">INV-0431</td><td>Juniper Health</td><td class="numeric">$1,240.00</td><td><span class="badge good">Paid</span></td></tr><tr><td class="mono">INV-0432</td><td>Northstar Studio</td><td class="numeric"><input aria-label="Amount for INV-0432" class="bevel-input bevel-input--small invalid" data-cell-value="" value="three thousand"/><small class="bad">Enter a valid amount.</small></td><td><span class="badge bad">Overdue</span></td></tr><tr><td class="mono">INV-0433</td><td>Maple House</td><td class="numeric">$860.00</td><td><span class="badge">Sent</span></td></tr><tr><td class="mono">INV-0434</td><td>Juniper Health</td><td class="numeric">$410.00</td><td><span class="badge">Due soon</span></td></tr></tbody></table></div><div class="actions"><small class="spacer">Editing INV-0432 / Amount</small><button class="bevel-button" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--primary" data-cell-save="" type="button"><span class="bevel-button__label">Save amount</span></button></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/filter-builder.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>Filter builder · 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="filter-builder" data-reference-phase="static" data-selected-source="astra"><section data-ref-state="applied" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Find the work that matters.</h1><p>A few plain conditions bring the right records into view.</p></header><div class="panel pad"><div class="row between" style="margin-bottom:24px"><strong>Show invoices where</strong><span class="badge">ALL RULES</span></div><div class="filters"><div class="filter-row"><span>WHERE</span><label class="bevel-select"><span class="bevel-sr-only">Filter field</span><select class="bevel-select__field"><option>Status</option><option>Client</option><option>Amount</option></select></label><label class="bevel-select"><span class="bevel-sr-only">Operator</span><select class="bevel-select__field"><option>is</option><option>is not</option><option>contains</option></select></label><input aria-label="Filter value" class="bevel-input bevel-input--small" value="Overdue"/><button aria-label="Remove rule" class="icon-button" data-remove-rule="">×</button></div><div class="filter-row"><span>AND</span><label class="bevel-select"><span class="bevel-sr-only">Filter field</span><select class="bevel-select__field"><option>Client</option><option>Status</option><option>Amount</option></select></label><label class="bevel-select"><span class="bevel-sr-only">Operator</span><select class="bevel-select__field"><option>contains</option><option>is not</option><option>contains</option></select></label><input aria-label="Filter value" class="bevel-input bevel-input--small" value="Northstar"/><button aria-label="Remove rule" class="icon-button" data-remove-rule="">×</button></div></div><template><div class="filter-row"><span>AND</span><label class="bevel-select"><span class="bevel-sr-only">Filter field</span><select class="bevel-select__field"><option>Amount</option><option>Client</option><option>Amount</option></select></label><label class="bevel-select"><span class="bevel-sr-only">Operator</span><select class="bevel-select__field"><option>is</option><option>is not</option><option>contains</option></select></label><input aria-label="Filter value" class="bevel-input bevel-input--small" value="3200"/><button aria-label="Remove rule" class="icon-button" data-remove-rule="">×</button></div></template><div class="actions" style="justify-content:space-between"><button class="bevel-button" data-add-rule="" type="button"><span class="bevel-button__label">+ Add rule</span></button><button class="bevel-button bevel-button--primary" data-action="Filters applied in this visual simulation." type="button"><span class="bevel-button__label">Apply filters</span></button></div></div><div class="rule"><span class="eyebrow">APPLIED / 1 MATCHING RECORD</span><div class="listrow between"><div><strong>Northstar Studio</strong><br/><small>INV-0432 · Overdue</small></div><span class="mono">$3,200.00</span></div></div></div></section><section data-ref-state="empty" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Find the work that matters.</h1><p>A few plain conditions bring the right records into view.</p></header><div class="panel pad"><div class="row between" style="margin-bottom:24px"><strong>Show invoices where</strong><span class="badge">ALL RULES</span></div><div class="filters"><p class="muted">No filters yet. Start with a field and a condition.</p></div><template><div class="filter-row"><span>AND</span><label class="bevel-select"><span class="bevel-sr-only">Filter field</span><select class="bevel-select__field"><option>Amount</option><option>Client</option><option>Amount</option></select></label><label class="bevel-select"><span class="bevel-sr-only">Operator</span><select class="bevel-select__field"><option>is</option><option>is not</option><option>contains</option></select></label><input aria-label="Filter value" class="bevel-input bevel-input--small" value="3200"/><button aria-label="Remove rule" class="icon-button" data-remove-rule="">×</button></div></template><div class="actions" style="justify-content:space-between"><button class="bevel-button" data-add-rule="" type="button"><span class="bevel-button__label">+ Add rule</span></button><button class="bevel-button bevel-button--primary" data-action="Filters applied in this visual simulation." type="button"><span class="bevel-button__label">Apply filters</span></button></div></div><div class="rule"><span class="eyebrow">ALL RECORDS / 4 INVOICES</span><div class="table-scroll"><table><thead><tr><th>Invoice</th><th>Client</th><th style="text-align:right">Amount</th><th>Status</th></tr></thead><tbody><tr><td class="mono">INV-0431</td><td>Juniper Health</td><td class="numeric">$1,240.00</td><td><span class="badge good">Paid</span></td></tr><tr><td class="mono">INV-0432</td><td>Northstar Studio</td><td class="numeric">$3,200.00</td><td><span class="badge bad">Overdue</span></td></tr><tr><td class="mono">INV-0433</td><td>Maple House</td><td class="numeric">$860.00</td><td><span class="badge">Sent</span></td></tr><tr><td class="mono">INV-0434</td><td>Juniper Health</td><td class="numeric">$410.00</td><td><span class="badge">Due soon</span></td></tr></tbody></table></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/components/form-error-summary.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>Form error summary · 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="form-error-summary" data-reference-phase="static" data-selected-source="astra"><section data-ref-state="errors" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>A clear way forward.</h1><p>Create a project / Details</p></header><div class="notice error" role="alert"><strong>Two things need your attention.</strong><ul style="margin:8px 0 0;padding-left:19px"><li><a href="#e-name">Enter a project name</a></li><li><a href="#e-email">Use a complete email address</a></li></ul></div><div class="stack" style="margin-top:24px"><label class="field">Project name<input aria-invalid="true" class="bevel-input" id="e-name" value=""/></label><small class="bad">A project name is required.</small><label class="field">Invite a collaborator<input aria-invalid="true" class="bevel-input" id="e-email" value="mira@"/></label><small class="bad">Enter an address like mira@example.test.</small></div><div class="actions"><button class="bevel-button bevel-button--primary" type="button"><span class="bevel-button__label">Show corrected example</span></button></div></div></section><section data-ref-state="corrected" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>A clear way forward.</h1><p>Create a project / Details</p></header><div class="notice success" role="status"><strong>Everything looks good.</strong><br/>Your project details are ready to save.</div><div class="stack" style="margin-top:24px"><label class="field">Project name<input aria-invalid="false" class="bevel-input" id="c-name" value="Field notes"/></label><label class="field">Invite a collaborator<input aria-invalid="false" class="bevel-input" id="c-email" value="mira@example.test"/></label></div><div class="actions"><button class="bevel-button bevel-button--primary" type="button"><span class="bevel-button__label">Show corrected example</span></button></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/inline-edit.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>Inline edit · 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="inline-edit" data-reference-phase="static" data-selected-source="astra"><section data-ref-state="resting" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Small changes, in place.</h1><p>Keep the value and its editor close together.</p></header><div style="max-width:520px;margin:45px auto"><div class="eyebrow">PROJECT NAME</div><div class="row between inline-title"><h2 data-saved-name="">Field notes</h2><button class="bevel-button bevel-button--quiet" type="button"><span class="bevel-button__label">Edit</span></button></div><p class="note">A name that belongs to the work.</p></div></div></section><section data-ref-state="editing" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Small changes, in place.</h1><p>Keep the value and its editor close together.</p></header><div style="max-width:520px;margin:45px auto"><div class="eyebrow">PROJECT NAME</div><h2 aria-invalid="false" class="r-inline-name richclay-inline richclay-active richclay-focused" data-richclay-active="true" data-richclay-options="singleLine">Field notes</h2><p class="note">Edit the title in place.</p><div class="actions"><button class="bevel-button" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--primary" data-inline-save="" type="button"><span class="bevel-button__label">Done</span></button></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>Small changes, in place.</h1><p>Keep the value and its editor close together.</p></header><div style="max-width:520px;margin:45px auto"><div class="eyebrow">PROJECT NAME</div><h2 aria-invalid="true" class="r-inline-name richclay-inline richclay-active richclay-focused" data-richclay-active="true" data-richclay-options="singleLine"><span class="r-placeholder">Project name</span></h2><p class="bad" style="font-size:12px;margin-top:8px">Give this project a name before saving.</p><div class="actions"><button class="bevel-button" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--primary" data-inline-save="" type="button"><span class="bevel-button__label">Done</span></button></div></div></div></section><section data-ref-state="saved" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Small changes, in place.</h1><p>Keep the value and its editor close together.</p></header><div style="max-width:520px;margin:45px auto"><div class="eyebrow">PROJECT NAME</div><div class="row between inline-title"><h2 data-saved-name="">Field notes, together</h2><button class="bevel-button bevel-button--quiet" type="button"><span class="bevel-button__label">Edit</span></button></div><p class="note good">✓ Name saved in this local preview.</p></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>