@kerfjs/ui 4.4.1 → 5.0.0-beta.11

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 (386) hide show
  1. package/README.md +241 -10
  2. package/ai/component-catalog.json +4828 -0
  3. package/ai/component-catalog.schema.json +79 -0
  4. package/ai/public-api-signatures-v1.md +1371 -0
  5. package/ai/skill.md +73 -11
  6. package/ai/webawesome-jsx-signatures-v1.md +106 -0
  7. package/dist/app-tab.d.ts +14 -2
  8. package/dist/app-tab.js +3 -1
  9. package/dist/browser/app-tab.js +3 -2
  10. package/dist/browser/disclosure-arrow.js +4 -0
  11. package/dist/browser/empty-state.js +3 -3
  12. package/dist/browser/floating-toolbar.js +3 -0
  13. package/dist/browser/list-action-row.js +4 -0
  14. package/dist/browser/list-header.js +6 -0
  15. package/dist/browser/list-item.js +4 -0
  16. package/dist/browser/loading-spinner.js +2 -2
  17. package/dist/browser/lucide-icon.js +2 -2
  18. package/dist/browser/panel-header.js +7 -0
  19. package/dist/browser/resizable-region.js +2 -2
  20. package/dist/browser/segmented-control.js +3 -2
  21. package/dist/browser/select.js +4 -3
  22. package/dist/browser/skeleton.js +3 -0
  23. package/dist/browser/state-banner.js +3 -2
  24. package/dist/browser/tab-bar.js +2 -2
  25. package/dist/browser/token-search-field.js +4 -0
  26. package/dist/browser/toolbar-control-group.js +2 -2
  27. package/dist/browser/toolbar-text.js +3 -2
  28. package/dist/browser/toolbar.js +2 -2
  29. package/dist/browser/value-table.js +3 -2
  30. package/dist/catalog.d.ts +119 -0
  31. package/dist/catalog.js +146 -0
  32. package/dist/catalog.js.map +1 -0
  33. package/dist/chunk-2Z5TWHKQ.js +34 -0
  34. package/dist/chunk-2Z5TWHKQ.js.map +1 -0
  35. package/dist/chunk-37T3VNIZ.js +19 -0
  36. package/dist/chunk-37T3VNIZ.js.map +1 -0
  37. package/dist/chunk-56RJXPHG.js +43 -0
  38. package/dist/chunk-56RJXPHG.js.map +1 -0
  39. package/dist/chunk-5ATCDSQS.js +42 -0
  40. package/dist/chunk-5ATCDSQS.js.map +1 -0
  41. package/dist/chunk-5E2HVJ33.js +10 -0
  42. package/dist/chunk-5E2HVJ33.js.map +1 -0
  43. package/dist/chunk-7BR3DO2A.js +31 -0
  44. package/dist/chunk-7BR3DO2A.js.map +1 -0
  45. package/dist/chunk-7JB7VPRI.js +34 -0
  46. package/dist/chunk-7JB7VPRI.js.map +1 -0
  47. package/dist/chunk-7LDCTU7D.js +134 -0
  48. package/dist/chunk-7LDCTU7D.js.map +1 -0
  49. package/dist/{chunk-4HHCYSGT.js → chunk-AQNKJRFH.js} +2 -2
  50. package/dist/{chunk-4HHCYSGT.js.map → chunk-AQNKJRFH.js.map} +1 -1
  51. package/dist/{chunk-MBR3TYNL.js → chunk-AVZHJN6C.js} +3 -3
  52. package/dist/chunk-AVZHJN6C.js.map +1 -0
  53. package/dist/chunk-B24C4A6T.js +22 -0
  54. package/dist/chunk-B24C4A6T.js.map +1 -0
  55. package/dist/chunk-BLK3UEEI.js +23 -0
  56. package/dist/chunk-BLK3UEEI.js.map +1 -0
  57. package/dist/chunk-CH4SQ6H5.js +39 -0
  58. package/dist/chunk-CH4SQ6H5.js.map +1 -0
  59. package/dist/chunk-I7INRJO4.js +17 -0
  60. package/dist/chunk-I7INRJO4.js.map +1 -0
  61. package/dist/chunk-L4OKFDJY.js +24 -0
  62. package/dist/chunk-L4OKFDJY.js.map +1 -0
  63. package/dist/chunk-LCOBDOCC.js +265 -0
  64. package/dist/chunk-LCOBDOCC.js.map +1 -0
  65. package/dist/{chunk-3O7ZEUW2.js → chunk-M5JRI6MN.js} +3 -3
  66. package/dist/chunk-M5JRI6MN.js.map +1 -0
  67. package/dist/{chunk-MFKMHK5W.js → chunk-RNPGFQ33.js} +3 -3
  68. package/dist/chunk-RNPGFQ33.js.map +1 -0
  69. package/dist/chunk-RUNWEPR4.js +10 -0
  70. package/dist/chunk-RUNWEPR4.js.map +1 -0
  71. package/dist/chunk-XE5ZLPCC.js +20 -0
  72. package/dist/chunk-XE5ZLPCC.js.map +1 -0
  73. package/dist/{chunk-MQIZAD4A.js → chunk-XXMOARTH.js} +5 -3
  74. package/dist/chunk-XXMOARTH.js.map +1 -0
  75. package/dist/{chunk-TRNBHPNW.js → chunk-YGN7OMLT.js} +11 -8
  76. package/dist/chunk-YGN7OMLT.js.map +1 -0
  77. package/dist/collapsible-panel.d.ts +66 -0
  78. package/dist/collapsible-panel.js +22 -0
  79. package/dist/collapsible-panel.js.map +1 -0
  80. package/dist/device-class.d.ts +62 -0
  81. package/dist/device-class.js +75 -0
  82. package/dist/device-class.js.map +1 -0
  83. package/dist/disclosure-arrow.d.ts +14 -0
  84. package/dist/disclosure-arrow.js +4 -0
  85. package/dist/disclosure-arrow.js.map +1 -0
  86. package/dist/floating-toolbar.d.ts +28 -0
  87. package/dist/floating-toolbar.js +3 -0
  88. package/dist/floating-toolbar.js.map +1 -0
  89. package/dist/index.d.ts +11 -6
  90. package/dist/index.js +22 -16
  91. package/dist/list-action-row.d.ts +52 -0
  92. package/dist/list-action-row.js +5 -0
  93. package/dist/list-action-row.js.map +1 -0
  94. package/dist/list-header.d.ts +43 -0
  95. package/dist/list-header.js +7 -0
  96. package/dist/list-header.js.map +1 -0
  97. package/dist/list-item.d.ts +33 -0
  98. package/dist/list-item.js +5 -0
  99. package/dist/list-item.js.map +1 -0
  100. package/dist/nav-stack.d.ts +38 -0
  101. package/dist/nav-stack.js +5 -0
  102. package/dist/nav-stack.js.map +1 -0
  103. package/dist/panel-header.d.ts +36 -0
  104. package/dist/panel-header.js +7 -0
  105. package/dist/panel-header.js.map +1 -0
  106. package/dist/resizable-region.d.ts +3 -1
  107. package/dist/resizable-region.js +1 -1
  108. package/dist/segmented-control.d.ts +3 -1
  109. package/dist/segmented-control.js +2 -1
  110. package/dist/select-register.d.ts +5 -1
  111. package/dist/select-register.js +3 -0
  112. package/dist/select-register.js.map +1 -1
  113. package/dist/select.d.ts +5 -2
  114. package/dist/select.js +2 -1
  115. package/dist/skeleton.d.ts +24 -0
  116. package/dist/skeleton.js +3 -0
  117. package/dist/skeleton.js.map +1 -0
  118. package/dist/split-view.d.ts +42 -0
  119. package/dist/split-view.js +21 -0
  120. package/dist/split-view.js.map +1 -0
  121. package/dist/state-banner.d.ts +3 -1
  122. package/dist/state-banner.js +2 -1
  123. package/dist/styles/app-tab.css +152 -0
  124. package/dist/styles/catalog.css +522 -0
  125. package/dist/styles/collapsible-panel.css +146 -0
  126. package/dist/styles/disclosure-arrow.css +23 -0
  127. package/dist/styles/empty-state.css +47 -0
  128. package/dist/styles/floating-toolbar.css +38 -0
  129. package/dist/styles/foundation.css +347 -0
  130. package/dist/styles/layout.css +73 -0
  131. package/dist/styles/list-action-row.css +160 -0
  132. package/dist/styles/list-header.css +160 -0
  133. package/dist/styles/list-item.css +123 -0
  134. package/dist/styles/loading-spinner.css +21 -0
  135. package/dist/styles/lucide-icon.css +6 -0
  136. package/dist/styles/nav-stack.css +111 -0
  137. package/dist/styles/panel-header.css +64 -0
  138. package/dist/styles/resizable-region.css +111 -0
  139. package/{src → dist/styles}/segmented-control.css +62 -31
  140. package/dist/styles/select.css +138 -0
  141. package/dist/styles/skeleton.css +31 -0
  142. package/dist/styles/split-view.css +35 -0
  143. package/dist/styles/state-banner.css +173 -0
  144. package/dist/styles/styles.css +23 -0
  145. package/dist/styles/tab-bar.css +45 -0
  146. package/dist/styles/tab-scaffold.css +84 -0
  147. package/dist/styles/token-search-field.css +289 -0
  148. package/dist/styles/toolbar-control-group.css +225 -0
  149. package/dist/styles/toolbar-text.css +40 -0
  150. package/dist/styles/toolbar.css +61 -0
  151. package/dist/styles/value-table.css +75 -0
  152. package/{src → dist/styles}/webawesome.css +119 -29
  153. package/dist/styles/workbench.css +94 -0
  154. package/dist/tab-bar.d.ts +8 -1
  155. package/dist/tab-bar.js +1 -1
  156. package/dist/tab-scaffold.d.ts +30 -0
  157. package/dist/tab-scaffold.js +16 -0
  158. package/dist/tab-scaffold.js.map +1 -0
  159. package/dist/token-search-field.d.ts +43 -0
  160. package/dist/token-search-field.js +4 -0
  161. package/dist/token-search-field.js.map +1 -0
  162. package/dist/toolbar-control-group.d.ts +3 -1
  163. package/dist/toolbar-control-group.js +1 -1
  164. package/dist/toolbar-text.d.ts +15 -3
  165. package/dist/toolbar-text.js +2 -1
  166. package/dist/value-table.d.ts +12 -2
  167. package/dist/value-table.js +2 -1
  168. package/dist/webawesome.d.ts +100 -0
  169. package/dist/webawesome.js +3 -0
  170. package/dist/webawesome.js.map +1 -0
  171. package/dist/wire-catalog.d.ts +26 -0
  172. package/dist/wire-catalog.js +48 -0
  173. package/dist/wire-catalog.js.map +1 -0
  174. package/dist/wire-nav-stack.d.ts +15 -0
  175. package/dist/wire-nav-stack.js +88 -0
  176. package/dist/wire-nav-stack.js.map +1 -0
  177. package/dist/wire-resizable-regions.js +1 -1
  178. package/dist/wire-sidebar.d.ts +43 -0
  179. package/dist/wire-sidebar.js +117 -0
  180. package/dist/wire-sidebar.js.map +1 -0
  181. package/dist/wire-tab-bars.d.ts +15 -2
  182. package/dist/wire-tab-bars.js +1 -1
  183. package/dist/wire-tab-scaffold.d.ts +11 -0
  184. package/dist/wire-tab-scaffold.js +16 -0
  185. package/dist/wire-tab-scaffold.js.map +1 -0
  186. package/dist/wire-token-search-fields.d.ts +106 -0
  187. package/dist/wire-token-search-fields.js +5 -0
  188. package/dist/wire-token-search-fields.js.map +1 -0
  189. package/dist/workbench.d.ts +33 -0
  190. package/dist/workbench.js +17 -0
  191. package/dist/workbench.js.map +1 -0
  192. package/docs/accessibility.md +112 -3
  193. package/docs/app-layouts.md +61 -0
  194. package/docs/catalog.md +155 -0
  195. package/docs/collapsible-panel.md +102 -0
  196. package/docs/component-contract.md +169 -4
  197. package/docs/component-selection.md +186 -0
  198. package/docs/design/templates/empty-state/filtered-dark.svg +1 -0
  199. package/docs/design/templates/empty-state/filtered.svg +1 -0
  200. package/docs/design/templates/empty-state/with-action-dark.svg +1 -0
  201. package/docs/design/templates/empty-state/with-action.svg +1 -0
  202. package/docs/design/templates/empty-state-dark.svg +7 -0
  203. package/docs/design/templates/empty-state.svg +7 -0
  204. package/docs/design/templates/list-action-row/default-dark.svg +1 -0
  205. package/docs/design/templates/list-action-row/default.svg +1 -0
  206. package/docs/design/templates/list-action-row/selected-dark.svg +1 -0
  207. package/docs/design/templates/list-action-row/selected.svg +1 -0
  208. package/docs/design/templates/list-action-row-dark.svg +7 -0
  209. package/docs/design/templates/list-action-row.svg +7 -0
  210. package/docs/design/templates/list-header/action-dark.svg +1 -0
  211. package/docs/design/templates/list-header/action.svg +1 -0
  212. package/docs/design/templates/list-header/count-dark.svg +1 -0
  213. package/docs/design/templates/list-header/count.svg +1 -0
  214. package/docs/design/templates/list-header/toggle-collapsed-dark.svg +1 -0
  215. package/docs/design/templates/list-header/toggle-collapsed.svg +1 -0
  216. package/docs/design/templates/list-header/toggle-expanded-dark.svg +1 -0
  217. package/docs/design/templates/list-header/toggle-expanded.svg +1 -0
  218. package/docs/design/templates/list-header-dark.svg +11 -0
  219. package/docs/design/templates/list-header.svg +11 -0
  220. package/docs/design/templates/list-item/default-dark.svg +1 -0
  221. package/docs/design/templates/list-item/default.svg +1 -0
  222. package/docs/design/templates/list-item/multiline-dark.svg +1 -0
  223. package/docs/design/templates/list-item/multiline.svg +1 -0
  224. package/docs/design/templates/list-item/selected-dark.svg +1 -0
  225. package/docs/design/templates/list-item/selected.svg +1 -0
  226. package/docs/design/templates/list-item/trailing-dark.svg +1 -0
  227. package/docs/design/templates/list-item/trailing.svg +1 -0
  228. package/docs/design/templates/list-item-dark.svg +11 -0
  229. package/docs/design/templates/list-item.svg +11 -0
  230. package/docs/design/templates/panel-header/icon-actions-dark.svg +1 -0
  231. package/docs/design/templates/panel-header/icon-actions.svg +1 -0
  232. package/docs/design/templates/panel-header/icon-summary-actions-dark.svg +1 -0
  233. package/docs/design/templates/panel-header/icon-summary-actions.svg +1 -0
  234. package/docs/design/templates/panel-header/no-icon-dark.svg +1 -0
  235. package/docs/design/templates/panel-header/no-icon.svg +1 -0
  236. package/docs/design/templates/panel-header/page-heading-dark.svg +1 -0
  237. package/docs/design/templates/panel-header/page-heading.svg +1 -0
  238. package/docs/design/templates/panel-header/title-only-dark.svg +1 -0
  239. package/docs/design/templates/panel-header/title-only.svg +1 -0
  240. package/docs/design/templates/panel-header-dark.svg +13 -0
  241. package/docs/design/templates/panel-header.svg +13 -0
  242. package/docs/design/templates/segmented-control/equal-dark.svg +1 -0
  243. package/docs/design/templates/segmented-control/equal.svg +1 -0
  244. package/docs/design/templates/segmented-control/pill-small-dark.svg +1 -0
  245. package/docs/design/templates/segmented-control/pill-small.svg +1 -0
  246. package/docs/design/templates/segmented-control-dark.svg +7 -0
  247. package/docs/design/templates/segmented-control.svg +7 -0
  248. package/docs/design/templates/skeleton/avatar-dark.svg +1 -0
  249. package/docs/design/templates/skeleton/avatar.svg +1 -0
  250. package/docs/design/templates/skeleton/block-dark.svg +1 -0
  251. package/docs/design/templates/skeleton/block.svg +1 -0
  252. package/docs/design/templates/skeleton/lines-dark.svg +1 -0
  253. package/docs/design/templates/skeleton/lines.svg +1 -0
  254. package/docs/design/templates/skeleton-dark.svg +9 -0
  255. package/docs/design/templates/skeleton.svg +9 -0
  256. package/docs/design/templates/state-banner/danger-dark.svg +1 -0
  257. package/docs/design/templates/state-banner/danger.svg +1 -0
  258. package/docs/design/templates/state-banner/info-dark.svg +1 -0
  259. package/docs/design/templates/state-banner/info.svg +1 -0
  260. package/docs/design/templates/state-banner/success-dark.svg +1 -0
  261. package/docs/design/templates/state-banner/success.svg +1 -0
  262. package/docs/design/templates/state-banner/warning-dark.svg +1 -0
  263. package/docs/design/templates/state-banner/warning.svg +1 -0
  264. package/docs/design/templates/state-banner-dark.svg +11 -0
  265. package/docs/design/templates/state-banner.svg +11 -0
  266. package/docs/design/templates/tab-bar/workspace-tabs-dark.svg +1 -0
  267. package/docs/design/templates/tab-bar/workspace-tabs.svg +1 -0
  268. package/docs/design/templates/tab-bar-dark.svg +5 -0
  269. package/docs/design/templates/tab-bar.svg +5 -0
  270. package/docs/design/templates/token-search-field/empty-dark.svg +1 -0
  271. package/docs/design/templates/token-search-field/empty.svg +1 -0
  272. package/docs/design/templates/token-search-field/tokens-dark.svg +1 -0
  273. package/docs/design/templates/token-search-field/tokens.svg +1 -0
  274. package/docs/design/templates/token-search-field-dark.svg +7 -0
  275. package/docs/design/templates/token-search-field.svg +7 -0
  276. package/docs/design/templates/toolbar/title-and-actions-dark.svg +1 -0
  277. package/docs/design/templates/toolbar/title-and-actions.svg +1 -0
  278. package/docs/design/templates/toolbar-control-group/borderless-single-dark.svg +1 -0
  279. package/docs/design/templates/toolbar-control-group/borderless-single.svg +1 -0
  280. package/docs/design/templates/toolbar-control-group/icon-buttons-dark.svg +1 -0
  281. package/docs/design/templates/toolbar-control-group/icon-buttons.svg +1 -0
  282. package/docs/design/templates/toolbar-control-group/push-buttons-dark.svg +1 -0
  283. package/docs/design/templates/toolbar-control-group/push-buttons.svg +1 -0
  284. package/docs/design/templates/toolbar-control-group/with-text-dark.svg +1 -0
  285. package/docs/design/templates/toolbar-control-group/with-text.svg +1 -0
  286. package/docs/design/templates/toolbar-control-group-dark.svg +11 -0
  287. package/docs/design/templates/toolbar-control-group.svg +11 -0
  288. package/docs/design/templates/toolbar-dark.svg +5 -0
  289. package/docs/design/templates/toolbar-text/default-dark.svg +1 -0
  290. package/docs/design/templates/toolbar-text/default.svg +1 -0
  291. package/docs/design/templates/toolbar-text/large-dark.svg +1 -0
  292. package/docs/design/templates/toolbar-text/large.svg +1 -0
  293. package/docs/design/templates/toolbar-text/small-dark.svg +1 -0
  294. package/docs/design/templates/toolbar-text/small.svg +1 -0
  295. package/docs/design/templates/toolbar-text-dark.svg +9 -0
  296. package/docs/design/templates/toolbar-text.svg +9 -0
  297. package/docs/design/templates/toolbar.svg +5 -0
  298. package/docs/design/templates/value-table/details-dark.svg +1 -0
  299. package/docs/design/templates/value-table/details.svg +1 -0
  300. package/docs/design/templates/value-table-dark.svg +5 -0
  301. package/docs/design/templates/value-table.svg +5 -0
  302. package/docs/design/templates.md +114 -0
  303. package/docs/design-philosophy.md +61 -1
  304. package/docs/device-class.md +54 -0
  305. package/docs/examples/command-palette-adapter.tsx +70 -0
  306. package/docs/layout.md +131 -0
  307. package/docs/nav-stack.md +47 -0
  308. package/docs/recipes.md +167 -0
  309. package/docs/split-view.md +49 -0
  310. package/docs/tab-scaffold.md +41 -0
  311. package/docs/ux-demo.md +23 -9
  312. package/docs/webawesome-theme.md +15 -0
  313. package/docs/workbench.md +47 -0
  314. package/llms.txt +123 -14
  315. package/package.json +147 -44
  316. package/ux-demo/recipes/app-shell.tsx +32 -0
  317. package/ux-demo/recipes/collapsible-sidebar.tsx +100 -0
  318. package/ux-demo/recipes/compact-toolbar.tsx +43 -0
  319. package/ux-demo/recipes/composer-form.tsx +63 -0
  320. package/ux-demo/recipes/list-detail-dialog.tsx +45 -0
  321. package/ux-demo/recipes/list-workspace-states.tsx +26 -0
  322. package/ux-demo/recipes/loaders.ts +33 -0
  323. package/ux-demo/recipes/loading-inspector.tsx +81 -0
  324. package/ux-demo/recipes/mount-recipe.ts +43 -0
  325. package/ux-demo/recipes/navigation-sidebar.tsx +26 -0
  326. package/ux-demo/recipes/navigation-stack.tsx +76 -0
  327. package/ux-demo/recipes/recipes.css +448 -0
  328. package/ux-demo/recipes/types.ts +17 -0
  329. package/ux-demo/recipes/workspace-header.tsx +12 -0
  330. package/dist/browser/dialog-header.js +0 -3
  331. package/dist/browser/menu-header.js +0 -3
  332. package/dist/browser/menu-item.js +0 -3
  333. package/dist/browser/page-header.js +0 -3
  334. package/dist/chunk-2PES33HS.js +0 -13
  335. package/dist/chunk-2PES33HS.js.map +0 -1
  336. package/dist/chunk-3O7ZEUW2.js.map +0 -1
  337. package/dist/chunk-723YNJBH.js +0 -17
  338. package/dist/chunk-723YNJBH.js.map +0 -1
  339. package/dist/chunk-GY5WH7TO.js +0 -10
  340. package/dist/chunk-GY5WH7TO.js.map +0 -1
  341. package/dist/chunk-MBR3TYNL.js.map +0 -1
  342. package/dist/chunk-MFKMHK5W.js.map +0 -1
  343. package/dist/chunk-MQIZAD4A.js.map +0 -1
  344. package/dist/chunk-NHXX4JI5.js +0 -28
  345. package/dist/chunk-NHXX4JI5.js.map +0 -1
  346. package/dist/chunk-OPCJRCYO.js +0 -19
  347. package/dist/chunk-OPCJRCYO.js.map +0 -1
  348. package/dist/chunk-T5XNMVOI.js +0 -24
  349. package/dist/chunk-T5XNMVOI.js.map +0 -1
  350. package/dist/chunk-TRNBHPNW.js.map +0 -1
  351. package/dist/chunk-VHW5YNIB.js +0 -17
  352. package/dist/chunk-VHW5YNIB.js.map +0 -1
  353. package/dist/chunk-VKH2JLDZ.js +0 -10
  354. package/dist/chunk-VKH2JLDZ.js.map +0 -1
  355. package/dist/chunk-WY4CAEPG.js +0 -14
  356. package/dist/chunk-WY4CAEPG.js.map +0 -1
  357. package/dist/dialog-header.d.ts +0 -14
  358. package/dist/dialog-header.js +0 -3
  359. package/dist/dialog-header.js.map +0 -1
  360. package/dist/menu-header.d.ts +0 -15
  361. package/dist/menu-header.js +0 -3
  362. package/dist/menu-header.js.map +0 -1
  363. package/dist/menu-item.d.ts +0 -22
  364. package/dist/menu-item.js +0 -3
  365. package/dist/menu-item.js.map +0 -1
  366. package/dist/page-header.d.ts +0 -9
  367. package/dist/page-header.js +0 -3
  368. package/dist/page-header.js.map +0 -1
  369. package/src/app-tab.css +0 -20
  370. package/src/dialog-header.css +0 -9
  371. package/src/empty-state.css +0 -6
  372. package/src/foundation.css +0 -106
  373. package/src/loading-spinner.css +0 -4
  374. package/src/lucide-icon.css +0 -1
  375. package/src/menu-header.css +0 -13
  376. package/src/menu-item.css +0 -12
  377. package/src/page-header.css +0 -3
  378. package/src/resizable-region.css +0 -19
  379. package/src/select.css +0 -18
  380. package/src/state-banner.css +0 -31
  381. package/src/styles.css +0 -18
  382. package/src/tab-bar.css +0 -4
  383. package/src/toolbar-control-group.css +0 -25
  384. package/src/toolbar-text.css +0 -4
  385. package/src/toolbar.css +0 -9
  386. package/src/value-table.css +0 -5
package/docs/design/templates/list-action-row.svg ADDED
@@ -0,0 +1,7 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="452" height="276" viewBox="0 0 452 276">
2
+ <rect width="452" height="276" fill="#ffffff"/>
3
+ <text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Primary with a trailing action</text>
4
+ <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="v0-ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="v0-cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="v0-cp2"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="v0-ct3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="v0-cp4"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><g clip-path="url(#v0-ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><g clip-path="url(#v0-cp1)"><g transform="translate(362 34)" color="rgb(29, 29, 31)"><svg data-lucide="trash-2" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M10 11v6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 11v6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 6h18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#v0-cp2)"><g clip-path="url(#v0-ct3)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">staging.example.com</text></g></g><g clip-path="url(#v0-cp4)"><g transform="translate(37 30)" color="rgb(29, 29, 31)"><svg data-lucide="rocket" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g></svg>
5
+ <text x="16" y="160" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Selected primary</text>
6
+ <svg x="16" y="168" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="v1-ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="v1-cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="v1-cp2"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="v1-ct3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="v1-cp4"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><rect x="28" y="20" width="364" height="44" rx="12" fill="rgb(214,236,255)"/><g clip-path="url(#v1-ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgb(166,213,255)" fill-rule="evenodd"/></g><g clip-path="url(#v1-cp1)"><g transform="translate(362 34)" color="rgb(30, 110, 244)"><svg data-lucide="pencil" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M21.2 6.8a1 1 0 0 0-4-4L3.8 16.2l-.5.8L2 21.4a.5.5 0 0 0 .6.6L7 20.7l.8-.5Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m15 5 4 4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#v1-cp2)"><g clip-path="url(#v1-ct3)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(30,110,244)">production.example.com</text></g></g><g clip-path="url(#v1-cp4)"><g transform="translate(37 30)" color="rgb(30, 110, 244)"><svg data-lucide="rocket" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g></svg>
7
+ </svg>
package/docs/design/templates/list-header/action-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="ct1"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="cp2"><rect x="365" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="319" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">TEAM MEMBERS</text></g></g><rect x="356.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp2)"><g transform="translate(365 33)" color="rgb(174, 174, 178)"><svg data-lucide="plus" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="Arial" style="overflow:hidden" width="18" height="18"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g></svg>
package/docs/design/templates/list-header/action.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="ct1"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="cp2"><rect x="365" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="319" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">TEAM MEMBERS</text></g></g><rect x="356.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp2)"><g transform="translate(365 33)" color="rgb(110, 110, 115)"><svg data-lucide="plus" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="Arial" style="overflow:hidden" width="18" height="18"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g></svg>
package/docs/design/templates/list-header/count-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="ct1"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="ct2"><rect x="140" y="31.2" width="23" height="21.6"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">OPEN TICKETS</text></g></g><rect x="140" y="31.2" width="23" height="21.6" rx="10.8" fill="rgb(17,17,19)"/><text x="145.64" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(174,174,178)">12</text></svg>
package/docs/design/templates/list-header/count.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="ct1"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="ct2"><rect x="140" y="31.2" width="23" height="21.6"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">OPEN TICKETS</text></g></g><rect x="140" y="31.2" width="23" height="21.6" rx="10.8" fill="rgb(242,242,247)"/><text x="145.64" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(110,110,115)">12</text></svg>
package/docs/design/templates/list-header/toggle-collapsed-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="ct1"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="cp2"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">ARCHIVED</text></g></g><g clip-path="url(#cp2)"><g transform="translate(362 33)" color="rgb(174, 174, 178)"><svg data-lucide="chevron-right" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="18" height="18"><path d="m9 18 6-6-6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g></svg>
package/docs/design/templates/list-header/toggle-collapsed.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="ct1"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="cp2"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">ARCHIVED</text></g></g><g clip-path="url(#cp2)"><g transform="translate(362 33)" color="rgb(110, 110, 115)"><svg data-lucide="chevron-right" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="18" height="18"><path d="m9 18 6-6-6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g></svg>
package/docs/design/templates/list-header/toggle-expanded-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="ct1"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="ct2"><rect x="96.8" y="31.2" width="21.6" height="21.6"/></clipPath><clipPath id="cp3"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">RECENT</text></g></g><rect x="96.8" y="31.2" width="21.6" height="21.6" rx="10.8" fill="rgb(17,17,19)"/><text x="104.25" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(174,174,178)">5</text><g transform="rotate(90 371 42)"><g clip-path="url(#cp3)"><g transform="translate(362 33)" color="rgb(174, 174, 178)"><svg data-lucide="chevron-right" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="18" height="18"><path d="m9 18 6-6-6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g></g></svg>
package/docs/design/templates/list-header/toggle-expanded.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="ct1"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="ct2"><rect x="96.8" y="31.2" width="21.6" height="21.6"/></clipPath><clipPath id="cp3"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">RECENT</text></g></g><rect x="96.8" y="31.2" width="21.6" height="21.6" rx="10.8" fill="rgb(242,242,247)"/><text x="104.25" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(110,110,115)">5</text><g transform="rotate(90 371 42)"><g clip-path="url(#cp3)"><g transform="translate(362 33)" color="rgb(110, 110, 115)"><svg data-lucide="chevron-right" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="18" height="18"><path d="m9 18 6-6-6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g></g></svg>
package/docs/design/templates/list-header-dark.svg ADDED
@@ -0,0 +1,11 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="452" height="536" viewBox="0 0 452 536">
2
+ <rect width="452" height="536" fill="#1c1c1e"/>
3
+ <text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Label with an action</text>
4
+ <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="v0-cp0"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="v0-ct1"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="v0-cp2"><rect x="365" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="319" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp0)"><g clip-path="url(#v0-ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">TEAM MEMBERS</text></g></g><rect x="356.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp2)"><g transform="translate(365 33)" color="rgb(174, 174, 178)"><svg data-lucide="plus" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="Arial" style="overflow:hidden" width="18" height="18"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g></svg>
5
+ <text x="16" y="160" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Label with a count pill</text>
6
+ <svg x="16" y="168" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="v1-cp0"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="v1-ct1"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="v1-ct2"><rect x="140" y="31.2" width="23" height="21.6"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v1-cp0)"><g clip-path="url(#v1-ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">OPEN TICKETS</text></g></g><rect x="140" y="31.2" width="23" height="21.6" rx="10.8" fill="rgb(17,17,19)"/><text x="145.64" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(174,174,178)">12</text></svg>
7
+ <text x="16" y="290" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Disclosure toggle, collapsed</text>
8
+ <svg x="16" y="298" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="v2-cp0"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="v2-ct1"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="v2-cp2"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v2-cp0)"><g clip-path="url(#v2-ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">ARCHIVED</text></g></g><g clip-path="url(#v2-cp2)"><g transform="translate(362 33)" color="rgb(174, 174, 178)"><svg data-lucide="chevron-right" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="18" height="18"><path d="m9 18 6-6-6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g></svg>
9
+ <text x="16" y="420" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Disclosure toggle, expanded</text>
10
+ <svg x="16" y="428" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="v3-cp0"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="v3-ct1"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="v3-ct2"><rect x="96.8" y="31.2" width="21.6" height="21.6"/></clipPath><clipPath id="v3-cp3"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v3-cp0)"><g clip-path="url(#v3-ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">RECENT</text></g></g><rect x="96.8" y="31.2" width="21.6" height="21.6" rx="10.8" fill="rgb(17,17,19)"/><text x="104.25" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(174,174,178)">5</text><g transform="rotate(90 371 42)"><g clip-path="url(#v3-cp3)"><g transform="translate(362 33)" color="rgb(174, 174, 178)"><svg data-lucide="chevron-right" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="18" height="18"><path d="m9 18 6-6-6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g></g></svg>
11
+ </svg>
package/docs/design/templates/list-header.svg ADDED
@@ -0,0 +1,11 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="452" height="536" viewBox="0 0 452 536">
2
+ <rect width="452" height="536" fill="#ffffff"/>
3
+ <text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Label with an action</text>
4
+ <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="v0-cp0"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="v0-ct1"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="v0-cp2"><rect x="365" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="319" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp0)"><g clip-path="url(#v0-ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">TEAM MEMBERS</text></g></g><rect x="356.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp2)"><g transform="translate(365 33)" color="rgb(110, 110, 115)"><svg data-lucide="plus" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="Arial" style="overflow:hidden" width="18" height="18"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g></svg>
5
+ <text x="16" y="160" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Label with a count pill</text>
6
+ <svg x="16" y="168" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="v1-cp0"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="v1-ct1"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="v1-ct2"><rect x="140" y="31.2" width="23" height="21.6"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v1-cp0)"><g clip-path="url(#v1-ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">OPEN TICKETS</text></g></g><rect x="140" y="31.2" width="23" height="21.6" rx="10.8" fill="rgb(242,242,247)"/><text x="145.64" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(110,110,115)">12</text></svg>
7
+ <text x="16" y="290" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Disclosure toggle, collapsed</text>
8
+ <svg x="16" y="298" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="v2-cp0"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="v2-ct1"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="v2-cp2"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v2-cp0)"><g clip-path="url(#v2-ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">ARCHIVED</text></g></g><g clip-path="url(#v2-cp2)"><g transform="translate(362 33)" color="rgb(110, 110, 115)"><svg data-lucide="chevron-right" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="18" height="18"><path d="m9 18 6-6-6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g></svg>
9
+ <text x="16" y="420" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Disclosure toggle, expanded</text>
10
+ <svg x="16" y="428" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="v3-cp0"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="v3-ct1"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="v3-ct2"><rect x="96.8" y="31.2" width="21.6" height="21.6"/></clipPath><clipPath id="v3-cp3"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v3-cp0)"><g clip-path="url(#v3-ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">RECENT</text></g></g><rect x="96.8" y="31.2" width="21.6" height="21.6" rx="10.8" fill="rgb(242,242,247)"/><text x="104.25" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(110,110,115)">5</text><g transform="rotate(90 371 42)"><g clip-path="url(#v3-cp3)"><g transform="translate(362 33)" color="rgb(110, 110, 115)"><svg data-lucide="chevron-right" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="18" height="18"><path d="m9 18 6-6-6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g></g></svg>
11
+ </svg>
package/docs/design/templates/list-item/default-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="cp1"><rect x="69" y="33" width="246" height="18"/></clipPath><clipPath id="ct2"><rect x="69" y="33" width="246" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g transform="translate(37 30)" color="rgb(245, 245, 247)"><svg data-lucide="file-text" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#cp1)"><g clip-path="url(#ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Overview</text></g></g></svg>
package/docs/design/templates/list-item/default.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="cp1"><rect x="69" y="33" width="246" height="18"/></clipPath><clipPath id="ct2"><rect x="69" y="33" width="246" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g transform="translate(37 30)" color="rgb(29, 29, 31)"><svg data-lucide="file-text" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#cp1)"><g clip-path="url(#ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Overview</text></g></g></svg>
package/docs/design/templates/list-item/multiline-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 112" width="380" height="112"><defs><clipPath id="cp0"><rect x="37" y="26" width="24" height="24"/></clipPath><clipPath id="ct1"><rect x="69" y="29" width="246" height="36"/></clipPath></defs><rect x="28.5" y="20.5" width="303" height="53" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g transform="translate(37 26)" color="rgb(245, 245, 247)"><svg data-lucide="star" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M11.5 2.3a.5.5 0 0 1 1 0L14.8 7a2 2 0 0 0 1.6 1l5.1.8a.5.5 0 0 1 .3.9l-3.7 3.6a2 2 0 0 0-.6 2l.9 5a.5.5 0 0 1-.8.6L13 18.6a2 2 0 0 0-2 0L6.4 21a.5.5 0 0 1-.8-.6l1-5a2 2 0 0 0-.7-2L2.2 9.8a.5.5 0 0 1 .3-1l5.1-.7A2 2 0 0 0 9.2 7Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><text x="69" y="44" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Migrate the legacy billing pipeline</text><text x="69" y="62" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">to the new ledger service</text></svg>
package/docs/design/templates/list-item/multiline.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 112" width="380" height="112"><defs><clipPath id="cp0"><rect x="37" y="26" width="24" height="24"/></clipPath><clipPath id="ct1"><rect x="69" y="29" width="246" height="36"/></clipPath></defs><rect x="28.5" y="20.5" width="303" height="53" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g transform="translate(37 26)" color="rgb(29, 29, 31)"><svg data-lucide="star" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M11.5 2.3a.5.5 0 0 1 1 0L14.8 7a2 2 0 0 0 1.6 1l5.1.8a.5.5 0 0 1 .3.9l-3.7 3.6a2 2 0 0 0-.6 2l.9 5a.5.5 0 0 1-.8.6L13 18.6a2 2 0 0 0-2 0L6.4 21a.5.5 0 0 1-.8-.6l1-5a2 2 0 0 0-.7-2L2.2 9.8a.5.5 0 0 1 .3-1l5.1-.7A2 2 0 0 0 9.2 7Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><text x="69" y="44" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Migrate the legacy billing pipeline</text><text x="69" y="62" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">to the new ledger service</text></svg>
package/docs/design/templates/list-item/selected-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="cp1"><rect x="69" y="33" width="246" height="18"/></clipPath><clipPath id="ct2"><rect x="69" y="33" width="246" height="18"/></clipPath></defs><rect x="28" y="20" width="304" height="44" rx="12" fill="rgb(40,57,66)"/><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#cp0)"><g transform="translate(37 30)" color="rgb(138, 203, 255)"><svg data-lucide="settings" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#cp1)"><g clip-path="url(#ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(138,203,255)">Billing &amp; plans</text></g></g></svg>
package/docs/design/templates/list-item/selected.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="cp1"><rect x="69" y="33" width="246" height="18"/></clipPath><clipPath id="ct2"><rect x="69" y="33" width="246" height="18"/></clipPath></defs><rect x="28" y="20" width="304" height="44" rx="12" fill="rgb(214,236,255)"/><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgb(166,213,255)" stroke-width="1"/><g clip-path="url(#cp0)"><g transform="translate(37 30)" color="rgb(30, 110, 244)"><svg data-lucide="settings" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#cp1)"><g clip-path="url(#ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(30,110,244)">Billing &amp; plans</text></g></g></svg>
package/docs/design/templates/list-item/trailing-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="cp1"><rect x="69" y="33" width="236.3" height="18"/></clipPath><clipPath id="ct2"><rect x="69" y="33" width="236.3" height="18"/></clipPath><clipPath id="ct3"><rect x="313.3" y="33" width="9.7" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g transform="translate(37 30)" color="rgb(245, 245, 247)"><svg data-lucide="bell" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M10.3 21a2 2 0 0 0 3.4 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#cp1)"><g clip-path="url(#ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Notifications</text></g></g><text x="313.28" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">3</text></svg>
package/docs/design/templates/list-item/trailing.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="cp1"><rect x="69" y="33" width="236.3" height="18"/></clipPath><clipPath id="ct2"><rect x="69" y="33" width="236.3" height="18"/></clipPath><clipPath id="ct3"><rect x="313.3" y="33" width="9.7" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g transform="translate(37 30)" color="rgb(29, 29, 31)"><svg data-lucide="bell" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M10.3 21a2 2 0 0 0 3.4 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#cp1)"><g clip-path="url(#ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Notifications</text></g></g><text x="313.28" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">3</text></svg>
package/docs/design/templates/list-item-dark.svg ADDED
@@ -0,0 +1,11 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="412" height="556" viewBox="0 0 412 556">
2
+ <rect width="412" height="556" fill="#1c1c1e"/>
3
+ <text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Icon and label</text>
4
+ <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="v0-cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="v0-cp1"><rect x="69" y="33" width="246" height="18"/></clipPath><clipPath id="v0-ct2"><rect x="69" y="33" width="246" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp0)"><g transform="translate(37 30)" color="rgb(245, 245, 247)"><svg data-lucide="file-text" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#v0-cp1)"><g clip-path="url(#v0-ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Overview</text></g></g></svg>
5
+ <text x="16" y="160" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Selected (aria-current)</text>
6
+ <svg x="16" y="168" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="v1-cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="v1-cp1"><rect x="69" y="33" width="246" height="18"/></clipPath><clipPath id="v1-ct2"><rect x="69" y="33" width="246" height="18"/></clipPath></defs><rect x="28" y="20" width="304" height="44" rx="12" fill="rgb(40,57,66)"/><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#v1-cp0)"><g transform="translate(37 30)" color="rgb(138, 203, 255)"><svg data-lucide="settings" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#v1-cp1)"><g clip-path="url(#v1-ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(138,203,255)">Billing &amp; plans</text></g></g></svg>
7
+ <text x="16" y="290" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Trailing metadata</text>
8
+ <svg x="16" y="298" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="v2-cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="v2-cp1"><rect x="69" y="33" width="236.3" height="18"/></clipPath><clipPath id="v2-ct2"><rect x="69" y="33" width="236.3" height="18"/></clipPath><clipPath id="v2-ct3"><rect x="313.3" y="33" width="9.7" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v2-cp0)"><g transform="translate(37 30)" color="rgb(245, 245, 247)"><svg data-lucide="bell" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M10.3 21a2 2 0 0 0 3.4 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#v2-cp1)"><g clip-path="url(#v2-ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Notifications</text></g></g><text x="313.28" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">3</text></svg>
9
+ <text x="16" y="420" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Multiline label (icon aligns to first line)</text>
10
+ <svg x="16" y="428" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 112" width="380" height="112"><defs><clipPath id="v3-cp0"><rect x="37" y="26" width="24" height="24"/></clipPath><clipPath id="v3-ct1"><rect x="69" y="29" width="246" height="36"/></clipPath></defs><rect x="28.5" y="20.5" width="303" height="53" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v3-cp0)"><g transform="translate(37 26)" color="rgb(245, 245, 247)"><svg data-lucide="star" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M11.5 2.3a.5.5 0 0 1 1 0L14.8 7a2 2 0 0 0 1.6 1l5.1.8a.5.5 0 0 1 .3.9l-3.7 3.6a2 2 0 0 0-.6 2l.9 5a.5.5 0 0 1-.8.6L13 18.6a2 2 0 0 0-2 0L6.4 21a.5.5 0 0 1-.8-.6l1-5a2 2 0 0 0-.7-2L2.2 9.8a.5.5 0 0 1 .3-1l5.1-.7A2 2 0 0 0 9.2 7Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><text x="69" y="44" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Migrate the legacy billing pipeline</text><text x="69" y="62" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">to the new ledger service</text></svg>
11
+ </svg>
package/docs/design/templates/list-item.svg ADDED
@@ -0,0 +1,11 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="412" height="556" viewBox="0 0 412 556">
2
+ <rect width="412" height="556" fill="#ffffff"/>
3
+ <text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Icon and label</text>
4
+ <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="v0-cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="v0-cp1"><rect x="69" y="33" width="246" height="18"/></clipPath><clipPath id="v0-ct2"><rect x="69" y="33" width="246" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp0)"><g transform="translate(37 30)" color="rgb(29, 29, 31)"><svg data-lucide="file-text" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#v0-cp1)"><g clip-path="url(#v0-ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Overview</text></g></g></svg>
5
+ <text x="16" y="160" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Selected (aria-current)</text>
6
+ <svg x="16" y="168" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="v1-cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="v1-cp1"><rect x="69" y="33" width="246" height="18"/></clipPath><clipPath id="v1-ct2"><rect x="69" y="33" width="246" height="18"/></clipPath></defs><rect x="28" y="20" width="304" height="44" rx="12" fill="rgb(214,236,255)"/><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgb(166,213,255)" stroke-width="1"/><g clip-path="url(#v1-cp0)"><g transform="translate(37 30)" color="rgb(30, 110, 244)"><svg data-lucide="settings" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#v1-cp1)"><g clip-path="url(#v1-ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(30,110,244)">Billing &amp; plans</text></g></g></svg>
7
+ <text x="16" y="290" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Trailing metadata</text>
8
+ <svg x="16" y="298" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="v2-cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="v2-cp1"><rect x="69" y="33" width="236.3" height="18"/></clipPath><clipPath id="v2-ct2"><rect x="69" y="33" width="236.3" height="18"/></clipPath><clipPath id="v2-ct3"><rect x="313.3" y="33" width="9.7" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v2-cp0)"><g transform="translate(37 30)" color="rgb(29, 29, 31)"><svg data-lucide="bell" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M10.3 21a2 2 0 0 0 3.4 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#v2-cp1)"><g clip-path="url(#v2-ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Notifications</text></g></g><text x="313.28" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">3</text></svg>
9
+ <text x="16" y="420" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Multiline label (icon aligns to first line)</text>
10
+ <svg x="16" y="428" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 112" width="380" height="112"><defs><clipPath id="v3-cp0"><rect x="37" y="26" width="24" height="24"/></clipPath><clipPath id="v3-ct1"><rect x="69" y="29" width="246" height="36"/></clipPath></defs><rect x="28.5" y="20.5" width="303" height="53" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v3-cp0)"><g transform="translate(37 26)" color="rgb(29, 29, 31)"><svg data-lucide="star" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M11.5 2.3a.5.5 0 0 1 1 0L14.8 7a2 2 0 0 0 1.6 1l5.1.8a.5.5 0 0 1 .3.9l-3.7 3.6a2 2 0 0 0-.6 2l.9 5a.5.5 0 0 1-.8.6L13 18.6a2 2 0 0 0-2 0L6.4 21a.5.5 0 0 1-.8-.6l1-5a2 2 0 0 0-.7-2L2.2 9.8a.5.5 0 0 1 .3-1l5.1-.7A2 2 0 0 0 9.2 7Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><text x="69" y="44" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Migrate the legacy billing pipeline</text><text x="69" y="62" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">to the new ledger service</text></svg>
11
+ </svg>
package/docs/design/templates/panel-header/icon-actions-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 112" width="720" height="112"><defs><clipPath id="cp0"><rect x="28" y="28" width="551.7" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="551.7" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="cp3"><rect x="80" y="28" width="154.5" height="44"/></clipPath><clipPath id="ct4"><rect x="80" y="28" width="154.5" height="44"/></clipPath><clipPath id="ct5"><rect x="587.7" y="34" width="64.3" height="32"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(34,43,48)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(34,43,48)" stroke-width="1"/><g clip-path="url(#cp2)"><g transform="translate(39 39)" color="rgb(138, 203, 255)"><svg data-lucide="folder" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="22" height="22"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#cp3)"><g clip-path="url(#ct4)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Package details</text></g></g></g></g><rect x="587.7" y="34" width="64.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="588.5" y="34.5" width="63" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="600.69" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Done</text></svg>
package/docs/design/templates/panel-header/icon-actions.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 112" width="720" height="112"><defs><clipPath id="cp0"><rect x="28" y="28" width="551.7" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="551.7" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="cp3"><rect x="80" y="28" width="154.5" height="44"/></clipPath><clipPath id="ct4"><rect x="80" y="28" width="154.5" height="44"/></clipPath><clipPath id="ct5"><rect x="587.7" y="34" width="64.3" height="32"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(235,245,255)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(235,245,255)" stroke-width="1"/><g clip-path="url(#cp2)"><g transform="translate(39 39)" color="rgb(30, 110, 244)"><svg data-lucide="folder" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="22" height="22"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#cp3)"><g clip-path="url(#ct4)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Package details</text></g></g></g></g><rect x="587.7" y="34" width="64.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="588.5" y="34.5" width="63" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="600.69" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Done</text></svg>
package/docs/design/templates/panel-header/icon-summary-actions-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 136" width="720" height="136"><defs><clipPath id="cp0"><rect x="28" y="28" width="550.7" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="550.7" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="cp3"><rect x="80" y="28" width="189.8" height="44"/></clipPath><clipPath id="ct4"><rect x="80" y="28" width="189.8" height="44"/></clipPath><clipPath id="ct5"><rect x="586.7" y="34" width="65.3" height="32"/></clipPath><clipPath id="cp6"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="ct7"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(34,43,48)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(34,43,48)" stroke-width="1"/><g clip-path="url(#cp2)"><g transform="translate(39 39)" color="rgb(138, 203, 255)"><svg data-lucide="file-text" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="22" height="22"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#cp3)"><g clip-path="url(#ct4)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Northstar migration</text></g></g></g></g><rect x="586.7" y="34" width="65.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="587.5" y="34.5" width="64" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="599.66" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Open</text><g clip-path="url(#cp6)"><g clip-path="url(#ct7)"><text x="88" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">In review · updated today</text></g></g></svg>
package/docs/design/templates/panel-header/icon-summary-actions.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 136" width="720" height="136"><defs><clipPath id="cp0"><rect x="28" y="28" width="550.7" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="550.7" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="cp3"><rect x="80" y="28" width="189.8" height="44"/></clipPath><clipPath id="ct4"><rect x="80" y="28" width="189.8" height="44"/></clipPath><clipPath id="ct5"><rect x="586.7" y="34" width="65.3" height="32"/></clipPath><clipPath id="cp6"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="ct7"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(235,245,255)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(235,245,255)" stroke-width="1"/><g clip-path="url(#cp2)"><g transform="translate(39 39)" color="rgb(30, 110, 244)"><svg data-lucide="file-text" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="22" height="22"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#cp3)"><g clip-path="url(#ct4)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Northstar migration</text></g></g></g></g><rect x="586.7" y="34" width="65.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="587.5" y="34.5" width="64" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="599.66" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Open</text><g clip-path="url(#cp6)"><g clip-path="url(#ct7)"><text x="88" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">In review · updated today</text></g></g></svg>
package/docs/design/templates/panel-header/no-icon-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 136" width="720" height="136"><defs><clipPath id="cp0"><rect x="28" y="28" width="557.5" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="557.5" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="28" width="191.4" height="44"/></clipPath><clipPath id="ct3"><rect x="28" y="28" width="191.4" height="44"/></clipPath><clipPath id="ct4"><rect x="593.5" y="34" width="58.5" height="32"/></clipPath><clipPath id="cp5"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="ct6"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Workspace settings</text></g></g></g></g><rect x="593.5" y="34" width="58.5" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="594.5" y="34.5" width="57" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="606.53" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">New</text><g clip-path="url(#cp5)"><g clip-path="url(#ct6)"><text x="36" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Manage members, billing, and integrations.</text></g></g></svg>
package/docs/design/templates/panel-header/no-icon.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 136" width="720" height="136"><defs><clipPath id="cp0"><rect x="28" y="28" width="557.5" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="557.5" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="28" width="191.4" height="44"/></clipPath><clipPath id="ct3"><rect x="28" y="28" width="191.4" height="44"/></clipPath><clipPath id="ct4"><rect x="593.5" y="34" width="58.5" height="32"/></clipPath><clipPath id="cp5"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="ct6"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Workspace settings</text></g></g></g></g><rect x="593.5" y="34" width="58.5" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="594.5" y="34.5" width="57" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="606.53" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">New</text><g clip-path="url(#cp5)"><g clip-path="url(#ct6)"><text x="36" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Manage members, billing, and integrations.</text></g></g></svg>
package/docs/design/templates/panel-header/page-heading-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 112" width="720" height="112"><defs><clipPath id="cp0"><rect x="28" y="28" width="500.7" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="500.7" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="28" width="144.6" height="44"/></clipPath><clipPath id="ct3"><rect x="28" y="28" width="144.6" height="44"/></clipPath><clipPath id="ct4"><rect x="536.7" y="34" width="115.3" height="32"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">UI foundations</text></g></g></g></g><rect x="536.7" y="34" width="115.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="537.5" y="34.5" width="114" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="549.7" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">New pattern</text></svg>
package/docs/design/templates/panel-header/page-heading.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 112" width="720" height="112"><defs><clipPath id="cp0"><rect x="28" y="28" width="500.7" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="500.7" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="28" width="144.6" height="44"/></clipPath><clipPath id="ct3"><rect x="28" y="28" width="144.6" height="44"/></clipPath><clipPath id="ct4"><rect x="536.7" y="34" width="115.3" height="32"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">UI foundations</text></g></g></g></g><rect x="536.7" y="34" width="115.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="537.5" y="34.5" width="114" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="549.7" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">New pattern</text></svg>
package/docs/design/templates/panel-header/title-only-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 104" width="720" height="104"><defs><clipPath id="cp0"><rect x="28" y="28" width="616" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="616" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="28" width="146.9" height="44"/></clipPath><clipPath id="ct3"><rect x="28" y="28" width="146.9" height="44"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Recent activity</text></g></g></g></g></svg>
package/docs/design/templates/panel-header/title-only.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 104" width="720" height="104"><defs><clipPath id="cp0"><rect x="28" y="28" width="616" height="44"/></clipPath><clipPath id="ov1"><rect x="28" y="28" width="616" height="44" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="28" width="146.9" height="44"/></clipPath><clipPath id="ct3"><rect x="28" y="28" width="146.9" height="44"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Recent activity</text></g></g></g></g></svg>
package/docs/design/templates/panel-header-dark.svg ADDED
@@ -0,0 +1,13 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="752" height="806" viewBox="0 0 752 806">
2
+ <rect width="752" height="806" fill="#1c1c1e"/>
3
+ <text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Icon, summary, and action</text>
4
+ <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 136" width="720" height="136"><defs><clipPath id="v0-cp0"><rect x="28" y="28" width="550.7" height="44"/></clipPath><clipPath id="v0-ov1"><rect x="28" y="28" width="550.7" height="44" rx="0"/></clipPath><clipPath id="v0-cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="v0-cp3"><rect x="80" y="28" width="189.8" height="44"/></clipPath><clipPath id="v0-ct4"><rect x="80" y="28" width="189.8" height="44"/></clipPath><clipPath id="v0-ct5"><rect x="586.7" y="34" width="65.3" height="32"/></clipPath><clipPath id="v0-cp6"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="v0-ct7"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#v0-cp0)"><g clip-path="url(#v0-ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(34,43,48)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(34,43,48)" stroke-width="1"/><g clip-path="url(#v0-cp2)"><g transform="translate(39 39)" color="rgb(138, 203, 255)"><svg data-lucide="file-text" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="22" height="22"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#v0-cp3)"><g clip-path="url(#v0-ct4)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Northstar migration</text></g></g></g></g><rect x="586.7" y="34" width="65.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="587.5" y="34.5" width="64" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="599.66" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Open</text><g clip-path="url(#v0-cp6)"><g clip-path="url(#v0-ct7)"><text x="88" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">In review · updated today</text></g></g></svg>
5
+ <text x="16" y="204" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Icon and action, no summary</text>
6
+ <svg x="16" y="212" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 112" width="720" height="112"><defs><clipPath id="v1-cp0"><rect x="28" y="28" width="551.7" height="44"/></clipPath><clipPath id="v1-ov1"><rect x="28" y="28" width="551.7" height="44" rx="0"/></clipPath><clipPath id="v1-cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="v1-cp3"><rect x="80" y="28" width="154.5" height="44"/></clipPath><clipPath id="v1-ct4"><rect x="80" y="28" width="154.5" height="44"/></clipPath><clipPath id="v1-ct5"><rect x="587.7" y="34" width="64.3" height="32"/></clipPath></defs><g clip-path="url(#v1-cp0)"><g clip-path="url(#v1-ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(34,43,48)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(34,43,48)" stroke-width="1"/><g clip-path="url(#v1-cp2)"><g transform="translate(39 39)" color="rgb(138, 203, 255)"><svg data-lucide="folder" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="22" height="22"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#v1-cp3)"><g clip-path="url(#v1-ct4)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Package details</text></g></g></g></g><rect x="587.7" y="34" width="64.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="588.5" y="34.5" width="63" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="600.69" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Done</text></svg>
7
+ <text x="16" y="354" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">No icon, summary and action</text>
8
+ <svg x="16" y="362" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 136" width="720" height="136"><defs><clipPath id="v2-cp0"><rect x="28" y="28" width="557.5" height="44"/></clipPath><clipPath id="v2-ov1"><rect x="28" y="28" width="557.5" height="44" rx="0"/></clipPath><clipPath id="v2-cp2"><rect x="28" y="28" width="191.4" height="44"/></clipPath><clipPath id="v2-ct3"><rect x="28" y="28" width="191.4" height="44"/></clipPath><clipPath id="v2-ct4"><rect x="593.5" y="34" width="58.5" height="32"/></clipPath><clipPath id="v2-cp5"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="v2-ct6"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#v2-cp0)"><g clip-path="url(#v2-ov1)"><g clip-path="url(#v2-cp2)"><g clip-path="url(#v2-ct3)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Workspace settings</text></g></g></g></g><rect x="593.5" y="34" width="58.5" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="594.5" y="34.5" width="57" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="606.53" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">New</text><g clip-path="url(#v2-cp5)"><g clip-path="url(#v2-ct6)"><text x="36" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Manage members, billing, and integrations.</text></g></g></svg>
9
+ <text x="16" y="528" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Title only</text>
10
+ <svg x="16" y="536" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 104" width="720" height="104"><defs><clipPath id="v3-cp0"><rect x="28" y="28" width="616" height="44"/></clipPath><clipPath id="v3-ov1"><rect x="28" y="28" width="616" height="44" rx="0"/></clipPath><clipPath id="v3-cp2"><rect x="28" y="28" width="146.9" height="44"/></clipPath><clipPath id="v3-ct3"><rect x="28" y="28" width="146.9" height="44"/></clipPath></defs><g clip-path="url(#v3-cp0)"><g clip-path="url(#v3-ov1)"><g clip-path="url(#v3-cp2)"><g clip-path="url(#v3-ct3)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">Recent activity</text></g></g></g></g></svg>
11
+ <text x="16" y="670" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Page heading (h1) with action</text>
12
+ <svg x="16" y="678" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 112" width="720" height="112"><defs><clipPath id="v4-cp0"><rect x="28" y="28" width="500.7" height="44"/></clipPath><clipPath id="v4-ov1"><rect x="28" y="28" width="500.7" height="44" rx="0"/></clipPath><clipPath id="v4-cp2"><rect x="28" y="28" width="144.6" height="44"/></clipPath><clipPath id="v4-ct3"><rect x="28" y="28" width="144.6" height="44"/></clipPath><clipPath id="v4-ct4"><rect x="536.7" y="34" width="115.3" height="32"/></clipPath></defs><g clip-path="url(#v4-cp0)"><g clip-path="url(#v4-ov1)"><g clip-path="url(#v4-cp2)"><g clip-path="url(#v4-ct3)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(245,245,247)">UI foundations</text></g></g></g></g><rect x="536.7" y="34" width="115.3" height="32" rx="16" fill="rgb(28,28,30)"/><rect x="537.5" y="34.5" width="114" height="31" rx="15.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="549.7" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">New pattern</text></svg>
13
+ </svg>
package/docs/design/templates/panel-header.svg ADDED
@@ -0,0 +1,13 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="752" height="806" viewBox="0 0 752 806">
2
+ <rect width="752" height="806" fill="#ffffff"/>
3
+ <text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Icon, summary, and action</text>
4
+ <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 136" width="720" height="136"><defs><clipPath id="v0-cp0"><rect x="28" y="28" width="550.7" height="44"/></clipPath><clipPath id="v0-ov1"><rect x="28" y="28" width="550.7" height="44" rx="0"/></clipPath><clipPath id="v0-cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="v0-cp3"><rect x="80" y="28" width="189.8" height="44"/></clipPath><clipPath id="v0-ct4"><rect x="80" y="28" width="189.8" height="44"/></clipPath><clipPath id="v0-ct5"><rect x="586.7" y="34" width="65.3" height="32"/></clipPath><clipPath id="v0-cp6"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="v0-ct7"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#v0-cp0)"><g clip-path="url(#v0-ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(235,245,255)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(235,245,255)" stroke-width="1"/><g clip-path="url(#v0-cp2)"><g transform="translate(39 39)" color="rgb(30, 110, 244)"><svg data-lucide="file-text" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="22" height="22"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#v0-cp3)"><g clip-path="url(#v0-ct4)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Northstar migration</text></g></g></g></g><rect x="586.7" y="34" width="65.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="587.5" y="34.5" width="64" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="599.66" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Open</text><g clip-path="url(#v0-cp6)"><g clip-path="url(#v0-ct7)"><text x="88" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">In review · updated today</text></g></g></svg>
5
+ <text x="16" y="204" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Icon and action, no summary</text>
6
+ <svg x="16" y="212" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 112" width="720" height="112"><defs><clipPath id="v1-cp0"><rect x="28" y="28" width="551.7" height="44"/></clipPath><clipPath id="v1-ov1"><rect x="28" y="28" width="551.7" height="44" rx="0"/></clipPath><clipPath id="v1-cp2"><rect x="39" y="39" width="22" height="22"/></clipPath><clipPath id="v1-cp3"><rect x="80" y="28" width="154.5" height="44"/></clipPath><clipPath id="v1-ct4"><rect x="80" y="28" width="154.5" height="44"/></clipPath><clipPath id="v1-ct5"><rect x="587.7" y="34" width="64.3" height="32"/></clipPath></defs><g clip-path="url(#v1-cp0)"><g clip-path="url(#v1-ov1)"><rect x="28" y="28" width="44" height="44" rx="22" fill="rgb(235,245,255)"/><rect x="28.5" y="28.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(235,245,255)" stroke-width="1"/><g clip-path="url(#v1-cp2)"><g transform="translate(39 39)" color="rgb(30, 110, 244)"><svg data-lucide="folder" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="22" height="22"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#v1-cp3)"><g clip-path="url(#v1-ct4)"><text x="88" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Package details</text></g></g></g></g><rect x="587.7" y="34" width="64.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="588.5" y="34.5" width="63" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="600.69" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Done</text></svg>
7
+ <text x="16" y="354" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">No icon, summary and action</text>
8
+ <svg x="16" y="362" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 136" width="720" height="136"><defs><clipPath id="v2-cp0"><rect x="28" y="28" width="557.5" height="44"/></clipPath><clipPath id="v2-ov1"><rect x="28" y="28" width="557.5" height="44" rx="0"/></clipPath><clipPath id="v2-cp2"><rect x="28" y="28" width="191.4" height="44"/></clipPath><clipPath id="v2-ct3"><rect x="28" y="28" width="191.4" height="44"/></clipPath><clipPath id="v2-ct4"><rect x="593.5" y="34" width="58.5" height="32"/></clipPath><clipPath id="v2-cp5"><rect x="20" y="80" width="640" height="18"/></clipPath><clipPath id="v2-ct6"><rect x="20" y="80" width="640" height="18"/></clipPath></defs><g clip-path="url(#v2-cp0)"><g clip-path="url(#v2-ov1)"><g clip-path="url(#v2-cp2)"><g clip-path="url(#v2-ct3)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Workspace settings</text></g></g></g></g><rect x="593.5" y="34" width="58.5" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="594.5" y="34.5" width="57" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="606.53" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">New</text><g clip-path="url(#v2-cp5)"><g clip-path="url(#v2-ct6)"><text x="36" y="95" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Manage members, billing, and integrations.</text></g></g></svg>
9
+ <text x="16" y="528" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Title only</text>
10
+ <svg x="16" y="536" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 104" width="720" height="104"><defs><clipPath id="v3-cp0"><rect x="28" y="28" width="616" height="44"/></clipPath><clipPath id="v3-ov1"><rect x="28" y="28" width="616" height="44" rx="0"/></clipPath><clipPath id="v3-cp2"><rect x="28" y="28" width="146.9" height="44"/></clipPath><clipPath id="v3-ct3"><rect x="28" y="28" width="146.9" height="44"/></clipPath></defs><g clip-path="url(#v3-cp0)"><g clip-path="url(#v3-ov1)"><g clip-path="url(#v3-cp2)"><g clip-path="url(#v3-ct3)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">Recent activity</text></g></g></g></g></svg>
11
+ <text x="16" y="670" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Page heading (h1) with action</text>
12
+ <svg x="16" y="678" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 112" width="720" height="112"><defs><clipPath id="v4-cp0"><rect x="28" y="28" width="500.7" height="44"/></clipPath><clipPath id="v4-ov1"><rect x="28" y="28" width="500.7" height="44" rx="0"/></clipPath><clipPath id="v4-cp2"><rect x="28" y="28" width="144.6" height="44"/></clipPath><clipPath id="v4-ct3"><rect x="28" y="28" width="144.6" height="44"/></clipPath><clipPath id="v4-ct4"><rect x="536.7" y="34" width="115.3" height="32"/></clipPath></defs><g clip-path="url(#v4-cp0)"><g clip-path="url(#v4-ov1)"><g clip-path="url(#v4-cp2)"><g clip-path="url(#v4-ct3)"><text x="36" y="57" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="20" font-weight="650" fill="rgb(29,29,31)">UI foundations</text></g></g></g></g><rect x="536.7" y="34" width="115.3" height="32" rx="16" fill="rgb(255,255,255)"/><rect x="537.5" y="34.5" width="114" height="31" rx="15.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="549.7" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">New pattern</text></svg>
13
+ </svg>
package/docs/design/templates/segmented-control/equal-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 88" width="460" height="88"><defs><clipPath id="cp0"><rect x="20" y="20" width="210.3" height="44"/></clipPath><clipPath id="ov1"><rect x="21" y="21" width="208.3" height="42" rx="11"/></clipPath><filter id="sh2" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="ct3"><rect x="38.7" y="36" width="35.3" height="12"/></clipPath><clipPath id="ct4"><rect x="114.1" y="36" width="22" height="12"/></clipPath><clipPath id="ct5"><rect x="168.5" y="36" width="50.8" height="12"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="20" y="20" width="210.3" height="44" rx="12" fill="rgb(58,58,60)"/><rect x="20.5" y="20.5" width="209" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/></g><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><rect x="22" y="23" width="68.8" height="40" rx="12" fill="rgba(0,0,0,0.14)" filter="url(#sh2)"/><rect x="22" y="22" width="68.8" height="40" rx="12" fill="rgb(28,28,30)"/><rect x="22.5" y="22.5" width="68" height="39" rx="11.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="38.7" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(138,203,255)">Board</text><rect x="91.5" y="22.5" width="68" height="39" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="114.13" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">List</text><rect x="160.5" y="22.5" width="67" height="39" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="168.5" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">Timeline</text></g></g></svg>
package/docs/design/templates/segmented-control/equal.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 88" width="460" height="88"><defs><clipPath id="cp0"><rect x="20" y="20" width="210.3" height="44"/></clipPath><clipPath id="ov1"><rect x="21" y="21" width="208.3" height="42" rx="11"/></clipPath><filter id="sh2" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="ct3"><rect x="38.7" y="36" width="35.3" height="12"/></clipPath><clipPath id="ct4"><rect x="114.1" y="36" width="22" height="12"/></clipPath><clipPath id="ct5"><rect x="168.5" y="36" width="50.8" height="12"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="20" y="20" width="210.3" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="209" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/></g><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><rect x="22" y="23" width="68.8" height="40" rx="12" fill="rgba(0,0,0,0.14)" filter="url(#sh2)"/><rect x="22" y="22" width="68.8" height="40" rx="12" fill="rgb(255,255,255)"/><rect x="22.5" y="22.5" width="68" height="39" rx="11.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="38.7" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(30,110,244)">Board</text><rect x="91.5" y="22.5" width="68" height="39" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="114.13" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">List</text><rect x="160.5" y="22.5" width="67" height="39" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="168.5" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">Timeline</text></g></g></svg>
package/docs/design/templates/segmented-control/pill-small-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 88" width="460" height="88"><defs><clipPath id="cp0"><rect x="20" y="20" width="141.4" height="44"/></clipPath><clipPath id="ov1"><rect x="21" y="21" width="139.4" height="42" rx="21"/></clipPath><clipPath id="ct2"><rect x="31.5" y="36.5" width="21.1" height="11"/></clipPath><filter id="sh3" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="ct4"><rect x="70" y="36.5" width="30.3" height="11"/></clipPath><clipPath id="ct5"><rect x="116.3" y="36.5" width="35.1" height="11"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="20" y="20" width="141.4" height="44" rx="22" fill="rgb(58,58,60)"/><rect x="20.5" y="20.5" width="140" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#ov1)"><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="31.47" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(174,174,178)">Day</text><rect x="62" y="23" width="46.3" height="40" rx="20" fill="rgba(0,0,0,0.14)" filter="url(#sh3)"/><rect x="62" y="22" width="46.3" height="40" rx="20" fill="rgb(28,28,30)"/><rect x="62.5" y="22.5" width="45" height="39" rx="19.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="70" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(138,203,255)">Week</text><rect x="108.5" y="22.5" width="50" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="116.28" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(174,174,178)">Month</text></g></g></svg>