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

package/docs/design/templates/split-button-dark.svg

@@ -0,0 +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(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)">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(100,210,255)"/><g clip-path="url(#svgimg6cp0)"><g color="rgb(17, 17, 19)"><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(17, 17, 19)" 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(17, 17, 19)" 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(17, 17, 19)" 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(17, 17, 19)" 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(17,17,19)">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(17,17,19,0.28)" fill-rule="evenodd" clip-path="url(#svgimg6bw5)"/><g clip-path="url(#svgimg6br6)"/><g clip-path="url(#svgimg6cp7)"><g color="rgb(17, 17, 19)"><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(17, 17, 19)" 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(229,229,234)"/><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(28,28,30)">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(28,28,30,0.28)" fill-rule="evenodd" clip-path="url(#svgimg6bw12)"/><g clip-path="url(#svgimg6br13)"/><g clip-path="url(#svgimg6cp14)"><g color="rgb(28, 28, 30)"><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(28, 28, 30)" 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(255,56,60)"/><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(17,17,19)">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(17,17,19,0.28)" fill-rule="evenodd" clip-path="url(#svgimg6bw19)"/><g clip-path="url(#svgimg6br20)"/><g clip-path="url(#svgimg6cp21)"><g color="rgb(17, 17, 19)"><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(17, 17, 19)" 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(174,174,178)">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(100,210,255)"/><g clip-path="url(#svgimg9cp0)"><g color="rgb(17, 17, 19)"><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(17, 17, 19)" 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(17, 17, 19)" 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(17, 17, 19)" 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(17,17,19)">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(17,17,19,0.28)" fill-rule="evenodd" clip-path="url(#svgimg9bw5)"/><g clip-path="url(#svgimg9br6)"/><g clip-path="url(#svgimg9cp7)"><g color="rgb(17, 17, 19)"><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(17, 17, 19)" 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(229,229,234)"/><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(28,28,30)">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(28,28,30,0.28)" fill-rule="evenodd" clip-path="url(#svgimg9bw12)"/><g clip-path="url(#svgimg9br13)"/><g clip-path="url(#svgimg9cp14)"><g color="rgb(28, 28, 30)"><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(28, 28, 30)" 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(255,56,60)"/><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(17,17,19)">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(17,17,19,0.28)" fill-rule="evenodd" clip-path="url(#svgimg9bw19)"/><g clip-path="url(#svgimg9br20)"/><g clip-path="url(#svgimg9cp21)"><g color="rgb(17, 17, 19)"><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(17, 17, 19)" 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(174,174,178)">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(229,229,234)"/><g color="rgb(28, 28, 30)"><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(28, 28, 30)" 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(42.317 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(28,28,30)">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(28,28,30,0.28)" fill-rule="evenodd" clip-path="url(#svgimg12bw3)"/><g clip-path="url(#svgimg12br4)"/><g clip-path="url(#svgimg12cp5)"><g color="rgb(28, 28, 30)"><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(28, 28, 30)" 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(100,210,255)"/><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(17,17,19,0.28)" fill-rule="evenodd" clip-path="url(#svgimg12bw8)"/><g clip-path="url(#svgimg12br9)"/><g clip-path="url(#svgimg12cp10)"><g color="rgb(17, 17, 19)"><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(17, 17, 19)" 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(17,17,19)">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(174,174,178)">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/split-button.svg

@@ -0,0 +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>

package/docs/design/templates/switch/states-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 146" width="400" height="146"><defs><clipPath id="ct0"><rect x="63" y="20" width="92.3" height="20"/></clipPath><clipPath id="ct1"><rect x="20" y="47" width="360" height="22.4"/></clipPath><clipPath id="ct2"><rect x="63" y="77.4" width="144.8" height="20"/></clipPath><clipPath id="ct3"><rect x="63" y="105.4" width="121.7" height="20"/></clipPath></defs><text x="63" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Live updates</text><text x="63" y="63" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(174,174,178)">The list refreshes as tickets change.</text><text x="63" y="93.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Compact navigation</text><g opacity="0.5" style="isolation:isolate"><text x="63" y="121.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Managed setting</text><rect x="20" y="105.4" width="35" height="20" rx="10" fill="rgb(100,210,255)"/><rect x="20.5" y="105.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="39" y="109.4" width="12" height="12" rx="6" fill="rgb(28,28,30)"/></g><rect x="20" y="20" width="35" height="20" rx="10" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="39" y="24" width="12" height="12" rx="6" fill="rgb(28,28,30)"/><rect x="20" y="77.4" width="35" height="20" rx="10" fill="rgb(28,28,30)"/><rect x="20.5" y="77.5" width="34" height="19" rx="9.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="24" y="81.4" width="12" height="12" rx="6" fill="rgba(253,253,255,0.196)"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 146" width="400" height="146"><defs><clipPath id="ct0"><rect x="63" y="20" width="92.3" height="20"/></clipPath><clipPath id="ct1"><rect x="20" y="40" width="360" height="22.4"/></clipPath><clipPath id="ct2"><rect x="63" y="70.4" width="144.8" height="20"/></clipPath><clipPath id="ct3"><rect x="63" y="98.4" width="121.7" height="20"/></clipPath></defs><text x="63" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Live updates</text><text x="63" y="56" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(174,174,178)">The list refreshes as tickets change.</text><text x="63" y="86.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Compact navigation</text><g opacity="0.5" style="isolation:isolate"><text x="63" y="114.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Managed setting</text><rect x="20" y="98.4" width="35" height="20" rx="10" fill="rgb(100,210,255)"/><rect x="20.5" y="98.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="39" y="102.4" width="12" height="12" rx="6" fill="rgb(28,28,30)"/></g><rect x="20" y="20" width="35" height="20" rx="10" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="39" y="24" width="12" height="12" rx="6" fill="rgb(28,28,30)"/><rect x="20" y="70.4" width="35" height="20" rx="10" fill="rgb(28,28,30)"/><rect x="20.5" y="70.5" width="34" height="19" rx="9.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="24" y="74.4" width="12" height="12" rx="6" fill="rgba(253,253,255,0.196)"/></svg>

package/docs/design/templates/switch/states.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 146" width="400" height="146"><defs><clipPath id="ct0"><rect x="63" y="20" width="92.3" height="20"/></clipPath><clipPath id="ct1"><rect x="20" y="47" width="360" height="22.4"/></clipPath><clipPath id="ct2"><rect x="63" y="77.4" width="144.8" height="20"/></clipPath><clipPath id="ct3"><rect x="63" y="105.4" width="121.7" height="20"/></clipPath></defs><text x="63" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Live updates</text><text x="63" y="63" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(110,110,115)">The list refreshes as tickets change.</text><text x="63" y="93.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Compact navigation</text><g opacity="0.5" style="isolation:isolate"><text x="63" y="121.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Managed setting</text><rect x="20" y="105.4" width="35" height="20" rx="10" fill="rgb(0,117,219)"/><rect x="20.5" y="105.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="39" y="109.4" width="12" height="12" rx="6" fill="rgb(255,255,255)"/></g><rect x="20" y="20" width="35" height="20" rx="10" fill="rgb(0,117,219)"/><rect x="20.5" y="20.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="39" y="24" width="12" height="12" rx="6" fill="rgb(255,255,255)"/><rect x="20" y="77.4" width="35" height="20" rx="10" fill="rgb(255,255,255)"/><rect x="20.5" y="77.5" width="34" height="19" rx="9.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="24" y="81.4" width="12" height="12" rx="6" fill="rgba(0,0,28,0.18)"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 146" width="400" height="146"><defs><clipPath id="ct0"><rect x="63" y="20" width="92.3" height="20"/></clipPath><clipPath id="ct1"><rect x="20" y="40" width="360" height="22.4"/></clipPath><clipPath id="ct2"><rect x="63" y="70.4" width="144.8" height="20"/></clipPath><clipPath id="ct3"><rect x="63" y="98.4" width="121.7" height="20"/></clipPath></defs><text x="63" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Live updates</text><text x="63" y="56" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(110,110,115)">The list refreshes as tickets change.</text><text x="63" y="86.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Compact navigation</text><g opacity="0.5" style="isolation:isolate"><text x="63" y="114.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Managed setting</text><rect x="20" y="98.4" width="35" height="20" rx="10" fill="rgb(0,117,219)"/><rect x="20.5" y="98.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="39" y="102.4" width="12" height="12" rx="6" fill="rgb(255,255,255)"/></g><rect x="20" y="20" width="35" height="20" rx="10" fill="rgb(0,117,219)"/><rect x="20.5" y="20.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="39" y="24" width="12" height="12" rx="6" fill="rgb(255,255,255)"/><rect x="20" y="70.4" width="35" height="20" rx="10" fill="rgb(255,255,255)"/><rect x="20.5" y="70.5" width="34" height="19" rx="9.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="24" y="74.4" width="12" height="12" rx="6" fill="rgba(0,0,28,0.18)"/></svg>

package/docs/design/templates/switch-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 322" width="432" height="322"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="146"/></clipPath><clipPath id="cp1"><rect x="16" y="222" width="400" height="84"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="400" height="146" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="200" width="400" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="222" width="400" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="322" 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)">On, Off, and Disabled</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="400" height="146"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4ct0"><rect x="63" y="20" width="92.3" height="20"/></clipPath><clipPath id="svgimg4ct1"><rect x="20" y="47" width="360" height="22.4"/></clipPath><clipPath id="svgimg4ct2"><rect x="63" y="77.4" width="144.8" height="20"/></clipPath><clipPath id="svgimg4ct3"><rect x="63" y="105.4" width="121.7" height="20"/></clipPath></defs><text x="63" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Live updates</text><text x="63" y="63" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(174,174,178)">The list refreshes as tickets change.</text><text x="63" y="93.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Compact navigation</text><g opacity="0.5" style="isolation:isolate"><text x="63" y="121.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Managed setting</text><rect x="20" y="105.4" width="35" height="20" rx="10" fill="rgb(100,210,255)"/><rect x="20.5" y="105.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="39" y="109.4" width="12" height="12" rx="6" fill="rgb(28,28,30)"/></g><rect x="20" y="20" width="35" height="20" rx="10" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="39" y="24" width="12" height="12" rx="6" fill="rgb(28,28,30)"/><rect x="20" y="77.4" width="35" height="20" rx="10" fill="rgb(28,28,30)"/><rect x="20.5" y="77.5" width="34" height="19" rx="9.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="24" y="81.4" width="12" height="12" rx="6" fill="rgba(253,253,255,0.196)"/></g></g></g></g><text x="16" y="212" 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(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="222" width="400" height="84"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 222)"><defs><clipPath id="svgimg7ct0"><rect x="58.5" y="20.6" width="94.3" height="17.8"/></clipPath><clipPath id="svgimg7ct1"><rect x="58.5" y="46.6" width="77.3" height="17.8"/></clipPath></defs><text x="58.5" y="34.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(245,245,247)">Show archived</text><text x="58.5" y="60.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(245,245,247)">Show drafts</text><rect x="20" y="20.6" width="31.5" height="18" rx="9" fill="rgb(100,210,255)"/><rect x="20.5" y="21.5" width="31" height="17" rx="8.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="37.1" y="24.2" width="10.8" height="10.8" rx="5.4" fill="rgb(28,28,30)"/><rect x="20" y="46.6" width="31.5" height="18" rx="9" fill="rgb(28,28,30)"/><rect x="20.5" y="47.5" width="31" height="17" rx="8.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="23.6" y="50.2" width="10.8" height="10.8" rx="5.4" fill="rgba(253,253,255,0.196)"/></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 322" width="432" height="322"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="146"/></clipPath><clipPath id="cp1"><rect x="16" y="222" width="400" height="84"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="400" height="146" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="200" width="400" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="222" width="400" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="322" 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)">On, Off, and Disabled</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="400" height="146"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4ct0"><rect x="63" y="20" width="92.3" height="20"/></clipPath><clipPath id="svgimg4ct1"><rect x="20" y="40" width="360" height="22.4"/></clipPath><clipPath id="svgimg4ct2"><rect x="63" y="70.4" width="144.8" height="20"/></clipPath><clipPath id="svgimg4ct3"><rect x="63" y="98.4" width="121.7" height="20"/></clipPath></defs><text x="63" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Live updates</text><text x="63" y="56" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(174,174,178)">The list refreshes as tickets change.</text><text x="63" y="86.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Compact navigation</text><g opacity="0.5" style="isolation:isolate"><text x="63" y="114.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Managed setting</text><rect x="20" y="98.4" width="35" height="20" rx="10" fill="rgb(100,210,255)"/><rect x="20.5" y="98.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="39" y="102.4" width="12" height="12" rx="6" fill="rgb(28,28,30)"/></g><rect x="20" y="20" width="35" height="20" rx="10" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="39" y="24" width="12" height="12" rx="6" fill="rgb(28,28,30)"/><rect x="20" y="70.4" width="35" height="20" rx="10" fill="rgb(28,28,30)"/><rect x="20.5" y="70.5" width="34" height="19" rx="9.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="24" y="74.4" width="12" height="12" rx="6" fill="rgba(253,253,255,0.196)"/></g></g></g></g><text x="16" y="212" 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(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="222" width="400" height="84"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 222)"><defs><clipPath id="svgimg7ct0"><rect x="58.5" y="20.6" width="94.3" height="17.8"/></clipPath><clipPath id="svgimg7ct1"><rect x="58.5" y="46.6" width="77.3" height="17.8"/></clipPath></defs><text x="58.5" y="34.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(245,245,247)">Show archived</text><text x="58.5" y="60.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(245,245,247)">Show drafts</text><rect x="20" y="20.6" width="31.5" height="18" rx="9" fill="rgb(100,210,255)"/><rect x="20.5" y="21.5" width="31" height="17" rx="8.5" fill="none" stroke="rgb(100,210,255)" stroke-width="1"/><rect x="37.1" y="24.2" width="10.8" height="10.8" rx="5.4" fill="rgb(28,28,30)"/><rect x="20" y="46.6" width="31.5" height="18" rx="9" fill="rgb(28,28,30)"/><rect x="20.5" y="47.5" width="31" height="17" rx="8.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="23.6" y="50.2" width="10.8" height="10.8" rx="5.4" fill="rgba(253,253,255,0.196)"/></g></g></g></g></svg>

package/docs/design/templates/switch.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 322" width="432" height="322"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="146"/></clipPath><clipPath id="cp1"><rect x="16" y="222" width="400" height="84"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="400" height="146" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="200" width="400" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="222" width="400" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="322" 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)">On, Off, and Disabled</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="400" height="146"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4ct0"><rect x="63" y="20" width="92.3" height="20"/></clipPath><clipPath id="svgimg4ct1"><rect x="20" y="47" width="360" height="22.4"/></clipPath><clipPath id="svgimg4ct2"><rect x="63" y="77.4" width="144.8" height="20"/></clipPath><clipPath id="svgimg4ct3"><rect x="63" y="105.4" width="121.7" height="20"/></clipPath></defs><text x="63" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Live updates</text><text x="63" y="63" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(110,110,115)">The list refreshes as tickets change.</text><text x="63" y="93.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Compact navigation</text><g opacity="0.5" style="isolation:isolate"><text x="63" y="121.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Managed setting</text><rect x="20" y="105.4" width="35" height="20" rx="10" fill="rgb(0,117,219)"/><rect x="20.5" y="105.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="39" y="109.4" width="12" height="12" rx="6" fill="rgb(255,255,255)"/></g><rect x="20" y="20" width="35" height="20" rx="10" fill="rgb(0,117,219)"/><rect x="20.5" y="20.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="39" y="24" width="12" height="12" rx="6" fill="rgb(255,255,255)"/><rect x="20" y="77.4" width="35" height="20" rx="10" fill="rgb(255,255,255)"/><rect x="20.5" y="77.5" width="34" height="19" rx="9.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="24" y="81.4" width="12" height="12" rx="6" fill="rgba(0,0,28,0.18)"/></g></g></g></g><text x="16" y="212" 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(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="222" width="400" height="84"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 222)"><defs><clipPath id="svgimg7ct0"><rect x="58.5" y="20.6" width="94.3" height="17.8"/></clipPath><clipPath id="svgimg7ct1"><rect x="58.5" y="46.6" width="77.3" height="17.8"/></clipPath></defs><text x="58.5" y="34.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(29,29,31)">Show archived</text><text x="58.5" y="60.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(29,29,31)">Show drafts</text><rect x="20" y="20.6" width="31.5" height="18" rx="9" fill="rgb(0,117,219)"/><rect x="20.5" y="21.5" width="31" height="17" rx="8.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="37.1" y="24.2" width="10.8" height="10.8" rx="5.4" fill="rgb(255,255,255)"/><rect x="20" y="46.6" width="31.5" height="18" rx="9" fill="rgb(255,255,255)"/><rect x="20.5" y="47.5" width="31" height="17" rx="8.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="23.6" y="50.2" width="10.8" height="10.8" rx="5.4" fill="rgba(0,0,28,0.18)"/></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 322" width="432" height="322"><defs><clipPath id="cp0"><rect x="16" y="38" width="400" height="146"/></clipPath><clipPath id="cp1"><rect x="16" y="222" width="400" height="84"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="400" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="400" height="146" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="200" width="400" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="222" width="400" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="432" height="322" 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)">On, Off, and Disabled</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="400" height="146"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4ct0"><rect x="63" y="20" width="92.3" height="20"/></clipPath><clipPath id="svgimg4ct1"><rect x="20" y="40" width="360" height="22.4"/></clipPath><clipPath id="svgimg4ct2"><rect x="63" y="70.4" width="144.8" height="20"/></clipPath><clipPath id="svgimg4ct3"><rect x="63" y="98.4" width="121.7" height="20"/></clipPath></defs><text x="63" y="36" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Live updates</text><text x="63" y="56" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(110,110,115)">The list refreshes as tickets change.</text><text x="63" y="86.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Compact navigation</text><g opacity="0.5" style="isolation:isolate"><text x="63" y="114.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Managed setting</text><rect x="20" y="98.4" width="35" height="20" rx="10" fill="rgb(0,117,219)"/><rect x="20.5" y="98.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="39" y="102.4" width="12" height="12" rx="6" fill="rgb(255,255,255)"/></g><rect x="20" y="20" width="35" height="20" rx="10" fill="rgb(0,117,219)"/><rect x="20.5" y="20.5" width="34" height="19" rx="9.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="39" y="24" width="12" height="12" rx="6" fill="rgb(255,255,255)"/><rect x="20" y="70.4" width="35" height="20" rx="10" fill="rgb(255,255,255)"/><rect x="20.5" y="70.5" width="34" height="19" rx="9.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="24" y="74.4" width="12" height="12" rx="6" fill="rgba(0,0,28,0.18)"/></g></g></g></g><text x="16" y="212" 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(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="222" width="400" height="84"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 222)"><defs><clipPath id="svgimg7ct0"><rect x="58.5" y="20.6" width="94.3" height="17.8"/></clipPath><clipPath id="svgimg7ct1"><rect x="58.5" y="46.6" width="77.3" height="17.8"/></clipPath></defs><text x="58.5" y="34.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(29,29,31)">Show archived</text><text x="58.5" y="60.86" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" fill="rgb(29,29,31)">Show drafts</text><rect x="20" y="20.6" width="31.5" height="18" rx="9" fill="rgb(0,117,219)"/><rect x="20.5" y="21.5" width="31" height="17" rx="8.5" fill="none" stroke="rgb(0,117,219)" stroke-width="1"/><rect x="37.1" y="24.2" width="10.8" height="10.8" rx="5.4" fill="rgb(255,255,255)"/><rect x="20" y="46.6" width="31.5" height="18" rx="9" fill="rgb(255,255,255)"/><rect x="20.5" y="47.5" width="31" height="17" rx="8.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="23.6" y="50.2" width="10.8" height="10.8" rx="5.4" fill="rgba(0,0,28,0.18)"/></g></g></g></g></svg>

package/docs/design/templates.md

@@ -13,8 +13,8 @@ Templated components (each with light + dark variants):
 `ToolbarControlGroup`, `Toolbar`, `ToolbarText`, `List`, `ListItem`, `ListHeader`,
 `ListActionRow`, `ValueTable`, `Disclosure`, `ProgressBar`, `ProgressRing`, `StateBanner`, `EmptyState`, `Skeleton`,
 `SegmentedControl`, `TabBar`/`TabBarItem`, `SearchField`, `TagField`, `Chip`, `ChoiceChips`,
-`MessageComposer`, `ColorPicker`, `ColorField`, `ColorSwatches`, and the native form controls `Button`, `TextField`, `Checkbox`,
-`RadioGroup`, `Switch`, `Slider`, and `Select`.
+`MessageComposer`, `ColorPicker`, `ColorField`, `ColorSwatches`, and the native form controls `Button`, `SplitButton`, `TextField`, `Checkbox`,
+`CheckboxGroup`, `RadioGroup`, `Switch`, `Slider`, and `Select`.
 
 Deliberately **not** templated (they don't read as a single static component
 picture): `DialogSurface`, `ListDetailDialog`, and `WorkbenchDialog` are modal `<dialog>`s that only present as a dialog
@@ -24,7 +24,7 @@ instead; `LucideIcon` and
 use them; `ResizableRegion` and the whole-screen layouts (`NavStack`,
 `SplitView`, `Workbench`, `TabNavigator`) and the `Catalog` shell are
 interaction-/viewport-driven screens rather than component cards — the live UX
-catalog and the app-layouts docs cover those. `ColorPicker` is templated from stand-ins: its area and hue and opacity tracks are CSS gradients and range-input pseudo-elements a static capture cannot keep, so the templates draw them as inline SVG gradients and checker squares from the picker's own values (`staticColorPicker`). For the same reason the `Slider` templates draw
+catalog and the app-layouts docs cover those. `ColorPicker` is templated from stand-ins: its area and its channel and opacity tracks are CSS gradients and range-input pseudo-elements a static capture cannot keep, so the templates draw them as inline SVG gradients and checker squares from the picker's own values (`staticColorPicker`). For the same reason the `Slider` templates draw
 its track, fill, and thumb with template-only stand-in elements built from
 the Slider's own tokens and fill value (`staticRange` in
 `scripts/build-design-templates.mjs`). The `ColorField` templates likewise draw the swatch's checkerboard with plain squares (`staticSwatch`), since the capture would embed its conic gradient as a nested SVG.
@@ -53,6 +53,13 @@ docs/design/templates/
   viewer's system fonts: real, selectable, and small (no embedded font data). The
   kerf UI design font stack is system-based, so the picture matches; a viewer
   without those fonts falls back to its own.
+- Variant SVGs have a **transparent background** on purpose, so they keep
+  whatever surface they are placed on. Translucent tokens (neutral fills,
+  tracks, skeletons, disabled states at 50% opacity, shadows) therefore blend
+  with that surface exactly as the live component does: place a dark variant on
+  a dark frame. A template-only stand-in that should be opaque must draw its
+  own surface underlay instead of painting translucent fills straight onto the
+  transparent background.
 - The **library** files (`<component>.svg` light, `<component>-dark.svg` dark) lay
   the variants out with captions. The generator writes a temporary HTML page whose
   `<img>` elements reference the individual variant SVGs, then captures that page

package/docs/disclosure.md

@@ -26,6 +26,40 @@ prose in `Text` rather than passing a bare string.
   it marks a real distinction.
 - `appearance="sunken"` draws the border on the lowered, textured work surface,
   for something like a log.
+- `appearance="embedded"` is for a Disclosure inside chrome that already owns
+  the content-item geometry, such as a `ContentItem`. See below.
+
+## Embedded in a content item
+
+A compact details panel inside a `ContentItem` (a note card's AI feedback)
+would be framed twice by the default geometry: the item's 8px margin, border,
+and padding, then the Disclosure's own. `appearance="embedded"` drops the
+Disclosure's margin, border, and padding, so the summary row starts on the
+item's content inset and the arrow lines up with the item's other icons. The
+summary is a compact row with a 24px minimum height, and it has no hover
+fill, because a fill would touch the arrow and text at the item's content
+edge. Its focus ring sits just outside the row.
+
+The content starts on the title's text column, 8px below the summary. Inside
+an item, content brings no inset of its own: use a `flush` `Text` or other
+inline content rather than a block `Text`. `kerf-ui-doctor` (through
+`eslint-plugin-kerfjs`'s `ui-composition` rule) reports a block `Text`, or any
+other child that brings its own content-item inset, directly inside an
+embedded Disclosure as `KUI-L204`.
+
+```tsx
+<ContentItem frame="framed">
+  <List gap="xs">
+    <Text flush>Move the export button into the toolbar.</Text>
+    <Disclosure title="AI Feedback" detail="2 suggestions" appearance="embedded">
+      <Text flush tone="quiet">Group Export and Share in one control group.</Text>
+    </Disclosure>
+  </List>
+</ContentItem>;
+```
+
+Use `embedded` only inside owner chrome. On a pane or a list, the default
+geometry is what puts the Disclosure on the shared content column.
 
 ## Open state
 

package/docs/list-detail-dialog.md

@@ -36,6 +36,10 @@ stylesheets, or `@kerfjs/ui/styles.css`.
   `list.footer`.
 - **The surface draws no header.** Both columns start at the dialog's top
   edge, so the divider between them runs the dialog's full height.
+- **The description is yours to name.** The detail `description` describes the
+  selected record, not the dialog, so it is not the dialog's accessible
+  description. Pass `describedBy`, the id of app-owned summary copy, to render
+  `aria-describedby` on the dialog.
 
 Each column is a `Pane`: its header and footer stay pinned and its content
 scrolls on its own. Pass content that owns its geometry, usually a `List`.

package/docs/nav-stack.md

@@ -241,8 +241,12 @@ scrolls visibly, blurred, beneath it.
   includes that padding, so views clear the chrome and the safe area exactly
   once.
 - **Transitions.** Only the live chrome is measured, never a cross-fading
-  copy. The copy keeps painting over the top edge with the same material while
-  it fades, and the incoming view settles at the incoming chrome's clearance.
+  copy. An overlay bar (top chrome or bottom toolbar) cross-fades its
+  contents, never its material: the live bar keeps the material at full
+  opacity while its new contents fade in, and the copy fading out above it
+  carries only the old contents, so the sliding views never show through the
+  chrome mid push or pop. The incoming view settles at the incoming chrome's
+  clearance.
 - **Classic scrollbars.** Where the active view's scroller (the view, or a
   sole header-less Pane's content) shows a classic, space-taking scrollbar,
   `wireNavStack` measures it and the chrome ends where its track begins, so

package/docs/surface-scaffold.md

@@ -41,6 +41,11 @@ openDialog(document.getElementById('edit-workspace') as HTMLDialogElement);
 - **Name.** `label` names the dialog and is its title text. With `heading`
   (title content such as an xl `ToolbarText` with a description), pass
   `labelledBy`, the id of the element that names it, or keep `label`.
+- **Description.** `describedBy` is the id of the element whose text is the
+  dialog's accessible description, rendered as `aria-describedby` on the
+  `<dialog>`: the `heading` ToolbarText's `descriptionId`, or app-owned summary
+  copy in the body. `rootAttributes` takes only `data-*` attributes, so it can
+  never set or override `aria-describedby`.
 - **Header.** The title, then `headerActions` and a close button (`closeLabel`,
   default `Close`). `withoutHeader` renders none, for content that owns its
   heading and close control.
@@ -447,8 +452,7 @@ pass `describedBy`, the id of the element that holds the summary. It renders as
 </PopoverDialogSurface>;
 ```
 
-`DialogSurface` has no `describedBy`: name it with `label` or `labelledBy`,
-and keep any description in the body or its `heading`'s description.
+`DialogSurface` takes the same `describedBy` for a modal dialog.
 
 Open it with a control's `popoverTarget` (or `showPopover()`); the browser
 places it centered in the top layer, light-dismisses it, and restores nothing

package/docs/ui-doctor.md

@@ -18,6 +18,16 @@ The catalog stage discovers the package-default application UI profile and works
 
 TypeScript uses the compiler API with `noEmit`. ESLint loads the installed `eslint-plugin-kerfjs` `recommended-ui` preset (`--eslint strict-ui` opts into advisory rules as errors). This is deliberately an isolated Kerf lint pass rather than the consumer's complete ESLint configuration. For each file, the doctor projects the applicable core ESLint rules and `linterOptions` from the consumer configuration so core-rule suppression directives retain the same used/unused semantics as the application's normal lint command. Consumer plugin rules are not executed, and inline directives for plugins such as `@typescript-eslint` therefore do not produce false "rule definition not found" diagnostics; the consumer's normal ESLint command remains authoritative for those rules. Unknown `kerfjs/*` directives still fail the doctor pass. Stable KUI identifiers come from the packaged `application-ui-diagnostic-ids-v1.json` registry; the doctor also reads installed ESLint message metadata for semantic conflict detection instead of duplicating rule definitions. The analyzer calls the public `@kerfjs/ui/analyzer` contract. None of these stages executes generated application code.
 
+Composition findings come from the same catalogs. `KUI-L201`–`KUI-L203`
+report a cataloged component under a disallowed parent, a zone child the zone
+does not accept, and a provable zone cardinality violation. `KUI-L204` reports
+a direct child that brings its own content-item inset (1px border + 8px
+padding) into a parent configured to expect inset-free content, such as a
+block `Text` inside `Disclosure appearance="embedded"`, which double-insets the
+owner chrome; the message names the child's inset-free form (`Text flush`) or
+inline content. Values the rule cannot read statically, such as a spread or an
+expression, are not reported.
+
 Property-specific CSS values are evaluated from each first- or third-party
 catalog entry's `cssValueProps`. `KUI-L013`–`KUI-L016` are blocking grammar
 violations and name a preferred shorthand/helper; `KUI-L017` keeps an
@@ -182,9 +192,10 @@ covers these string literals:
   `section`, `nav`, `aside`, `main`, `header`, `footer`, `form`, or `search`
   element or an element with a landmark `role`;
 - field and group labels: the `label` and `ariaLabel` of `TextField`,
-  `Select`, and `RadioGroup`, and the `label` of a raw `wa-input`,
-  `wa-select`, `wa-textarea`, or `wa-radio-group` in an application using the
-  optional Web Awesome integration;
+  `Select`, `CheckboxGroup`, and `RadioGroup`, and the `label` of a raw
+  `wa-input`, `wa-select`, `wa-textarea`, `wa-checkbox-group`, or
+  `wa-radio-group` in an application using the optional Web Awesome
+  integration;
 - the accessible names of icon-only controls, which the rule also gives title
   style: an icon-only `Button`'s `ariaLabel`, `PopupMenu` `label`,
   `SplitButton` `optionsLabel`, `SearchField` and `TextField`
@@ -203,7 +214,8 @@ The check is deliberately one-directional, to keep false positives rare:
   is. A word joined to an interpolation (`` `${count}s` ``) is skipped.
 - It ignores other dynamic values and every sentence-style surface: descriptions,
   details, placeholders, tooltips, status text, and option text, including
-  `Checkbox` and `Switch` labels, `RadioGroup` choice labels, and
+  `Checkbox` and `Switch` labels, `CheckboxGroup` and `RadioGroup` choice
+  labels, and
   `wa-checkbox`, `wa-switch`, and `wa-radio` labels. It does not read
   `LoadingSpinner` or `Skeleton` labels, which announce a status.
 - It skips tokens containing digits, code, paths, or URLs, and lowercase-led

package/docs/webawesome-migration.md

@@ -23,7 +23,7 @@ selector changes.
 | `<wa-input label="Name" hint="…" with-clear>`                 | `<TextField label="Name" hint="…" clearable />` (`@kerfjs/ui/text-field`)                                                                                                   | Call `wireTextFields(root)` from `@kerfjs/ui/wire-text-fields` once for the clear button and a live `showCount`. Pass `error` for an invalid field.                                               |
 | `<wa-textarea rows="4" resize="auto">`                        | `<TextField multiline rows={4} maxRows={10} />`                                                                                                                             | `maxRows` grows the field with its content up to that height.                                                                                                                                     |
 | `<wa-checkbox>Email me</wa-checkbox>`                         | `<Checkbox label="Email me" action="toggle-email" />` (`@kerfjs/ui/checkbox`)                                                                                               | For a mixed parent, pass `indeterminate` and call `wireCheckboxes(root)` from `@kerfjs/ui/wire-checkboxes` once.                                                                                  |
-| `<wa-checkbox-group>`                                         | `Checkbox` rows in a `List`, or `ChoiceChips` with `multiple="toggle"`                                                                                                      |                                                                                                                                                                                                   |
+| `<wa-checkbox-group label="Notifications">`                   | `<CheckboxGroup label="Notifications" name="channels" value={channels.value} choices={[…]} />` (`@kerfjs/ui/checkbox-group`), or `ChoiceChips` with `multiple="toggle"`     |                                                                                                                                                                                                   |
 | `<wa-radio-group label="Density"><wa-radio value="compact">…` | `<RadioGroup label="Density" name="density" value={density.value} choices={[{ value: 'compact', label: 'Compact' }]} />`                                                    | `@kerfjs/ui/radio-group`. Use `orientation="horizontal"` for a row. Use `SegmentedControl` for a view switch and `ChoiceChips` for wrapping pills.                                                |
 | `<wa-switch>Live updates</wa-switch>`                         | `<Switch label="Live updates" checked={live.value} action="toggle-live" />` (`@kerfjs/ui/switch`)                                                                           | Only for a setting that applies immediately; use `Checkbox` for a submitted option.                                                                                                               |
 | `<wa-select>` with `<wa-option>` children                     | `<Select label="Status" name="status" value={status.value} choices={[…]} />` (`@kerfjs/ui/select`)                                                                          | Import `@kerfjs/ui/select/register` once. It emits standard `input` and `change` events.                                                                                                          |

package/docs/webawesome-theme.md

@@ -99,8 +99,8 @@ share Kerf's 44px control height — the height of a Kerf `Select`, a toolbar
 group, and a list row — so a `wa-input` or `wa-button` sits flush beside a Kerf
 `Select`. The theme sets `--wa-form-control-height` to `2.75em` (44px at the
 16px default) on Button, Color Picker, Input, Known Date, Number Input, Radio
-Group, Select, Textarea (its minimum height), and Time Input, so `size="large"`
-scales proportionally while `size="small"` keeps Web Awesome's compact secondary
+Group, Select, Tag Input (its box's minimum height), Textarea (its minimum
+height), and Time Input, so `size="large"` scales proportionally while `size="small"` keeps Web Awesome's compact secondary
 height. The token is scoped to those controls rather than the root because Web
 Awesome also derives tag, copy-button, and toast geometry from it. Buttons
 inside a `ToolbarControlGroup` keep the group's 40px (32px compact) control
@@ -114,26 +114,58 @@ uppercase 12px/650 treatment. Inline control labels (Checkbox, Switch) keep
 their natural sentence case.
 
 On coarse touch devices, the editable part of small and extra-small Web Awesome
-Input, Number Input, Time Input, Textarea, and Select has a 16px minimum text
-size. Small field chrome keeps its compact height and desktop typography stays
-small. This prevents Safari from magnifying the page just to focus text; it does
-not constrain a user's own pinch zoom. App-owned native fields need the same
+Input, Number Input, Tag Input, Time Input, Textarea, and Select has a 16px
+minimum text size. Small field chrome keeps its compact height and desktop
+typography stays small. This prevents Safari from magnifying the page just to
+focus text; it does not constrain a user's own pinch zoom. App-owned native fields need the same
 editable-text audit.
 
 Known Date's field captions and bordered text-like field hints use the same 9px
 inline inset, keeping secondary text aligned with the value rather than the
 field's outer border. This covers Input, Known Date, Number Input, OTP Input,
-Select, Textarea, and Time Input hints; unbordered group hints retain their own
-natural geometry. OTP Input's label and hint both use the 9px field-text inset.
-
-Checkbox Group and Radio Group option regions receive the shared 8px inline
-outer inset through `::part(form-control-input)`. Unlike bordered fields, these
-groups have no shell of their own, so the explicit margin places their controls
-on the same content-item geometry without adding padding to each option. The
-Color Picker trigger receives the same 8px inline outer inset because it also
-has no bordered field shell. Slider's complete interactive region receives the
+Select, Tag Input, Textarea, and Time Input hints.
+OTP Input's label and hint both use the 9px field-text inset. Its code cells
+render whole in a shrink-to-fit host (a start-aligned grid or flex item):
+upstream caps the segments' focus-ring-padded box at the host's width, which
+there is the cells' width minus that padding and so clipped the last cell's
+inline-end edge, and the theme caps it at the host's width plus the padding its
+negative margins reserve. A host narrower than the code still scrolls its
+segments; the `contained` appearance keeps upstream's cap.
+
+Checkbox Group, Radio Group, and Color Picker follow Kerf's `Checkbox`,
+`RadioGroup`, and `ColorField`: the control region stays flush, so each box,
+circle, or swatch trigger sits on the host's inline-start edge, while the label
+and hint use the same 9px text column as field labels. Stacked checkboxes and
+radios therefore share one control column with Kerf's own toggle controls;
+place the group where you would place a Kerf `Checkbox` or `RadioGroup` rather
+than adding margin to its parts. Stacked
+default-appearance Radios sit 8px apart (`0.25em` block margins instead of Web
+Awesome's `0.375em`, the first and last radio still flush), so a Radio Group
+keeps the same 28px pitch as a Kerf `RadioGroup` and a Checkbox Group's 8px
+gap; horizontal and button radios keep Web Awesome's spacing.
+
+Bordered fields (Input, Known Date, Number Input, OTP Input, Select, Tag
+Input, Textarea, and Time Input) and Switch likewise draw their border or
+track on the host's inline-start edge, exactly where Kerf's `TextField`, `Select`, and `Switch`
+draw theirs, with the label and hint on the same 9px text column. Place a Web
+Awesome field where you would place the Kerf field it stands in for, so a mixed
+form shares one border column and one text column; the UX catalog gives these
+specimens the same `inline-control` alignment as the Kerf field demos. Tag
+Input is Discouraged in favor of Kerf's `TagField`, but an application that
+still renders it gets the same label, hint, height, and border placement as the
+other bordered fields.
+
+Slider's complete interactive region receives the
 shared 8px logical inline outer inset through `::part(slider)`, keeping its
-track, markers, references, and hint together without moving the label.
+track, markers, references, and hint together without moving the label. Placed
+where a Kerf `Slider` goes, its label and track land on the Kerf Slider's text
+column.
+
+Known Date and Slider size to their container rather than to their content, so
+give them a width (a form column, or the container's full width) instead of a
+shrink-to-fit parent, where Known Date collapses to nothing and Slider to a
+stub. The UX catalog gives Known Date a compact field column and Slider the
+Kerf Slider demo's medium width.
 
 Non-field chrome follows explicit, overridable control, surface, and container
 tiers:

package/docs/workbench-dialog.md

@@ -50,7 +50,8 @@ The dialog draws no surface header and no body inset. Its body is a
 `Workbench` (`<id>-workbench`):
 
 - **The work area's toolbar** carries the dialog's primary title (an xl
-  level-2 heading, id `<id>-title`) with an optional `description`, any
+  level-2 heading, id `<id>-title`) with an optional `description` (id
+  `<id>-description`, the dialog's accessible description), any
   `leading` groups, the `actions`, and the close control. Close stays the
   outermost trailing control, after a hidden right rail's toggle.
 - **The rails** (`leftRail`, `rightRail`) keep their own toolbars, with
@@ -74,6 +75,8 @@ Escape closes the dialog.
 
 - `id`, `label` (required): identity and the dialog's accessible name.
 - `title` (required), `description`, `leading`, `actions`.
+- `describedBy`: the id of other content, such as summary copy in `main`,
+  that describes the dialog in place of `description`.
 - `main` (required), `mainFooter`, `mainBottomToolbar`.
 - `leftRail`, `rightRail`, `bottomDrawer`: `WorkbenchPanel`s.
 - `compact`, `closeLabel` (default `Close`), `lightDismiss`.

package/docs/writing.md

@@ -115,9 +115,9 @@ interpolated value keeps its own spelling. The covered props are:
   the `aria-label` of a landmark element (`section`, `nav`, `aside`, `main`,
   `header`, `footer`, `form`, `search`) or landmark role;
 - field and group labels: the `label` (or `ariaLabel`) of `TextField`,
-  `Select`, and `RadioGroup`, and, in an application using the optional Web
-  Awesome integration, the `label` of a raw `wa-input`, `wa-select`,
-  `wa-textarea`, or `wa-radio-group`;
+  `Select`, `CheckboxGroup`, and `RadioGroup`, and, in an application using
+  the optional Web Awesome integration, the `label` of a raw `wa-input`,
+  `wa-select`, `wa-textarea`, `wa-checkbox-group`, or `wa-radio-group`;
 - the accessible names of icon-only controls: an icon-only `Button`'s `ariaLabel`, `PopupMenu` `label`, `SplitButton`
   `optionsLabel`, `SearchField` and `TextField` `clearLabel`, and the `aria-label` of a
   `button` or `wa-button` whose only content is an icon.