@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/selected/components/multi-select-picker.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>Multi-select picker · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-parent.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="multi-select-picker" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="parent"><section data-ref-state="selected" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Choose / 06</div><h1>A few useful labels</h1><p>Make a set from the options you already know.</p></div></header><div class="p-picker" data-tag-picker=""><div class="p-field" style="margin-bottom:8px"><span>Project labels</span></div><div class="f-tag-field"><div class="p-row" data-tags=""><span class="p-tag f-tag" data-label="design" data-tag="Design">Design<button aria-label="Remove Design" data-remove-tag="" type="button"><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="m6 6 12 12M18 6 6 18"></path></svg></button></span><span class="p-tag f-tag" data-label="editorial" data-tag="Editorial">Editorial<button aria-label="Remove Editorial" data-remove-tag="" type="button"><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="m6 6 12 12M18 6 6 18"></path></svg></button></span></div></div><div hidden=""><div class="p-search"><input aria-label="Search labels" data-tag-search="" placeholder="Find a label…" value=""/><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M16 16l5 5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0"></path></svg></div><div class="p-options"><div class="p-option" data-tag-option="Design"><label class="bevel-checkbox"><input checked="" class="bevel-sr-only" data-tag-check="Design" type="checkbox"/><span class="bevel-checkbox__box"></span><i class="f-label-dot" data-label="design"></i><span>Design</span></label></div><div class="p-option" data-tag-option="Editorial"><label class="bevel-checkbox"><input checked="" class="bevel-sr-only" data-tag-check="Editorial" type="checkbox"/><span class="bevel-checkbox__box"></span><i class="f-label-dot" data-label="editorial"></i><span>Editorial</span></label></div><div class="p-option" data-tag-option="Engineering"><label class="bevel-checkbox"><input class="bevel-sr-only" data-tag-check="Engineering" type="checkbox"/><span class="bevel-checkbox__box"></span><i class="f-label-dot" data-label="engineering"></i><span>Engineering</span></label></div><div class="p-option" data-tag-option="Research"><label class="bevel-checkbox"><input class="bevel-sr-only" data-tag-check="Research" type="checkbox"/><span class="bevel-checkbox__box"></span><i class="f-label-dot" data-label="research"></i><span>Research</span></label></div><div class="p-empty" data-tag-empty="" hidden=""><h3>No matching labels</h3><p class="p-small">Try Design, Editorial or Research.</p></div></div></div><div class="p-picker-foot"><span data-tag-count="">2</span> of 4 labels selected</div></div></main></section>
4
+ <section data-ref-state="open" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Choose / 06</div><h1>A few useful labels</h1><p>Make a set from the options you already know.</p></div></header><div class="p-picker" data-tag-picker=""><div class="p-field" style="margin-bottom:8px"><span>Project labels</span></div><div class="f-tag-field is-open"><div class="p-row" data-tags=""><span class="p-tag f-tag" data-label="design" data-tag="Design">Design<button aria-label="Remove Design" data-remove-tag="" type="button"><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="m6 6 12 12M18 6 6 18"></path></svg></button></span><span class="p-tag f-tag" data-label="editorial" data-tag="Editorial">Editorial<button aria-label="Remove Editorial" data-remove-tag="" type="button"><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="m6 6 12 12M18 6 6 18"></path></svg></button></span></div></div><div class="f-tag-popover"><div class="p-search"><input aria-label="Search labels" data-tag-search="" placeholder="Find a label…" value=""/><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M16 16l5 5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0"></path></svg></div><div class="p-options"><div class="p-option" data-tag-option="Design"><label class="bevel-checkbox"><input checked="" class="bevel-sr-only" data-tag-check="Design" type="checkbox"/><span class="bevel-checkbox__box"></span><i class="f-label-dot" data-label="design"></i><span>Design</span></label></div><div class="p-option" data-tag-option="Editorial"><label class="bevel-checkbox"><input checked="" class="bevel-sr-only" data-tag-check="Editorial" type="checkbox"/><span class="bevel-checkbox__box"></span><i class="f-label-dot" data-label="editorial"></i><span>Editorial</span></label></div><div class="p-option" data-tag-option="Engineering"><label class="bevel-checkbox"><input class="bevel-sr-only" data-tag-check="Engineering" type="checkbox"/><span class="bevel-checkbox__box"></span><i class="f-label-dot" data-label="engineering"></i><span>Engineering</span></label></div><div class="p-option" data-tag-option="Research"><label class="bevel-checkbox"><input class="bevel-sr-only" data-tag-check="Research" type="checkbox"/><span class="bevel-checkbox__box"></span><i class="f-label-dot" data-label="research"></i><span>Research</span></label></div><div class="p-empty" data-tag-empty="" hidden=""><h3>No matching labels</h3><p class="p-small">Try Design, Editorial or Research.</p></div></div></div><div class="p-picker-foot"><span data-tag-count="">2</span> of 4 labels selected</div></div></main></section>
5
+ <section data-ref-state="empty" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Choose / 06</div><h1>A few useful labels</h1><p>Make a set from the options you already know.</p></div></header><div class="p-picker" data-tag-picker=""><div class="p-field" style="margin-bottom:8px"><span>Project labels</span></div><div class="f-tag-field is-open"><div class="p-row" data-tags=""><span class="p-muted p-small" data-tag-placeholder="">Type to find a label</span></div></div><div class="f-tag-popover"><div class="p-search"><input aria-label="Search labels" data-tag-search="" placeholder="Find a label…" value="Finance"/><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M16 16l5 5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0"></path></svg></div><div class="p-options"><div class="p-option" data-tag-option="Design" hidden=""><label class="bevel-checkbox"><input class="bevel-sr-only" data-tag-check="Design" type="checkbox"/><span class="bevel-checkbox__box"></span><i class="f-label-dot" data-label="design"></i><span>Design</span></label></div><div class="p-option" data-tag-option="Editorial" hidden=""><label class="bevel-checkbox"><input class="bevel-sr-only" data-tag-check="Editorial" type="checkbox"/><span class="bevel-checkbox__box"></span><i class="f-label-dot" data-label="editorial"></i><span>Editorial</span></label></div><div class="p-option" data-tag-option="Engineering" hidden=""><label class="bevel-checkbox"><input class="bevel-sr-only" data-tag-check="Engineering" type="checkbox"/><span class="bevel-checkbox__box"></span><i class="f-label-dot" data-label="engineering"></i><span>Engineering</span></label></div><div class="p-option" data-tag-option="Research" hidden=""><label class="bevel-checkbox"><input class="bevel-sr-only" data-tag-check="Research" type="checkbox"/><span class="bevel-checkbox__box"></span><i class="f-label-dot" data-label="research"></i><span>Research</span></label></div><div class="p-empty f-empty" data-tag-empty=""><h3>No label called “Finance”</h3><p class="p-small">Try Design, Editorial or Research, or make a new one.</p><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="M12 5v14M5 12h14"></path></svg><span class="bevel-button__label">Create “Finance”</span></button></div></div></div><div class="p-picker-foot"><span data-tag-count="">0</span> of 4 labels selected</div></div></main></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/components/pagination.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>Pagination · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="pagination" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="astra"><section data-ref-state="first" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Every record has a place.</h1><p>Invoices / All clients</p></header><div class="table-scroll"><table><thead><tr><th>Invoice</th><th>Client</th><th style="text-align:right">Amount</th><th>Status</th></tr></thead><tbody><tr><td class="mono">INV-0431</td><td>Juniper Health</td><td class="numeric">$1,240.00</td><td><span class="badge good">Paid</span></td></tr><tr><td class="mono">INV-0432</td><td>Northstar Studio</td><td class="numeric">$3,200.00</td><td><span class="badge bad">Overdue</span></td></tr><tr><td class="mono">INV-0433</td><td>Maple House</td><td class="numeric">$860.00</td><td><span class="badge">Sent</span></td></tr><tr><td class="mono">INV-0434</td><td>Juniper Health</td><td class="numeric">$410.00</td><td><span class="badge">Due soon</span></td></tr></tbody></table></div><div class="rule row between wrap f-pager-row"><small>1–4 of 48 invoices</small><nav aria-label="Invoice pages" class="pagination f-pagination"><button aria-label="Previous page" class="bevel-button" 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="m15 5-7 7 7 7"></path></svg></button><button aria-current="page" class="bevel-button current" type="button"><span class="bevel-button__label">1</span></button><button class="bevel-button" type="button"><span class="bevel-button__label">2</span></button><button class="bevel-button" type="button"><span class="bevel-button__label">3</span></button><span class="f-page-gap">…</span><button class="bevel-button" type="button"><span class="bevel-button__label">12</span></button><button aria-label="Next page" class="bevel-button" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m9 5 7 7-7 7"></path></svg></button></nav></div><p class="note">Page 1 of 12</p></div></section><section data-ref-state="middle" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Every record has a place.</h1><p>Invoices / All clients</p></header><div class="table-scroll"><table><thead><tr><th>Invoice</th><th>Client</th><th style="text-align:right">Amount</th><th>Status</th></tr></thead><tbody><tr><td class="mono">INV-0431</td><td>Juniper Health</td><td class="numeric">$1,240.00</td><td><span class="badge good">Paid</span></td></tr><tr><td class="mono">INV-0432</td><td>Northstar Studio</td><td class="numeric">$3,200.00</td><td><span class="badge bad">Overdue</span></td></tr><tr><td class="mono">INV-0433</td><td>Maple House</td><td class="numeric">$860.00</td><td><span class="badge">Sent</span></td></tr><tr><td class="mono">INV-0434</td><td>Juniper Health</td><td class="numeric">$410.00</td><td><span class="badge">Due soon</span></td></tr></tbody></table></div><div class="rule row between wrap f-pager-row"><small>21–24 of 48 invoices</small><nav aria-label="Invoice pages" class="pagination f-pagination"><button aria-label="Previous page" class="bevel-button" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m15 5-7 7 7 7"></path></svg></button><button class="bevel-button" type="button"><span class="bevel-button__label">1</span></button><span class="f-page-gap">…</span><button class="bevel-button" type="button"><span class="bevel-button__label">5</span></button><button aria-current="page" class="bevel-button current" type="button"><span class="bevel-button__label">6</span></button><button class="bevel-button" type="button"><span class="bevel-button__label">7</span></button><span class="f-page-gap">…</span><button class="bevel-button" type="button"><span class="bevel-button__label">12</span></button><button aria-label="Next page" class="bevel-button" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m9 5 7 7-7 7"></path></svg></button></nav></div><p class="note">Page 6 of 12</p></div></section><section data-ref-state="last" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Every record has a place.</h1><p>Invoices / All clients</p></header><div class="table-scroll"><table><thead><tr><th>Invoice</th><th>Client</th><th style="text-align:right">Amount</th><th>Status</th></tr></thead><tbody><tr><td class="mono">INV-0431</td><td>Juniper Health</td><td class="numeric">$1,240.00</td><td><span class="badge good">Paid</span></td></tr><tr><td class="mono">INV-0432</td><td>Northstar Studio</td><td class="numeric">$3,200.00</td><td><span class="badge bad">Overdue</span></td></tr><tr><td class="mono">INV-0433</td><td>Maple House</td><td class="numeric">$860.00</td><td><span class="badge">Sent</span></td></tr><tr><td class="mono">INV-0434</td><td>Juniper Health</td><td class="numeric">$410.00</td><td><span class="badge">Due soon</span></td></tr></tbody></table></div><div class="rule row between wrap f-pager-row"><small>45–48 of 48 invoices</small><nav aria-label="Invoice pages" class="pagination f-pagination"><button aria-label="Previous page" class="bevel-button" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m15 5-7 7 7 7"></path></svg></button><button class="bevel-button" type="button"><span class="bevel-button__label">1</span></button><span class="f-page-gap">…</span><button class="bevel-button" type="button"><span class="bevel-button__label">10</span></button><button class="bevel-button" type="button"><span class="bevel-button__label">11</span></button><button aria-current="page" class="bevel-button current" type="button"><span class="bevel-button__label">12</span></button><button aria-label="Next page" class="bevel-button" 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="m9 5 7 7-7 7"></path></svg></button></nav></div><p class="note">Page 12 of 12</p></div></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/components/persistent-action-banner.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>Persistent action banner · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../parent/base-parent.css" rel="stylesheet"/><link href="../../parent/refinement.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="persistent-action-banner" data-reference-phase="static" data-selected-source="parent"><section data-ref-state="offline" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Feedback / 20</div><h1>Keep an unresolved thing visible</h1><p>A lasting notice belongs with the work it affects.</p></div></header><section class="p-banner" data-part="persistent-notice"><span><svg aria-hidden="true" fill="none" height="23" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="23"><path d="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg></span><div><h3>You are working offline.</h3><p>Your recent changes are waiting to sync. Keep this page open until the connection returns.</p></div><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Retry connection</span></button></section><div class="p-panel" style="margin-top:20px"><div class="p-between"><h2>Field notes</h2><span class="p-badge">Draft</span></div><p class="p-muted" style="margin-top:14px">A working collection of ideas, decisions and useful details.</p></div></main></section>
4
+ <section data-ref-state="resolved" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Feedback / 20</div><h1>Keep an unresolved thing visible</h1><p>A lasting notice belongs with the work it affects.</p></div></header><section class="p-banner resolved" data-part="persistent-notice"><span><svg aria-hidden="true" fill="none" height="23" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="23"><path d="m5 12 4 4L19 6"></path></svg></span><div><h3>You are back online.</h3><p>The connection is available again. Your work can continue.</p></div><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Preview offline</span></button></section><div class="p-panel" style="margin-top:20px"><div class="p-between"><h2>Field notes</h2><span class="p-badge">Draft</span></div><p class="p-muted" style="margin-top:14px">A working collection of ideas, decisions and useful details.</p></div></main></section><footer class="r-static-note">Selected static UI · Parent design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/components/popconfirm.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>Popconfirm · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-parent.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="popconfirm" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="parent"><section data-ref-state="open" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Overlay / 04</div><h1>A pause before removing</h1><p>The confirmation stays attached to the action.</p></div></header><div class="p-panel"><div class="p-between"><div class="p-row"><svg aria-hidden="true" fill="none" height="24" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="24"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div><strong>Field notes</strong><p class="p-small p-muted">Document · 12 pages</p></div></div><button aria-expanded="true" aria-label="Remove document" class="f-icon-button f-popconfirm-trigger" title="Remove document" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M3 6h18M6 6l1 15h10l1-15M9 6V3h6v3M10 10v7m4-7v7"></path></svg></button></div><section aria-label="Remove document" class="p-popconfirm" data-part="confirmation" role="dialog"><div class="f-popconfirm-head"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg><h3>Remove this document?</h3></div><p>Field notes will move to the archive. The other documents will stay here.</p><div class="p-actions"><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Keep it</span></button><button class="bevel-button bevel-button--small bevel-button--danger" type="button"><span class="bevel-button__label">Remove</span></button></div></section></div></main></section>
4
+ <section data-ref-state="confirmed" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Overlay / 04</div><h1>A pause before removing</h1><p>The confirmation stays attached to the action.</p></div></header><div class="p-panel"><div class="p-between"><div class="p-row"><svg aria-hidden="true" fill="none" height="24" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="24"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div><strong>Field notes</strong><p class="p-small p-muted">Document · 12 pages</p></div></div><button aria-expanded="false" aria-label="Remove document" class="f-icon-button f-popconfirm-trigger" title="Remove document" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M3 6h18M6 6l1 15h10l1-15M9 6V3h6v3M10 10v7m4-7v7"></path></svg></button></div><div class="f-status-line good"><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><strong>Document moved to the archive.</strong> Field notes is no longer in this project.</span><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Undo</span></button></div></div></main></section>
5
+ <section data-ref-state="closed" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Overlay / 04</div><h1>A pause before removing</h1><p>The confirmation stays attached to the action.</p></div></header><div class="p-panel"><div class="p-between"><div class="p-row"><svg aria-hidden="true" fill="none" height="24" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="24"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div><strong>Field notes</strong><p class="p-small p-muted">Document · 12 pages</p></div></div><button aria-expanded="false" aria-label="Remove document" class="f-icon-button f-popconfirm-trigger" title="Remove document" type="button"><svg aria-hidden="true" fill="none" height="17" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="17"><path d="M3 6h18M6 6l1 15h10l1-15M9 6V3h6v3M10 10v7m4-7v7"></path></svg></button></div><div class="f-status-line"><span>Everything is up to date.</span></div></div></main></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/components/popover-menu.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>Popover menu · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="popover-menu" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="astra"><section data-ref-state="open" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>A place for every action.</h1><p>Useful project actions, right where you need them.</p></header><div class="anchor-stage"><div class="row between"><div><strong>Field notes</strong><br/><small>Last edited today at 10:42</small></div><button aria-expanded="true" aria-label="Project actions" class="f-icon-button f-menu-trigger" title="Project actions" 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 12h1m5 0h1m5 0h1"></path></svg></button></div><div style="display:flex;justify-content:flex-end"><div class="menu" data-part="action-menu" role="menu"><div class="menu-title">Field notes · Project</div><button class="" data-action="Open project selected locally" role="menuitem"><span><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M14 3h7v7M21 3l-11 11M11 5H4v16h16v-7"></path></svg></span>Open project<kbd>↵</kbd></button><button class="" data-action="Rename selected locally" role="menuitem"><span><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m5 16 11-11 3 3-11 11-5 2ZM14 7l3 3"></path></svg></span>Rename<kbd>⌘ R</kbd></button><button class="" data-action="Duplicate selected locally" role="menuitem"><span><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M8 8h12v13H8ZM4 17H2V2h12v2"></path></svg></span>Duplicate<kbd>⌘ D</kbd></button><hr/><button class="" disabled="" role="menuitem"><span><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M4 12h16m-6-6 6 6-6 6"></path></svg></span>Move to workspace</button><hr/><button class="danger" data-action="Archive project selected locally" role="menuitem"><span><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 3h18v5H3ZM5 8v13h14V8M9 12h6"></path></svg></span>Archive project</button></div></div></div></div></section><section data-ref-state="closed" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>A place for every action.</h1><p>Useful project actions, right where you need them.</p></header><div class="anchor-stage"><div class="row between"><div><strong>Field notes</strong><br/><small>Last edited today at 10:42</small></div><button aria-expanded="false" aria-label="Project actions" class="f-icon-button f-menu-trigger" title="Project actions" 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 12h1m5 0h1m5 0h1"></path></svg></button></div><div style="display:flex;justify-content:flex-end"></div><p class="f-anchor-note">Press the actions button to open the project menu.</p></div></div></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/components/rich-text-toolbar.html ADDED
@@ -0,0 +1,3 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Rich text toolbar · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="rich-text-toolbar" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="astra"><section data-ref-state="toolbar" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The words come first.</h1><p>Richclay formatting, in the Bevel material.</p></header><div aria-label="Rich text formatting" class="richclay-toolbar f-rt-toolbar" data-richclay-toolbar="" role="toolbar"><span class="richclay-menu-wrap"><button aria-expanded="false" aria-haspopup="menu" class="richclay-button" data-richclay-control="blockMenu"><span>Paragraph</span><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></span><span class="richclay-separator" role="separator"></span><button aria-label="Bold" aria-pressed="true" class="richclay-button" data-richclay-control="bold" data-toggle=""><b>B</b></button><button aria-label="Italic" aria-pressed="false" class="richclay-button" data-richclay-control="italic" data-toggle=""><i>I</i></button><button aria-label="Underline" aria-pressed="false" class="richclay-button" data-richclay-control="underline" data-toggle=""><u>U</u></button><button aria-label="Strikethrough" aria-pressed="false" class="richclay-button" data-richclay-control="strikethrough" data-toggle=""><s>S</s></button><span class="richclay-separator" role="separator"></span><button aria-label="Edit link" class="richclay-button" data-richclay-control="link"><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="m10 14 4-4M9 15l-2 2a3 3 0 0 1-4-4l4-4a3 3 0 0 1 4 0m2 0 2-2a3 3 0 0 1 4 4l-4 4a3 3 0 0 1-4 0"></path></svg></button><button aria-label="Bullet list" aria-pressed="false" class="richclay-button" data-richclay-control="unorderedList" data-toggle=""><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M8 6h13M8 12h13M8 18h13M3 6h1M3 12h1M3 18h1"></path></svg></button><span class="richclay-separator" role="separator"></span><button aria-label="Undo unavailable" class="richclay-button" data-richclay-control="undo" disabled=""><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></button></div><div class="richclay-editor f-rt-editor" data-part="editor"><h2>A place for good work</h2><p><strong>Keep the useful things close.</strong> Field notes brings the documents, decisions and small details of a project into one place.</p><blockquote>Less searching. More making.</blockquote><a href="#field-guide">Read the field guide</a></div></div></section><section data-ref-state="menu" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The words come first.</h1><p>Richclay formatting, in the Bevel material.</p></header><div aria-label="Rich text formatting" class="richclay-toolbar f-rt-toolbar" data-richclay-toolbar="" role="toolbar"><span class="richclay-menu-wrap"><button aria-expanded="true" aria-haspopup="menu" class="richclay-button" data-richclay-control="blockMenu"><span>Paragraph</span><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><div class="richclay-menu f-rt-menu" data-richclay-menu="" role="menu"><button aria-checked="true" class="richclay-menu-item" data-action="Paragraph selected in the toolbar reference" data-richclay-menu-item="blockMenu" data-richclay-option-index="0" role="menuitemradio"><span class="f-rt-p">Paragraph</span><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m5 12 4 4L19 6"></path></svg></button><button aria-checked="false" class="richclay-menu-item" data-action="Heading 1 selected in the toolbar reference" data-richclay-menu-item="blockMenu" data-richclay-option-index="1" role="menuitemradio"><span class="f-rt-h1">Heading 1</span></button><button aria-checked="false" class="richclay-menu-item" data-action="Heading 2 selected in the toolbar reference" data-richclay-menu-item="blockMenu" data-richclay-option-index="2" role="menuitemradio"><span class="f-rt-h2">Heading 2</span></button><button aria-checked="false" class="richclay-menu-item" data-action="Quote selected in the toolbar reference" data-richclay-menu-item="blockMenu" data-richclay-option-index="3" role="menuitemradio"><span class="f-rt-q">Quote</span></button></div></span><span class="richclay-separator" role="separator"></span><button aria-label="Bold" aria-pressed="true" class="richclay-button" data-richclay-control="bold" data-toggle=""><b>B</b></button><button aria-label="Italic" aria-pressed="false" class="richclay-button" data-richclay-control="italic" data-toggle=""><i>I</i></button><button aria-label="Underline" aria-pressed="false" class="richclay-button" data-richclay-control="underline" data-toggle=""><u>U</u></button><button aria-label="Strikethrough" aria-pressed="false" class="richclay-button" data-richclay-control="strikethrough" data-toggle=""><s>S</s></button><span class="richclay-separator" role="separator"></span><button aria-label="Edit link" class="richclay-button" data-richclay-control="link"><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="m10 14 4-4M9 15l-2 2a3 3 0 0 1-4-4l4-4a3 3 0 0 1 4 0m2 0 2-2a3 3 0 0 1 4 4l-4 4a3 3 0 0 1-4 0"></path></svg></button><button aria-label="Bullet list" aria-pressed="false" class="richclay-button" data-richclay-control="unorderedList" data-toggle=""><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M8 6h13M8 12h13M8 18h13M3 6h1M3 12h1M3 18h1"></path></svg></button><span class="richclay-separator" role="separator"></span><button aria-label="Undo unavailable" class="richclay-button" data-richclay-control="undo" disabled=""><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></button></div><div class="richclay-editor f-rt-editor" data-part="editor"><h2>A place for good work</h2><p><strong>Keep the useful things close.</strong> Field notes brings the documents, decisions and small details of a project into one place.</p><blockquote>Less searching. More making.</blockquote><a href="#field-guide">Read the field guide</a></div></div></section><section data-ref-state="link" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The words come first.</h1><p>Richclay formatting, in the Bevel material.</p></header><div aria-label="Rich text formatting" class="richclay-toolbar f-rt-toolbar" data-richclay-toolbar="" role="toolbar"><span class="richclay-menu-wrap"><button aria-expanded="false" aria-haspopup="menu" class="richclay-button" data-richclay-control="blockMenu"><span>Paragraph</span><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></span><span class="richclay-separator" role="separator"></span><button aria-label="Bold" aria-pressed="true" class="richclay-button" data-richclay-control="bold" data-toggle=""><b>B</b></button><button aria-label="Italic" aria-pressed="false" class="richclay-button" data-richclay-control="italic" data-toggle=""><i>I</i></button><button aria-label="Underline" aria-pressed="false" class="richclay-button" data-richclay-control="underline" data-toggle=""><u>U</u></button><button aria-label="Strikethrough" aria-pressed="false" class="richclay-button" data-richclay-control="strikethrough" data-toggle=""><s>S</s></button><span class="richclay-separator" role="separator"></span><button aria-label="Edit link" class="richclay-button" data-richclay-control="link"><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="m10 14 4-4M9 15l-2 2a3 3 0 0 1-4-4l4-4a3 3 0 0 1 4 0m2 0 2-2a3 3 0 0 1 4 4l-4 4a3 3 0 0 1-4 0"></path></svg></button><button aria-label="Bullet list" aria-pressed="false" class="richclay-button" data-richclay-control="unorderedList" data-toggle=""><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M8 6h13M8 12h13M8 18h13M3 6h1M3 12h1M3 18h1"></path></svg></button><span class="richclay-separator" role="separator"></span><button aria-label="Undo unavailable" class="richclay-button" data-richclay-control="undo" disabled=""><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></button></div><div class="richclay-editor f-rt-editor" data-part="editor"><h2>A place for good work</h2><p><strong>Keep the useful things close.</strong> Field notes brings the documents, decisions and small details of a project into one place.</p><blockquote>Less searching. More making.</blockquote><a class="is-editing" href="#field-guide">Read the field guide</a><form aria-label="Edit link" aria-modal="true" class="richclay-dialog f-rt-link" data-richclay-dialog="" role="dialog"><div class="f-rt-link-head"><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="m10 14 4-4M9 15l-2 2a3 3 0 0 1-4-4l4-4a3 3 0 0 1 4 0m2 0 2-2a3 3 0 0 1 4 4l-4 4a3 3 0 0 1-4 0"></path></svg><span class="eyebrow">Edit link</span><span class="f-keys"><kbd>esc</kbd> close</span></div><label class="field">URL<input class="bevel-input bevel-input--small" type="text" value="https://example.test/field-guide"/></label><label class="field">Text<input class="bevel-input bevel-input--small" type="text" value="Read the field guide"/></label><div class="f-rt-link-actions"><button class="bevel-button bevel-button--small bevel-button--quiet" 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 4l16 16M8 16l-2 2a3 3 0 0 1-4-4l4-4m10-2 2-2a3 3 0 0 1 4 4l-4 4"></path></svg><span class="bevel-button__label">Remove link</span></button><span class="spacer"></span><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">Apply</span></button></div></form></div></div></section><section data-ref-state="floating" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The words come first.</h1><p>Richclay formatting, in the Bevel material.</p></header><div class="richclay-editor f-rt-editor is-floating" data-part="editor"><h2>A place for good work</h2><div aria-label="Selection formatting" class="richclay-float f-rt-float" role="toolbar"><button aria-label="Bold" aria-pressed="true" class="richclay-button"><b>B</b></button><button aria-label="Italic" aria-pressed="false" class="richclay-button"><i>I</i></button><button aria-label="Underline" aria-pressed="false" class="richclay-button"><u>U</u></button><button aria-label="Strikethrough" aria-pressed="false" class="richclay-button"><s>S</s></button><span class="richclay-separator"></span><button aria-label="Edit link" class="richclay-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="m10 14 4-4M9 15l-2 2a3 3 0 0 1-4-4l4-4a3 3 0 0 1 4 0m2 0 2-2a3 3 0 0 1 4 4l-4 4a3 3 0 0 1-4 0"></path></svg></button><button aria-label="Highlight" class="richclay-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 13 8-9 7 7-9 8ZM7 15l-4 6h7l2-4M13 4l7 7"></path></svg></button></div><p><mark class="f-selection">Keep the useful things close.</mark> Field notes brings the documents, decisions and small details of a project into one place.</p><blockquote>Less searching. More making.</blockquote><a href="#field-guide">Read the field guide</a></div></div></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/components/save-status-indicator.html ADDED
@@ -0,0 +1,2 @@
1
+ <!DOCTYPE html>
2
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Save-status indicator · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../parent/base-parent.css" rel="stylesheet"/><link href="../../parent/refinement.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="save-status-indicator" data-reference-phase="static" data-selected-source="parent"><section data-ref-state="saved" inert=""><main class="r-saved-page"><header><span class="p-eyebrow">NORTHSTAR STUDIO / FIELD NOTES</span><span class="p-badge">Draft</span></header><article><span class="p-eyebrow">FIELD NOTE / 001</span><h1>A place for good work.</h1><p>Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p><p>A little room to think. A clear place to begin.</p></article><span class="r-saved-chip" role="status">Saved</span></main></section><footer class="r-static-note">Selected static UI · Parent design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/components/selectable-cards.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>Selectable cards · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="selectable-cards" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="astra"><section data-ref-state="radio" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Who belongs here?</h1><p>One clear choice.</p></header><div class="stack"><label class="choice bevel-radio"><input checked="" class="bevel-sr-only" name="radio" type="radio"/><span aria-hidden="true" class="bevel-radio__ring"></span><div><strong>Private project</strong><p>Only people you invite can see this project.</p><span class="badge accent">Recommended</span></div></label><label class="choice bevel-radio"><input class="bevel-sr-only" name="radio" type="radio"/><span aria-hidden="true" class="bevel-radio__ring"></span><div><strong>Workspace project</strong><p>Everyone at Northstar Studio can find and read it.</p><span class="badge">4 people</span></div></label><label class="choice bevel-radio"><input class="bevel-sr-only" disabled="" name="radio" type="radio"/><span aria-hidden="true" class="bevel-radio__ring"></span><div><strong>Public project</strong><p>A link anyone can open. Unavailable in this workspace.</p><span class="badge"><svg aria-hidden="true" fill="none" height="10" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="10"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg>Unavailable</span></div></label></div></div></section><section data-ref-state="checkbox" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Choose your review.</h1><p>Bring the right disciplines into the conversation. Choose as many as you need.</p></header><div class="stack"><label class="choice bevel-checkbox"><input checked="" class="bevel-sr-only" name="checkbox" type="checkbox"/><span aria-hidden="true" class="bevel-checkbox__box"></span><div><strong>Design review</strong><p>Thoughtful feedback on the details before you ship.</p><span class="badge">Design</span></div></label><label class="choice bevel-checkbox"><input class="bevel-sr-only" name="checkbox" type="checkbox"/><span aria-hidden="true" class="bevel-checkbox__box"></span><div><strong>Editorial review</strong><p>A second pair of eyes on your story and structure.</p><span class="badge">Editorial</span></div></label><label class="choice bevel-checkbox"><input class="bevel-sr-only" disabled="" name="checkbox" type="checkbox"/><span aria-hidden="true" class="bevel-checkbox__box"></span><div><strong>Engineering review</strong><p>Available when an engineering owner joins.</p><span class="badge"><svg aria-hidden="true" fill="none" height="10" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="10"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg>Unavailable</span></div></label></div></div></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/components/settings-rows.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>Settings rows · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="settings-rows" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="astra"><section data-ref-state="default" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Make it feel like your space.</h1><p>Workspace preferences for Northstar Studio.</p></header><div class=""><div class="setting f-setting"><div><strong>Weekly digest</strong><p>A quiet recap of the work, delivered every Monday.</p></div><label class="bevel-toggle bevel-toggle--small"><input checked="" class="bevel-sr-only" role="switch" type="checkbox"/><span class="bevel-toggle__track"><span class="bevel-toggle__thumb"></span></span><span class="bevel-toggle__label">Enabled</span></label></div><div class="setting f-setting"><div><strong>Default project access</strong><p>Set who can discover new projects in this workspace.</p></div><label class="bevel-select"><span class="bevel-sr-only">Default project access</span><select class="bevel-select__field"><option>Invite only</option><option>Workspace</option></select></label></div><div class="setting f-setting"><div><strong>Export workspace</strong><p>Take your documents and project history with you.</p></div><button class="bevel-button" data-action="Export prepared in the local preview." type="button"><span class="bevel-button__label">Export…</span></button></div></div></div></section><section data-ref-state="disabled" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Make it feel like your space.</h1><p>Workspace preferences for Northstar Studio.</p></header><div class="settings-disabled f-settings-disabled"><div class="setting f-setting"><div><strong>Weekly digest</strong><p>A quiet recap of the work, delivered every Monday.</p></div><label class="bevel-toggle bevel-toggle--small"><input checked="" class="bevel-sr-only" disabled="" role="switch" type="checkbox"/><span class="bevel-toggle__track"><span class="bevel-toggle__thumb"></span></span><span class="bevel-toggle__label">Enabled</span></label></div><div class="setting f-setting"><div><strong>Default project access</strong><p>Set who can discover new projects in this workspace.</p></div><label class="bevel-select"><span class="bevel-sr-only">Default project access</span><select class="bevel-select__field" disabled=""><option>Invite only</option><option>Workspace</option></select></label></div><div class="setting f-setting"><div><strong>Export workspace</strong><p>Take your documents and project history with you.</p></div><button class="bevel-button" disabled="" type="button"><span class="bevel-button__label">Export…</span></button></div></div><p class="f-status-line f-locked"><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 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg><span>Only the workspace owner can change these settings.</span></p></div></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/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 · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-parent.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="sidebar-nav" data-reference-phase="static" data-seat="selected" data-selected-from="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">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/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 · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="small-charts" data-reference-phase="static" data-seat="selected" data-selected-from="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">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/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 · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-parent.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link href="../corrections.css" rel="stylesheet"/></head><body data-component="split-button" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="parent">
4
+ <section data-ref-state="inset" 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">Selected divider: 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="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">Selected divider: 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">Selected divider: 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" 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">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/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 · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-parent.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="split-panes" data-reference-phase="static" data-seat="selected" data-selected-from="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">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/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 · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="stat-tiles" data-reference-phase="static" data-seat="selected" data-selected-from="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">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/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 · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-parent.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="toast-stack" data-reference-phase="static" data-seat="selected" data-selected-from="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 s-retry" 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 s-retry" 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">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/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 · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-parent.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="tree-view" data-reference-phase="static" data-seat="selected" data-selected-from="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">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/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 · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../parent/base-parent.css" rel="stylesheet"/><link href="../../parent/refinement.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="upload-dropzone" data-reference-phase="static" data-selected-source="parent"><section data-ref-state="empty" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Files / 08</div><h1>Bring your work along</h1><p>Images and documents, ready for the project.</p></div></header><div class="p-dropzone"><svg aria-hidden="true" fill="none" height="28" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="28"><path d="M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5"></path></svg><h3>Drop a file here</h3><p>Images, PDFs and documents · up to 10 MB</p><label class="bevel-button bevel-button--small"><input class="bevel-sr-only" data-file-preview="" type="file"/><span class="bevel-button__label">Choose a file</span></label></div></main></section>
4
+ <section data-ref-state="queue" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Files / 08</div><h1>Bring your work along</h1><p>Images and documents, ready for the project.</p></div></header><div class="p-dropzone"><svg aria-hidden="true" fill="none" height="28" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="28"><path d="M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5"></path></svg><h3>Drop a file here</h3><p>Images, PDFs and documents · up to 10 MB</p><label class="bevel-button bevel-button--small"><input class="bevel-sr-only" data-file-preview="" type="file"/><span class="bevel-button__label">Choose a file</span></label></div><div class="p-upload-row"><img alt="Workspace image preview" src="../../fixtures/workspace.jpg"/><div style="flex:1"><strong class="p-small">workspace.jpg</strong><p class="p-small p-muted">184 KB · Uploading…</p><span class="p-progress"><span style="width:68%"></span></span></div><span class="p-badge brass">68%</span></div><div class="p-upload-row"><svg aria-hidden="true" fill="none" height="26" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="26"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div style="flex:1"><strong class="p-small">field-guide.pdf</strong><p class="p-small p-muted">420 KB · ready</p></div><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m5 12 4 4L19 6"></path></svg></div></main></section>
5
+ <section data-ref-state="error" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Files / 08</div><h1>Bring your work along</h1><p>Images and documents, ready for the project.</p></div></header><div class="p-dropzone"><svg aria-hidden="true" fill="none" height="28" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="28"><path d="M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5"></path></svg><h3>Drop a file here</h3><p>Images, PDFs and documents · up to 10 MB</p><label class="bevel-button bevel-button--small"><input class="bevel-sr-only" data-file-preview="" type="file"/><span class="bevel-button__label">Choose a file</span></label></div><div class="p-upload-row"><img alt="Workspace image preview" src="../../fixtures/workspace.jpg"/><div style="flex:1"><strong class="p-small">workspace.jpg</strong><p class="p-small p-muted">184 KB · Could not upload</p></div><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Retry preview</span></button></div><div class="p-upload-row"><svg aria-hidden="true" fill="none" height="26" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="26"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div style="flex:1"><strong class="p-small">field-guide.pdf</strong><p class="p-small p-muted">420 KB · ready</p></div><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m5 12 4 4L19 6"></path></svg></div></main></section>
6
+ <section data-ref-state="crop" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Files / 08</div><h1>Bring your work along</h1><p>Images and documents, ready for the project.</p></div></header><div class="p-dropzone"><svg aria-hidden="true" fill="none" height="28" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="28"><path d="M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5"></path></svg><h3>Drop a file here</h3><p>Images, PDFs and documents · up to 10 MB</p><label class="bevel-button bevel-button--small"><input class="bevel-sr-only" data-file-preview="" type="file"/><span class="bevel-button__label">Choose a file</span></label></div><div class="p-between" style="margin:18px 0 12px"><strong>Crop workspace.jpg</strong><span class="p-badge">Square crop</span></div><div class="qc-stage" data-part="crop-stage"><img alt="A bright workspace with a laptop and monitor" src="../../fixtures/workspace.jpg"/><div class="qc-dim"></div><div class="qc-box"><div class="qc-handle qc-nw"></div><div class="qc-handle qc-ne"></div><div class="qc-handle qc-sw"></div><div class="qc-handle qc-se"></div><i class="qc-rule horizontal one"></i><i class="qc-rule horizontal two"></i><i class="qc-rule vertical one"></i><i class="qc-rule vertical two"></i></div><span class="p-crop-size">800 × 800</span></div><div class="p-actions"><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Cancel crop</span></button><button class="bevel-button bevel-button--small bevel-button--primary" type="button"><span class="bevel-button__label">Use crop preview</span></button></div></main></section><footer class="r-static-note">Selected static UI · Parent design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/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 · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="wizard-shell" data-reference-phase="static" data-seat="selected" data-selected-from="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">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/corrections.css ADDED
@@ -0,0 +1,11 @@
1
+ body[data-component="drawer"] .r-diagonal-close{width:68px;height:68px;top:0;right:0}
2
+ body[data-component="drawer"] .micromodal__close-bg{fill:var(--bevel-sunk)}
3
+ body[data-component="drawer"] .micromodal__close-x{fill:var(--bevel-ink)}
4
+ body[data-component="form-error-summary"] .s-error-copy{min-width:0}
5
+ body[data-component="wizard-shell"] .wizard-step.current b{box-shadow:none}
6
+ body[data-component="toast-stack"] .s-retry svg{transform:scaleX(-1)}
7
+ body[data-component="stat-tiles"] .specimen>header{border-bottom:0}
8
+ body[data-component="stat-tiles"] .f-stat-foot{border-top:0}
9
+ body[data-component="avatar-group"] .f-avatar-stack{isolation:isolate}
10
+ body[data-component="avatar-group"] .f-avatar-stack .p-presence{z-index:2}
11
+ body[data-component="avatar-group"] .f-avatar-stack>.f-avatar-more{position:relative;z-index:1;margin-left:3px}