@kerfjs/ui 5.0.0-beta.95 → 5.0.0-beta.96

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="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>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 592 940" width="592" height="940"><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="cp5"><rect x="16" y="808" width="560" height="116"/></clipPath><clipPath id="ct6"><rect x="16" y="16" width="560" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="38" width="560" height="116" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="170" width="560" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="192" width="560" height="116" rx="0"/></clipPath><clipPath id="ct12"><rect x="16" y="324" width="560" height="22"/></clipPath><clipPath id="irc13"><rect x="16" y="346" width="560" height="116" rx="0"/></clipPath><clipPath id="ct15"><rect x="16" y="478" width="560" height="22"/></clipPath><clipPath id="irc16"><rect x="16" y="500" width="560" height="116" rx="0"/></clipPath><clipPath id="ct18"><rect x="16" y="632" width="560" height="22"/></clipPath><clipPath id="irc19"><rect x="16" y="654" width="560" height="116" rx="0"/></clipPath><clipPath id="ct21"><rect x="16" y="786" width="560" height="22"/></clipPath><clipPath id="irc22"><rect x="16" y="808" width="560" height="116" rx="0"/></clipPath></defs><rect x="0" y="0" width="592" height="940" 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(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="38" width="560" height="116"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg8cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg8ct2"><rect x="61" y="29.4" width="116.7" height="15"/></clipPath><clipPath id="svgimg8cp3"><rect x="61" y="44.4" width="254.4" height="13"/></clipPath><clipPath id="svgimg8ct4"><rect x="61" y="44.4" width="254.4" height="13"/></clipPath><clipPath id="svgimg8ct5"><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(#svgimg8cp0)"><g color="rgb(26, 93, 207)"><clipPath id="svgimg8svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg8svgic1)"><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(#svgimg8cp3)"><g clip-path="url(#svgimg8ct4)"><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(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="192" width="560" height="116"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 192)"><defs><clipPath id="svgimg11cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg11ct2"><rect x="61" y="35.9" width="137.6" height="15"/></clipPath><clipPath id="svgimg11ct3"><rect x="206.6" y="33.4" width="20" height="20"/></clipPath><clipPath id="svgimg11ct4"><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(#svgimg11cp0)"><g color="rgb(26, 93, 207)"><clipPath id="svgimg11svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg11svgic1)"><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(#irc13)"><clipPath id="svgimg14vclip"><rect x="16" y="346" width="560" height="116"/></clipPath><g clip-path="url(#svgimg14vclip)"><g transform="translate(16 346)"><defs><clipPath id="svgimg14cp0"><rect x="37" y="35" width="16" height="16"/></clipPath><clipPath id="svgimg14ct2"><rect x="61" y="29" width="132.1" height="15"/></clipPath><clipPath id="svgimg14cp3"><rect x="61" y="44" width="259.7" height="13"/></clipPath><clipPath id="svgimg14ct4"><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(#svgimg14cp0)"><g color="rgb(0, 121, 44)"><clipPath id="svgimg14svgic1"><rect x="37" y="35" width="16" height="16"/></clipPath><g clip-path="url(#svgimg14svgic1)"><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(#svgimg14cp3)"><g clip-path="url(#svgimg14ct4)"><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(#irc16)"><clipPath id="svgimg17vclip"><rect x="16" y="500" width="560" height="116"/></clipPath><g clip-path="url(#svgimg17vclip)"><g transform="translate(16 500)"><defs><clipPath id="svgimg17cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg17ct2"><rect x="61" y="29.4" width="166.1" height="15"/></clipPath><clipPath id="svgimg17cp3"><rect x="61" y="44.4" width="261" height="13"/></clipPath><clipPath id="svgimg17ct4"><rect x="61" y="44.4" width="261" height="13"/></clipPath><clipPath id="svgimg17ct5"><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(#svgimg17cp0)"><g color="rgb(143, 94, 0)"><clipPath id="svgimg17svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg17svgic1)"><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(#svgimg17cp3)"><g clip-path="url(#svgimg17ct4)"><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(#irc19)"><clipPath id="svgimg20vclip"><rect x="16" y="654" width="560" height="116"/></clipPath><g clip-path="url(#svgimg20vclip)"><g transform="translate(16 654)"><defs><clipPath id="svgimg20cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="svgimg20ct2"><rect x="61" y="29.4" width="67.5" height="15"/></clipPath><clipPath id="svgimg20cp3"><rect x="61" y="44.4" width="158.6" height="13"/></clipPath><clipPath id="svgimg20ct4"><rect x="61" y="44.4" width="158.6" height="13"/></clipPath><clipPath id="svgimg20ct5"><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(#svgimg20cp0)"><g color="rgb(194, 11, 32)"><clipPath id="svgimg20svgic1"><rect x="37" y="35.4" width="16" height="16"/></clipPath><g clip-path="url(#svgimg20svgic1)"><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(#svgimg20cp3)"><g clip-path="url(#svgimg20ct4)"><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><text x="16" y="798" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Strip (full-width band)</text><g clip-path="url(#cp5)"><g clip-path="url(#irc22)"><clipPath id="svgimg23vclip"><rect x="16" y="808" width="560" height="116"/></clipPath><g clip-path="url(#svgimg23vclip)"><g transform="translate(16 808)"><defs><clipPath id="svgimg23cp0"><rect x="37" y="36" width="16" height="16"/></clipPath><clipPath id="svgimg23ct2"><rect x="61" y="28" width="125" height="15"/></clipPath><clipPath id="svgimg23ct3"><rect x="61" y="47" width="230.7" height="13"/></clipPath><clipPath id="svgimg23ct4"><rect x="434.6" y="29.6" width="68.4" height="28.8"/></clipPath></defs><rect x="20" y="20" width="500" height="49" rx="0" fill="rgb(255,250,232)"/><polygon points="520,69 20,69 20,68 520,68" fill="rgb(160,131,13)"/><g clip-path="url(#svgimg23cp0)"><g color="rgb(143, 94, 0)"><clipPath id="svgimg23svgic1"><rect x="37" y="36" width="16" height="16"/></clipPath><g clip-path="url(#svgimg23svgic1)"><g transform="translate(37 36)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="40" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(143,94,0)">Notifications paused</text><text x="61" y="58" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(143,94,0)">Desktop alerts resume when you reconnect.</text><rect x="434.6" y="29.6" width="68.4" height="28.8" rx="14.4" fill="rgba(255,255,255,0.52)"/><rect x="435.5" y="30.5" width="67" height="27" rx="13.5" fill="none" stroke="rgb(143,94,0)" stroke-width="1"/><text x="446.83" y="48.48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(143,94,0)">Resume</text></g></g></g></g></svg>

package/docs/design/templates.md

@@ -137,4 +137,4 @@ regenerate both themes and library sheets when that geometry changes. The browse
 pane/sidebar geometry checks cover the resulting 43px icon-label offset from the
 section edge (17px content inset + 18px icon + 8px gap).
 
-For a focused update, pass component names: `npm run design-templates:build -- toolbar`. Omit them to capture all components. Toolbar width variants use the real `wireToolbarVisibility` helper after rendering typed props.
+For a focused update, pass component names: `npm run design-templates:build -- toolbar`. Omit them to capture all components. Toolbar width variants use the real `wireToolbarVisibility` helper after rendering typed props. The `ListActionRow` "Trailing overflow menu" variant renders a real `trailingMenu` `PopupMenu`. Its trigger is a native button inside Web Awesome's shadow root, and domotion cannot read that button's author styles. A registered trigger would therefore be captured as a raster image, which also stops the library sheet from flattening. The capture instead leaves the PopupMenu unregistered. The template-only `staticPopupMenuTriggerCss` gives the trigger host the geometry `popup-menu.css` gives its `::part(base)` in a row: a 44px-wide box, as tall as the row, with the 16px icon centered. It also hides the closed menu's items. The icon lands at the same position as in a registered capture.

package/docs/document-baseline.md

@@ -22,6 +22,22 @@ Native table cells (`th`, `td`) and form controls (`button`, `input`, `select`,
 zero-specificity selectors. Table headers keep their native bold weight and
 alignment, and application styles can override the baseline.
 
+Native controls also get semantic cursors, again at zero specificity so a
+component's or application's own cursor wins:
+
+- `pointer` on enabled `button`, `a[href]`, `[role="button"]` (unless
+  `aria-disabled="true"`), `summary`, `select`, checkbox / radio / color /
+  file / button / reset / submit inputs, and a `label` wrapping an enabled
+  checkbox or radio;
+- `not-allowed` on disabled `button`, `input`, `select`, and `textarea`, on
+  `[role="button"][aria-disabled="true"]`, and on a disabled `wa-button`'s
+  `base` part (Web Awesome leaves a pointer there);
+- `text` on enabled `textarea` and text-like inputs (`text`, `search`,
+  `email`, `url`, `tel`, `password`, `number`, and untyped).
+
+Applications no longer need their own global cursor policy for native
+controls.
+
 `html`, `body`, and `.kui-app-root` form a definite `height: 100%` chain. Add
 `.kui-app-root` to the one direct mount container of a full-height application
 whose child is a `Workbench`, `SplitView`, `NavStack`, or another percentage-
@@ -32,6 +48,41 @@ The class sets `height: 100%`, not a viewport minimum; the direct child shell
 must also fill its parent (for example with its `fill` prop). If the host page
 already supplies a definite height, use that host geometry instead.
 
+### Viewport-locked application shell
+
+A shell that fills the whole window (a `Workbench` app such as Hot Sheet) can
+also lock the document to the viewport:
+
+```html
+<body>
+  <div id="app" class="kui-app-root" data-viewport="locked"></div>
+</body>
+```
+
+With `data-viewport="locked"` on a `.kui-app-root` that is a direct child of
+`body`, `html`, `body`, and the root take `height: 100dvh` and
+`overflow: clip`:
+
+- The **dynamic** viewport height tracks the visible area as mobile browser
+  toolbars show and hide (iOS Safari, WKWebView), so the root is never taller
+  than what the person can see.
+- `overflow: clip` (rather than `hidden`) leaves the document with no scroll
+  container at all. Neither the person, nor `scrollIntoView()`, nor focus can
+  leave the page scrolled: only the shell's `Pane`s scroll.
+
+**On-screen keyboard.** `100dvh` does not shrink for the on-screen keyboard.
+When a field near the bottom takes focus, iOS pans the _visual_ viewport to
+reveal it and pans back when the keyboard closes; because the document itself
+cannot scroll, there is no leftover document offset to restore. A field
+inside a scrolling `Pane` is revealed by that Pane's own scroll. If the
+layout should instead shrink above the keyboard, add
+`interactive-widget=resizes-content` to the viewport meta tag on engines
+that support it. Do not add scroll-restoration handlers for the document:
+the locked document has no scroll position.
+
+Leave the attribute off for document-flow pages and embedded shells; the
+default `height: 100%` chain keeps those scrolling normally.
+
 `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).

package/docs/layout.md

@@ -473,6 +473,17 @@ width. On `normal` or `anywhere`, set a positive integer `maxLines` to clamp
 wrapped text with an ellipsis. Omit `maxLines` for unlimited lines. The cap is
 incompatible with `nowrap` and `truncate`.
 
+With `wrap="truncate"`, `truncate` chooses where the ellipsis goes: `end`
+(default) keeps the start; `start` keeps the tail, for a branch name or the
+end of an identifier; and `middle` keeps the start and a suffix, for a file
+path. `truncateKeep` sets that suffix: `segment` (default) keeps the last path
+segment with its `/` or `\` separator (the last 10 characters when there is
+none), or a number keeps that many trailing characters. `middle` needs string
+or number children so it can split them. Both positions are for left-to-right
+identifiers and paths, keep the whole value in the DOM in order for assistive
+technology, and show it as the element's `title` unless you pass your own.
+Never hand-roll these with `direction: rtl` or split spans in app CSS.
+
 ```tsx
 import { Text } from "@kerfjs/ui/text";
 
@@ -486,6 +497,8 @@ import { Text } from "@kerfjs/ui/text";
 <Text tone="danger" font="monospace">ERR_INVALID_ID</Text>;
 <Text wrap="anywhere">A-very-long-unbroken-identifier</Text>;
 <Text wrap="truncate" variant="span">Long vendor name</Text>;
+<Text wrap="truncate" truncate="middle" font="monospace">{path}</Text>;
+<Text wrap="truncate" truncate="start" variant="span">{branchName}</Text>;
 <Text wrap="normal" maxLines={2}>A long summary capped at two lines.</Text>;
 ```
 
@@ -572,6 +585,17 @@ semantics.
 Use application-owned CSS grid for intrinsic, asymmetric, spanning, or masonry
 tracks, and use `ResizableRegion` when people must adjust a boundary.
 
+## Column tracks
+
+A board of parallel columns (kanban lanes) is a `ColumnTrack`: one horizontal
+scroll owner that fills its parent's height, with columns that sit flush and
+own their insets and vertical scrolling. By default columns share the width
+equally but never narrow below `minColumnWidth` (250px), so a narrow board
+scrolls sideways instead of crushing them. `layout="paged"` gives each column
+nearly the visible width, lets the next one `peek` in (24px), snaps to column
+starts, hides the scrollbar, and scrolls smoothly unless reduced motion is
+preferred. Choose the layout per device class in the app.
+
 ## Row and List alignment
 
 Use `Row` for a horizontal flex layout and `List` for a vertical one. `Row`
@@ -610,10 +634,37 @@ frame), pass `fill` instead: the root takes the parent's full height
 (`height: 100%`), so its `flex` children can grow into it. Use `fill` only on
 that sole layout root; a sibling inside a flex layout keeps using `flex`.
 
+A `scrollable` List owns its overflow: its rows keep their natural height and
+scroll rather than shrink. To bound one by an ancestor's `max-height` instead
+of a definite height, make that ancestor a flex column and pass `flex` (not
+`fill`): `<List flex scrollable>` takes at most the remaining height and
+scrolls the rest, with no app-owned scrolling wrapper.
+
+A scrollable List is also a keyboard-focusable scroller: Chromium gives it a
+Tab stop when it holds no focusable rows, and a dialog may focus it first.
+When it has focus it draws the theme focus ring inset by the ring width and
+rounded with `--kui-radius-m`, so a rounded or `overflow: hidden` parent
+never clips it. Do not style `.kui-list` focus yourself.
+
+For long reading content, such as a reader view, pass `inset="document"`: 24px
+block and 32px inline on all four sides, narrowing to 16px inline below 576px.
+It replaces any `textInsets`/`controlInsets` on that List.
+
+A List is transparent by default. Pass `surface="base"` (the page surface) or
+`surface="raised"` to paint a solid background behind the stack and its
+insets — for example a banner strip above a sunken work area, which otherwise
+shows the lowered tint around the banner. Give that strip `controlInsets="tb"`
+so the banner's own inline margin, not a second List inset, sets its edges. A
+lowered region is a `SunkenPanel`, not a List surface.
+
 Put route, test, or recipe metadata on the same root with `rootAttributes`,
 which accepts safe `data-*` pairs and keeps each component's structural
 attributes (`data-component`, `data-flex`, `data-fill`, alignment, inset, and
-column markers) protected:
+column markers) protected. A `List` or `Row` root also takes `aria-*`
+attributes and a structural `role` (`region`, `group`, `list`, `status`, a
+landmark, …), so a labeled drop-target region or an `aria-busy` stack needs no
+wrapper; widget roles are dropped, and a multi-select `List` keeps its own
+grid role and name:
 
 ```tsx
 <Row gap="none" fill rootAttributes={{ "data-recipe": "sidebar" }}>

package/docs/split-view.md

@@ -55,14 +55,32 @@ const selected = signal<string | null>(null);
 
 - **Roomy** (`compact: false`): both panes show. With `resizable`, the list sits
   in a `ResizableRegion` (wire it with `wireResizableRegions`); without it the
-  list takes a fixed `--kui-split-view-list-width` (default 320px) and the detail
-  fills the rest.
+  list takes a fixed width and the detail fills the rest. Set it with
+  `listWidth`: a number of CSS pixels (default 320), or `{ size, maxFraction }`
+  to cap the preferred size at that share of the SplitView's own width, so a
+  narrow container (a dialog, a small window) always leaves the detail in view —
+  `listWidth={{ size: 432, maxFraction: 0.5 }}` is 432px until the split is
+  narrower than 864px, then half of it. `listWidth` is for the fixed split; a
+  resizable list is sized by `resizable` (combining them throws). The
+  `--kui-split-view-list-width` token remains for theme-level defaults; the
+  prop wins over it.
 - **Compact** (`compact: true`): the split collapses to a `NavStack`. The list is
   the root; when `detailActive` is true the detail is pushed over it with an
   automatic back control (wire it with `wireNavStack`, whose `onBack` clears the
   app's selection). This is the portrait-tablet / handset presentation; as a
   dialog the compact form is a full-screen or large partial-cover modal.
 
+## Filling its container
+
+A SplitView fills its container's block size: give the container a definite
+height (a fixed or viewport-bounded `height`, a flex item that grows, a grid
+row) and the split stretches to it, with each `Pane` owning its own scrolling.
+That holds in a block box, a fixed-size native popover or dialog, a flex column
+below a header, and a grid; no app-side `display: grid` /
+`grid-template-rows: minmax(0, 1fr)` wrapper is needed. A container sized only
+by `max-height` has no height to fill, so the split takes its content height;
+give such a container a `height` instead.
+
 ## Configuring the list region and the compact stack
 
 `resizable` forwards the list's `ResizableRegion` configuration alongside

package/docs/sunken-panel.md

@@ -88,6 +88,19 @@ See [Contextual transparency](./webawesome-theme.md#contextual-transparency).
 Keep ordinary composition on these defaults; public properties are theming
 escape hatches, not a reason to restyle each demo or nesting level.
 
+Every sunken surface — SunkenPanel, `Pane appearance="sunken"`, sunken
+Workbench regions and TabNavigator scenes, and Web Awesome
+`appearance="sunken"` — paints `--kui-sunken-surface`: a fine, monochrome
+grain (a seeded 100px tile at 4% maximum opacity) over the lowered color. The
+tile is drawn once per page, at runtime, by the first sunken surface that
+renders (nothing ships as an asset; server rendering paints the flat color
+until the browser renders one). Translucent children such as a `ValueTable`
+let the grain show through rather than adding their own. Set
+`--kui-sunken-texture: none` at `:root` for a flat lowered surface, or to
+another image; call `ensureSunkenTexture()` (exported from
+`@kerfjs/ui/sunken-panel`) on a page whose only sunken surfaces are Web Awesome
+elements.
+
 The public root class is `.kui-sunken-panel`. Prefer the properties above over
 styling descendants. The `square` shape deliberately overrides the radius
 property with zero; use `rounded` when customizing the radius token.

package/docs/surface-scaffold.md

@@ -19,6 +19,24 @@ respectively, before the viewport width cap. Set `preferredWidth` to a branded
 desktop preferences can share the same responsive dialog without changing its
 resource tracks or preview aspect sizing.
 
+### Sibling dialogs keep their identity
+
+Every `DialogSurface` root has the same structure, so two sibling dialogs that
+are rendered conditionally are matched by position when the page re-renders:
+one open dialog's element (with its accessible name and open state) can be
+reused for another, and Web Awesome events such as `wa-after-hide` fire on the
+wrong dialog or not at all. Give each sibling a stable key on its root with
+`rootAttributes`, instead of wrapping it in an app `div`:
+
+```tsx
+<DialogSurface rootAttributes={{ "data-key": "project-setup" }}>
+  <wa-dialog label="Set up project">…</wa-dialog>
+</DialogSurface>
+```
+
+`rootAttributes` takes `data-*` identity only; the surface's own configuration
+attributes (`data-size`, `data-presentation`, …) stay protected.
+
 ### Modal viewport bounds
 
 `viewportGutter` accepts a branded `CssLength` from `@kerfjs/ui/css-values`.
@@ -56,6 +74,24 @@ An application can configure device-class breakpoints when its phone policy
 differs from the default. Prefer a typed cap such as `maxHeight={remify(640)}`
 when the modal should stop growing before the viewport bound.
 
+### Filling the dialog
+
+`maxHeight` caps a modal that sizes to its content. A layout that fills the
+dialog (a list-detail `SplitView`, a `Pane` with its own chrome and scroller)
+needs a height to fill instead: set `height` to a branded length or
+`"viewport"`. It is bounded exactly like `maxHeight` (the dynamic viewport minus
+both gutters) and takes precedence over it. `bodyLayout="fill"` then gives the
+body's whole height to its one child, which owns its own scrolling; the body
+itself stops scrolling. Combine it with `bodyInset="none"`.
+
+```tsx
+<DialogSurface size="large" height={remify(640)} viewportGutter={remify(8)} bodyInset="none" bodyLayout="fill">
+  <wa-dialog label="Repository status">
+    <SplitView id="repo-split" label="Changes" listWidth={{ size: 432, maxFraction: 0.5 }} list={list} detail={detail} />
+  </wa-dialog>
+</DialogSurface>;
+```
+
 Treat a dialog body as a `List` by default. When its rows or sections own their
 standard list geometry, set `bodyInset="none"` so the dialog does not add a
 second inset. Bare prose is still a list child: wrap it in `ListInsetText` so its
@@ -64,6 +100,35 @@ padding and aligns with bordered siblings. Reserve `compact` or `comfortable`
 body insets for exceptional content that does not already have list/content-item
 geometry.
 
+## Non-modal dialogs: `PopoverDialogSurface`
+
+`wa-dialog` is modal: it makes the page inert until it closes. When a dialog
+should leave the page interactive and close on Escape or a press outside (a
+status panel, a quick inspector), render `PopoverDialogSurface` instead of a
+hand-built popover with application chrome CSS. It is a native
+`popover="auto"` section with `role="dialog"` that owns Kerf's dialog chrome
+(raised surface, border, large radius and shadow, and a backdrop) and the
+same geometry props as a modal `DialogSurface`: `size`, `preferredWidth`,
+`viewportGutter` (16px by default), `height` / `maxHeight`, and `bodyLayout`.
+Name it with `label` or `labelledBy`.
+
+Open it with a control's `popoverTarget` (or `showPopover()`); the browser
+places it centered in the top layer, light-dismisses it, and restores nothing
+else, so move focus into it with `autofocus` on its first control when that
+matters. A closed surface stays hidden; only the open one lays out.
+`presentation="embedded"` renders the same surface in flow, with no top
+layer and never wider than its container, for a catalog specimen or an inline
+preview.
+
+```tsx
+<button type="button" popoverTarget="repository-status">Repository status</button>
+<PopoverDialogSurface id="repository-status" label="Repository status" preferredWidth={remify(1024)} height={remify(640)} viewportGutter={remify(8)} bodyLayout="fill">
+  <SplitView id="repo-split" label="Changes" list={list} detail={detail} />
+</PopoverDialogSurface>;
+```
+
+Use `DialogSurface` with `wa-dialog` whenever the task must block the page.
+
 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
@@ -71,4 +136,4 @@ preserve `data-morph-skip-children` when its upgraded light-DOM items must retai
 identity across Kerf rerenders. Import `@kerfjs/ui/popup-menu/register` once for
 the focus handoff fix when wrapping a raw `wa-dropdown`.
 
-Import `@kerfjs/ui/surface-scaffold/register` once when using `DialogSurface`: it registers `wa-dialog` and repairs Web Awesome 3.12 native dialog names before the first modal opening. Headed dialogs reference the rendered title, including live slotted labels; headerless dialogs use the public `label`. Explicit host `aria-label` and pre-existing native names are preserved. Geometry-only markup stays CSS-free and does not register Web Awesome implicitly.
+Import `@kerfjs/ui/surface-scaffold/register` once when using `DialogSurface`: it registers `wa-dialog` and repairs Web Awesome 3.12 native dialog names before the first modal opening. Headed dialogs reference the rendered title, including live slotted labels; headerless dialogs use the public `label`. Explicit host `aria-label` and pre-existing native names are preserved. A host that is itself an explicit dialog (`role="dialog"` or `"alertdialog"` with its own name) keeps that name alone: the native panel is left unnamed, so one dialog carries the name. Geometry-only markup stays CSS-free and does not register Web Awesome implicitly.

package/docs/ux-demo.md

@@ -21,6 +21,7 @@ Each `?component=recipe-*` route uses public package primitives, real wiring,
 deterministic state, and semantic layout owners from the [recipe guide](./recipes.md).
 
 - It imports public component subpaths, exercising their browser-selected reachable CSS rather than a catalog-only style path.
+- The `ListActionRow` route's Run tests row composes a trailing `PopupMenu` (`trailingMenu`) with Edit and Delete commands, revealed on interaction, that also opens at the pointer when the row's primary button is right-clicked.
 - The `ListActionRow` route demonstrates sibling primary/trailing native controls, independent disabled states, controlled selection, first-line leading-icon alignment for wrapped labels, and an application-owned native popover relationship without nesting controls. The `ListItem` route demonstrates the same multiline leading-icon anchor alongside its single-control navigation contract.
 - The `PopupMenu` route's context example opens one app-owned menu either at the row's right-click point or below its adjacent, keyboard-operable Demand actions button. The Nested decisions example shows the automatic phone-width submenu placement above or below its parent list, with native ArrowLeft return, Escape dismissal, and child selection.
 - The `AppTab` and `TabBar` routes are focused component specimens: AppTab shows its selected, compact, segmented, icon-only, truncation, placeholder, pending, metadata, and close-icon axes inside the required tablist context; TabBar shows its rail, segmented, inspector, allocation, placement, and accessory-zone axes, including an adjacent action plus a separately pinned end action whose tabs overflow at narrow widths, without application readouts. The pinned leading-tab specimen uses native strip scrolling so momentum and the final tab's end position remain natural; `snapTabs` stays an opt-in for applications that want whole-tab settling. The separate `Application tabs` composition route demonstrates controlled selection, matching panel content, overflow, adding (a new tab opens `pending` with a spinner and stays selectable while its panel shows a `Skeleton` heading until a simulated load completes), closing, keyboard/pointer reordering, and application-owned ordering. The `ResizableRegion` route likewise replaces only the decorative handle glyph while retaining separator semantics and shared wiring.

package/docs/webawesome-theme.md

@@ -131,8 +131,12 @@ tiers:
   trigger and the 8px surface inset on the body, while framed Accordion items
   use the 16px container inset for both regions.
 - `appearance="sunken"` is a Kerf theme extension for Accordion, Card, and
-  Details. It removes raised chrome, paints the lowered semantic surface, and
-  uses the shared rounded-rectangle radius. Override
+  Details. It removes raised chrome, paints the shared sunken surface
+  (`--kui-sunken-surface`: the lowered semantic color with the same fine grain
+  texture as every Kerf sunken surface), and uses the shared rounded-rectangle
+  radius. The texture is generated by the first Kerf sunken component that
+  renders; a page with only Web Awesome sunken surfaces calls
+  `ensureSunkenTexture()` once. Override
   `--kui-wa-sunken-background` or `--kui-wa-sunken-radius` on an instance or
   containing scope when that surface needs different tokens.
 - `--kui-wa-container-inset` defaults to the 16px homogeneous-group step. Tab