@kerfjs/ui 5.0.0-beta.29 → 5.0.0-beta.30

package/docs/design/templates/list.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 512" width="452" height="512"><defs><clipPath id="cp0"><rect x="16" y="38" width="420" height="230"/></clipPath><clipPath id="cp1"><rect x="16" y="306" width="420" height="190"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="420" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="420" height="230" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="284" width="420" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="306" width="420" height="190" rx="0"/></clipPath></defs><rect x="0" y="0" width="452" height="512" 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)">Standard gap and four dividers</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="420" height="230"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="37" y="34.5" width="81.8" height="15"/></clipPath><clipPath id="svgimg4ct1"><rect x="37" y="34.5" width="81.8" height="15"/></clipPath><clipPath id="svgimg4ct2"><rect x="126.8" y="31.2" width="21.6" height="21.6"/></clipPath><clipPath id="svgimg4cp3"><rect x="37" y="85" width="18" height="18"/></clipPath><clipPath id="svgimg4cp5"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="svgimg4ct6"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="svgimg4cp7"><rect x="37" y="137" width="18" height="18"/></clipPath><clipPath id="svgimg4cp9"><rect x="63" y="137" width="272" height="18"/></clipPath><clipPath id="svgimg4ct10"><rect x="63" y="137" width="272" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4cp0)"><g clip-path="url(#svgimg4ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">WORKSPACE</text></g></g><rect x="126.8" y="31.2" width="21.6" height="21.6" rx="10.8" fill="rgb(242,242,247)"/><text x="134.33" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(110,110,115)">2</text><rect x="28" y="72" width="324" height="44" rx="12" fill="rgb(214,236,255)"/><rect x="28.5" y="72.5" width="323" height="43" rx="11.5" fill="none" stroke="rgb(166,213,255)" stroke-width="1"/><g clip-path="url(#svgimg4cp3)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg4svgic4"><rect x="37" y="85" width="18" height="18"/></clipPath><g clip-path="url(#svgimg4svgic4)"><g transform="matrix(.75 0 0 .75 37 85)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg4cp5)"><g clip-path="url(#svgimg4ct6)"><text x="63" y="100" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Inbox</text></g></g><rect x="28.5" y="124.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4cp7)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg4svgic8"><rect x="37" y="137" width="18" height="18"/></clipPath><g clip-path="url(#svgimg4svgic8)"><g transform="matrix(.75 0 0 .75 37 137)"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg4cp9)"><g clip-path="url(#svgimg4ct10)"><text x="63" y="152" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Projects</text></g></g></g></g></g></g><text x="16" y="296" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Compact, no gap</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="306" width="420" height="190"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 306)"><defs><clipPath id="svgimg7cp0"><rect x="37" y="33" width="18" height="18"/></clipPath><clipPath id="svgimg7cp2"><rect x="63" y="33" width="272" height="18"/></clipPath><clipPath id="svgimg7ct3"><rect x="63" y="33" width="272" height="18"/></clipPath><clipPath id="svgimg7cp4"><rect x="37" y="77" width="18" height="18"/></clipPath><clipPath id="svgimg7cp6"><rect x="63" y="77" width="272" height="18"/></clipPath><clipPath id="svgimg7ct7"><rect x="63" y="77" width="272" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp0)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg7svgic1"><rect x="37" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg7svgic1)"><g transform="matrix(.75 0 0 .75 37 33)"><path d="M11.5 2.3a.5.5 0 0 1 1 0L14.8 7a2 2 0 0 0 1.6 1l5.1.8a.5.5 0 0 1 .3.9l-3.7 3.6a2 2 0 0 0-.6 2l.9 5a.5.5 0 0 1-.8.6L13 18.6a2 2 0 0 0-2 0L6.4 21a.5.5 0 0 1-.8-.6l1-5a2 2 0 0 0-.7-2L2.2 9.8a.5.5 0 0 1 .3-1l5.1-.7A2 2 0 0 0 9.2 7Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg7cp2)"><g clip-path="url(#svgimg7ct3)"><text x="63" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Priority</text></g></g><rect x="28.5" y="64.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp4)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg7svgic5"><rect x="37" y="77" width="18" height="18"/></clipPath><g clip-path="url(#svgimg7svgic5)"><g transform="matrix(.75 0 0 .75 37 77)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg7cp6)"><g clip-path="url(#svgimg7ct7)"><text x="63" y="92" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">All work</text></g></g></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 512" width="452" height="512"><defs><clipPath id="cp0"><rect x="16" y="38" width="420" height="230"/></clipPath><clipPath id="cp1"><rect x="16" y="306" width="420" height="190"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="420" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="420" height="230" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="284" width="420" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="306" width="420" height="190" rx="0"/></clipPath></defs><rect x="0" y="0" width="452" height="512" 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)">Standard gap and four dividers</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="420" height="230"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="37" y="34.5" width="81.8" height="15"/></clipPath><clipPath id="svgimg4ct1"><rect x="37" y="34.5" width="81.8" height="15"/></clipPath><clipPath id="svgimg4ct2"><rect x="126.8" y="31.2" width="21.6" height="21.6"/></clipPath><clipPath id="svgimg4cp3"><rect x="28" y="72" width="324" height="44"/></clipPath><clipPath id="svgimg4ov4"><rect x="29" y="73" width="322" height="42" rx="11"/></clipPath><clipPath id="svgimg4cp5"><rect x="37" y="85" width="18" height="18"/></clipPath><clipPath id="svgimg4cp7"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="svgimg4ov8"><rect x="63" y="85" width="272" height="18" rx="0"/></clipPath><clipPath id="svgimg4ct9"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="svgimg4cp10"><rect x="28" y="124" width="324" height="44"/></clipPath><clipPath id="svgimg4ov11"><rect x="29" y="125" width="322" height="42" rx="11"/></clipPath><clipPath id="svgimg4cp12"><rect x="37" y="137" width="18" height="18"/></clipPath><clipPath id="svgimg4cp14"><rect x="63" y="137" width="272" height="18"/></clipPath><clipPath id="svgimg4ov15"><rect x="63" y="137" width="272" height="18" rx="0"/></clipPath><clipPath id="svgimg4ct16"><rect x="63" y="137" width="272" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4cp0)"><g clip-path="url(#svgimg4ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">WORKSPACE</text></g></g><rect x="126.8" y="31.2" width="21.6" height="21.6" rx="10.8" fill="rgb(242,242,247)"/><text x="134.33" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(110,110,115)">2</text><g clip-path="url(#svgimg4cp3)"><rect x="28" y="72" width="324" height="44" rx="12" fill="rgb(214,236,255)"/><rect x="28.5" y="72.5" width="323" height="43" rx="11.5" fill="none" stroke="rgb(166,213,255)" stroke-width="1"/><g clip-path="url(#svgimg4ov4)"><g clip-path="url(#svgimg4cp5)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg4svgic6"><rect x="37" y="85" width="18" height="18"/></clipPath><g clip-path="url(#svgimg4svgic6)"><g transform="matrix(.75 0 0 .75 37 85)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg4cp7)"><g clip-path="url(#svgimg4ov8)"><text x="63" y="100" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Inbox</text></g></g></g></g><g clip-path="url(#svgimg4cp10)"><rect x="28.5" y="124.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4ov11)"><g clip-path="url(#svgimg4cp12)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg4svgic13"><rect x="37" y="137" width="18" height="18"/></clipPath><g clip-path="url(#svgimg4svgic13)"><g transform="matrix(.75 0 0 .75 37 137)"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg4cp14)"><g clip-path="url(#svgimg4ov15)"><text x="63" y="152" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Projects</text></g></g></g></g></g></g></g></g><text x="16" y="296" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Compact, no gap</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="306" width="420" height="190"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 306)"><defs><clipPath id="svgimg7cp0"><rect x="28" y="20" width="324" height="44"/></clipPath><clipPath id="svgimg7ov1"><rect x="29" y="21" width="322" height="42" rx="11"/></clipPath><clipPath id="svgimg7cp2"><rect x="37" y="33" width="18" height="18"/></clipPath><clipPath id="svgimg7cp4"><rect x="63" y="33" width="272" height="18"/></clipPath><clipPath id="svgimg7ov5"><rect x="63" y="33" width="272" height="18" rx="0"/></clipPath><clipPath id="svgimg7ct6"><rect x="63" y="33" width="272" height="18"/></clipPath><clipPath id="svgimg7cp7"><rect x="28" y="64" width="324" height="44"/></clipPath><clipPath id="svgimg7ov8"><rect x="29" y="65" width="322" height="42" rx="11"/></clipPath><clipPath id="svgimg7cp9"><rect x="37" y="77" width="18" height="18"/></clipPath><clipPath id="svgimg7cp11"><rect x="63" y="77" width="272" height="18"/></clipPath><clipPath id="svgimg7ov12"><rect x="63" y="77" width="272" height="18" rx="0"/></clipPath><clipPath id="svgimg7ct13"><rect x="63" y="77" width="272" height="18"/></clipPath></defs><g clip-path="url(#svgimg7cp0)"><rect x="28.5" y="20.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7ov1)"><g clip-path="url(#svgimg7cp2)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg7svgic3"><rect x="37" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg7svgic3)"><g transform="matrix(.75 0 0 .75 37 33)"><path d="M11.5 2.3a.5.5 0 0 1 1 0L14.8 7a2 2 0 0 0 1.6 1l5.1.8a.5.5 0 0 1 .3.9l-3.7 3.6a2 2 0 0 0-.6 2l.9 5a.5.5 0 0 1-.8.6L13 18.6a2 2 0 0 0-2 0L6.4 21a.5.5 0 0 1-.8-.6l1-5a2 2 0 0 0-.7-2L2.2 9.8a.5.5 0 0 1 .3-1l5.1-.7A2 2 0 0 0 9.2 7Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg7cp4)"><g clip-path="url(#svgimg7ov5)"><text x="63" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Priority</text></g></g></g></g><g clip-path="url(#svgimg7cp7)"><rect x="28.5" y="64.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7ov8)"><g clip-path="url(#svgimg7cp9)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg7svgic10"><rect x="37" y="77" width="18" height="18"/></clipPath><g clip-path="url(#svgimg7svgic10)"><g transform="matrix(.75 0 0 .75 37 77)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg7cp11)"><g clip-path="url(#svgimg7ov12)"><text x="63" y="92" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">All work</text></g></g></g></g></g></g></g></g></svg>

package/docs/design-philosophy.md

@@ -88,8 +88,10 @@ Reuse a component when surfaces share its purpose, anatomy, state model, and int
 Color, type, spacing, radius, elevation, and motion express semantic roles. Prefer package tokens over raw values in consuming code. State is never communicated by color alone.
 
 The default vocabulary is opinionated rather than empty: neutral, brand/info,
-success, warning, and danger provide quiet/normal/loud fills, borders, and
-foregrounds compatible with Hot Sheet 2 and Web Awesome. Consumers may replace
+pop, success, warning, and danger provide quiet/normal/loud fills, borders, and
+foregrounds compatible with Hot Sheet 2 and Web Awesome. Pop is vibrant,
+non-status emphasis for featured, novel, or celebratory content; never use it as
+a success, warning, or danger substitute. Consumers may replace
 the global palette, one semantic role, or one component instance through
 documented custom properties without rewriting component CSS.
 

package/docs/examples/component-catalog-extension-v2.json

@@ -19,12 +19,14 @@
       "zones": [
         {
           "id": "header",
+          "jsx": { "prop": "header" },
           "accepts": ["@kerfjs/ui:toolbar"],
           "cardinality": { "min": 1, "max": 1 },
           "exclusiveWith": []
         },
         {
           "id": "facts",
+          "jsx": { "prop": "facts" },
           "accepts": ["@kerfjs/ui:value-table"],
           "cardinality": { "min": 1, "max": 1 },
           "exclusiveWith": []

package/docs/layout.md

@@ -50,10 +50,12 @@ Use `.kui-content-item--pill` for the 22px pill radius expressed as
 changing its geometry by setting `--kui-content-item-border` and
 `--kui-content-item-background`.
 
-Nested rounded edges stay concentric by subtracting their full inset from the
-outer radius. For example, `SegmentedControl` places each item behind a 1px
-control border and 1px control padding, so its default rounded-rectangle radius
-is 10px inside the control's 12px radius.
+Nested selection and hover highlights stay concentric and match their owning
+control's shape. Their inner radius is the outer radius minus the full inset,
+expressed by the shared `--kui-layout-highlight-inset` token (2px by default).
+For example, `SegmentedControl` and `ToolbarControlGroup` place each highlight
+behind a 1px control border and 1px control padding, so a rounded control's 12px
+outer radius produces a 10px highlight radius; a 22px pill produces 20px.
 
 A visible parent surface does not make every child another visible card. The
 composer recipe keeps its form as the single surface, uses a heading `Toolbar` for
@@ -110,6 +112,12 @@ The two relationships that get confused most are 8px vs 24px: 8px is _inside_ a
 group, 24px is _between_ major, differing regions. 16px sits between them for
 same-kind groups.
 
+For `List.gap`, pass these token names directly (`gap="xs"`, `gap="m"`) or use
+`space('xs')` from `@kerfjs/ui/css-values` when composing a value in JavaScript.
+Use `rem`, `em`, `px`, `pct`, `lengthVar`, and `calc(plus(...))` only when a
+named spacing relationship does not express the requirement; do not pass raw
+CSS strings.
+
 `--kui-space-s` (12px) and `--kui-space-xl` (32px) exist but are **off the
 canonical rhythm** — reach for them only as a deliberate exception, never as a
 default step. Prefer the five canonical tokens so spacing stays legible and

package/docs/nav-stack.md

@@ -21,7 +21,12 @@ stack as a `signal<NavStackView[]>`, `NavStack({ views })` renders it, and
 
 ```tsx
 const views = signal<NavStackView[]>([
-  { key: "inbox", title: "Inbox", content: <InboxView /> },
+  {
+    key: "inbox",
+    title: "Inbox",
+    content: <InboxView />,
+    bottomToolbar: <InboxStatus />,
+  },
 ]);
 
 // render inside mount():
@@ -42,15 +47,31 @@ views.value = [
 ```
 
 `NavStack` renders every entry stacked, the last one active and the rest kept
-mounted (so their DOM state and focus survive) but hidden. Each entry carries a
-`key` (stable identity), `content`, an optional `title`, and optional per-view
-`toolbar` actions. The back control appears automatically once the stack has more
-than one entry; `wireNavStack`'s `onBack` is where the app pops its own signal.
+mounted (so their DOM state survives) but hidden. Each entry carries a
+`key` (stable identity), `content`, an optional `title`, optional per-view
+`toolbar` actions, and an optional per-view `bottomToolbar`. The component-level
+`bottomToolbar` remains a persistent fallback for views that do not provide one.
+The back control appears automatically once the stack has more than one entry;
+`wireNavStack`'s `onBack` is where the app pops its own signal.
+
+Focus follows the controlled stack automatically. On push, `wireNavStack`
+remembers the focused descendant of the departing view and moves focus into the
+new top view. On pop it restores that exact descendant when it still exists. A
+new view prefers a descendant marked `data-nav-focus`, then its first enabled
+focusable descendant, and finally the view container itself. Use
+`data-nav-focus` for a heading or primary control when DOM order is not the best
+initial reading position; it may use `tabindex="-1"` for programmatic focus.
+When a remembered control was removed during the controlled rerender, the same
+fallback order applies. Disposing the helper stops future transitions and
+cleans up any temporary fallback `tabindex` it added.
 
 ## Transitions
 
 `wireNavStack(root, { onBack, duration? })` observes the rendered stack and
 animates each change: a pushed view slides in from the trailing edge; a popped
-view slides back off it over the revealed view. It returns a disposer. The
-animation honors `prefers-reduced-motion` (transitions collapse to instant) and
-`duration: 0` disables it. Applicable at every device size and inside dialogs.
+view slides back off it over the revealed view; and snapshots of the previous
+top and bottom chrome cross-fade into the active view's chrome. Focus moves to
+the new top view independently of animation duration. It returns a disposer.
+The animation honors `prefers-reduced-motion` (transitions collapse to instant)
+and `duration: 0` disables it. Applicable at every device size and inside
+dialogs.

package/docs/recipes.md

@@ -81,8 +81,10 @@ Do not rebuild the dialog or reach into private shadow parts.
 [Open the recipe](../ux-demo/?component=recipe-composer-form) · [TSX source](../ux-demo/recipes/composer-form.tsx)
 
 A direct `ToolbarText` supplies the task title, with app-owned supporting copy
-below; their ids are referenced by the form. Production fields own labels, help,
-and native focus. The field
+below; their ids are referenced by the form. `ListInsetText` gives that bare
+supporting copy the same content-item text inset as the fields instead of
+duplicating its geometry in recipe CSS. Production fields own labels, help, and
+native focus. The field
 and footer control edges sit directly on the shared 8px inline gutter rather
 than acquiring a second content-item padding inset; major children remain 24px
 apart and related controls use 8px gaps. The app owns
@@ -107,8 +109,10 @@ rows.
 
 Use `ToolbarControlGroup` for related commands, `SegmentedControl` for a few
 visible exclusive choices, `Select` for a longer value list, and an ordinary
-button for an independent command. The app owns values, actions, persistence,
-and responsive priority.
+button for an independent command. Even that independent button sits in a
+single-control `ToolbarControlGroup`, which keeps its height, pill shape, focus,
+and hover treatment aligned with the adjacent toolbar controls. The app owns
+values, actions, persistence, and responsive priority.
 
 ## Navigation stack
 

package/docs/split-view.md

@@ -45,5 +45,11 @@ const selected = signal<string | null>(null);
   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.
 
+The catalog's **Interactive compact drill-down** example exercises this exact
+controlled flow: a list action sets the selected message, `detailActive` pushes
+its detail, and the wired Back action clears the selection to reveal the
+preserved list. Use the same structure in application demos so compact examples
+show the interaction rather than rendering a disconnected detail state.
+
 Compose the interactive wiring from the existing helpers — `SplitView` adds no
 wire of its own.

package/docs/surface-scaffold.md

@@ -10,6 +10,14 @@ Wrap one `wa-dialog` with `DialogSurface`. Choose `size` (`small`, `medium`, or
 `bodyInset` / `footerInset` (`none`, `compact`, or `comfortable`). The defaults
 match Kerf's medium modal, 8px body, and 16px footer rhythm.
 
+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
+text edge receives the standard 8px margin + 1px transparent border + 8px
+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
 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

package/docs/tab-scaffold.md

@@ -46,5 +46,7 @@ const dispose = wireTabScaffold(root, {
 
 Each `TabScaffoldTab` has an `id`, `label`, optional `icon`, and `content`. The
 bottom bar respects the home-indicator safe area (`env(safe-area-inset-bottom)`)
-and keeps 44px targets. On larger device classes, promote the tab set to a
+and keeps 44px targets. Its single-line labels preserve their full line box and
+truncate horizontally with an ellipsis when a destination name exceeds its
+share of the bar. On larger device classes, promote the tab set to a
 `Workbench` rail or a persistent sidebar instead of a bottom bar.

package/docs/type-contracts.md

@@ -11,18 +11,37 @@ public-signature artifact.
 
 ## Strengthened contracts
 
-| ID         | Compile-time guarantee                                                                                                                                                                                                                   |
-| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `KUI-T001` | `ListHeader` is a passive heading, a fully named/icon-bearing trailing action, or a controlled disclosure with `action` + `expanded`. Props ignored by the selected mode are rejected.                                                   |
-| `KUI-T002` | `Select` has a visible `label` or an `ariaLabel`.                                                                                                                                                                                        |
-| `KUI-T003` | A literal `Select.value` belongs to its literal `choices`.                                                                                                                                                                               |
-| `KUI-T004` | A literal `SegmentedControl.value` belongs to its literal `choices`.                                                                                                                                                                     |
-| `KUI-T005` | `expanded`, `expandAction`, and `expandLabel` exist only on `TokenSearchField({ collapsible: true })`.                                                                                                                                   |
-| `KUI-T006` | `TokenSearchEditorAttributes` accepts application `data-*` metadata but rejects component-owned identity, morph, count, and placeholder attributes.                                                                                      |
-| `KUI-T007` | `ToolbarText.maxLines` requires `wrap: true`; it is never silently ignored in typed code.                                                                                                                                                |
-| `KUI-T008` | A literal `TabScaffold.active` id belongs to its literal `tabs`.                                                                                                                                                                         |
-| `KUI-T009` | Adjacent-token keyboard removal requires `onRemoveToken`; disabling removal rejects the now-meaningless callback.                                                                                                                        |
-| `KUI-T010` | Finite public variants have named exported union types, including divider sides, tab activation, banner urgency, and all AppTab, TabBar, ToolbarControlGroup, and Select presentation axes; the convenience root barrel re-exports them. |
+| ID         | Compile-time guarantee                                                                                                                                                                                                                                                                       |
+| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `KUI-T001` | `ListHeader` is a passive heading, a fully named/icon-bearing trailing action, or a controlled disclosure with `action` + `expanded`. Props ignored by the selected mode are rejected.                                                                                                       |
+| `KUI-T002` | `Select` has a visible `label` or an `ariaLabel`.                                                                                                                                                                                                                                            |
+| `KUI-T003` | A literal `Select.value` belongs to its literal `choices`.                                                                                                                                                                                                                                   |
+| `KUI-T004` | A literal `SegmentedControl.value` belongs to its literal `choices`.                                                                                                                                                                                                                         |
+| `KUI-T005` | `expanded`, `expandAction`, and `expandLabel` exist only on `TokenSearchField({ collapsible: true })`.                                                                                                                                                                                       |
+| `KUI-T006` | `TokenSearchEditorAttributes` accepts application `data-*` metadata but rejects component-owned identity, morph, count, and placeholder attributes.                                                                                                                                          |
+| `KUI-T007` | `ToolbarText.maxLines` requires `wrap: true`; it is never silently ignored in typed code.                                                                                                                                                                                                    |
+| `KUI-T008` | A literal `TabScaffold.active` id belongs to its literal `tabs`.                                                                                                                                                                                                                             |
+| `KUI-T009` | Adjacent-token keyboard removal requires `onRemoveToken`; disabling removal rejects the now-meaningless callback.                                                                                                                                                                            |
+| `KUI-T010` | Finite public variants have named exported union types, including divider sides, tab activation, banner urgency, and all AppTab, TabBar, ToolbarControlGroup, and Select presentation axes; the convenience root barrel re-exports them.                                                     |
+| `KUI-T011` | Semantic component zones use the recursive `KerfUiContent` type: `SafeHtml`, runtime-empty booleans/nullish values, and readonly nested arrays are valid; arbitrary strings, numbers, and signals are rejected. Explicit text positions such as `ListInsetText` retain their text exception. |
+| `KUI-T012` | `List.gap` accepts finite `UiSpaceName` shorthands or a complete branded `CssLength`; raw strings and non-standalone `CssLengthExpression` arithmetic are rejected. `calc(plus(...))` promotes a typed expression to a complete value.                                                       |
+| `KUI-T013` | CSS-valued props preserve property grammar: `List.flex` uses `CssFlex`, `Skeleton` dimensions use `CssSize`/`CssLength`, and choice icons use `CssColor`; row declaration strings are absent.                                                                                                |
+
+`KerfUiContent` lets conditionals and mapped component collections be direct
+siblings without an otherwise-unnecessary `Fragment`:
+
+```tsx
+<List>
+  {intro ? <ListInsetText>{intro}</ListInsetText> : null}
+  {rows.map((row) => (
+    <ListItem label={row.label} />
+  ))}
+</List>
+```
+
+The type is intentionally narrower than core JSX children. Wrap prose in a
+semantic text component, and read signals into components or structural
+conditionals rather than passing signal objects as content.
 
 Literal identity inference is intentionally additive for dynamic applications.
 When choices or ids arrive at runtime and the state signal is correctly typed as
@@ -95,6 +114,14 @@ move errors into casts without making the integration safer.
 - Replace `Toolbar({ divider: false })` with `dividerSides: ''`; the default
   remains a bottom divider, while canonical combinations such as `tr` and
   `trbl` select more physical edges.
+- Replace raw `List.gap` strings with a direct spacing shorthand (`"xs"`,
+  `"m"`) or a complete value from `@kerfjs/ui/css-values`. Replace
+  `gap="0.25rem"` with `gap={rem(0.25)}` and wrap sums with `calc(plus(...))`.
+- Replace raw `List.flex` shorthands with `flex(grow, shrink, basis)` or a finite
+  keyword; replace raw Skeleton dimensions with `px`/`rem`/`em`/`pct` builders;
+  and replace raw choice colors with `uiColor()` or `colorVar()`.
+- Remove `style` from `ListItem` and `ListActionRow`; use `className`, public
+  tokens, and cataloged props. These breaking cleanups land before 5.0 stable.
 
 JavaScript runtime behavior remains defensive for previously emitted calls, but
 new TypeScript builds report these invalid or ignored combinations.

package/docs/ui-analyzer.md

@@ -13,8 +13,9 @@ npx kerf-ui-analyze --root . --format sarif --output artifacts/kerf-ui.sarif
 The analyzer is opt-in. Add a project script such as
 `"check:kerf-ui-layout": "kerf-ui-analyze --root . src"`; it never executes
 application code. It discovers `.kerf-ui-profile.json`, joins every declared
-composition catalog by `package:id`, parses literal TSX/JSX class usage and CSS,
-and reports portable repository-relative locations.
+composition catalog by `package:id`, parses literal JavaScript/TypeScript
+component calls, TSX/JSX, and CSS, and reports portable repository-relative
+locations.
 
 Analysis is scoped per source file. Each TSX/JSX file resolves package,
 workspace, and parent-to-child directory profiles from its own location, then
@@ -49,6 +50,11 @@ policy, or analysis inputs to the containing application.
 | `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.  |
 
 Errors are provable contract violations and make the command exit 1. Review
 findings are deliberately heuristic and do not fail by default; pass
@@ -70,6 +76,13 @@ Parent-owned placement and selectors for application-owned content remain
 allowed because the analyzer only reserves `.kui-*`, `--kui-*`, and cataloged
 shadow boundaries.
 
+Catalog entries may also publish `cssValueProps`. Each path names its grammar,
+finite shorthands, canonical and exceptional scale steps, accepted typed
+helpers, expression-only helpers, raw escape policy, and examples. The analyzer
+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.
+
 The JSON report schema is exported as
 `@kerfjs/ui/analyzer/report.schema.json`.
 
@@ -100,5 +113,6 @@ validator.
 
 Review findings remain visible until explicitly suppressed. Avoid suppressing
 `KUI-L001`, `KUI-L002`, `KUI-L003`, `KUI-L007`, `KUI-L009`, `KUI-L010`,
-`KUI-L011`, or `KUI-L012`: those indicate a
+`KUI-L011`, `KUI-L012`, `KUI-L013`, `KUI-L014`, `KUI-L015`, or `KUI-L016`:
+those indicate a
 definite boundary or parsing failure rather than an aesthetic judgment.

package/docs/ui-doctor.md

@@ -17,6 +17,13 @@ The catalog stage discovers the package-default application UI profile and works
 
 TypeScript uses the compiler API with `noEmit`. ESLint loads the installed `eslint-plugin-kerfjs` `recommended-ui` preset (`--eslint strict-ui` opts into advisory rules as errors). This is deliberately an isolated Kerf lint pass rather than the consumer's complete ESLint configuration. For each file, the doctor projects the applicable core ESLint rules and `linterOptions` from the consumer configuration so core-rule suppression directives retain the same used/unused semantics as the application's normal lint command. Consumer plugin rules are not executed, and inline directives for plugins such as `@typescript-eslint` therefore do not produce false "rule definition not found" diagnostics; the consumer's normal ESLint command remains authoritative for those rules. Unknown `kerfjs/*` directives still fail the doctor pass. Stable KUI identifiers come from the packaged `application-ui-diagnostic-ids-v1.json` registry; the doctor also reads installed ESLint message metadata for semantic conflict detection instead of duplicating rule definitions. The analyzer calls the public `@kerfjs/ui/analyzer` contract. None of these stages executes generated application code.
 
+Property-specific CSS values are evaluated from each first- or third-party
+catalog entry's `cssValueProps`. `KUI-L013`–`KUI-L016` are blocking grammar
+violations and name a preferred shorthand/helper; `KUI-L017` keeps an
+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 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.

package/docs/ux-demo.md

@@ -8,7 +8,7 @@ deterministic state, and semantic layout owners from the [recipe guide](./recipe
 
 - It imports public component subpaths, exercising their browser-selected reachable CSS rather than a catalog-only style path.
 - 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 `AppTab` route demonstrates a runtime-filtered domain metadata slot and a decorative replacement close icon without changing TabBar selection, close, reorder, or focus ownership. The `ResizableRegion` route likewise replaces only the decorative handle glyph while retaining separator semantics and shared wiring.
+- The `AppTab` and `TabBar` routes are focused component specimens: AppTab shows its selected, compact, segmented, icon-only, truncation, placeholder, metadata, and close-icon axes inside the required tablist context; TabBar shows its rail, segmented, inspector, allocation, placement, and accessory-zone axes without application readouts. The separate `Application tabs composition` route demonstrates controlled selection, matching panel content, overflow, adding, 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.
 - Every first-party visual component and every free Web Awesome 3.12 component has its own stable `?component=<id>` URL and focused demo. Composite header, menu, feedback, and theme scenarios remain addressable alongside their subcomponents; the root opens the first Kerf component.
 - `ai/component-catalog.json` is the canonical catalog metadata. A deterministic checked-in projection supplies the demo's unique id, category, kind (`component`, `composition`, or `recipe`), source (`kerf` or `webawesome`), name, description, recommendation, direct `uses` dependencies, existing documentation path, and demo-source path; first-party, recipe, and Web Awesome renderer maps are exhaustively typed against its generated id unions. Non-supported Web Awesome recommendations project to a visible `Discouraged` sidebar tag, with Popup as the deliberate conditional exception. Demo paths resolve to the matching `ui/ux-demo/demos/<id>.tsx` or `ui/ux-demo/recipes/*.tsx` file, or to `ui/ux-demo/webawesome-demos.tsx` for Web Awesome entries. `ui/ux-demo/main.tsx` owns only the catalog shell, shared state, routing, and interaction wiring. First-party component entries additionally derive `ui/src/<public-subpath>.tsx` from their canonical `delivery.browserImport` or opt-in `delivery.moduleImport`.
 - Every detail footer groups compact `Demo source` and `Guidance` actions; first-party component details also expose `Component source`. Web Awesome details say `Integration guidance` to distinguish the local integration contract from the upstream component implementation. Each button retains its repository-relative path in the DOM for verification and uses a deploy-safe absolute GitHub blob URL with a contextual new-tab name; the demo does not depend on a local source server or add a package runtime export. At phone widths, the resource group and related-component selector stack as full-width rows, with any resource overflow contained locally so labels cannot overlap the selector or widen the document.
@@ -19,12 +19,18 @@ deterministic state, and semantic layout owners from the [recipe guide](./recipe
 - Catalog-only brand marks, preview dimensions, checkerboard tiles, and the compound display-settings control retain local geometry because they are specimen chrome or intrinsic control anatomy rather than reusable application spacing roles.
 - The menu composition route demonstrates toolbar/content/footer anatomy, 24px major gaps, 8/1/8 child geometry, the full-width `ListHeader` count-or-badge/action split, logical-end 44px action targets with 18px visuals, and 44px row/header/toolbar targets. Its one chevron is a production 18px `DisclosureArrow` inside a controlled Tools header that actually reveals and hides content; ordinary Projects navigation has no false disclosure affordance. Browser assertions cover stable naming, expanded/content transitions, visual rotation, node identity, reduced motion, RTL alignment and containment, and wide, narrow, dark, and 200% layouts. The focused ListHeader route separately shows the shared neutral count pill for Attachments, Notes (including zero), and Duplicates plus a non-count legacy badge, full-width logical-end actions, and no disclosure without content.
 - The `DisclosureArrow` route renders the production 18px root-scaled default without a catalog-only size override. Its two native buttons independently control the default right-to-down chevron and a recognizable right-facing replacement arrow with left-to-up custom directions; both use shortest-path rotation and their names stay stable while `aria-expanded` communicates state. Browser coverage verifies the custom clockwise path, pointer and native keyboard activation, focus, narrow and 200%-zoom stacking with contained labels, consumer sizing, and the independent `.5` Web Awesome glyph scale retained by Kerf `Select`.
-- A detail with relationships renders one grouped footer selector: `Uses` links to direct dependencies and `Used by` links to reverse dependents. Choosing either navigates to that component's demo. The relationship group is absent when both sets are empty; no duplicate summary is rendered.
+- A detail with relationships renders one content-fitted `Components` footer selector: `Uses` links to direct dependencies and `Used by` links to reverse dependents. Its popup owns the standard surface inset so headings and even long component names stay clear of the menu border. Choosing either navigates to that component's demo. The relationship group is absent when both sets are empty; no duplicate summary is rendered.
 - Demo-only CSS supplies only the catalog shell and stages; component appearance stays in package CSS. Decorative chrome and Web Awesome controls share the same semantic system palette instead of carrying a separate demo identity.
-- Scenarios use deterministic data and cover real variants, long content, disabled state, selection, progress, feedback, overlays, media, helpers, and stateful interactions. The Web Awesome theme route remains the broad system view, while individual action, form, layout, navigation, feedback, media, and helper routes provide focused specimens; ListItem and ListHeader demonstrate typed domain metadata, protected native button/disclosure semantics, and a native popover trigger relationship without product props; the Headers composition demonstrates direct toolbar headings with an extra-large title, optional supporting copy, and grouped icon/actions; the Select route verifies that option icons survive unrelated Kerf rerenders and selected slot content follows value changes; the Animation route exposes preset, easing, duration, playback-rate, and transport controls with live lifecycle status; observer routes provide user-driven intersection, mutation, and resize events with live results; ToolbarControlGroup exposes all eight Hot Sheet 2 variants, loads the Web Awesome registrations needed by its popup specimen, and preserves the upgraded dropdown's managed light-DOM children across Kerf rerenders; the Toolbar route composes a collapsible TokenSearchField inside a group, animates between the empty iconic and complete field states, stays open while populated, and focuses the revealed editor; SegmentedControl covers toolbar, rounded-rectangle, pill, equal-width, and disabled presentations; TokenSearchField covers editable ordered chips, pointer and keyboard removal, caret-preserving controlled deletion, editing, clearing, free text, disabled state, and fixed first-line alignment while content wraps; StateBanner exposes every built-in tone with tone-tinted badges plus a scoped override; TabBar demonstrates overflow, edge autoscroll, and controlled pointer/keyboard reordering.
+- Scenarios use deterministic data and cover real variants, long content, disabled state, selection, progress, feedback, overlays, media, helpers, and stateful interactions. The Web Awesome theme route remains the broad system view, while individual action, form, layout, navigation, feedback, media, and helper routes provide focused specimens; ListItem and ListHeader demonstrate typed domain metadata, protected native button/disclosure semantics, and a native popover trigger relationship without product props; the Headers composition demonstrates direct toolbar headings with an extra-large title, optional supporting copy, and grouped icon/actions; the Select route verifies that option icons survive unrelated Kerf rerenders and selected slot content follows value changes; the Animation route exposes preset, easing, duration, playback-rate, and transport controls with live lifecycle status; observer routes provide user-driven intersection, mutation, and resize events with live results; ToolbarControlGroup exposes all eight Hot Sheet 2 variants, loads the Web Awesome registrations needed by its popup specimen, and preserves the upgraded dropdown's managed light-DOM children across Kerf rerenders; the Toolbar route composes a collapsible TokenSearchField inside a group, animates between the empty iconic and complete field states, stays open while populated, and focuses the revealed editor; SegmentedControl covers toolbar, rounded-rectangle, pill, equal-width, and disabled presentations; TokenSearchField covers editable ordered chips, pointer and keyboard removal, caret-preserving controlled deletion, editing, clearing, free text, disabled state, and fixed first-line alignment while content wraps; StateBanner exposes every built-in tone with tone-tinted badges plus a scoped override; the Application tabs composition demonstrates overflow, edge autoscroll, and controlled pointer/keyboard reordering.
 - The ToolbarControlGroup route also demonstrates the public compact/tight,
   mixed-content, filled-selection, nested-dropdown, and avatar/scrim contracts
-  added for consumers that previously restyled group descendants.
+  added for consumers that previously restyled group descendants. The compact
+  mixed specimen keeps its separator, trigger label, and caret inside both pill
+  and rounded group shapes. Avatar images are chrome rather than nested `img`
+  elements: a lone avatar paints the group, while a multi-button avatar group
+  paints only the pressed selection, with contain fitting in both cases. Its
+  collapsible-search specimen follows the selected group shape with a
+  concentric inner radius in both collapsed and expanded states.
 - Recipe ownership notes are hidden by default. A page-toolbar toggle reveals them as floating warning-toned notes with a folded corner, keeping instructional copy visually distinct and removable from the specimen flow.
 - Settings exercise light/dark, increased contrast, and reduced motion without changing component code. The theme action starts from the operating system's effective color scheme, always names the appearance it will switch to, and installs an explicit light or dark override when activated; contrast and reduced motion expose their independent preferences through `aria-pressed`.
 - The footer action log is an `aria-live` region, making interactions visible to both people and browser tests.

package/docs/webawesome-theme.md

@@ -103,6 +103,12 @@ tiers:
   content stays compact and the action group has a clearer boundary. These two
   parts do not inherit the dialog's shared `--spacing` value.
 
+Add `class="hide-actions"` to a `wa-dialog` when the dialog supplies its own
+dismissal affordance and should omit Web Awesome's header action region. The
+theme sets `display: none` on the directly exported `header-actions` part; it
+does not attempt to chain `::part()` through the internal `dialog` and `header`
+parts, which CSS shadow parts do not support.
+
 Badge remains intentionally compact at Web Awesome's intrinsic `0.375em` block /
 `0.625em` inline padding (4.5px / 7.5px at its default 12px text size): it is a
 short status or count, not a content item. Breadcrumb has no bordered or filled

package/docs/workbench.md

@@ -115,7 +115,9 @@ attributes or descendant tags as styling contracts.
 Collapsing snaps the panel's flex track to zero in a single reflow (so the work
 area relayouts once, not per frame) while the panel's fixed-size content slides
 out via a composited `transform` — a rail slides horizontally, the drawer
-vertically — clipped by the shell's overflow. It honors `prefers-reduced-motion`
-(the slide collapses to instant). On smaller device classes, present the rails'
-contents through a `NavStack` or overlay drawers rather than shrinking the
-three-panel shell.
+vertically — clipped by the shell's overflow. The drawer content is positioned
+against the shell's stable bottom edge, so opening and closing move monotonically
+through the transform rather than inheriting a changing normal-flow origin. It
+honors `prefers-reduced-motion` (the slide collapses to instant). On smaller
+device classes, present the rails' contents through a `NavStack` or overlay
+drawers rather than shrinking the three-panel shell.

package/llms.txt

@@ -45,6 +45,17 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
    child; synchronous hosts use [application-ui-profile-sync.cjs](./ai/application-ui-profile-sync.cjs).
    See the
    [workspace profile example](./docs/examples/application-ui-profile.json).
+   A zone's optional `jsx.prop` is its only authoritative JSX binding; never
+   infer one from the zone id. Use `children` for one homogeneous primary
+   region and explicit named content prop slots for semantic positions or
+   replacement content. These slots use the recursive `KerfUiContent` type:
+   `SafeHtml`, runtime-empty boolean/nullish values, and readonly nested arrays.
+   Put conditionals and mapped component arrays directly in them; do not add a
+   `Fragment` only to satisfy types. Arbitrary strings, numbers, and signals are
+   rejected unless a component explicitly exposes a text position such as
+   `ListInsetText`. These are typed props, not native `<slot>` elements,
+   wrapper slot components, or a generic `slots` object. Leave unresolved
+   dynamic expressions unknown.
 4. **When authoring a component gallery**, load
    [catalog-authoring.json](./ai/catalog-authoring.json), then follow its
    authoritative [Catalog demo authoring contract](./docs/catalog.md#catalog-demo-authoring-contract).
@@ -52,6 +63,8 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
 6. **Before calling an integration complete**, run
    [`kerf-ui-doctor`](./docs/ui-doctor.md). Its portable JSON report merges
    profile/catalog, TypeScript, Kerf ESLint, and static analyzer diagnostics;
+   CSS-adjacent component props are checked from catalog `cssValueProps`, so
+   prefer its canonical shorthand or typed helper over raw CSS strings;
    repair source-located errors until exit 0. Use full mode for release gates;
    generated `dist`/`coverage`, dependency, cache, evidence, and nested-worktree
    directories are excluded consistently from every static stage.
@@ -79,9 +92,14 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
   container padding on top of a content-item's own margin — pick one owner. Use
   `.kui-content` for 24px major vertical rhythm.
 - **Use `List` for vertical layout.** It supplies a stretch-aligned column plus
-  optional standard/custom `gap`, `flex`, vertical scrolling, and canonical
+  optional typed `gap`, `flex`, vertical scrolling, and canonical
   `dividerSides` (`t`/`r`/`b`/`l` order). It adds no list semantics; children own
-  those, and only one bounded region should own scrolling.
+  those, and only one bounded region should own scrolling. Pass a finite spacing
+  shorthand (`gap="xs"`, `gap="m"`) or a complete `CssLength` from the CSS-free
+  `@kerfjs/ui/css-values` builders; raw CSS strings are rejected. Use `flex()`
+  for List flex, typed lengths for Skeleton geometry, and
+  `uiColor()`/`colorVar()` for choice-icon colors. These brands are intentionally
+  not interchangeable; rows use classes/tokens/props rather than raw `style`.
 - **Keep Web Awesome on the shared inset tiers.** `webawesome.css` uses
   `--kui-wa-control-inset` (8px controls/items) and
   `--kui-wa-surface-margin` / `--kui-wa-surface-inset` (8px around/inside
@@ -90,6 +108,9 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
   the surface (8px) and container (16px) tiers respectively, independent of the
   dialog's shared `--spacing`. Override the tier at the narrowest useful scope
   instead of restyling individual shadow parts.
+  When a dialog provides another dismissal affordance, add `hide-actions` to
+  the `wa-dialog` host; the theme hides its directly exported `header-actions`
+  part without an unsupported chained `::part()` selector.
   Checkbox and Radio Group option regions also receive the shared 8px inline
   outer inset because those groups have no bordered field shell. The Color
   Picker trigger receives the same inset for the same unbordered geometry.
@@ -117,7 +138,9 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
   need a Web Awesome feature, chiefly the `slot="trigger"` button of a `wa-dropdown`
   popup menu. A toolbar popup menu is a `single` `ToolbarControlGroup` around a
   `wa-dropdown` (its `slot="trigger"` `wa-button` is the toolbar button, kept under
-  `data-morph-skip-children`).
+  `data-morph-skip-children`). For an avatar control, set `content="avatar"` and
+  `avatarImage` on the group instead of inserting an `img`; a lone control paints
+  the group and a multi-button group paints only its pressed highlight.
 - **Use one direct toolbar composition for panel/dialog/page headings.** Put an
   optional icon in a `ToolbarControlGroup`, an extra-large `ToolbarText` directly
   in the leading zone, and actions in a trailing group. Supporting copy is
@@ -126,7 +149,13 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
 - **Space by the five-step scale, by relationship not by eye.** `0`
   `--kui-space-none`, `4px` `--kui-space-2xs`, `8px` `--kui-space-xs` (inside a
   group), `16px` `--kui-space-m`, `24px` `--kui-space-l` (between major differing
-  regions). 12px/32px are off-scale exceptions.
+  regions). 12px/32px are off-scale exceptions. Prefer direct `List.gap`
+  shorthands; use `space`, `px`, `rem`, `em`, `pct`, `lengthVar`, and
+  `calc(plus(...))` for typed runtime composition. `remify()` is source-CSS only.
+- **Keep nested highlight corners concentric.** Inset hover and selection surfaces
+  follow the owning control's pill or rounded shape; their radius is the outer
+  radius minus `--kui-layout-highlight-inset`. Do not give an inner highlight an
+  unrelated radius.
 - **Panes share one child-owned geometry.** Sidebars, main areas, inspectors, and
   dialogs all use an unpadded `.kui-pane` (optional `.kui-pane__toolbar`, one
   scrolling `.kui-pane__content`, optional `.kui-pane__footer`). A visible pane owns
@@ -141,11 +170,14 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
   navigation stacks, tab selection and order, pane sizes, and `collapsed`/`expanded`
   disclosure flags in the app — they are data or persisted layout, and the app reads
   them to render. The `wire…` helpers own the _ephemeral_ parts: `wireNavStack` the
-  push/pop animation, `wireTabBars` the overflow autoscroll, drag preview, and
+  content-slide, per-view top/bottom chrome cross-fade, and focus move/restore
+  (mark a preferred new-view target with `data-nav-focus`), `wireTabBars` the
+  overflow autoscroll, drag preview, and
   replacement focus after controlled automatic tab activation,
   `wireResizableRegions` the live drag preview; they report committed changes via
   callbacks. Managed TokenSearchField clear also preserves open state and replacement
-  editor focus for continued typing. Select All deletion does the same; deletion
+  editor focus before the next input task, so shortcut-letter typing stays in search.
+  Select All deletion does the same; deletion
   restoration finishes before the next keystroke rather than on a delayed frame.
   Persist both query and remaining tokens read from an edited field. The one richer case is `wireTokenSearchFields`, which manages the
   collapsible field's expand/collapse/focus by default (on, per-behavior opt-out) and
@@ -168,6 +200,14 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
   markup. Use the standalone `Skeleton` for a custom slot. Prefer it over `wa-skeleton`
   (the pure-Kerf primitives avoid Web Awesome), and never animate it — use
   `LoadingSpinner` for known busy activity instead.
+- **Keep ListItem content inside the row.** The rounded `ListItem` root clips
+  overflowing label, status, and dormant trailing content. Set `multiline` when
+  the primary label should wrap; use `ListActionRow` instead when trailing content
+  must be interactive.
+- **Dialog bodies are lists by default.** Compose rows and sections in `List`,
+  use `DialogSurface bodyInset="none"` when those children own their geometry,
+  and wrap bare prose in `ListInsetText` so it shares the standard list gutter
+  without stacking a second body inset.
 - **Use a StateBanner badge only for compact supporting status.** Pass the
   optional string `badge` for a terse count or status beside the title. It
   inherits the banner tone and is announced with the banner, so keep its text

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.29",
+  "version": "5.0.0-beta.30",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",
@@ -44,6 +44,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./css-values": {
+      "types": "./dist/css-values.d.ts",
+      "import": "./dist/css-values.js"
+    },
     "./lucide-icon": {
       "types": "./dist/lucide-icon.d.ts",
       "browser": "./dist/browser/lucide-icon.js",