@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/fable/build_repairs.py ADDED
@@ -0,0 +1,25 @@
1
+ ICONS = {
2
+ 'external': 'M14 3h7v7M21 3l-11 11M11 5H4v16h16v-7',
3
+ 'pencil': 'm5 16 11-11 3 3-11 11-5 2ZM14 7l3 3',
4
+ 'copy': 'M8 8h12v13H8ZM4 17H2V2h12v2',
5
+ 'archive': 'M3 3h18v5H3ZM5 8v13h14V8M9 12h6',
6
+ 'trash': 'M3 6h18M6 6l1 15h10l1-15M9 6V3h6v3M10 10v7m4-7v7',
7
+ 'warning': 'm12 3 10 18H2ZM12 9v5m0 3v1',
8
+ 'upload': 'M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5',
9
+ 'undo': 'M4 5v6h6M4 11a8 8 0 1 1 1 7',
10
+ 'collapse-left': 'M20 12H4m6-6-6 6 6 6',
11
+ 'collapse-right': 'M4 12h16m-6-6 6 6-6 6',
12
+ 'chevron-left': 'm15 5-7 7 7 7',
13
+ 'chevron-right': 'm9 5 7 7-7 7',
14
+ 'chevron-up': 'm5 15 7-7 7 7',
15
+ 'chevron-down': 'm5 9 7 7 7-7',
16
+ 'folder': 'M3 7V4h6l3 3h9v13H3Z',
17
+ 'offline': 'M3 3l18 18M2 8a16 16 0 0 1 3-2m4-1a16 16 0 0 1 13 3M5 12a11 11 0 0 1 4-2m5 0a11 11 0 0 1 5 2M8 16a6 6 0 0 1 8 0M12 20h.01',
18
+ 'wrap': 'M3 5h18M3 10h14a4 4 0 0 1 0 8h-4m3-3-3 3 3 3M3 16h5',
19
+ 'user': 'M16 6a4 4 0 1 1-8 0 4 4 0 0 1 8 0ZM4 22v-3a8 8 0 0 1 16 0v3',
20
+ 'arrow-up': 'M12 20V4m-6 6 6-6 6 6',
21
+ 'grip': 'M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1',
22
+ 'unlink': 'M4 4l16 16M8 16l-2 2a3 3 0 0 1-4-4l4-4m10-2 2-2a3 3 0 0 1 4 4l-4 4',
23
+ 'highlight': 'm5 13 8-9 7 7-9 8ZM7 15l-4 6h7l2-4M13 4l7 7',
24
+ 'grid': 'M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z',
25
+ }
package/examples/components/reference/fable/components/activity-feed.html ADDED
@@ -0,0 +1,3 @@
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>Activity feed · Fable · 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="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="activity-feed" data-reference-phase="static" data-seat="fable" data-selected-source="astra"><section data-ref-state="recent" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The work, as it happens.</h1><p>Small changes add up to something good.</p></header><div class="eyebrow f-day">TODAY / SEPTEMBER 07</div><div class="timeline"><article class="event f-event" data-verb="pencil"><span class="f-avatar" data-who="MC">MC</span><div class="f-event-body"><div class="f-event-head"><p><strong>Mira Chen</strong> updated <strong>A place for good work</strong></p><time>10:42</time></div><p class="f-event-detail">Clarified the introduction and added the field guide.</p></div></article><article class="event f-event" data-verb="user"><span class="f-avatar" data-who="AR">AR</span><div class="f-event-body"><div class="f-event-head"><p><strong>Alex Rivera</strong> joined <strong>Field notes</strong></p><time>10:18</time></div><p class="f-event-detail">Invited by Jules Park.</p></div></article><article class="event f-event" data-verb="image"><span class="f-avatar" data-who="SP">SP</span><div class="f-event-body"><div class="f-event-head"><p><strong>Sam Patel</strong> added <strong>workspace.jpg</strong></p><time>09:56</time></div><p class="f-event-detail">Project cover · 184 KB</p></div></article></div><button class="bevel-button bevel-button--small f-show-more" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m6 9 6 6 6-6"></path></svg><span class="bevel-button__label">Show yesterday</span></button></div></section><section data-ref-state="expanded" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The work, as it happens.</h1><p>Small changes add up to something good.</p></header><div class="eyebrow f-day">TODAY / SEPTEMBER 07</div><div class="timeline"><article class="event f-event" data-verb="pencil"><span class="f-avatar" data-who="MC">MC</span><div class="f-event-body"><div class="f-event-head"><p><strong>Mira Chen</strong> updated <strong>A place for good work</strong></p><time>10:42</time></div><p class="f-event-detail">Clarified the introduction and added the field guide.</p></div></article><article class="event f-event" data-verb="user"><span class="f-avatar" data-who="AR">AR</span><div class="f-event-body"><div class="f-event-head"><p><strong>Alex Rivera</strong> joined <strong>Field notes</strong></p><time>10:18</time></div><p class="f-event-detail">Invited by Jules Park.</p></div></article><article class="event f-event" data-verb="image"><span class="f-avatar" data-who="SP">SP</span><div class="f-event-body"><div class="f-event-head"><p><strong>Sam Patel</strong> added <strong>workspace.jpg</strong></p><time>09:56</time></div><p class="f-event-detail">Project cover · 184 KB</p></div></article></div><div class="eyebrow f-day">YESTERDAY / SEPTEMBER 06</div><div class="timeline"><article class="event f-event" data-verb="plus"><span class="f-avatar" data-who="JP">JP</span><div class="f-event-body"><div class="f-event-head"><p><strong>Jules Park</strong> created <strong>Field notes</strong></p><time>16:32</time></div></div></article></div></div></section><footer class="r-static-note">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/app-toolbar.html ADDED
@@ -0,0 +1,3 @@
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>App toolbar · Fable · 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="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="app-toolbar" data-reference-phase="static" data-seat="fable" 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>The tools, close at hand.</h1><p>Field notes / Documents</p></header><div class="toolbar f-toolbar" data-part="toolbar"><button aria-label="New note" class="f-icon-button f-toolbar-new" title="New note" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M12 5v14M5 12h14"></path></svg></button><span class="f-toolbar-sep"></span><div aria-label="Layout" class="bevel-seg f-toolbar-seg" role="group"><button aria-label="List view" aria-pressed="true" class="f-icon-button" title="List view" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M8 6h13M8 12h13M8 18h13M3 6h1M3 12h1M3 18h1"></path></svg></button><button aria-label="Grid view" aria-pressed="false" class="f-icon-button" title="Grid view" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"></path></svg></button></div><span class="f-toolbar-sep"></span><button aria-label="Filter notes" class="f-icon-button f-toolbar-filter" title="Filter notes" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M3 5h18l-7 8v6l-4 2v-8Z"></path></svg></button><span class="spacer"></span><label class="f-toolbar-search"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><input aria-label="Search notes" class="bevel-input bevel-input--small" placeholder="Search notes" type="search"/><kbd>/</kbd></label><button aria-expanded="false" aria-label="More actions" class="f-icon-button f-toolbar-more" title="More actions" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div><div class="rule row between"><strong>All documents</strong><span class="mono muted" style="font-size:11px">12 NOTES</span></div><div class="listrow"><span class="f-file-icon"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg></span><div><strong>A place for good work</strong><br/><small>Mira Chen · Edited today</small></div></div><div class="listrow"><span class="f-file-icon"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg></span><div><strong>The field guide</strong><br/><small>Sam Patel · Edited yesterday</small></div></div></div></section><section data-ref-state="overflow" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The tools, close at hand.</h1><p>Field notes / Documents</p></header><div class="toolbar f-toolbar" data-part="toolbar"><button aria-label="New note" class="f-icon-button f-toolbar-new" title="New note" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M12 5v14M5 12h14"></path></svg></button><span class="f-toolbar-sep"></span><div aria-label="Layout" class="bevel-seg f-toolbar-seg" role="group"><button aria-label="List view" aria-pressed="true" class="f-icon-button" title="List view" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M8 6h13M8 12h13M8 18h13M3 6h1M3 12h1M3 18h1"></path></svg></button><button aria-label="Grid view" aria-pressed="false" class="f-icon-button" title="Grid view" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"></path></svg></button></div><span class="f-toolbar-sep"></span><button aria-label="Filter notes" class="f-icon-button f-toolbar-filter" title="Filter notes" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M3 5h18l-7 8v6l-4 2v-8Z"></path></svg></button><span class="spacer"></span><label class="f-toolbar-search"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><input aria-label="Search notes" class="bevel-input bevel-input--small" placeholder="Search notes" type="search"/><kbd>/</kbd></label><button aria-expanded="true" aria-label="More actions" class="f-icon-button f-toolbar-more" title="More actions" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div><div class="f-overflow-anchor"><div class="menu f-overflow-menu"><button data-action="Sort by last edited selected locally"><span><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M4 6h16M7 12h10M10 18h4"></path></svg></span>Sort by last edited</button><button data-action="Show archived selected locally"><span><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 3h18v5H3ZM5 8v13h14V8M9 12h6"></path></svg></span>Show archived</button><button data-action="Export selection selected locally"><span><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 3v12m-4-8 4-4 4 4M5 14v6h14v-6"></path></svg></span>Export selection</button></div></div></div></section><footer class="r-static-note">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/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 · Fable · 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="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="avatar-group" data-reference-phase="static" data-seat="fable" 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">7 people in Northstar Studio</p></div><span class="p-badge">Shared</span></div><div class="p-avatar-stack f-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="f-avatar" data-who="MC">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="f-avatar" data-who="AR">AR</span></span><span aria-label="Sam Patel" class="p-avatar-wrap"><span aria-hidden="true" class="f-avatar" data-who="SP">SP</span></span><span aria-label="Three more members" class="f-avatar f-avatar-more">+3</span></div><div class="p-avatar-list f-avatar-list"><div class="p-row"><span aria-hidden="true" class="f-avatar" data-who="MC">MC</span><div><strong class="p-small">Mira Chen</strong><p class="p-small p-muted"><i class="f-presence-dot"></i>Online now · Designer</p></div></div><div class="p-row"><span aria-hidden="true" class="f-avatar" data-who="AR">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="f-avatar" data-who="SP">SP</span><div><strong class="p-small">Sam Patel</strong><p class="p-small p-muted">Editor</p></div></div><div class="p-row f-avatar-list-more"><span class="f-avatar f-avatar-more">+3</span><div><strong class="p-small">Jules Park, Priya Nair and Tomas Berg</strong><p class="p-small p-muted">Owner, Researcher, Producer</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">7 people in Northstar Studio</p></div><span class="p-badge">Shared</span></div><div class="p-avatar-stack f-avatar-stack" data-part="avatar-stack"><span aria-hidden="true" class="f-avatar" data-who="NS">NS</span><span aria-label="Mira Chen" class="p-avatar-wrap"><span aria-hidden="true" class="f-avatar" data-who="MC">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="f-avatar" data-who="AR">AR</span></span><span aria-label="Sam Patel" class="p-avatar-wrap"><span aria-hidden="true" class="f-avatar" data-who="SP">SP</span></span><span aria-label="Three more members" class="f-avatar f-avatar-more">+3</span></div><div class="p-avatar-list f-avatar-list"><div class="p-row"><span aria-hidden="true" class="f-avatar" data-who="MC">MC</span><div><strong class="p-small">Mira Chen</strong><p class="p-small p-muted"><i class="f-presence-dot"></i>Online now · Designer</p></div></div><div class="p-row"><span aria-hidden="true" class="f-avatar" data-who="AR">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="f-avatar" data-who="SP">SP</span><div><strong class="p-small">Sam Patel</strong><p class="p-small p-muted">Editor</p></div></div><div class="p-row f-avatar-list-more"><span class="f-avatar f-avatar-more">+3</span><div><strong class="p-small">Jules Park, Priya Nair and Tomas Berg</strong><p class="p-small p-muted">Owner, Researcher, Producer</p></div></div></div></div></main></section><footer class="r-static-note">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/breadcrumbs.html ADDED
@@ -0,0 +1,3 @@
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>Breadcrumbs · Fable · 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="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="breadcrumbs" data-reference-phase="static" data-seat="fable" data-selected-source="astra"><section data-ref-state="short" inert=""><div class="specimen"><nav aria-label="Breadcrumb" class="breadcrumb f-breadcrumb"><a href="#level-0">Northstar Studio</a><span aria-hidden="true"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 5 7 7-7 7"></path></svg></span><a href="#level-1">Field notes</a><span aria-hidden="true"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 5 7 7-7 7"></path></svg></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="f-avatar" data-who="MC">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 f-breadcrumb"><a href="#level-0">Northstar Studio</a><span aria-hidden="true"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 5 7 7-7 7"></path></svg></span><button aria-label="Show full path" class="f-crumb-more" type="button">…</button><span aria-hidden="true" class="f-crumb-more-sep"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 5 7 7-7 7"></path></svg></span><a class="f-crumb-mid" href="#level-1">Projects</a><span aria-hidden="true" class="f-crumb-mid"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 5 7 7-7 7"></path></svg></span><a class="f-crumb-mid" href="#level-2">Field notes</a><span aria-hidden="true" class="f-crumb-mid"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 5 7 7-7 7"></path></svg></span><a class="f-crumb-mid" href="#level-3">Documents</a><span aria-hidden="true" class="f-crumb-mid"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 5 7 7-7 7"></path></svg></span><a href="#level-4">The field guide</a><span aria-hidden="true"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 5 7 7-7 7"></path></svg></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="f-avatar" data-who="MC">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 · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/code-block.html ADDED
@@ -0,0 +1,9 @@
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>Code block · Fable · 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="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="code-block" data-reference-phase="static" data-seat="fable" 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 f-code"><div class="code-head"><span class="f-code-name"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg>field-note.html</span><span class="badge">HTML</span><span class="f-code-meta">4 lines</span><span class="spacer"></span><button aria-pressed="false" class="bevel-button bevel-button--small" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 5h18M3 10h14a4 4 0 0 1 0 8h-4m3-3-3 3 3 3M3 16h5"></path></svg><span class="bevel-button__label">Wrap</span></button><button class="bevel-button bevel-button--small" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M8 8h12v13H8ZM4 17H2V2h12v2"></path></svg><span class="bevel-button__label">Copy</span></button></div><ol class="code-lines f-code-lines" data-part="code"><li><code><span class="tk-tag">&lt;article</span> <span class="tk-attr">class</span>=<span class="tk-str">"field-note"</span><span class="tk-tag">&gt;</span></code></li><li><code> <span class="tk-tag">&lt;h1&gt;</span>A place for good work<span class="tk-tag">&lt;/h1&gt;</span></code></li><li><code> <span class="tk-tag">&lt;p</span> <span class="tk-attr">data-description</span>=<span class="tk-str">"Documents, decisions and the small details that make a project feel like home"</span><span class="tk-tag">&gt;</span>Keep the useful things close.<span class="tk-tag">&lt;/p&gt;</span></code></li><li><code><span class="tk-tag">&lt;/article&gt;</span></code></li></ol><pre data-copy-source="" hidden="">&lt;article class="field-note"&gt;
4
+ &lt;h1&gt;A place for good work&lt;/h1&gt;
5
+ &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;
6
+ &lt;/article&gt;</pre></div><p class="note">Copy takes the whole file. Wrap keeps long attribute lines in view.</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 f-code"><div class="code-head"><span class="f-code-name"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg>field-note.html</span><span class="badge">HTML</span><span class="f-code-meta">4 lines</span><span class="spacer"></span><button aria-pressed="true" class="bevel-button bevel-button--small" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 5h18M3 10h14a4 4 0 0 1 0 8h-4m3-3-3 3 3 3M3 16h5"></path></svg><span class="bevel-button__label">Wrap</span></button><button class="bevel-button bevel-button--small" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M8 8h12v13H8ZM4 17H2V2h12v2"></path></svg><span class="bevel-button__label">Copy</span></button></div><ol class="code-lines f-code-lines wrap-code" data-part="code"><li><code><span class="tk-tag">&lt;article</span> <span class="tk-attr">class</span>=<span class="tk-str">"field-note"</span><span class="tk-tag">&gt;</span></code></li><li><code> <span class="tk-tag">&lt;h1&gt;</span>A place for good work<span class="tk-tag">&lt;/h1&gt;</span></code></li><li><code> <span class="tk-tag">&lt;p</span> <span class="tk-attr">data-description</span>=<span class="tk-str">"Documents, decisions and the small details that make a project feel like home"</span><span class="tk-tag">&gt;</span>Keep the useful things close.<span class="tk-tag">&lt;/p&gt;</span></code></li><li><code><span class="tk-tag">&lt;/article&gt;</span></code></li></ol><pre data-copy-source="" hidden="">&lt;article class="field-note"&gt;
7
+ &lt;h1&gt;A place for good work&lt;/h1&gt;
8
+ &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;
9
+ &lt;/article&gt;</pre></div><p class="note">Copy takes the whole file. Wrap keeps long attribute lines in view.</p></div></section><footer class="r-static-note">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/column-manager.html ADDED
@@ -0,0 +1,3 @@
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>Column manager · Fable · 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="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="column-manager" data-reference-phase="static" data-seat="fable" 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 f-column-panel"><div class="pad f-column-head"><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 f-column-item"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></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="f-icon-button f-order-btn" data-move-column="up" disabled="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Invoice down" class="f-icon-button f-order-btn" data-move-column="down" disabled="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div><div class="column-item f-column-item"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></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="f-order-n">2</span><button aria-label="Move Client up" class="f-icon-button f-order-btn" data-move-column="up" disabled="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Client down" class="f-icon-button f-order-btn" data-move-column="down" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div><div class="column-item f-column-item"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></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="f-order-n">3</span><button aria-label="Move Amount up" class="f-icon-button f-order-btn" data-move-column="up" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Amount down" class="f-icon-button f-order-btn" data-move-column="down" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div><div class="column-item f-column-item"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></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="f-order-n">4</span><button aria-label="Move Status up" class="f-icon-button f-order-btn" data-move-column="up" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Status down" class="f-icon-button f-order-btn" data-move-column="down" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div><div class="column-item f-column-item"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></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="f-order-n">5</span><button aria-label="Move Owner up" class="f-icon-button f-order-btn" data-move-column="up" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Owner down" class="f-icon-button f-order-btn" data-move-column="down" disabled="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div></div><div class="pad f-column-foot"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg><small>Invoice stays pinned as the record identifier.</small><span class="spacer"></span><small class="f-order-summary">4 of 5 shown</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 f-column-panel"><div class="pad f-column-head"><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 f-column-item"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></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="f-icon-button f-order-btn" data-move-column="up" disabled="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Invoice down" class="f-icon-button f-order-btn" data-move-column="down" disabled="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div><div class="column-item f-column-item is-moved"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></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="f-order-n is-moved">2<i>moved</i></span><button aria-label="Move Status up" class="f-icon-button f-order-btn" data-move-column="up" disabled="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Status down" class="f-icon-button f-order-btn" data-move-column="down" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div><div class="column-item f-column-item"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></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="f-order-n">3</span><button aria-label="Move Client up" class="f-icon-button f-order-btn" data-move-column="up" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Client down" class="f-icon-button f-order-btn" data-move-column="down" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div><div class="column-item f-column-item"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></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="f-order-n">4</span><button aria-label="Move Amount up" class="f-icon-button f-order-btn" data-move-column="up" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Amount down" class="f-icon-button f-order-btn" data-move-column="down" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div><div class="column-item f-column-item"><span aria-hidden="true" class="f-grip"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></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="f-order-n">5</span><button aria-label="Move Owner up" class="f-icon-button f-order-btn" data-move-column="up" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 15 7-7 7 7"></path></svg></button><button aria-label="Move Owner down" class="f-icon-button f-order-btn" data-move-column="down" disabled="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 9 7 7 7-7"></path></svg></button></div></div><div class="pad f-column-foot"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg><small>Invoice stays pinned as the record identifier.</small><span class="spacer"></span><small class="f-order-summary">4 of 5 shown</small></div></div></div></section><footer class="r-static-note">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/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 · Fable · 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="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="combobox" data-reference-phase="static" data-seat="fable" 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 f-search is-open"><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-expanded="true" aria-label="Open choices" class="f-icon-button f-combo-toggle" title="Open choices" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m6 9 6 6 6-6"></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="f-avatar small" data-who="MC">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="f-avatar small" data-who="AR">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="f-avatar small" data-who="SP">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="f-avatar small" data-who="JP">JP</span><span class="p-person"><strong>Jules Park</strong><small>Owner</small></span></button><div class="p-empty f-empty" data-picker-empty="" hidden=""><svg aria-hidden="true" fill="none" height="22" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="22"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><h3>No one by that name.</h3><p class="p-small">No member matches “Taylor”. Check the spelling or invite them.</p></div></div><div class="p-picker-foot">4 members in Northstar Studio · ↑↓ to move, ↵ to choose</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 f-search"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><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-expanded="false" aria-label="Open choices" class="f-icon-button f-combo-toggle" title="Open choices" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m6 9 6 6 6-6"></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 f-search is-open"><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-expanded="true" aria-label="Open choices" class="f-icon-button f-combo-toggle" title="Open choices" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m6 9 6 6 6-6"></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="f-avatar small" data-who="MC">MC</span><span class="p-person"><strong><mark>Mi</mark>ra 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="f-avatar small" data-who="AR">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="f-avatar small" data-who="SP">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="f-avatar small" data-who="JP">JP</span><span class="p-person"><strong>Jules Park</strong><small>Owner</small></span></button><div class="p-empty f-empty" data-picker-empty="" hidden=""><svg aria-hidden="true" fill="none" height="22" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="22"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><h3>No one by that name.</h3><p class="p-small">No member matches “Taylor”. Check the spelling or invite them.</p></div></div><div class="p-picker-foot">4 members in Northstar Studio · ↑↓ to move, ↵ to choose</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 f-search is-open"><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-expanded="true" aria-label="Open choices" class="f-icon-button f-combo-toggle" title="Open choices" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m6 9 6 6 6-6"></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="f-avatar small" data-who="MC">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="f-avatar small" data-who="AR">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="f-avatar small" data-who="SP">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="f-avatar small" data-who="JP">JP</span><span class="p-person"><strong>Jules Park</strong><small>Owner</small></span></button><div class="p-empty f-empty" data-picker-empty=""><svg aria-hidden="true" fill="none" height="22" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="22"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><h3>No one by that name.</h3><p class="p-small">No member matches “Taylor”. Check the spelling or invite them.</p></div></div><div class="p-picker-foot">4 members in Northstar Studio · ↑↓ to move, ↵ to choose</div></div></main></section><footer class="r-static-note">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/context-hypercms.html ADDED
@@ -0,0 +1,3 @@
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>HyperCMS inspector · Fable · 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="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="context-hypercms" data-reference-phase="static" data-seat="fable" 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"><div class="f-hcms-byline"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><small>Mira Chen · edited 10:42</small></div></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="f-icon-button f-hcms-close" title="Close inspector" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></header><div class="hcms-shell-notice" hidden="" role="status"></div><div class="hcms-shell-error notice error f-error-summary" 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 class="f-count">1 item</small></h3></header><div class="hcms-array-items"><article class="hcms-card"><div aria-hidden="true" class="hcms-drag-handle"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></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 f-hcms-upload"><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"><div class="f-hcms-byline"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><small>Mira Chen · edited 10:42</small></div></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="f-icon-button f-hcms-close" title="Close inspector" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></header><div class="hcms-shell-notice" hidden="" role="status"></div><div class="hcms-shell-error notice error f-error-summary" role="alert"><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="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg><div><strong>Give the page a title before saving.</strong></div></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 f-field-error"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg>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 class="f-count">1 item</small></h3></header><div class="hcms-array-items"><article class="hcms-card"><div aria-hidden="true" class="hcms-drag-handle"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></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 f-hcms-upload"><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 · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/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 · Fable · 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="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="context-quickcrop" data-reference-phase="static" data-seat="fable" 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 f-crop-modal"><button aria-label="Close dialog" class="micromodal__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><div class="p-eyebrow">Image / workspace.jpg</div><div class="p-between f-crop-head"><h2>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 aria-label="Aspect ratio" class="bevel-seg f-crop-seg" role="group"><button aria-pressed="true" class="bevel-button" type="button"><span class="bevel-button__label">1:1</span></button><button aria-pressed="false" class="bevel-button" type="button"><span class="bevel-button__label">Free</span></button></div><span class="p-small p-muted f-crop-note"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg>Aspect ratio locked</span><div class="qc-bar"><button class="bevel-button bevel-button--small" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M4 5v6h6M4 11a8 8 0 1 1 1 7"></path></svg><span class="bevel-button__label">Reset</span></button><button class="bevel-button bevel-button--small bevel-button--primary" type="button"><span class="bevel-button__label">Use image</span></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 f-crop-modal"><button aria-label="Close dialog" class="micromodal__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><div class="p-eyebrow">Image / workspace.jpg</div><div class="p-between f-crop-head"><h2>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 aria-label="Aspect ratio" class="bevel-seg f-crop-seg" role="group"><button aria-pressed="false" class="bevel-button" type="button"><span class="bevel-button__label">1:1</span></button><button aria-pressed="true" class="bevel-button" type="button"><span class="bevel-button__label">Free</span></button></div><span class="p-small p-muted f-crop-note"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h6M4 4v6M20 20h-6m6 0v-6M4 20l6-6M20 4l-6 6"></path></svg>Any proportion</span><div class="qc-bar"><button class="bevel-button bevel-button--small" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M4 5v6h6M4 11a8 8 0 1 1 1 7"></path></svg><span class="bevel-button__label">Reset</span></button><button class="bevel-button bevel-button--small bevel-button--primary" type="button"><span class="bevel-button__label">Use image</span></button></div></div></div></div></main></section><footer class="r-static-note">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/diff-view.html ADDED
@@ -0,0 +1,13 @@
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 · Fable · 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="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="diff-view" data-reference-phase="static" data-seat="fable" 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 f-diff" data-part="diff-frame"><header><span class="p-row"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><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><div aria-label="Layout" class="bevel-seg f-diff-seg" role="group"><button aria-pressed="true" class="bevel-button" type="button"><span class="bevel-button__label">Unified</span></button><button aria-pressed="false" class="bevel-button" type="button"><span class="bevel-button__label">Split</span></button></div></div></header><div class="p-diff-hunk">@@ 1,4 → 1,4 @@</div><div class="p-diff-line f-diff-line"><span>1</span><span> </span><code>&lt;article class="field-note"&gt;</code></div><div class="p-diff-line removed f-diff-line"><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 f-diff-line"><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 f-diff-line"><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 f-diff-line"><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 f-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 f-diff" data-part="diff-frame"><header><span class="p-row"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><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><div aria-label="Layout" class="bevel-seg f-diff-seg" role="group"><button aria-pressed="false" class="bevel-button" type="button"><span class="bevel-button__label">Unified</span></button><button aria-pressed="true" class="bevel-button" type="button"><span class="bevel-button__label">Split</span></button></div></div></header><div class="f-diff-split"><section><h3>Before <small>field-note.html @ 1,4</small></h3>
5
+ <div class="p-diff-line f-diff-line"><span>1</span><span> </span><code>&lt;article class="field-note"&gt;</code></div>
6
+ <div class="p-diff-line f-diff-line removed"><span>2</span><span>−</span><code>&lt;h1&gt;A place for <mark>ideas</mark>&lt;/h1&gt;</code></div>
7
+ <div class="p-diff-line f-diff-line removed"><span>3</span><span>−</span><code>&lt;p&gt;Keep <mark>everything</mark> close.&lt;/p&gt;</code></div>
8
+ <div class="p-diff-line f-diff-line"><span>4</span><span> </span><code>&lt;/article&gt;</code></div></section>
9
+ <section><h3>After <small>field-note.html @ 1,4</small></h3>
10
+ <div class="p-diff-line f-diff-line"><span>1</span><span> </span><code>&lt;article class="field-note"&gt;</code></div>
11
+ <div class="p-diff-line f-diff-line added"><span>2</span><span>+</span><code>&lt;h1&gt;A place for <mark>good work</mark>&lt;/h1&gt;</code></div>
12
+ <div class="p-diff-line f-diff-line added"><span>3</span><span>+</span><code>&lt;p&gt;Keep <mark>the useful things</mark> close.&lt;/p&gt;</code></div>
13
+ <div class="p-diff-line f-diff-line"><span>4</span><span> </span><code>&lt;/article&gt;</code></div></section></div><footer>Updated by Mira Chen · today at 10:42</footer></div></main></section><footer class="r-static-note">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/drawer.html ADDED
@@ -0,0 +1,3 @@
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>Drawer · Fable · 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="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="drawer" data-reference-phase="static" data-seat="fable" 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 · Northstar Studio</p><div class="f-underlay-row"><span class="mono">INV-0431</span><span>Juniper Health</span></div><div class="f-underlay-row is-open"><span class="mono">INV-0432</span><span>Northstar Studio</span></div><div class="f-underlay-row"><span class="mono">INV-0433</span><span>Maple House</span></div><div class="f-underlay-row"><span class="mono">INV-0434</span><span>Juniper Health</span></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="f-drawer-amount"><span class="mono" style="font-size:28px">$3,200.00</span><span class="badge bad">Overdue</span></div></header><main><dl class="detail-grid f-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 · Northstar Studio</p><div class="f-underlay-row"><span class="mono">INV-0431</span><span>Juniper Health</span></div><div class="f-underlay-row is-open"><span class="mono">INV-0432</span><span>Northstar Studio</span></div><div class="f-underlay-row"><span class="mono">INV-0433</span><span>Maple House</span></div><div class="f-underlay-row"><span class="mono">INV-0434</span><span>Juniper Health</span></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="f-drawer-amount"><span class="mono" style="font-size:28px">$3,200.00</span><span class="badge bad">Overdue</span></div></header><main><dl class="detail-grid f-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"><div class="eyebrow">Activity</div><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><div class="rule row between wrap"><small>Choose a record to open its details.</small><button class="bevel-button" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M14 3h7v7M21 3l-11 11M11 5H4v16h16v-7"></path></svg><span class="bevel-button__label">View INV-0432</span></button></div></div></section><footer class="r-static-note">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/editable-grid-cells.html ADDED
@@ -0,0 +1,3 @@
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>Editable grid cells · Fable · 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="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="editable-grid-cells" data-reference-phase="static" data-seat="fable" 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 class="f-grid-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 f-cell is-editable"><button class="f-cell-button" type="button"><span>$3,200.00</span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 16 11-11 3 3-11 11-5 2ZM14 7l3 3"></path></svg></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 f-edit-note"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 16 11-11 3 3-11 11-5 2ZM14 7l3 3"></path></svg>Amounts can be edited in place. Choose a value to change it.</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 class="f-grid-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 class="is-editing-row"><td class="mono">INV-0432</td><td>Northstar Studio</td><td class="numeric f-cell is-editing"><span class="f-cell-editor"><span class="f-cell-prefix">$</span><input aria-label="Amount for INV-0432" class="f-cell-input" value="3200.00"/><button aria-label="Save amount" class="f-icon-button f-cell-ok" title="Save amount" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m5 12 4 4L19 6"></path></svg></button><button aria-label="Cancel" class="f-icon-button f-cell-cancel" title="Cancel" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></span></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 f-edit-note"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 16 11-11 3 3-11 11-5 2ZM14 7l3 3"></path></svg>Editing INV-0432 · Amount. <kbd>↵</kbd> saves, <kbd>esc</kbd> cancels.</p></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 class="f-grid-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 class="is-editing-row"><td class="mono">INV-0432</td><td>Northstar Studio</td><td class="numeric f-cell is-editing is-invalid"><span class="f-cell-editor"><span class="f-cell-prefix">$</span><input aria-invalid="true" aria-label="Amount for INV-0432" class="f-cell-input" value="three thousand"/><button aria-label="Save amount" class="f-icon-button f-cell-ok" title="Save amount" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m5 12 4 4L19 6"></path></svg></button><button aria-label="Cancel" class="f-icon-button f-cell-cancel" title="Cancel" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></span><small class="f-cell-error"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg>Enter a number, like 3200</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><p class="note f-edit-note"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 16 11-11 3 3-11 11-5 2ZM14 7l3 3"></path></svg>Editing INV-0432 · Amount. <kbd>↵</kbd> saves, <kbd>esc</kbd> cancels.</p></div></section><footer class="r-static-note">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/filter-builder.html ADDED
@@ -0,0 +1,3 @@
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>Filter builder · Fable · 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="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="filter-builder" data-reference-phase="static" data-seat="fable" 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 f-filter-row"><span class="f-rule-word">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="f-icon-button f-rule-remove" title="Remove rule" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></div><div class="filter-row f-filter-row"><span class="f-rule-word">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="f-icon-button f-rule-remove" title="Remove rule" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></div></div><template><div class="filter-row f-filter-row"><span class="f-rule-word">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="f-icon-button f-rule-remove" title="Remove rule" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></div></template><div class="actions" style="justify-content:space-between"><button class="bevel-button" data-add-rule="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M12 5v14M5 12h14"></path></svg><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 f-result-label">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"><div class="f-empty-rules"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M3 5h18l-7 8v6l-4 2v-8Z"></path></svg><span>No conditions yet. Start with a field, then a comparison.</span></div></div><template><div class="filter-row f-filter-row"><span class="f-rule-word">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="f-icon-button f-rule-remove" title="Remove rule" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></div></template><div class="actions" style="justify-content:space-between"><button class="bevel-button" data-add-rule="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M12 5v14M5 12h14"></path></svg><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 f-result-label">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 · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/form-error-summary.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>Form error summary · Fable · 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="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="form-error-summary" data-reference-phase="static" data-seat="fable" 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 f-error-summary" role="alert"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg><strong>Two things need your attention.</strong><ul><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"><label class="field f-field is-invalid">Project name<input aria-invalid="true" class="bevel-input" id="e-name" placeholder="e.g. Field notes" value=""/><small class="f-field-error"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg>A project name is required.</small></label>
4
+ <label class="field f-field is-invalid">Invite a collaborator<input aria-invalid="true" class="bevel-input" id="e-email" value="mira@"/><small class="f-field-error"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg>Enter an address like mira@example.test.</small></label></div><div class="actions"><button class="bevel-button" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--primary" type="button"><span class="bevel-button__label">Create project</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 f-error-summary" role="status"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m5 12 4 4L19 6"></path></svg><div><strong>Everything looks good.</strong><span>Both fields are complete. Your project is ready to create.</span></div></div><div class="stack f-form-stack"><label class="field f-field">Project name<input aria-invalid="false" class="bevel-input" id="c-name" value="Field notes"/></label><label class="field f-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" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--primary" type="button"><span class="bevel-button__label">Create project</span></button></div></div></section><footer class="r-static-note">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/inline-edit.html ADDED
@@ -0,0 +1,3 @@
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>Inline edit · Fable · 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="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="inline-edit" data-reference-phase="static" data-seat="fable" 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 class="f-inline-wrap"><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">The name appears on every document in the project.</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 class="f-inline-wrap"><div class="f-inline-hint"><span class="eyebrow">Project name</span><span class="f-keys"><kbd>↵</kbd> save <kbd>esc</kbd> cancel</span></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><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 class="f-inline-wrap"><div class="f-inline-hint"><span class="eyebrow">Project name</span><span class="f-keys"><kbd>↵</kbd> save <kbd>esc</kbd> cancel</span></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="f-field-error"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg>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 class="f-inline-wrap"><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="f-status-line good f-inline-saved"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 12 4 4L19 6"></path></svg><span>Saved at 10:42</span></p></div></div></section><footer class="r-static-note">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>