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

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 (118) hide show
  1. package/ai/component-catalog.json +24 -12
  2. package/ai/component-composition.json +8 -2
  3. package/ai/components/button.md +5 -5
  4. package/ai/components/chip.md +1 -0
  5. package/ai/components/foundation.md +1 -1
  6. package/ai/components/list.md +1 -1
  7. package/ai/components/segmented-control.md +1 -0
  8. package/ai/components/surface-scaffold.md +1 -0
  9. package/ai/components/text-field.md +3 -1
  10. package/ai/components/toolbar-control-group.md +1 -0
  11. package/ai/components/toolbar.md +1 -1
  12. package/ai/public-api-signatures-v1.md +64 -13
  13. package/ai/skill.md +12 -6
  14. package/ai/webawesome-jsx-signatures-v1.md +1 -1
  15. package/dist/button.d.ts +3 -3
  16. package/dist/button.js +1 -1
  17. package/dist/catalog.js +4 -4
  18. package/dist/chip.d.ts +20 -2
  19. package/dist/chip.js +2 -1
  20. package/dist/{chunk-23PPPNH6.js → chunk-4OV272LF.js} +2 -2
  21. package/dist/{chunk-23PPPNH6.js.map → chunk-4OV272LF.js.map} +1 -1
  22. package/dist/{chunk-2PXZBFEC.js → chunk-5J6Z4BWY.js} +1 -1
  23. package/dist/{chunk-2PXZBFEC.js.map → chunk-5J6Z4BWY.js.map} +1 -1
  24. package/dist/{chunk-G4DRH4A5.js → chunk-6CDILXF4.js} +3 -1
  25. package/dist/chunk-6CDILXF4.js.map +1 -0
  26. package/dist/{chunk-NLMEDZRM.js → chunk-CPSGUGAY.js} +5 -5
  27. package/dist/{chunk-NLMEDZRM.js.map → chunk-CPSGUGAY.js.map} +1 -1
  28. package/dist/{chunk-TXRKCGT3.js → chunk-KPINJHIC.js} +1 -1
  29. package/dist/chunk-KPINJHIC.js.map +1 -0
  30. package/dist/{chunk-N7MBGONH.js → chunk-LMHN2TJL.js} +22 -2
  31. package/dist/chunk-LMHN2TJL.js.map +1 -0
  32. package/dist/{chunk-NS2TBYM4.js → chunk-LZUUUHNH.js} +7 -3
  33. package/dist/chunk-LZUUUHNH.js.map +1 -0
  34. package/dist/{chunk-OY2MXIBB.js → chunk-NB6POCFH.js} +3 -1
  35. package/dist/chunk-NB6POCFH.js.map +1 -0
  36. package/dist/{chunk-AZ3WT77F.js → chunk-P7EJ4CAD.js} +2 -2
  37. package/dist/{chunk-AZ3WT77F.js.map → chunk-P7EJ4CAD.js.map} +1 -1
  38. package/dist/{chunk-Z4DS77U2.js → chunk-SOFPUW3O.js} +4 -4
  39. package/dist/{chunk-Z4DS77U2.js.map → chunk-SOFPUW3O.js.map} +1 -1
  40. package/dist/{chunk-QLA25V2K.js → chunk-WPNIKZMJ.js} +15 -1
  41. package/dist/chunk-WPNIKZMJ.js.map +1 -0
  42. package/dist/{chunk-DNWWF6UN.js → chunk-WSEJ2FDE.js} +4 -4
  43. package/dist/{chunk-DNWWF6UN.js.map → chunk-WSEJ2FDE.js.map} +1 -1
  44. package/dist/{chunk-WU57BYYM.js → chunk-YVZCKXR3.js} +8 -2
  45. package/dist/chunk-YVZCKXR3.js.map +1 -0
  46. package/dist/{chunk-CMLPFIC5.js → chunk-ZN7KUMPY.js} +3 -1
  47. package/dist/chunk-ZN7KUMPY.js.map +1 -0
  48. package/dist/collapsible-panel.js +2 -2
  49. package/dist/index.js +9 -9
  50. package/dist/list-detail-dialog.js +4 -4
  51. package/dist/list.d.ts +7 -1
  52. package/dist/list.js +1 -1
  53. package/dist/message-composer.js +1 -1
  54. package/dist/nav-stack.js +1 -1
  55. package/dist/segmented-control.d.ts +3 -1
  56. package/dist/segmented-control.js +1 -1
  57. package/dist/split-view.js +1 -1
  58. package/dist/styles/button.css +28 -2
  59. package/dist/styles/components/actions/button/button.css +28 -2
  60. package/dist/styles/components/actions/toolbar/toolbar.css +9 -0
  61. package/dist/styles/components/actions/toolbar-control-group/toolbar-control-group.css +29 -1
  62. package/dist/styles/components/collections/framed-list/framed-list.css +2 -0
  63. package/dist/styles/components/layout/pane/pane.css +15 -0
  64. package/dist/styles/components/navigation/nav-stack/nav-stack.css +13 -0
  65. package/dist/styles/components/navigation/tab-bar/tab-bar.css +6 -0
  66. package/dist/styles/components/navigation/tab-navigator/tab-navigator.css +16 -0
  67. package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css +2 -0
  68. package/dist/styles/foundation.css +63 -19
  69. package/dist/styles/framed-list.css +2 -0
  70. package/dist/styles/nav-stack.css +13 -0
  71. package/dist/styles/pane.css +15 -0
  72. package/dist/styles/surface-scaffold.css +2 -0
  73. package/dist/styles/tab-bar.css +6 -0
  74. package/dist/styles/tab-navigator.css +16 -0
  75. package/dist/styles/toolbar-control-group.css +29 -1
  76. package/dist/styles/toolbar.css +9 -0
  77. package/dist/styles/webawesome.css +11 -3
  78. package/dist/surface-scaffold.d.ts +9 -1
  79. package/dist/surface-scaffold.js +1 -1
  80. package/dist/text-field.d.ts +7 -1
  81. package/dist/text-field.js +1 -1
  82. package/dist/toolbar-control-group.d.ts +8 -2
  83. package/dist/toolbar-control-group.js +1 -1
  84. package/dist/toolbar.d.ts +6 -1
  85. package/dist/toolbar.js +1 -1
  86. package/dist/wire-catalog.js +1 -1
  87. package/dist/wire-workbench.js +1 -1
  88. package/dist/workbench-dialog.js +3 -3
  89. package/dist/workbench.js +1 -1
  90. package/docs/accessibility.md +25 -9
  91. package/docs/component-contract.md +19 -6
  92. package/docs/component-selection.md +38 -12
  93. package/docs/design/templates/button/tones-dark.svg +1 -1
  94. package/docs/design/templates/button/tones.svg +1 -1
  95. package/docs/design/templates/button-dark.svg +1 -1
  96. package/docs/design/templates/button.svg +1 -1
  97. package/docs/design/templates/split-button/states-dark.svg +1 -1
  98. package/docs/design/templates/split-button/states.svg +1 -1
  99. package/docs/design/templates/split-button-dark.svg +1 -1
  100. package/docs/design/templates/split-button.svg +1 -1
  101. package/docs/design/templates/text-field/number-dark.svg +1 -0
  102. package/docs/design/templates/text-field/number.svg +1 -0
  103. package/docs/design/templates/text-field-dark.svg +1 -1
  104. package/docs/design/templates/text-field.svg +1 -1
  105. package/docs/layout.md +16 -5
  106. package/docs/webawesome-migration.md +2 -0
  107. package/docs/webawesome-theme.md +8 -2
  108. package/docs/workbench.md +7 -1
  109. package/llms.txt +17 -5
  110. package/package.json +1 -1
  111. package/dist/chunk-CMLPFIC5.js.map +0 -1
  112. package/dist/chunk-G4DRH4A5.js.map +0 -1
  113. package/dist/chunk-N7MBGONH.js.map +0 -1
  114. package/dist/chunk-NS2TBYM4.js.map +0 -1
  115. package/dist/chunk-OY2MXIBB.js.map +0 -1
  116. package/dist/chunk-QLA25V2K.js.map +0 -1
  117. package/dist/chunk-TXRKCGT3.js.map +0 -1
  118. 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
@@ -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.108",
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"]}
package/dist/chunk-G4DRH4A5.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/surfaces/surface-scaffold/surface-scaffold.tsx"],"names":[],"mappings":";;;;;AA+DA,IAAM,wBAAA,uBAA+B,GAAA,CAAI;AAAA,EACvC,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,mBAAA;AAAA,EACA,sBAAA;AAAA,EACA,iBAAA;AAAA,EACA,mBAAA;AAAA,EACA,sBAAA;AAAA,EACA,iBAAA;AAAA,EACA,aAAA;AAAA,EACA,kBAAA;AAAA,EACA,0BAAA;AAAA,EACA,0BAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,mBAAA;AAAA,EACA,kBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAuIM,SAAS,aAAA,CAAc;AAAA,EAC5B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AAAA,EACA,MAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,YAAA,GAAe,KAAA;AAAA,EACf,UAAA,GAAa,OAAA;AAAA,EACb,QAAA;AAAA,EACA,IAAA,GAAO,QAAA;AAAA,EACP,YAAA,GAAe,OAAA;AAAA,EACf,cAAA;AAAA,EACA,SAAA,GAAY,SAAA;AAAA,EACZ,WAAA,GAAc,aAAA;AAAA,EACd,cAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,WAAA,GAAc,OAAA;AAAA,EACd,UAAA,GAAa,OAAA;AAAA,EACb,UAAA,GAAa,MAAA;AAAA,EACb,kBAAA,GAAqB,QAAA;AAAA,EACrB,kBAAA,GAAqB,QAAA;AAAA,EACrB,YAAA;AAAA,EACA,iBAAiB,EAAC;AAAA,EAClB,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,cAAA,KAAmB,MAAA,GACf,EAAA,GACA,CAAA,sCAAA,EAAyC,cAAc,CAAA,CAAA;AAAA,IAC3D,cAAA,KAAmB,MAAA,GACf,EAAA,GACA,CAAA,6BAAA,EAAgC,cAAc,CAAA,CAAA;AAAA,IAClD,cAAc,MAAA,IAAa,SAAA,KAAc,UAAA,GACrC,EAAA,GACA,oCAAoC,SAAS,CAAA,CAAA;AAAA,IACjD,WAAW,MAAA,IAAa,MAAA,KAAW,UAAA,GAC/B,EAAA,GACA,gCAAgC,MAAM,CAAA,CAAA;AAAA,IAC1C,YAAA,KAAiB,MAAA,GACb,EAAA,GACA,CAAA,oCAAA,EAAuC,YAAY,CAAA,CAAA;AAAA,IACvD,SAAA,KAAc,MAAA,GACV,EAAA,GACA,CAAA,iCAAA,EAAoC,SAAS,CAAA;AAAA,GACnD,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACX,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,wBAAwB,CAAA;AAAA,MACjE,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,mBAAA,EAAsB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC9C,YAAA,EAAY,KAAA;AAAA,MACZ,iBAAA,EAAiB,UAAA;AAAA,MACjB,kBAAA,EAAkB,WAAA;AAAA,MAClB,QAAA,EAAU,EAAA;AAAA,MACV,oBAAA,EAAoB,eAAe,EAAA,GAAK,MAAA;AAAA,MACxC,gBAAA,EAAe,gBAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,mBAAA,EAAmB,YAAA;AAAA,MACnB,sBAAA,EAAsB,cAAA,KAAmB,MAAA,GAAY,MAAA,GAAY,EAAA;AAAA,MACjE,iBAAA,EAAiB,SAAA;AAAA,MACjB,mBAAA,EAAmB,WAAA;AAAA,MACnB,sBAAA,EAAsB,cAAA,KAAmB,MAAA,GAAY,MAAA,GAAY,EAAA;AAAA,MACjE,iBAAA,EAAiB,SAAA,KAAc,MAAA,GAAY,MAAA,GAAY,EAAA;AAAA,MACvD,aAAA,EAAa,MAAA,KAAW,MAAA,GAAY,MAAA,GAAY,EAAA;AAAA,MAChD,kBAAA,EAAkB,UAAA,KAAe,MAAA,GAAS,MAAA,GAAY,UAAA;AAAA,MACtD,0BAAA,EACE,kBAAA,KAAuB,UAAA,GAAa,UAAA,GAAa,MAAA;AAAA,MAEnD,0BAAA,EACE,kBAAA,KAAuB,UAAA,GAAa,UAAA,GAAa,MAAA;AAAA,MAEnD,iBAAA,EAAiB,SAAA,KAAc,MAAA,GAAY,MAAA,GAAY,EAAA;AAAA,MACvD,gBAAA,EAAgB,YAAY,EAAA,GAAK,MAAA;AAAA,MACjC,mBAAA,EAAmB,WAAA,KAAgB,OAAA,GAAU,MAAA,GAAY,WAAA;AAAA,MACzD,kBAAA,EAAkB,UAAA,KAAe,OAAA,GAAU,MAAA,GAAY,UAAA;AAAA,MACvD,OAAO,KAAA,IAAS,MAAA;AAAA,MAChB,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,aAAA,GAAgB,IAAA,mBACf,IAAA,CAAC,QAAA,EAAA,EAAO,KAAA,EAAM,4BAAA,EACX,QAAA,EAAA;AAAA,UAAA,OAAA,KAAY,MAAA,mBACX,GAAA,CAAC,IAAA,EAAA,EAAG,KAAA,EAAM,2BAAA,EAA6B,QAAA,EAAA,KAAA,EAAM,CAAA,mBAE7C,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,2BAAA,EAA6B,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,0BAElD,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,oCAAA,EACR,QAAA,EAAA;AAAA,YAAA,aAAA;AAAA,4BACD,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,KAAA,EAAM,2BAAA;AAAA,gBACN,YAAA,EAAY,UAAA;AAAA,gBACZ,mBAAA,EAAkB,EAAA;AAAA,gBAElB,8BAAC,UAAA,EAAA,EAAW,IAAA,EAAM,GAAG,IAAA,EAAK,GAAA,EAAI,MAAK,GAAA,EAAI;AAAA;AAAA;AACzC,WAAA,EACF;AAAA,SAAA,EACF,CAAA;AAAA,QAED,YAAA,KAAiB,kBAAkB,SAAA,mBAClC,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,kCAAA;AAAA,YACN,IAAA,EAAK,WAAA;AAAA,YACL,kBAAA,EAAiB,YAAA;AAAA,YACjB,YAAA,EAAW,cAAA;AAAA,YACX,QAAA,EAAU;AAAA;AAAA,SACZ,GACE,IAAA;AAAA,wBACJ,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,0BAAA,EAA4B,QAAA,EAAS,CAAA;AAAA,QAC/C,WAAW,MAAA,GAAY,IAAA,uBACrB,QAAA,EAAA,EAAO,KAAA,EAAM,8BAA8B,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,4BAIpD,KAAA,EAAA,EAAI,wBAAA,EAAsB,MAAC,iBAAA,EAAe,IAAA,EAAC,OAAM,kBAAA,EAAmB;AAAA;AAAA;AAAA,GACvE;AAEJ;AAkDA,IAAM,wBAAA,uBAA+B,GAAA,CAAI;AAAA,EACvC,gBAAA;AAAA,EACA,mBAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAAC,CAAA;AASM,SAAS,oBAAA,CAAqB;AAAA,EACnC,EAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,IAAA,GAAO,QAAA;AAAA,EACP,cAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,UAAA,GAAa,MAAA;AAAA,EACb,iBAAiB,EAAC;AAAA,EAClB,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAA8B;AAC5B,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,cAAA,KAAmB,MAAA,GACf,EAAA,GACA,CAAA,8CAAA,EAAiD,cAAc,CAAA,CAAA;AAAA,IACnE,cAAA,KAAmB,MAAA,GACf,EAAA,GACA,CAAA,qCAAA,EAAwC,cAAc,CAAA,CAAA;AAAA,IAC1D,WAAW,MAAA,IAAa,MAAA,KAAW,UAAA,GAC/B,EAAA,GACA,wCAAwC,MAAM,CAAA,CAAA;AAAA,IAClD,cAAc,MAAA,IAAa,SAAA,KAAc,UAAA,GACrC,EAAA,GACA,4CAA4C,SAAS,CAAA;AAAA,GAC3D,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACX,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,wBAAwB,CAAA;AAAA,MACjE,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,2BAAA,EAA8B,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACtD,gBAAA,EAAe,wBAAA;AAAA,MACf,mBAAA,EAAmB,YAAA;AAAA,MACnB,WAAA,EAAW,IAAA;AAAA,MACX,aAAA,EAAa,MAAA,KAAW,MAAA,GAAY,MAAA,GAAY,EAAA;AAAA,MAChD,iBAAA,EAAiB,SAAA,KAAc,MAAA,GAAY,MAAA,GAAY,EAAA;AAAA,MACvD,kBAAA,EAAkB,UAAA,KAAe,MAAA,GAAS,MAAA,GAAY,UAAA;AAAA,MACtD,OAAA,EAAS,YAAA,KAAiB,SAAA,GAAY,MAAA,GAAS,MAAA;AAAA,MAC/C,IAAA,EAAK,QAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,iBAAA,EAAiB,UAAA;AAAA,MACjB,kBAAA,EAAkB,WAAA;AAAA,MAClB,OAAO,KAAA,IAAS,MAAA;AAAA,MAChB,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAaO,SAAS,YAAA,CAAa;AAAA,EAC3B,QAAA;AAAA,EACA,KAAA,GAAQ,UAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAsB;AACpB,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,kBAAA,EAAqB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC7C,gBAAA,EAAe,eAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-G4DRH4A5.js","sourcesContent":["import { X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\nexport {\n closeDialog,\n type DialogCloseSource,\n type DialogRequestCloseDetail,\n openDialog,\n} from './internal/dialog-surface-controller.js';\n\nexport type DialogSurfaceSize = 'small' | 'medium' | 'large';\n/**\n * How the dialog is presented: `modal` (default) centered on the screen,\n * `side-sheet` against the inline end, `fullscreen`, or `bottom-sheet`\n * attached to the bottom edge (square bottom corners, safe-area and\n * virtual-keyboard clearance, optionally user-resizable).\n */\nexport type DialogSurfacePresentation =\n 'modal' | 'side-sheet' | 'fullscreen' | 'bottom-sheet';\n/**\n * How a bottom sheet appears or leaves: `slide` (default) moves the panel in\n * from, or out to, the bottom edge; `standard` keeps the dialog's\n * scale-and-fade. Both honor `prefers-reduced-motion`.\n */\nexport type DialogSurfaceSheetMotion = 'slide' | 'standard';\nexport type SurfaceInset = 'none' | 'compact' | 'comfortable';\nexport type DialogSurfaceMaxHeight = CssLength | 'viewport';\n/** A definite modal height: a length or the full viewport, minus both gutters. */\nexport type DialogSurfaceHeight = CssLength | 'viewport';\n/**\n * How the dialog body lays out its children: `flow` (default) scrolls ordinary\n * content in the body; `fill` gives one child the body's whole height and\n * lets it own scrolling (a SplitView, a Pane, an editor); `fill-last` stacks\n * the leading children at their natural height and gives the last child the\n * remaining height to own its scrolling (a heading and notices above a\n * scrolling transcript).\n */\nexport type DialogSurfaceBodyLayout = 'flow' | 'fill' | 'fill-last';\n/**\n * Where the dialog footer sits: `docked` (default) below the body, or\n * `floating` over the body's block end, inset from the panel's inline and\n * block-end edges on a transparent background (a chat composer).\n */\nexport type DialogSurfaceFooterPresentation = 'docked' | 'floating';\n/**\n * Where the dialog header sits: `docked` (default) above the body, or\n * `floating` over the body's block-start edge on the translucent chrome\n * material, so content scrolls visibly beneath the title bar.\n */\nexport type DialogSurfaceHeaderPresentation = 'docked' | 'floating';\n\n/**\n * Application `data-*` identity on the DialogSurface root, such as\n * `data-key`; the surface's own configuration attributes stay protected.\n */\nexport type DialogSurfaceRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined>\n>;\n\nconst DIALOG_SURFACE_PROTECTED = new Set([\n 'data-component',\n 'data-size',\n 'data-presentation',\n 'data-preferred-width',\n 'data-body-inset',\n 'data-footer-inset',\n 'data-viewport-gutter',\n 'data-max-height',\n 'data-height',\n 'data-body-layout',\n 'data-footer-presentation',\n 'data-header-presentation',\n 'data-min-height',\n 'data-resizable',\n 'data-enter-motion',\n 'data-exit-motion',\n 'data-light-dismiss',\n]);\n\n/**\n * The dialog's accessible name: its `label` text (also the default title), or\n * the id of an element that names it, such as a `heading` ToolbarText.\n */\nexport type DialogSurfaceName =\n { label: string; labelledBy?: never } | { label?: never; labelledBy: string };\n\nexport type DialogSurfaceProps = DialogSurfaceName & DialogSurfaceOptions;\n\nexport interface DialogSurfaceOptions {\n /** The dialog's id, for `openDialog(document.getElementById(id))`. */\n id?: string;\n /**\n * Id of the element whose text is the dialog's accessible description,\n * such as the `heading` ToolbarText's `descriptionId` or app-owned summary\n * copy in the body; rendered as `aria-describedby` on the `<dialog>`.\n */\n describedBy?: string;\n /** The body content. */\n children: KerfUiContent;\n /**\n * Header title content in place of the `label` text, such as an xl\n * `ToolbarText` with a description. The dialog keeps its `label` (or\n * `labelledBy`) name.\n */\n heading?: KerfUiContent;\n /** Controls before the close button in the header. */\n headerActions?: KerfUiContent;\n /** The footer, below the body (or floating over it); usually its buttons. */\n footer?: KerfUiContent;\n /**\n * Render no header: no title and no close button. The content then owns its\n * heading and a way to close (an element with `data-dialog-close`).\n */\n withoutHeader?: boolean;\n /** Close on a press on the backdrop; otherwise the panel pulses. */\n lightDismiss?: boolean;\n /** The close button's accessible name (default `Close`). */\n closeLabel?: string;\n size?: DialogSurfaceSize;\n presentation?: DialogSurfacePresentation;\n /** Modal preferred width. Takes precedence over size, within the viewport cap. */\n preferredWidth?: CssLength;\n bodyInset?: SurfaceInset;\n footerInset?: SurfaceInset;\n /** Modal edge clearance. Omit to retain Web Awesome's default viewport cap. */\n viewportGutter?: CssLength;\n /**\n * Modal height cap, bounded by the dynamic viewport minus both gutters. On a\n * bottom sheet, the cap (and the resize ceiling), bounded by the dynamic\n * viewport minus the top safe area and one gutter.\n */\n maxHeight?: DialogSurfaceMaxHeight;\n /**\n * Modal definite height, bounded the same way, so a filling child has a\n * height to fill. Takes precedence over `maxHeight`. On a bottom sheet, the\n * height it opens at (the visible height above the safe area or keyboard).\n */\n height?: DialogSurfaceHeight;\n /**\n * A resizable bottom sheet's resize floor (default 160px), the visible\n * height above the safe area or keyboard.\n */\n minHeight?: CssLength;\n /**\n * Let the person resize a bottom sheet by its top grabber (drag, or the\n * arrow, Page Up/Down, Home and End keys) between `minHeight` and the\n * sheet's cap. Needs the `/register` entry; each opening starts at `height`\n * (or the content height). Ignored by other presentations.\n */\n resizable?: boolean;\n /** How a bottom sheet appears (default `slide` up from the bottom edge). */\n enterMotion?: DialogSurfaceSheetMotion;\n /** How a bottom sheet is dismissed (default `slide` down off the bottom edge). */\n exitMotion?: DialogSurfaceSheetMotion;\n /**\n * Body layout (default `flow`); `fill` lets one child own the body and\n * `fill-last` stacks fixed rows above one filling last child.\n */\n bodyLayout?: DialogSurfaceBodyLayout;\n /**\n * Header placement (default `docked`); `floating` lays the dialog's header\n * (its title and close control) over the body's block-start edge on the\n * translucent chrome material (`--kui-chrome-material-raised`, opaque under\n * `prefers-reduced-transparency`, increased contrast, forced colors, or\n * without `backdrop-filter`). The `/register` entry measures the header;\n * the body reserves that height before its own inset, so its first content\n * rests below the title bar. A `fill`/`fill-last` child that is the body's\n * only child and opts into block-start `scrollClearance` (a `List` or\n * `Pane`) takes the clearance inside its own scroll area instead, published\n * as `--kui-scroll-clearance-block-start`, so its content scrolls visibly\n * beneath the header. Unmeasured (without the register), the header stays\n * docked. Keep header text in the normal text color: quiet text can fall\n * below AA over the content passing beneath it.\n */\n headerPresentation?: DialogSurfaceHeaderPresentation;\n /**\n * Footer placement (default `docked`); `floating` lays the footer over the\n * body's block end. The body reserves the footer's measured height so its\n * last content is never hidden beneath it. A `fill`/`fill-last` child that\n * opts into block-end `scrollClearance` (a `List` or `Pane`) takes that\n * clearance inside its own scroll area instead, published as\n * `--kui-scroll-clearance-block-end`, so its content scrolls visibly beneath\n * the transparent footer.\n */\n footerPresentation?: DialogSurfaceFooterPresentation;\n /**\n * A floating footer's clearance from the panel's inline and block-end edges\n * (default the 16px container inset). Choose a phone value such as\n * `remify(8)` from `deviceClass()`; the scaffold adds no breakpoint.\n */\n footerOffset?: CssLength;\n /**\n * Safe `data-*` identity on the root. Give sibling dialogs distinct\n * `data-key`s so a re-render morphs each surface into itself instead of\n * reusing one dialog's element for another (structurally identical roots\n * are otherwise matched by position).\n */\n rootAttributes?: DialogSurfaceRootAttributes;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/**\n * A modal dialog: a native `<dialog>` with Kerf's header, body, and footer\n * chrome, sized and presented by its props. Render it closed, then open it\n * with `openDialog()` and close it with `closeDialog()`, the close button, an\n * element with `data-dialog-close`, Escape, or (with `lightDismiss`) a press\n * on the backdrop. Import `@kerfjs/ui/surface-scaffold/register` for the\n * floating header and footer measurement, the bottom sheet's keyboard\n * clearance and grabber, and re-render resilience while open.\n */\nexport function DialogSurface({\n id,\n label,\n labelledBy,\n describedBy,\n heading,\n headerActions,\n footer,\n withoutHeader = false,\n lightDismiss = false,\n closeLabel = 'Close',\n children,\n size = 'medium',\n presentation = 'modal',\n preferredWidth,\n bodyInset = 'compact',\n footerInset = 'comfortable',\n viewportGutter,\n maxHeight,\n height,\n minHeight,\n resizable = false,\n enterMotion = 'slide',\n exitMotion = 'slide',\n bodyLayout = 'flow',\n headerPresentation = 'docked',\n footerPresentation = 'docked',\n footerOffset,\n rootAttributes = {},\n className = '',\n slot,\n}: DialogSurfaceProps) {\n const style = [\n preferredWidth === undefined\n ? ''\n : `--_kui-dialog-surface-preferred-width:${preferredWidth}`,\n viewportGutter === undefined\n ? ''\n : `--_kui-dialog-surface-gutter:${viewportGutter}`,\n maxHeight === undefined || maxHeight === 'viewport'\n ? ''\n : `--_kui-dialog-surface-max-height:${maxHeight}`,\n height === undefined || height === 'viewport'\n ? ''\n : `--_kui-dialog-surface-height:${height}`,\n footerOffset === undefined\n ? ''\n : `--_kui-dialog-surface-footer-offset:${footerOffset}`,\n minHeight === undefined\n ? ''\n : `--_kui-dialog-surface-min-height:${minHeight}`,\n ]\n .filter(Boolean)\n .join(';');\n return (\n <dialog\n {...filterDataAttributes(rootAttributes, DIALOG_SURFACE_PROTECTED)}\n id={id}\n class={`kui-dialog-surface ${className}`.trim()}\n aria-label={label}\n aria-labelledby={labelledBy}\n aria-describedby={describedBy}\n tabindex={-1}\n data-light-dismiss={lightDismiss ? '' : undefined}\n data-component=\"dialog-surface\"\n data-size={size}\n data-presentation={presentation}\n data-preferred-width={preferredWidth === undefined ? undefined : ''}\n data-body-inset={bodyInset}\n data-footer-inset={footerInset}\n data-viewport-gutter={viewportGutter === undefined ? undefined : ''}\n data-max-height={maxHeight === undefined ? undefined : ''}\n data-height={height === undefined ? undefined : ''}\n data-body-layout={bodyLayout === 'flow' ? undefined : bodyLayout}\n data-header-presentation={\n headerPresentation === 'floating' ? 'floating' : undefined\n }\n data-footer-presentation={\n footerPresentation === 'floating' ? 'floating' : undefined\n }\n data-min-height={minHeight === undefined ? undefined : ''}\n data-resizable={resizable ? '' : undefined}\n data-enter-motion={enterMotion === 'slide' ? undefined : enterMotion}\n data-exit-motion={exitMotion === 'slide' ? undefined : exitMotion}\n style={style || undefined}\n slot={slot}\n >\n {withoutHeader ? null : (\n <header class=\"kui-dialog-surface__header\">\n {heading === undefined ? (\n <h2 class=\"kui-dialog-surface__title\">{label}</h2>\n ) : (\n <div class=\"kui-dialog-surface__title\">{heading}</div>\n )}\n <div class=\"kui-dialog-surface__header-actions\">\n {headerActions}\n <button\n type=\"button\"\n class=\"kui-dialog-surface__close\"\n aria-label={closeLabel}\n data-dialog-close=\"\"\n >\n <LucideIcon icon={X} name=\"x\" size=\"l\" />\n </button>\n </div>\n </header>\n )}\n {presentation === 'bottom-sheet' && resizable ? (\n <div\n class=\"kui-dialog-surface__sheet-handle\"\n role=\"separator\"\n aria-orientation=\"horizontal\"\n aria-label=\"Resize sheet\"\n tabindex={0}\n />\n ) : null}\n <div class=\"kui-dialog-surface__body\">{children}</div>\n {footer === undefined ? null : (\n <footer class=\"kui-dialog-surface__footer\">{footer}</footer>\n )}\n {/* Where kerfjs/overlay hosts a popover or tooltip opened inside the\n modal dialog, so it stays interactive above the inert page. */}\n <div data-kerf-overlay-host data-morph-skip style=\"display:contents\" />\n </dialog>\n );\n}\n\n/** Where a PopoverDialogSurface appears: the top layer, or in flow. */\nexport type PopoverDialogSurfacePresentation = 'overlay' | 'embedded';\n\n/** Application `data-*` metadata on the surface root. */\nexport type PopoverDialogSurfaceDataAttributes = Readonly<\n Record<`data-${string}`, string>\n>;\n\ntype PopoverDialogSurfaceName =\n { label: string; labelledBy?: never } | { label?: never; labelledBy: string };\n\nexport type PopoverDialogSurfaceProps = PopoverDialogSurfaceName & {\n /** The root id: what an opening control's `popovertarget` names. */\n id?: string;\n /**\n * Id of the element whose text is the dialog's accessible description,\n * such as a title `ToolbarText`'s `descriptionId`; rendered as\n * `aria-describedby` on the `role=\"dialog\"` root.\n */\n describedBy?: string;\n children: KerfUiContent;\n /**\n * `overlay` (default) is a native `popover=\"auto\"` in the top layer:\n * non-modal, light dismiss (Escape or a press outside), nothing inert.\n * `embedded` renders the same surface in flow for a catalog or inline use.\n */\n presentation?: PopoverDialogSurfacePresentation;\n /** Preferred width preset: 400px, 560px (default), or 800px. */\n size?: DialogSurfaceSize;\n /** Preferred width; takes precedence over `size`, within the viewport cap. */\n preferredWidth?: CssLength;\n /** Definite height, bounded by the dynamic viewport minus both gutters. */\n height?: DialogSurfaceHeight;\n /** Height cap, bounded the same way, for a surface that sizes to content. */\n maxHeight?: DialogSurfaceMaxHeight;\n /** Edge clearance on each side of the viewport (default 16px). */\n viewportGutter?: CssLength;\n /**\n * Body layout (default `flow`); `fill` lets one child own the surface and\n * `fill-last` stacks fixed rows above one filling last child.\n */\n bodyLayout?: DialogSurfaceBodyLayout;\n rootAttributes?: PopoverDialogSurfaceDataAttributes;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n};\n\nconst POPOVER_DIALOG_PROTECTED = new Set([\n 'data-component',\n 'data-presentation',\n 'data-size',\n 'data-height',\n 'data-max-height',\n 'data-body-layout',\n]);\n\n/**\n * A non-modal dialog surface on the native Popover API: Kerf's dialog chrome,\n * viewport-bounded size, and single-child fill without application CSS.\n * Open it with a `popovertarget` control or `showPopover()`; it light\n * dismisses and leaves the page interactive. Use `DialogSurface` when the\n * task must block the page.\n */\nexport function PopoverDialogSurface({\n id,\n children,\n label,\n labelledBy,\n describedBy,\n presentation = 'overlay',\n size = 'medium',\n preferredWidth,\n height,\n maxHeight,\n viewportGutter,\n bodyLayout = 'flow',\n rootAttributes = {},\n className = '',\n slot,\n}: PopoverDialogSurfaceProps) {\n const style = [\n preferredWidth === undefined\n ? ''\n : `--_kui-popover-dialog-surface-preferred-width:${preferredWidth}`,\n viewportGutter === undefined\n ? ''\n : `--_kui-popover-dialog-surface-gutter:${viewportGutter}`,\n height === undefined || height === 'viewport'\n ? ''\n : `--_kui-popover-dialog-surface-height:${height}`,\n maxHeight === undefined || maxHeight === 'viewport'\n ? ''\n : `--_kui-popover-dialog-surface-max-height:${maxHeight}`,\n ]\n .filter(Boolean)\n .join(';');\n return (\n <section\n {...filterDataAttributes(rootAttributes, POPOVER_DIALOG_PROTECTED)}\n id={id}\n class={`kui-popover-dialog-surface ${className}`.trim()}\n data-component=\"popover-dialog-surface\"\n data-presentation={presentation}\n data-size={size}\n data-height={height === undefined ? undefined : ''}\n data-max-height={maxHeight === undefined ? undefined : ''}\n data-body-layout={bodyLayout === 'flow' ? undefined : bodyLayout}\n popover={presentation === 'overlay' ? 'auto' : undefined}\n role=\"dialog\"\n aria-label={label}\n aria-labelledby={labelledBy}\n aria-describedby={describedBy}\n style={style || undefined}\n slot={slot}\n >\n {children}\n </section>\n );\n}\n\nexport type PopupSurfaceInset = 'standard' | 'compact' | 'list-zero';\n\nexport interface PopupSurfaceProps {\n children: KerfUiContent;\n inset?: PopupSurfaceInset;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/** Configure recurring Web Awesome dropdown-menu geometry without consumer ::part() CSS. */\nexport function PopupSurface({\n children,\n inset = 'standard',\n className = '',\n slot,\n}: PopupSurfaceProps) {\n return (\n <span\n class={`kui-popup-surface ${className}`.trim()}\n data-component=\"popup-surface\"\n data-inset={inset}\n slot={slot}\n >\n {children}\n </span>\n );\n}\n"]}