@panphora/bevel 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (539) hide show
  1. package/LICENSE +16 -0
  2. package/README.md +226 -0
  3. package/bevel-fonts.css +16 -0
  4. package/bevel.css +3075 -0
  5. package/bevel.js +2126 -0
  6. package/dist/react/components/activity-feed.d.ts +89 -0
  7. package/dist/react/components/activity-feed.js +54 -0
  8. package/dist/react/components/alert-dialog.d.ts +14 -0
  9. package/dist/react/components/alert-dialog.js +19 -0
  10. package/dist/react/components/app-shell.d.ts +98 -0
  11. package/dist/react/components/app-shell.js +86 -0
  12. package/dist/react/components/app-toolbar.d.ts +19 -0
  13. package/dist/react/components/app-toolbar.js +22 -0
  14. package/dist/react/components/avatar-group.d.ts +67 -0
  15. package/dist/react/components/avatar-group.js +49 -0
  16. package/dist/react/components/badge-and-pill.d.ts +34 -0
  17. package/dist/react/components/badge-and-pill.js +12 -0
  18. package/dist/react/components/breadcrumbs.d.ts +56 -0
  19. package/dist/react/components/breadcrumbs.js +44 -0
  20. package/dist/react/components/bulk-bar.d.ts +22 -0
  21. package/dist/react/components/bulk-bar.js +59 -0
  22. package/dist/react/components/button.d.ts +15 -0
  23. package/dist/react/components/button.js +20 -0
  24. package/dist/react/components/callout-and-hint.d.ts +17 -0
  25. package/dist/react/components/callout-and-hint.js +8 -0
  26. package/dist/react/components/checkbox.d.ts +5 -0
  27. package/dist/react/components/checkbox.js +13 -0
  28. package/dist/react/components/chip.d.ts +149 -0
  29. package/dist/react/components/chip.js +29 -0
  30. package/dist/react/components/code-block.d.ts +50 -0
  31. package/dist/react/components/code-block.js +77 -0
  32. package/dist/react/components/code-editor.d.ts +122 -0
  33. package/dist/react/components/code-editor.js +695 -0
  34. package/dist/react/components/column-manager.d.ts +28 -0
  35. package/dist/react/components/column-manager.js +85 -0
  36. package/dist/react/components/combobox.d.ts +32 -0
  37. package/dist/react/components/combobox.js +37 -0
  38. package/dist/react/components/data-grid.d.ts +108 -0
  39. package/dist/react/components/data-grid.js +159 -0
  40. package/dist/react/components/data-table.d.ts +2 -0
  41. package/dist/react/components/data-table.js +6 -0
  42. package/dist/react/components/date.d.ts +23 -0
  43. package/dist/react/components/date.js +11 -0
  44. package/dist/react/components/details.d.ts +13 -0
  45. package/dist/react/components/details.js +20 -0
  46. package/dist/react/components/dialog.d.ts +74 -0
  47. package/dist/react/components/dialog.js +31 -0
  48. package/dist/react/components/diff-view.d.ts +73 -0
  49. package/dist/react/components/diff-view.js +68 -0
  50. package/dist/react/components/documents.d.ts +70 -0
  51. package/dist/react/components/documents.js +10 -0
  52. package/dist/react/components/drawer.d.ts +45 -0
  53. package/dist/react/components/drawer.js +35 -0
  54. package/dist/react/components/editable-grid-cells.d.ts +32 -0
  55. package/dist/react/components/editable-grid-cells.js +116 -0
  56. package/dist/react/components/eyebrow-kicker-lede-pull-quote.d.ts +39 -0
  57. package/dist/react/components/eyebrow-kicker-lede-pull-quote.js +12 -0
  58. package/dist/react/components/field.d.ts +32 -0
  59. package/dist/react/components/field.js +27 -0
  60. package/dist/react/components/file-tree.d.ts +75 -0
  61. package/dist/react/components/file-tree.js +247 -0
  62. package/dist/react/components/file.d.ts +43 -0
  63. package/dist/react/components/file.js +73 -0
  64. package/dist/react/components/files-table.d.ts +174 -0
  65. package/dist/react/components/files-table.js +237 -0
  66. package/dist/react/components/filter-builder.d.ts +37 -0
  67. package/dist/react/components/filter-builder.js +109 -0
  68. package/dist/react/components/form-error-summary.d.ts +16 -0
  69. package/dist/react/components/form-error-summary.js +49 -0
  70. package/dist/react/components/icon-button.d.ts +8 -0
  71. package/dist/react/components/icon-button.js +14 -0
  72. package/dist/react/components/icon.d.ts +7 -0
  73. package/dist/react/components/icon.js +15 -0
  74. package/dist/react/components/image.d.ts +72 -0
  75. package/dist/react/components/image.js +24 -0
  76. package/dist/react/components/inline-edit.d.ts +70 -0
  77. package/dist/react/components/inline-edit.js +149 -0
  78. package/dist/react/components/input.d.ts +29 -0
  79. package/dist/react/components/input.js +20 -0
  80. package/dist/react/components/kanban-board.d.ts +140 -0
  81. package/dist/react/components/kanban-board.js +374 -0
  82. package/dist/react/components/layout.d.ts +51 -0
  83. package/dist/react/components/layout.js +28 -0
  84. package/dist/react/components/list.d.ts +28 -0
  85. package/dist/react/components/list.js +6 -0
  86. package/dist/react/components/masthead-and-verdict.d.ts +60 -0
  87. package/dist/react/components/masthead-and-verdict.js +8 -0
  88. package/dist/react/components/menu.d.ts +26 -0
  89. package/dist/react/components/menu.js +31 -0
  90. package/dist/react/components/multi-select-picker.d.ts +49 -0
  91. package/dist/react/components/multi-select-picker.js +20 -0
  92. package/dist/react/components/note.d.ts +33 -0
  93. package/dist/react/components/note.js +8 -0
  94. package/dist/react/components/number-field.d.ts +16 -0
  95. package/dist/react/components/number-field.js +17 -0
  96. package/dist/react/components/pagination.d.ts +45 -0
  97. package/dist/react/components/pagination.js +87 -0
  98. package/dist/react/components/persistent-action-banner.d.ts +71 -0
  99. package/dist/react/components/persistent-action-banner.js +39 -0
  100. package/dist/react/components/popconfirm.d.ts +42 -0
  101. package/dist/react/components/popconfirm.js +59 -0
  102. package/dist/react/components/popover.d.ts +16 -0
  103. package/dist/react/components/popover.js +21 -0
  104. package/dist/react/components/progress-and-gauge.d.ts +44 -0
  105. package/dist/react/components/progress-and-gauge.js +19 -0
  106. package/dist/react/components/radio.d.ts +7 -0
  107. package/dist/react/components/radio.js +13 -0
  108. package/dist/react/components/rich-text-toolbar.d.ts +26 -0
  109. package/dist/react/components/rich-text-toolbar.js +64 -0
  110. package/dist/react/components/rows-and-card.d.ts +88 -0
  111. package/dist/react/components/rows-and-card.js +10 -0
  112. package/dist/react/components/save-status-indicator.d.ts +11 -0
  113. package/dist/react/components/save-status-indicator.js +33 -0
  114. package/dist/react/components/segmented-control.d.ts +21 -0
  115. package/dist/react/components/segmented-control.js +15 -0
  116. package/dist/react/components/select.d.ts +29 -0
  117. package/dist/react/components/select.js +29 -0
  118. package/dist/react/components/selectable-cards.d.ts +30 -0
  119. package/dist/react/components/selectable-cards.js +29 -0
  120. package/dist/react/components/settings-rows.d.ts +51 -0
  121. package/dist/react/components/settings-rows.js +8 -0
  122. package/dist/react/components/sidebar-nav.d.ts +77 -0
  123. package/dist/react/components/sidebar-nav.js +41 -0
  124. package/dist/react/components/skeleton-and-empty.d.ts +51 -0
  125. package/dist/react/components/skeleton-and-empty.js +14 -0
  126. package/dist/react/components/slider.d.ts +19 -0
  127. package/dist/react/components/slider.js +17 -0
  128. package/dist/react/components/small-charts.d.ts +60 -0
  129. package/dist/react/components/small-charts.js +76 -0
  130. package/dist/react/components/sortable.d.ts +30 -0
  131. package/dist/react/components/sortable.js +85 -0
  132. package/dist/react/components/split-button.d.ts +38 -0
  133. package/dist/react/components/split-button.js +43 -0
  134. package/dist/react/components/split-panes.d.ts +35 -0
  135. package/dist/react/components/split-panes.js +102 -0
  136. package/dist/react/components/stat-tiles.d.ts +54 -0
  137. package/dist/react/components/stat-tiles.js +8 -0
  138. package/dist/react/components/steps.d.ts +11 -0
  139. package/dist/react/components/steps.js +13 -0
  140. package/dist/react/components/switch.d.ts +6 -0
  141. package/dist/react/components/switch.js +13 -0
  142. package/dist/react/components/table.d.ts +61 -0
  143. package/dist/react/components/table.js +6 -0
  144. package/dist/react/components/tabs.d.ts +7 -0
  145. package/dist/react/components/tabs.js +13 -0
  146. package/dist/react/components/tags.d.ts +33 -0
  147. package/dist/react/components/tags.js +83 -0
  148. package/dist/react/components/textarea.d.ts +10 -0
  149. package/dist/react/components/textarea.js +6 -0
  150. package/dist/react/components/toast.d.ts +35 -0
  151. package/dist/react/components/toast.js +90 -0
  152. package/dist/react/components/tooltip-and-key.d.ts +20 -0
  153. package/dist/react/components/tooltip-and-key.js +20 -0
  154. package/dist/react/components/tree-view.d.ts +34 -0
  155. package/dist/react/components/tree-view.js +118 -0
  156. package/dist/react/components/upload-dropzone.d.ts +92 -0
  157. package/dist/react/components/upload-dropzone.js +116 -0
  158. package/dist/react/components/wizard-shell.d.ts +78 -0
  159. package/dist/react/components/wizard-shell.js +176 -0
  160. package/dist/react/fonts.css.d.ts +1 -0
  161. package/dist/react/index.d.ts +76 -0
  162. package/dist/react/index.js +77 -0
  163. package/dist/react/integrations/quickcrop.d.ts +58 -0
  164. package/dist/react/integrations/quickcrop.js +137 -0
  165. package/dist/react/integrations/richclay.d.ts +43 -0
  166. package/dist/react/integrations/richclay.js +129 -0
  167. package/dist/react/internal/classes.d.ts +3 -0
  168. package/dist/react/internal/classes.js +10 -0
  169. package/dist/react/internal/close-mark.d.ts +1 -0
  170. package/dist/react/internal/close-mark.js +10 -0
  171. package/dist/react/internal/controllable-state.d.ts +9 -0
  172. package/dist/react/internal/controllable-state.js +22 -0
  173. package/dist/react/internal/drop-effect.d.ts +28 -0
  174. package/dist/react/internal/drop-effect.js +8 -0
  175. package/dist/react/internal/form-reset.d.ts +2 -0
  176. package/dist/react/internal/form-reset.js +22 -0
  177. package/dist/react/internal/format.d.ts +1 -0
  178. package/dist/react/internal/format.js +14 -0
  179. package/dist/react/internal/link.d.ts +2 -0
  180. package/dist/react/internal/link.js +8 -0
  181. package/dist/react/internal/part.d.ts +20 -0
  182. package/dist/react/internal/part.js +47 -0
  183. package/dist/react/internal/pointer-session.d.ts +8 -0
  184. package/dist/react/internal/pointer-session.js +60 -0
  185. package/dist/react/internal/refs.d.ts +2 -0
  186. package/dist/react/internal/refs.js +22 -0
  187. package/dist/react/internal/rich-text.d.ts +28 -0
  188. package/dist/react/internal/rich-text.js +4 -0
  189. package/dist/react/internal/table-context.d.ts +39 -0
  190. package/dist/react/internal/table-context.js +12 -0
  191. package/dist/react/internal/use-object-url.d.ts +1 -0
  192. package/dist/react/internal/use-object-url.js +15 -0
  193. package/dist/react/layout.css +274 -0
  194. package/dist/react/layout.css.d.ts +1 -0
  195. package/dist/react/models/filter.d.ts +31 -0
  196. package/dist/react/models/filter.js +79 -0
  197. package/dist/react/models/kanban.d.ts +51 -0
  198. package/dist/react/models/kanban.js +35 -0
  199. package/dist/react/models/reorder.d.ts +9 -0
  200. package/dist/react/models/reorder.js +23 -0
  201. package/dist/react/models/table.d.ts +85 -0
  202. package/dist/react/models/table.js +144 -0
  203. package/dist/react/models/tree.d.ts +16 -0
  204. package/dist/react/models/tree.js +26 -0
  205. package/dist/react/provider.d.ts +18 -0
  206. package/dist/react/provider.js +31 -0
  207. package/dist/react/recipes/context-hypercms.d.ts +17 -0
  208. package/dist/react/recipes/context-hypercms.js +71 -0
  209. package/dist/react/recipes/context-quickcrop.d.ts +8 -0
  210. package/dist/react/recipes/context-quickcrop.js +49 -0
  211. package/dist/react/theme.css +8004 -0
  212. package/dist/react/theme.css.d.ts +1 -0
  213. package/examples/README.md +34 -0
  214. package/examples/components/activity-feed.html +28 -0
  215. package/examples/components/app-shell.html +12 -0
  216. package/examples/components/app-toolbar.html +38 -0
  217. package/examples/components/avatar-group.html +27 -0
  218. package/examples/components/breadcrumbs.html +26 -0
  219. package/examples/components/bulk-bar.html +22 -0
  220. package/examples/components/code-block.html +12 -0
  221. package/examples/components/code-editor.html +25 -0
  222. package/examples/components/column-manager.html +9 -0
  223. package/examples/components/combobox.html +13 -0
  224. package/examples/components/context-hypercms.css +41 -0
  225. package/examples/components/context-hypercms.html +40 -0
  226. package/examples/components/context-hypercms.js +62 -0
  227. package/examples/components/context-quickcrop.html +137 -0
  228. package/examples/components/diff-view.html +9 -0
  229. package/examples/components/drawer.html +11 -0
  230. package/examples/components/editable-grid-cells.html +9 -0
  231. package/examples/components/file-browser.html +53 -0
  232. package/examples/components/file-tree.html +34 -0
  233. package/examples/components/files-table.html +80 -0
  234. package/examples/components/filter-builder.html +11 -0
  235. package/examples/components/form-error-summary.html +11 -0
  236. package/examples/components/index.html +51 -0
  237. package/examples/components/inline-edit.html +42 -0
  238. package/examples/components/kanban-board.html +42 -0
  239. package/examples/components/manifest.json +3279 -0
  240. package/examples/components/modal.html +11 -0
  241. package/examples/components/multi-select-picker.html +13 -0
  242. package/examples/components/pagination.html +32 -0
  243. package/examples/components/persistent-action-banner.html +23 -0
  244. package/examples/components/popconfirm.html +13 -0
  245. package/examples/components/popover-menu.html +13 -0
  246. package/examples/components/reference/baseline/DECISIONS.md +85 -0
  247. package/examples/components/reference/baseline/README.md +58 -0
  248. package/examples/components/reference/baseline/bevel-fonts.css +16 -0
  249. package/examples/components/reference/baseline/bevel.css +1339 -0
  250. package/examples/components/reference/baseline/bevel.js +496 -0
  251. package/examples/components/reference/baseline/fonts/LICENSE-ibm-plex-mono.txt +93 -0
  252. package/examples/components/reference/baseline/fonts/LICENSE-ibm-plex-sans.txt +93 -0
  253. package/examples/components/reference/baseline/fonts/LICENSE-newsreader.txt +93 -0
  254. package/examples/components/reference/baseline/fonts/ibm-plex-mono-latin-400-normal.woff2 +0 -0
  255. package/examples/components/reference/baseline/fonts/ibm-plex-mono-latin-500-normal.woff2 +0 -0
  256. package/examples/components/reference/baseline/fonts/ibm-plex-mono-latin-600-normal.woff2 +0 -0
  257. package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-400-italic.woff2 +0 -0
  258. package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-400-normal.woff2 +0 -0
  259. package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-500-normal.woff2 +0 -0
  260. package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-600-normal.woff2 +0 -0
  261. package/examples/components/reference/baseline/fonts/newsreader-latin-opsz-italic.woff2 +0 -0
  262. package/examples/components/reference/baseline/fonts/newsreader-latin-opsz-normal.woff2 +0 -0
  263. package/examples/components/reference/fable/IMPROVEMENTS.md +106 -0
  264. package/examples/components/reference/fable/PARENT-REPAIRS.md +17 -0
  265. package/examples/components/reference/fable/__pycache__/build_repairs.cpython-311.pyc +0 -0
  266. package/examples/components/reference/fable/__pycache__/kanban.cpython-311.pyc +0 -0
  267. package/examples/components/reference/fable/as-authored/IMPROVEMENTS-completed.md +106 -0
  268. package/examples/components/reference/fable/as-authored/base-astra.css +17 -0
  269. package/examples/components/reference/fable/as-authored/base-parent.css +416 -0
  270. package/examples/components/reference/fable/as-authored/build.py +858 -0
  271. package/examples/components/reference/fable/as-authored/fable.css +823 -0
  272. package/examples/components/reference/fable/as-authored/kanban-completed.css +235 -0
  273. package/examples/components/reference/fable/as-authored/kanban-completed.html +53 -0
  274. package/examples/components/reference/fable/as-authored/kanban-completed.py +212 -0
  275. package/examples/components/reference/fable/as-authored/kanban.py +207 -0
  276. package/examples/components/reference/fable/base-astra.css +17 -0
  277. package/examples/components/reference/fable/base-parent.css +416 -0
  278. package/examples/components/reference/fable/build.py +858 -0
  279. package/examples/components/reference/fable/build_repairs.py +25 -0
  280. package/examples/components/reference/fable/components/activity-feed.html +3 -0
  281. package/examples/components/reference/fable/components/app-toolbar.html +3 -0
  282. package/examples/components/reference/fable/components/avatar-group.html +4 -0
  283. package/examples/components/reference/fable/components/breadcrumbs.html +3 -0
  284. package/examples/components/reference/fable/components/code-block.html +9 -0
  285. package/examples/components/reference/fable/components/column-manager.html +3 -0
  286. package/examples/components/reference/fable/components/combobox.html +6 -0
  287. package/examples/components/reference/fable/components/context-hypercms.html +3 -0
  288. package/examples/components/reference/fable/components/context-quickcrop.html +4 -0
  289. package/examples/components/reference/fable/components/diff-view.html +13 -0
  290. package/examples/components/reference/fable/components/drawer.html +3 -0
  291. package/examples/components/reference/fable/components/editable-grid-cells.html +3 -0
  292. package/examples/components/reference/fable/components/filter-builder.html +3 -0
  293. package/examples/components/reference/fable/components/form-error-summary.html +4 -0
  294. package/examples/components/reference/fable/components/inline-edit.html +3 -0
  295. package/examples/components/reference/fable/components/kanban-board.html +53 -0
  296. package/examples/components/reference/fable/components/modal.html +3 -0
  297. package/examples/components/reference/fable/components/multi-select-picker.html +5 -0
  298. package/examples/components/reference/fable/components/pagination.html +3 -0
  299. package/examples/components/reference/fable/components/persistent-action-banner.html +4 -0
  300. package/examples/components/reference/fable/components/popconfirm.html +5 -0
  301. package/examples/components/reference/fable/components/popover-menu.html +3 -0
  302. package/examples/components/reference/fable/components/rich-text-toolbar.html +3 -0
  303. package/examples/components/reference/fable/components/save-status-indicator.html +2 -0
  304. package/examples/components/reference/fable/components/selectable-cards.html +3 -0
  305. package/examples/components/reference/fable/components/settings-rows.html +3 -0
  306. package/examples/components/reference/fable/components/sidebar-nav.html +4 -0
  307. package/examples/components/reference/fable/components/small-charts.html +5 -0
  308. package/examples/components/reference/fable/components/split-button.html +4 -0
  309. package/examples/components/reference/fable/components/split-panes.html +8 -0
  310. package/examples/components/reference/fable/components/stat-tiles.html +3 -0
  311. package/examples/components/reference/fable/components/toast-stack.html +5 -0
  312. package/examples/components/reference/fable/components/tree-view.html +4 -0
  313. package/examples/components/reference/fable/components/upload-dropzone.html +6 -0
  314. package/examples/components/reference/fable/components/wizard-shell.html +3 -0
  315. package/examples/components/reference/fable/coverage.json +414 -0
  316. package/examples/components/reference/fable/fable.css +823 -0
  317. package/examples/components/reference/fable/index.html +5 -0
  318. package/examples/components/reference/fable/kanban.css +237 -0
  319. package/examples/components/reference/fable/kanban.py +212 -0
  320. package/examples/components/reference/fable/parent-repairs.css +9 -0
  321. package/examples/components/reference/fixtures/data.json +102 -0
  322. package/examples/components/reference/fixtures/host.js +47 -0
  323. package/examples/components/reference/fixtures/static-host.js +39 -0
  324. package/examples/components/reference/fixtures/workspace.jpg +0 -0
  325. package/examples/components/reference/parent/CHANGES.md +179 -0
  326. package/examples/components/reference/parent/__pycache__/kanban.cpython-311.pyc +0 -0
  327. package/examples/components/reference/parent/base-astra.css +17 -0
  328. package/examples/components/reference/parent/base-parent.css +416 -0
  329. package/examples/components/reference/parent/build.py +148 -0
  330. package/examples/components/reference/parent/components/activity-feed.html +2 -0
  331. package/examples/components/reference/parent/components/app-toolbar.html +2 -0
  332. package/examples/components/reference/parent/components/avatar-group.html +4 -0
  333. package/examples/components/reference/parent/components/breadcrumbs.html +2 -0
  334. package/examples/components/reference/parent/components/code-block.html +8 -0
  335. package/examples/components/reference/parent/components/column-manager.html +2 -0
  336. package/examples/components/reference/parent/components/combobox.html +6 -0
  337. package/examples/components/reference/parent/components/context-hypercms.html +2 -0
  338. package/examples/components/reference/parent/components/context-quickcrop.html +4 -0
  339. package/examples/components/reference/parent/components/diff-view.html +4 -0
  340. package/examples/components/reference/parent/components/drawer.html +2 -0
  341. package/examples/components/reference/parent/components/editable-grid-cells.html +2 -0
  342. package/examples/components/reference/parent/components/filter-builder.html +2 -0
  343. package/examples/components/reference/parent/components/form-error-summary.html +2 -0
  344. package/examples/components/reference/parent/components/inline-edit.html +2 -0
  345. package/examples/components/reference/parent/components/kanban-board.html +84 -0
  346. package/examples/components/reference/parent/components/modal.html +2 -0
  347. package/examples/components/reference/parent/components/multi-select-picker.html +5 -0
  348. package/examples/components/reference/parent/components/pagination.html +2 -0
  349. package/examples/components/reference/parent/components/persistent-action-banner.html +4 -0
  350. package/examples/components/reference/parent/components/popconfirm.html +5 -0
  351. package/examples/components/reference/parent/components/popover-menu.html +2 -0
  352. package/examples/components/reference/parent/components/rich-text-toolbar.html +2 -0
  353. package/examples/components/reference/parent/components/save-status-indicator.html +2 -0
  354. package/examples/components/reference/parent/components/selectable-cards.html +2 -0
  355. package/examples/components/reference/parent/components/settings-rows.html +2 -0
  356. package/examples/components/reference/parent/components/sidebar-nav.html +4 -0
  357. package/examples/components/reference/parent/components/small-charts.html +2 -0
  358. package/examples/components/reference/parent/components/split-button.html +5 -0
  359. package/examples/components/reference/parent/components/split-panes.html +8 -0
  360. package/examples/components/reference/parent/components/stat-tiles.html +2 -0
  361. package/examples/components/reference/parent/components/toast-stack.html +5 -0
  362. package/examples/components/reference/parent/components/tree-view.html +4 -0
  363. package/examples/components/reference/parent/components/upload-dropzone.html +6 -0
  364. package/examples/components/reference/parent/components/wizard-shell.html +2 -0
  365. package/examples/components/reference/parent/coverage.json +414 -0
  366. package/examples/components/reference/parent/index.html +1 -0
  367. package/examples/components/reference/parent/kanban.css +114 -0
  368. package/examples/components/reference/parent/kanban.py +55 -0
  369. package/examples/components/reference/parent/refinement.css +53 -0
  370. package/examples/components/reference/selected/build.py +70 -0
  371. package/examples/components/reference/selected/components/activity-feed.html +3 -0
  372. package/examples/components/reference/selected/components/app-toolbar.html +3 -0
  373. package/examples/components/reference/selected/components/avatar-group.html +4 -0
  374. package/examples/components/reference/selected/components/breadcrumbs.html +3 -0
  375. package/examples/components/reference/selected/components/code-block.html +9 -0
  376. package/examples/components/reference/selected/components/column-manager.html +3 -0
  377. package/examples/components/reference/selected/components/combobox.html +6 -0
  378. package/examples/components/reference/selected/components/context-hypercms.html +3 -0
  379. package/examples/components/reference/selected/components/context-quickcrop.html +4 -0
  380. package/examples/components/reference/selected/components/diff-view.html +13 -0
  381. package/examples/components/reference/selected/components/drawer.html +3 -0
  382. package/examples/components/reference/selected/components/editable-grid-cells.html +3 -0
  383. package/examples/components/reference/selected/components/filter-builder.html +3 -0
  384. package/examples/components/reference/selected/components/form-error-summary.html +4 -0
  385. package/examples/components/reference/selected/components/inline-edit.html +3 -0
  386. package/examples/components/reference/selected/components/kanban-board.html +53 -0
  387. package/examples/components/reference/selected/components/modal.html +2 -0
  388. package/examples/components/reference/selected/components/multi-select-picker.html +5 -0
  389. package/examples/components/reference/selected/components/pagination.html +3 -0
  390. package/examples/components/reference/selected/components/persistent-action-banner.html +4 -0
  391. package/examples/components/reference/selected/components/popconfirm.html +5 -0
  392. package/examples/components/reference/selected/components/popover-menu.html +3 -0
  393. package/examples/components/reference/selected/components/rich-text-toolbar.html +3 -0
  394. package/examples/components/reference/selected/components/save-status-indicator.html +2 -0
  395. package/examples/components/reference/selected/components/selectable-cards.html +3 -0
  396. package/examples/components/reference/selected/components/settings-rows.html +3 -0
  397. package/examples/components/reference/selected/components/sidebar-nav.html +4 -0
  398. package/examples/components/reference/selected/components/small-charts.html +5 -0
  399. package/examples/components/reference/selected/components/split-button.html +4 -0
  400. package/examples/components/reference/selected/components/split-panes.html +8 -0
  401. package/examples/components/reference/selected/components/stat-tiles.html +3 -0
  402. package/examples/components/reference/selected/components/toast-stack.html +5 -0
  403. package/examples/components/reference/selected/components/tree-view.html +4 -0
  404. package/examples/components/reference/selected/components/upload-dropzone.html +6 -0
  405. package/examples/components/reference/selected/components/wizard-shell.html +3 -0
  406. package/examples/components/reference/selected/corrections.css +11 -0
  407. package/examples/components/reference/selected/coverage.json +413 -0
  408. package/examples/components/reference/selected/gallery-build.mjs +49 -0
  409. package/examples/components/reference/selected/gallery-spec.json +12 -0
  410. package/examples/components/reference/selected/index.html +1 -0
  411. package/examples/components/reference/selected/kanban-comparison.json +6 -0
  412. package/examples/components/reference/selected/manifest.json +476 -0
  413. package/examples/components/reference/sha256.json +142 -0
  414. package/examples/components/reference/sources/diagonal-close.svg +1 -0
  415. package/examples/components/reference/sources/hyperclay/public-assets/css/hyperclay-app-source.css +614 -0
  416. package/examples/components/reference/sources/hyperclay/public-assets/js/app.js +94 -0
  417. package/examples/components/reference/sources/hyperclayjs/src/ui/theModal.js +897 -0
  418. package/examples/components/reference/sources/hypercms/scripts/build-theme.js +203 -0
  419. package/examples/components/reference/sources/hypercms/src/anchor.js +24 -0
  420. package/examples/components/reference/sources/hypercms/src/apply-loop.js +167 -0
  421. package/examples/components/reference/sources/hypercms/src/diagnostics.js +44 -0
  422. package/examples/components/reference/sources/hypercms/src/enhance.js +173 -0
  423. package/examples/components/reference/sources/hypercms/src/events.js +955 -0
  424. package/examples/components/reference/sources/hypercms/src/form-builder.js +518 -0
  425. package/examples/components/reference/sources/hypercms/src/form-rules.js +208 -0
  426. package/examples/components/reference/sources/hypercms/src/hooks.js +100 -0
  427. package/examples/components/reference/sources/hypercms/src/hypercms-bundle.js +10 -0
  428. package/examples/components/reference/sources/hypercms/src/hypercms.js +347 -0
  429. package/examples/components/reference/sources/hypercms/src/morph.js +10 -0
  430. package/examples/components/reference/sources/hypercms/src/path.js +61 -0
  431. package/examples/components/reference/sources/hypercms/src/place.js +131 -0
  432. package/examples/components/reference/sources/hypercms/src/platform.js +131 -0
  433. package/examples/components/reference/sources/hypercms/src/refresh.js +87 -0
  434. package/examples/components/reference/sources/hypercms/src/richclay-bridge.js +140 -0
  435. package/examples/components/reference/sources/hypercms/src/row-identity.js +111 -0
  436. package/examples/components/reference/sources/hypercms/src/scaffold.js +10 -0
  437. package/examples/components/reference/sources/hypercms/src/session.js +303 -0
  438. package/examples/components/reference/sources/hypercms/src/shell.js +248 -0
  439. package/examples/components/reference/sources/hypercms/src/styles.css +298 -0
  440. package/examples/components/reference/sources/hypercms/src/targets.js +144 -0
  441. package/examples/components/reference/sources/hypercms/src/templates.js +656 -0
  442. package/examples/components/reference/sources/hypercms/src/theme/pixel-quiet.overrides.css +761 -0
  443. package/examples/components/reference/sources/hypercms/src/theme.generated.css +1772 -0
  444. package/examples/components/reference/sources/hypercms/src/toggle.js +666 -0
  445. package/examples/components/reference/sources/hypercms/src/unresolved.js +211 -0
  446. package/examples/components/reference/sources/hypercms/src/vendor/mirk.vendor.js +212 -0
  447. package/examples/components/reference/sources/hypercms/src/views/inline-layer.js +421 -0
  448. package/examples/components/reference/sources/hypercms/src/views/inline.js +1072 -0
  449. package/examples/components/reference/sources/hypercms/src/views/sidebar.js +97 -0
  450. package/examples/components/reference/sources/modal-reference.html +301 -0
  451. package/examples/components/reference/sources/quickcrop/quickcrop.css +124 -0
  452. package/examples/components/reference/sources/quickcrop/quickcrop.js +400 -0
  453. package/examples/components/reference/sources/richclay/richclay.css +416 -0
  454. package/examples/components/reference/sources/richclay/richclay.js +2962 -0
  455. package/examples/components/reference/sources/richclay/src/a11y.js +67 -0
  456. package/examples/components/reference/sources/richclay/src/browser-global.js +7 -0
  457. package/examples/components/reference/sources/richclay/src/buttons.js +254 -0
  458. package/examples/components/reference/sources/richclay/src/hyperclay.js +470 -0
  459. package/examples/components/reference/sources/richclay/src/normalize.js +380 -0
  460. package/examples/components/reference/sources/richclay/src/richclay.js +1356 -0
  461. package/examples/components/reference/sources/richclay/src/sanitize.js +189 -0
  462. package/examples/components/reference/sources/richclay/src/styles.js +23 -0
  463. package/examples/components/reference/sources/richclay/src/toolbar-float.js +175 -0
  464. package/examples/components/reference/sources/richclay/src/toolbar.js +394 -0
  465. package/examples/components/reference/sources/richclay/src/vendor-bundle.js +15 -0
  466. package/examples/components/reference/sources/richclay/vendor/DOMPURIFY-LICENSE +202 -0
  467. package/examples/components/reference/sources/richclay/vendor/DOMPURIFY-LICENSE-MPL +373 -0
  468. package/examples/components/reference/sources/richclay/vendor/SQUIRE-LICENSE +21 -0
  469. package/examples/components/reference/sources/richclay/vendor/purify.es.mjs +2249 -0
  470. package/examples/components/reference/sources/richclay/vendor/purify.min.js +3 -0
  471. package/examples/components/reference/sources/richclay/vendor/squire.js +22 -0
  472. package/examples/components/reference/sources/richclay/vendor/squire.mjs +22 -0
  473. package/examples/components/reference/sources/richclay/vendor/squire.provenance.json +19 -0
  474. package/examples/components/rich-text-toolbar.html +43 -0
  475. package/examples/components/save-status-indicator.html +11 -0
  476. package/examples/components/selectable-cards.html +9 -0
  477. package/examples/components/settings-rows.html +10 -0
  478. package/examples/components/sidebar-nav.html +9 -0
  479. package/examples/components/small-charts.html +21 -0
  480. package/examples/components/split-button.html +13 -0
  481. package/examples/components/split-panes-editor.html +6 -0
  482. package/examples/components/split-panes.html +9 -0
  483. package/examples/components/stat-tiles.html +23 -0
  484. package/examples/components/toast-stack.html +21 -0
  485. package/examples/components/tree-view.html +9 -0
  486. package/examples/components/upload-dropzone.html +88 -0
  487. package/examples/components/wizard-shell.html +50 -0
  488. package/examples/datastar/index.html +38 -0
  489. package/examples/datastar/server.mjs +31 -0
  490. package/examples/fixtures/field-guide.pdf +14 -0
  491. package/examples/fixtures/workspace.jpg +0 -0
  492. package/examples/setup-peers.mjs +35 -0
  493. package/fonts/LICENSE-ibm-plex-mono.txt +93 -0
  494. package/fonts/LICENSE-ibm-plex-sans.txt +93 -0
  495. package/fonts/LICENSE-newsreader.txt +93 -0
  496. package/fonts/ibm-plex-mono-latin-400-normal.woff2 +0 -0
  497. package/fonts/ibm-plex-mono-latin-500-normal.woff2 +0 -0
  498. package/fonts/ibm-plex-mono-latin-600-normal.woff2 +0 -0
  499. package/fonts/ibm-plex-sans-latin-400-italic.woff2 +0 -0
  500. package/fonts/ibm-plex-sans-latin-400-normal.woff2 +0 -0
  501. package/fonts/ibm-plex-sans-latin-500-normal.woff2 +0 -0
  502. package/fonts/ibm-plex-sans-latin-600-normal.woff2 +0 -0
  503. package/fonts/newsreader-latin-opsz-italic.woff2 +0 -0
  504. package/fonts/newsreader-latin-opsz-normal.woff2 +0 -0
  505. package/icons/LICENSE +21 -0
  506. package/icons/house.json +71 -0
  507. package/icons/icons.d.ts +17 -0
  508. package/icons/icons.js +648 -0
  509. package/icons/icons.svg +126 -0
  510. package/icons/marks/build-tray.source.mjs +45 -0
  511. package/icons/marks/hyperclay-local.svg +11 -0
  512. package/icons/phosphor.json +53 -0
  513. package/icons/round.json +8 -0
  514. package/integrations/datastar.js +202 -0
  515. package/integrations/quickcrop.css +26 -0
  516. package/integrations/quickcrop.js +56 -0
  517. package/integrations/richclay.css +100 -0
  518. package/integrations/richclay.js +131 -0
  519. package/package.json +630 -0
  520. package/react/README.md +244 -0
  521. package/src/README.md +83 -0
  522. package/vendor/datastar/datastar-1.0.3.js +10 -0
  523. package/vendor/datastar/provenance.json +6 -0
  524. package/vendor/floating-ui/LICENSE-core +20 -0
  525. package/vendor/floating-ui/LICENSE-dom +20 -0
  526. package/vendor/floating-ui/floating-ui.core.umd.min.js +1 -0
  527. package/vendor/floating-ui/floating-ui.dom.umd.min.js +1 -0
  528. package/vendor/floating-ui/provenance.json +17 -0
  529. package/vendor/richclay/LICENSE +16 -0
  530. package/vendor/richclay/THIRD-PARTY-NOTICES.md +45 -0
  531. package/vendor/richclay/provenance.json +17 -0
  532. package/vendor/richclay/richclay.css +404 -0
  533. package/vendor/richclay/richclay.js +2940 -0
  534. package/vendor/richclay/vendor/DOMPURIFY-LICENSE +202 -0
  535. package/vendor/richclay/vendor/DOMPURIFY-LICENSE-MPL +373 -0
  536. package/vendor/richclay/vendor/SQUIRE-LICENSE +21 -0
  537. package/vendor/richclay/vendor/purify.min.js +3 -0
  538. package/vendor/richclay/vendor/squire.js +22 -0
  539. package/vendor/richclay/vendor/squire.provenance.json +30 -0
package/examples/components/reference/fable/components/kanban-board.html ADDED
@@ -0,0 +1,53 @@
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>Kanban board · Fable · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-parent.css" rel="stylesheet"/><link href="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/><link href="../kanban.css" rel="stylesheet"/></head><body data-component="kanban-board" data-reference-phase="static" data-seat="fable" data-selected-source="parent"><section data-ref-state="default" inert=""><main class="kb" data-state="default">
3
+ <header class="kb-mast"><div class="kb-mast-title"><div class="kb-kicker">Northstar Studio<i>/</i>Project 004<i>/</i>Board</div><h1>Field notes</h1><p>Everything the studio is making for the field guide, in the order it will ship.</p></div>
4
+ <div class="kb-mast-side"><div class="kb-team"><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar" data-who="MC" title="Mira Chen">MC</span><span aria-label="Alex Rivera" class="f-avatar" data-who="AR" title="Alex Rivera">AR</span><span aria-label="Sam Patel" class="f-avatar" data-who="SP" title="Sam Patel">SP</span><span aria-label="Jules Park" class="f-avatar" data-who="JP" title="Jules Park">JP</span></span><small>4 people</small></div><button class="bevel-button" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 3v12m-4-8 4-4 4 4M5 14v6h14v-6"></path></svg><span class="bevel-button__label">Share</span></button><button class="bevel-button bevel-button--primary" 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">New task</span></button></div></header>
5
+ <nav aria-label="Views" class="kb-views"><a aria-current="page" href="#board"><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 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Board<b>11</b></a><a href="#list"><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>List</a><a href="#timeline"><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 6h8M9 12h10M5 18h9"></path></svg>Timeline</a><a href="#calendar"><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 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Calendar</a><span class="kb-views-note"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg>Private · updated 10:42</span></nav>
6
+ <div class="kb-tools"><label class="kb-search"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><input aria-label="Search tasks" placeholder="Search tasks" type="search"/><kbd>⌘ K</kbd></label><button class="kb-chip" 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="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Due: any time<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><button class="kb-chip" type="button">Assignee: anyone<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><button class="kb-chip" type="button">Label: all<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><span class="kb-spacer"></span><button class="kb-chip kb-chip-quiet" 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="M3 4h7v7H3ZM14 4h7v7h-7ZM3 13h7v7H3ZM14 13h7v7h-7Z"></path></svg>Group: status</button><button class="kb-chip kb-chip-quiet" 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="M4 6h16M7 12h10M10 18h4"></path></svg>Sort: priority</button></div>
7
+ <dl class="kb-tape"><div><dt>Open</dt><dd>9</dd></div><div><dt>In progress</dt><dd>3<small>of 3</small></dd></div><div><dt>Blocked</dt><dd data-tone="ox">1</dd></div><div><dt>Done this week</dt><dd>2</dd></div><div class="kb-tape-meter"><dt>Progress</dt><dd><i class="kb-check-bar"><b style="width:18%"></b></i>18%</dd></div></dl>
8
+ <div class="kb-work"><div class="kb-board-wrap"><div aria-label="Board lanes" class="kb-board" tabindex="0"><section aria-label="Backlog" class="kb-lane" data-lane="backlog"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="backlog"></span><h2>Backlog</h2><span class="kb-count">3</span><button aria-label="Add a task to Backlog" class="kb-icon" 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></button></header><div class="kb-lane-body"><article class="kb-card" data-task="FN-109"><div class="kb-card-top"><span class="kb-id">FN-109</span><span class="kb-priority" data-priority="normal"><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 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Archive the 2025 field notes</h3><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 19</span><span class="kb-meta"></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><article class="kb-card" data-task="FN-110"><div class="kb-card-top"><span class="kb-id">FN-110</span><span class="kb-priority" data-priority="normal"><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 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Print-ready export for the field guide</h3><div class="kb-labels"><span class="kb-label" data-label="engineering">Engineering</span></div><div aria-label="Checklist 0 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:0%"></b></i><span class="kb-check-count">0/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 24</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>1</span></span><span class="kb-people"><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span></footer></article><article class="kb-card" data-task="FN-111"><div class="kb-card-top"><span class="kb-id">FN-111</span><span class="kb-priority" data-priority="normal"><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 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Photograph the studio for the cover</h3><div class="kb-labels"><span class="kb-label" data-label="design">Design</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 26</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>1</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span></span></footer></article><button class="kb-add" 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="M12 5v14M5 12h14"></path></svg>Add task</button></div></section><section aria-label="Up next" class="kb-lane" data-lane="next"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="next"></span><h2>Up next</h2><span class="kb-count">3</span><button aria-label="Add a task to Up next" class="kb-icon" 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></button></header><div class="kb-lane-body"><article class="kb-card" data-task="FN-101"><div class="kb-card-top"><span class="kb-id">FN-101</span><span class="kb-priority" data-priority="high"><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 21V4h13l-3 4 3 4H5"></path></svg>High</span></div><h3>Turn research into a field guide</h3><p class="kb-desc">A useful home for what we learned in the interviews.</p><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><div aria-label="Checklist 2 of 5" class="kb-check"><i class="kb-check-bar"><b style="width:40%"></b></i><span class="kb-check-count">2/5</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 10</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>3</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>2</span></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><article class="kb-card" data-task="FN-102"><figure class="kb-cover"><img alt="The studio desk, a reference for the cover" src="../../fixtures/workspace.jpg"/><figcaption>Cover reference</figcaption></figure><div class="kb-card-top"><span class="kb-id">FN-102</span><span class="kb-priority" data-priority="normal"><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 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Shape the cover story</h3><div class="kb-labels"><span class="kb-label" data-label="design">Design</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 11</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>2</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>1</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><article class="kb-card" data-task="FN-103"><div class="kb-card-top"><span class="kb-id">FN-103</span><span class="kb-priority" data-priority="normal"><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 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Invite the next four collaborators</h3><div class="kb-labels"><span class="kb-label" data-label="studio">Studio</span></div><div aria-label="Checklist 0 of 4" class="kb-check"><i class="kb-check-bar"><b style="width:0%"></b></i><span class="kb-check-count">0/4</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 12</span><span class="kb-meta"></span><span class="kb-people"><span aria-label="Jules Park" class="f-avatar small" data-who="JP" title="Jules Park">JP</span></span></footer></article><button class="kb-add" 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="M12 5v14M5 12h14"></path></svg>Add task</button></div></section><section aria-label="In progress" class="kb-lane" data-lane="progress"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="progress"></span><h2>In progress</h2><span class="kb-count">3</span><span class="kb-wip" data-full="true">WIP 3 / 3</span><button aria-label="Add a task to In progress" class="kb-icon" 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></button></header><div class="kb-lane-body"><article class="kb-card is-blocked" data-task="FN-104"><div class="kb-card-top"><span class="kb-id">FN-104</span><span class="kb-priority" data-priority="urgent"><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 21V4h13l-3 4 3 4H5"></path></svg>Urgent</span></div><h3>Make room for good work</h3><p class="kb-desc">Finish the new project experience. Keep the first step calm and easy to return to.</p><div class="kb-labels"><span class="kb-label" data-label="design">Design</span><span class="kb-label" data-label="launch">Launch</span></div><div class="kb-dep is-blocked"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg><span>Blocked by <b>FN-105</b> · Font licensing</span></div><div aria-label="Checklist 3 of 4" class="kb-check"><i class="kb-check-bar"><b style="width:75%"></b></i><span class="kb-check-count">3/4</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="today"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Today</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>8</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>3</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span></footer></article><article class="kb-card" data-task="FN-105"><div class="kb-card-top"><span class="kb-id">FN-105</span><span class="kb-priority" data-priority="high"><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 21V4h13l-3 4 3 4H5"></path></svg>High</span></div><h3>Polish the document export</h3><div class="kb-labels"><span class="kb-label" data-label="engineering">Engineering</span></div><div class="kb-dep"><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="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>Blocks <b>FN-104</b> · Make room for good work</span></div><div aria-label="Checklist 1 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:33%"></b></i><span class="kb-check-count">1/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="overdue"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 07</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>4</span></span><span class="kb-people"><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span></footer></article><article class="kb-card" data-task="FN-106"><div class="kb-card-top"><span class="kb-id">FN-106</span><span class="kb-priority" data-priority="normal"><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 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Give every empty state a voice</h3><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><div aria-label="Checklist 2 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:67%"></b></i><span class="kb-check-count">2/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 09</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>1</span></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><button class="kb-add" 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="M12 5v14M5 12h14"></path></svg>Add task</button></div></section><section aria-label="Done" class="kb-lane" data-lane="done"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="done"></span><h2>Done</h2><span class="kb-count">2</span><span class="kb-wip" data-full="false">This week</span><button aria-label="Add a task to Done" class="kb-icon" 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></button></header><div class="kb-lane-body"><article class="kb-card is-done" data-task="FN-107"><div class="kb-card-top"><span class="kb-id">FN-107</span><span class="kb-priority" data-priority="normal"><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 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>A calmer workspace navigation</h3><div class="kb-labels"><span class="kb-label" data-label="design">Design</span></div><div aria-label="Checklist 4 of 4" class="kb-check"><i class="kb-check-bar"><b style="width:100%"></b></i><span class="kb-check-count">4/4</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="done"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 12 4 4L19 6"></path></svg>Sep 08</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>5</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>2</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span></span></footer></article><article class="kb-card is-done" data-task="FN-108"><div class="kb-card-top"><span class="kb-id">FN-108</span><span class="kb-priority" data-priority="normal"><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 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Write the first welcome</h3><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><div aria-label="Checklist 3 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:100%"></b></i><span class="kb-check-count">3/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="done"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 12 4 4L19 6"></path></svg>Sep 07</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>2</span></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span><span aria-label="Jules Park" class="f-avatar small" data-who="JP" title="Jules Park">JP</span></span></footer></article><button class="kb-add" 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="M12 5v14M5 12h14"></path></svg>Add task</button></div></section></div></div></div>
9
+ <footer class="kb-foot"><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="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Grouped by status · sorted by priority</span><span>11 tasks · 2 done · 4 people</span></footer>
10
+ </main></section><section data-ref-state="empty" hidden="" inert=""><main class="kb" data-state="empty">
11
+ <header class="kb-mast"><div class="kb-mast-title"><div class="kb-kicker">Northstar Studio<i>/</i>Project 004<i>/</i>Board</div><h1>Field notes</h1><p>Everything the studio is making for the field guide, in the order it will ship.</p></div>
12
+ <div class="kb-mast-side"><div class="kb-team"><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar" data-who="MC" title="Mira Chen">MC</span><span aria-label="Alex Rivera" class="f-avatar" data-who="AR" title="Alex Rivera">AR</span><span aria-label="Sam Patel" class="f-avatar" data-who="SP" title="Sam Patel">SP</span><span aria-label="Jules Park" class="f-avatar" data-who="JP" title="Jules Park">JP</span></span><small>4 people</small></div><button class="bevel-button" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 3v12m-4-8 4-4 4 4M5 14v6h14v-6"></path></svg><span class="bevel-button__label">Share</span></button><button class="bevel-button bevel-button--primary" 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">New task</span></button></div></header>
13
+ <nav aria-label="Views" class="kb-views"><a aria-current="page" href="#board"><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 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Board<b>0</b></a><a href="#list"><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>List</a><a href="#timeline"><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 6h8M9 12h10M5 18h9"></path></svg>Timeline</a><a href="#calendar"><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 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Calendar</a><span class="kb-views-note"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg>Private · updated 10:42</span></nav>
14
+ <div class="kb-tools"><label class="kb-search"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><input aria-label="Search tasks" placeholder="Search tasks" type="search"/><kbd>⌘ K</kbd></label><button class="kb-chip" type="button">Assignee: anyone<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><button class="kb-chip" type="button">Label: all<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><span class="kb-spacer"></span><button class="kb-chip kb-chip-quiet" 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="M3 4h7v7H3ZM14 4h7v7h-7ZM3 13h7v7H3ZM14 13h7v7h-7Z"></path></svg>Group: status</button><button class="kb-chip kb-chip-quiet" 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="M4 6h16M7 12h10M10 18h4"></path></svg>Sort: priority</button></div>
15
+ <dl class="kb-tape"><div><dt>Open</dt><dd>0</dd></div><div><dt>In progress</dt><dd>0<small>of 3</small></dd></div><div><dt>Blocked</dt><dd data-tone="">0</dd></div><div><dt>Done this week</dt><dd>0</dd></div><div class="kb-tape-meter"><dt>Progress</dt><dd><i class="kb-check-bar"><b style="width:0%"></b></i>0%</dd></div></dl><div class="kb-empty-note"><strong>This board is empty.</strong> New tasks land in Backlog. Move them across the lanes as the work moves.</div>
16
+ <div class="kb-work"><div class="kb-board-wrap"><div aria-label="Board lanes" class="kb-board" tabindex="0"><section aria-label="Backlog" class="kb-lane" data-lane="backlog"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="backlog"></span><h2>Backlog</h2><span class="kb-count">0</span><button aria-label="Add a task to Backlog" class="kb-icon" 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></button></header><div class="kb-lane-body"><div class="kb-lane-empty"><strong>Nothing waiting</strong><p>Ideas that are not scheduled yet.</p><div class="kb-empty-actions"><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">Add the first task</span></button><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 4h16v5H4ZM4 12h7v8H4ZM14 12h6v8h-6Z"></path></svg><span class="bevel-button__label">Start from a template</span></button></div></div></div></section><section aria-label="Up next" class="kb-lane" data-lane="next"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="next"></span><h2>Up next</h2><span class="kb-count">0</span><button aria-label="Add a task to Up next" class="kb-icon" 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></button></header><div class="kb-lane-body"><div class="kb-lane-empty"><strong>Nothing scheduled</strong><p>Scheduled for this week.</p></div></div></section><section aria-label="In progress" class="kb-lane" data-lane="progress"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="progress"></span><h2>In progress</h2><span class="kb-count">0</span><button aria-label="Add a task to In progress" class="kb-icon" 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></button></header><div class="kb-lane-body"><div class="kb-lane-empty"><strong>Nothing in progress</strong><p>Being worked on right now.</p></div></div></section><section aria-label="Done" class="kb-lane" data-lane="done"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="done"></span><h2>Done</h2><span class="kb-count">0</span><button aria-label="Add a task to Done" class="kb-icon" 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></button></header><div class="kb-lane-body"><div class="kb-lane-empty"><strong>Nothing finished yet</strong><p>Finished and reviewed.</p></div></div></section></div></div></div>
17
+ <footer class="kb-foot"><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="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Grouped by status · sorted by priority</span><span>0 tasks · 0 done · 4 people</span></footer>
18
+ </main></section><section data-ref-state="selected" hidden="" inert=""><main class="kb" data-state="selected">
19
+ <header class="kb-mast"><div class="kb-mast-title"><div class="kb-kicker">Northstar Studio<i>/</i>Project 004<i>/</i>Board</div><h1>Field notes</h1><p>Everything the studio is making for the field guide, in the order it will ship.</p></div>
20
+ <div class="kb-mast-side"><div class="kb-team"><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar" data-who="MC" title="Mira Chen">MC</span><span aria-label="Alex Rivera" class="f-avatar" data-who="AR" title="Alex Rivera">AR</span><span aria-label="Sam Patel" class="f-avatar" data-who="SP" title="Sam Patel">SP</span><span aria-label="Jules Park" class="f-avatar" data-who="JP" title="Jules Park">JP</span></span><small>4 people</small></div><button class="bevel-button" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 3v12m-4-8 4-4 4 4M5 14v6h14v-6"></path></svg><span class="bevel-button__label">Share</span></button><button class="bevel-button bevel-button--primary" 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">New task</span></button></div></header>
21
+ <nav aria-label="Views" class="kb-views"><a aria-current="page" href="#board"><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 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Board<b>11</b></a><a href="#list"><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>List</a><a href="#timeline"><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 6h8M9 12h10M5 18h9"></path></svg>Timeline</a><a href="#calendar"><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 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Calendar</a><span class="kb-views-note"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg>Private · updated 10:42</span></nav>
22
+ <div class="kb-tools"><label class="kb-search"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><input aria-label="Search tasks" placeholder="Search tasks" type="search"/><kbd>⌘ K</kbd></label><button class="kb-chip" 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="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Due: any time<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><button class="kb-chip" type="button">Assignee: anyone<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><button class="kb-chip" type="button">Label: all<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><span class="kb-spacer"></span><button class="kb-chip kb-chip-quiet" 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="M3 4h7v7H3ZM14 4h7v7h-7ZM3 13h7v7H3ZM14 13h7v7h-7Z"></path></svg>Group: status</button><button class="kb-chip kb-chip-quiet" 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="M4 6h16M7 12h10M10 18h4"></path></svg>Sort: priority</button></div>
23
+ <dl class="kb-tape"><div><dt>Open</dt><dd>9</dd></div><div><dt>In progress</dt><dd>3<small>of 3</small></dd></div><div><dt>Blocked</dt><dd data-tone="ox">1</dd></div><div><dt>Done this week</dt><dd>2</dd></div><div class="kb-tape-meter"><dt>Progress</dt><dd><i class="kb-check-bar"><b style="width:18%"></b></i>18%</dd></div></dl>
24
+ <div class="kb-work has-panel"><div class="kb-board-wrap"><div aria-label="Board lanes" class="kb-board" tabindex="0"><section aria-label="Backlog" class="kb-lane" data-lane="backlog"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="backlog"></span><h2>Backlog</h2><span class="kb-count">3</span><button aria-label="Add a task to Backlog" class="kb-icon" 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></button></header><div class="kb-lane-body"><article class="kb-card" data-task="FN-109"><div class="kb-card-top"><span class="kb-id">FN-109</span><span class="kb-priority" data-priority="normal"><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 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Archive the 2025 field notes</h3><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 19</span><span class="kb-meta"></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><article class="kb-card" data-task="FN-110"><div class="kb-card-top"><span class="kb-id">FN-110</span><span class="kb-priority" data-priority="normal"><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 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Print-ready export for the field guide</h3><div class="kb-labels"><span class="kb-label" data-label="engineering">Engineering</span></div><div aria-label="Checklist 0 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:0%"></b></i><span class="kb-check-count">0/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 24</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>1</span></span><span class="kb-people"><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span></footer></article><article class="kb-card" data-task="FN-111"><div class="kb-card-top"><span class="kb-id">FN-111</span><span class="kb-priority" data-priority="normal"><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 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Photograph the studio for the cover</h3><div class="kb-labels"><span class="kb-label" data-label="design">Design</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 26</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>1</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span></span></footer></article><button class="kb-add" 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="M12 5v14M5 12h14"></path></svg>Add task</button></div></section><section aria-label="Up next" class="kb-lane" data-lane="next"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="next"></span><h2>Up next</h2><span class="kb-count">3</span><button aria-label="Add a task to Up next" class="kb-icon" 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></button></header><div class="kb-lane-body"><article class="kb-card" data-task="FN-101"><div class="kb-card-top"><span class="kb-id">FN-101</span><span class="kb-priority" data-priority="high"><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 21V4h13l-3 4 3 4H5"></path></svg>High</span></div><h3>Turn research into a field guide</h3><p class="kb-desc">A useful home for what we learned in the interviews.</p><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><div aria-label="Checklist 2 of 5" class="kb-check"><i class="kb-check-bar"><b style="width:40%"></b></i><span class="kb-check-count">2/5</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 10</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>3</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>2</span></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><article class="kb-card" data-task="FN-102"><figure class="kb-cover"><img alt="The studio desk, a reference for the cover" src="../../fixtures/workspace.jpg"/><figcaption>Cover reference</figcaption></figure><div class="kb-card-top"><span class="kb-id">FN-102</span><span class="kb-priority" data-priority="normal"><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 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Shape the cover story</h3><div class="kb-labels"><span class="kb-label" data-label="design">Design</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 11</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>2</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>1</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><article class="kb-card" data-task="FN-103"><div class="kb-card-top"><span class="kb-id">FN-103</span><span class="kb-priority" data-priority="normal"><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 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Invite the next four collaborators</h3><div class="kb-labels"><span class="kb-label" data-label="studio">Studio</span></div><div aria-label="Checklist 0 of 4" class="kb-check"><i class="kb-check-bar"><b style="width:0%"></b></i><span class="kb-check-count">0/4</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 12</span><span class="kb-meta"></span><span class="kb-people"><span aria-label="Jules Park" class="f-avatar small" data-who="JP" title="Jules Park">JP</span></span></footer></article><button class="kb-add" 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="M12 5v14M5 12h14"></path></svg>Add task</button></div></section><section aria-label="In progress" class="kb-lane" data-lane="progress"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="progress"></span><h2>In progress</h2><span class="kb-count">3</span><span class="kb-wip" data-full="true">WIP 3 / 3</span><button aria-label="Add a task to In progress" class="kb-icon" 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></button></header><div class="kb-lane-body"><article aria-current="true" class="kb-card is-selected is-blocked" data-task="FN-104"><div class="kb-card-top"><span class="kb-id">FN-104</span><span class="kb-priority" data-priority="urgent"><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 21V4h13l-3 4 3 4H5"></path></svg>Urgent</span></div><h3>Make room for good work</h3><p class="kb-desc">Finish the new project experience. Keep the first step calm and easy to return to.</p><div class="kb-labels"><span class="kb-label" data-label="design">Design</span><span class="kb-label" data-label="launch">Launch</span></div><div class="kb-dep is-blocked"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg><span>Blocked by <b>FN-105</b> · Font licensing</span></div><div aria-label="Checklist 3 of 4" class="kb-check"><i class="kb-check-bar"><b style="width:75%"></b></i><span class="kb-check-count">3/4</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="today"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Today</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>8</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>3</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span></footer></article><article class="kb-card" data-task="FN-105"><div class="kb-card-top"><span class="kb-id">FN-105</span><span class="kb-priority" data-priority="high"><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 21V4h13l-3 4 3 4H5"></path></svg>High</span></div><h3>Polish the document export</h3><div class="kb-labels"><span class="kb-label" data-label="engineering">Engineering</span></div><div class="kb-dep"><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="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>Blocks <b>FN-104</b> · Make room for good work</span></div><div aria-label="Checklist 1 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:33%"></b></i><span class="kb-check-count">1/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="overdue"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 07</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>4</span></span><span class="kb-people"><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span></footer></article><article class="kb-card" data-task="FN-106"><div class="kb-card-top"><span class="kb-id">FN-106</span><span class="kb-priority" data-priority="normal"><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 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Give every empty state a voice</h3><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><div aria-label="Checklist 2 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:67%"></b></i><span class="kb-check-count">2/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 09</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>1</span></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><button class="kb-add" 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="M12 5v14M5 12h14"></path></svg>Add task</button></div></section><section aria-label="Done" class="kb-lane" data-lane="done"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="done"></span><h2>Done</h2><span class="kb-count">2</span><span class="kb-wip" data-full="false">This week</span><button aria-label="Add a task to Done" class="kb-icon" 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></button></header><div class="kb-lane-body"><article class="kb-card is-done" data-task="FN-107"><div class="kb-card-top"><span class="kb-id">FN-107</span><span class="kb-priority" data-priority="normal"><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 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>A calmer workspace navigation</h3><div class="kb-labels"><span class="kb-label" data-label="design">Design</span></div><div aria-label="Checklist 4 of 4" class="kb-check"><i class="kb-check-bar"><b style="width:100%"></b></i><span class="kb-check-count">4/4</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="done"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 12 4 4L19 6"></path></svg>Sep 08</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>5</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>2</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span></span></footer></article><article class="kb-card is-done" data-task="FN-108"><div class="kb-card-top"><span class="kb-id">FN-108</span><span class="kb-priority" data-priority="normal"><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 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Write the first welcome</h3><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><div aria-label="Checklist 3 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:100%"></b></i><span class="kb-check-count">3/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="done"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 12 4 4L19 6"></path></svg>Sep 07</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>2</span></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span><span aria-label="Jules Park" class="f-avatar small" data-who="JP" title="Jules Park">JP</span></span></footer></article><button class="kb-add" 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="M12 5v14M5 12h14"></path></svg>Add task</button></div></section></div><div aria-hidden="true" class="kb-scroll-rail"><b style="width:80%"></b></div><p class="kb-scroll-hint"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 12h16m-6-6 6 6-6 6"></path></svg>Four lanes. Scroll the board sideways for <b>Done</b>.</p></div><aside aria-label="Task FN-104" class="kb-panel">
25
+ <header class="kb-panel-head"><span class="kb-id">FN-104</span><span class="kb-status" data-lane="progress">In progress <svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></span><span class="kb-spacer"></span><button aria-label="Task options" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button><button aria-label="Close task" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></header>
26
+ <h2>Make room for good work</h2>
27
+ <p class="kb-panel-lede">Finish the new project experience. Keep the first step calm, direct and easy to return to.</p>
28
+ <dl class="kb-props">
29
+ <dt>Assignees</dt><dd><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span>Mira Chen, Alex Rivera</dd>
30
+ <dt>Priority</dt><dd><span class="kb-priority" data-priority="urgent"><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 21V4h13l-3 4 3 4H5"></path></svg>Urgent</span></dd>
31
+ <dt>Due</dt><dd><span class="kb-due" data-due="today"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Today, Sep 08</span></dd>
32
+ <dt>Labels</dt><dd class="kb-labels"><span class="kb-label" data-label="design">Design</span><span class="kb-label" data-label="launch">Launch</span></dd>
33
+ <dt>Estimate</dt><dd class="f-mono">3 days · 2 spent</dd>
34
+ </dl>
35
+ <section class="kb-panel-section"><h4>Checklist <b class="kb-check-count">3/4</b></h4><i class="kb-check-bar"><b style="width:75%"></b></i>
36
+ <label class="bevel-checkbox bevel-checkbox--small kb-check-item"><input checked="" class="bevel-sr-only" type="checkbox"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Set the project details</span></label><label class="bevel-checkbox bevel-checkbox--small kb-check-item"><input checked="" class="bevel-sr-only" type="checkbox"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Check both colour modes</span></label><label class="bevel-checkbox bevel-checkbox--small kb-check-item"><input checked="" class="bevel-sr-only" type="checkbox"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Review the compact layout</span></label><label class="bevel-checkbox bevel-checkbox--small kb-check-item"><input class="bevel-sr-only" type="checkbox"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Get Jules’ final review</span></label>
37
+ </section>
38
+ <section class="kb-panel-section"><h4>Blocked by <b class="kb-check-count">1</b></h4>
39
+ <div class="kb-dep-row"><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><div><b>FN-105</b> Polish the document export<small>In progress · Alex Rivera · <span class="kb-due" data-due="overdue">due Sep 07</span></small></div><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></div>
40
+ </section>
41
+ <section class="kb-panel-section"><h4>Attachments <b class="kb-check-count">3</b></h4>
42
+ <div class="kb-files"><a class="kb-file" href="#workspace"><img alt="" src="../../fixtures/workspace.jpg"/><span>workspace.jpg<small>184 KB</small></span></a><a class="kb-file" href="#brief"><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>project-brief.pdf<small>420 KB</small></span></a><a class="kb-file" href="#copy"><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>welcome-copy.md<small>3 KB</small></span></a></div>
43
+ </section>
44
+ <section class="kb-panel-section"><h4>Activity <b class="kb-check-count">8</b></h4>
45
+ <div class="kb-comment"><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span><div><b>Alex Rivera <small>18 min ago</small></b><p>The new flow reads clearly. Ready for one last look at the copy.</p></div></div>
46
+ <div class="kb-comment"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span><div><b>Sam Patel <small>2 h ago</small></b><p>Tightened the welcome line. It is on the card now.</p></div></div>
47
+ <div class="kb-event"><span class="kb-event-dot"></span>Mira moved this from <b>Up next</b> to <b>In progress</b><small>Yesterday</small></div>
48
+ <div class="kb-composer"><span>Leave a comment…</span><kbd>⌘ ↵</kbd></div>
49
+ </section>
50
+ <footer class="kb-panel-foot"><span class="f-mono">Created Sep 02 by Jules Park</span><button class="bevel-button bevel-button--small" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M4 4h6M4 4v6M20 20h-6m6 0v-6M4 20l6-6M20 4l-6 6"></path></svg><span class="bevel-button__label">Open task</span></button></footer>
51
+ </aside></div>
52
+ <footer class="kb-foot"><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="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Grouped by status · sorted by priority</span><span>11 tasks · 2 done · 4 people</span></footer>
53
+ </main></section><footer class="r-static-note">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/modal.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>Modal · Fable · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-astra.css" rel="stylesheet"/><link href="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="modal" data-reference-phase="static" data-seat="fable" data-selected-source="astra"><section data-ref-state="form" inert=""><div class="overlay-scene"><div class="micromodal is-open" data-part="modal-frame" style="width:100%;max-width:490px"><div aria-label="Make room for an idea." aria-modal="true" class="micromodal__container" role="dialog"><button aria-label="Close" class="micromodal__close" data-close-modal="" type="button"><svg viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="micromodal__close-bg" d="M132 132.5 1 1.5h131v131Z" /><path class="micromodal__close-x" fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" /></svg></button><div class="micromodal__inner"><div class="eyebrow">FIELD NOTES / A NEW BEGINNING</div><div class="micromodal__content"><h2 class="micromodal__heading">Make room for an idea.</h2><p>Give your project a name and a place to begin. You can change these details later.</p><div class="stack"><label class="field">Project name<input class="bevel-input" value="Field notes"/></label><label class="field">Workspace<label class="bevel-select"><span class="bevel-sr-only">Workspace</span><select class="bevel-select__field"><option>Northstar Studio</option><option>Personal workspace</option></select></label></label></div></div><div class="micromodal__buttons"><button class="bevel-button" data-close-modal="" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--primary" data-modal-done="Create project" type="button"><span class="bevel-button__label">Create project</span></button></div></div></div></div></div></section><section data-ref-state="prompt" hidden="" inert=""><div class="overlay-scene"><div class="micromodal is-open" data-part="modal-frame" style="width:100%;max-width:490px"><div aria-label="Name this field note." aria-modal="true" class="micromodal__container" role="dialog"><button aria-label="Close" class="micromodal__close" data-close-modal="" type="button"><svg viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="micromodal__close-bg" d="M132 132.5 1 1.5h131v131Z" /><path class="micromodal__close-x" fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" /></svg></button><div class="micromodal__inner"><div class="eyebrow">FIELD NOTES / A NEW BEGINNING</div><div class="micromodal__content"><h2 class="micromodal__heading">Name this field note.</h2><p>A good name makes it easier to find your way back.</p><label class="field">Title<input class="bevel-input" value="A place for good work"/></label></div><div class="micromodal__buttons"><button class="bevel-button" data-close-modal="" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--primary" data-modal-done="Save name" type="button"><span class="bevel-button__label">Save name</span></button></div></div></div></div></div></section><section data-ref-state="confirm" hidden="" inert=""><div class="overlay-scene"><div class="micromodal is-open" data-part="modal-frame" style="width:100%;max-width:490px"><div aria-label="Archive this project?" aria-modal="true" class="micromodal__container" role="dialog"><button aria-label="Close" class="micromodal__close" data-close-modal="" type="button"><svg viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="micromodal__close-bg" d="M132 132.5 1 1.5h131v131Z" /><path class="micromodal__close-x" fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" /></svg></button><div class="micromodal__inner"><div class="eyebrow">FIELD NOTES / PROJECT SETTINGS</div><div class="micromodal__content"><h2 class="micromodal__heading">Archive this project?</h2><p>Field notes will leave your active workspace. Your documents and history stay 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="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div><strong>Field notes</strong><small>12 documents · 4 collaborators · last edited today</small></div><span class="badge">Active</span></div></div><div class="micromodal__buttons"><button class="bevel-button" data-close-modal="" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--danger" data-modal-done="Archive project" type="button"><span class="bevel-button__label">Archive project</span></button></div></div></div></div></div></section><section data-ref-state="long" hidden="" inert=""><div class="overlay-scene"><div class="micromodal is-open" data-part="modal-frame" style="width:100%;max-width:490px"><div aria-label="A little shared understanding." aria-modal="true" class="micromodal__container" role="dialog"><button aria-label="Close" class="micromodal__close" data-close-modal="" type="button"><svg viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="micromodal__close-bg" d="M132 132.5 1 1.5h131v131Z" /><path class="micromodal__close-x" fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" /></svg></button><div class="micromodal__inner"><div class="eyebrow">FIELD NOTES / A NEW BEGINNING</div><div class="micromodal__content"><h2 class="micromodal__heading">A little shared understanding.</h2><p>Before inviting your team, take a moment to review how this workspace works.</p><div class="scroll-copy f-scroll-copy" tabindex="0"><h3>Keep useful things close</h3><p>Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p><h3>One place, one team</h3><p>Everyone you invite can read shared documents. Editors can update content, and owners can manage workspace settings.</p><h3>Your work stays yours</h3><p>You can export your notes at any time. Archived projects keep their documents, decisions and complete history.</p><h3>A thoughtful default</h3><p>New projects start private. Choose who to invite when the work is ready for another pair of eyes.</p></div><div class="f-scroll-hint">Scroll to read the rest</div></div><div class="micromodal__buttons"><button class="bevel-button" data-close-modal="" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--primary" data-modal-done="I understand" type="button"><span class="bevel-button__label">I understand</span></button></div></div></div></div></div></section><footer class="r-static-note">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/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 · Fable · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-parent.css" rel="stylesheet"/><link href="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="multi-select-picker" data-reference-phase="static" data-seat="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">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/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 · Fable · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-astra.css" rel="stylesheet"/><link href="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="pagination" data-reference-phase="static" data-seat="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">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/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 · Fable · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-parent.css" rel="stylesheet"/><link href="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="persistent-action-banner" data-reference-phase="static" data-seat="fable" 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 f-banner" data-part="persistent-notice"><span><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="M3 3l18 18M2 8a16 16 0 0 1 3-2m4-1a16 16 0 0 1 13 3M5 12a11 11 0 0 1 4-2m5 0a11 11 0 0 1 5 2M8 16a6 6 0 0 1 8 0M12 20h.01"></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><span class="f-banner-actions"><button class="bevel-button bevel-button--small" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M4 5v6h6M4 11a8 8 0 1 1 1 7"></path></svg><span class="bevel-button__label">Retry connection</span></button><span class="f-banner-meta">Last synced 10:42 · 3 changes waiting</span></span></section><div class="p-panel f-banner-page"><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 f-banner" data-part="persistent-notice"><span><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 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><span class="f-banner-actions"><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Dismiss</span></button></span></section><div class="p-panel f-banner-page"><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">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/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 · Fable · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-parent.css" rel="stylesheet"/><link href="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="popconfirm" data-reference-phase="static" data-seat="fable" data-selected-source="parent"><section data-ref-state="open" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">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">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/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 · Fable · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-astra.css" rel="stylesheet"/><link href="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="popover-menu" data-reference-phase="static" data-seat="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">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/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 · Fable · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-astra.css" rel="stylesheet"/><link href="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="rich-text-toolbar" data-reference-phase="static" data-seat="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">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/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 · Fable · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-parent.css" rel="stylesheet"/><link href="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="save-status-indicator" data-reference-phase="static" data-seat="fable" data-selected-source="parent"><section data-ref-state="saved" inert=""><main class="r-saved-page f-saved-page"><header><span class="eyebrow">Northstar Studio / Field notes</span><span class="f-saved-meta"><span class="badge">Draft</span><span class="mono muted">Edited 10:42</span></span></header><article><span class="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">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/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 · Fable · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-astra.css" rel="stylesheet"/><link href="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="selectable-cards" data-reference-phase="static" data-seat="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">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/fable/components/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 · Fable · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-astra.css" rel="stylesheet"/><link href="../fable.css" rel="stylesheet"/><link href="../parent-repairs.css" rel="stylesheet"/></head><body data-component="settings-rows" data-reference-phase="static" data-seat="fable" data-selected-source="astra"><section data-ref-state="default" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Make 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">Static UI reference · Fable seat · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>