@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/components/sidebar-nav.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>Sidebar nav · 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="sidebar-nav" data-reference-phase="static" data-seat="fable" data-selected-source="parent"><section data-ref-state="expanded" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Navigation / 13</div><h1>A steady place to return</h1><p>The workspace frame holds the familiar things.</p></div></header><div class="p-app-shell"><aside class="p-sidebar" data-part="navigation-rail"><div class="p-sidebar-brand"><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="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"></path></svg><strong>Northstar</strong><button aria-label="Collapse sidebar" class="f-icon-button r-collapse" title="Collapse sidebar" 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="M20 12H4m6-6-6 6 6 6"></path></svg></button></div><div class="p-sidebar-links"><div class="p-eyebrow">Workspace</div><button aria-label="Overview" class="p-nav-item" data-nav-item="Overview" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"></path></svg><span>Overview</span></button><button aria-current="page" aria-label="Documents" class="p-nav-item active" data-nav-item="Documents" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Documents</span><small class="f-count">12</small></button><button aria-label="Activity" class="p-nav-item" data-nav-item="Activity" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M12 7v6l4 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"></path></svg><span>Activity</span><small class="f-count">3</small></button><button aria-label="Settings" class="p-nav-item" data-nav-item="Settings" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M4 6h16M4 12h16M4 18h16M9 3v6m6 0v6m-7 0v6"></path></svg><span>Settings</span></button></div><footer class="r-identity"><span aria-label="Jules Park" class="f-avatar" data-who="JP">JP</span><span><strong>Jules Park</strong><small>Owner</small></span><button aria-label="Account menu" class="f-identity-more" 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 9 6 6 6-6"></path></svg></button></footer></aside><div class="p-app-content"><div class="p-eyebrow">Your workspace</div><h2 data-nav-title="">Documents</h2><p class="p-small p-muted">Keep the useful things close.</p><div class="p-document-row f-doc-row"><svg aria-hidden="true" fill="none" height="20" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="20"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div><strong>Field notes</strong><p>12 pages · edited today</p></div><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="m9 5 7 7-7 7"></path></svg></div><div class="p-document-row f-doc-row"><svg aria-hidden="true" fill="none" height="20" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="20"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div><strong>Project brief</strong><p>4 pages · edited today</p></div><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="m9 5 7 7-7 7"></path></svg></div><div class="p-document-row f-doc-row"><svg aria-hidden="true" fill="none" height="20" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="20"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div><strong>Shared references</strong><p>8 pages · edited today</p></div><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="m9 5 7 7-7 7"></path></svg></div></div></div></main></section>
4
+ <section data-ref-state="compact" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Navigation / 13</div><h1>A steady place to return</h1><p>The workspace frame holds the familiar things.</p></div></header><div class="p-app-shell"><aside class="p-sidebar compact" data-part="navigation-rail"><div class="p-sidebar-brand"><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="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"></path></svg><button aria-label="Expand sidebar" class="f-icon-button r-collapse" title="Expand sidebar" 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 12h16m-6-6 6 6-6 6"></path></svg></button></div><div class="p-sidebar-links"><button aria-label="Overview" class="p-nav-item" data-nav-item="Overview" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"></path></svg></button><button aria-current="page" aria-label="Documents" class="p-nav-item active" data-nav-item="Documents" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg></button><button aria-label="Activity" class="p-nav-item" data-nav-item="Activity" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M12 7v6l4 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"></path></svg></button><button aria-label="Settings" class="p-nav-item" data-nav-item="Settings" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M4 6h16M4 12h16M4 18h16M9 3v6m6 0v6m-7 0v6"></path></svg></button></div><footer class="r-identity"><span aria-label="Jules Park" class="f-avatar" data-who="JP">JP</span><span><strong>Jules Park</strong><small>Owner</small></span><button aria-label="Account menu" class="f-identity-more" 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 9 6 6 6-6"></path></svg></button></footer></aside><div class="p-app-content"><div class="p-eyebrow">Your workspace</div><h2 data-nav-title="">Documents</h2><p class="p-small p-muted">Keep the useful things close.</p><div class="p-document-row f-doc-row"><svg aria-hidden="true" fill="none" height="20" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="20"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div><strong>Field notes</strong><p>12 pages · edited today</p></div><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="m9 5 7 7-7 7"></path></svg></div><div class="p-document-row f-doc-row"><svg aria-hidden="true" fill="none" height="20" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="20"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div><strong>Project brief</strong><p>4 pages · edited today</p></div><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="m9 5 7 7-7 7"></path></svg></div><div class="p-document-row f-doc-row"><svg aria-hidden="true" fill="none" height="20" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="20"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div><strong>Shared references</strong><p>8 pages · edited today</p></div><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="m9 5 7 7-7 7"></path></svg></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/small-charts.html ADDED
@@ -0,0 +1,5 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Small charts · 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="small-charts" data-reference-phase="static" data-seat="fable" data-selected-source="astra"><section data-ref-state="bars" inert=""><div class="specimen"><div class="row between" style="margin-bottom:24px"><div><span class="eyebrow">DOCUMENT VIEWS</span><h2>The week in view.</h2></div><span class="badge">Sep 01–07</span></div><svg aria-label="Weekly views: Monday 12, Tuesday 18, Wednesday 14, Thursday 28, Friday 24, Saturday 35, Sunday 31" class="chart f-chart" role="img" viewBox="0 0 640 280"><line class="grid" x1="40" x2="625" y1="230" y2="230"></line><text x="8" y="234">0</text><line class="grid" x1="40" x2="625" y1="180" y2="180"></line><text x="8" y="184">10</text><line class="grid" x1="40" x2="625" y1="130" y2="130"></line><text x="8" y="134">20</text><line class="grid" x1="40" x2="625" y1="80" y2="80"></line><text x="8" y="84">30</text><line class="grid" x1="40" x2="625" y1="30" y2="30"></line><text x="8" y="34">40</text><rect class="data" height="60" opacity="0.6" width="42" x="57" y="170"></rect><text text-anchor="middle" x="78" y="160">12</text><rect class="data" height="90" opacity="0.6" width="42" x="138" y="140"></rect><text text-anchor="middle" x="159" y="130">18</text><rect class="data" height="70" opacity="0.6" width="42" x="219" y="160"></rect><text text-anchor="middle" x="240" y="150">14</text><rect class="data" height="140" opacity="0.6" width="42" x="300" y="90"></rect><text text-anchor="middle" x="321" y="80">28</text><rect class="data" height="120" opacity="0.6" width="42" x="381" y="110"></rect><text text-anchor="middle" x="402" y="100">24</text><rect class="data" height="175" opacity="1" width="42" x="462" y="55"></rect><text text-anchor="middle" x="483" y="45">35</text><rect class="data" height="155" opacity="0.6" width="42" x="543" y="75"></rect><text text-anchor="middle" x="564" y="65">31</text><text text-anchor="middle" x="78" y="258">Mon</text><text text-anchor="middle" x="159" y="258">Tue</text><text text-anchor="middle" x="240" y="258">Wed</text><text text-anchor="middle" x="321" y="258">Thu</text><text text-anchor="middle" x="402" y="258">Fri</text><text text-anchor="middle" x="483" y="258">Sat</text><text text-anchor="middle" x="564" y="258">Sun</text></svg><div class="rule row between f-chart-legend"><small><i class="f-swatch"></i> Views across all documents</small><span class="mono" style="font-size:12px">162 TOTAL</span></div></div></section><section data-ref-state="line" hidden="" inert=""><div class="specimen"><div class="row between" style="margin-bottom:24px"><div><span class="eyebrow">DOCUMENT VIEWS</span><h2>The week in view.</h2></div><span class="badge">Sep 01–07</span></div><svg aria-label="Weekly views: Monday 12, Tuesday 18, Wednesday 14, Thursday 28, Friday 24, Saturday 35, Sunday 31" class="chart f-chart" role="img" viewBox="0 0 640 280"><line class="grid" x1="40" x2="625" y1="230" y2="230"></line><text x="8" y="234">0</text><line class="grid" x1="40" x2="625" y1="180" y2="180"></line><text x="8" y="184">10</text><line class="grid" x1="40" x2="625" y1="130" y2="130"></line><text x="8" y="134">20</text><line class="grid" x1="40" x2="625" y1="80" y2="80"></line><text x="8" y="84">30</text><line class="grid" x1="40" x2="625" y1="30" y2="30"></line><text x="8" y="34">40</text><polyline class="line" points="78,170 159,140 240,160 321,90 402,110 483,55 564,75"></polyline><circle cx="78" cy="170" fill="var(--bevel-surface)" r="4" stroke="var(--bevel-brass)" stroke-width="2"></circle><circle cx="159" cy="140" fill="var(--bevel-surface)" r="4" stroke="var(--bevel-brass)" stroke-width="2"></circle><circle cx="240" cy="160" fill="var(--bevel-surface)" r="4" stroke="var(--bevel-brass)" stroke-width="2"></circle><circle cx="321" cy="90" fill="var(--bevel-surface)" r="4" stroke="var(--bevel-brass)" stroke-width="2"></circle><circle cx="402" cy="110" fill="var(--bevel-surface)" r="4" stroke="var(--bevel-brass)" stroke-width="2"></circle><circle cx="483" cy="55" fill="var(--bevel-surface)" r="4" stroke="var(--bevel-brass)" stroke-width="2"></circle><circle cx="564" cy="75" fill="var(--bevel-surface)" r="4" stroke="var(--bevel-brass)" stroke-width="2"></circle><text text-anchor="middle" x="78" y="258">Mon</text><text text-anchor="middle" x="159" y="258">Tue</text><text text-anchor="middle" x="240" y="258">Wed</text><text text-anchor="middle" x="321" y="258">Thu</text><text text-anchor="middle" x="402" y="258">Fri</text><text text-anchor="middle" x="483" y="258">Sat</text><text text-anchor="middle" x="564" y="258">Sun</text></svg><div class="rule row between f-chart-legend"><small><i class="f-swatch"></i> Views across all documents</small><span class="mono" style="font-size:12px">162 TOTAL</span></div></div></section><section data-ref-state="spark" hidden="" inert=""><div class="specimen"><div class="f-spark-row"><div class="f-spark-figure"><div class="stat-value">162</div><small class="f-delta good"><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 20V4m-6 6 6-6 6 6"></path></svg>18% this week</small></div>
4
+ <div class="f-spark-body"><svg aria-label="Views by day, rising through the week" class="sparkline f-sparkline" preserveAspectRatio="none" viewBox="0 0 160 42"><polyline fill="none" points="0,36 26,29 53,33 80,16 106,20 133,5 160,10" stroke="currentColor" stroke-width="2"></polyline><circle cx="133" cy="5" fill="currentColor" r="3"></circle><line stroke="var(--bevel-line)" x1="0" x2="160" y1="41" y2="41"></line></svg>
5
+ <div class="f-spark-days"><span><b>12</b>Mon</span><span><b>18</b>Tue</span><span><b>14</b>Wed</span><span><b>28</b>Thu</span><span><b>24</b>Fri</span><span class="is-peak"><b>35</b>Sat</span><span><b>31</b>Sun</span></div></div></div><div class="row" style="gap:35px"><div><div class="stat-value">162</div><small class="good">↑ 18% this week</small></div><div style="flex:1"><svg aria-label="Activity increased over the week" class="sparkline" viewBox="0 0 160 42"><polyline fill="none" points="0,36 26,29 53,33 80,16 106,20 133,5 160,10" stroke="currentColor" stroke-width="2"></polyline><line stroke="var(--bevel-line)" x1="0" x2="160" y1="41" y2="41"></line></svg></div></div><div class="rule row between f-chart-legend"><small><i class="f-swatch"></i> Views across all documents</small><span class="mono" style="font-size:12px">162 TOTAL</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/split-button.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>Split button · 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="split-button" data-reference-phase="static" data-seat="fable" data-selected-source="parent">
4
+ <section data-ref-state="line" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Actions / 12</div><h1>One action, a few ways</h1><p>Keep the usual action easy to reach.</p></div></header><div class="p-panel" style="min-height:345px"><p class="r-split-label"><span class="f-variant">A</span>Single dark divider</p><div class="p-between"><div><h2>Field notes</h2><p class="p-muted p-small" style="margin-top:6px">A working guide for Northstar Studio</p></div><div class="p-split-button" data-divider="line"><button class="bevel-button" data-local-action="PDF export preview" type="button"><span class="bevel-button__label"><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>Export PDF</span></button><button aria-label="Other export formats" class="f-split-caret" 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><p class="p-small p-muted f-split-note">12 pages · last saved at 10:42</p></div></main></section><section data-ref-state="inset" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Actions / 12</div><h1>One action, a few ways</h1><p>Keep the usual action easy to reach.</p></div></header><div class="p-panel" style="min-height:345px"><p class="r-split-label"><span class="f-variant">B</span>Slight inset bevel</p><div class="p-between"><div><h2>Field notes</h2><p class="p-muted p-small" style="margin-top:6px">A working guide for Northstar Studio</p></div><div class="p-split-button" data-divider="inset"><button class="bevel-button" data-local-action="PDF export preview" type="button"><span class="bevel-button__label"><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>Export PDF</span></button><button aria-label="Other export formats" class="f-split-caret" 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><p class="p-small p-muted f-split-note">12 pages · last saved at 10:42</p></div></main></section><section data-ref-state="line-open" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Actions / 12</div><h1>One action, a few ways</h1><p>Keep the usual action easy to reach.</p></div></header><div class="p-panel" style="min-height:345px"><p class="r-split-label"><span class="f-variant">A</span>Single dark divider</p><div class="p-between"><div><h2>Field notes</h2><p class="p-muted p-small" style="margin-top:6px">A working guide for Northstar Studio</p></div><div class="p-split-button" data-divider="line"><button class="bevel-button" data-local-action="PDF export preview" type="button"><span class="bevel-button__label"><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>Export PDF</span></button><button aria-expanded="true" aria-label="Other export formats" class="f-split-caret" 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><div aria-label="Export formats" class="p-menu f-split-menu" role="menu"><div class="p-menu-title">Export document</div><button aria-checked="true" data-local-action="PDF document export preview" role="menuitem"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>PDF document</span><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></button><button data-local-action="HTML file export preview" role="menuitem"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>HTML file</span></button><button data-local-action="Markdown export preview" role="menuitem"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Markdown</span></button></div></div></main></section><section data-ref-state="inset-open" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Actions / 12</div><h1>One action, a few ways</h1><p>Keep the usual action easy to reach.</p></div></header><div class="p-panel" style="min-height:345px"><p class="r-split-label"><span class="f-variant">B</span>Slight inset bevel</p><div class="p-between"><div><h2>Field notes</h2><p class="p-muted p-small" style="margin-top:6px">A working guide for Northstar Studio</p></div><div class="p-split-button" data-divider="inset"><button class="bevel-button" data-local-action="PDF export preview" type="button"><span class="bevel-button__label"><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>Export PDF</span></button><button aria-expanded="true" aria-label="Other export formats" class="f-split-caret" 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><div aria-label="Export formats" class="p-menu f-split-menu" role="menu"><div class="p-menu-title">Export document</div><button aria-checked="true" data-local-action="PDF document export preview" role="menuitem"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>PDF document</span><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></button><button data-local-action="HTML file export preview" role="menuitem"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>HTML file</span></button><button data-local-action="Markdown export preview" role="menuitem"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Markdown</span></button></div></div></main></section><section data-ref-state="disabled" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Actions / 12</div><h1>One action, a few ways</h1><p>Keep the usual action easy to reach.</p></div></header><div class="p-panel" style="min-height:345px"><p class="r-split-label"><span class="f-variant">A</span>Single dark divider</p><div class="p-between"><div><h2>Field notes</h2><p class="p-muted p-small" style="margin-top:6px">A working guide for Northstar Studio</p></div><div class="p-split-button" data-divider="line"><button class="bevel-button" disabled="" type="button"><span class="bevel-button__label"><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>Export PDF</span></button><button aria-label="Other export formats" class="f-split-caret" disabled="" 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><p class="p-small p-muted f-split-note">Export is unavailable while the document is loading.</p></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/split-panes.html ADDED
@@ -0,0 +1,8 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Split panes · 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="split-panes" data-reference-phase="static" data-seat="fable" data-selected-source="parent"><section data-ref-state="list-detail" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Workspace / 31</div><h1>Give each side enough room</h1><p>A clear divider between the list and the detail.</p></div></header><div class="p-split-panes f-split-panes" data-split="" style="--split:32%"><section class="p-pane"><div class="p-eyebrow">Documents</div><div class="p-pane-item active"><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 notes</div><div class="p-pane-item"><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> Project brief</div><div class="p-pane-item"><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> Shared references</div></section><div aria-hidden="true" class="p-pane-divider"><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></div><section class="p-pane p-pane-detail"><div class="p-eyebrow">Document</div><h2>Field notes</h2><p>Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p><div class="p-row f-pane-byline"><span aria-hidden="true" class="f-avatar small" data-who="MC">MC</span><span class="p-small p-muted">Edited today at 10:42</span></div></section></div><p class="p-pane-adjust f-pane-caption"><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="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg>List 32% · minimum 25% · drag the divider</p></main></section>
4
+ <section data-ref-state="editor-preview" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Workspace / 31</div><h1>Give each side enough room</h1><p>A clear divider between the list and the detail.</p></div></header><div class="p-split-panes f-split-panes" data-split="" style="--split:46%"><section class="p-pane"><div class="p-eyebrow">Source</div><pre><span class="tk-tag">&lt;article&gt;</span>
5
+ <span class="tk-tag">&lt;h1&gt;</span>Field notes<span class="tk-tag">&lt;/h1&gt;</span>
6
+ <span class="tk-tag">&lt;p&gt;</span>Keep the useful
7
+ things close.<span class="tk-tag">&lt;/p&gt;</span>
8
+ <span class="tk-tag">&lt;/article&gt;</span></pre></section><div aria-hidden="true" class="p-pane-divider"><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></div><section class="p-pane p-pane-detail"><div class="p-eyebrow">Preview</div><h2>Field notes</h2><p>Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p><div class="p-row f-pane-byline"><span aria-hidden="true" class="f-avatar small" data-who="MC">MC</span><span class="p-small p-muted">Edited today at 10:42</span></div></section></div><p class="p-pane-adjust f-pane-caption"><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="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg>Source 46% · minimum 25% · drag the divider</p></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/stat-tiles.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>Stat tiles · 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="stat-tiles" 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>A week, at a glance.</h1><p>A little perspective on the work in motion.</p></header><div class="stat-grid"><div class="stat"><div class="eyebrow f-stat-label">Weekly views</div><div class="stat-value">162</div><small class="f-delta good"><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 20V4m-6 6 6-6 6 6"></path></svg>18% this week</small><svg aria-label="Activity increased over the week" class="sparkline" viewBox="0 0 160 42"><polyline fill="none" points="0,36 26,29 53,33 80,16 106,20 133,5 160,10" stroke="currentColor" stroke-width="2"></polyline><circle cx="160" cy="10" fill="currentColor" r="3"></circle><line stroke="var(--bevel-line)" x1="0" x2="160" y1="41" y2="41"></line></svg></div><div class="stat"><div class="eyebrow f-stat-label">Documents</div><div class="stat-value">12</div><small class="f-delta good"><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 20V4m-6 6 6-6 6 6"></path></svg>3 this week</small><svg aria-label="Activity increased over the week" class="sparkline" viewBox="0 0 160 42"><polyline fill="none" points="0,30 26,30 53,22 80,22 106,14 133,14 160,6" stroke="currentColor" stroke-width="2"></polyline><circle cx="160" cy="6" fill="currentColor" r="3"></circle><line stroke="var(--bevel-line)" x1="0" x2="160" y1="41" y2="41"></line></svg></div><div class="stat"><div class="eyebrow f-stat-label">Open reviews</div><div class="stat-value">4</div><small class="f-delta bad"><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 20V4m-6 6 6-6 6 6"></path></svg>2 more than last week</small><svg aria-label="Activity increased over the week" class="sparkline" viewBox="0 0 160 42"><polyline fill="none" points="0,20 26,28 53,24 80,14 106,18 133,8 160,4" stroke="currentColor" stroke-width="2"></polyline><circle cx="160" cy="4" fill="currentColor" r="3"></circle><line stroke="var(--bevel-line)" x1="0" x2="160" y1="41" y2="41"></line></svg></div></div><div class="row between rule f-stat-foot"><small>Northstar Studio</small><span class="mono muted" style="font-size:11px">SEP 01–07, 2026</span></div></div></section><section data-ref-state="zero" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>A week, at a glance.</h1><p>Nothing to count yet. Numbers appear after the first document.</p></header><div class="stat-grid"><div class="stat"><div class="eyebrow f-stat-label">Weekly views</div><div class="stat-value">0</div><small class="f-delta">No activity yet</small><svg aria-hidden="true" class="sparkline f-spark-flat" viewBox="0 0 160 42"><line stroke="var(--bevel-line-2)" stroke-dasharray="2 4" x1="0" x2="160" y1="30" y2="30"></line></svg></div><div class="stat"><div class="eyebrow f-stat-label">Documents</div><div class="stat-value">0</div><small class="f-delta">No activity yet</small><svg aria-hidden="true" class="sparkline f-spark-flat" viewBox="0 0 160 42"><line stroke="var(--bevel-line-2)" stroke-dasharray="2 4" x1="0" x2="160" y1="30" y2="30"></line></svg></div><div class="stat"><div class="eyebrow f-stat-label">Open reviews</div><div class="stat-value">0</div><small class="f-delta">No activity yet</small><svg aria-hidden="true" class="sparkline f-spark-flat" viewBox="0 0 160 42"><line stroke="var(--bevel-line-2)" stroke-dasharray="2 4" x1="0" x2="160" y1="30" y2="30"></line></svg></div></div><div class="row between rule f-stat-foot"><small>Northstar Studio</small><span class="mono muted" style="font-size:11px">SEP 01–07, 2026</span></div></div></section><footer class="r-static-note">Static UI reference · 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/toast-stack.html ADDED
@@ -0,0 +1,5 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Toast stack · 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="toast-stack" data-reference-phase="static" data-seat="fable" data-selected-source="parent"><section data-ref-state="stack" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Feedback / 19</div><h1>A small acknowledgement</h1><p>Enough feedback to know what happened.</p></div></header><div class="p-toast-stage f-toast-stage" data-part="notification-stack"><article class="p-toast success f-toast" data-dismissible=""><span class="p-toast-icon"><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></span><div class="p-toast-body"><h3>Changes saved</h3><p>Field notes is up to date.</p></div><button aria-label="Dismiss Changes saved" class="f-toast-close" data-dismiss="" 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></article><article class="p-toast f-toast" data-dismissible=""><span class="p-toast-icon"><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="M3 3h18v5H3ZM5 8v13h14V8M9 12h6"></path></svg></span><div class="p-toast-body"><h3>Document archived</h3><p>You can bring it back whenever you need it.</p><button class="bevel-button bevel-button--small f-toast-action" 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">Undo</span></button></div><button aria-label="Dismiss Document archived" class="f-toast-close" data-dismiss="" 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></article><article class="p-toast error f-toast" data-dismissible=""><span class="p-toast-icon"><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></span><div class="p-toast-body"><h3>Upload interrupted</h3><p>workspace.jpg did not finish uploading.</p><button class="bevel-button bevel-button--small f-toast-action" 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">Try again</span></button></div><button aria-label="Dismiss Upload interrupted" class="f-toast-close" data-dismiss="" 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></article></div></main></section>
4
+ <section data-ref-state="success" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Feedback / 19</div><h1>A small acknowledgement</h1><p>Enough feedback to know what happened.</p></div></header><div class="p-toast-stage f-toast-stage" data-part="notification-stack"><article class="p-toast success f-toast" data-dismissible=""><span class="p-toast-icon"><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></span><div class="p-toast-body"><h3>Changes saved</h3><p>Field notes is up to date.</p></div><button aria-label="Dismiss Changes saved" class="f-toast-close" data-dismiss="" 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></article></div></main></section>
5
+ <section data-ref-state="error" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Feedback / 19</div><h1>A small acknowledgement</h1><p>Enough feedback to know what happened.</p></div></header><div class="p-toast-stage f-toast-stage" data-part="notification-stack"><article class="p-toast error f-toast" data-dismissible=""><span class="p-toast-icon"><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></span><div class="p-toast-body"><h3>Upload interrupted</h3><p>workspace.jpg did not finish uploading.</p><button class="bevel-button bevel-button--small f-toast-action" 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">Try again</span></button></div><button aria-label="Dismiss Upload interrupted" class="f-toast-close" data-dismiss="" 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></article></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/tree-view.html ADDED
@@ -0,0 +1,4 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Tree view · 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="tree-view" data-reference-phase="static" data-seat="fable" data-selected-source="parent"><section data-ref-state="expanded" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Navigation / 17</div><h1>A place for every document</h1><p>Folders open in place and keep their contents aligned.</p></div></header><div class="p-tree" data-part="tree"><div class="p-between p-tree-head"><div class="p-eyebrow">Northstar Studio</div><span class="p-badge">12 files · 4 folders</span></div><details open=""><summary><i class="f-tree-caret"><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></i><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="M3 7V4h6l3 3h9v13H3Z"></path></svg> Projects</summary><div class="p-tree-children"><details open=""><summary><i class="f-tree-caret"><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></i><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="M3 7V4h6l3 3h9v13H3Z"></path></svg> Field notes</summary><div class="p-tree-children"><button class="p-tree-leaf selected" data-tree-node="" type="button"><svg aria-hidden="true" fill="none" height="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><span>Project brief</span><span class="p-badge f-tree-open">Open</span></button><button class="p-tree-leaf" data-tree-node="" 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="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Research notes</span></button><button class="p-tree-leaf" data-tree-node="" type="button"><svg aria-hidden="true" fill="none" height="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><span>Shared references</span></button></div></details><details><summary><i class="f-tree-caret"><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></i><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="M3 7V4h6l3 3h9v13H3Z"></path></svg> Website</summary><div class="p-tree-children"><button class="p-tree-leaf" data-tree-node="" type="button"><svg aria-hidden="true" fill="none" height="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><span>Home page</span></button></div></details></div></details><details><summary><i class="f-tree-caret"><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></i><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="M3 7V4h6l3 3h9v13H3Z"></path></svg> Archive <span class="p-badge">0</span></summary><div class="p-tree-empty"><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="M3 7V4h6l3 3h9v13H3Z"></path></svg>No documents here yet.</div></details><button class="p-tree-leaf" data-tree-node="" 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="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Workspace guide</span></button></div></main></section>
4
+ <section data-ref-state="empty" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Navigation / 17</div><h1>A place for every document</h1><p>Folders open in place and keep their contents aligned.</p></div></header><div class="p-tree" data-part="tree"><div class="p-between p-tree-head"><div class="p-eyebrow">Northstar Studio</div><span class="p-badge">12 files · 4 folders</span></div><details open=""><summary><i class="f-tree-caret"><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></i><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="M3 7V4h6l3 3h9v13H3Z"></path></svg> Projects</summary><div class="p-tree-children"><details open=""><summary><i class="f-tree-caret"><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></i><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="M3 7V4h6l3 3h9v13H3Z"></path></svg> Field notes</summary><div class="p-tree-children"><button class="p-tree-leaf" data-tree-node="" type="button"><svg aria-hidden="true" fill="none" height="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><span>Project brief</span></button><button class="p-tree-leaf" data-tree-node="" 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="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Research notes</span></button><button class="p-tree-leaf" data-tree-node="" type="button"><svg aria-hidden="true" fill="none" height="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><span>Shared references</span></button></div></details><details><summary><i class="f-tree-caret"><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></i><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="M3 7V4h6l3 3h9v13H3Z"></path></svg> Website</summary><div class="p-tree-children"><button class="p-tree-leaf" data-tree-node="" type="button"><svg aria-hidden="true" fill="none" height="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><span>Home page</span></button></div></details></div></details><details open=""><summary><i class="f-tree-caret"><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></i><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="M3 7V4h6l3 3h9v13H3Z"></path></svg> Archive <span class="p-badge">0</span></summary><div class="p-tree-empty"><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="M3 7V4h6l3 3h9v13H3Z"></path></svg>No documents here yet.</div></details><button class="p-tree-leaf" data-tree-node="" 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="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Workspace guide</span></button></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/upload-dropzone.html ADDED
@@ -0,0 +1,6 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Upload dropzone · 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="upload-dropzone" data-reference-phase="static" data-seat="fable" data-selected-source="parent"><section data-ref-state="empty" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Files / 08</div><h1>Bring your work along</h1><p>Images and documents, ready for the project.</p></div></header><div class="p-dropzone"><svg aria-hidden="true" fill="none" height="26" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="26"><path d="M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5"></path></svg><h3>Drop a file here</h3><p>Images, PDFs and documents · up to 10 MB</p><label class="bevel-button bevel-button--small"><input class="bevel-sr-only" data-file-preview="" type="file"/><span class="bevel-button__label">Choose a file</span></label></div></main></section>
4
+ <section data-ref-state="queue" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Files / 08</div><h1>Bring your work along</h1><p>Images and documents, ready for the project.</p></div></header><div class="p-dropzone is-compact"><svg aria-hidden="true" fill="none" height="26" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="26"><path d="M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5"></path></svg><h3>Drop a file here</h3><p>Images, PDFs and documents · up to 10 MB</p><label class="bevel-button bevel-button--small"><input class="bevel-sr-only" data-file-preview="" type="file"/><span class="bevel-button__label">Choose a file</span></label></div><div class="p-upload-row f-upload-row"><img alt="Workspace image preview" src="../../fixtures/workspace.jpg"/><div style="flex:1"><strong class="p-small">workspace.jpg</strong><p class="p-small p-muted">184 KB · Uploading</p><span class="p-progress"><span style="width:68%"></span></span></div><span class="f-file-pct">68%</span></div><div class="p-upload-row f-upload-row"><span class="f-file-icon"><svg aria-hidden="true" fill="none" height="20" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="20"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg></span><div style="flex:1"><strong class="p-small">field-guide.pdf</strong><p class="p-small p-muted">420 KB · ready</p></div><span class="f-file-state good"><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>Ready</span></div></main></section>
5
+ <section data-ref-state="error" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Files / 08</div><h1>Bring your work along</h1><p>Images and documents, ready for the project.</p></div></header><div class="p-dropzone is-compact"><svg aria-hidden="true" fill="none" height="26" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="26"><path d="M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5"></path></svg><h3>Drop a file here</h3><p>Images, PDFs and documents · up to 10 MB</p><label class="bevel-button bevel-button--small"><input class="bevel-sr-only" data-file-preview="" type="file"/><span class="bevel-button__label">Choose a file</span></label></div><div class="p-upload-row f-upload-row"><img alt="Workspace image preview" src="../../fixtures/workspace.jpg"/><div style="flex:1"><strong class="p-small">workspace.jpg</strong><p class="p-small p-muted">184 KB · The connection dropped at 68%</p></div><span class="f-file-actions"><span class="f-file-state bad"><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 3 10 18H2ZM12 9v5m0 3v1"></path></svg>Failed</span><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">Retry</span></button></span></div><div class="p-upload-row f-upload-row"><span class="f-file-icon"><svg aria-hidden="true" fill="none" height="20" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="20"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg></span><div style="flex:1"><strong class="p-small">field-guide.pdf</strong><p class="p-small p-muted">420 KB · ready</p></div><span class="f-file-state good"><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>Ready</span></div></main></section>
6
+ <section data-ref-state="crop" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Files / 08</div><h1>Bring your work along</h1><p>Images and documents, ready for the project.</p></div></header><div class="p-dropzone is-compact"><svg aria-hidden="true" fill="none" height="26" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="26"><path d="M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5"></path></svg><h3>Drop a file here</h3><p>Images, PDFs and documents · up to 10 MB</p><label class="bevel-button bevel-button--small"><input class="bevel-sr-only" data-file-preview="" type="file"/><span class="bevel-button__label">Choose a file</span></label></div><div class="p-between f-crop-head"><strong>Crop workspace.jpg</strong><span class="p-badge">1:1 · 800 × 800</span></div><div class="qc-stage" data-part="crop-stage"><img alt="A bright workspace with a laptop and monitor" src="../../fixtures/workspace.jpg"/><div class="qc-dim"></div><div class="qc-box"><div class="qc-handle qc-nw"></div><div class="qc-handle qc-ne"></div><div class="qc-handle qc-sw"></div><div class="qc-handle qc-se"></div><i class="qc-rule horizontal one"></i><i class="qc-rule horizontal two"></i><i class="qc-rule vertical one"></i><i class="qc-rule vertical two"></i></div><span class="p-crop-size">800 × 800</span></div><div class="p-actions"><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--small bevel-button--primary" type="button"><span class="bevel-button__label">Use this crop</span></button></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/wizard-shell.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>Wizard shell · 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="wizard-shell" data-reference-phase="static" data-seat="fable" data-selected-source="astra"><section data-ref-state="current" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Make a space for good work.</h1><p>A few thoughtful choices to get started.</p></header><div class="wizard f-wizard"><div class="wizard-steps"><div class="wizard-step" data-step="done"><b aria-label="Step 1 complete"><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></b>The basics<small class="f-step-note">Complete</small></div><div class="wizard-step current" data-step="current"><b>02</b>Invite people<small class="f-step-note">Current step</small></div><div class="wizard-step" data-step="next"><b>03</b>Ready to go<small class="f-step-note">Up next</small></div></div><div><div class="eyebrow">STEP 02 OF 03</div><h2>Good work needs good people.</h2><p class="muted f-wizard-lede">Invite someone to help shape Field notes.</p><label class="field">Email address<input class="bevel-input" value="mira@example.test"/></label><label class="field" style="margin-top:16px">Role<label class="bevel-select"><span class="bevel-sr-only">Role</span><select class="bevel-select__field"><option>Editor</option><option>Viewer</option><option>Owner</option></select></label></label><div class="actions"><button class="bevel-button" type="button"><span class="bevel-button__label">Back</span></button><button class="bevel-button bevel-button--primary" type="button"><span class="bevel-button__label">Next step</span></button></div><p class="note">Only invited people can join this workspace.</p></div></div></div></section><section data-ref-state="error" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Make a space for good work.</h1><p>A few thoughtful choices to get started.</p></header><div class="wizard f-wizard"><div class="wizard-steps"><div class="wizard-step" data-step="done"><b aria-label="Step 1 complete"><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></b>The basics<small class="f-step-note">Complete</small></div><div class="wizard-step current" data-step="current"><b>02</b>Invite people<small class="f-step-note">Current step</small></div><div class="wizard-step" data-step="next"><b>03</b>Ready to go<small class="f-step-note">Up next</small></div></div><div><div class="eyebrow">STEP 02 OF 03</div><h2>Good work needs good people.</h2><p class="muted f-wizard-lede">Invite someone to help shape Field notes.</p><label class="field">Email address<input class="bevel-input" value="mira@"/></label><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>Enter a complete email address, like mira@example.test.</p><label class="field" style="margin-top:16px">Role<label class="bevel-select"><span class="bevel-sr-only">Role</span><select class="bevel-select__field"><option>Editor</option><option>Viewer</option><option>Owner</option></select></label></label><div class="actions"><button class="bevel-button" type="button"><span class="bevel-button__label">Back</span></button><button class="bevel-button bevel-button--primary" type="button"><span class="bevel-button__label">Next step</span></button></div><p class="note">Only invited people can join this workspace.</p></div></div></div></section><section data-ref-state="complete" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Make a space for good work.</h1><p>A few thoughtful choices to get started.</p></header><div class="wizard f-wizard"><div class="wizard-steps"><div class="wizard-step" data-step="done"><b aria-label="Step 1 complete"><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></b>The basics<small class="f-step-note">Complete</small></div><div class="wizard-step" data-step="done"><b aria-label="Step 2 complete"><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></b>Invite people<small class="f-step-note">Complete</small></div><div class="wizard-step" data-step="done"><b aria-label="Step 3 complete"><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></b>Ready to go<small class="f-step-note">Complete</small></div></div><div><span class="badge good"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="m5 12 4 4L19 6"></path></svg>Setup complete</span><h2 style="margin-top:20px">Your space is ready.</h2><p class="muted f-wizard-lede">Field notes brings your documents, decisions and people together.</p><div class="f-archive-card"><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="M3 7V4h6l3 3h9v13H3Z"></path></svg><div><strong>Field notes</strong><small>Northstar Studio · Private project · 1 collaborator invited</small></div><span class="badge good">Ready</span></div><div class="actions"><button class="bevel-button" type="button"><span class="bevel-button__label">Back</span></button><button class="bevel-button bevel-button--primary" data-action="Project opened in the local preview." type="button"><span class="bevel-button__label">Open project</span></button></div></div></div></div></section><footer class="r-static-note">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>