@kerfjs/ui 5.0.0-beta.53 → 5.0.0-beta.55

package/docs/design/templates/state-banner-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 592 786" width="592" height="786"><defs><clipPath id="cp0"><rect x="16" y="38" width="560" height="116"/></clipPath><clipPath id="cp1"><rect x="16" y="192" width="560" height="116"/></clipPath><clipPath id="cp2"><rect x="16" y="346" width="560" height="116"/></clipPath><clipPath id="cp3"><rect x="16" y="500" width="560" height="116"/></clipPath><clipPath id="cp4"><rect x="16" y="654" width="560" height="116"/></clipPath><clipPath id="ct5"><rect x="16" y="16" width="560" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="38" width="560" height="116" rx="0"/></clipPath><clipPath id="ct8"><rect x="16" y="170" width="560" height="22"/></clipPath><clipPath id="irc9"><rect x="16" y="192" width="560" height="116" rx="0"/></clipPath><clipPath id="ct11"><rect x="16" y="324" width="560" height="22"/></clipPath><clipPath id="irc12"><rect x="16" y="346" width="560" height="116" rx="0"/></clipPath><clipPath id="ct14"><rect x="16" y="478" width="560" height="22"/></clipPath><clipPath id="irc15"><rect x="16" y="500" width="560" height="116" rx="0"/></clipPath><clipPath id="ct17"><rect x="16" y="632" width="560" height="22"/></clipPath><clipPath id="irc18"><rect x="16" y="654" width="560" height="116" rx="0"/></clipPath></defs><rect x="0" y="0" width="592" height="786" 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)">Info</text><g clip-path="url(#cp0)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="38" width="560" height="116"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg7cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg7cp2"><rect x="61" y="44.4" width="368.6" height="13"/></clipPath><clipPath id="svgimg7ct3"><rect x="61" y="29.4" width="116.7" height="15"/></clipPath><clipPath id="svgimg7ct4"><rect x="61" y="44.4" width="368.6" height="13"/></clipPath><clipPath id="svgimg7ct5"><rect x="437.6" y="29" width="65.4" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(34,43,48)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#svgimg7cp0)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg7svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg7svgic1)"><g transform="translate(37 35.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="61" y="41.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(138,203,255)">Draft not published</text><g clip-path="url(#svgimg7cp2)"><g clip-path="url(#svgimg7ct4)"><text x="61" y="55.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(138,203,255)">Changes are saved but only visible to your team.</text></g></g><rect x="437.6" y="29" width="65.4" height="28.8" rx="14.4" fill="rgba(28,28,30,0.52)"/><rect x="438.5" y="29.5" width="64" height="28" rx="13.9" fill="none" stroke="rgb(138,203,255)" stroke-width="1"/><text x="449.83" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(138,203,255)">Publish</text></g></g></g></g><text x="16" y="182" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Info with badge</text><g clip-path="url(#cp1)"><g clip-path="url(#irc9)"><clipPath id="svgimg10vclip"><rect x="16" y="192" width="560" height="116"/></clipPath><g clip-path="url(#svgimg10vclip)"><g transform="translate(16 192)"><defs><clipPath id="svgimg10cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg10ct2"><rect x="61" y="35.9" width="137.6" height="15"/></clipPath><clipPath id="svgimg10ct3"><rect x="206.6" y="33.4" width="20" height="20"/></clipPath><clipPath id="svgimg10ct4"><rect x="437.3" y="29" width="65.7" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(34,43,48)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#svgimg10cp0)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg10svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg10svgic1)"><g transform="translate(37 35.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="61" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(138,203,255)">Unanswered questions</text><rect x="206.6" y="33.4" width="20" height="20" rx="10" fill="rgb(138,203,255)"/><rect x="207.5" y="33.5" width="19" height="19" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="213.83" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(28,28,30)">1</text><rect x="437.3" y="29" width="65.7" height="28.8" rx="14.4" fill="rgba(28,28,30,0.52)"/><rect x="437.5" y="29.5" width="65" height="28" rx="13.9" fill="none" stroke="rgb(138,203,255)" stroke-width="1"/><text x="449.47" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(138,203,255)">Answer</text></g></g></g></g><text x="16" y="336" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Success</text><g clip-path="url(#cp2)"><g clip-path="url(#irc12)"><clipPath id="svgimg13vclip"><rect x="16" y="346" width="560" height="116"/></clipPath><g clip-path="url(#svgimg13vclip)"><g transform="translate(16 346)"><defs><clipPath id="svgimg13cp0"><rect x="37" y="35" width="16" height="16"/></clipPath><clipPath id="svgimg13cp2"><rect x="61" y="44" width="434" height="13"/></clipPath><clipPath id="svgimg13ct3"><rect x="61" y="29" width="132.1" height="15"/></clipPath><clipPath id="svgimg13ct4"><rect x="61" y="44" width="434" height="13"/></clipPath></defs><rect x="28" y="20" width="484" height="46" rx="12" fill="rgb(31,52,38)"/><rect x="28.5" y="20.5" width="483" height="45" rx="11.5" fill="none" stroke="rgb(40,113,59)" stroke-width="1"/><g clip-path="url(#svgimg13cp0)"><g color="rgb(99, 230, 133)"><clipPath id="svgimg13svgic1"><rect x="37" y="35" width="16" height="16"/></clipPath><g clip-path="url(#svgimg13svgic1)"><g transform="translate(37 35)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(99, 230, 133)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m16 9-5.5 5.5L8 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(99, 230, 133)" 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="61" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(99,230,133)">Deployment complete</text><g clip-path="url(#svgimg13cp2)"><g clip-path="url(#svgimg13ct4)"><text x="61" y="55" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(99,230,133)">production.example.com is serving the new build.</text></g></g></g></g></g></g><text x="16" y="490" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Warning</text><g clip-path="url(#cp3)"><g clip-path="url(#irc15)"><clipPath id="svgimg16vclip"><rect x="16" y="500" width="560" height="116"/></clipPath><g clip-path="url(#svgimg16vclip)"><g transform="translate(16 500)"><defs><clipPath id="svgimg16cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg16cp2"><rect x="61" y="44.4" width="362.1" height="13"/></clipPath><clipPath id="svgimg16ct3"><rect x="61" y="29.4" width="166.1" height="15"/></clipPath><clipPath id="svgimg16ct4"><rect x="61" y="44.4" width="362.1" height="13"/></clipPath><clipPath id="svgimg16ct5"><rect x="431.1" y="29" width="71.9" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(48,44,27)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(251,221,104)" stroke-width="1"/><g clip-path="url(#svgimg16cp0)"><g color="rgb(255, 216, 74)"><clipPath id="svgimg16svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg16svgic1)"><g transform="translate(37 35.39)scale(.66667)"><path d="m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 9v4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 17z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" 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="61" y="41.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(255,216,74)">Approaching your plan limit</text><g clip-path="url(#svgimg16cp2)"><g clip-path="url(#svgimg16ct4)"><text x="61" y="55.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(255,216,74)">You have used 92% of this month’s build minutes.</text></g></g><rect x="431.1" y="29" width="71.9" height="28.8" rx="14.4" fill="rgba(28,28,30,0.52)"/><rect x="431.5" y="29.5" width="71" height="28" rx="13.9" fill="none" stroke="rgb(255,216,74)" stroke-width="1"/><text x="443.28" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(255,216,74)">Upgrade</text></g></g></g></g><text x="16" y="644" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Danger (alert)</text><g clip-path="url(#cp4)"><g clip-path="url(#irc18)"><clipPath id="svgimg19vclip"><rect x="16" y="654" width="560" height="116"/></clipPath><g clip-path="url(#svgimg19vclip)"><g transform="translate(16 654)"><defs><clipPath id="svgimg19cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg19cp2"><rect x="61" y="44.4" width="362.7" height="13"/></clipPath><clipPath id="svgimg19ct3"><rect x="61" y="29.4" width="67.5" height="15"/></clipPath><clipPath id="svgimg19ct4"><rect x="61" y="44.4" width="362.7" height="13"/></clipPath><clipPath id="svgimg19ct5"><rect x="431.7" y="29" width="71.3" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(44,30,32)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(101,37,40)" stroke-width="1"/><g clip-path="url(#svgimg19cp0)"><g color="rgb(255, 160, 162)"><clipPath id="svgimg19svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg19svgic1)"><g transform="translate(37 35.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 160, 162)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 160, 162)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 160, 162)" 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="61" y="41.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(255,160,162)">Build failed</text><g clip-path="url(#svgimg19cp2)"><g clip-path="url(#svgimg19ct4)"><text x="61" y="55.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(255,160,162)">Step “test” exited with code 1.</text></g></g><rect x="431.7" y="29" width="71.3" height="28.8" rx="14.4" fill="rgba(28,28,30,0.52)"/><rect x="432.5" y="29.5" width="70" height="28" rx="13.9" fill="none" stroke="rgb(255,160,162)" stroke-width="1"/><text x="443.88" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(255,160,162)">View log</text></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 592 786" width="592" height="786"><defs><clipPath id="cp0"><rect x="16" y="38" width="560" height="116"/></clipPath><clipPath id="cp1"><rect x="16" y="192" width="560" height="116"/></clipPath><clipPath id="cp2"><rect x="16" y="346" width="560" height="116"/></clipPath><clipPath id="cp3"><rect x="16" y="500" width="560" height="116"/></clipPath><clipPath id="cp4"><rect x="16" y="654" width="560" height="116"/></clipPath><clipPath id="ct5"><rect x="16" y="16" width="560" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="38" width="560" height="116" rx="0"/></clipPath><clipPath id="ct8"><rect x="16" y="170" width="560" height="22"/></clipPath><clipPath id="irc9"><rect x="16" y="192" width="560" height="116" rx="0"/></clipPath><clipPath id="ct11"><rect x="16" y="324" width="560" height="22"/></clipPath><clipPath id="irc12"><rect x="16" y="346" width="560" height="116" rx="0"/></clipPath><clipPath id="ct14"><rect x="16" y="478" width="560" height="22"/></clipPath><clipPath id="irc15"><rect x="16" y="500" width="560" height="116" rx="0"/></clipPath><clipPath id="ct17"><rect x="16" y="632" width="560" height="22"/></clipPath><clipPath id="irc18"><rect x="16" y="654" width="560" height="116" rx="0"/></clipPath></defs><rect x="0" y="0" width="592" height="786" 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)">Info</text><g clip-path="url(#cp0)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="38" width="560" height="116"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg7cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg7ct2"><rect x="61" y="29.4" width="116.7" height="15"/></clipPath><clipPath id="svgimg7cp3"><rect x="61" y="44.4" width="254.4" height="13"/></clipPath><clipPath id="svgimg7ct4"><rect x="61" y="44.4" width="254.4" height="13"/></clipPath><clipPath id="svgimg7ct5"><rect x="437.6" y="29" width="65.4" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(34,43,48)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#svgimg7cp0)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg7svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg7svgic1)"><g transform="translate(37 35.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="61" y="41.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(138,203,255)">Draft not published</text><g clip-path="url(#svgimg7cp3)"><g clip-path="url(#svgimg7ct4)"><text x="61" y="55.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(138,203,255)">Changes are saved but only visible to your team.</text></g></g><rect x="437.6" y="29" width="65.4" height="28.8" rx="14.4" fill="rgba(28,28,30,0.52)"/><rect x="438.5" y="29.5" width="64" height="28" rx="13.9" fill="none" stroke="rgb(138,203,255)" stroke-width="1"/><text x="449.83" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(138,203,255)">Publish</text></g></g></g></g><text x="16" y="182" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Info with badge</text><g clip-path="url(#cp1)"><g clip-path="url(#irc9)"><clipPath id="svgimg10vclip"><rect x="16" y="192" width="560" height="116"/></clipPath><g clip-path="url(#svgimg10vclip)"><g transform="translate(16 192)"><defs><clipPath id="svgimg10cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg10ct2"><rect x="61" y="35.9" width="137.6" height="15"/></clipPath><clipPath id="svgimg10ct3"><rect x="206.6" y="33.4" width="20" height="20"/></clipPath><clipPath id="svgimg10ct4"><rect x="437.3" y="29" width="65.7" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(34,43,48)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#svgimg10cp0)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg10svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg10svgic1)"><g transform="translate(37 35.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="61" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(138,203,255)">Unanswered questions</text><rect x="206.6" y="33.4" width="20" height="20" rx="10" fill="rgb(138,203,255)"/><rect x="207.5" y="33.5" width="19" height="19" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="213.83" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(28,28,30)">1</text><rect x="437.3" y="29" width="65.7" height="28.8" rx="14.4" fill="rgba(28,28,30,0.52)"/><rect x="437.5" y="29.5" width="65" height="28" rx="13.9" fill="none" stroke="rgb(138,203,255)" stroke-width="1"/><text x="449.47" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(138,203,255)">Answer</text></g></g></g></g><text x="16" y="336" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Success</text><g clip-path="url(#cp2)"><g clip-path="url(#irc12)"><clipPath id="svgimg13vclip"><rect x="16" y="346" width="560" height="116"/></clipPath><g clip-path="url(#svgimg13vclip)"><g transform="translate(16 346)"><defs><clipPath id="svgimg13cp0"><rect x="37" y="35" width="16" height="16"/></clipPath><clipPath id="svgimg13ct2"><rect x="61" y="29" width="132.1" height="15"/></clipPath><clipPath id="svgimg13cp3"><rect x="61" y="44" width="259.7" height="13"/></clipPath><clipPath id="svgimg13ct4"><rect x="61" y="44" width="259.7" height="13"/></clipPath></defs><rect x="28" y="20" width="484" height="46" rx="12" fill="rgb(31,52,38)"/><rect x="28.5" y="20.5" width="483" height="45" rx="11.5" fill="none" stroke="rgb(40,113,59)" stroke-width="1"/><g clip-path="url(#svgimg13cp0)"><g color="rgb(99, 230, 133)"><clipPath id="svgimg13svgic1"><rect x="37" y="35" width="16" height="16"/></clipPath><g clip-path="url(#svgimg13svgic1)"><g transform="translate(37 35)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(99, 230, 133)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m16 9-5.5 5.5L8 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(99, 230, 133)" 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="61" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(99,230,133)">Deployment complete</text><g clip-path="url(#svgimg13cp3)"><g clip-path="url(#svgimg13ct4)"><text x="61" y="55" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(99,230,133)">production.example.com is serving the new build.</text></g></g></g></g></g></g><text x="16" y="490" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Warning</text><g clip-path="url(#cp3)"><g clip-path="url(#irc15)"><clipPath id="svgimg16vclip"><rect x="16" y="500" width="560" height="116"/></clipPath><g clip-path="url(#svgimg16vclip)"><g transform="translate(16 500)"><defs><clipPath id="svgimg16cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg16ct2"><rect x="61" y="29.4" width="166.1" height="15"/></clipPath><clipPath id="svgimg16cp3"><rect x="61" y="44.4" width="261" height="13"/></clipPath><clipPath id="svgimg16ct4"><rect x="61" y="44.4" width="261" height="13"/></clipPath><clipPath id="svgimg16ct5"><rect x="431.1" y="29" width="71.9" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(48,44,27)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(251,221,104)" stroke-width="1"/><g clip-path="url(#svgimg16cp0)"><g color="rgb(255, 216, 74)"><clipPath id="svgimg16svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg16svgic1)"><g transform="translate(37 35.39)scale(.66667)"><path d="m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 9v4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 17z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 216, 74)" 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="61" y="41.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(255,216,74)">Approaching your plan limit</text><g clip-path="url(#svgimg16cp3)"><g clip-path="url(#svgimg16ct4)"><text x="61" y="55.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(255,216,74)">You have used 92% of this month’s build minutes.</text></g></g><rect x="431.1" y="29" width="71.9" height="28.8" rx="14.4" fill="rgba(28,28,30,0.52)"/><rect x="431.5" y="29.5" width="71" height="28" rx="13.9" fill="none" stroke="rgb(255,216,74)" stroke-width="1"/><text x="443.28" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(255,216,74)">Upgrade</text></g></g></g></g><text x="16" y="644" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Danger (alert)</text><g clip-path="url(#cp4)"><g clip-path="url(#irc18)"><clipPath id="svgimg19vclip"><rect x="16" y="654" width="560" height="116"/></clipPath><g clip-path="url(#svgimg19vclip)"><g transform="translate(16 654)"><defs><clipPath id="svgimg19cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg19ct2"><rect x="61" y="29.4" width="67.5" height="15"/></clipPath><clipPath id="svgimg19cp3"><rect x="61" y="44.4" width="158.6" height="13"/></clipPath><clipPath id="svgimg19ct4"><rect x="61" y="44.4" width="158.6" height="13"/></clipPath><clipPath id="svgimg19ct5"><rect x="431.7" y="29" width="71.3" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(44,30,32)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(101,37,40)" stroke-width="1"/><g clip-path="url(#svgimg19cp0)"><g color="rgb(255, 160, 162)"><clipPath id="svgimg19svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg19svgic1)"><g transform="translate(37 35.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 160, 162)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 160, 162)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 160, 162)" 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="61" y="41.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(255,160,162)">Build failed</text><g clip-path="url(#svgimg19cp3)"><g clip-path="url(#svgimg19ct4)"><text x="61" y="55.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(255,160,162)">Step “test” exited with code 1.</text></g></g><rect x="431.7" y="29" width="71.3" height="28.8" rx="14.4" fill="rgba(28,28,30,0.52)"/><rect x="432.5" y="29.5" width="70" height="28" rx="13.9" fill="none" stroke="rgb(255,160,162)" stroke-width="1"/><text x="443.88" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(255,160,162)">View log</text></g></g></g></g></svg>

package/docs/design/templates/state-banner.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 592 786" width="592" height="786"><defs><clipPath id="cp0"><rect x="16" y="38" width="560" height="116"/></clipPath><clipPath id="cp1"><rect x="16" y="192" width="560" height="116"/></clipPath><clipPath id="cp2"><rect x="16" y="346" width="560" height="116"/></clipPath><clipPath id="cp3"><rect x="16" y="500" width="560" height="116"/></clipPath><clipPath id="cp4"><rect x="16" y="654" width="560" height="116"/></clipPath><clipPath id="ct5"><rect x="16" y="16" width="560" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="38" width="560" height="116" rx="0"/></clipPath><clipPath id="ct8"><rect x="16" y="170" width="560" height="22"/></clipPath><clipPath id="irc9"><rect x="16" y="192" width="560" height="116" rx="0"/></clipPath><clipPath id="ct11"><rect x="16" y="324" width="560" height="22"/></clipPath><clipPath id="irc12"><rect x="16" y="346" width="560" height="116" rx="0"/></clipPath><clipPath id="ct14"><rect x="16" y="478" width="560" height="22"/></clipPath><clipPath id="irc15"><rect x="16" y="500" width="560" height="116" rx="0"/></clipPath><clipPath id="ct17"><rect x="16" y="632" width="560" height="22"/></clipPath><clipPath id="irc18"><rect x="16" y="654" width="560" height="116" rx="0"/></clipPath></defs><rect x="0" y="0" width="592" height="786" 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)">Info</text><g clip-path="url(#cp0)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="38" width="560" height="116"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg7cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg7cp2"><rect x="61" y="44.4" width="368.6" height="13"/></clipPath><clipPath id="svgimg7ct3"><rect x="61" y="29.4" width="116.7" height="15"/></clipPath><clipPath id="svgimg7ct4"><rect x="61" y="44.4" width="368.6" height="13"/></clipPath><clipPath id="svgimg7ct5"><rect x="437.6" y="29" width="65.4" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(235,244,252)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(166,207,242)" stroke-width="1"/><g clip-path="url(#svgimg7cp0)"><g color="rgb(26, 93, 207)"><clipPath id="svgimg7svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg7svgic1)"><g transform="translate(37 35.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" 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="61" y="41.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(26,93,207)">Draft not published</text><g clip-path="url(#svgimg7cp2)"><g clip-path="url(#svgimg7ct4)"><text x="61" y="55.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(26,93,207)">Changes are saved but only visible to your team.</text></g></g><rect x="437.6" y="29" width="65.4" height="28.8" rx="14.4" fill="rgba(255,255,255,0.52)"/><rect x="438.5" y="29.5" width="64" height="28" rx="13.9" fill="none" stroke="rgb(26,93,207)" stroke-width="1"/><text x="449.83" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(26,93,207)">Publish</text></g></g></g></g><text x="16" y="182" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Info with badge</text><g clip-path="url(#cp1)"><g clip-path="url(#irc9)"><clipPath id="svgimg10vclip"><rect x="16" y="192" width="560" height="116"/></clipPath><g clip-path="url(#svgimg10vclip)"><g transform="translate(16 192)"><defs><clipPath id="svgimg10cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg10ct2"><rect x="61" y="35.9" width="137.6" height="15"/></clipPath><clipPath id="svgimg10ct3"><rect x="206.6" y="33.4" width="20" height="20"/></clipPath><clipPath id="svgimg10ct4"><rect x="437.3" y="29" width="65.7" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(235,244,252)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(166,207,242)" stroke-width="1"/><g clip-path="url(#svgimg10cp0)"><g color="rgb(26, 93, 207)"><clipPath id="svgimg10svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg10svgic1)"><g transform="translate(37 35.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" 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="61" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(26,93,207)">Unanswered questions</text><rect x="206.6" y="33.4" width="20" height="20" rx="10" fill="rgb(26,93,207)"/><rect x="207.5" y="33.5" width="19" height="19" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="213.83" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(255,255,255)">1</text><rect x="437.3" y="29" width="65.7" height="28.8" rx="14.4" fill="rgba(255,255,255,0.52)"/><rect x="437.5" y="29.5" width="65" height="28" rx="13.9" fill="none" stroke="rgb(26,93,207)" stroke-width="1"/><text x="449.47" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(26,93,207)">Answer</text></g></g></g></g><text x="16" y="336" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Success</text><g clip-path="url(#cp2)"><g clip-path="url(#irc12)"><clipPath id="svgimg13vclip"><rect x="16" y="346" width="560" height="116"/></clipPath><g clip-path="url(#svgimg13vclip)"><g transform="translate(16 346)"><defs><clipPath id="svgimg13cp0"><rect x="37" y="35" width="16" height="16"/></clipPath><clipPath id="svgimg13cp2"><rect x="61" y="44" width="434" height="13"/></clipPath><clipPath id="svgimg13ct3"><rect x="61" y="29" width="132.1" height="15"/></clipPath><clipPath id="svgimg13ct4"><rect x="61" y="44" width="434" height="13"/></clipPath></defs><rect x="28" y="20" width="484" height="46" rx="12" fill="rgb(227,247,232)"/><rect x="28.5" y="20.5" width="483" height="45" rx="11.5" fill="none" stroke="rgb(154,227,172)" stroke-width="1"/><g clip-path="url(#svgimg13cp0)"><g color="rgb(0, 121, 44)"><clipPath id="svgimg13svgic1"><rect x="37" y="35" width="16" height="16"/></clipPath><g clip-path="url(#svgimg13svgic1)"><g transform="translate(37 35)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(0, 121, 44)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m16 9-5.5 5.5L8 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(0, 121, 44)" 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="61" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(0,121,44)">Deployment complete</text><g clip-path="url(#svgimg13cp2)"><g clip-path="url(#svgimg13ct4)"><text x="61" y="55" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(0,121,44)">production.example.com is serving the new build.</text></g></g></g></g></g></g><text x="16" y="490" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Warning</text><g clip-path="url(#cp3)"><g clip-path="url(#irc15)"><clipPath id="svgimg16vclip"><rect x="16" y="500" width="560" height="116"/></clipPath><g clip-path="url(#svgimg16vclip)"><g transform="translate(16 500)"><defs><clipPath id="svgimg16cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg16cp2"><rect x="61" y="44.4" width="362.1" height="13"/></clipPath><clipPath id="svgimg16ct3"><rect x="61" y="29.4" width="166.1" height="15"/></clipPath><clipPath id="svgimg16ct4"><rect x="61" y="44.4" width="362.1" height="13"/></clipPath><clipPath id="svgimg16ct5"><rect x="431.1" y="29" width="71.9" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(255,250,232)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(160,131,13)" stroke-width="1"/><g clip-path="url(#svgimg16cp0)"><g color="rgb(143, 94, 0)"><clipPath id="svgimg16svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg16svgic1)"><g transform="translate(37 35.39)scale(.66667)"><path d="m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(143, 94, 0)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 9v4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(143, 94, 0)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 17z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(143, 94, 0)" 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="61" y="41.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(143,94,0)">Approaching your plan limit</text><g clip-path="url(#svgimg16cp2)"><g clip-path="url(#svgimg16ct4)"><text x="61" y="55.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(143,94,0)">You have used 92% of this month’s build minutes.</text></g></g><rect x="431.1" y="29" width="71.9" height="28.8" rx="14.4" fill="rgba(255,255,255,0.52)"/><rect x="431.5" y="29.5" width="71" height="28" rx="13.9" fill="none" stroke="rgb(143,94,0)" stroke-width="1"/><text x="443.28" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(143,94,0)">Upgrade</text></g></g></g></g><text x="16" y="644" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Danger (alert)</text><g clip-path="url(#cp4)"><g clip-path="url(#irc18)"><clipPath id="svgimg19vclip"><rect x="16" y="654" width="560" height="116"/></clipPath><g clip-path="url(#svgimg19vclip)"><g transform="translate(16 654)"><defs><clipPath id="svgimg19cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg19cp2"><rect x="61" y="44.4" width="362.7" height="13"/></clipPath><clipPath id="svgimg19ct3"><rect x="61" y="29.4" width="67.5" height="15"/></clipPath><clipPath id="svgimg19ct4"><rect x="61" y="44.4" width="362.7" height="13"/></clipPath><clipPath id="svgimg19ct5"><rect x="431.7" y="29" width="71.3" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(254,237,238)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(249,173,175)" stroke-width="1"/><g clip-path="url(#svgimg19cp0)"><g color="rgb(194, 11, 32)"><clipPath id="svgimg19svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg19svgic1)"><g transform="translate(37 35.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 11, 32)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 11, 32)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 11, 32)" 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="61" y="41.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(194,11,32)">Build failed</text><g clip-path="url(#svgimg19cp2)"><g clip-path="url(#svgimg19ct4)"><text x="61" y="55.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(194,11,32)">Step “test” exited with code 1.</text></g></g><rect x="431.7" y="29" width="71.3" height="28.8" rx="14.4" fill="rgba(255,255,255,0.52)"/><rect x="432.5" y="29.5" width="70" height="28" rx="13.9" fill="none" stroke="rgb(194,11,32)" stroke-width="1"/><text x="443.88" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,11,32)">View log</text></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 592 786" width="592" height="786"><defs><clipPath id="cp0"><rect x="16" y="38" width="560" height="116"/></clipPath><clipPath id="cp1"><rect x="16" y="192" width="560" height="116"/></clipPath><clipPath id="cp2"><rect x="16" y="346" width="560" height="116"/></clipPath><clipPath id="cp3"><rect x="16" y="500" width="560" height="116"/></clipPath><clipPath id="cp4"><rect x="16" y="654" width="560" height="116"/></clipPath><clipPath id="ct5"><rect x="16" y="16" width="560" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="38" width="560" height="116" rx="0"/></clipPath><clipPath id="ct8"><rect x="16" y="170" width="560" height="22"/></clipPath><clipPath id="irc9"><rect x="16" y="192" width="560" height="116" rx="0"/></clipPath><clipPath id="ct11"><rect x="16" y="324" width="560" height="22"/></clipPath><clipPath id="irc12"><rect x="16" y="346" width="560" height="116" rx="0"/></clipPath><clipPath id="ct14"><rect x="16" y="478" width="560" height="22"/></clipPath><clipPath id="irc15"><rect x="16" y="500" width="560" height="116" rx="0"/></clipPath><clipPath id="ct17"><rect x="16" y="632" width="560" height="22"/></clipPath><clipPath id="irc18"><rect x="16" y="654" width="560" height="116" rx="0"/></clipPath></defs><rect x="0" y="0" width="592" height="786" 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)">Info</text><g clip-path="url(#cp0)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="38" width="560" height="116"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg7cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg7ct2"><rect x="61" y="29.4" width="116.7" height="15"/></clipPath><clipPath id="svgimg7cp3"><rect x="61" y="44.4" width="254.4" height="13"/></clipPath><clipPath id="svgimg7ct4"><rect x="61" y="44.4" width="254.4" height="13"/></clipPath><clipPath id="svgimg7ct5"><rect x="437.6" y="29" width="65.4" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(235,244,252)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(166,207,242)" stroke-width="1"/><g clip-path="url(#svgimg7cp0)"><g color="rgb(26, 93, 207)"><clipPath id="svgimg7svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg7svgic1)"><g transform="translate(37 35.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" 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="61" y="41.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(26,93,207)">Draft not published</text><g clip-path="url(#svgimg7cp3)"><g clip-path="url(#svgimg7ct4)"><text x="61" y="55.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(26,93,207)">Changes are saved but only visible to your team.</text></g></g><rect x="437.6" y="29" width="65.4" height="28.8" rx="14.4" fill="rgba(255,255,255,0.52)"/><rect x="438.5" y="29.5" width="64" height="28" rx="13.9" fill="none" stroke="rgb(26,93,207)" stroke-width="1"/><text x="449.83" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(26,93,207)">Publish</text></g></g></g></g><text x="16" y="182" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Info with badge</text><g clip-path="url(#cp1)"><g clip-path="url(#irc9)"><clipPath id="svgimg10vclip"><rect x="16" y="192" width="560" height="116"/></clipPath><g clip-path="url(#svgimg10vclip)"><g transform="translate(16 192)"><defs><clipPath id="svgimg10cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg10ct2"><rect x="61" y="35.9" width="137.6" height="15"/></clipPath><clipPath id="svgimg10ct3"><rect x="206.6" y="33.4" width="20" height="20"/></clipPath><clipPath id="svgimg10ct4"><rect x="437.3" y="29" width="65.7" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(235,244,252)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(166,207,242)" stroke-width="1"/><g clip-path="url(#svgimg10cp0)"><g color="rgb(26, 93, 207)"><clipPath id="svgimg10svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg10svgic1)"><g transform="translate(37 35.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" 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="61" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(26,93,207)">Unanswered questions</text><rect x="206.6" y="33.4" width="20" height="20" rx="10" fill="rgb(26,93,207)"/><rect x="207.5" y="33.5" width="19" height="19" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="213.83" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(255,255,255)">1</text><rect x="437.3" y="29" width="65.7" height="28.8" rx="14.4" fill="rgba(255,255,255,0.52)"/><rect x="437.5" y="29.5" width="65" height="28" rx="13.9" fill="none" stroke="rgb(26,93,207)" stroke-width="1"/><text x="449.47" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(26,93,207)">Answer</text></g></g></g></g><text x="16" y="336" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Success</text><g clip-path="url(#cp2)"><g clip-path="url(#irc12)"><clipPath id="svgimg13vclip"><rect x="16" y="346" width="560" height="116"/></clipPath><g clip-path="url(#svgimg13vclip)"><g transform="translate(16 346)"><defs><clipPath id="svgimg13cp0"><rect x="37" y="35" width="16" height="16"/></clipPath><clipPath id="svgimg13ct2"><rect x="61" y="29" width="132.1" height="15"/></clipPath><clipPath id="svgimg13cp3"><rect x="61" y="44" width="259.7" height="13"/></clipPath><clipPath id="svgimg13ct4"><rect x="61" y="44" width="259.7" height="13"/></clipPath></defs><rect x="28" y="20" width="484" height="46" rx="12" fill="rgb(227,247,232)"/><rect x="28.5" y="20.5" width="483" height="45" rx="11.5" fill="none" stroke="rgb(154,227,172)" stroke-width="1"/><g clip-path="url(#svgimg13cp0)"><g color="rgb(0, 121, 44)"><clipPath id="svgimg13svgic1"><rect x="37" y="35" width="16" height="16"/></clipPath><g clip-path="url(#svgimg13svgic1)"><g transform="translate(37 35)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(0, 121, 44)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m16 9-5.5 5.5L8 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(0, 121, 44)" 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="61" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(0,121,44)">Deployment complete</text><g clip-path="url(#svgimg13cp3)"><g clip-path="url(#svgimg13ct4)"><text x="61" y="55" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(0,121,44)">production.example.com is serving the new build.</text></g></g></g></g></g></g><text x="16" y="490" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Warning</text><g clip-path="url(#cp3)"><g clip-path="url(#irc15)"><clipPath id="svgimg16vclip"><rect x="16" y="500" width="560" height="116"/></clipPath><g clip-path="url(#svgimg16vclip)"><g transform="translate(16 500)"><defs><clipPath id="svgimg16cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg16ct2"><rect x="61" y="29.4" width="166.1" height="15"/></clipPath><clipPath id="svgimg16cp3"><rect x="61" y="44.4" width="261" height="13"/></clipPath><clipPath id="svgimg16ct4"><rect x="61" y="44.4" width="261" height="13"/></clipPath><clipPath id="svgimg16ct5"><rect x="431.1" y="29" width="71.9" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(255,250,232)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(160,131,13)" stroke-width="1"/><g clip-path="url(#svgimg16cp0)"><g color="rgb(143, 94, 0)"><clipPath id="svgimg16svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg16svgic1)"><g transform="translate(37 35.39)scale(.66667)"><path d="m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(143, 94, 0)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 9v4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(143, 94, 0)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 17z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(143, 94, 0)" 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="61" y="41.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(143,94,0)">Approaching your plan limit</text><g clip-path="url(#svgimg16cp3)"><g clip-path="url(#svgimg16ct4)"><text x="61" y="55.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(143,94,0)">You have used 92% of this month’s build minutes.</text></g></g><rect x="431.1" y="29" width="71.9" height="28.8" rx="14.4" fill="rgba(255,255,255,0.52)"/><rect x="431.5" y="29.5" width="71" height="28" rx="13.9" fill="none" stroke="rgb(143,94,0)" stroke-width="1"/><text x="443.28" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(143,94,0)">Upgrade</text></g></g></g></g><text x="16" y="644" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Danger (alert)</text><g clip-path="url(#cp4)"><g clip-path="url(#irc18)"><clipPath id="svgimg19vclip"><rect x="16" y="654" width="560" height="116"/></clipPath><g clip-path="url(#svgimg19vclip)"><g transform="translate(16 654)"><defs><clipPath id="svgimg19cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg19ct2"><rect x="61" y="29.4" width="67.5" height="15"/></clipPath><clipPath id="svgimg19cp3"><rect x="61" y="44.4" width="158.6" height="13"/></clipPath><clipPath id="svgimg19ct4"><rect x="61" y="44.4" width="158.6" height="13"/></clipPath><clipPath id="svgimg19ct5"><rect x="431.7" y="29" width="71.3" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(254,237,238)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(249,173,175)" stroke-width="1"/><g clip-path="url(#svgimg19cp0)"><g color="rgb(194, 11, 32)"><clipPath id="svgimg19svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg19svgic1)"><g transform="translate(37 35.39)scale(.66667)"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 11, 32)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 11, 32)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 11, 32)" 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="61" y="41.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(194,11,32)">Build failed</text><g clip-path="url(#svgimg19cp3)"><g clip-path="url(#svgimg19ct4)"><text x="61" y="55.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(194,11,32)">Step “test” exited with code 1.</text></g></g><rect x="431.7" y="29" width="71.3" height="28.8" rx="14.4" fill="rgba(255,255,255,0.52)"/><rect x="432.5" y="29.5" width="70" height="28" rx="13.9" fill="none" stroke="rgb(194,11,32)" stroke-width="1"/><text x="443.88" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(194,11,32)">View log</text></g></g></g></g></svg>

package/docs/document-baseline.md

@@ -25,6 +25,10 @@ height shell. Ordinary document-flow pages can import the baseline without the
 class. Do not put `.kui-app-root` on several sibling containers: each requests
 the full available document height.
 
+`kui-app-root` is the public class of the component catalog's
+`document-baseline` entry, so `kerf-ui-doctor` and the
+`kerfjs/ui-public-boundaries` ESLint rule accept it (no KUI-L101 finding).
+
 The stylesheet is intentionally absent from `@kerfjs/ui/styles.css` and every
 component browser import because its global selectors would otherwise change
 consumer documents implicitly. Import it once and load application overrides

package/docs/layout.md

@@ -96,6 +96,11 @@ also keeps 8px of root-scaled block padding independently of its semantic inline
 inset. Most interactive rows and toolbar groups are 44px tall.
 Toolbar groups reserve a real 1px outer border around a 42px inner area, even
 when their border and background are transparent.
+A `Toolbar` lays its zones out against one 44px control band at its top: an
+item no taller than the band is centered in it by its own size, and a taller
+item (a wrapped title, a second trailing row) starts at the band's top and
+grows down, so it never moves the other controls. A wrapped `ToolbarText`
+centers its first line in the band.
 Trailing icon actions share one axis: a toolbar control centers its glyph in
 that 44px slot at the 8px inline margin, and a `ListHeader` action centers its
 fitted 36px square in a slot of the same size (a transparent hit layer extends
@@ -153,7 +158,11 @@ document content, not toolbar identity: use `Text` with the `h2`–`h6` variant
 the outline calls for (inside a `List` with `controlInsets`, its text lines up
 with content items). Use `ListHeader` when the section is a list or menu group
 that needs a count, badge, action, or disclosure, and keep extra-large
-`ToolbarText` for the panel, dialog, or page title.
+`ToolbarText` for the panel, dialog, or page title. A narrow peripheral rail or
+drawer is the exception that proves the rule: beside a work area that already
+carries the extra-large title, its header names the pane with the default size,
+because extra-large would truncate there ("Inspector" becomes "Ins…" in a 160px
+rail) and pane identity should stay quiet.
 
 Presentation is independent of the native element: use `tone="quiet"` for
 supporting copy, `tone="danger"` for error or validation copy, `size="compact"`

package/docs/recipes.md

@@ -9,9 +9,9 @@ ship no stylesheet of their own and are not new monolithic components.
 Copy the recipe source together with the catalog-independent
 [`mount-recipe.ts`](../ux-demo/recipes/mount-recipe.ts) adapter. It mounts the
 controller at one stable application root, uses `delegateActions()` for recipe
-commands, forwards form and dialog lifecycle events, wires resize commits with
-the public `onCommit` callback, retains every disposer, and returns one
-idempotent disposer:
+commands, forwards form and dialog lifecycle events, runs the recipe's own
+`wire()` (for example `wireWorkbench` or `wireSidebar`), retains every
+disposer, and returns one idempotent disposer:
 
 ```ts
 import { createRecipe } from "./navigation-sidebar.js";
@@ -31,24 +31,26 @@ specific dispatch; either way, wire once at a stable root and retain disposal.
 [Open the recipe](../ux-demo/?component=recipe-app-shell) · [TSX source](../ux-demo/recipes/app-shell.tsx)
 
 A filling `List` (`fill`, with the recipe's `data-*` markers through
-`rootAttributes`) stacks the app-bar `Toolbar` above a `Row` that places
-controlled `ResizableRegion` navigation and inspector panes around a content
-`Pane` that a one-column `Grid` grows to fill. Each region's lone `Pane` fills
-the region's full height, so it reaches the bottom edge the separator does.
-Only those three real panes own a
-`.kui-pane__content` scroll owner; no frame `Pane` wraps the layout in a scroll
-owner that never scrolls. Each pane lists the screen edges it reaches in
-`safeAreaEdges` (the bottom plus its outer side, or both sides when it is the
-only pane shown), and the app-bar `Toolbar` claims the top edge and both sides
-with its own `safeAreaEdges`, so it clears the status area. Below desktop sizes the app reads `deviceClass()` and shows one
-pane at a time, switched by a pressed-state `ToolbarControlGroup`. The recipe
-owns the shell topology; the app owns routing, responsive pane visibility,
-sizes, persistence, and data.
-Keep each visible pane's collapse action in its own toolbar. Once hidden, put
-its restore action in the adjacent main toolbar on the same logical edge:
-leading for an inline-start sidebar and trailing for an inline-end inspector.
-Collapse the pane completely rather than preserving an empty icon rail.
-Adapt only public `--kui-layout-*` and component variables.
+`rootAttributes`) stacks the app-bar `Toolbar` above a `Workbench`
+(`@kerfjs/ui/workbench`): resizable navigation and inspector rails around the
+task list. Each rail composes its own panel toolbar — a default-size title and
+the standard hide toggle — and the work area's `mainToolbar` carries the xl
+view title. While a rail is hidden, `Workbench` relocates its show toggle into
+the work-area toolbar on the same logical edge (leading for the navigation
+rail, trailing for the inspector), and `wireWorkbench` hands focus between the
+two positions. Collapse a rail completely rather than preserving an empty icon
+rail. Only the three real panes own a `.kui-pane__content` scroll owner; no
+frame `Pane` wraps the layout in a scroll owner that never scrolls, and the
+app-bar `Toolbar` claims the top edge and both sides with its own
+`safeAreaEdges`.
+
+On a narrow container the rails overlay the task list one at a time instead of
+squeezing it, leaving a 44px strip on the far side that dismisses the overlay
+(`responsiveOverlayAt`, on by default; `compactOverlay: 'full'` covers the
+whole width). The app owns each rail's collapsed and size signals — which
+`wireWorkbench` keeps in sync with resizing and overlay dismissal — plus
+routing, persistence, and data. Adapt only public `--kui-layout-*` and
+component variables.
 
 ## Navigation sidebar
 
@@ -75,19 +77,23 @@ controls relocate without changing focus order.
 
 [Open the recipe](../ux-demo/?component=recipe-list-detail-dialog) · [TSX source](../ux-demo/recipes/list-detail-dialog.tsx)
 
-The production Web Awesome dialog owns modal focus, Escape, its labeled header,
-and its close control; the thin recipe adapter restores the invoking control
-after the hide event. `DialogSurface` chooses the large modal with no body
-inset, because `SplitView` and its rows own list geometry, and a comfortable
-footer inset for the record actions. On roomy devices `SplitView` shows the
-project list beside its detail; each pane opens with a `ListHeader` on one
-shared line, and the dialog title, both headers, and the list text share the
-17px text edge while the `ValueTable` keeps the 8px outer margin. On compact
-devices the dialog becomes a full-screen sheet and `SplitView` becomes a
+A list-detail dialog is laid out like a `Workbench` with a left sidebar: on
+roomy devices the list is a full-height sidebar and the detail is a full-height
+main column, each a `Pane` with its own top `Toolbar`. The sidebar's toolbar
+carries its quiet default-size title (and it may add a bottom toolbar for
+sidebar-only actions); the main column's toolbar carries the dialog's primary
+extra-large title and the close control, and its footer carries the record
+actions. The Web Awesome dialog therefore renders `without-header` there —
+its label still names the modal — and the close button uses
+`data-dialog="close"`. Web Awesome keeps modal focus and Escape, and the thin
+recipe adapter restores the invoking control after the hide event.
+`DialogSurface` chooses the large modal with no body inset, because the panes
+own their geometry. On compact devices the dialog becomes a full-screen sheet
+with its own labeled header and footer actions, and `SplitView` becomes a
 `NavStack` drill-down whose back control the application pops. The
 application owns open state, selection, the pushed detail, dismissal policy,
-and record actions. Do not rebuild the dialog or reach into private shadow
-parts.
+and record actions. Do not put the primary title in a header spanning both
+columns, rebuild the dialog, or reach into private shadow parts.
 
 ## Composer form
 
@@ -162,13 +168,16 @@ which values are still unknown.
 
 A mini app frame whose left navigation rail and bottom activity drawer are
 standalone `CollapsiblePanel`s (`@kerfjs/ui/collapsible-panel`) driven by
-`wireSidebar` (`@kerfjs/ui/wire-sidebar`). `CollapsiblePanelToggle` supplies the
-standard per-side glyph: a collapse toggle lives inside each panel, and the
-panel's expand toggle shows only while it is collapsed, so exactly one control
-owns each action and a collapsed panel is still reachable. The rail's expand
-toggle sits in the always-visible main header; the drawer's floats in a
-`FloatingToolbar` at the bottom edge the drawer opens from, next to where the
-action happens. `wireSidebar` owns the toggle delegation, moves focus into a
+`wireSidebar` (`@kerfjs/ui/wire-sidebar`). Each panel takes a `toolbar` — a
+title plus the standard per-side toggle — so the hide control lives in the
+panel's own header, and `CollapsiblePanelRelocated` renders the matching show
+control only while the panel is collapsed, so exactly one control owns each
+action and a collapsed panel is still reachable. The rail's relocated toggle
+leads the always-visible main header; the drawer's sits in a
+`FloatingToolbar` passed as the drawer's own `restoreControl`, which the panel
+floats in its column's safe-area-aware bottom-end corner, next to where the
+drawer opens — do not hand-roll a conditional floating control beside the
+panel. `wireSidebar` owns the toggle delegation, moves focus into a
 panel on open, restores it on close (to the trigger, or to the panel's expand toggle when
 the trigger sits inside the collapsed panel), and — when a `deviceClass()` reports
 `compact` — presents the panels as a dismissable **overlay** (backdrop, Escape

package/docs/surface-scaffold.md

@@ -18,7 +18,7 @@ padding and aligns with bordered siblings. Reserve `compact` or `comfortable`
 body insets for exceptional content that does not already have list/content-item
 geometry.
 
-Wrap one `wa-dropdown` with `PopupSurface`. `inset="list-zero"` removes menu
+Wrap one `PopupMenu` (or another single `wa-dropdown`) with `PopupSurface`. `inset="list-zero"` removes menu
 padding for a child that already owns row insets, `compact` uses 4px, and
 `standard` uses the shared 8px surface inset. Keep the dropdown trigger named and
 preserve `data-morph-skip-children` when its upgraded light-DOM items must retain

package/docs/type-contracts.md

@@ -69,7 +69,8 @@ ordinary source/type gates:
   `FloatingToolbar`, `Pane`, `ResizableRegion`, `SegmentedControl`, `StateBanner`,
   `SunkenPanel`, `ToolbarText`, `CollapsiblePanel`, `Catalog`, and the wire helpers;
 - required controlled-state callbacks on `wireResizableRegions`, `wireTabBars`,
-  and `wireTabScaffold`;
+  and `wireTabScaffold`, and the required app-owned size signals on
+  `wireWorkbench`;
 - mutually exclusive count/badge metadata on `ListHeader`; and
 - protected application metadata boundaries on `AppTab`, `ListItem`,
   `ListActionRow`, `ListHeader`, `Pane`, `CatalogExample`, and

package/docs/ui-analyzer.md

@@ -55,25 +55,26 @@ policy, or analysis inputs to the containing application.
 
 ## Diagnostics and exit behavior
 
-| Rule       | Kind   | Meaning                                                           |
-| ---------- | ------ | ----------------------------------------------------------------- |
-| `KUI-L001` | error  | A stylesheet reaches into a private or unknown `.kui-*` selector. |
-| `KUI-L002` | error  | A stylesheet references an unknown or private `--kui-*` token.    |
-| `KUI-L003` | error  | One element combines public classes that claim the same geometry. |
-| `KUI-L004` | review | Nested literal classes both add a content inset.                  |
-| `KUI-L005` | review | Consumer CSS forces a public component's dimensions.              |
-| `KUI-L006` | review | Literal spacing falls outside Kerf's approved scale.              |
-| `KUI-L007` | error  | A declared scroll owner is nested inside another scroll owner.    |
-| `KUI-L008` | review | A dynamic class expression cannot be classified soundly.          |
-| `KUI-L009` | error  | A stylesheet cannot be parsed.                                    |
-| `KUI-L010` | error  | A selector reaches a private Kerf descendant from a public root.  |
-| `KUI-L011` | error  | A `::part()` target is not cataloged as a public extension point. |
-| `KUI-L012` | error  | CSS assigns a Kerf token without a public configuration contract. |
-| `KUI-L013` | error  | A CSS-adjacent prop uses an unknown shorthand or raw literal.     |
-| `KUI-L014` | error  | A typed helper produces the wrong property grammar.               |
-| `KUI-L015` | error  | An expression-only helper is passed without a composer.           |
-| `KUI-L016` | error  | A removed declaration-list escape hatch is used.                  |
-| `KUI-L017` | review | A valid but exceptional off-scale shorthand needs justification.  |
+| Rule       | Kind   | Meaning                                                                               |
+| ---------- | ------ | ------------------------------------------------------------------------------------- |
+| `KUI-L001` | error  | A stylesheet reaches into a private or unknown `.kui-*` selector.                     |
+| `KUI-L002` | error  | A stylesheet references an unknown or private `--kui-*` token.                        |
+| `KUI-L003` | error  | One element combines public classes that claim the same geometry.                     |
+| `KUI-L004` | review | Nested literal classes both add a content inset.                                      |
+| `KUI-L005` | review | Consumer CSS forces a public component's dimensions.                                  |
+| `KUI-L006` | review | Literal spacing falls outside Kerf's approved scale.                                  |
+| `KUI-L007` | error  | A declared scroll owner is nested inside another scroll owner.                        |
+| `KUI-L008` | review | A dynamic class expression cannot be classified soundly.                              |
+| `KUI-L009` | error  | A stylesheet cannot be parsed.                                                        |
+| `KUI-L010` | error  | A selector reaches a private Kerf descendant from a public root.                      |
+| `KUI-L011` | error  | A `::part()` target is not cataloged as a public extension point.                     |
+| `KUI-L012` | error  | CSS assigns a Kerf token without a public configuration contract.                     |
+| `KUI-L013` | error  | A CSS-adjacent prop uses an unknown shorthand or raw literal.                         |
+| `KUI-L014` | error  | A typed helper produces the wrong property grammar.                                   |
+| `KUI-L015` | error  | An expression-only helper is passed without a composer.                               |
+| `KUI-L016` | error  | A removed declaration-list escape hatch is used.                                      |
+| `KUI-L017` | review | A valid but exceptional off-scale shorthand needs justification.                      |
+| `KUI-L018` | review | A loud fill override lacks a governing `on-loud`, or the literal pair is below 4.5:1. |
 
 Errors are provable contract violations and make the command exit 1. Review
 findings are deliberately heuristic and do not fail by default; pass
@@ -102,6 +103,80 @@ uses that same metadata for direct component calls and JSX, including nested
 paths such as `choices[].color`; consumer catalogs receive identical checks.
 Dynamic values remain a type-system responsibility rather than being guessed.
 
+## Loud fill / on-loud pairing (`KUI-L018`)
+
+The shipped Web Awesome theme pairs every `--wa-color-{tone}-fill-loud` with a
+`--wa-color-{tone}-on-loud` foreground that clears WCAG AA (4.5:1), for the
+`neutral`, `brand`, `success`, `warning`, `danger`, and `pop` tones. A
+stylesheet that overrides a loud fill without also setting that tone's
+`on-loud` keeps the theme's foreground on an unknown fill, so the guarantee no
+longer holds. `KUI-L018` reports such a fill and names each scope that lacks a
+pair, and it reports a pair that is present but measurably fails.
+
+**Which `on-loud` governs a fill.** Each individual selector of the fill
+(after resolving CSS nesting and splitting selector lists) inside its chain of
+at-rules is one scope. An `on-loud` of the same tone governs it when declared:
+
+- in the same scope, in the same or a separate rule, in either order; or
+- in an ancestor scope: a document-root selector (`:root`, `html`, `:host`,
+  `*`), or the leading part of a descendant or child chain (`.shell` governs
+  `.shell .panel` and `.frame > .tile`, but not `.shell-alt .panel` or
+  `.shell.dense`); and
+- under no at-rule, or the same at-rule chain (an unconditional `on-loud`
+  applies inside `@media`, but one under `@media` or `@supports` is not proven
+  to apply to an unconditional fill).
+
+That `on-loud` may live in the same stylesheet or in another one the same
+entry loads: a source module that imports both stylesheets, or a stylesheet
+that reaches both through `@import`. A stylesheet no entry loads with the fill
+does not count. When several candidates apply, the same scope wins (this
+stylesheet first), then the nearest ancestor.
+
+**Contrast, when it can be proven.** When the fill and its governing `on-loud`
+are both literal opaque colors (hex, `rgb()`/`rgba()`, `hsl()`/`hsla()`,
+`white`/`black`, or a `light-dark()` of two of them), the analyzer computes the
+WCAG contrast ratio in each color scheme and reports a pair below 4.5:1, with
+the ratio and scheme in its evidence. An unpaired literal fill is accepted when
+it clears 4.5:1 in both schemes against the theme's default `on-loud` for its
+tone (`light-dark(#fff, #111113)` for `brand` and `danger`, `#1d1d1f` for
+`success` and `warning`); `neutral` follows a surface token and `pop` has no
+Web Awesome default, so their unpaired fills are always reported. Values it
+cannot prove (`var()`, `color-mix()`, translucent colors, keywords) are not
+measured: a present pair is accepted, and an unpaired fill is reported.
+
+```css
+/* KUI-L018: brand fill moves, its foreground does not. */
+.billing {
+  --wa-color-brand-fill-loud: #7540a8;
+}
+
+/* Paired: both in the same scope. */
+.billing {
+  --wa-color-brand-fill-loud: #7540a8;
+  --wa-color-brand-on-loud: #ffffff;
+}
+
+/* Paired through an ancestor scope (6.87:1). */
+:root {
+  --wa-color-brand-on-loud: #ffffff;
+}
+.billing {
+  --wa-color-brand-fill-loud: #7540a8;
+}
+
+/* KUI-L018: present, but white on this fill measures 2.14:1. */
+.billing {
+  --wa-color-brand-fill-loud: #7fb3ff;
+  --wa-color-brand-on-loud: #ffffff;
+}
+```
+
+It is a review finding rather than an error because the analyzer cannot see
+every cascade: an `on-loud` set inline, by script, or by a stylesheet it does
+not analyze may still govern the fill. Set the `on-loud` explicitly beside the
+fill, which also documents the pair; use `--fail-on-review` to gate it in CI.
+See [the Web Awesome theme customization notes](./webawesome-theme.md#customization).
+
 The JSON report schema is exported as
 `@kerfjs/ui/analyzer/report.schema.json`.
 

package/docs/ui-doctor.md

@@ -24,6 +24,12 @@ exceptional but valid spacing choice in the review queue. The ESLint and
 analyzer stages share these ids, so the normalized report can be consumed as
 one repair loop without tool-specific translations.
 
+The analyzer stage also reads consumer stylesheets for theme overrides:
+`KUI-L018` is a review finding for a `--wa-color-{tone}-fill-loud` override
+that lacks a governing `--wa-color-{tone}-on-loud` (in the same or an ancestor
+scope, in any stylesheet the same entry loads), or whose literal pair measures
+below 4.5:1 (see [the analyzer rule](./ui-analyzer.md#loud-fill--on-loud-pairing-kui-l018)).
+
 The browser evaluator is different: it runs the application and is disabled by default. It only runs when configuration supplies `browser.url` or the command receives `--browser-url`. Start and authorize the target application separately.
 
 An unavailable or failed stage does not prevent independent stages from reporting. Its final exit is still a configuration failure, so a partial run cannot appear clean.