@panphora/bevel 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (539) hide show
  1. package/LICENSE +16 -0
  2. package/README.md +226 -0
  3. package/bevel-fonts.css +16 -0
  4. package/bevel.css +3075 -0
  5. package/bevel.js +2126 -0
  6. package/dist/react/components/activity-feed.d.ts +89 -0
  7. package/dist/react/components/activity-feed.js +54 -0
  8. package/dist/react/components/alert-dialog.d.ts +14 -0
  9. package/dist/react/components/alert-dialog.js +19 -0
  10. package/dist/react/components/app-shell.d.ts +98 -0
  11. package/dist/react/components/app-shell.js +86 -0
  12. package/dist/react/components/app-toolbar.d.ts +19 -0
  13. package/dist/react/components/app-toolbar.js +22 -0
  14. package/dist/react/components/avatar-group.d.ts +67 -0
  15. package/dist/react/components/avatar-group.js +49 -0
  16. package/dist/react/components/badge-and-pill.d.ts +34 -0
  17. package/dist/react/components/badge-and-pill.js +12 -0
  18. package/dist/react/components/breadcrumbs.d.ts +56 -0
  19. package/dist/react/components/breadcrumbs.js +44 -0
  20. package/dist/react/components/bulk-bar.d.ts +22 -0
  21. package/dist/react/components/bulk-bar.js +59 -0
  22. package/dist/react/components/button.d.ts +15 -0
  23. package/dist/react/components/button.js +20 -0
  24. package/dist/react/components/callout-and-hint.d.ts +17 -0
  25. package/dist/react/components/callout-and-hint.js +8 -0
  26. package/dist/react/components/checkbox.d.ts +5 -0
  27. package/dist/react/components/checkbox.js +13 -0
  28. package/dist/react/components/chip.d.ts +149 -0
  29. package/dist/react/components/chip.js +29 -0
  30. package/dist/react/components/code-block.d.ts +50 -0
  31. package/dist/react/components/code-block.js +77 -0
  32. package/dist/react/components/code-editor.d.ts +122 -0
  33. package/dist/react/components/code-editor.js +695 -0
  34. package/dist/react/components/column-manager.d.ts +28 -0
  35. package/dist/react/components/column-manager.js +85 -0
  36. package/dist/react/components/combobox.d.ts +32 -0
  37. package/dist/react/components/combobox.js +37 -0
  38. package/dist/react/components/data-grid.d.ts +108 -0
  39. package/dist/react/components/data-grid.js +159 -0
  40. package/dist/react/components/data-table.d.ts +2 -0
  41. package/dist/react/components/data-table.js +6 -0
  42. package/dist/react/components/date.d.ts +23 -0
  43. package/dist/react/components/date.js +11 -0
  44. package/dist/react/components/details.d.ts +13 -0
  45. package/dist/react/components/details.js +20 -0
  46. package/dist/react/components/dialog.d.ts +74 -0
  47. package/dist/react/components/dialog.js +31 -0
  48. package/dist/react/components/diff-view.d.ts +73 -0
  49. package/dist/react/components/diff-view.js +68 -0
  50. package/dist/react/components/documents.d.ts +70 -0
  51. package/dist/react/components/documents.js +10 -0
  52. package/dist/react/components/drawer.d.ts +45 -0
  53. package/dist/react/components/drawer.js +35 -0
  54. package/dist/react/components/editable-grid-cells.d.ts +32 -0
  55. package/dist/react/components/editable-grid-cells.js +116 -0
  56. package/dist/react/components/eyebrow-kicker-lede-pull-quote.d.ts +39 -0
  57. package/dist/react/components/eyebrow-kicker-lede-pull-quote.js +12 -0
  58. package/dist/react/components/field.d.ts +32 -0
  59. package/dist/react/components/field.js +27 -0
  60. package/dist/react/components/file-tree.d.ts +75 -0
  61. package/dist/react/components/file-tree.js +247 -0
  62. package/dist/react/components/file.d.ts +43 -0
  63. package/dist/react/components/file.js +73 -0
  64. package/dist/react/components/files-table.d.ts +174 -0
  65. package/dist/react/components/files-table.js +237 -0
  66. package/dist/react/components/filter-builder.d.ts +37 -0
  67. package/dist/react/components/filter-builder.js +109 -0
  68. package/dist/react/components/form-error-summary.d.ts +16 -0
  69. package/dist/react/components/form-error-summary.js +49 -0
  70. package/dist/react/components/icon-button.d.ts +8 -0
  71. package/dist/react/components/icon-button.js +14 -0
  72. package/dist/react/components/icon.d.ts +7 -0
  73. package/dist/react/components/icon.js +15 -0
  74. package/dist/react/components/image.d.ts +72 -0
  75. package/dist/react/components/image.js +24 -0
  76. package/dist/react/components/inline-edit.d.ts +70 -0
  77. package/dist/react/components/inline-edit.js +149 -0
  78. package/dist/react/components/input.d.ts +29 -0
  79. package/dist/react/components/input.js +20 -0
  80. package/dist/react/components/kanban-board.d.ts +140 -0
  81. package/dist/react/components/kanban-board.js +374 -0
  82. package/dist/react/components/layout.d.ts +51 -0
  83. package/dist/react/components/layout.js +28 -0
  84. package/dist/react/components/list.d.ts +28 -0
  85. package/dist/react/components/list.js +6 -0
  86. package/dist/react/components/masthead-and-verdict.d.ts +60 -0
  87. package/dist/react/components/masthead-and-verdict.js +8 -0
  88. package/dist/react/components/menu.d.ts +26 -0
  89. package/dist/react/components/menu.js +31 -0
  90. package/dist/react/components/multi-select-picker.d.ts +49 -0
  91. package/dist/react/components/multi-select-picker.js +20 -0
  92. package/dist/react/components/note.d.ts +33 -0
  93. package/dist/react/components/note.js +8 -0
  94. package/dist/react/components/number-field.d.ts +16 -0
  95. package/dist/react/components/number-field.js +17 -0
  96. package/dist/react/components/pagination.d.ts +45 -0
  97. package/dist/react/components/pagination.js +87 -0
  98. package/dist/react/components/persistent-action-banner.d.ts +71 -0
  99. package/dist/react/components/persistent-action-banner.js +39 -0
  100. package/dist/react/components/popconfirm.d.ts +42 -0
  101. package/dist/react/components/popconfirm.js +59 -0
  102. package/dist/react/components/popover.d.ts +16 -0
  103. package/dist/react/components/popover.js +21 -0
  104. package/dist/react/components/progress-and-gauge.d.ts +44 -0
  105. package/dist/react/components/progress-and-gauge.js +19 -0
  106. package/dist/react/components/radio.d.ts +7 -0
  107. package/dist/react/components/radio.js +13 -0
  108. package/dist/react/components/rich-text-toolbar.d.ts +26 -0
  109. package/dist/react/components/rich-text-toolbar.js +64 -0
  110. package/dist/react/components/rows-and-card.d.ts +88 -0
  111. package/dist/react/components/rows-and-card.js +10 -0
  112. package/dist/react/components/save-status-indicator.d.ts +11 -0
  113. package/dist/react/components/save-status-indicator.js +33 -0
  114. package/dist/react/components/segmented-control.d.ts +21 -0
  115. package/dist/react/components/segmented-control.js +15 -0
  116. package/dist/react/components/select.d.ts +29 -0
  117. package/dist/react/components/select.js +29 -0
  118. package/dist/react/components/selectable-cards.d.ts +30 -0
  119. package/dist/react/components/selectable-cards.js +29 -0
  120. package/dist/react/components/settings-rows.d.ts +51 -0
  121. package/dist/react/components/settings-rows.js +8 -0
  122. package/dist/react/components/sidebar-nav.d.ts +77 -0
  123. package/dist/react/components/sidebar-nav.js +41 -0
  124. package/dist/react/components/skeleton-and-empty.d.ts +51 -0
  125. package/dist/react/components/skeleton-and-empty.js +14 -0
  126. package/dist/react/components/slider.d.ts +19 -0
  127. package/dist/react/components/slider.js +17 -0
  128. package/dist/react/components/small-charts.d.ts +60 -0
  129. package/dist/react/components/small-charts.js +76 -0
  130. package/dist/react/components/sortable.d.ts +30 -0
  131. package/dist/react/components/sortable.js +85 -0
  132. package/dist/react/components/split-button.d.ts +38 -0
  133. package/dist/react/components/split-button.js +43 -0
  134. package/dist/react/components/split-panes.d.ts +35 -0
  135. package/dist/react/components/split-panes.js +102 -0
  136. package/dist/react/components/stat-tiles.d.ts +54 -0
  137. package/dist/react/components/stat-tiles.js +8 -0
  138. package/dist/react/components/steps.d.ts +11 -0
  139. package/dist/react/components/steps.js +13 -0
  140. package/dist/react/components/switch.d.ts +6 -0
  141. package/dist/react/components/switch.js +13 -0
  142. package/dist/react/components/table.d.ts +61 -0
  143. package/dist/react/components/table.js +6 -0
  144. package/dist/react/components/tabs.d.ts +7 -0
  145. package/dist/react/components/tabs.js +13 -0
  146. package/dist/react/components/tags.d.ts +33 -0
  147. package/dist/react/components/tags.js +83 -0
  148. package/dist/react/components/textarea.d.ts +10 -0
  149. package/dist/react/components/textarea.js +6 -0
  150. package/dist/react/components/toast.d.ts +35 -0
  151. package/dist/react/components/toast.js +90 -0
  152. package/dist/react/components/tooltip-and-key.d.ts +20 -0
  153. package/dist/react/components/tooltip-and-key.js +20 -0
  154. package/dist/react/components/tree-view.d.ts +34 -0
  155. package/dist/react/components/tree-view.js +118 -0
  156. package/dist/react/components/upload-dropzone.d.ts +92 -0
  157. package/dist/react/components/upload-dropzone.js +116 -0
  158. package/dist/react/components/wizard-shell.d.ts +78 -0
  159. package/dist/react/components/wizard-shell.js +176 -0
  160. package/dist/react/fonts.css.d.ts +1 -0
  161. package/dist/react/index.d.ts +76 -0
  162. package/dist/react/index.js +77 -0
  163. package/dist/react/integrations/quickcrop.d.ts +58 -0
  164. package/dist/react/integrations/quickcrop.js +137 -0
  165. package/dist/react/integrations/richclay.d.ts +43 -0
  166. package/dist/react/integrations/richclay.js +129 -0
  167. package/dist/react/internal/classes.d.ts +3 -0
  168. package/dist/react/internal/classes.js +10 -0
  169. package/dist/react/internal/close-mark.d.ts +1 -0
  170. package/dist/react/internal/close-mark.js +10 -0
  171. package/dist/react/internal/controllable-state.d.ts +9 -0
  172. package/dist/react/internal/controllable-state.js +22 -0
  173. package/dist/react/internal/drop-effect.d.ts +28 -0
  174. package/dist/react/internal/drop-effect.js +8 -0
  175. package/dist/react/internal/form-reset.d.ts +2 -0
  176. package/dist/react/internal/form-reset.js +22 -0
  177. package/dist/react/internal/format.d.ts +1 -0
  178. package/dist/react/internal/format.js +14 -0
  179. package/dist/react/internal/link.d.ts +2 -0
  180. package/dist/react/internal/link.js +8 -0
  181. package/dist/react/internal/part.d.ts +20 -0
  182. package/dist/react/internal/part.js +47 -0
  183. package/dist/react/internal/pointer-session.d.ts +8 -0
  184. package/dist/react/internal/pointer-session.js +60 -0
  185. package/dist/react/internal/refs.d.ts +2 -0
  186. package/dist/react/internal/refs.js +22 -0
  187. package/dist/react/internal/rich-text.d.ts +28 -0
  188. package/dist/react/internal/rich-text.js +4 -0
  189. package/dist/react/internal/table-context.d.ts +39 -0
  190. package/dist/react/internal/table-context.js +12 -0
  191. package/dist/react/internal/use-object-url.d.ts +1 -0
  192. package/dist/react/internal/use-object-url.js +15 -0
  193. package/dist/react/layout.css +274 -0
  194. package/dist/react/layout.css.d.ts +1 -0
  195. package/dist/react/models/filter.d.ts +31 -0
  196. package/dist/react/models/filter.js +79 -0
  197. package/dist/react/models/kanban.d.ts +51 -0
  198. package/dist/react/models/kanban.js +35 -0
  199. package/dist/react/models/reorder.d.ts +9 -0
  200. package/dist/react/models/reorder.js +23 -0
  201. package/dist/react/models/table.d.ts +85 -0
  202. package/dist/react/models/table.js +144 -0
  203. package/dist/react/models/tree.d.ts +16 -0
  204. package/dist/react/models/tree.js +26 -0
  205. package/dist/react/provider.d.ts +18 -0
  206. package/dist/react/provider.js +31 -0
  207. package/dist/react/recipes/context-hypercms.d.ts +17 -0
  208. package/dist/react/recipes/context-hypercms.js +71 -0
  209. package/dist/react/recipes/context-quickcrop.d.ts +8 -0
  210. package/dist/react/recipes/context-quickcrop.js +49 -0
  211. package/dist/react/theme.css +8004 -0
  212. package/dist/react/theme.css.d.ts +1 -0
  213. package/examples/README.md +34 -0
  214. package/examples/components/activity-feed.html +28 -0
  215. package/examples/components/app-shell.html +12 -0
  216. package/examples/components/app-toolbar.html +38 -0
  217. package/examples/components/avatar-group.html +27 -0
  218. package/examples/components/breadcrumbs.html +26 -0
  219. package/examples/components/bulk-bar.html +22 -0
  220. package/examples/components/code-block.html +12 -0
  221. package/examples/components/code-editor.html +25 -0
  222. package/examples/components/column-manager.html +9 -0
  223. package/examples/components/combobox.html +13 -0
  224. package/examples/components/context-hypercms.css +41 -0
  225. package/examples/components/context-hypercms.html +40 -0
  226. package/examples/components/context-hypercms.js +62 -0
  227. package/examples/components/context-quickcrop.html +137 -0
  228. package/examples/components/diff-view.html +9 -0
  229. package/examples/components/drawer.html +11 -0
  230. package/examples/components/editable-grid-cells.html +9 -0
  231. package/examples/components/file-browser.html +53 -0
  232. package/examples/components/file-tree.html +34 -0
  233. package/examples/components/files-table.html +80 -0
  234. package/examples/components/filter-builder.html +11 -0
  235. package/examples/components/form-error-summary.html +11 -0
  236. package/examples/components/index.html +51 -0
  237. package/examples/components/inline-edit.html +42 -0
  238. package/examples/components/kanban-board.html +42 -0
  239. package/examples/components/manifest.json +3279 -0
  240. package/examples/components/modal.html +11 -0
  241. package/examples/components/multi-select-picker.html +13 -0
  242. package/examples/components/pagination.html +32 -0
  243. package/examples/components/persistent-action-banner.html +23 -0
  244. package/examples/components/popconfirm.html +13 -0
  245. package/examples/components/popover-menu.html +13 -0
  246. package/examples/components/reference/baseline/DECISIONS.md +85 -0
  247. package/examples/components/reference/baseline/README.md +58 -0
  248. package/examples/components/reference/baseline/bevel-fonts.css +16 -0
  249. package/examples/components/reference/baseline/bevel.css +1339 -0
  250. package/examples/components/reference/baseline/bevel.js +496 -0
  251. package/examples/components/reference/baseline/fonts/LICENSE-ibm-plex-mono.txt +93 -0
  252. package/examples/components/reference/baseline/fonts/LICENSE-ibm-plex-sans.txt +93 -0
  253. package/examples/components/reference/baseline/fonts/LICENSE-newsreader.txt +93 -0
  254. package/examples/components/reference/baseline/fonts/ibm-plex-mono-latin-400-normal.woff2 +0 -0
  255. package/examples/components/reference/baseline/fonts/ibm-plex-mono-latin-500-normal.woff2 +0 -0
  256. package/examples/components/reference/baseline/fonts/ibm-plex-mono-latin-600-normal.woff2 +0 -0
  257. package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-400-italic.woff2 +0 -0
  258. package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-400-normal.woff2 +0 -0
  259. package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-500-normal.woff2 +0 -0
  260. package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-600-normal.woff2 +0 -0
  261. package/examples/components/reference/baseline/fonts/newsreader-latin-opsz-italic.woff2 +0 -0
  262. package/examples/components/reference/baseline/fonts/newsreader-latin-opsz-normal.woff2 +0 -0
  263. package/examples/components/reference/fable/IMPROVEMENTS.md +106 -0
  264. package/examples/components/reference/fable/PARENT-REPAIRS.md +17 -0
  265. package/examples/components/reference/fable/__pycache__/build_repairs.cpython-311.pyc +0 -0
  266. package/examples/components/reference/fable/__pycache__/kanban.cpython-311.pyc +0 -0
  267. package/examples/components/reference/fable/as-authored/IMPROVEMENTS-completed.md +106 -0
  268. package/examples/components/reference/fable/as-authored/base-astra.css +17 -0
  269. package/examples/components/reference/fable/as-authored/base-parent.css +416 -0
  270. package/examples/components/reference/fable/as-authored/build.py +858 -0
  271. package/examples/components/reference/fable/as-authored/fable.css +823 -0
  272. package/examples/components/reference/fable/as-authored/kanban-completed.css +235 -0
  273. package/examples/components/reference/fable/as-authored/kanban-completed.html +53 -0
  274. package/examples/components/reference/fable/as-authored/kanban-completed.py +212 -0
  275. package/examples/components/reference/fable/as-authored/kanban.py +207 -0
  276. package/examples/components/reference/fable/base-astra.css +17 -0
  277. package/examples/components/reference/fable/base-parent.css +416 -0
  278. package/examples/components/reference/fable/build.py +858 -0
  279. package/examples/components/reference/fable/build_repairs.py +25 -0
  280. package/examples/components/reference/fable/components/activity-feed.html +3 -0
  281. package/examples/components/reference/fable/components/app-toolbar.html +3 -0
  282. package/examples/components/reference/fable/components/avatar-group.html +4 -0
  283. package/examples/components/reference/fable/components/breadcrumbs.html +3 -0
  284. package/examples/components/reference/fable/components/code-block.html +9 -0
  285. package/examples/components/reference/fable/components/column-manager.html +3 -0
  286. package/examples/components/reference/fable/components/combobox.html +6 -0
  287. package/examples/components/reference/fable/components/context-hypercms.html +3 -0
  288. package/examples/components/reference/fable/components/context-quickcrop.html +4 -0
  289. package/examples/components/reference/fable/components/diff-view.html +13 -0
  290. package/examples/components/reference/fable/components/drawer.html +3 -0
  291. package/examples/components/reference/fable/components/editable-grid-cells.html +3 -0
  292. package/examples/components/reference/fable/components/filter-builder.html +3 -0
  293. package/examples/components/reference/fable/components/form-error-summary.html +4 -0
  294. package/examples/components/reference/fable/components/inline-edit.html +3 -0
  295. package/examples/components/reference/fable/components/kanban-board.html +53 -0
  296. package/examples/components/reference/fable/components/modal.html +3 -0
  297. package/examples/components/reference/fable/components/multi-select-picker.html +5 -0
  298. package/examples/components/reference/fable/components/pagination.html +3 -0
  299. package/examples/components/reference/fable/components/persistent-action-banner.html +4 -0
  300. package/examples/components/reference/fable/components/popconfirm.html +5 -0
  301. package/examples/components/reference/fable/components/popover-menu.html +3 -0
  302. package/examples/components/reference/fable/components/rich-text-toolbar.html +3 -0
  303. package/examples/components/reference/fable/components/save-status-indicator.html +2 -0
  304. package/examples/components/reference/fable/components/selectable-cards.html +3 -0
  305. package/examples/components/reference/fable/components/settings-rows.html +3 -0
  306. package/examples/components/reference/fable/components/sidebar-nav.html +4 -0
  307. package/examples/components/reference/fable/components/small-charts.html +5 -0
  308. package/examples/components/reference/fable/components/split-button.html +4 -0
  309. package/examples/components/reference/fable/components/split-panes.html +8 -0
  310. package/examples/components/reference/fable/components/stat-tiles.html +3 -0
  311. package/examples/components/reference/fable/components/toast-stack.html +5 -0
  312. package/examples/components/reference/fable/components/tree-view.html +4 -0
  313. package/examples/components/reference/fable/components/upload-dropzone.html +6 -0
  314. package/examples/components/reference/fable/components/wizard-shell.html +3 -0
  315. package/examples/components/reference/fable/coverage.json +414 -0
  316. package/examples/components/reference/fable/fable.css +823 -0
  317. package/examples/components/reference/fable/index.html +5 -0
  318. package/examples/components/reference/fable/kanban.css +237 -0
  319. package/examples/components/reference/fable/kanban.py +212 -0
  320. package/examples/components/reference/fable/parent-repairs.css +9 -0
  321. package/examples/components/reference/fixtures/data.json +102 -0
  322. package/examples/components/reference/fixtures/host.js +47 -0
  323. package/examples/components/reference/fixtures/static-host.js +39 -0
  324. package/examples/components/reference/fixtures/workspace.jpg +0 -0
  325. package/examples/components/reference/parent/CHANGES.md +179 -0
  326. package/examples/components/reference/parent/__pycache__/kanban.cpython-311.pyc +0 -0
  327. package/examples/components/reference/parent/base-astra.css +17 -0
  328. package/examples/components/reference/parent/base-parent.css +416 -0
  329. package/examples/components/reference/parent/build.py +148 -0
  330. package/examples/components/reference/parent/components/activity-feed.html +2 -0
  331. package/examples/components/reference/parent/components/app-toolbar.html +2 -0
  332. package/examples/components/reference/parent/components/avatar-group.html +4 -0
  333. package/examples/components/reference/parent/components/breadcrumbs.html +2 -0
  334. package/examples/components/reference/parent/components/code-block.html +8 -0
  335. package/examples/components/reference/parent/components/column-manager.html +2 -0
  336. package/examples/components/reference/parent/components/combobox.html +6 -0
  337. package/examples/components/reference/parent/components/context-hypercms.html +2 -0
  338. package/examples/components/reference/parent/components/context-quickcrop.html +4 -0
  339. package/examples/components/reference/parent/components/diff-view.html +4 -0
  340. package/examples/components/reference/parent/components/drawer.html +2 -0
  341. package/examples/components/reference/parent/components/editable-grid-cells.html +2 -0
  342. package/examples/components/reference/parent/components/filter-builder.html +2 -0
  343. package/examples/components/reference/parent/components/form-error-summary.html +2 -0
  344. package/examples/components/reference/parent/components/inline-edit.html +2 -0
  345. package/examples/components/reference/parent/components/kanban-board.html +84 -0
  346. package/examples/components/reference/parent/components/modal.html +2 -0
  347. package/examples/components/reference/parent/components/multi-select-picker.html +5 -0
  348. package/examples/components/reference/parent/components/pagination.html +2 -0
  349. package/examples/components/reference/parent/components/persistent-action-banner.html +4 -0
  350. package/examples/components/reference/parent/components/popconfirm.html +5 -0
  351. package/examples/components/reference/parent/components/popover-menu.html +2 -0
  352. package/examples/components/reference/parent/components/rich-text-toolbar.html +2 -0
  353. package/examples/components/reference/parent/components/save-status-indicator.html +2 -0
  354. package/examples/components/reference/parent/components/selectable-cards.html +2 -0
  355. package/examples/components/reference/parent/components/settings-rows.html +2 -0
  356. package/examples/components/reference/parent/components/sidebar-nav.html +4 -0
  357. package/examples/components/reference/parent/components/small-charts.html +2 -0
  358. package/examples/components/reference/parent/components/split-button.html +5 -0
  359. package/examples/components/reference/parent/components/split-panes.html +8 -0
  360. package/examples/components/reference/parent/components/stat-tiles.html +2 -0
  361. package/examples/components/reference/parent/components/toast-stack.html +5 -0
  362. package/examples/components/reference/parent/components/tree-view.html +4 -0
  363. package/examples/components/reference/parent/components/upload-dropzone.html +6 -0
  364. package/examples/components/reference/parent/components/wizard-shell.html +2 -0
  365. package/examples/components/reference/parent/coverage.json +414 -0
  366. package/examples/components/reference/parent/index.html +1 -0
  367. package/examples/components/reference/parent/kanban.css +114 -0
  368. package/examples/components/reference/parent/kanban.py +55 -0
  369. package/examples/components/reference/parent/refinement.css +53 -0
  370. package/examples/components/reference/selected/build.py +70 -0
  371. package/examples/components/reference/selected/components/activity-feed.html +3 -0
  372. package/examples/components/reference/selected/components/app-toolbar.html +3 -0
  373. package/examples/components/reference/selected/components/avatar-group.html +4 -0
  374. package/examples/components/reference/selected/components/breadcrumbs.html +3 -0
  375. package/examples/components/reference/selected/components/code-block.html +9 -0
  376. package/examples/components/reference/selected/components/column-manager.html +3 -0
  377. package/examples/components/reference/selected/components/combobox.html +6 -0
  378. package/examples/components/reference/selected/components/context-hypercms.html +3 -0
  379. package/examples/components/reference/selected/components/context-quickcrop.html +4 -0
  380. package/examples/components/reference/selected/components/diff-view.html +13 -0
  381. package/examples/components/reference/selected/components/drawer.html +3 -0
  382. package/examples/components/reference/selected/components/editable-grid-cells.html +3 -0
  383. package/examples/components/reference/selected/components/filter-builder.html +3 -0
  384. package/examples/components/reference/selected/components/form-error-summary.html +4 -0
  385. package/examples/components/reference/selected/components/inline-edit.html +3 -0
  386. package/examples/components/reference/selected/components/kanban-board.html +53 -0
  387. package/examples/components/reference/selected/components/modal.html +2 -0
  388. package/examples/components/reference/selected/components/multi-select-picker.html +5 -0
  389. package/examples/components/reference/selected/components/pagination.html +3 -0
  390. package/examples/components/reference/selected/components/persistent-action-banner.html +4 -0
  391. package/examples/components/reference/selected/components/popconfirm.html +5 -0
  392. package/examples/components/reference/selected/components/popover-menu.html +3 -0
  393. package/examples/components/reference/selected/components/rich-text-toolbar.html +3 -0
  394. package/examples/components/reference/selected/components/save-status-indicator.html +2 -0
  395. package/examples/components/reference/selected/components/selectable-cards.html +3 -0
  396. package/examples/components/reference/selected/components/settings-rows.html +3 -0
  397. package/examples/components/reference/selected/components/sidebar-nav.html +4 -0
  398. package/examples/components/reference/selected/components/small-charts.html +5 -0
  399. package/examples/components/reference/selected/components/split-button.html +4 -0
  400. package/examples/components/reference/selected/components/split-panes.html +8 -0
  401. package/examples/components/reference/selected/components/stat-tiles.html +3 -0
  402. package/examples/components/reference/selected/components/toast-stack.html +5 -0
  403. package/examples/components/reference/selected/components/tree-view.html +4 -0
  404. package/examples/components/reference/selected/components/upload-dropzone.html +6 -0
  405. package/examples/components/reference/selected/components/wizard-shell.html +3 -0
  406. package/examples/components/reference/selected/corrections.css +11 -0
  407. package/examples/components/reference/selected/coverage.json +413 -0
  408. package/examples/components/reference/selected/gallery-build.mjs +49 -0
  409. package/examples/components/reference/selected/gallery-spec.json +12 -0
  410. package/examples/components/reference/selected/index.html +1 -0
  411. package/examples/components/reference/selected/kanban-comparison.json +6 -0
  412. package/examples/components/reference/selected/manifest.json +476 -0
  413. package/examples/components/reference/sha256.json +142 -0
  414. package/examples/components/reference/sources/diagonal-close.svg +1 -0
  415. package/examples/components/reference/sources/hyperclay/public-assets/css/hyperclay-app-source.css +614 -0
  416. package/examples/components/reference/sources/hyperclay/public-assets/js/app.js +94 -0
  417. package/examples/components/reference/sources/hyperclayjs/src/ui/theModal.js +897 -0
  418. package/examples/components/reference/sources/hypercms/scripts/build-theme.js +203 -0
  419. package/examples/components/reference/sources/hypercms/src/anchor.js +24 -0
  420. package/examples/components/reference/sources/hypercms/src/apply-loop.js +167 -0
  421. package/examples/components/reference/sources/hypercms/src/diagnostics.js +44 -0
  422. package/examples/components/reference/sources/hypercms/src/enhance.js +173 -0
  423. package/examples/components/reference/sources/hypercms/src/events.js +955 -0
  424. package/examples/components/reference/sources/hypercms/src/form-builder.js +518 -0
  425. package/examples/components/reference/sources/hypercms/src/form-rules.js +208 -0
  426. package/examples/components/reference/sources/hypercms/src/hooks.js +100 -0
  427. package/examples/components/reference/sources/hypercms/src/hypercms-bundle.js +10 -0
  428. package/examples/components/reference/sources/hypercms/src/hypercms.js +347 -0
  429. package/examples/components/reference/sources/hypercms/src/morph.js +10 -0
  430. package/examples/components/reference/sources/hypercms/src/path.js +61 -0
  431. package/examples/components/reference/sources/hypercms/src/place.js +131 -0
  432. package/examples/components/reference/sources/hypercms/src/platform.js +131 -0
  433. package/examples/components/reference/sources/hypercms/src/refresh.js +87 -0
  434. package/examples/components/reference/sources/hypercms/src/richclay-bridge.js +140 -0
  435. package/examples/components/reference/sources/hypercms/src/row-identity.js +111 -0
  436. package/examples/components/reference/sources/hypercms/src/scaffold.js +10 -0
  437. package/examples/components/reference/sources/hypercms/src/session.js +303 -0
  438. package/examples/components/reference/sources/hypercms/src/shell.js +248 -0
  439. package/examples/components/reference/sources/hypercms/src/styles.css +298 -0
  440. package/examples/components/reference/sources/hypercms/src/targets.js +144 -0
  441. package/examples/components/reference/sources/hypercms/src/templates.js +656 -0
  442. package/examples/components/reference/sources/hypercms/src/theme/pixel-quiet.overrides.css +761 -0
  443. package/examples/components/reference/sources/hypercms/src/theme.generated.css +1772 -0
  444. package/examples/components/reference/sources/hypercms/src/toggle.js +666 -0
  445. package/examples/components/reference/sources/hypercms/src/unresolved.js +211 -0
  446. package/examples/components/reference/sources/hypercms/src/vendor/mirk.vendor.js +212 -0
  447. package/examples/components/reference/sources/hypercms/src/views/inline-layer.js +421 -0
  448. package/examples/components/reference/sources/hypercms/src/views/inline.js +1072 -0
  449. package/examples/components/reference/sources/hypercms/src/views/sidebar.js +97 -0
  450. package/examples/components/reference/sources/modal-reference.html +301 -0
  451. package/examples/components/reference/sources/quickcrop/quickcrop.css +124 -0
  452. package/examples/components/reference/sources/quickcrop/quickcrop.js +400 -0
  453. package/examples/components/reference/sources/richclay/richclay.css +416 -0
  454. package/examples/components/reference/sources/richclay/richclay.js +2962 -0
  455. package/examples/components/reference/sources/richclay/src/a11y.js +67 -0
  456. package/examples/components/reference/sources/richclay/src/browser-global.js +7 -0
  457. package/examples/components/reference/sources/richclay/src/buttons.js +254 -0
  458. package/examples/components/reference/sources/richclay/src/hyperclay.js +470 -0
  459. package/examples/components/reference/sources/richclay/src/normalize.js +380 -0
  460. package/examples/components/reference/sources/richclay/src/richclay.js +1356 -0
  461. package/examples/components/reference/sources/richclay/src/sanitize.js +189 -0
  462. package/examples/components/reference/sources/richclay/src/styles.js +23 -0
  463. package/examples/components/reference/sources/richclay/src/toolbar-float.js +175 -0
  464. package/examples/components/reference/sources/richclay/src/toolbar.js +394 -0
  465. package/examples/components/reference/sources/richclay/src/vendor-bundle.js +15 -0
  466. package/examples/components/reference/sources/richclay/vendor/DOMPURIFY-LICENSE +202 -0
  467. package/examples/components/reference/sources/richclay/vendor/DOMPURIFY-LICENSE-MPL +373 -0
  468. package/examples/components/reference/sources/richclay/vendor/SQUIRE-LICENSE +21 -0
  469. package/examples/components/reference/sources/richclay/vendor/purify.es.mjs +2249 -0
  470. package/examples/components/reference/sources/richclay/vendor/purify.min.js +3 -0
  471. package/examples/components/reference/sources/richclay/vendor/squire.js +22 -0
  472. package/examples/components/reference/sources/richclay/vendor/squire.mjs +22 -0
  473. package/examples/components/reference/sources/richclay/vendor/squire.provenance.json +19 -0
  474. package/examples/components/rich-text-toolbar.html +43 -0
  475. package/examples/components/save-status-indicator.html +11 -0
  476. package/examples/components/selectable-cards.html +9 -0
  477. package/examples/components/settings-rows.html +10 -0
  478. package/examples/components/sidebar-nav.html +9 -0
  479. package/examples/components/small-charts.html +21 -0
  480. package/examples/components/split-button.html +13 -0
  481. package/examples/components/split-panes-editor.html +6 -0
  482. package/examples/components/split-panes.html +9 -0
  483. package/examples/components/stat-tiles.html +23 -0
  484. package/examples/components/toast-stack.html +21 -0
  485. package/examples/components/tree-view.html +9 -0
  486. package/examples/components/upload-dropzone.html +88 -0
  487. package/examples/components/wizard-shell.html +50 -0
  488. package/examples/datastar/index.html +38 -0
  489. package/examples/datastar/server.mjs +31 -0
  490. package/examples/fixtures/field-guide.pdf +14 -0
  491. package/examples/fixtures/workspace.jpg +0 -0
  492. package/examples/setup-peers.mjs +35 -0
  493. package/fonts/LICENSE-ibm-plex-mono.txt +93 -0
  494. package/fonts/LICENSE-ibm-plex-sans.txt +93 -0
  495. package/fonts/LICENSE-newsreader.txt +93 -0
  496. package/fonts/ibm-plex-mono-latin-400-normal.woff2 +0 -0
  497. package/fonts/ibm-plex-mono-latin-500-normal.woff2 +0 -0
  498. package/fonts/ibm-plex-mono-latin-600-normal.woff2 +0 -0
  499. package/fonts/ibm-plex-sans-latin-400-italic.woff2 +0 -0
  500. package/fonts/ibm-plex-sans-latin-400-normal.woff2 +0 -0
  501. package/fonts/ibm-plex-sans-latin-500-normal.woff2 +0 -0
  502. package/fonts/ibm-plex-sans-latin-600-normal.woff2 +0 -0
  503. package/fonts/newsreader-latin-opsz-italic.woff2 +0 -0
  504. package/fonts/newsreader-latin-opsz-normal.woff2 +0 -0
  505. package/icons/LICENSE +21 -0
  506. package/icons/house.json +71 -0
  507. package/icons/icons.d.ts +17 -0
  508. package/icons/icons.js +648 -0
  509. package/icons/icons.svg +126 -0
  510. package/icons/marks/build-tray.source.mjs +45 -0
  511. package/icons/marks/hyperclay-local.svg +11 -0
  512. package/icons/phosphor.json +53 -0
  513. package/icons/round.json +8 -0
  514. package/integrations/datastar.js +202 -0
  515. package/integrations/quickcrop.css +26 -0
  516. package/integrations/quickcrop.js +56 -0
  517. package/integrations/richclay.css +100 -0
  518. package/integrations/richclay.js +131 -0
  519. package/package.json +630 -0
  520. package/react/README.md +244 -0
  521. package/src/README.md +83 -0
  522. package/vendor/datastar/datastar-1.0.3.js +10 -0
  523. package/vendor/datastar/provenance.json +6 -0
  524. package/vendor/floating-ui/LICENSE-core +20 -0
  525. package/vendor/floating-ui/LICENSE-dom +20 -0
  526. package/vendor/floating-ui/floating-ui.core.umd.min.js +1 -0
  527. package/vendor/floating-ui/floating-ui.dom.umd.min.js +1 -0
  528. package/vendor/floating-ui/provenance.json +17 -0
  529. package/vendor/richclay/LICENSE +16 -0
  530. package/vendor/richclay/THIRD-PARTY-NOTICES.md +45 -0
  531. package/vendor/richclay/provenance.json +17 -0
  532. package/vendor/richclay/richclay.css +404 -0
  533. package/vendor/richclay/richclay.js +2940 -0
  534. package/vendor/richclay/vendor/DOMPURIFY-LICENSE +202 -0
  535. package/vendor/richclay/vendor/DOMPURIFY-LICENSE-MPL +373 -0
  536. package/vendor/richclay/vendor/SQUIRE-LICENSE +21 -0
  537. package/vendor/richclay/vendor/purify.min.js +3 -0
  538. package/vendor/richclay/vendor/squire.js +22 -0
  539. package/vendor/richclay/vendor/squire.provenance.json +30 -0
package/examples/components/reference/parent/components/kanban-board.html ADDED
@@ -0,0 +1,84 @@
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 · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-parent.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/><link href="../kanban.css" rel="stylesheet"/></head><body data-component="kanban-board" data-reference-phase="static" data-selected-source="parent"><section data-ref-state="default" inert=""><main class="k-stage"><header class="k-masthead"><div><div class="k-eyebrow">NORTHSTAR STUDIO <span>/</span> PROJECT 004</div><h1>Field notes<span class="k-project-mark">↗</span></h1><p>A place for the ideas worth making.</p></div><div class="k-masthead-actions"><div class="k-team"><span class="k-members"><span aria-label="Mira Chen" class="k-avatar k-avatar-mc">MC</span><span aria-label="Alex Rivera" class="k-avatar k-avatar-ar">AR</span><span aria-label="Sam Patel" class="k-avatar k-avatar-sp">SP</span><span aria-label="Jules Park" class="k-avatar k-avatar-jp">JP</span></span><span>4 people</span></div><button class="k-button" 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="M12 5v14M5 12h14"></path></svg><span>New task</span></button></div></header><nav class="k-tabs"><span class="active"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Board <b>8</b></span><span><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M8 5h13M8 12h13M8 19h13M3 5h1M3 12h1M3 19h1"></path></svg>List</span><span><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Timeline</span><small>PRIVATE PROJECT <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></small></nav><div class="k-toolbar"><div class="k-search"><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="M20 20l-5-5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><span>Search this board</span><kbd>⌘ K</kbd></div><button class="k-button" 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="M4 6h16M7 12h10M10 18h4"></path></svg><span>Filters</span></button><span class="k-toolbar-spacer"></span><button class="k-button k-quiet" 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="m7 10 5 5 5-5"></path></svg><span>Status</span></button><button class="k-button k-quiet" 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="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg><span>This week</span></button></div><div class="k-overview"><span><b>8</b> tasks in this project</span><span><i class="k-overview-bar"><i style="width:25%"></i></i><b>2/8</b> complete</span><span class="k-overdue"><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 21V3h13l-3 4 3 4H5"></path></svg> 2 need attention</span><span class="k-id">SEP 08 – 12</span></div><div class="k-workspace"><div class="k-board"><section class="k-lane"><header><span class="k-lane-dot k-lane-dot-0"></span><h2>Up next</h2><span class="k-count">3</span><button aria-label="Add a task to Up next" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="k-lane-body"><article class="k-task" data-task="FN-101">
3
+ <div class="k-task-body"><div class="k-task-top"><span class="k-id">FN-101</span><span class="k-priority k-high"><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 21V3h13l-3 4 3 4H5"></path></svg> High</span><button aria-label="Task options" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div>
4
+ <h3>Turn research into a field guide</h3><p>A useful home for what we learned.</p><div class="k-tags"><span class="k-tag k-tag-editorial">Editorial</span></div>
5
+ <div class="k-check"><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> Checklist</span><b>2/5</b></div><div class="k-progress"><i style="width:40.0%"></i></div>
6
+ <div class="k-task-bottom"><span class="k-date"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"></path></svg>Sep 10</span><span class="k-members"><span aria-label="Sam Patel" class="k-avatar k-avatar-sp">SP</span></span></div>
7
+ <div class="k-task-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 class="k-task-note">Field notes</span></div></div></article><article class="k-task" data-task="FN-102">
8
+ <div class="k-cover"><img alt="A sunlit studio workspace" src="../../fixtures/workspace.jpg"/><span>VISUAL DIRECTION</span></div>
9
+ <div class="k-task-body"><div class="k-task-top"><span class="k-id">FN-102</span><span class="k-priority"><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 21V3h13l-3 4 3 4H5"></path></svg> Normal</span><button aria-label="Task options" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div>
10
+ <h3>Shape the cover story</h3><div class="k-tags"><span class="k-tag k-tag-design">Design</span></div>
11
+ <div class="k-task-bottom"><span class="k-date"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"></path></svg>Sep 11</span><span class="k-members"><span aria-label="Mira Chen" class="k-avatar k-avatar-mc">MC</span><span aria-label="Sam Patel" class="k-avatar k-avatar-sp">SP</span></span></div>
12
+ <div class="k-task-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 class="k-task-note">Field notes</span></div></div></article><article class="k-task" data-task="FN-103">
13
+ <div class="k-task-body"><div class="k-task-top"><span class="k-id">FN-103</span><span class="k-priority"><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 21V3h13l-3 4 3 4H5"></path></svg> Normal</span><button aria-label="Task options" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div>
14
+ <h3>Invite the next four collaborators</h3><div class="k-tags"><span class="k-tag k-tag-studio">Studio</span></div>
15
+ <div class="k-check"><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> Checklist</span><b>0/4</b></div><div class="k-progress"><i style="width:0.0%"></i></div>
16
+ <div class="k-task-bottom"><span class="k-date"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"></path></svg>Sep 12</span><span class="k-members"><span aria-label="Jules Park" class="k-avatar k-avatar-jp">JP</span></span></div>
17
+ <div class="k-task-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>0</span><span class="k-task-note">Field notes</span></div></div></article></div><button class="k-add"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M12 5v14M5 12h14"></path></svg> Add task</button></section><section class="k-lane"><header><span class="k-lane-dot k-lane-dot-1"></span><h2>In progress</h2><span class="k-count">3</span><small class="k-wip">WIP 3 / 3</small><button aria-label="Add a task to In progress" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="k-lane-body"><article class="k-task k-featured" data-task="FN-104">
18
+ <div class="k-task-body"><div class="k-task-top"><span class="k-id">FN-104</span><span class="k-priority k-urgent"><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 21V3h13l-3 4 3 4H5"></path></svg> Urgent</span><button aria-label="Task options" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div>
19
+ <h3>Make room for good work</h3><p>Finish the new project experience.</p><div class="k-tags"><span class="k-tag k-tag-design">Design</span><span class="k-tag k-tag-studio">Launch</span></div>
20
+ <div class="k-check"><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> Checklist</span><b>3/4</b></div><div class="k-progress"><i style="width:75.0%"></i></div>
21
+ <div class="k-task-bottom"><span class="k-date"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"></path></svg>Today</span><span class="k-members"><span aria-label="Mira Chen" class="k-avatar k-avatar-mc">MC</span><span aria-label="Alex Rivera" class="k-avatar k-avatar-ar">AR</span></span></div>
22
+ <div class="k-task-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 class="k-task-note">Final review</span></div></div></article><article class="k-task" data-task="FN-105">
23
+ <div class="k-task-body"><div class="k-task-top"><span class="k-id">FN-105</span><span class="k-priority k-high"><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 21V3h13l-3 4 3 4H5"></path></svg> High</span><button aria-label="Task options" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div>
24
+ <h3>Polish the document export</h3><div class="k-tags"><span class="k-tag k-tag-engineering">Engineering</span></div>
25
+ <div class="k-blocked"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg> Waiting on font licensing</div>
26
+ <div class="k-check"><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> Checklist</span><b>1/3</b></div><div class="k-progress"><i style="width:33.33333333333333%"></i></div>
27
+ <div class="k-task-bottom"><span class="k-date k-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="M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"></path></svg>Sep 07</span><span class="k-members"><span aria-label="Alex Rivera" class="k-avatar k-avatar-ar">AR</span></span></div>
28
+ <div class="k-task-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 class="k-task-note">Field notes</span></div></div></article><article class="k-task" data-task="FN-106">
29
+ <div class="k-task-body"><div class="k-task-top"><span class="k-id">FN-106</span><span class="k-priority"><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 21V3h13l-3 4 3 4H5"></path></svg> Normal</span><button aria-label="Task options" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div>
30
+ <h3>Give every empty state a voice</h3><div class="k-tags"><span class="k-tag k-tag-editorial">Editorial</span></div>
31
+ <div class="k-check"><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> Checklist</span><b>2/3</b></div><div class="k-progress"><i style="width:66.66666666666666%"></i></div>
32
+ <div class="k-task-bottom"><span class="k-date"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"></path></svg>Sep 09</span><span class="k-members"><span aria-label="Sam Patel" class="k-avatar k-avatar-sp">SP</span></span></div>
33
+ <div class="k-task-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 class="k-task-note">Field notes</span></div></div></article></div><button class="k-add"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M12 5v14M5 12h14"></path></svg> Add task</button></section><section class="k-lane"><header><span class="k-lane-dot k-lane-dot-2"></span><h2>Ready</h2><span class="k-count">2</span><button aria-label="Add a task to Ready" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="k-lane-body"><article class="k-task k-done" data-task="FN-107">
34
+ <div class="k-task-body"><div class="k-task-top"><span class="k-id">FN-107</span><span class="k-priority"><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 21V3h13l-3 4 3 4H5"></path></svg> Normal</span><button aria-label="Task options" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div>
35
+ <h3>A calmer workspace navigation</h3><div class="k-tags"><span class="k-tag k-tag-design">Design</span></div>
36
+ <div class="k-check"><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> Checklist</span><b>4/4</b></div><div class="k-progress"><i style="width:100.0%"></i></div>
37
+ <div class="k-task-bottom"><span class="k-date"><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>Done today</span><span class="k-members"><span aria-label="Mira Chen" class="k-avatar k-avatar-mc">MC</span></span></div>
38
+ <div class="k-task-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 class="k-task-note">Complete</span></div></div></article><article class="k-task k-done" data-task="FN-108">
39
+ <div class="k-task-body"><div class="k-task-top"><span class="k-id">FN-108</span><span class="k-priority"><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 21V3h13l-3 4 3 4H5"></path></svg> Normal</span><button aria-label="Task options" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div>
40
+ <h3>Write the first welcome</h3><div class="k-tags"><span class="k-tag k-tag-editorial">Editorial</span></div>
41
+ <div class="k-check"><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> Checklist</span><b>3/3</b></div><div class="k-progress"><i style="width:100.0%"></i></div>
42
+ <div class="k-task-bottom"><span class="k-date"><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>Done yesterday</span><span class="k-members"><span aria-label="Sam Patel" class="k-avatar k-avatar-sp">SP</span><span aria-label="Jules Park" class="k-avatar k-avatar-jp">JP</span></span></div>
43
+ <div class="k-task-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 class="k-task-note">Complete</span></div></div></article></div><button class="k-add"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M12 5v14M5 12h14"></path></svg> Add task</button></section></div></div><footer class="k-board-footer"><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 <span>·</span> Ordered by priority</span><span>8 tasks <span>·</span> 4 collaborators</span></footer></main></section><section data-ref-state="empty" hidden="" inert=""><main class="k-stage"><header class="k-masthead"><div><div class="k-eyebrow">NORTHSTAR STUDIO <span>/</span> PROJECT 004</div><h1>Field notes<span class="k-project-mark">↗</span></h1><p>A place for the ideas worth making.</p></div><div class="k-masthead-actions"><div class="k-team"><span class="k-members"><span aria-label="Mira Chen" class="k-avatar k-avatar-mc">MC</span><span aria-label="Alex Rivera" class="k-avatar k-avatar-ar">AR</span><span aria-label="Sam Patel" class="k-avatar k-avatar-sp">SP</span><span aria-label="Jules Park" class="k-avatar k-avatar-jp">JP</span></span><span>4 people</span></div><button class="k-button" 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="M12 5v14M5 12h14"></path></svg><span>New task</span></button></div></header><nav class="k-tabs"><span class="active"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Board <b>0</b></span><span><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M8 5h13M8 12h13M8 19h13M3 5h1M3 12h1M3 19h1"></path></svg>List</span><span><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Timeline</span><small>PRIVATE PROJECT <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></small></nav><div class="k-toolbar"><div class="k-search"><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="M20 20l-5-5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><span>Search this board</span><kbd>⌘ K</kbd></div><button class="k-button" 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="M4 6h16M7 12h10M10 18h4"></path></svg><span>Filters</span></button><span class="k-toolbar-spacer"></span><button class="k-button k-quiet" 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="m7 10 5 5 5-5"></path></svg><span>Status</span></button><button class="k-button k-quiet" 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="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg><span>This week</span></button></div><div class="k-overview"><span><b>0</b> tasks in this project</span><span><i class="k-overview-bar"><i style="width:0%"></i></i><b>0/0</b> complete</span><span class="k-overdue"><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 21V3h13l-3 4 3 4H5"></path></svg> 0 need attention</span><span class="k-id">SEP 08 – 12</span></div><div class="k-workspace"><div class="k-board"><section class="k-lane"><header><span class="k-lane-dot k-lane-dot-0"></span><h2>Up next</h2><span class="k-count">0</span><button aria-label="Add a task to Up next" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="k-lane-body"><div class="k-empty"><svg aria-hidden="true" fill="none" height="30" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="30"><path d="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg><h3>The next good idea starts here.</h3><p>Add a task, assign an owner and give it a place to go.</p></div></div><button class="k-add"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M12 5v14M5 12h14"></path></svg> Add task</button></section><section class="k-lane"><header><span class="k-lane-dot k-lane-dot-1"></span><h2>In progress</h2><span class="k-count">0</span><button aria-label="Add a task to In progress" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="k-lane-body"><div class="k-empty"><svg aria-hidden="true" fill="none" height="30" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="30"><path d="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg><h3>Room to focus.</h3><p>Move a task here when you are ready to begin.</p></div></div><button class="k-add"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M12 5v14M5 12h14"></path></svg> Add task</button></section><section class="k-lane"><header><span class="k-lane-dot k-lane-dot-2"></span><h2>Ready</h2><span class="k-count">0</span><button aria-label="Add a task to Ready" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="k-lane-body"><div class="k-empty"><svg aria-hidden="true" fill="none" height="30" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="30"><path d="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg><h3>A place for finished work.</h3><p>Completed work will collect here.</p></div></div><button class="k-add"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M12 5v14M5 12h14"></path></svg> Add task</button></section></div></div><footer class="k-board-footer"><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 <span>·</span> Ordered by priority</span><span>0 tasks <span>·</span> 4 collaborators</span></footer></main></section><section data-ref-state="selected" hidden="" inert=""><main class="k-stage"><header class="k-masthead"><div><div class="k-eyebrow">NORTHSTAR STUDIO <span>/</span> PROJECT 004</div><h1>Field notes<span class="k-project-mark">↗</span></h1><p>A place for the ideas worth making.</p></div><div class="k-masthead-actions"><div class="k-team"><span class="k-members"><span aria-label="Mira Chen" class="k-avatar k-avatar-mc">MC</span><span aria-label="Alex Rivera" class="k-avatar k-avatar-ar">AR</span><span aria-label="Sam Patel" class="k-avatar k-avatar-sp">SP</span><span aria-label="Jules Park" class="k-avatar k-avatar-jp">JP</span></span><span>4 people</span></div><button class="k-button" 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="M12 5v14M5 12h14"></path></svg><span>New task</span></button></div></header><nav class="k-tabs"><span class="active"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Board <b>8</b></span><span><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M8 5h13M8 12h13M8 19h13M3 5h1M3 12h1M3 19h1"></path></svg>List</span><span><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Timeline</span><small>PRIVATE PROJECT <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></small></nav><div class="k-toolbar"><div class="k-search"><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="M20 20l-5-5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><span>Search this board</span><kbd>⌘ K</kbd></div><button class="k-button" 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="M4 6h16M7 12h10M10 18h4"></path></svg><span>Filters</span></button><span class="k-toolbar-spacer"></span><button class="k-button k-quiet" 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="m7 10 5 5 5-5"></path></svg><span>Status</span></button><button class="k-button k-quiet" 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="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg><span>This week</span></button></div><div class="k-overview"><span><b>8</b> tasks in this project</span><span><i class="k-overview-bar"><i style="width:25%"></i></i><b>2/8</b> complete</span><span class="k-overdue"><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 21V3h13l-3 4 3 4H5"></path></svg> 2 need attention</span><span class="k-id">SEP 08 – 12</span></div><div class="k-workspace has-inspector"><div class="k-board"><section class="k-lane"><header><span class="k-lane-dot k-lane-dot-0"></span><h2>Up next</h2><span class="k-count">3</span><button aria-label="Add a task to Up next" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="k-lane-body"><article class="k-task" data-task="FN-101">
44
+ <div class="k-task-body"><div class="k-task-top"><span class="k-id">FN-101</span><span class="k-priority k-high"><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 21V3h13l-3 4 3 4H5"></path></svg> High</span><button aria-label="Task options" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div>
45
+ <h3>Turn research into a field guide</h3><p>A useful home for what we learned.</p><div class="k-tags"><span class="k-tag k-tag-editorial">Editorial</span></div>
46
+ <div class="k-check"><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> Checklist</span><b>2/5</b></div><div class="k-progress"><i style="width:40.0%"></i></div>
47
+ <div class="k-task-bottom"><span class="k-date"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"></path></svg>Sep 10</span><span class="k-members"><span aria-label="Sam Patel" class="k-avatar k-avatar-sp">SP</span></span></div>
48
+ <div class="k-task-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 class="k-task-note">Field notes</span></div></div></article><article class="k-task" data-task="FN-102">
49
+ <div class="k-cover"><img alt="A sunlit studio workspace" src="../../fixtures/workspace.jpg"/><span>VISUAL DIRECTION</span></div>
50
+ <div class="k-task-body"><div class="k-task-top"><span class="k-id">FN-102</span><span class="k-priority"><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 21V3h13l-3 4 3 4H5"></path></svg> Normal</span><button aria-label="Task options" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div>
51
+ <h3>Shape the cover story</h3><div class="k-tags"><span class="k-tag k-tag-design">Design</span></div>
52
+ <div class="k-task-bottom"><span class="k-date"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"></path></svg>Sep 11</span><span class="k-members"><span aria-label="Mira Chen" class="k-avatar k-avatar-mc">MC</span><span aria-label="Sam Patel" class="k-avatar k-avatar-sp">SP</span></span></div>
53
+ <div class="k-task-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 class="k-task-note">Field notes</span></div></div></article><article class="k-task" data-task="FN-103">
54
+ <div class="k-task-body"><div class="k-task-top"><span class="k-id">FN-103</span><span class="k-priority"><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 21V3h13l-3 4 3 4H5"></path></svg> Normal</span><button aria-label="Task options" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div>
55
+ <h3>Invite the next four collaborators</h3><div class="k-tags"><span class="k-tag k-tag-studio">Studio</span></div>
56
+ <div class="k-check"><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> Checklist</span><b>0/4</b></div><div class="k-progress"><i style="width:0.0%"></i></div>
57
+ <div class="k-task-bottom"><span class="k-date"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"></path></svg>Sep 12</span><span class="k-members"><span aria-label="Jules Park" class="k-avatar k-avatar-jp">JP</span></span></div>
58
+ <div class="k-task-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>0</span><span class="k-task-note">Field notes</span></div></div></article></div><button class="k-add"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M12 5v14M5 12h14"></path></svg> Add task</button></section><section class="k-lane"><header><span class="k-lane-dot k-lane-dot-1"></span><h2>In progress</h2><span class="k-count">3</span><small class="k-wip">WIP 3 / 3</small><button aria-label="Add a task to In progress" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="k-lane-body"><article class="k-task k-featured k-selected" data-task="FN-104">
59
+ <div class="k-task-body"><div class="k-task-top"><span class="k-id">FN-104</span><span class="k-priority k-urgent"><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 21V3h13l-3 4 3 4H5"></path></svg> Urgent</span><button aria-label="Task options" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div>
60
+ <h3>Make room for good work</h3><p>Finish the new project experience.</p><div class="k-tags"><span class="k-tag k-tag-design">Design</span><span class="k-tag k-tag-studio">Launch</span></div>
61
+ <div class="k-check"><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> Checklist</span><b>3/4</b></div><div class="k-progress"><i style="width:75.0%"></i></div>
62
+ <div class="k-task-bottom"><span class="k-date"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"></path></svg>Today</span><span class="k-members"><span aria-label="Mira Chen" class="k-avatar k-avatar-mc">MC</span><span aria-label="Alex Rivera" class="k-avatar k-avatar-ar">AR</span></span></div>
63
+ <div class="k-task-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 class="k-task-note">Final review</span></div></div></article><article class="k-task" data-task="FN-105">
64
+ <div class="k-task-body"><div class="k-task-top"><span class="k-id">FN-105</span><span class="k-priority k-high"><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 21V3h13l-3 4 3 4H5"></path></svg> High</span><button aria-label="Task options" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div>
65
+ <h3>Polish the document export</h3><div class="k-tags"><span class="k-tag k-tag-engineering">Engineering</span></div>
66
+ <div class="k-blocked"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg> Waiting on font licensing</div>
67
+ <div class="k-check"><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> Checklist</span><b>1/3</b></div><div class="k-progress"><i style="width:33.33333333333333%"></i></div>
68
+ <div class="k-task-bottom"><span class="k-date k-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="M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"></path></svg>Sep 07</span><span class="k-members"><span aria-label="Alex Rivera" class="k-avatar k-avatar-ar">AR</span></span></div>
69
+ <div class="k-task-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 class="k-task-note">Field notes</span></div></div></article><article class="k-task" data-task="FN-106">
70
+ <div class="k-task-body"><div class="k-task-top"><span class="k-id">FN-106</span><span class="k-priority"><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 21V3h13l-3 4 3 4H5"></path></svg> Normal</span><button aria-label="Task options" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div>
71
+ <h3>Give every empty state a voice</h3><div class="k-tags"><span class="k-tag k-tag-editorial">Editorial</span></div>
72
+ <div class="k-check"><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> Checklist</span><b>2/3</b></div><div class="k-progress"><i style="width:66.66666666666666%"></i></div>
73
+ <div class="k-task-bottom"><span class="k-date"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"></path></svg>Sep 09</span><span class="k-members"><span aria-label="Sam Patel" class="k-avatar k-avatar-sp">SP</span></span></div>
74
+ <div class="k-task-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 class="k-task-note">Field notes</span></div></div></article></div><button class="k-add"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M12 5v14M5 12h14"></path></svg> Add task</button></section><section class="k-lane"><header><span class="k-lane-dot k-lane-dot-2"></span><h2>Ready</h2><span class="k-count">2</span><button aria-label="Add a task to Ready" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="k-lane-body"><article class="k-task k-done" data-task="FN-107">
75
+ <div class="k-task-body"><div class="k-task-top"><span class="k-id">FN-107</span><span class="k-priority"><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 21V3h13l-3 4 3 4H5"></path></svg> Normal</span><button aria-label="Task options" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div>
76
+ <h3>A calmer workspace navigation</h3><div class="k-tags"><span class="k-tag k-tag-design">Design</span></div>
77
+ <div class="k-check"><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> Checklist</span><b>4/4</b></div><div class="k-progress"><i style="width:100.0%"></i></div>
78
+ <div class="k-task-bottom"><span class="k-date"><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>Done today</span><span class="k-members"><span aria-label="Mira Chen" class="k-avatar k-avatar-mc">MC</span></span></div>
79
+ <div class="k-task-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 class="k-task-note">Complete</span></div></div></article><article class="k-task k-done" data-task="FN-108">
80
+ <div class="k-task-body"><div class="k-task-top"><span class="k-id">FN-108</span><span class="k-priority"><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 21V3h13l-3 4 3 4H5"></path></svg> Normal</span><button aria-label="Task options" class="k-icon"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button></div>
81
+ <h3>Write the first welcome</h3><div class="k-tags"><span class="k-tag k-tag-editorial">Editorial</span></div>
82
+ <div class="k-check"><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> Checklist</span><b>3/3</b></div><div class="k-progress"><i style="width:100.0%"></i></div>
83
+ <div class="k-task-bottom"><span class="k-date"><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>Done yesterday</span><span class="k-members"><span aria-label="Sam Patel" class="k-avatar k-avatar-sp">SP</span><span aria-label="Jules Park" class="k-avatar k-avatar-jp">JP</span></span></div>
84
+ <div class="k-task-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 class="k-task-note">Complete</span></div></div></article></div><button class="k-add"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M12 5v14M5 12h14"></path></svg> Add task</button></section></div><aside class="k-inspector"><div class="k-inspector-head"><span class="k-id">FN-104 / TASK DETAILS</span><span class="k-tag k-tag-design">In progress</span></div><h2>Make room for good work</h2><p>Finish the new project experience. Keep the first step calm, direct and easy to return to.</p><dl><dt>Owner</dt><dd><span aria-label="Mira Chen" class="k-avatar k-avatar-mc">MC</span> Mira Chen</dd><dt>Priority</dt><dd class="k-urgent"><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 21V3h13l-3 4 3 4H5"></path></svg> Urgent</dd><dt>Due date</dt><dd><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="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg> Today, Sep 08</dd><dt>Project</dt><dd>Field notes</dd></dl><div class="k-inspector-section"><div class="k-check"><strong>Ready to share</strong><b>3 / 4</b></div><div class="k-check-row"><span class="k-check-box checked"><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></span>Set the project details</div><div class="k-check-row"><span class="k-check-box checked"><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></span>Check both color modes</div><div class="k-check-row"><span class="k-check-box checked"><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></span>Review the compact layout</div><div class="k-check-row"><span class="k-check-box"></span>Get Jules’ final review</div></div><div class="k-inspector-section"><div class="k-check"><strong>Connected work</strong><span class="k-id">1</span></div><div class="k-related"><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="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>FN-107 · Workspace navigation</span><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 12 4 4L19 6"></path></svg></div></div><div class="k-inspector-section"><strong>Latest conversation</strong><div class="k-comment"><span aria-label="Alex Rivera" class="k-avatar k-avatar-ar">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><div class="k-comment-input">Leave a comment… <span>⌘ ↵</span></div></div><footer><span class="k-id">UPDATED AT 10:42</span><button class="k-button" 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="M4 12h16m-6-6 6 6-6 6"></path></svg><span>Open task</span></button></footer></aside></div><footer class="k-board-footer"><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 <span>·</span> Ordered by priority</span><span>8 tasks <span>·</span> 4 collaborators</span></footer></main></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/components/modal.html ADDED
@@ -0,0 +1,2 @@
1
+ <!DOCTYPE html>
2
+ <html data-theme="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Modal · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-astra.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="modal" data-reference-phase="static" 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="well row"><span style="font-size:28px">▧</span><div><strong>Field notes</strong><br/><small>12 documents · 4 collaborators</small></div></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" 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><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 · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/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 · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-parent.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="multi-select-picker" data-reference-phase="static" 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="p-panel" style="padding:12px"><div class="p-row" data-tags=""><span class="p-tag" data-tag="Design">Design<button aria-label="Remove Design" data-remove-tag="" type="button"><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 6 12 12M18 6 6 18"></path></svg></button></span><span class="p-tag" data-tag="Editorial">Editorial<button aria-label="Remove Editorial" data-remove-tag="" type="button"><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 6 12 12M18 6 6 18"></path></svg></button></span></div></div><div class="p-actions"><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Change labels</span></button></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><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><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><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><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> 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="p-panel" style="padding:12px"><div class="p-row" data-tags=""><span class="p-tag" data-tag="Design">Design<button aria-label="Remove Design" data-remove-tag="" type="button"><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 6 12 12M18 6 6 18"></path></svg></button></span><span class="p-tag" data-tag="Editorial">Editorial<button aria-label="Remove Editorial" data-remove-tag="" type="button"><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 6 12 12M18 6 6 18"></path></svg></button></span></div></div><div><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><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><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><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><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> 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="p-panel" style="padding:12px"><div class="p-row" data-tags=""><span class="p-muted p-small" data-tag-placeholder="">No labels selected</span></div></div><div><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><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><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><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><span>Research</span></label></div><div class="p-empty" data-tag-empty=""><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="">0</span> labels selected</div></div></main></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/components/pagination.html ADDED
@@ -0,0 +1,2 @@
1
+ <!DOCTYPE html>
2
+ <html data-theme="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Pagination · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-astra.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="pagination" data-reference-phase="static" 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"><small>1–4 of 48 invoices</small><nav aria-label="Invoice pages" class="pagination"><button aria-label="Previous page" class="bevel-button" disabled="" type="button"><span class="bevel-button__label">←</span></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="muted" style="padding:0 4px">…</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"><span class="bevel-button__label">→</span></button></nav></div><p class="note">Page 1 of 12 · Invoice pagination</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"><small>21–24 of 48 invoices</small><nav aria-label="Invoice pages" class="pagination"><button aria-label="Previous page" class="bevel-button" type="button"><span class="bevel-button__label">←</span></button><button class="bevel-button" type="button"><span class="bevel-button__label">1</span></button><span class="muted" style="padding:0 4px">…</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="muted" style="padding:0 4px">…</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"><span class="bevel-button__label">→</span></button></nav></div><p class="note">Page 6 of 12 · Invoice pagination</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"><small>45–48 of 48 invoices</small><nav aria-label="Invoice pages" class="pagination"><button aria-label="Previous page" class="bevel-button" type="button"><span class="bevel-button__label">←</span></button><button class="bevel-button" type="button"><span class="bevel-button__label">1</span></button><span class="muted" style="padding:0 4px">…</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"><span class="bevel-button__label">→</span></button></nav></div><p class="note">Page 12 of 12 · Invoice pagination</p></div></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/components/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 · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-parent.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="persistent-action-banner" data-reference-phase="static" data-selected-source="parent"><section data-ref-state="offline" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Feedback / 20</div><h1>Keep an unresolved thing visible</h1><p>A lasting notice belongs with the work it affects.</p></div></header><section class="p-banner" data-part="persistent-notice"><span><svg aria-hidden="true" fill="none" height="23" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="23"><path d="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg></span><div><h3>You are working offline.</h3><p>Your recent changes are waiting to sync. Keep this page open until the connection returns.</p></div><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Retry connection</span></button></section><div class="p-panel" style="margin-top:20px"><div class="p-between"><h2>Field notes</h2><span class="p-badge">Draft</span></div><p class="p-muted" style="margin-top:14px">A working collection of ideas, decisions and useful details.</p></div></main></section>
4
+ <section data-ref-state="resolved" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Feedback / 20</div><h1>Keep an unresolved thing visible</h1><p>A lasting notice belongs with the work it affects.</p></div></header><section class="p-banner resolved" data-part="persistent-notice"><span><svg aria-hidden="true" fill="none" height="23" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="23"><path d="m5 12 4 4L19 6"></path></svg></span><div><h3>You are back online.</h3><p>The connection is available again. Your work can continue.</p></div><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Preview offline</span></button></section><div class="p-panel" style="margin-top:20px"><div class="p-between"><h2>Field notes</h2><span class="p-badge">Draft</span></div><p class="p-muted" style="margin-top:14px">A working collection of ideas, decisions and useful details.</p></div></main></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/components/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 · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-parent.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="popconfirm" data-reference-phase="static" data-selected-source="parent"><section data-ref-state="open" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">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-label="Remove document" class="p-icon-button" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></div><section aria-label="Remove document" class="p-popconfirm" data-part="confirmation" role="dialog"><div class="p-row"><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-label="Remove document" class="p-icon-button" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></div><div class="p-row" style="margin-top:24px;color:var(--bevel-teal)"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m5 12 4 4L19 6"></path></svg><span>Document moved to archive.</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-label="Remove document" class="p-icon-button" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></div><p class="p-muted p-small" style="margin-top:26px">Everything is up to date.</p></div></main></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/components/popover-menu.html ADDED
@@ -0,0 +1,2 @@
1
+ <!DOCTYPE html>
2
+ <html data-theme="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Popover menu · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-astra.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="popover-menu" data-reference-phase="static" 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="bevel-button" type="button"><span class="bevel-button__label">•••</span></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</div><button class="" data-action="Open project selected locally" role="menuitem"><span>↗</span>Open project<kbd>↵</kbd></button><button class="" data-action="Rename selected locally" role="menuitem"><span>T</span>Rename<kbd>⌘ R</kbd></button><button class="" data-action="Duplicate selected locally" role="menuitem"><span>▣</span>Duplicate<kbd>⌘ D</kbd></button><hr/><button class="" disabled="" role="menuitem"><span>↗</span>Move to workspace<kbd></kbd></button><hr/><button class="danger" data-action="Archive project selected locally" role="menuitem"><span>⌑</span>Archive project<kbd></kbd></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="bevel-button" type="button"><span class="bevel-button__label">•••</span></button></div><div style="display:flex;justify-content:flex-end"></div></div></div></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/components/rich-text-toolbar.html ADDED
@@ -0,0 +1,2 @@
1
+ <!DOCTYPE html>
2
+ <html data-theme="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Rich text toolbar · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-astra.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="rich-text-toolbar" data-reference-phase="static" 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 / Bevel visual reference</p></header><div aria-label="Rich text formatting" class="richclay-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">Paragraph ▾</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">↗</button><button aria-label="Bullet list" aria-pressed="false" class="richclay-button" data-richclay-control="unorderedList" data-toggle="">≡</button><span class="richclay-separator" role="separator"></span><button aria-label="Undo unavailable" class="richclay-button" data-richclay-control="undo" disabled="">↶</button></div><div class="richclay-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><p class="note"></p></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 / Bevel visual reference</p></header><div aria-label="Rich text formatting" class="richclay-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">Paragraph ▾</button><div class="richclay-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">Paragraph</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">Heading 1</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">Heading 2</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">Quote</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">↗</button><button aria-label="Bullet list" aria-pressed="false" class="richclay-button" data-richclay-control="unorderedList" data-toggle="">≡</button><span class="richclay-separator" role="separator"></span><button aria-label="Undo unavailable" class="richclay-button" data-richclay-control="undo" disabled="">↶</button></div><div class="richclay-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><p class="note"></p></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 / Bevel visual reference</p></header><div aria-label="Rich text formatting" class="richclay-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">Paragraph ▾</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">↗</button><button aria-label="Bullet list" aria-pressed="false" class="richclay-button" data-richclay-control="unorderedList" data-toggle="">≡</button><span class="richclay-separator" role="separator"></span><button aria-label="Undo unavailable" class="richclay-button" data-richclay-control="undo" disabled="">↶</button></div><div class="richclay-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><form aria-label="Edit link" aria-modal="true" class="richclay-dialog richclay-link-dialog" data-richclay-dialog="" role="dialog"><div class="richclay-dialog-title eyebrow">EDIT LINK</div><label class="richclay-field field"><span>URL</span><input autocomplete="url" class="richclay-input bevel-input" inputmode="url" name="url" type="text" value="https://example.test/field-guide"/></label><div class="richclay-dialog-actions actions"><button class="bevel-button richclay-secondary" data-richclay-cancel="" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--primary richclay-primary" type="button"><span class="bevel-button__label">Apply link</span></button></div></form><p class="note"></p></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 / Bevel visual reference</p></header><div style="padding:18px;background:var(--bevel-sunk)"><div class="richclay-float" data-richclay-float="" style="max-width:450px;margin:0 auto 10px"><div aria-label="Rich text formatting" class="richclay-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">Paragraph ▾</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">↗</button><button aria-label="Bullet list" aria-pressed="false" class="richclay-button" data-richclay-control="unorderedList" data-toggle="">≡</button><span class="richclay-separator" role="separator"></span><button aria-label="Undo unavailable" class="richclay-button" data-richclay-control="undo" disabled="">↶</button></div></div><div class="richclay-editor" data-part="editor"><h2>A place for good work</h2><p><mark style="background:var(--bevel-brass-soft);color:inherit">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><p class="note"></p></div></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/components/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 · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-parent.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="save-status-indicator" data-reference-phase="static" data-selected-source="parent"><section data-ref-state="saved" inert=""><main class="r-saved-page"><header><span class="p-eyebrow">NORTHSTAR STUDIO / FIELD NOTES</span><span class="p-badge">Draft</span></header><article><span class="p-eyebrow">FIELD NOTE / 001</span><h1>A place for good work.</h1><p>Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p><p>A little room to think. A clear place to begin.</p></article><span class="r-saved-chip" role="status">Saved</span></main></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/components/selectable-cards.html ADDED
@@ -0,0 +1,2 @@
1
+ <!DOCTYPE html>
2
+ <html data-theme="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Selectable cards · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-astra.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="selectable-cards" data-reference-phase="static" 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">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">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.</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">Unavailable</span></div></label></div></div></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/components/settings-rows.html ADDED
@@ -0,0 +1,2 @@
1
+ <!DOCTYPE html>
2
+ <html data-theme="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Settings rows · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-astra.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="settings-rows" data-reference-phase="static" data-selected-source="astra"><section data-ref-state="default" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Make it feel like your space.</h1><p>Workspace preferences for Northstar Studio.</p></header><div class=""><div class="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"><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"><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"><div class="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"><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"><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="note">Only the workspace owner can change these settings.</p></div></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/components/sidebar-nav.html ADDED
@@ -0,0 +1,4 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Sidebar nav · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-parent.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="sidebar-nav" data-reference-phase="static" data-selected-source="parent"><section data-ref-state="expanded" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Navigation / 13</div><h1>A steady place to return</h1><p>The workspace frame holds the familiar things.</p></div></header><div class="p-app-shell"><aside class="p-sidebar" data-part="navigation-rail"><div class="p-sidebar-brand"><svg aria-hidden="true" fill="none" height="22" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="22"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"></path></svg><strong>Northstar</strong><button aria-label="Collapse sidebar" class="p-icon-button r-collapse"><svg fill="none" height="16" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M20 12H4m6-6-6 6 6 6"></path></svg></button></div><div class="p-sidebar-links"><div class="p-eyebrow">Workspace</div><button aria-label="Overview" class="p-nav-item" data-nav-item="Overview" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"></path></svg><span>Overview</span></button><button aria-current="page" aria-label="Documents" class="p-nav-item active" data-nav-item="Documents" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>Documents</span><small>12</small></button><button aria-label="Activity" class="p-nav-item" data-nav-item="Activity" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M12 7v6l4 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"></path></svg><span>Activity</span><small>3</small></button><button aria-label="Settings" class="p-nav-item" data-nav-item="Settings" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M4 6h16M4 12h16M4 18h16M9 3v6m6 0v6m-7 0v6"></path></svg><span>Settings</span></button></div><footer class="r-identity"><span aria-label="Jules Park" class="r-avatar">JP</span><span><strong>Jules Park</strong><small>Owner</small></span></footer></aside><div class="p-app-content"><div class="p-eyebrow">Your workspace</div><h2 data-nav-title="">Documents</h2><p class="p-small p-muted" style="margin:10px 0 20px">Keep the useful things close.</p><div class="p-document-row"><svg aria-hidden="true" fill="none" height="20" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="20"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div><strong>Field notes</strong><p>12 pages · edited today</p></div><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m9 5 7 7-7 7"></path></svg></div><div class="p-document-row"><svg aria-hidden="true" fill="none" height="20" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="20"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div><strong>Project brief</strong><p>4 pages · edited today</p></div><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m9 5 7 7-7 7"></path></svg></div><div class="p-document-row"><svg aria-hidden="true" fill="none" height="20" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="20"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div><strong>Shared references</strong><p>8 pages · edited today</p></div><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m9 5 7 7-7 7"></path></svg></div></div></div></main></section>
4
+ <section data-ref-state="compact" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Navigation / 13</div><h1>A steady place to return</h1><p>The workspace frame holds the familiar things.</p></div></header><div class="p-app-shell"><aside class="p-sidebar compact" data-part="navigation-rail"><div class="p-sidebar-brand"><svg aria-hidden="true" fill="none" height="22" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="22"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"></path></svg><button aria-label="Expand sidebar" class="p-icon-button r-collapse"><svg fill="none" height="16" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M4 12h16m-6-6 6 6-6 6"></path></svg></button></div><div class="p-sidebar-links"><button aria-label="Overview" class="p-nav-item" data-nav-item="Overview" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"></path></svg></button><button aria-current="page" aria-label="Documents" class="p-nav-item active" data-nav-item="Documents" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg></button><button aria-label="Activity" class="p-nav-item" data-nav-item="Activity" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M12 7v6l4 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0"></path></svg></button><button aria-label="Settings" class="p-nav-item" data-nav-item="Settings" type="button"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M4 6h16M4 12h16M4 18h16M9 3v6m6 0v6m-7 0v6"></path></svg></button></div><footer class="r-identity"><span aria-label="Jules Park" class="r-avatar">JP</span><span><strong>Jules Park</strong><small>Owner</small></span></footer></aside><div class="p-app-content"><div class="p-eyebrow">Your workspace</div><h2 data-nav-title="">Documents</h2><p class="p-small p-muted" style="margin:10px 0 20px">Keep the useful things close.</p><div class="p-document-row"><svg aria-hidden="true" fill="none" height="20" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="20"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div><strong>Field notes</strong><p>12 pages · edited today</p></div><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m9 5 7 7-7 7"></path></svg></div><div class="p-document-row"><svg aria-hidden="true" fill="none" height="20" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="20"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div><strong>Project brief</strong><p>4 pages · edited today</p></div><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m9 5 7 7-7 7"></path></svg></div><div class="p-document-row"><svg aria-hidden="true" fill="none" height="20" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="20"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><div><strong>Shared references</strong><p>8 pages · edited today</p></div><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m9 5 7 7-7 7"></path></svg></div></div></div></main></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/parent/components/small-charts.html ADDED
@@ -0,0 +1,2 @@
1
+ <!DOCTYPE html>
2
+ <html data-theme="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Small charts · Parent corrected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../base-astra.css" rel="stylesheet"/><link href="../refinement.css" rel="stylesheet"/></head><body data-component="small-charts" data-reference-phase="static" data-selected-source="astra"><section data-ref-state="bars" inert=""><div class="specimen"><div class="row between" style="margin-bottom:24px"><div><span class="eyebrow">DOCUMENT VIEWS</span><h2>The week in view.</h2></div><span class="badge">Sep 01–07</span></div><svg aria-label="Weekly views: Monday 12, Tuesday 18, Wednesday 14, Thursday 28, Friday 24, Saturday 35, Sunday 31" class="chart" role="img" viewBox="0 0 640 280"><line class="grid" x1="40" x2="625" y1="230" y2="230"></line><text x="8" y="234">0</text><line class="grid" x1="40" x2="625" y1="180" y2="180"></line><text x="8" y="184">10</text><line class="grid" x1="40" x2="625" y1="130" y2="130"></line><text x="8" y="134">20</text><line class="grid" x1="40" x2="625" y1="80" y2="80"></line><text x="8" y="84">30</text><line class="grid" x1="40" x2="625" y1="30" y2="30"></line><text x="8" y="34">40</text><rect class="data" height="60" opacity="0.6" width="42" x="57" y="170"></rect><text text-anchor="middle" x="78" y="160">12</text><rect class="data" height="90" opacity="0.6" width="42" x="138" y="140"></rect><text text-anchor="middle" x="159" y="130">18</text><rect class="data" height="70" opacity="0.6" width="42" x="219" y="160"></rect><text text-anchor="middle" x="240" y="150">14</text><rect class="data" height="140" opacity="0.6" width="42" x="300" y="90"></rect><text text-anchor="middle" x="321" y="80">28</text><rect class="data" height="120" opacity="0.6" width="42" x="381" y="110"></rect><text text-anchor="middle" x="402" y="100">24</text><rect class="data" height="175" opacity="1" width="42" x="462" y="55"></rect><text text-anchor="middle" x="483" y="45">35</text><rect class="data" height="155" opacity="0.6" width="42" x="543" y="75"></rect><text text-anchor="middle" x="564" y="65">31</text><text text-anchor="middle" x="78" y="258">Mon</text><text text-anchor="middle" x="159" y="258">Tue</text><text text-anchor="middle" x="240" y="258">Wed</text><text text-anchor="middle" x="321" y="258">Thu</text><text text-anchor="middle" x="402" y="258">Fri</text><text text-anchor="middle" x="483" y="258">Sat</text><text text-anchor="middle" x="564" y="258">Sun</text></svg><div class="rule row between"><small><span style="color:var(--bevel-brass)">■</span> Views across all documents</small><span class="mono" style="font-size:12px">162 TOTAL</span></div></div></section><section data-ref-state="line" hidden="" inert=""><div class="specimen"><div class="row between" style="margin-bottom:24px"><div><span class="eyebrow">DOCUMENT VIEWS</span><h2>The week in view.</h2></div><span class="badge">Sep 01–07</span></div><svg aria-label="Weekly views: Monday 12, Tuesday 18, Wednesday 14, Thursday 28, Friday 24, Saturday 35, Sunday 31" class="chart" role="img" viewBox="0 0 640 280"><line class="grid" x1="40" x2="625" y1="230" y2="230"></line><text x="8" y="234">0</text><line class="grid" x1="40" x2="625" y1="180" y2="180"></line><text x="8" y="184">10</text><line class="grid" x1="40" x2="625" y1="130" y2="130"></line><text x="8" y="134">20</text><line class="grid" x1="40" x2="625" y1="80" y2="80"></line><text x="8" y="84">30</text><line class="grid" x1="40" x2="625" y1="30" y2="30"></line><text x="8" y="34">40</text><polyline class="line" points="78,170 159,140 240,160 321,90 402,110 483,55 564,75"></polyline><circle cx="78" cy="170" fill="var(--bevel-surface)" r="4" stroke="var(--bevel-brass)" stroke-width="2"></circle><circle cx="159" cy="140" fill="var(--bevel-surface)" r="4" stroke="var(--bevel-brass)" stroke-width="2"></circle><circle cx="240" cy="160" fill="var(--bevel-surface)" r="4" stroke="var(--bevel-brass)" stroke-width="2"></circle><circle cx="321" cy="90" fill="var(--bevel-surface)" r="4" stroke="var(--bevel-brass)" stroke-width="2"></circle><circle cx="402" cy="110" fill="var(--bevel-surface)" r="4" stroke="var(--bevel-brass)" stroke-width="2"></circle><circle cx="483" cy="55" fill="var(--bevel-surface)" r="4" stroke="var(--bevel-brass)" stroke-width="2"></circle><circle cx="564" cy="75" fill="var(--bevel-surface)" r="4" stroke="var(--bevel-brass)" stroke-width="2"></circle><text text-anchor="middle" x="78" y="258">Mon</text><text text-anchor="middle" x="159" y="258">Tue</text><text text-anchor="middle" x="240" y="258">Wed</text><text text-anchor="middle" x="321" y="258">Thu</text><text text-anchor="middle" x="402" y="258">Fri</text><text text-anchor="middle" x="483" y="258">Sat</text><text text-anchor="middle" x="564" y="258">Sun</text></svg><div class="rule row between"><small><span style="color:var(--bevel-brass)">■</span> Views across all documents</small><span class="mono" style="font-size:12px">162 TOTAL</span></div></div></section><section data-ref-state="spark" hidden="" inert=""><div class="specimen"><div class="row between" style="margin-bottom:24px"><div><span class="eyebrow">DOCUMENT VIEWS</span><h2>The week in view.</h2></div><span class="badge">Sep 01–07</span></div><div class="row" style="gap:35px"><div><div class="stat-value">162</div><small class="good">↑ 18% this week</small></div><div style="flex:1"><svg aria-label="Activity increased over the week" class="sparkline" viewBox="0 0 160 42"><polyline fill="none" points="0,36 26,29 53,33 80,16 106,20 133,5 160,10" stroke="currentColor" stroke-width="2"></polyline><line stroke="var(--bevel-line)" x1="0" x2="160" y1="41" y2="41"></line></svg></div></div><div class="rule row between"><span class="mono muted" style="font-size:11px">MON 12 · TUE 18 · WED 14</span><span class="mono muted" style="font-size:11px">THU 28 · FRI 24 · SAT 35 · SUN 31</span></div><div class="rule row between"><small><span style="color:var(--bevel-brass)">■</span> Views across all documents</small><span class="mono" style="font-size:12px">162 TOTAL</span></div></div></section><footer class="r-static-note">Static UI reference · Use the preview controls to compare states.</footer><script src="../../fixtures/static-host.js"></script></body></html>