@kerfjs/ui 5.0.0-beta.50 → 5.0.0-beta.52

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 (212) hide show
  1. package/README.md +29 -5
  2. package/ai/compile-time-contracts-v1.json +5 -2
  3. package/ai/component-catalog-v2.d.ts +19 -1
  4. package/ai/component-catalog-v2.json +842 -127
  5. package/ai/component-catalog-v2.schema.json +33 -1
  6. package/ai/component-catalog.json +603 -126
  7. package/ai/component-catalog.schema.json +21 -1
  8. package/ai/public-api-signatures-v1.md +218 -31
  9. package/ai/skill.md +27 -24
  10. package/ai/webawesome-jsx-signatures-v1.md +1 -1
  11. package/analyzer/index.mjs +105 -35
  12. package/dist/app-tab.d.ts +10 -1
  13. package/dist/app-tab.js +1 -1
  14. package/dist/catalog-resources.d.ts +1 -1
  15. package/dist/catalog.d.ts +28 -5
  16. package/dist/catalog.js +66 -25
  17. package/dist/catalog.js.map +1 -1
  18. package/dist/{chunk-OL4TC3U2.js → chunk-2CE22Q2K.js} +9 -2
  19. package/dist/chunk-2CE22Q2K.js.map +1 -0
  20. package/dist/{chunk-SIU2AC5W.js → chunk-2S7OWAEV.js} +3 -3
  21. package/dist/{chunk-SIU2AC5W.js.map → chunk-2S7OWAEV.js.map} +1 -1
  22. package/dist/{chunk-2YOUUEWR.js → chunk-3S7OUHUN.js} +4 -4
  23. package/dist/{chunk-2YOUUEWR.js.map → chunk-3S7OUHUN.js.map} +1 -1
  24. package/dist/{chunk-2WMSE4MK.js → chunk-4XE2CDYB.js} +2 -2
  25. package/dist/{chunk-2WMSE4MK.js.map → chunk-4XE2CDYB.js.map} +1 -1
  26. package/dist/{chunk-V6RZWDII.js → chunk-7GUQYHKA.js} +19 -2
  27. package/dist/chunk-7GUQYHKA.js.map +1 -0
  28. package/dist/{chunk-ZNZ2JDBW.js → chunk-7IUSV4XG.js} +1 -1
  29. package/dist/chunk-7IUSV4XG.js.map +1 -0
  30. package/dist/{chunk-UMGY5JSP.js → chunk-7XJO4D6A.js} +22 -2
  31. package/dist/chunk-7XJO4D6A.js.map +1 -0
  32. package/dist/{chunk-KKNK3JUT.js → chunk-ABAXNUXU.js} +5 -5
  33. package/dist/chunk-ABAXNUXU.js.map +1 -0
  34. package/dist/{chunk-AQSKJ6U6.js → chunk-DNCOFEUL.js} +21 -2
  35. package/dist/chunk-DNCOFEUL.js.map +1 -0
  36. package/dist/chunk-EKYZCRCX.js +256 -0
  37. package/dist/chunk-EKYZCRCX.js.map +1 -0
  38. package/dist/{chunk-COUPLRZG.js → chunk-IR53BQUJ.js} +16 -12
  39. package/dist/chunk-IR53BQUJ.js.map +1 -0
  40. package/dist/{chunk-3V75EQIP.js → chunk-JGFZ42ZF.js} +3 -3
  41. package/dist/{chunk-3V75EQIP.js.map → chunk-JGFZ42ZF.js.map} +1 -1
  42. package/dist/{chunk-54HM36IQ.js → chunk-KAQUUTZR.js} +4 -2
  43. package/dist/chunk-KAQUUTZR.js.map +1 -0
  44. package/dist/{chunk-ZSYLBVWG.js → chunk-LIOXPQ7N.js} +4 -4
  45. package/dist/chunk-LIOXPQ7N.js.map +1 -0
  46. package/dist/{chunk-S6ZTTTV7.js → chunk-M6GLI6A6.js} +3 -3
  47. package/dist/{chunk-S6ZTTTV7.js.map → chunk-M6GLI6A6.js.map} +1 -1
  48. package/dist/{chunk-OQI7RCRP.js → chunk-MTM43SJO.js} +7 -1
  49. package/dist/chunk-MTM43SJO.js.map +1 -0
  50. package/dist/{chunk-5CE64WGC.js → chunk-OSCL5TKR.js} +3 -3
  51. package/dist/{chunk-5CE64WGC.js.map → chunk-OSCL5TKR.js.map} +1 -1
  52. package/dist/{chunk-DARTMI5Z.js → chunk-SV22UIW4.js} +2 -2
  53. package/dist/{chunk-DARTMI5Z.js.map → chunk-SV22UIW4.js.map} +1 -1
  54. package/dist/{chunk-ELRMBQEC.js → chunk-T7C2VZUB.js} +17 -2
  55. package/dist/chunk-T7C2VZUB.js.map +1 -0
  56. package/dist/{chunk-DJKWFYAA.js → chunk-YZV2PTY4.js} +3 -3
  57. package/dist/{chunk-DJKWFYAA.js.map → chunk-YZV2PTY4.js.map} +1 -1
  58. package/dist/collapsible-panel.d.ts +1 -1
  59. package/dist/collapsible-panel.js.map +1 -1
  60. package/dist/css-values.d.ts +41 -3
  61. package/dist/css-values.js +1 -1
  62. package/dist/grid.d.ts +15 -1
  63. package/dist/grid.js +2 -1
  64. package/dist/index.d.ts +1 -1
  65. package/dist/index.js +19 -19
  66. package/dist/list-action-row.js +1 -1
  67. package/dist/list-header.js +1 -1
  68. package/dist/list-item.js +1 -1
  69. package/dist/list.d.ts +21 -2
  70. package/dist/list.js +2 -1
  71. package/dist/nav-stack.js +1 -1
  72. package/dist/pane.d.ts +17 -2
  73. package/dist/pane.js +1 -1
  74. package/dist/row.d.ts +19 -1
  75. package/dist/row.js +2 -1
  76. package/dist/segmented-control.js +1 -1
  77. package/dist/select.d.ts +13 -3
  78. package/dist/select.js +1 -1
  79. package/dist/skeleton.d.ts +5 -1
  80. package/dist/skeleton.js +1 -1
  81. package/dist/spacer.js +1 -1
  82. package/dist/split-view.js +1 -1
  83. package/dist/state-banner.js +1 -1
  84. package/dist/styles/app-tab.css +9 -0
  85. package/dist/styles/catalog/components/catalog-example-stack.css +4 -1
  86. package/dist/styles/catalog/components/catalog-example.css +145 -0
  87. package/dist/styles/collapsible-panel.css +132 -4
  88. package/dist/styles/document.css +23 -0
  89. package/dist/styles/foundation.css +21 -7
  90. package/dist/styles/grid.css +10 -0
  91. package/dist/styles/list-header.css +45 -0
  92. package/dist/styles/list-inset-control.css +8 -1
  93. package/dist/styles/list-item.css +6 -0
  94. package/dist/styles/list.css +11 -0
  95. package/dist/styles/nav-stack.css +89 -2
  96. package/dist/styles/pane.css +86 -1
  97. package/dist/styles/resizable-region.css +93 -5
  98. package/dist/styles/row.css +10 -0
  99. package/dist/styles/select.css +39 -4
  100. package/dist/styles/skeleton.css +4 -1
  101. package/dist/styles/split-view.css +107 -1
  102. package/dist/styles/tab-scaffold.css +64 -1
  103. package/dist/styles/text.css +6 -0
  104. package/dist/styles/toolbar-control-group.css +90 -11
  105. package/dist/styles/toolbar-text.css +4 -1
  106. package/dist/styles/toolbar.css +130 -38
  107. package/dist/styles/webawesome.css +48 -2
  108. package/dist/styles/workbench.css +136 -4
  109. package/dist/text.d.ts +4 -3
  110. package/dist/text.js +1 -1
  111. package/dist/toolbar-text.js +1 -1
  112. package/dist/toolbar.d.ts +24 -3
  113. package/dist/toolbar.js +1 -1
  114. package/dist/{types-CzgSrFXP.d.ts → types-CEsieBZi.d.ts} +6 -1
  115. package/dist/value-table.js +1 -1
  116. package/dist/wire-resizable-regions.js +1 -1
  117. package/dist/wire-sidebar.d.ts +18 -3
  118. package/dist/wire-sidebar.js +96 -15
  119. package/dist/wire-sidebar.js.map +1 -1
  120. package/docs/accessibility.md +49 -9
  121. package/docs/app-layouts.md +73 -0
  122. package/docs/catalog.md +23 -2
  123. package/docs/collapsible-panel.md +83 -9
  124. package/docs/component-contract.md +36 -12
  125. package/docs/component-integration.md +9 -4
  126. package/docs/component-selection.md +25 -6
  127. package/docs/design/templates/list/stack-dark.svg +1 -1
  128. package/docs/design/templates/list/stack.svg +1 -1
  129. package/docs/design/templates/list-dark.svg +1 -1
  130. package/docs/design/templates/list-header/action-dark.svg +1 -1
  131. package/docs/design/templates/list-header/action.svg +1 -1
  132. package/docs/design/templates/list-header/count-dark.svg +1 -1
  133. package/docs/design/templates/list-header/count.svg +1 -1
  134. package/docs/design/templates/list-header/inline-action-dark.svg +1 -1
  135. package/docs/design/templates/list-header/inline-action.svg +1 -1
  136. package/docs/design/templates/list-header/toggle-expanded-dark.svg +1 -1
  137. package/docs/design/templates/list-header/toggle-expanded.svg +1 -1
  138. package/docs/design/templates/list-header-dark.svg +1 -1
  139. package/docs/design/templates/list-header.svg +1 -1
  140. package/docs/design/templates/list.svg +1 -1
  141. package/docs/design/templates/state-banner/info-badge-dark.svg +1 -1
  142. package/docs/design/templates/state-banner/info-badge.svg +1 -1
  143. package/docs/design/templates/state-banner-dark.svg +1 -1
  144. package/docs/design/templates/state-banner.svg +1 -1
  145. package/docs/design/templates/toolbar/title-and-actions-dark.svg +1 -1
  146. package/docs/design/templates/toolbar/title-and-actions.svg +1 -1
  147. package/docs/design/templates/toolbar-control-group/with-text-dark.svg +1 -1
  148. package/docs/design/templates/toolbar-control-group/with-text.svg +1 -1
  149. package/docs/design/templates/toolbar-control-group-dark.svg +1 -1
  150. package/docs/design/templates/toolbar-control-group.svg +1 -1
  151. package/docs/design/templates/toolbar-dark.svg +1 -1
  152. package/docs/design/templates/toolbar-text/default-dark.svg +1 -1
  153. package/docs/design/templates/toolbar-text/default.svg +1 -1
  154. package/docs/design/templates/toolbar-text/large-dark.svg +1 -1
  155. package/docs/design/templates/toolbar-text/large.svg +1 -1
  156. package/docs/design/templates/toolbar-text/small-dark.svg +1 -1
  157. package/docs/design/templates/toolbar-text/small.svg +1 -1
  158. package/docs/design/templates/toolbar-text-dark.svg +1 -1
  159. package/docs/design/templates/toolbar-text.svg +1 -1
  160. package/docs/design/templates/toolbar.svg +1 -1
  161. package/docs/document-baseline.md +31 -0
  162. package/docs/layout.md +86 -21
  163. package/docs/nav-stack.md +8 -0
  164. package/docs/recipes.md +81 -44
  165. package/docs/split-view.md +8 -0
  166. package/docs/tab-scaffold.md +4 -2
  167. package/docs/type-contracts.md +21 -17
  168. package/docs/ui-analyzer.md +19 -0
  169. package/docs/ui-evaluator.md +17 -0
  170. package/docs/ux-demo.md +5 -5
  171. package/docs/webawesome-theme.md +20 -2
  172. package/docs/workbench.md +20 -1
  173. package/evaluator/index.mjs +73 -8
  174. package/llms.txt +32 -14
  175. package/package.json +4 -2
  176. package/ux-demo/recipes/app-shell.tsx +209 -178
  177. package/ux-demo/recipes/collapsible-sidebar.tsx +189 -159
  178. package/ux-demo/recipes/compact-toolbar.tsx +48 -35
  179. package/ux-demo/recipes/composer-form.tsx +87 -79
  180. package/ux-demo/recipes/list-detail-dialog.tsx +124 -142
  181. package/ux-demo/recipes/list-workspace-states.tsx +83 -83
  182. package/ux-demo/recipes/loaders.ts +5 -2
  183. package/ux-demo/recipes/loading-inspector.tsx +157 -160
  184. package/ux-demo/recipes/navigation-sidebar.tsx +111 -109
  185. package/ux-demo/recipes/navigation-stack.tsx +50 -49
  186. package/ux-demo/recipes/types.ts +14 -0
  187. package/ux-demo/recipes/workspace-header.tsx +73 -56
  188. package/dist/chunk-54HM36IQ.js.map +0 -1
  189. package/dist/chunk-AQSKJ6U6.js.map +0 -1
  190. package/dist/chunk-COUPLRZG.js.map +0 -1
  191. package/dist/chunk-ELRMBQEC.js.map +0 -1
  192. package/dist/chunk-J3EE6XWD.js +0 -115
  193. package/dist/chunk-J3EE6XWD.js.map +0 -1
  194. package/dist/chunk-KKNK3JUT.js.map +0 -1
  195. package/dist/chunk-OL4TC3U2.js.map +0 -1
  196. package/dist/chunk-OQI7RCRP.js.map +0 -1
  197. package/dist/chunk-UMGY5JSP.js.map +0 -1
  198. package/dist/chunk-V6RZWDII.js.map +0 -1
  199. package/dist/chunk-ZNZ2JDBW.js.map +0 -1
  200. package/dist/chunk-ZSYLBVWG.js.map +0 -1
  201. package/ux-demo/recipes/app-shell.css +0 -87
  202. package/ux-demo/recipes/collapsible-sidebar.css +0 -83
  203. package/ux-demo/recipes/compact-toolbar.css +0 -35
  204. package/ux-demo/recipes/composer-form.css +0 -19
  205. package/ux-demo/recipes/list-detail-dialog.css +0 -42
  206. package/ux-demo/recipes/list-workspace-states.css +0 -30
  207. package/ux-demo/recipes/loading-inspector.css +0 -7
  208. package/ux-demo/recipes/navigation-sidebar.css +0 -12
  209. package/ux-demo/recipes/navigation-stack.css +0 -12
  210. package/ux-demo/recipes/recipe-root.css +0 -67
  211. package/ux-demo/recipes/recipe-root.tsx +0 -87
  212. package/ux-demo/recipes/workspace-header.css +0 -7
package/docs/design/templates/toolbar-control-group-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 552" width="552" height="552"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="96"/></clipPath><clipPath id="cp1"><rect x="16" y="172" width="520" height="96"/></clipPath><clipPath id="cp2"><rect x="16" y="306" width="520" height="96"/></clipPath><clipPath id="cp3"><rect x="16" y="440" width="520" height="96"/></clipPath><clipPath id="ct4"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc5"><rect x="16" y="38" width="520" height="96" rx="0"/></clipPath><clipPath id="ct7"><rect x="16" y="150" width="520" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="172" width="520" height="96" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="284" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="306" width="520" height="96" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="418" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="440" width="520" height="96" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="552" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Bordered group of icon buttons</text><g clip-path="url(#cp0)"><g clip-path="url(#irc5)"><clipPath id="svgimg6vclip"><rect x="16" y="38" width="520" height="96"/></clipPath><g clip-path="url(#svgimg6vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg6cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg6cp2"><rect x="74" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg6cp4"><rect x="114" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="124" height="44" rx="22" fill="rgb(58,58,60)"/><rect x="20.5" y="20.5" width="123" height="43" rx="21.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><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"/><g clip-path="url(#svgimg6cp0)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg6svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" 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="M3 12z" 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="M3 19z" 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="M8 5h13" 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="M8 12h13" 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="M8 19h13" 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"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp2)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg6svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" 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="M9 3v18" 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="M15 3v18" 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"/></g></g></g></g><rect x="102.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp4)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg6svgic5"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic5)"><g transform="translate(114 34)scale(.66667)"><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(174, 174, 178)" 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(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="162" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Borderless single control</text><g clip-path="url(#cp1)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="172" width="520" height="96"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 172)"><defs><clipPath id="svgimg9cp0"><rect x="34" y="34" width="16" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><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"/><g clip-path="url(#svgimg9cp0)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg9svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic1)"><g transform="translate(34 34)scale(.66667)"><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"/></g></g></g></g></g></g></g></g><text x="16" y="296" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Label text beside a control</text><g clip-path="url(#cp2)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="306" width="520" height="96"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 306)"><defs><clipPath id="svgimg12cp0"><rect x="22" y="22" width="80.8" height="40"/></clipPath><clipPath id="svgimg12ov1"><rect x="22" y="22" width="80.8" height="40" rx="0"/></clipPath><clipPath id="svgimg12cp2"><rect x="30" y="36" width="64.8" height="12"/></clipPath><clipPath id="svgimg12ct3"><rect x="30" y="36" width="64.8" height="12"/></clipPath><clipPath id="svgimg12cp4"><rect x="114.8" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="124" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg12cp0)"><g clip-path="url(#svgimg12ov1)"><g clip-path="url(#svgimg12cp2)"><g clip-path="url(#svgimg12ct3)"><text x="30" y="45" font-family="&quot;Courier New&quot;, monospace" font-size="12" font-weight="650" fill="rgb(174,174,178)">Workspace</text></g></g></g></g><rect x="103.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg12cp4)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg12svgic5"><rect x="114.8" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg12svgic5)"><g transform="translate(114.813 34)scale(.66667)"><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(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="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(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="430" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Push-appearance buttons</text><g clip-path="url(#cp3)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="440" width="520" height="96"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 440)"><defs><clipPath id="svgimg15cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg15cp2"><rect x="74" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="84" height="44" rx="22" fill="rgb(58,58,60)"/><rect x="20.5" y="20.5" width="83" height="43" rx="21.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><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"/><g clip-path="url(#svgimg15cp0)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg15svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" 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="M3 12z" 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="M3 19z" 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="M8 5h13" 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="M8 12h13" 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="M8 19h13" 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"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp2)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg15svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" 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="M9 3v18" 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="M15 3v18" 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"/></g></g></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 552" width="552" height="552"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="96"/></clipPath><clipPath id="cp1"><rect x="16" y="172" width="520" height="96"/></clipPath><clipPath id="cp2"><rect x="16" y="306" width="520" height="96"/></clipPath><clipPath id="cp3"><rect x="16" y="440" width="520" height="96"/></clipPath><clipPath id="ct4"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc5"><rect x="16" y="38" width="520" height="96" rx="0"/></clipPath><clipPath id="ct7"><rect x="16" y="150" width="520" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="172" width="520" height="96" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="284" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="306" width="520" height="96" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="418" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="440" width="520" height="96" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="552" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Bordered group of icon buttons</text><g clip-path="url(#cp0)"><g clip-path="url(#irc5)"><clipPath id="svgimg6vclip"><rect x="16" y="38" width="520" height="96"/></clipPath><g clip-path="url(#svgimg6vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg6cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg6cp2"><rect x="74" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg6cp4"><rect x="114" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="124" height="44" rx="22" fill="rgb(58,58,60)"/><rect x="20.5" y="20.5" width="123" height="43" rx="21.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><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"/><g clip-path="url(#svgimg6cp0)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg6svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" 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="M3 12z" 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="M3 19z" 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="M8 5h13" 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="M8 12h13" 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="M8 19h13" 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"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp2)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg6svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" 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="M9 3v18" 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="M15 3v18" 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"/></g></g></g></g><rect x="102.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp4)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg6svgic5"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic5)"><g transform="translate(114 34)scale(.66667)"><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(174, 174, 178)" 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(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="162" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Borderless single control</text><g clip-path="url(#cp1)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="172" width="520" height="96"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 172)"><defs><clipPath id="svgimg9cp0"><rect x="34" y="34" width="16" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><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"/><g clip-path="url(#svgimg9cp0)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg9svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic1)"><g transform="translate(34 34)scale(.66667)"><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"/></g></g></g></g></g></g></g></g><text x="16" y="296" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Label text beside a control</text><g clip-path="url(#cp2)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="306" width="520" height="96"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 306)"><defs><clipPath id="svgimg12cp0"><rect x="22" y="22" width="82.2" height="40"/></clipPath><clipPath id="svgimg12ov1"><rect x="22" y="22" width="82.2" height="40" rx="0"/></clipPath><clipPath id="svgimg12cp2"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg12ct3"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg12cp4"><rect x="116" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="125" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg12cp0)"><g clip-path="url(#svgimg12ov1)"><g clip-path="url(#svgimg12cp2)"><g clip-path="url(#svgimg12ct3)"><text x="30" y="45.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">Workspace</text></g></g></g></g><rect x="104.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg12cp4)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg12svgic5"><rect x="116.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg12svgic5)"><g transform="translate(116.234 34)scale(.66667)"><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(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="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(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="430" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Push-appearance buttons</text><g clip-path="url(#cp3)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="440" width="520" height="96"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 440)"><defs><clipPath id="svgimg15cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg15cp2"><rect x="74" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="84" height="44" rx="22" fill="rgb(58,58,60)"/><rect x="20.5" y="20.5" width="83" height="43" rx="21.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><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"/><g clip-path="url(#svgimg15cp0)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg15svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" 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="M3 12z" 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="M3 19z" 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="M8 5h13" 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="M8 12h13" 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="M8 19h13" 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"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp2)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg15svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" 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="M9 3v18" 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="M15 3v18" 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"/></g></g></g></g></g></g></g></g></svg>
package/docs/design/templates/toolbar-control-group.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 552" width="552" height="552"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="96"/></clipPath><clipPath id="cp1"><rect x="16" y="172" width="520" height="96"/></clipPath><clipPath id="cp2"><rect x="16" y="306" width="520" height="96"/></clipPath><clipPath id="cp3"><rect x="16" y="440" width="520" height="96"/></clipPath><clipPath id="ct4"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc5"><rect x="16" y="38" width="520" height="96" rx="0"/></clipPath><clipPath id="ct7"><rect x="16" y="150" width="520" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="172" width="520" height="96" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="284" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="306" width="520" height="96" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="418" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="440" width="520" height="96" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="552" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Bordered group of icon buttons</text><g clip-path="url(#cp0)"><g clip-path="url(#irc5)"><clipPath id="svgimg6vclip"><rect x="16" y="38" width="520" height="96"/></clipPath><g clip-path="url(#svgimg6vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg6cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg6cp2"><rect x="74" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg6cp4"><rect x="114" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="124" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="123" height="43" rx="21.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><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"/><g clip-path="url(#svgimg6cp0)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg6svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" 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="M3 12z" 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="M3 19z" 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="M8 5h13" 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="M8 12h13" 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="M8 19h13" 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"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp2)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg6svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" 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="M9 3v18" 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="M15 3v18" 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"/></g></g></g></g><rect x="102.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp4)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg6svgic5"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic5)"><g transform="translate(114 34)scale(.66667)"><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(110, 110, 115)" 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(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="162" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Borderless single control</text><g clip-path="url(#cp1)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="172" width="520" height="96"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 172)"><defs><clipPath id="svgimg9cp0"><rect x="34" y="34" width="16" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><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"/><g clip-path="url(#svgimg9cp0)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg9svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic1)"><g transform="translate(34 34)scale(.66667)"><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"/></g></g></g></g></g></g></g></g><text x="16" y="296" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Label text beside a control</text><g clip-path="url(#cp2)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="306" width="520" height="96"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 306)"><defs><clipPath id="svgimg12cp0"><rect x="22" y="22" width="80.8" height="40"/></clipPath><clipPath id="svgimg12ov1"><rect x="22" y="22" width="80.8" height="40" rx="0"/></clipPath><clipPath id="svgimg12cp2"><rect x="30" y="36" width="64.8" height="12"/></clipPath><clipPath id="svgimg12ct3"><rect x="30" y="36" width="64.8" height="12"/></clipPath><clipPath id="svgimg12cp4"><rect x="114.8" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="124" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg12cp0)"><g clip-path="url(#svgimg12ov1)"><g clip-path="url(#svgimg12cp2)"><g clip-path="url(#svgimg12ct3)"><text x="30" y="45" font-family="&quot;Courier New&quot;, monospace" font-size="12" font-weight="650" fill="rgb(110,110,115)">Workspace</text></g></g></g></g><rect x="103.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg12cp4)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg12svgic5"><rect x="114.8" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg12svgic5)"><g transform="translate(114.813 34)scale(.66667)"><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(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="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(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="430" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Push-appearance buttons</text><g clip-path="url(#cp3)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="440" width="520" height="96"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 440)"><defs><clipPath id="svgimg15cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg15cp2"><rect x="74" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="84" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="83" height="43" rx="21.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><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"/><g clip-path="url(#svgimg15cp0)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg15svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" 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="M3 12z" 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="M3 19z" 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="M8 5h13" 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="M8 12h13" 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="M8 19h13" 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"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp2)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg15svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" 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="M9 3v18" 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="M15 3v18" 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"/></g></g></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 552" width="552" height="552"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="96"/></clipPath><clipPath id="cp1"><rect x="16" y="172" width="520" height="96"/></clipPath><clipPath id="cp2"><rect x="16" y="306" width="520" height="96"/></clipPath><clipPath id="cp3"><rect x="16" y="440" width="520" height="96"/></clipPath><clipPath id="ct4"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc5"><rect x="16" y="38" width="520" height="96" rx="0"/></clipPath><clipPath id="ct7"><rect x="16" y="150" width="520" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="172" width="520" height="96" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="284" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="306" width="520" height="96" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="418" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="440" width="520" height="96" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="552" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Bordered group of icon buttons</text><g clip-path="url(#cp0)"><g clip-path="url(#irc5)"><clipPath id="svgimg6vclip"><rect x="16" y="38" width="520" height="96"/></clipPath><g clip-path="url(#svgimg6vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg6cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg6cp2"><rect x="74" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg6cp4"><rect x="114" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="124" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="123" height="43" rx="21.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><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"/><g clip-path="url(#svgimg6cp0)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg6svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" 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="M3 12z" 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="M3 19z" 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="M8 5h13" 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="M8 12h13" 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="M8 19h13" 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"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp2)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg6svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" 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="M9 3v18" 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="M15 3v18" 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"/></g></g></g></g><rect x="102.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp4)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg6svgic5"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic5)"><g transform="translate(114 34)scale(.66667)"><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(110, 110, 115)" 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(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="162" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Borderless single control</text><g clip-path="url(#cp1)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="172" width="520" height="96"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 172)"><defs><clipPath id="svgimg9cp0"><rect x="34" y="34" width="16" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><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"/><g clip-path="url(#svgimg9cp0)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg9svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic1)"><g transform="translate(34 34)scale(.66667)"><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"/></g></g></g></g></g></g></g></g><text x="16" y="296" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Label text beside a control</text><g clip-path="url(#cp2)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="306" width="520" height="96"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 306)"><defs><clipPath id="svgimg12cp0"><rect x="22" y="22" width="82.2" height="40"/></clipPath><clipPath id="svgimg12ov1"><rect x="22" y="22" width="82.2" height="40" rx="0"/></clipPath><clipPath id="svgimg12cp2"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg12ct3"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg12cp4"><rect x="116" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="125" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg12cp0)"><g clip-path="url(#svgimg12ov1)"><g clip-path="url(#svgimg12cp2)"><g clip-path="url(#svgimg12ct3)"><text x="30" y="45.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">Workspace</text></g></g></g></g><rect x="104.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg12cp4)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg12svgic5"><rect x="116.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg12svgic5)"><g transform="translate(116.234 34)scale(.66667)"><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(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="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(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="430" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Push-appearance buttons</text><g clip-path="url(#cp3)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="440" width="520" height="96"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 440)"><defs><clipPath id="svgimg15cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg15cp2"><rect x="74" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="84" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="83" height="43" rx="21.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><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"/><g clip-path="url(#svgimg15cp0)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg15svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" 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="M3 12z" 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="M3 19z" 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="M8 5h13" 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="M8 12h13" 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="M8 19h13" 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"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp2)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg15svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" 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="M9 3v18" 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="M15 3v18" 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"/></g></g></g></g></g></g></g></g></svg>
package/docs/design/templates/toolbar-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 158" width="672" height="158"><defs><clipPath id="cp0"><rect x="16" y="38" width="640" height="104"/></clipPath><clipPath id="ct1"><rect x="16" y="16" width="640" height="22"/></clipPath><clipPath id="irc2"><rect x="16" y="38" width="640" height="104" rx="0"/></clipPath></defs><rect x="0" y="0" width="672" height="158" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Title with a trailing group</text><g clip-path="url(#cp0)"><g clip-path="url(#irc2)"><clipPath id="svgimg3vclip"><rect x="16" y="38" width="640" height="104"/></clipPath><g clip-path="url(#svgimg3vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg3cp0"><rect x="28" y="28" width="452" height="44"/></clipPath><clipPath id="svgimg3ov1"><rect x="28" y="28" width="452" height="44" rx="0"/></clipPath><clipPath id="svgimg3cp2"><rect x="30" y="30" width="88.1" height="40"/></clipPath><clipPath id="svgimg3ov3"><rect x="30" y="30" width="88.1" height="40" rx="0"/></clipPath><clipPath id="svgimg3cp4"><rect x="38" y="42" width="72.1" height="16"/></clipPath><clipPath id="svgimg3ct5"><rect x="38" y="42" width="72.1" height="16"/></clipPath><clipPath id="svgimg3cp6"><rect x="502" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg3cp8"><rect x="542" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg3cp10"><rect x="582" y="42" width="16" height="16"/></clipPath></defs><g clip-path="url(#svgimg3cp0)"><g clip-path="url(#svgimg3ov1)"><rect x="28.5" y="28.5" width="91" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp2)"><g clip-path="url(#svgimg3ov3)"><g clip-path="url(#svgimg3cp4)"><g clip-path="url(#svgimg3ct5)"><text x="38" 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" font-weight="650" fill="rgb(174,174,178)">Northstar</text></g></g></g></g></g></g><rect x="488" y="28" width="124" height="44" rx="22" fill="rgb(58,58,60)"/><rect x="488.5" y="28.5" width="123" height="43" rx="21.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><rect x="490.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp6)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg3svgic7"><rect x="502" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg3svgic7)"><g transform="translate(502 42)scale(.66667)"><path d="M3 5z" 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="M3 12z" 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="M3 19z" 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="M8 5h13" 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="M8 12h13" 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="M8 19h13" 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"/></g></g></g></g><rect x="530.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp8)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg3svgic9"><rect x="542" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg3svgic9)"><g transform="translate(542 42)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" 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="M9 3v18" 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="M15 3v18" 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"/></g></g></g></g><rect x="570.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp10)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg3svgic11"><rect x="582" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg3svgic11)"><g transform="translate(582 42)scale(.66667)"><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(174, 174, 178)" 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(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 158" width="672" height="158"><defs><clipPath id="cp0"><rect x="16" y="38" width="640" height="104"/></clipPath><clipPath id="ct1"><rect x="16" y="16" width="640" height="22"/></clipPath><clipPath id="irc2"><rect x="16" y="38" width="640" height="104" rx="0"/></clipPath></defs><rect x="0" y="0" width="672" height="158" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Title with a trailing group</text><g clip-path="url(#cp0)"><g clip-path="url(#irc2)"><clipPath id="svgimg3vclip"><rect x="16" y="38" width="640" height="104"/></clipPath><g clip-path="url(#svgimg3vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg3cp0"><rect x="28" y="28" width="452" height="44"/></clipPath><clipPath id="svgimg3ov1"><rect x="28" y="28" width="452" height="44" rx="0"/></clipPath><clipPath id="svgimg3cp2"><rect x="30" y="30" width="88.1" height="40"/></clipPath><clipPath id="svgimg3ov3"><rect x="30" y="30" width="88.1" height="40" rx="0"/></clipPath><clipPath id="svgimg3cp4"><rect x="38" y="40.4" width="72.1" height="19.2"/></clipPath><clipPath id="svgimg3ct5"><rect x="38" y="40.4" width="72.1" height="19.2"/></clipPath><clipPath id="svgimg3cp6"><rect x="502" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg3cp8"><rect x="542" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg3cp10"><rect x="582" y="42" width="16" height="16"/></clipPath></defs><g clip-path="url(#svgimg3cp0)"><g clip-path="url(#svgimg3ov1)"><rect x="28.5" y="28.5" width="91" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp2)"><g clip-path="url(#svgimg3ov3)"><g clip-path="url(#svgimg3cp4)"><g clip-path="url(#svgimg3ct5)"><text x="38" y="55.41" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(174,174,178)">Northstar</text></g></g></g></g></g></g><rect x="488" y="28" width="124" height="44" rx="22" fill="rgb(58,58,60)"/><rect x="488.5" y="28.5" width="123" height="43" rx="21.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><rect x="490.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp6)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg3svgic7"><rect x="502" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg3svgic7)"><g transform="translate(502 42)scale(.66667)"><path d="M3 5z" 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="M3 12z" 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="M3 19z" 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="M8 5h13" 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="M8 12h13" 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="M8 19h13" 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"/></g></g></g></g><rect x="530.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp8)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg3svgic9"><rect x="542" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg3svgic9)"><g transform="translate(542 42)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" 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="M9 3v18" 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="M15 3v18" 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"/></g></g></g></g><rect x="570.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp10)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg3svgic11"><rect x="582" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg3svgic11)"><g transform="translate(582 42)scale(.66667)"><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(174, 174, 178)" 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(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></svg>
package/docs/design/templates/toolbar-text/default-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 76" width="360" height="76"><defs><clipPath id="cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="151.2" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="33" width="135.2" height="14"/></clipPath><clipPath id="ct3"><rect x="28" y="33" width="135.2" height="14"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="45" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(174,174,178)">Workspace settings</text></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 76" width="360" height="76"><defs><clipPath id="cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="151.2" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="31.6" width="135.2" height="16.8"/></clipPath><clipPath id="ct3"><rect x="28" y="31.6" width="135.2" height="16.8"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="44.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(174,174,178)">Workspace settings</text></g></g></g></g></svg>
package/docs/design/templates/toolbar-text/default.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 76" width="360" height="76"><defs><clipPath id="cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="151.2" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="33" width="135.2" height="14"/></clipPath><clipPath id="ct3"><rect x="28" y="33" width="135.2" height="14"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="45" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(110,110,115)">Workspace settings</text></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 76" width="360" height="76"><defs><clipPath id="cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="151.2" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="31.6" width="135.2" height="16.8"/></clipPath><clipPath id="ct3"><rect x="28" y="31.6" width="135.2" height="16.8"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="44.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(110,110,115)">Workspace settings</text></g></g></g></g></svg>
package/docs/design/templates/toolbar-text/large-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 80" width="360" height="80"><defs><clipPath id="cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="163" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="32" width="147" height="16"/></clipPath><clipPath id="ct3"><rect x="28" y="32" width="147" height="16"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(174,174,178)">Northstar migration</text></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 80" width="360" height="80"><defs><clipPath id="cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="163" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="30.4" width="147" height="19.2"/></clipPath><clipPath id="ct3"><rect x="28" y="30.4" width="147" height="19.2"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="45.41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(174,174,178)">Northstar migration</text></g></g></g></g></svg>
package/docs/design/templates/toolbar-text/large.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 80" width="360" height="80"><defs><clipPath id="cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="163" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="32" width="147" height="16"/></clipPath><clipPath id="ct3"><rect x="28" y="32" width="147" height="16"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(110,110,115)">Northstar migration</text></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 80" width="360" height="80"><defs><clipPath id="cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="163" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="30.4" width="147" height="19.2"/></clipPath><clipPath id="ct3"><rect x="28" y="30.4" width="147" height="19.2"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="45.41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(110,110,115)">Northstar migration</text></g></g></g></g></svg>
package/docs/design/templates/toolbar-text/small-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 72" width="360" height="72"><defs><clipPath id="cp0"><rect x="20" y="20" width="66.4" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="66.4" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="34" width="50.4" height="12"/></clipPath><clipPath id="ct3"><rect x="28" y="34" width="50.4" height="12"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="43" font-family="&quot;Courier New&quot;, monospace" font-size="12" font-weight="650" fill="rgb(174,174,178)">Filters</text></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 72" width="360" height="72"><defs><clipPath id="cp0"><rect x="20" y="20" width="53.6" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="53.6" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="32.8" width="37.6" height="14.4"/></clipPath><clipPath id="ct3"><rect x="28" y="32.8" width="37.6" height="14.4"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="43.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">Filters</text></g></g></g></g></svg>
package/docs/design/templates/toolbar-text/small.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 72" width="360" height="72"><defs><clipPath id="cp0"><rect x="20" y="20" width="66.4" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="66.4" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="34" width="50.4" height="12"/></clipPath><clipPath id="ct3"><rect x="28" y="34" width="50.4" height="12"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="43" font-family="&quot;Courier New&quot;, monospace" font-size="12" font-weight="650" fill="rgb(110,110,115)">Filters</text></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 72" width="360" height="72"><defs><clipPath id="cp0"><rect x="20" y="20" width="53.6" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="53.6" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="32.8" width="37.6" height="14.4"/></clipPath><clipPath id="ct3"><rect x="28" y="32.8" width="37.6" height="14.4"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="43.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">Filters</text></g></g></g></g></svg>
package/docs/design/templates/toolbar-text-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392 358" width="392" height="358"><defs><clipPath id="cp0"><rect x="16" y="38" width="360" height="80"/></clipPath><clipPath id="cp1"><rect x="16" y="156" width="360" height="76"/></clipPath><clipPath id="cp2"><rect x="16" y="270" width="360" height="72"/></clipPath><clipPath id="ct3"><rect x="16" y="16" width="360" height="22"/></clipPath><clipPath id="irc4"><rect x="16" y="38" width="360" height="80" rx="0"/></clipPath><clipPath id="ct6"><rect x="16" y="134" width="360" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="156" width="360" height="76" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="248" width="360" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="270" width="360" height="72" rx="0"/></clipPath></defs><rect x="0" y="0" width="392" height="358" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Large (title)</text><g clip-path="url(#cp0)"><g clip-path="url(#irc4)"><clipPath id="svgimg5vclip"><rect x="16" y="38" width="360" height="80"/></clipPath><g clip-path="url(#svgimg5vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg5cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="svgimg5ov1"><rect x="20" y="20" width="163" height="40" rx="0"/></clipPath><clipPath id="svgimg5cp2"><rect x="28" y="32" width="147" height="16"/></clipPath><clipPath id="svgimg5ct3"><rect x="28" y="32" width="147" height="16"/></clipPath></defs><g clip-path="url(#svgimg5cp0)"><g clip-path="url(#svgimg5ov1)"><g clip-path="url(#svgimg5cp2)"><g clip-path="url(#svgimg5ct3)"><text x="28" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(174,174,178)">Northstar migration</text></g></g></g></g></g></g></g></g><text x="16" y="146" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Default</text><g clip-path="url(#cp1)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="156" width="360" height="76"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 156)"><defs><clipPath id="svgimg8cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="svgimg8ov1"><rect x="20" y="20" width="151.2" height="40" rx="0"/></clipPath><clipPath id="svgimg8cp2"><rect x="28" y="33" width="135.2" height="14"/></clipPath><clipPath id="svgimg8ct3"><rect x="28" y="33" width="135.2" height="14"/></clipPath></defs><g clip-path="url(#svgimg8cp0)"><g clip-path="url(#svgimg8ov1)"><g clip-path="url(#svgimg8cp2)"><g clip-path="url(#svgimg8ct3)"><text x="28" y="45" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(174,174,178)">Workspace settings</text></g></g></g></g></g></g></g></g><text x="16" y="260" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Small (label)</text><g clip-path="url(#cp2)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="270" width="360" height="72"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 270)"><defs><clipPath id="svgimg11cp0"><rect x="20" y="20" width="66.4" height="40"/></clipPath><clipPath id="svgimg11ov1"><rect x="20" y="20" width="66.4" height="40" rx="0"/></clipPath><clipPath id="svgimg11cp2"><rect x="28" y="34" width="50.4" height="12"/></clipPath><clipPath id="svgimg11ct3"><rect x="28" y="34" width="50.4" height="12"/></clipPath></defs><g clip-path="url(#svgimg11cp0)"><g clip-path="url(#svgimg11ov1)"><g clip-path="url(#svgimg11cp2)"><g clip-path="url(#svgimg11ct3)"><text x="28" y="43" font-family="&quot;Courier New&quot;, monospace" font-size="12" font-weight="650" fill="rgb(174,174,178)">Filters</text></g></g></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392 358" width="392" height="358"><defs><clipPath id="cp0"><rect x="16" y="38" width="360" height="80"/></clipPath><clipPath id="cp1"><rect x="16" y="156" width="360" height="76"/></clipPath><clipPath id="cp2"><rect x="16" y="270" width="360" height="72"/></clipPath><clipPath id="ct3"><rect x="16" y="16" width="360" height="22"/></clipPath><clipPath id="irc4"><rect x="16" y="38" width="360" height="80" rx="0"/></clipPath><clipPath id="ct6"><rect x="16" y="134" width="360" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="156" width="360" height="76" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="248" width="360" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="270" width="360" height="72" rx="0"/></clipPath></defs><rect x="0" y="0" width="392" height="358" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Large (title)</text><g clip-path="url(#cp0)"><g clip-path="url(#irc4)"><clipPath id="svgimg5vclip"><rect x="16" y="38" width="360" height="80"/></clipPath><g clip-path="url(#svgimg5vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg5cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="svgimg5ov1"><rect x="20" y="20" width="163" height="40" rx="0"/></clipPath><clipPath id="svgimg5cp2"><rect x="28" y="30.4" width="147" height="19.2"/></clipPath><clipPath id="svgimg5ct3"><rect x="28" y="30.4" width="147" height="19.2"/></clipPath></defs><g clip-path="url(#svgimg5cp0)"><g clip-path="url(#svgimg5ov1)"><g clip-path="url(#svgimg5cp2)"><g clip-path="url(#svgimg5ct3)"><text x="28" y="45.41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(174,174,178)">Northstar migration</text></g></g></g></g></g></g></g></g><text x="16" y="146" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Default</text><g clip-path="url(#cp1)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="156" width="360" height="76"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 156)"><defs><clipPath id="svgimg8cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="svgimg8ov1"><rect x="20" y="20" width="151.2" height="40" rx="0"/></clipPath><clipPath id="svgimg8cp2"><rect x="28" y="31.6" width="135.2" height="16.8"/></clipPath><clipPath id="svgimg8ct3"><rect x="28" y="31.6" width="135.2" height="16.8"/></clipPath></defs><g clip-path="url(#svgimg8cp0)"><g clip-path="url(#svgimg8ov1)"><g clip-path="url(#svgimg8cp2)"><g clip-path="url(#svgimg8ct3)"><text x="28" y="44.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(174,174,178)">Workspace settings</text></g></g></g></g></g></g></g></g><text x="16" y="260" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Small (label)</text><g clip-path="url(#cp2)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="270" width="360" height="72"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 270)"><defs><clipPath id="svgimg11cp0"><rect x="20" y="20" width="53.6" height="40"/></clipPath><clipPath id="svgimg11ov1"><rect x="20" y="20" width="53.6" height="40" rx="0"/></clipPath><clipPath id="svgimg11cp2"><rect x="28" y="32.8" width="37.6" height="14.4"/></clipPath><clipPath id="svgimg11ct3"><rect x="28" y="32.8" width="37.6" height="14.4"/></clipPath></defs><g clip-path="url(#svgimg11cp0)"><g clip-path="url(#svgimg11ov1)"><g clip-path="url(#svgimg11cp2)"><g clip-path="url(#svgimg11ct3)"><text x="28" y="43.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">Filters</text></g></g></g></g></g></g></g></g></svg>
package/docs/design/templates/toolbar-text.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392 358" width="392" height="358"><defs><clipPath id="cp0"><rect x="16" y="38" width="360" height="80"/></clipPath><clipPath id="cp1"><rect x="16" y="156" width="360" height="76"/></clipPath><clipPath id="cp2"><rect x="16" y="270" width="360" height="72"/></clipPath><clipPath id="ct3"><rect x="16" y="16" width="360" height="22"/></clipPath><clipPath id="irc4"><rect x="16" y="38" width="360" height="80" rx="0"/></clipPath><clipPath id="ct6"><rect x="16" y="134" width="360" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="156" width="360" height="76" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="248" width="360" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="270" width="360" height="72" rx="0"/></clipPath></defs><rect x="0" y="0" width="392" height="358" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Large (title)</text><g clip-path="url(#cp0)"><g clip-path="url(#irc4)"><clipPath id="svgimg5vclip"><rect x="16" y="38" width="360" height="80"/></clipPath><g clip-path="url(#svgimg5vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg5cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="svgimg5ov1"><rect x="20" y="20" width="163" height="40" rx="0"/></clipPath><clipPath id="svgimg5cp2"><rect x="28" y="32" width="147" height="16"/></clipPath><clipPath id="svgimg5ct3"><rect x="28" y="32" width="147" height="16"/></clipPath></defs><g clip-path="url(#svgimg5cp0)"><g clip-path="url(#svgimg5ov1)"><g clip-path="url(#svgimg5cp2)"><g clip-path="url(#svgimg5ct3)"><text x="28" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(110,110,115)">Northstar migration</text></g></g></g></g></g></g></g></g><text x="16" y="146" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Default</text><g clip-path="url(#cp1)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="156" width="360" height="76"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 156)"><defs><clipPath id="svgimg8cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="svgimg8ov1"><rect x="20" y="20" width="151.2" height="40" rx="0"/></clipPath><clipPath id="svgimg8cp2"><rect x="28" y="33" width="135.2" height="14"/></clipPath><clipPath id="svgimg8ct3"><rect x="28" y="33" width="135.2" height="14"/></clipPath></defs><g clip-path="url(#svgimg8cp0)"><g clip-path="url(#svgimg8ov1)"><g clip-path="url(#svgimg8cp2)"><g clip-path="url(#svgimg8ct3)"><text x="28" y="45" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(110,110,115)">Workspace settings</text></g></g></g></g></g></g></g></g><text x="16" y="260" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Small (label)</text><g clip-path="url(#cp2)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="270" width="360" height="72"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 270)"><defs><clipPath id="svgimg11cp0"><rect x="20" y="20" width="66.4" height="40"/></clipPath><clipPath id="svgimg11ov1"><rect x="20" y="20" width="66.4" height="40" rx="0"/></clipPath><clipPath id="svgimg11cp2"><rect x="28" y="34" width="50.4" height="12"/></clipPath><clipPath id="svgimg11ct3"><rect x="28" y="34" width="50.4" height="12"/></clipPath></defs><g clip-path="url(#svgimg11cp0)"><g clip-path="url(#svgimg11ov1)"><g clip-path="url(#svgimg11cp2)"><g clip-path="url(#svgimg11ct3)"><text x="28" y="43" font-family="&quot;Courier New&quot;, monospace" font-size="12" font-weight="650" fill="rgb(110,110,115)">Filters</text></g></g></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392 358" width="392" height="358"><defs><clipPath id="cp0"><rect x="16" y="38" width="360" height="80"/></clipPath><clipPath id="cp1"><rect x="16" y="156" width="360" height="76"/></clipPath><clipPath id="cp2"><rect x="16" y="270" width="360" height="72"/></clipPath><clipPath id="ct3"><rect x="16" y="16" width="360" height="22"/></clipPath><clipPath id="irc4"><rect x="16" y="38" width="360" height="80" rx="0"/></clipPath><clipPath id="ct6"><rect x="16" y="134" width="360" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="156" width="360" height="76" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="248" width="360" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="270" width="360" height="72" rx="0"/></clipPath></defs><rect x="0" y="0" width="392" height="358" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Large (title)</text><g clip-path="url(#cp0)"><g clip-path="url(#irc4)"><clipPath id="svgimg5vclip"><rect x="16" y="38" width="360" height="80"/></clipPath><g clip-path="url(#svgimg5vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg5cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="svgimg5ov1"><rect x="20" y="20" width="163" height="40" rx="0"/></clipPath><clipPath id="svgimg5cp2"><rect x="28" y="30.4" width="147" height="19.2"/></clipPath><clipPath id="svgimg5ct3"><rect x="28" y="30.4" width="147" height="19.2"/></clipPath></defs><g clip-path="url(#svgimg5cp0)"><g clip-path="url(#svgimg5ov1)"><g clip-path="url(#svgimg5cp2)"><g clip-path="url(#svgimg5ct3)"><text x="28" y="45.41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(110,110,115)">Northstar migration</text></g></g></g></g></g></g></g></g><text x="16" y="146" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Default</text><g clip-path="url(#cp1)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="156" width="360" height="76"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 156)"><defs><clipPath id="svgimg8cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="svgimg8ov1"><rect x="20" y="20" width="151.2" height="40" rx="0"/></clipPath><clipPath id="svgimg8cp2"><rect x="28" y="31.6" width="135.2" height="16.8"/></clipPath><clipPath id="svgimg8ct3"><rect x="28" y="31.6" width="135.2" height="16.8"/></clipPath></defs><g clip-path="url(#svgimg8cp0)"><g clip-path="url(#svgimg8ov1)"><g clip-path="url(#svgimg8cp2)"><g clip-path="url(#svgimg8ct3)"><text x="28" y="44.59" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(110,110,115)">Workspace settings</text></g></g></g></g></g></g></g></g><text x="16" y="260" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Small (label)</text><g clip-path="url(#cp2)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="270" width="360" height="72"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 270)"><defs><clipPath id="svgimg11cp0"><rect x="20" y="20" width="53.6" height="40"/></clipPath><clipPath id="svgimg11ov1"><rect x="20" y="20" width="53.6" height="40" rx="0"/></clipPath><clipPath id="svgimg11cp2"><rect x="28" y="32.8" width="37.6" height="14.4"/></clipPath><clipPath id="svgimg11ct3"><rect x="28" y="32.8" width="37.6" height="14.4"/></clipPath></defs><g clip-path="url(#svgimg11cp0)"><g clip-path="url(#svgimg11ov1)"><g clip-path="url(#svgimg11cp2)"><g clip-path="url(#svgimg11ct3)"><text x="28" y="43.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">Filters</text></g></g></g></g></g></g></g></g></svg>
package/docs/design/templates/toolbar.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 158" width="672" height="158"><defs><clipPath id="cp0"><rect x="16" y="38" width="640" height="104"/></clipPath><clipPath id="ct1"><rect x="16" y="16" width="640" height="22"/></clipPath><clipPath id="irc2"><rect x="16" y="38" width="640" height="104" rx="0"/></clipPath></defs><rect x="0" y="0" width="672" height="158" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Title with a trailing group</text><g clip-path="url(#cp0)"><g clip-path="url(#irc2)"><clipPath id="svgimg3vclip"><rect x="16" y="38" width="640" height="104"/></clipPath><g clip-path="url(#svgimg3vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg3cp0"><rect x="28" y="28" width="452" height="44"/></clipPath><clipPath id="svgimg3ov1"><rect x="28" y="28" width="452" height="44" rx="0"/></clipPath><clipPath id="svgimg3cp2"><rect x="30" y="30" width="88.1" height="40"/></clipPath><clipPath id="svgimg3ov3"><rect x="30" y="30" width="88.1" height="40" rx="0"/></clipPath><clipPath id="svgimg3cp4"><rect x="38" y="42" width="72.1" height="16"/></clipPath><clipPath id="svgimg3ct5"><rect x="38" y="42" width="72.1" height="16"/></clipPath><clipPath id="svgimg3cp6"><rect x="502" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg3cp8"><rect x="542" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg3cp10"><rect x="582" y="42" width="16" height="16"/></clipPath></defs><g clip-path="url(#svgimg3cp0)"><g clip-path="url(#svgimg3ov1)"><rect x="28.5" y="28.5" width="91" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp2)"><g clip-path="url(#svgimg3ov3)"><g clip-path="url(#svgimg3cp4)"><g clip-path="url(#svgimg3ct5)"><text x="38" 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" font-weight="650" fill="rgb(110,110,115)">Northstar</text></g></g></g></g></g></g><rect x="488" y="28" width="124" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="488.5" y="28.5" width="123" height="43" rx="21.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><rect x="490.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp6)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg3svgic7"><rect x="502" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg3svgic7)"><g transform="translate(502 42)scale(.66667)"><path d="M3 5z" 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="M3 12z" 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="M3 19z" 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="M8 5h13" 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="M8 12h13" 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="M8 19h13" 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"/></g></g></g></g><rect x="530.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp8)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg3svgic9"><rect x="542" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg3svgic9)"><g transform="translate(542 42)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" 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="M9 3v18" 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="M15 3v18" 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"/></g></g></g></g><rect x="570.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp10)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg3svgic11"><rect x="582" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg3svgic11)"><g transform="translate(582 42)scale(.66667)"><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(110, 110, 115)" 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(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 158" width="672" height="158"><defs><clipPath id="cp0"><rect x="16" y="38" width="640" height="104"/></clipPath><clipPath id="ct1"><rect x="16" y="16" width="640" height="22"/></clipPath><clipPath id="irc2"><rect x="16" y="38" width="640" height="104" rx="0"/></clipPath></defs><rect x="0" y="0" width="672" height="158" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Title with a trailing group</text><g clip-path="url(#cp0)"><g clip-path="url(#irc2)"><clipPath id="svgimg3vclip"><rect x="16" y="38" width="640" height="104"/></clipPath><g clip-path="url(#svgimg3vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg3cp0"><rect x="28" y="28" width="452" height="44"/></clipPath><clipPath id="svgimg3ov1"><rect x="28" y="28" width="452" height="44" rx="0"/></clipPath><clipPath id="svgimg3cp2"><rect x="30" y="30" width="88.1" height="40"/></clipPath><clipPath id="svgimg3ov3"><rect x="30" y="30" width="88.1" height="40" rx="0"/></clipPath><clipPath id="svgimg3cp4"><rect x="38" y="40.4" width="72.1" height="19.2"/></clipPath><clipPath id="svgimg3ct5"><rect x="38" y="40.4" width="72.1" height="19.2"/></clipPath><clipPath id="svgimg3cp6"><rect x="502" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg3cp8"><rect x="542" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg3cp10"><rect x="582" y="42" width="16" height="16"/></clipPath></defs><g clip-path="url(#svgimg3cp0)"><g clip-path="url(#svgimg3ov1)"><rect x="28.5" y="28.5" width="91" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp2)"><g clip-path="url(#svgimg3ov3)"><g clip-path="url(#svgimg3cp4)"><g clip-path="url(#svgimg3ct5)"><text x="38" y="55.41" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(110,110,115)">Northstar</text></g></g></g></g></g></g><rect x="488" y="28" width="124" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="488.5" y="28.5" width="123" height="43" rx="21.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><rect x="490.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp6)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg3svgic7"><rect x="502" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg3svgic7)"><g transform="translate(502 42)scale(.66667)"><path d="M3 5z" 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="M3 12z" 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="M3 19z" 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="M8 5h13" 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="M8 12h13" 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="M8 19h13" 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"/></g></g></g></g><rect x="530.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp8)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg3svgic9"><rect x="542" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg3svgic9)"><g transform="translate(542 42)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" 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="M9 3v18" 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="M15 3v18" 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"/></g></g></g></g><rect x="570.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg3cp10)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg3svgic11"><rect x="582" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg3svgic11)"><g transform="translate(582 42)scale(.66667)"><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(110, 110, 115)" 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(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></svg>
package/docs/document-baseline.md ADDED
@@ -0,0 +1,31 @@
1
+ # Document baseline
2
+
3
+ Import `@kerfjs/ui/document.css` when an application wants Kerf UI to own its
4
+ document-level defaults:
5
+
6
+ ```ts
7
+ import "@kerfjs/ui/document.css";
8
+ ```
9
+
10
+ ```html
11
+ <body>
12
+ <div id="app" class="kui-app-root"></div>
13
+ </body>
14
+ ```
15
+
16
+ The opt-in stylesheet applies `border-box` sizing to every element and
17
+ pseudo-element, removes the body margin, and gives the body the foundation
18
+ font, foreground, lowered surface, and `1.45` line height. Plain links use the
19
+ semantic `--kui-color-text-link` token with zero selector specificity.
20
+
21
+ `html`, `body`, and `.kui-app-root` form a definite `height: 100%` chain. Add
22
+ `.kui-app-root` to the one direct mount container of a full-height application
23
+ whose child is a `Workbench`, `SplitView`, `NavStack`, or another percentage-
24
+ height shell. Ordinary document-flow pages can import the baseline without the
25
+ class. Do not put `.kui-app-root` on several sibling containers: each requests
26
+ the full available document height.
27
+
28
+ The stylesheet is intentionally absent from `@kerfjs/ui/styles.css` and every
29
+ component browser import because its global selectors would otherwise change
30
+ consumer documents implicitly. Import it once and load application overrides
31
+ after it.