@kerfjs/ui 5.0.0-beta.107 → 5.0.0-beta.109

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 (125) hide show
  1. package/ai/component-catalog.json +26 -13
  2. package/ai/component-composition-rules.json +2 -2
  3. package/ai/component-composition.json +10 -4
  4. package/ai/components/button.md +5 -5
  5. package/ai/components/chip.md +1 -0
  6. package/ai/components/foundation.md +1 -1
  7. package/ai/components/list.md +1 -1
  8. package/ai/components/segmented-control.md +1 -0
  9. package/ai/components/surface-scaffold.md +1 -0
  10. package/ai/components/tab-bar.md +5 -5
  11. package/ai/components/text-field.md +3 -1
  12. package/ai/components/toolbar-control-group.md +1 -0
  13. package/ai/components/toolbar.md +1 -1
  14. package/ai/public-api-signatures-v1.md +66 -15
  15. package/ai/skill.md +13 -7
  16. package/ai/webawesome-jsx-signatures-v1.md +1 -1
  17. package/dist/button.d.ts +3 -3
  18. package/dist/button.js +1 -1
  19. package/dist/catalog.js +4 -4
  20. package/dist/chip.d.ts +20 -2
  21. package/dist/chip.js +2 -1
  22. package/dist/{chunk-23PPPNH6.js → chunk-4OV272LF.js} +2 -2
  23. package/dist/{chunk-23PPPNH6.js.map → chunk-4OV272LF.js.map} +1 -1
  24. package/dist/{chunk-2PXZBFEC.js → chunk-5J6Z4BWY.js} +1 -1
  25. package/dist/{chunk-2PXZBFEC.js.map → chunk-5J6Z4BWY.js.map} +1 -1
  26. package/dist/{chunk-G4DRH4A5.js → chunk-6CDILXF4.js} +3 -1
  27. package/dist/chunk-6CDILXF4.js.map +1 -0
  28. package/dist/{chunk-RFLW4FPL.js → chunk-7AK5I7U7.js} +1 -1
  29. package/dist/chunk-7AK5I7U7.js.map +1 -0
  30. package/dist/{chunk-NLMEDZRM.js → chunk-CPSGUGAY.js} +5 -5
  31. package/dist/{chunk-NLMEDZRM.js.map → chunk-CPSGUGAY.js.map} +1 -1
  32. package/dist/{chunk-TXRKCGT3.js → chunk-KPINJHIC.js} +1 -1
  33. package/dist/chunk-KPINJHIC.js.map +1 -0
  34. package/dist/{chunk-N7MBGONH.js → chunk-LMHN2TJL.js} +22 -2
  35. package/dist/chunk-LMHN2TJL.js.map +1 -0
  36. package/dist/{chunk-NS2TBYM4.js → chunk-LZUUUHNH.js} +7 -3
  37. package/dist/chunk-LZUUUHNH.js.map +1 -0
  38. package/dist/{chunk-OY2MXIBB.js → chunk-NB6POCFH.js} +3 -1
  39. package/dist/chunk-NB6POCFH.js.map +1 -0
  40. package/dist/{chunk-AZ3WT77F.js → chunk-P7EJ4CAD.js} +2 -2
  41. package/dist/{chunk-AZ3WT77F.js.map → chunk-P7EJ4CAD.js.map} +1 -1
  42. package/dist/{chunk-Z4DS77U2.js → chunk-SOFPUW3O.js} +4 -4
  43. package/dist/{chunk-Z4DS77U2.js.map → chunk-SOFPUW3O.js.map} +1 -1
  44. package/dist/{chunk-QLA25V2K.js → chunk-WPNIKZMJ.js} +15 -1
  45. package/dist/chunk-WPNIKZMJ.js.map +1 -0
  46. package/dist/{chunk-DNWWF6UN.js → chunk-WSEJ2FDE.js} +4 -4
  47. package/dist/{chunk-DNWWF6UN.js.map → chunk-WSEJ2FDE.js.map} +1 -1
  48. package/dist/{chunk-WU57BYYM.js → chunk-YVZCKXR3.js} +8 -2
  49. package/dist/chunk-YVZCKXR3.js.map +1 -0
  50. package/dist/{chunk-CMLPFIC5.js → chunk-ZN7KUMPY.js} +3 -1
  51. package/dist/chunk-ZN7KUMPY.js.map +1 -0
  52. package/dist/collapsible-panel.js +2 -2
  53. package/dist/index.js +10 -10
  54. package/dist/list-detail-dialog.js +4 -4
  55. package/dist/list.d.ts +7 -1
  56. package/dist/list.js +1 -1
  57. package/dist/message-composer.js +1 -1
  58. package/dist/nav-stack.js +1 -1
  59. package/dist/segmented-control.d.ts +3 -1
  60. package/dist/segmented-control.js +1 -1
  61. package/dist/split-view.js +1 -1
  62. package/dist/styles/button.css +28 -2
  63. package/dist/styles/components/actions/button/button.css +28 -2
  64. package/dist/styles/components/actions/toolbar/toolbar.css +9 -0
  65. package/dist/styles/components/actions/toolbar-control-group/toolbar-control-group.css +29 -1
  66. package/dist/styles/components/collections/framed-list/framed-list.css +2 -0
  67. package/dist/styles/components/layout/pane/pane.css +15 -0
  68. package/dist/styles/components/navigation/nav-stack/nav-stack.css +13 -0
  69. package/dist/styles/components/navigation/tab-bar/tab-bar.css +6 -0
  70. package/dist/styles/components/navigation/tab-navigator/tab-navigator.css +16 -0
  71. package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css +2 -0
  72. package/dist/styles/foundation.css +63 -19
  73. package/dist/styles/framed-list.css +2 -0
  74. package/dist/styles/nav-stack.css +13 -0
  75. package/dist/styles/pane.css +15 -0
  76. package/dist/styles/surface-scaffold.css +2 -0
  77. package/dist/styles/tab-bar.css +6 -0
  78. package/dist/styles/tab-navigator.css +16 -0
  79. package/dist/styles/toolbar-control-group.css +29 -1
  80. package/dist/styles/toolbar.css +9 -0
  81. package/dist/styles/webawesome.css +11 -3
  82. package/dist/surface-scaffold.d.ts +9 -1
  83. package/dist/surface-scaffold.js +1 -1
  84. package/dist/tab-bar.d.ts +2 -2
  85. package/dist/tab-bar.js +1 -1
  86. package/dist/text-field.d.ts +7 -1
  87. package/dist/text-field.js +1 -1
  88. package/dist/toolbar-control-group.d.ts +8 -2
  89. package/dist/toolbar-control-group.js +1 -1
  90. package/dist/toolbar.d.ts +6 -1
  91. package/dist/toolbar.js +1 -1
  92. package/dist/wire-catalog.js +1 -1
  93. package/dist/wire-workbench.js +1 -1
  94. package/dist/workbench-dialog.js +3 -3
  95. package/dist/workbench.js +1 -1
  96. package/docs/accessibility.md +29 -11
  97. package/docs/component-contract.md +19 -6
  98. package/docs/component-selection.md +38 -12
  99. package/docs/design/templates/button/tones-dark.svg +1 -1
  100. package/docs/design/templates/button/tones.svg +1 -1
  101. package/docs/design/templates/button-dark.svg +1 -1
  102. package/docs/design/templates/button.svg +1 -1
  103. package/docs/design/templates/split-button/states-dark.svg +1 -1
  104. package/docs/design/templates/split-button/states.svg +1 -1
  105. package/docs/design/templates/split-button-dark.svg +1 -1
  106. package/docs/design/templates/split-button.svg +1 -1
  107. package/docs/design/templates/text-field/number-dark.svg +1 -0
  108. package/docs/design/templates/text-field/number.svg +1 -0
  109. package/docs/design/templates/text-field-dark.svg +1 -1
  110. package/docs/design/templates/text-field.svg +1 -1
  111. package/docs/layout.md +16 -5
  112. package/docs/webawesome-migration.md +2 -0
  113. package/docs/webawesome-theme.md +8 -2
  114. package/docs/workbench.md +7 -1
  115. package/llms.txt +19 -7
  116. package/package.json +1 -1
  117. package/dist/chunk-CMLPFIC5.js.map +0 -1
  118. package/dist/chunk-G4DRH4A5.js.map +0 -1
  119. package/dist/chunk-N7MBGONH.js.map +0 -1
  120. package/dist/chunk-NS2TBYM4.js.map +0 -1
  121. package/dist/chunk-OY2MXIBB.js.map +0 -1
  122. package/dist/chunk-QLA25V2K.js.map +0 -1
  123. package/dist/chunk-RFLW4FPL.js.map +0 -1
  124. package/dist/chunk-TXRKCGT3.js.map +0 -1
  125. package/dist/chunk-WU57BYYM.js.map +0 -1
package/docs/design/templates/split-button.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 504" width="552" height="504"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="84"/></clipPath><clipPath id="cp1"><rect x="16" y="160" width="520" height="84"/></clipPath><clipPath id="cp2"><rect x="16" y="282" width="520" height="84"/></clipPath><clipPath id="cp3"><rect x="16" y="404" width="520" height="84"/></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="84" rx="0"/></clipPath><clipPath id="ct7"><rect x="16" y="138" width="520" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="160" width="520" height="84" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="260" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="282" width="520" height="84" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="382" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="404" width="520" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="504" 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)">Rounded Tones</text><g clip-path="url(#cp0)"><g clip-path="url(#irc5)"><clipPath id="svgimg6vclip"><rect x="16" y="38" width="520" height="84"/></clipPath><g clip-path="url(#svgimg6vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg6cp0"><rect x="32" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg6cp2"><rect x="56" y="33" width="51.7" height="18"/></clipPath><clipPath id="svgimg6ct3"><rect x="56" y="33" width="51.7" height="18"/></clipPath><mask id="svgimg6bm4"><path d="M120 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg6bw5"><polygon points="120,64 121,64 121,20 120,20"/></clipPath><clipPath id="svgimg6br6"><path d="M119.7 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg6cp7"><rect x="132" y="34" width="16.2" height="16"/></clipPath><clipPath id="svgimg6cp9"><rect x="179.7" y="33" width="88" height="18"/></clipPath><clipPath id="svgimg6ct10"><rect x="179.7" y="33" width="88" height="18"/></clipPath><mask id="svgimg6bm11"><path d="M280 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg6bw12"><polygon points="280,64 281,64 281,20 280,20"/></clipPath><clipPath id="svgimg6br13"><path d="M279.6 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg6cp14"><rect x="292" y="34" width="16.1" height="16"/></clipPath><clipPath id="svgimg6cp16"><rect x="339.6" y="33" width="48" height="18"/></clipPath><clipPath id="svgimg6ct17"><rect x="339.6" y="33" width="48" height="18"/></clipPath><mask id="svgimg6bm18"><path d="M400 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg6bw19"><polygon points="400,64 401,64 401,20 400,20"/></clipPath><clipPath id="svgimg6br20"><path d="M399.7 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg6cp21"><rect x="412" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20" y="20" width="139.7" height="44" rx="12" fill="rgb(0,117,219)"/><g clip-path="url(#svgimg6cp0)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg6svgic1"><rect x="32" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic1)"><g transform="translate(32 34)scale(.66667)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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 clip-path="url(#svgimg6cp2)"><g clip-path="url(#svgimg6ct3)"><text x="56" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Deploy</text></g></g><path d="M120 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg6bw5)"/><g clip-path="url(#svgimg6br6)"/><g clip-path="url(#svgimg6cp7)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg6svgic8"><rect x="132.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic8)"><g transform="translate(132.156 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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="167.7" y="20" width="152" height="44" rx="12" fill="rgb(72,72,74)"/><g clip-path="url(#svgimg6cp9)"><g clip-path="url(#svgimg6ct10)"><text x="179.66" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Run Checks</text></g></g><path d="M280 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg6bw12)"/><g clip-path="url(#svgimg6br13)"/><g clip-path="url(#svgimg6cp14)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg6svgic15"><rect x="292.1" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic15)"><g transform="translate(292.14 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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="327.6" y="20" width="112" height="44" rx="12" fill="rgb(235,0,5)"/><g clip-path="url(#svgimg6cp16)"><g clip-path="url(#svgimg6ct17)"><text x="339.64" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Delete</text></g></g><path d="M400 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg6bw19)"/><g clip-path="url(#svgimg6br20)"/><g clip-path="url(#svgimg6cp21)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg6svgic22"><rect x="412.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic22)"><g transform="translate(412.156 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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="150" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Pill Shape</text><g clip-path="url(#cp1)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="160" width="520" height="84"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 160)"><defs><clipPath id="svgimg9cp0"><rect x="32" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg9cp2"><rect x="56" y="33" width="48.7" height="18"/></clipPath><clipPath id="svgimg9ct3"><rect x="56" y="33" width="48.7" height="18"/></clipPath><mask id="svgimg9bm4"><path d="M117 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg9bw5"><polygon points="117,64 118,64 118,20 117,20"/></clipPath><clipPath id="svgimg9br6"><path d="M116.7 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18z"/></clipPath><clipPath id="svgimg9cp7"><rect x="129" y="34" width="16.2" height="16"/></clipPath><clipPath id="svgimg9cp9"><rect x="176.7" y="33" width="88" height="18"/></clipPath><clipPath id="svgimg9ct10"><rect x="176.7" y="33" width="88" height="18"/></clipPath><mask id="svgimg9bm11"><path d="M277 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg9bw12"><polygon points="277,64 278,64 278,20 277,20"/></clipPath><clipPath id="svgimg9br13"><path d="M276.7 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18z"/></clipPath><clipPath id="svgimg9cp14"><rect x="289" y="34" width="16.2" height="16"/></clipPath><clipPath id="svgimg9cp16"><rect x="336.7" y="33" width="48" height="18"/></clipPath><clipPath id="svgimg9ct17"><rect x="336.7" y="33" width="48" height="18"/></clipPath><mask id="svgimg9bm18"><path d="M397 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg9bw19"><polygon points="397,64 398,64 398,20 397,20"/></clipPath><clipPath id="svgimg9br20"><path d="M396.7 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18z"/></clipPath><clipPath id="svgimg9cp21"><rect x="409" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20" y="20" width="136.7" height="44" rx="22" fill="rgb(0,117,219)"/><g clip-path="url(#svgimg9cp0)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg9svgic1"><rect x="32" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic1)"><g transform="translate(32 34)scale(.66667)"><path d="M12 15V3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m7 10 5 5 5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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 clip-path="url(#svgimg9cp2)"><g clip-path="url(#svgimg9ct3)"><text x="56" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Export</text></g></g><path d="M117 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg9bw5)"/><g clip-path="url(#svgimg9br6)"/><g clip-path="url(#svgimg9cp7)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg9svgic8"><rect x="129.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic8)"><g transform="translate(129.188 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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="164.7" y="20" width="152" height="44" rx="22" fill="rgb(72,72,74)"/><g clip-path="url(#svgimg9cp9)"><g clip-path="url(#svgimg9ct10)"><text x="176.69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Run Checks</text></g></g><path d="M277 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg9bw12)"/><g clip-path="url(#svgimg9br13)"/><g clip-path="url(#svgimg9cp14)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg9svgic15"><rect x="289.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic15)"><g transform="translate(289.172 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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="324.7" y="20" width="112" height="44" rx="22" fill="rgb(235,0,5)"/><g clip-path="url(#svgimg9cp16)"><g clip-path="url(#svgimg9ct17)"><text x="336.67" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Delete</text></g></g><path d="M397 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg9bw19)"/><g clip-path="url(#svgimg9br20)"/><g clip-path="url(#svgimg9cp21)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg9svgic22"><rect x="409.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic22)"><g transform="translate(409.188 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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="272" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Busy and Disabled</text><g clip-path="url(#cp2)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="282" width="520" height="84"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 282)"><defs><clipPath id="svgimg12cp0"><rect x="56" y="33" width="74.4" height="18"/></clipPath><clipPath id="svgimg12ct1"><rect x="56" y="33" width="74.4" height="18"/></clipPath><mask id="svgimg12bm2"><path d="M142 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg12bw3"><polygon points="142,64 143,64 143,20 142,20"/></clipPath><clipPath id="svgimg12br4"><path d="M142.4 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg12cp5"><rect x="154.9" y="34" width="16.1" height="16"/></clipPath><mask id="svgimg12bm7"><path d="M269 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg12bw8"><polygon points="269,64 270,64 270,20 269,20"/></clipPath><clipPath id="svgimg12br9"><path d="M268.9 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg12cp10"><rect x="281" y="34" width="16.4" height="16"/></clipPath><clipPath id="svgimg12cp12"><rect x="202.4" y="33" width="54.5" height="18"/></clipPath><clipPath id="svgimg12ct13"><rect x="202.4" y="33" width="54.5" height="18"/></clipPath></defs><rect x="20" y="20" width="162.4" height="44" rx="12" fill="rgb(72,72,74)"/><g color="rgb(255, 255, 255)"><g transform="translate(32 34)scale(.66667)"><path d="M12 4a8 8 0 0 1 7.9 6.7 1.5 1.5 0 0 0 1.5 1.3 1.5 1.5 0 0 0 1.5-1.7 11 11 0 0 0-21.8 0A1.5 1.5 0 0 0 2.6 12a1.5 1.5 0 0 0 1.5-1.3A8 8 0 0 1 12 4" fill="rgb(255, 255, 255)" stroke="none" stroke-width="1px" stroke-dasharray="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="1" fill-opacity="1" opacity="1" style="marker:none;vector-effect:none;color-interpolation:srgb" transform="rotate(119.929 12 12)"/></g></g><g clip-path="url(#svgimg12cp0)"><g clip-path="url(#svgimg12ct1)"><text x="56" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Deploying</text></g></g><path d="M142 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg12bw3)"/><g clip-path="url(#svgimg12br4)"/><g clip-path="url(#svgimg12cp5)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg12svgic6"><rect x="154.9" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg12svgic6)"><g transform="translate(154.906 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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="190.4" y="20" width="118.5" height="44" rx="12" fill="rgb(0,117,219)"/><path d="M269 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg12bw8)"/><g clip-path="url(#svgimg12br9)"/><g clip-path="url(#svgimg12cp10)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg12svgic11"><rect x="281.4" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg12svgic11)"><g transform="translate(281.375 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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 opacity="0.6" style="isolation:isolate"><g clip-path="url(#svgimg12cp12)"><g clip-path="url(#svgimg12ct13)"><text x="202.41" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Publish</text></g></g></g></g></g></g></g><text x="16" y="394" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Full-Width Primary Action</text><g clip-path="url(#cp3)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="404" width="520" height="84"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 404)"><defs><clipPath id="svgimg15cp0"><rect x="145" y="34" width="16.3" height="16"/></clipPath><clipPath id="svgimg15cp2"><rect x="169.3" y="33" width="125.5" height="18"/></clipPath><clipPath id="svgimg15ct3"><rect x="169.3" y="33" width="125.5" height="18"/></clipPath><mask id="svgimg15bm4"><path d="M420 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg15bw5"><polygon points="420,64 421,64 421,20 420,20"/></clipPath><clipPath id="svgimg15br6"><path d="M420 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg15cp7"><rect x="432.5" y="34" width="16.5" height="16"/></clipPath></defs><rect x="20" y="20" width="440" height="44" rx="12" fill="rgb(52,199,89)"/><g clip-path="url(#svgimg15cp0)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg15svgic1"><rect x="145.3" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic1)"><g transform="translate(145.266 34)scale(.66667)"><path d="M5 5a2 2 0 0 1 3-1.7l12 7a2 2 0 0 1 0 3.4l-12 7A2 2 0 0 1 5 19Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg15cp2)"><g clip-path="url(#svgimg15ct3)"><text x="169.27" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(29,29,31)">Drive with Codex</text></g></g><path d="M420 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(29,29,31,0.28)" fill-rule="evenodd" clip-path="url(#svgimg15bw5)"/><g clip-path="url(#svgimg15br6)"/><g clip-path="url(#svgimg15cp7)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg15svgic8"><rect x="432.5" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic8)"><g transform="translate(432.5 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 504" width="552" height="504"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="84"/></clipPath><clipPath id="cp1"><rect x="16" y="160" width="520" height="84"/></clipPath><clipPath id="cp2"><rect x="16" y="282" width="520" height="84"/></clipPath><clipPath id="cp3"><rect x="16" y="404" width="520" height="84"/></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="84" rx="0"/></clipPath><clipPath id="ct7"><rect x="16" y="138" width="520" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="160" width="520" height="84" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="260" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="282" width="520" height="84" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="382" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="404" width="520" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="504" 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)">Rounded Tones</text><g clip-path="url(#cp0)"><g clip-path="url(#irc5)"><clipPath id="svgimg6vclip"><rect x="16" y="38" width="520" height="84"/></clipPath><g clip-path="url(#svgimg6vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg6cp0"><rect x="32" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg6cp2"><rect x="56" y="33" width="51.7" height="18"/></clipPath><clipPath id="svgimg6ct3"><rect x="56" y="33" width="51.7" height="18"/></clipPath><mask id="svgimg6bm4"><path d="M120 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg6bw5"><polygon points="120,64 121,64 121,20 120,20"/></clipPath><clipPath id="svgimg6br6"><path d="M119.7 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg6cp7"><rect x="132" y="34" width="16.2" height="16"/></clipPath><clipPath id="svgimg6cp9"><rect x="179.7" y="33" width="88" height="18"/></clipPath><clipPath id="svgimg6ct10"><rect x="179.7" y="33" width="88" height="18"/></clipPath><mask id="svgimg6bm11"><path d="M280 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg6bw12"><polygon points="280,64 281,64 281,20 280,20"/></clipPath><clipPath id="svgimg6br13"><path d="M279.6 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg6cp14"><rect x="292" y="34" width="16.1" height="16"/></clipPath><clipPath id="svgimg6cp16"><rect x="339.6" y="33" width="48" height="18"/></clipPath><clipPath id="svgimg6ct17"><rect x="339.6" y="33" width="48" height="18"/></clipPath><mask id="svgimg6bm18"><path d="M400 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg6bw19"><polygon points="400,64 401,64 401,20 400,20"/></clipPath><clipPath id="svgimg6br20"><path d="M399.7 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg6cp21"><rect x="412" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20" y="20" width="139.7" height="44" rx="12" fill="rgb(0,117,219)"/><g clip-path="url(#svgimg6cp0)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg6svgic1"><rect x="32" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic1)"><g transform="translate(32 34)scale(.66667)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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 clip-path="url(#svgimg6cp2)"><g clip-path="url(#svgimg6ct3)"><text x="56" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Deploy</text></g></g><path d="M120 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg6bw5)"/><g clip-path="url(#svgimg6br6)"/><g clip-path="url(#svgimg6cp7)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg6svgic8"><rect x="132.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic8)"><g transform="translate(132.156 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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="167.7" y="20" width="152" height="44" rx="12" fill="rgb(72,72,74)"/><g clip-path="url(#svgimg6cp9)"><g clip-path="url(#svgimg6ct10)"><text x="179.66" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Run Checks</text></g></g><path d="M280 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg6bw12)"/><g clip-path="url(#svgimg6br13)"/><g clip-path="url(#svgimg6cp14)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg6svgic15"><rect x="292.1" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic15)"><g transform="translate(292.14 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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="327.6" y="20" width="112" height="44" rx="12" fill="rgb(235,0,5)"/><g clip-path="url(#svgimg6cp16)"><g clip-path="url(#svgimg6ct17)"><text x="339.64" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Delete</text></g></g><path d="M400 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg6bw19)"/><g clip-path="url(#svgimg6br20)"/><g clip-path="url(#svgimg6cp21)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg6svgic22"><rect x="412.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg6svgic22)"><g transform="translate(412.156 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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="150" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Pill Shape</text><g clip-path="url(#cp1)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="160" width="520" height="84"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 160)"><defs><clipPath id="svgimg9cp0"><rect x="32" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg9cp2"><rect x="56" y="33" width="48.7" height="18"/></clipPath><clipPath id="svgimg9ct3"><rect x="56" y="33" width="48.7" height="18"/></clipPath><mask id="svgimg9bm4"><path d="M117 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg9bw5"><polygon points="117,64 118,64 118,20 117,20"/></clipPath><clipPath id="svgimg9br6"><path d="M116.7 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18z"/></clipPath><clipPath id="svgimg9cp7"><rect x="129" y="34" width="16.2" height="16"/></clipPath><clipPath id="svgimg9cp9"><rect x="176.7" y="33" width="88" height="18"/></clipPath><clipPath id="svgimg9ct10"><rect x="176.7" y="33" width="88" height="18"/></clipPath><mask id="svgimg9bm11"><path d="M277 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg9bw12"><polygon points="277,64 278,64 278,20 277,20"/></clipPath><clipPath id="svgimg9br13"><path d="M276.7 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18z"/></clipPath><clipPath id="svgimg9cp14"><rect x="289" y="34" width="16.2" height="16"/></clipPath><clipPath id="svgimg9cp16"><rect x="336.7" y="33" width="48" height="18"/></clipPath><clipPath id="svgimg9ct17"><rect x="336.7" y="33" width="48" height="18"/></clipPath><mask id="svgimg9bm18"><path d="M397 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg9bw19"><polygon points="397,64 398,64 398,20 397,20"/></clipPath><clipPath id="svgimg9br20"><path d="M396.7 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18z"/></clipPath><clipPath id="svgimg9cp21"><rect x="409" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20" y="20" width="136.7" height="44" rx="22" fill="rgb(0,117,219)"/><g clip-path="url(#svgimg9cp0)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg9svgic1"><rect x="32" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic1)"><g transform="translate(32 34)scale(.66667)"><path d="M12 15V3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m7 10 5 5 5-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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 clip-path="url(#svgimg9cp2)"><g clip-path="url(#svgimg9ct3)"><text x="56" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Export</text></g></g><path d="M117 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg9bw5)"/><g clip-path="url(#svgimg9br6)"/><g clip-path="url(#svgimg9cp7)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg9svgic8"><rect x="129.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic8)"><g transform="translate(129.188 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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="164.7" y="20" width="152" height="44" rx="22" fill="rgb(72,72,74)"/><g clip-path="url(#svgimg9cp9)"><g clip-path="url(#svgimg9ct10)"><text x="176.69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Run Checks</text></g></g><path d="M277 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg9bw12)"/><g clip-path="url(#svgimg9br13)"/><g clip-path="url(#svgimg9cp14)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg9svgic15"><rect x="289.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic15)"><g transform="translate(289.172 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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="324.7" y="20" width="112" height="44" rx="22" fill="rgb(235,0,5)"/><g clip-path="url(#svgimg9cp16)"><g clip-path="url(#svgimg9ct17)"><text x="336.67" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Delete</text></g></g><path d="M397 20h18a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-18zm1 0h17a22 22 0 0 1 22 22 22 22 0 0 1-22 22h-17z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg9bw19)"/><g clip-path="url(#svgimg9br20)"/><g clip-path="url(#svgimg9cp21)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg9svgic22"><rect x="409.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg9svgic22)"><g transform="translate(409.188 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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="272" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Busy and Disabled</text><g clip-path="url(#cp2)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="282" width="520" height="84"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 282)"><defs><clipPath id="svgimg12cp0"><rect x="56" y="33" width="74.4" height="18"/></clipPath><clipPath id="svgimg12ct1"><rect x="56" y="33" width="74.4" height="18"/></clipPath><mask id="svgimg12bm2"><path d="M142 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg12bw3"><polygon points="142,64 143,64 143,20 142,20"/></clipPath><clipPath id="svgimg12br4"><path d="M142.4 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg12cp5"><rect x="154.9" y="34" width="16.1" height="16"/></clipPath><mask id="svgimg12bm7"><path d="M269 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg12bw8"><polygon points="269,64 270,64 270,20 269,20"/></clipPath><clipPath id="svgimg12br9"><path d="M268.9 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg12cp10"><rect x="281" y="34" width="16.4" height="16"/></clipPath><clipPath id="svgimg12cp12"><rect x="202.4" y="33" width="54.5" height="18"/></clipPath><clipPath id="svgimg12ct13"><rect x="202.4" y="33" width="54.5" height="18"/></clipPath></defs><rect x="20" y="20" width="162.4" height="44" rx="12" fill="rgb(72,72,74)"/><g color="rgb(255, 255, 255)"><g transform="translate(32 34)scale(.66667)"><path d="M12 4a8 8 0 0 1 7.9 6.7 1.5 1.5 0 0 0 1.5 1.3 1.5 1.5 0 0 0 1.5-1.7 11 11 0 0 0-21.8 0A1.5 1.5 0 0 0 2.6 12a1.5 1.5 0 0 0 1.5-1.3A8 8 0 0 1 12 4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="rgb(255, 255, 255)" stroke="none" stroke-width="1px" stroke-dasharray="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g><g clip-path="url(#svgimg12cp0)"><g clip-path="url(#svgimg12ct1)"><text x="56" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Deploying</text></g></g><path d="M142 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg12bw3)"/><g clip-path="url(#svgimg12br4)"/><g clip-path="url(#svgimg12cp5)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg12svgic6"><rect x="154.9" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg12svgic6)"><g transform="translate(154.906 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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="190.4" y="20" width="118.5" height="44" rx="12" fill="rgb(0,117,219)"/><path d="M269 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(255,255,255,0.28)" fill-rule="evenodd" clip-path="url(#svgimg12bw8)"/><g clip-path="url(#svgimg12br9)"/><g clip-path="url(#svgimg12cp10)"><g color="rgb(255, 255, 255)"><clipPath id="svgimg12svgic11"><rect x="281.4" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg12svgic11)"><g transform="translate(281.375 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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 opacity="0.6" style="isolation:isolate"><g clip-path="url(#svgimg12cp12)"><g clip-path="url(#svgimg12ct13)"><text x="202.41" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Publish</text></g></g></g></g></g></g></g><text x="16" y="394" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Full-Width Primary Action</text><g clip-path="url(#cp3)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="404" width="520" height="84"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 404)"><defs><clipPath id="svgimg15cp0"><rect x="145" y="34" width="16.3" height="16"/></clipPath><clipPath id="svgimg15cp2"><rect x="169.3" y="33" width="125.5" height="18"/></clipPath><clipPath id="svgimg15ct3"><rect x="169.3" y="33" width="125.5" height="18"/></clipPath><mask id="svgimg15bm4"><path d="M420 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="white" fill-rule="evenodd"/></mask><clipPath id="svgimg15bw5"><polygon points="420,64 421,64 421,20 420,20"/></clipPath><clipPath id="svgimg15br6"><path d="M420 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28z"/></clipPath><clipPath id="svgimg15cp7"><rect x="432.5" y="34" width="16.5" height="16"/></clipPath></defs><rect x="20" y="20" width="440" height="44" rx="12" fill="rgb(52,199,89)"/><g clip-path="url(#svgimg15cp0)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg15svgic1"><rect x="145.3" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic1)"><g transform="translate(145.266 34)scale(.66667)"><path d="M5 5a2 2 0 0 1 3-1.7l12 7a2 2 0 0 1 0 3.4l-12 7A2 2 0 0 1 5 19Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg15cp2)"><g clip-path="url(#svgimg15ct3)"><text x="169.27" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(29,29,31)">Drive with Codex</text></g></g><path d="M420 20h28a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-28zm1 0h27a12 12 0 0 1 12 12v20a12 12 0 0 1-12 12h-27z" fill="rgba(29,29,31,0.28)" fill-rule="evenodd" clip-path="url(#svgimg15bw5)"/><g clip-path="url(#svgimg15br6)"/><g clip-path="url(#svgimg15cp7)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg15svgic8"><rect x="432.5" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic8)"><g transform="translate(432.5 34)scale(.66667)"><path d="m6 9 6 6 6-6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g></svg>
package/docs/design/templates/text-field/number-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 94" width="400" height="94"><defs><clipPath id="ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="cp1"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="ct2"><rect x="29" y="45.4" width="342" height="42"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">CUSTOMS DUTY</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#cp1)"><g clip-path="url(#ct2)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">12.50</text></g></g></svg>
package/docs/design/templates/text-field/number.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 94" width="400" height="94"><defs><clipPath id="ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="cp1"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="ct2"><rect x="29" y="45.4" width="342" height="42"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">CUSTOMS DUTY</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#cp1)"><g clip-path="url(#ct2)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">12.50</text></g></g></svg>
package/docs/design/templates/text-field-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 819" width="432" height="819"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="134"/></clipPath><clipPath id="cp1"><rect x="16" y="210" width="400" height="84"/></clipPath><clipPath id="cp2"><rect x="16" y="332" width="400" height="134"/></clipPath><clipPath id="cp3"><rect x="16" y="504" width="400" height="167"/></clipPath><clipPath id="cp4"><rect x="16" y="709" width="400" height="94"/></clipPath><clipPath id="ct5"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="38" width="400" height="134" rx="0"/></clipPath><clipPath id="ct8"><rect x="16" y="188" width="400" height="22"/></clipPath><clipPath id="irc9"><rect x="16" y="210" width="400" height="84" rx="0"/></clipPath><clipPath id="ct11"><rect x="16" y="310" width="400" height="22"/></clipPath><clipPath id="irc12"><rect x="16" y="332" width="400" height="134" rx="0"/></clipPath><clipPath id="ct14"><rect x="16" y="482" width="400" height="22"/></clipPath><clipPath id="irc15"><rect x="16" y="504" width="400" height="167" rx="0"/></clipPath><clipPath id="ct17"><rect x="16" y="687" width="400" height="22"/></clipPath><clipPath id="irc18"><rect x="16" y="709" width="400" height="94" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="819" 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)">Label, Value, and Hint</text><g clip-path="url(#cp0)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="38" width="400" height="134"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg7ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg7cp1"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg7ct2"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg7cp3"><rect x="353" y="58" width="16" height="16.4"/></clipPath><clipPath id="svgimg7ct5"><rect x="20" y="95.4" width="360" height="22.4"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">PROJECT NAME</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg7cp1)"><g clip-path="url(#svgimg7ct2)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Northstar Migration</text></g></g><g clip-path="url(#svgimg7cp3)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg7svgic4"><rect x="353" y="58.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg7svgic4)"><g transform="translate(353 58.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m15 9-6 6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m9 9 6 6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="29" y="111.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(174,174,178)">Visible to collaborators.</text></g></g></g></g><text x="16" y="200" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Search with an Icon</text><g clip-path="url(#cp1)"><g clip-path="url(#irc9)"><clipPath id="svgimg10vclip"><rect x="16" y="210" width="400" height="84"/></clipPath><g clip-path="url(#svgimg10vclip)"><g transform="translate(16 210)"><defs><clipPath id="svgimg10cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg10cp2"><rect x="53" y="21" width="318" height="42"/></clipPath><clipPath id="svgimg10ct3"><rect x="53" y="21" width="318" height="42"/></clipPath></defs><rect x="20" y="20" width="360" height="44" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg10cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg10svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg10svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="11" cy="11" r="8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" 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 clip-path="url(#svgimg10cp2)"><g clip-path="url(#svgimg10ct3)"><text x="53" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174, 174, 178)">Search tickets</text></g></g></g></g></g></g><text x="16" y="322" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Required with an Error</text><g clip-path="url(#cp2)"><g clip-path="url(#irc12)"><clipPath id="svgimg13vclip"><rect x="16" y="332" width="400" height="134"/></clipPath><g clip-path="url(#svgimg13vclip)"><g transform="translate(16 332)"><defs><clipPath id="svgimg13ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg13ct1"><rect x="70.3" y="23" width="6.3" height="15"/></clipPath><clipPath id="svgimg13cp2"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg13ct3"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg13ct4"><rect x="20" y="95.4" width="360" height="22.4"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">EMAIL</text><text x="70.3" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">*</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><g clip-path="url(#svgimg13cp2)"><g clip-path="url(#svgimg13ct3)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">robin@</text></g></g><text x="29" y="111.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(255,105,108)">Enter a complete email address.</text></g></g></g></g><text x="16" y="494" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Growing Multi-Line with a Count</text><g clip-path="url(#cp3)"><g clip-path="url(#irc15)"><clipPath id="svgimg16vclip"><rect x="16" y="504" width="400" height="167"/></clipPath><g clip-path="url(#svgimg16vclip)"><g transform="translate(16 504)"><defs><clipPath id="svgimg16ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg16cp1"><rect x="21" y="45.4" width="358" height="78.4"/></clipPath><clipPath id="svgimg16ct2"><rect x="29" y="45.4" width="342" height="78.4"/></clipPath><clipPath id="svgimg16ct3"><rect x="330.4" y="131.8" width="49.6" height="19.2"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">RELEASE NOTE</text><rect x="20" y="44.4" width="360" height="80.4" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="80" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg16cp1)"><g clip-path="url(#svgimg16ct2)"><text x="29" y="67" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174, 174, 178)">Summarize what changed</text></g></g><text x="330.36" y="145.75" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" fill="rgb(174,174,178)">0 / 200</text></g></g></g></g><text x="16" y="699" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Compact</text><g clip-path="url(#cp4)"><g clip-path="url(#irc18)"><clipPath id="svgimg19vclip"><rect x="16" y="709" width="400" height="94"/></clipPath><g clip-path="url(#svgimg19vclip)"><g transform="translate(16 709)"><defs><clipPath id="svgimg19ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg19cp1"><rect x="29" y="45.4" width="342" height="31"/></clipPath><clipPath id="svgimg19ct2"><rect x="29" y="45.4" width="342" height="31"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">TAG</text><rect x="20" y="44.4" width="360" height="33" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="32" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg19cp1)"><g clip-path="url(#svgimg19ct2)"><text x="29" y="66.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(245,245,247)">design</text></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 951" width="432" height="951"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="134"/></clipPath><clipPath id="cp1"><rect x="16" y="210" width="400" height="84"/></clipPath><clipPath id="cp2"><rect x="16" y="332" width="400" height="134"/></clipPath><clipPath id="cp3"><rect x="16" y="504" width="400" height="167"/></clipPath><clipPath id="cp4"><rect x="16" y="709" width="400" height="94"/></clipPath><clipPath id="cp5"><rect x="16" y="841" width="400" height="94"/></clipPath><clipPath id="ct6"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="38" width="400" height="134" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="188" width="400" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="210" width="400" height="84" rx="0"/></clipPath><clipPath id="ct12"><rect x="16" y="310" width="400" height="22"/></clipPath><clipPath id="irc13"><rect x="16" y="332" width="400" height="134" rx="0"/></clipPath><clipPath id="ct15"><rect x="16" y="482" width="400" height="22"/></clipPath><clipPath id="irc16"><rect x="16" y="504" width="400" height="167" rx="0"/></clipPath><clipPath id="ct18"><rect x="16" y="687" width="400" height="22"/></clipPath><clipPath id="irc19"><rect x="16" y="709" width="400" height="94" rx="0"/></clipPath><clipPath id="ct21"><rect x="16" y="819" width="400" height="22"/></clipPath><clipPath id="irc22"><rect x="16" y="841" width="400" height="94" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="951" 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)">Label, Value, and Hint</text><g clip-path="url(#cp0)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="38" width="400" height="134"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg8ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg8cp1"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg8ct2"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg8cp3"><rect x="353" y="58" width="16" height="16.4"/></clipPath><clipPath id="svgimg8ct5"><rect x="20" y="95.4" width="360" height="22.4"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">PROJECT NAME</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg8cp1)"><g clip-path="url(#svgimg8ct2)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Northstar Migration</text></g></g><g clip-path="url(#svgimg8cp3)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg8svgic4"><rect x="353" y="58.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg8svgic4)"><g transform="translate(353 58.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m15 9-6 6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m9 9 6 6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="29" y="111.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(174,174,178)">Visible to collaborators.</text></g></g></g></g><text x="16" y="200" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Search with an Icon</text><g clip-path="url(#cp1)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="210" width="400" height="84"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 210)"><defs><clipPath id="svgimg11cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg11cp2"><rect x="53" y="21" width="318" height="42"/></clipPath><clipPath id="svgimg11ct3"><rect x="53" y="21" width="318" height="42"/></clipPath></defs><rect x="20" y="20" width="360" height="44" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="20.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg11cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg11svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg11svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="11" cy="11" r="8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" 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 clip-path="url(#svgimg11cp2)"><g clip-path="url(#svgimg11ct3)"><text x="53" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174, 174, 178)">Search tickets</text></g></g></g></g></g></g><text x="16" y="322" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Required with an Error</text><g clip-path="url(#cp2)"><g clip-path="url(#irc13)"><clipPath id="svgimg14vclip"><rect x="16" y="332" width="400" height="134"/></clipPath><g clip-path="url(#svgimg14vclip)"><g transform="translate(16 332)"><defs><clipPath id="svgimg14ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg14ct1"><rect x="70.3" y="23" width="6.3" height="15"/></clipPath><clipPath id="svgimg14cp2"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg14ct3"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg14ct4"><rect x="20" y="95.4" width="360" height="22.4"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">EMAIL</text><text x="70.3" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">*</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><g clip-path="url(#svgimg14cp2)"><g clip-path="url(#svgimg14ct3)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">robin@</text></g></g><text x="29" y="111.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(255,105,108)">Enter a complete email address.</text></g></g></g></g><text x="16" y="494" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Growing Multi-Line with a Count</text><g clip-path="url(#cp3)"><g clip-path="url(#irc16)"><clipPath id="svgimg17vclip"><rect x="16" y="504" width="400" height="167"/></clipPath><g clip-path="url(#svgimg17vclip)"><g transform="translate(16 504)"><defs><clipPath id="svgimg17ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg17cp1"><rect x="21" y="45.4" width="358" height="78.4"/></clipPath><clipPath id="svgimg17ct2"><rect x="29" y="45.4" width="342" height="78.4"/></clipPath><clipPath id="svgimg17ct3"><rect x="330.4" y="131.8" width="49.6" height="19.2"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">RELEASE NOTE</text><rect x="20" y="44.4" width="360" height="80.4" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="80" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg17cp1)"><g clip-path="url(#svgimg17ct2)"><text x="29" y="67" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174, 174, 178)">Summarize what changed</text></g></g><text x="330.36" y="145.75" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" fill="rgb(174,174,178)">0 / 200</text></g></g></g></g><text x="16" y="699" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Compact</text><g clip-path="url(#cp4)"><g clip-path="url(#irc19)"><clipPath id="svgimg20vclip"><rect x="16" y="709" width="400" height="94"/></clipPath><g clip-path="url(#svgimg20vclip)"><g transform="translate(16 709)"><defs><clipPath id="svgimg20ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg20cp1"><rect x="29" y="45.4" width="342" height="31"/></clipPath><clipPath id="svgimg20ct2"><rect x="29" y="45.4" width="342" height="31"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">TAG</text><rect x="20" y="44.4" width="360" height="33" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="32" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg20cp1)"><g clip-path="url(#svgimg20ct2)"><text x="29" y="66.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(245,245,247)">design</text></g></g></g></g></g></g><text x="16" y="831" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Bounded Decimal</text><g clip-path="url(#cp5)"><g clip-path="url(#irc22)"><clipPath id="svgimg23vclip"><rect x="16" y="841" width="400" height="94"/></clipPath><g clip-path="url(#svgimg23vclip)"><g transform="translate(16 841)"><defs><clipPath id="svgimg23ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg23cp1"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg23ct2"><rect x="29" y="45.4" width="342" height="42"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">CUSTOMS DUTY</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(28,28,30)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><g clip-path="url(#svgimg23cp1)"><g clip-path="url(#svgimg23ct2)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">12.50</text></g></g></g></g></g></g></svg>
package/docs/design/templates/text-field.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 819" width="432" height="819"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="134"/></clipPath><clipPath id="cp1"><rect x="16" y="210" width="400" height="84"/></clipPath><clipPath id="cp2"><rect x="16" y="332" width="400" height="134"/></clipPath><clipPath id="cp3"><rect x="16" y="504" width="400" height="167"/></clipPath><clipPath id="cp4"><rect x="16" y="709" width="400" height="94"/></clipPath><clipPath id="ct5"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="38" width="400" height="134" rx="0"/></clipPath><clipPath id="ct8"><rect x="16" y="188" width="400" height="22"/></clipPath><clipPath id="irc9"><rect x="16" y="210" width="400" height="84" rx="0"/></clipPath><clipPath id="ct11"><rect x="16" y="310" width="400" height="22"/></clipPath><clipPath id="irc12"><rect x="16" y="332" width="400" height="134" rx="0"/></clipPath><clipPath id="ct14"><rect x="16" y="482" width="400" height="22"/></clipPath><clipPath id="irc15"><rect x="16" y="504" width="400" height="167" rx="0"/></clipPath><clipPath id="ct17"><rect x="16" y="687" width="400" height="22"/></clipPath><clipPath id="irc18"><rect x="16" y="709" width="400" height="94" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="819" 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)">Label, Value, and Hint</text><g clip-path="url(#cp0)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="38" width="400" height="134"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg7ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg7cp1"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg7ct2"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg7cp3"><rect x="353" y="58" width="16" height="16.4"/></clipPath><clipPath id="svgimg7ct5"><rect x="20" y="95.4" width="360" height="22.4"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">PROJECT NAME</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg7cp1)"><g clip-path="url(#svgimg7ct2)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Northstar Migration</text></g></g><g clip-path="url(#svgimg7cp3)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg7svgic4"><rect x="353" y="58.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg7svgic4)"><g transform="translate(353 58.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m15 9-6 6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m9 9 6 6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="29" y="111.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(110,110,115)">Visible to collaborators.</text></g></g></g></g><text x="16" y="200" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Search with an Icon</text><g clip-path="url(#cp1)"><g clip-path="url(#irc9)"><clipPath id="svgimg10vclip"><rect x="16" y="210" width="400" height="84"/></clipPath><g clip-path="url(#svgimg10vclip)"><g transform="translate(16 210)"><defs><clipPath id="svgimg10cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg10cp2"><rect x="53" y="21" width="318" height="42"/></clipPath><clipPath id="svgimg10ct3"><rect x="53" y="21" width="318" height="42"/></clipPath></defs><rect x="20" y="20" width="360" height="44" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg10cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg10svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg10svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="11" cy="11" r="8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" 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 clip-path="url(#svgimg10cp2)"><g clip-path="url(#svgimg10ct3)"><text x="53" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110, 110, 115)">Search tickets</text></g></g></g></g></g></g><text x="16" y="322" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Required with an Error</text><g clip-path="url(#cp2)"><g clip-path="url(#irc12)"><clipPath id="svgimg13vclip"><rect x="16" y="332" width="400" height="134"/></clipPath><g clip-path="url(#svgimg13vclip)"><g transform="translate(16 332)"><defs><clipPath id="svgimg13ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg13ct1"><rect x="70.3" y="23" width="6.3" height="15"/></clipPath><clipPath id="svgimg13cp2"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg13ct3"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg13ct4"><rect x="20" y="95.4" width="360" height="22.4"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">EMAIL</text><text x="70.3" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">*</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgb(190,6,11)" stroke-width="1"/><g clip-path="url(#svgimg13cp2)"><g clip-path="url(#svgimg13ct3)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">robin@</text></g></g><text x="29" y="111.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(194,11,32)">Enter a complete email address.</text></g></g></g></g><text x="16" y="494" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Growing Multi-Line with a Count</text><g clip-path="url(#cp3)"><g clip-path="url(#irc15)"><clipPath id="svgimg16vclip"><rect x="16" y="504" width="400" height="167"/></clipPath><g clip-path="url(#svgimg16vclip)"><g transform="translate(16 504)"><defs><clipPath id="svgimg16ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg16cp1"><rect x="21" y="45.4" width="358" height="78.4"/></clipPath><clipPath id="svgimg16ct2"><rect x="29" y="45.4" width="342" height="78.4"/></clipPath><clipPath id="svgimg16ct3"><rect x="330.4" y="131.8" width="49.6" height="19.2"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">RELEASE NOTE</text><rect x="20" y="44.4" width="360" height="80.4" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="80" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg16cp1)"><g clip-path="url(#svgimg16ct2)"><text x="29" y="67" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110, 110, 115)">Summarize what changed</text></g></g><text x="330.36" y="145.75" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" fill="rgb(110,110,115)">0 / 200</text></g></g></g></g><text x="16" y="699" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Compact</text><g clip-path="url(#cp4)"><g clip-path="url(#irc18)"><clipPath id="svgimg19vclip"><rect x="16" y="709" width="400" height="94"/></clipPath><g clip-path="url(#svgimg19vclip)"><g transform="translate(16 709)"><defs><clipPath id="svgimg19ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg19cp1"><rect x="29" y="45.4" width="342" height="31"/></clipPath><clipPath id="svgimg19ct2"><rect x="29" y="45.4" width="342" height="31"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">TAG</text><rect x="20" y="44.4" width="360" height="33" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="32" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg19cp1)"><g clip-path="url(#svgimg19ct2)"><text x="29" y="66.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(29,29,31)">design</text></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 951" width="432" height="951"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="134"/></clipPath><clipPath id="cp1"><rect x="16" y="210" width="400" height="84"/></clipPath><clipPath id="cp2"><rect x="16" y="332" width="400" height="134"/></clipPath><clipPath id="cp3"><rect x="16" y="504" width="400" height="167"/></clipPath><clipPath id="cp4"><rect x="16" y="709" width="400" height="94"/></clipPath><clipPath id="cp5"><rect x="16" y="841" width="400" height="94"/></clipPath><clipPath id="ct6"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="38" width="400" height="134" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="188" width="400" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="210" width="400" height="84" rx="0"/></clipPath><clipPath id="ct12"><rect x="16" y="310" width="400" height="22"/></clipPath><clipPath id="irc13"><rect x="16" y="332" width="400" height="134" rx="0"/></clipPath><clipPath id="ct15"><rect x="16" y="482" width="400" height="22"/></clipPath><clipPath id="irc16"><rect x="16" y="504" width="400" height="167" rx="0"/></clipPath><clipPath id="ct18"><rect x="16" y="687" width="400" height="22"/></clipPath><clipPath id="irc19"><rect x="16" y="709" width="400" height="94" rx="0"/></clipPath><clipPath id="ct21"><rect x="16" y="819" width="400" height="22"/></clipPath><clipPath id="irc22"><rect x="16" y="841" width="400" height="94" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="951" 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)">Label, Value, and Hint</text><g clip-path="url(#cp0)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="38" width="400" height="134"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg8ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg8cp1"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg8ct2"><rect x="29" y="45.4" width="310" height="42"/></clipPath><clipPath id="svgimg8cp3"><rect x="353" y="58" width="16" height="16.4"/></clipPath><clipPath id="svgimg8ct5"><rect x="20" y="95.4" width="360" height="22.4"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">PROJECT NAME</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg8cp1)"><g clip-path="url(#svgimg8ct2)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Northstar Migration</text></g></g><g clip-path="url(#svgimg8cp3)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg8svgic4"><rect x="353" y="58.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg8svgic4)"><g transform="translate(353 58.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m15 9-6 6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m9 9 6 6" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="29" y="111.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(110,110,115)">Visible to collaborators.</text></g></g></g></g><text x="16" y="200" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Search with an Icon</text><g clip-path="url(#cp1)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="210" width="400" height="84"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 210)"><defs><clipPath id="svgimg11cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg11cp2"><rect x="53" y="21" width="318" height="42"/></clipPath><clipPath id="svgimg11ct3"><rect x="53" y="21" width="318" height="42"/></clipPath></defs><rect x="20" y="20" width="360" height="44" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="20.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg11cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg11svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg11svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="m21 21-4.3-4.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="11" cy="11" r="8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" 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 clip-path="url(#svgimg11cp2)"><g clip-path="url(#svgimg11ct3)"><text x="53" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110, 110, 115)">Search tickets</text></g></g></g></g></g></g><text x="16" y="322" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Required with an Error</text><g clip-path="url(#cp2)"><g clip-path="url(#irc13)"><clipPath id="svgimg14vclip"><rect x="16" y="332" width="400" height="134"/></clipPath><g clip-path="url(#svgimg14vclip)"><g transform="translate(16 332)"><defs><clipPath id="svgimg14ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg14ct1"><rect x="70.3" y="23" width="6.3" height="15"/></clipPath><clipPath id="svgimg14cp2"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg14ct3"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg14ct4"><rect x="20" y="95.4" width="360" height="22.4"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">EMAIL</text><text x="70.3" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">*</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgb(190,6,11)" stroke-width="1"/><g clip-path="url(#svgimg14cp2)"><g clip-path="url(#svgimg14ct3)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">robin@</text></g></g><text x="29" y="111.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(194,11,32)">Enter a complete email address.</text></g></g></g></g><text x="16" y="494" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Growing Multi-Line with a Count</text><g clip-path="url(#cp3)"><g clip-path="url(#irc16)"><clipPath id="svgimg17vclip"><rect x="16" y="504" width="400" height="167"/></clipPath><g clip-path="url(#svgimg17vclip)"><g transform="translate(16 504)"><defs><clipPath id="svgimg17ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg17cp1"><rect x="21" y="45.4" width="358" height="78.4"/></clipPath><clipPath id="svgimg17ct2"><rect x="29" y="45.4" width="342" height="78.4"/></clipPath><clipPath id="svgimg17ct3"><rect x="330.4" y="131.8" width="49.6" height="19.2"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">RELEASE NOTE</text><rect x="20" y="44.4" width="360" height="80.4" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="80" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg17cp1)"><g clip-path="url(#svgimg17ct2)"><text x="29" y="67" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110, 110, 115)">Summarize what changed</text></g></g><text x="330.36" y="145.75" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" fill="rgb(110,110,115)">0 / 200</text></g></g></g></g><text x="16" y="699" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Compact</text><g clip-path="url(#cp4)"><g clip-path="url(#irc19)"><clipPath id="svgimg20vclip"><rect x="16" y="709" width="400" height="94"/></clipPath><g clip-path="url(#svgimg20vclip)"><g transform="translate(16 709)"><defs><clipPath id="svgimg20ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg20cp1"><rect x="29" y="45.4" width="342" height="31"/></clipPath><clipPath id="svgimg20ct2"><rect x="29" y="45.4" width="342" height="31"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">TAG</text><rect x="20" y="44.4" width="360" height="33" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="32" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg20cp1)"><g clip-path="url(#svgimg20ct2)"><text x="29" y="66.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(29,29,31)">design</text></g></g></g></g></g></g><text x="16" y="831" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Bounded Decimal</text><g clip-path="url(#cp5)"><g clip-path="url(#irc22)"><clipPath id="svgimg23vclip"><rect x="16" y="841" width="400" height="94"/></clipPath><g clip-path="url(#svgimg23vclip)"><g transform="translate(16 841)"><defs><clipPath id="svgimg23ct0"><rect x="20" y="24" width="360" height="14.4"/></clipPath><clipPath id="svgimg23cp1"><rect x="29" y="45.4" width="342" height="42"/></clipPath><clipPath id="svgimg23ct2"><rect x="29" y="45.4" width="342" height="42"/></clipPath></defs><text x="29" y="35" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">CUSTOMS DUTY</text><rect x="20" y="44.4" width="360" height="44" rx="12" fill="rgb(255,255,255)"/><rect x="20.5" y="44.5" width="359" height="43" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><g clip-path="url(#svgimg23cp1)"><g clip-path="url(#svgimg23ct2)"><text x="29" y="72.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">12.50</text></g></g></g></g></g></g></svg>
package/docs/layout.md CHANGED
@@ -175,10 +175,15 @@ Add `accent` (usually the artwork's most vivid color) to re-derive the brand
175
175
  ramp too: `tint={{ color, scheme, accent }}`. Loud fills (primary buttons, the
176
176
  current popup row, checked controls) and their text, brand text and links,
177
177
  text on brand fills, and the focus ring all take the accent's hue. Lightness
178
- is clamped so each pair keeps AA for any accent: in a light scope the fill
179
- stays at or below 50% OKLCH lightness under white text and brand text at most
180
- 45%; in a dark scope the fill stays between 72% and 85% under near-black text
181
- and brand text at least 80%.
178
+ is clamped so each pair keeps AA for any accent, including vivid green and
179
+ cyan after gamut clipping: in a light scope the fill stays at or below 46%
180
+ OKLCH lightness under white text, brand text at most 36%, and text on brand
181
+ fills at most 30%; in a dark scope the fill stays between 72% and 85% under
182
+ near-black text, brand text at least 94% against a raised tint surface, and
183
+ text on brand fills at least 95% with chroma capped at 0.12. The dark focus
184
+ ring starts at 78% to stay visible on raised tinted surfaces. The browser
185
+ regression sweeps 36 hues, four chroma levels, and three seed lightnesses in
186
+ both schemes with and without the Web Awesome theme.
182
187
 
183
188
  `PaneConfig.tint` forwards like `background`. `NavStack`, `TabNavigator`, and
184
189
  each `TabNavigatorTab` take `tint` for the stack, the navigator, or one scene.
@@ -249,7 +254,13 @@ it to its compact stack through `compactStack`.
249
254
 
250
255
  For an app-owned arrangement outside a `Pane`, name the scroller and its chrome
251
256
  by `id` in `targets`; a `Toolbar` or `List` named as chrome draws the divider
252
- on its side facing the scroller:
257
+ on its side facing the scroller. Both take an `id` prop, so the components
258
+ themselves are named, never a wrapper:
259
+
260
+ ```tsx
261
+ <Toolbar id="results-toolbar" label="Results" leading={title} />
262
+ <List id="results" scrollable flex>{rows}</List>
263
+ ```
253
264
 
254
265
  ```ts
255
266
  wireScrollDividers(appRoot, {
package/docs/webawesome-migration.md CHANGED
@@ -17,6 +17,8 @@ standard DOM events, and keeps its state in native form controls, so a
17
17
  delegated `input` / `change` / `click` handler usually keeps working once the
18
18
  selector changes.
19
19
 
20
+ For a positive action such as Price Check, migrate `<wa-button variant="success">` to `<Button tone="success">`. The semantic success palette also applies to `secondary` and `plain` emphasis; use the component prop rather than an application color override.
21
+
20
22
  | Web Awesome markup | Kerf replacement | Notes |
21
23
  | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
22
24
  | `<wa-button variant="brand">Save</wa-button>` | `<Button tone="brand" action="save">Save</Button>` (`@kerfjs/ui/button`) | `tone` replaces `variant`; `emphasis` replaces `appearance`. Use `href` for a link button, `icon` with `ariaLabel` and no label for an icon-only one, and `pressed` for a toggle. |
package/docs/webawesome-theme.md CHANGED
@@ -406,8 +406,14 @@ application off them.
406
406
 
407
407
  ## Customization
408
408
 
409
- Load application overrides after the package theme, or scope them to the
410
- smallest subtree that needs a different identity:
409
+ To change the brand, set Kerf's opt-in `--kui-color-brand` on `:root`: the
410
+ theme derives `--wa-color-brand-fill-loud`, `--wa-color-brand-on-quiet`, and
411
+ `--wa-color-focus` from it (with the matching Kerf tokens) at AA-safe
412
+ lightness, so brand text and the focus ring follow the new hue. See
413
+ [Brand color](./component-selection.md#brand-color).
414
+
415
+ For anything else, load application overrides after the package theme, or
416
+ scope them to the smallest subtree that needs a different identity:
411
417
 
412
418
  ```css
413
419
  :root {
package/docs/workbench.md CHANGED
@@ -471,7 +471,13 @@ presents as one, mirroring `wireSidebar`'s compact overlay:
471
471
  - **Focus moves in, and Tab stays in:** a panel that opens while it presents
472
472
  as an overlay takes focus on its first focusable control (typically the
473
473
  close control in its header), because it covers the work area and the
474
- control that opened it. While it is open, Tab and Shift+Tab cycle through
474
+ control that opened it. That holds whichever control opens it: the
475
+ Workbench's own relocating toggle, or a persistent toggle outside the
476
+ Workbench (an app-bar button whose `aria-controls` names the panel) that
477
+ stays where it is. Focus moves in as soon as the panel can take it, even
478
+ when the app's render shows the panel a frame after the `collapsed` signal
479
+ changes; focus the person has moved elsewhere in the meantime stays put.
480
+ While it is open, Tab and Shift+Tab cycle through
475
481
  its controls and never reach the covered work area; Escape, its own close
476
482
  control, or an outside press leaves it. This is the ARIA dialog pattern
477
483
  `wireSidebar`'s compact overlay follows. A panel opening inline never moves
package/llms.txt CHANGED
@@ -455,9 +455,18 @@ headingLevel`, `SearchField clearIcon`, `ContentItem frame="framed"` for a
455
455
  or `sizing="grow"` with a `growBasis` that fits), and if a useful search
456
456
  cannot fit beside the other controls, set aside those controls while the
457
457
  search is open: mark them `visibility="yield-to-expanded-sibling"` (they
458
- leave a 480px-or-narrower toolbar while a sibling is expanded) or gather
459
- them behind a "…" `PopupMenu` overflow group. The app decides which
458
+ leave a 480px-or-narrower toolbar while a sibling is expanded), or, in a
459
+ `responsive="trailing-priority"` Toolbar, `visibility="yield-to-priority-row"`
460
+ (they leave exactly while the expanded control has its own row, from the
461
+ Toolbar's `responsiveAt`; never restate that breakpoint with `hideBelow`,
462
+ whose strict "below" is one pixel off the Toolbar's inclusive width), or
463
+ gather them behind a "…" `PopupMenu` overflow group. The app decides which
460
464
  controls yield.
465
+ - **Change the brand with `--kui-color-brand`.** Set it once on `:root` (any
466
+ color): Kerf derives the brand fill, brand text and links, text on brand
467
+ fills, and the focus ring at WCAG AA, and Web Awesome's brand tokens follow.
468
+ Overriding `--kui-color-brand-fill-loud` alone leaves brand text and the
469
+ focus ring blue.
461
470
  - **Toolbars hold only `ToolbarText` and `ToolbarControlGroup`.** Never put a bare
462
471
  button, input, link, or loose markup in a `leading`/`center`/`trailing` zone.
463
472
  Wrap every control — `SegmentedControl`, `Select`, a collapsible
@@ -616,8 +625,8 @@ headingLevel`, `SearchField clearIcon`, `ContentItem frame="framed"` for a
616
625
  `TabBar trailingPlacement="adjacent"`, put the local action in `trailing`, and
617
626
  the workspace action in `end`; the component keeps both visible while its tab
618
627
  list shrinks and scrolls, without application descendant CSS. Each action
619
- zone accepts one ToolbarControlGroup or a standalone `Button` for its own
620
- chrome. Managed
628
+ zone accepts one ToolbarControlGroup, standalone Kerf `Button`, or exceptional
629
+ Web Awesome `wa-button` for its own chrome. Managed
621
630
  SearchField clear also preserves open state and replacement
622
631
  editor focus before the next input task, so shortcut-letter typing stays in search.
623
632
  Select All deletion does the same; deletion
@@ -694,7 +703,8 @@ headingLevel`, `SearchField clearIcon`, `ContentItem frame="framed"` for a
694
703
  box; inside a container that clips overflow, set `focusRingInset` and the
695
704
  ring moves inside the box with a surface-colored line inside it, so it keeps
696
705
  3:1 contrast even on a loud fill of its own hue. The line follows the
697
- surface context sunken, quiet, and raised surfaces publish
706
+ surface context sunken, quiet, raised, and highlighted surfaces, app
707
+ `background` colors, and glass chrome publish
698
708
  (`--kui-color-surface-current`, `-region`, `-tint`), so it never reads as a
699
709
  halo there. Never re-offset the outline from app CSS.
700
710
  - **Span a full-width primary action with `fill`.** `<Button tone="brand" fill action="create">Create Project</Button>`
@@ -748,7 +758,9 @@ headingLevel`, `SearchField clearIcon`, `ContentItem frame="framed"` for a
748
758
  button, `multiline` with `rows` and a growing `maxRows`, and `maxLength` with
749
759
  `showCount`, at the 44px height or `size="compact"`. Call
750
760
  `wireTextFields(root)` (`@kerfjs/ui/wire-text-fields`) once for clearing and
751
- counting. Never render `wa-input` or `wa-textarea` for a form field.
761
+ counting. For `type="number"`, pass native `min`, `max`, and `step` as numbers
762
+ or strings (`step="any"` accepts arbitrary decimals). Never render `wa-input`
763
+ or `wa-textarea` for a form field.
752
764
  - **Use `Checkbox`, `CheckboxGroup`, `RadioGroup`, and `Switch` for native
753
765
  toggles.** `@kerfjs/ui/checkbox` (with `indeterminate` and
754
766
  `wireCheckboxes(root)` from `@kerfjs/ui/wire-checkboxes`),
@@ -996,6 +1008,6 @@ Select menus use native viewport shifting with 10px gutters: default menus grow
996
1008
 
997
1009
  Key sibling `DialogSurface`s that render conditionally with `rootAttributes={{ "data-key": "…" }}` so a re-render morphs each dialog into itself; never wrap one in a keyed app `div`. Modal `DialogSurface` bounds use typed `viewportGutter` and `maxHeight` (`CssLength` or `"viewport"`); explicit caps stay within the dynamic viewport minus both gutters. Omitted props keep the default caps (20px clear of each edge, 80% of the viewport height at 420px wide or narrower). Application render state chooses responsive values, and preview layout remains application-owned. `height` sets a definite bounded modal size and `bodyLayout="fill"` lets one child fill the body; `bodyLayout="fill-last"` keeps leading rows at their height above one filling last child, and `footerPresentation="floating"` (with a typed `footerOffset`) floats a chat composer over the body while the body reserves its measured height; give the transcript `scrollClearance="block-end"` (a `scrollable` `List` or a `Pane`) to let it scroll beneath the composer, with the last message still resting above it, through the published `--kui-scroll-clearance-block-end` context (overlaying chrome publishes `--kui-scroll-clearance-block-start` / `-end`; one scroller per covered edge opts in; a composed Pane opts in through `PaneConfig.scrollClearance` on a Workbench `mainPane` or panel `pane`, a `CollapsiblePanel` `pane`, or a `NavStack` view's `pane`). `headerPresentation="floating"` lays the title bar over the body on the translucent `--kui-chrome-material-raised` (opaque under reduced transparency, increased contrast, and forced colors); the register measures it and the body reserves it, and a `fill` body's only child with `scrollClearance="both"` scrolls beneath both the title bar and a floating composer through the published `--kui-scroll-clearance-block-start`. `presentation="bottom-sheet"` attaches the dialog to the bottom edge with square bottom corners, safe-area and virtual-keyboard clearance behind the panel, and a slide in/out (`enterMotion` / `exitMotion`); `resizable` adds a top grabber separator bounded by `minHeight` and `maxHeight`. `PopoverDialogSurface` is the non-modal, light-dismiss counterpart on the native Popover API, with the same size props and an `embedded` in-flow presentation; `describedBy` sets its `aria-describedby` (usually a title `ToolbarText`'s `descriptionId`).
998
1010
 
999
- Render a modal dialog as `DialogSurface` itself, a native `<dialog>`: `label` (or `labelledBy` with a `heading`, such as an xl `ToolbarText` with a description) names it, `describedBy` (the heading ToolbarText's `descriptionId`, or app-owned summary copy) describes it as `aria-describedby`, `children` is its body, `footer` holds its buttons, and `headerActions` sit before its close button (`withoutHeader` drops the header for content that owns its heading and close control). Open it with `openDialog(dialog)` and close it with `closeDialog(dialog)` from `@kerfjs/ui/surface-scaffold`; never toggle its `open` attribute. The close button, any `data-dialog-close` element inside (a Cancel button), Escape, and, with `lightDismiss`, a backdrop press dispatch a cancelable `kui-request-close` (`detail.source`: `close-button`, `escape`, or `backdrop`); cancel it to keep the dialog open (the panel pulses). The native `close` event fires once it closes. `openDialog` installs the listeners and, while the dialog is open, measures its floating header/footer, follows a bottom sheet's keyboard and grabber, and keeps that state across re-renders; import `@kerfjs/ui/surface-scaffold/register` only when a dialog may open some other way. Do not write `wa-dialog` inside a `DialogSurface`.
1011
+ Render a modal dialog as `DialogSurface` itself, a native `<dialog>` (`alert` renders `role="alertdialog"` for a destructive confirmation; pair it with `describedBy` on the message): `label` (or `labelledBy` with a `heading`, such as an xl `ToolbarText` with a description) names it, `describedBy` (the heading ToolbarText's `descriptionId`, or app-owned summary copy) describes it as `aria-describedby`, `children` is its body, `footer` holds its buttons, and `headerActions` sit before its close button (`withoutHeader` drops the header for content that owns its heading and close control). Open it with `openDialog(dialog)` and close it with `closeDialog(dialog)` from `@kerfjs/ui/surface-scaffold`; never toggle its `open` attribute. The close button, any `data-dialog-close` element inside (a Cancel button), Escape, and, with `lightDismiss`, a backdrop press dispatch a cancelable `kui-request-close` (`detail.source`: `close-button`, `escape`, or `backdrop`); cancel it to keep the dialog open (the panel pulses). The native `close` event fires once it closes. `openDialog` installs the listeners and, while the dialog is open, measures its floating header/footer, follows a bottom sheet's keyboard and grabber, and keeps that state across re-renders; import `@kerfjs/ui/surface-scaffold/register` only when a dialog may open some other way. Do not write `wa-dialog` inside a `DialogSurface`.
1000
1012
 
1001
1013
  Toolbar visibility measurement probes and invisible state children are helper-owned and survive Kerf rerenders through `data-morph-preserve`. Actual CSS visibility stays stable while rendering removes transient parent markers, preventing geometry-driven render feedback and repeated probe recreation. Toolbar replacement, explicit internal-node removal and disposal retain their existing behavior.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kerfjs/ui",
3
- "version": "5.0.0-beta.107",
3
+ "version": "5.0.0-beta.109",
4
4
  "description": "Accessible, composable UI primitives for kerf applications.",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/dist/chunk-CMLPFIC5.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/actions/toolbar/toolbar.tsx"],"names":[],"mappings":";;;AAoFA,IAAM,KAAA,GAAQ,CACZ,KAAA,EACA,IAAA,KACI,OAAO,QAAA,CAAS,IAAI,IAAI,MAAA,GAAS,MAAA;AAEhC,SAAS,OAAA,CAAQ;AAAA,EACtB,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA,GAAW,QAAA;AAAA,EACX,OAAA,GAAU,SAAA;AAAA,EACV,YAAA,GAAe,EAAA;AAAA,EACf,WAAA,GAAc,QAAA;AAAA,EACd,UAAA,GAAa,MAAA;AAAA,EACb,YAAA,GAAe,QAAA;AAAA,EACf,aAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAiB;AACf,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,KAAA,EAAO,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,IACvC,gBAAA,EAAkB,SAAA;AAAA,IAClB,cAAA,EAAgB,OAAA,KAAY,SAAA,GAAY,SAAA,GAAY,MAAA;AAAA,IACpD,iBAAiB,YAAA,IAAgB,MAAA;AAAA,IACjC,iBAAA,EAAmB,MAAA,CAAO,OAAA,CAAQ,MAAM,CAAC,CAAA;AAAA,IACzC,mBAAA,EAAqB,WAAA;AAAA,IACrB,iBAAA,EAAmB,UAAA;AAAA,IACnB,oBAAA,EAAsB,YAAA;AAAA,IACtB,4BAAA,EAA8B,KAAA,CAAM,aAAA,EAAe,aAAa,CAAA;AAAA,IAChE,0BAAA,EAA4B,KAAA,CAAM,aAAA,EAAe,WAAW,CAAA;AAAA,IAC5D,6BAAA,EAA+B,KAAA,CAAM,aAAA,EAAe,cAAc,CAAA;AAAA,IAClE,2BAAA,EAA6B,KAAA,CAAM,aAAA,EAAe,YAAY,CAAA;AAAA,IAC9D,YAAA,EAAc,KAAA;AAAA,IACd;AAAA,GACF;AACA,EAAA,MAAM,wBACJ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,oBAC3C,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,qBAAA,EAAuB,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,oBACzC,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,QAAA,EAAS;AAAA,GAAA,EAC/C,CAAA;AAEF,EAAA,OAAO,QAAA,KAAa,QAAA,mBAClB,GAAA,CAAC,QAAA,EAAA,EAAQ,GAAG,UAAA,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA,mBAE/B,GAAA,CAAC,QAAA,EAAA,EAAQ,GAAG,UAAA,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAEnC","file":"chunk-CMLPFIC5.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\nimport type { PaneSeparatorSide } from '../../layout/pane/pane.js';\n\nexport type ToolbarPosition = 'header' | 'footer';\n/** Control-band density: `default` (60px with 44px groups) or `compact`. */\nexport type ToolbarDensity = 'default' | 'compact';\n\nexport interface ToolbarProps {\n leading?: KerfUiContent;\n center?: KerfUiContent;\n trailing?: KerfUiContent;\n label?: string;\n /** Use footer semantics for a bottom toolbar; defaults to header. */\n position?: ToolbarPosition;\n /**\n * `compact` sizes the toolbar to a 34px control band with 3px block\n * insets — 40px tall — for a header embedded in a panel or card. Fill it\n * with `ToolbarControlGroup size=\"compact\"` groups; inline insets and the\n * gap between zones are unchanged. Composites that render a Toolbar from a\n * `ToolbarConfig` (Workbench, CollapsiblePanel, NavStack, SplitView) forward\n * it and size the groups they compose to match. Defaults to `default`.\n */\n density?: ToolbarDensity;\n /**\n * Physical divider edges in canonical top/right/bottom/left order, drawn\n * always. Defaults to none: a toolbar pinned over or under scrolling content\n * gets its divider from the scroll state instead — a `Pane` draws the line\n * between its chrome and content while content is scrolled away beneath it,\n * and `wireScrollDividers` `targets` can name a toolbar as chrome, which\n * then draws its facing side the same way.\n */\n dividerSides?: Sides;\n /** `balanced` gives both side zones equal tracks, centering the middle zone on the toolbar even if only one side has controls. */\n centerAlign?: 'center' | 'stretch' | 'balanced';\n /**\n * Component-owned responsive layout; applications choose the policy rather\n * than restyling toolbar internals. Under every policy the trailing zone\n * wraps its groups instead of clipping an action, and the center zone keeps\n * its whole content width: when the zones do not fit one row, the leading\n * title truncates with an ellipsis rather than the center overlapping it.\n * - `none` keeps one row; the leading identity truncates first.\n * - `stack` stacks the zones at `responsiveAt`, wrapping stacked control\n * groups onto further rows.\n * - `wrap` keeps one row while every zone fits at its natural width, and\n * otherwise moves the trailing zone below a whole leading identity.\n * - `center-priority` gives an expanded center control the full row.\n * - `trailing-priority` moves an expanded trailing control to a full row\n * below the leading identity at `responsiveAt`.\n */\n responsive?:\n 'none' | 'stack' | 'wrap' | 'center-priority' | 'trailing-priority';\n /** Container width at which `stack` or `trailing-priority` activates. */\n responsiveAt?: 'compact' | 'narrow';\n /**\n * Screen edges this toolbar claims for device safe-area compensation, for an\n * app bar or bottom bar that sits directly at a screen edge rather than in a\n * Pane header or footer. Each listed side pads by the inset its surrounding\n * layout reports through `--kui-edge-inset-*`, or the full device inset when\n * nothing routes that edge, while the toolbar's box and dividers paint\n * through. Omitted, the toolbar pads only the inline edges an owner such as\n * a Pane header hands it, and never a block edge.\n */\n safeAreaEdges?: readonly PaneSeparatorSide[];\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/**\n * A toolbar's configuration, apart from its content: the props a composite\n * that renders a `Toolbar` for the app (a Workbench or CollapsiblePanel\n * toolbar) forwards, so the app configures that toolbar instead of styling it.\n */\nexport type ToolbarConfig = Pick<\n ToolbarProps,\n | 'density'\n | 'dividerSides'\n | 'centerAlign'\n | 'responsive'\n | 'responsiveAt'\n | 'safeAreaEdges'\n>;\n\nconst claim = (\n edges: readonly PaneSeparatorSide[] | undefined,\n side: PaneSeparatorSide,\n) => (edges?.includes(side) ? 'true' : undefined);\n\nexport function Toolbar({\n leading,\n center,\n trailing,\n label,\n position = 'header',\n density = 'default',\n dividerSides = '',\n centerAlign = 'center',\n responsive = 'none',\n responsiveAt = 'narrow',\n safeAreaEdges,\n className = '',\n slot,\n}: ToolbarProps) {\n const attributes = {\n class: `kui-toolbar ${className}`.trim(),\n 'data-component': 'toolbar',\n 'data-density': density === 'compact' ? 'compact' : undefined,\n 'divider-sides': dividerSides || undefined,\n 'data-has-center': String(Boolean(center)),\n 'data-center-align': centerAlign,\n 'data-responsive': responsive,\n 'data-responsive-at': responsiveAt,\n 'data-safe-area-block-start': claim(safeAreaEdges, 'block-start'),\n 'data-safe-area-block-end': claim(safeAreaEdges, 'block-end'),\n 'data-safe-area-inline-start': claim(safeAreaEdges, 'inline-start'),\n 'data-safe-area-inline-end': claim(safeAreaEdges, 'inline-end'),\n 'aria-label': label,\n slot,\n };\n const zones = (\n <>\n <div class=\"kui-toolbar__leading\">{leading}</div>\n <div class=\"kui-toolbar__center\">{center}</div>\n <div class=\"kui-toolbar__trailing\">{trailing}</div>\n </>\n );\n return position === 'footer' ? (\n <footer {...attributes}>{zones}</footer>\n ) : (\n <header {...attributes}>{zones}</header>\n );\n}\n\nexport type { Sides } from '../../../shared/layout/sides.js';\n"]}