@kerfjs/ui 5.0.0-beta.74 → 5.0.0-beta.76

package/docs/design/templates/value-table-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 274" width="492" height="274"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="220"/></clipPath><clipPath id="ct1"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc2"><rect x="16" y="38" width="460" height="220" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="274" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Key/value detail rows</text><g clip-path="url(#cp0)"><g clip-path="url(#irc2)"><clipPath id="svgimg3vclip"><rect x="16" y="38" width="460" height="220"/></clipPath><g clip-path="url(#svgimg3vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg3cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="svgimg3ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="svgimg3cp2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg3ct3"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg3ct4"><rect x="241.7" y="32.4" width="181.3" height="18"/></clipPath><clipPath id="svgimg3cp5"><rect x="37" y="70" width="24" height="24.2"/></clipPath><clipPath id="svgimg3cp7"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="svgimg3ct8"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="svgimg3ct9"><rect x="253.1" y="73.2" width="169.9" height="18"/></clipPath><clipPath id="svgimg3cp10"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="svgimg3ct11"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="svgimg3ct12"><rect x="222.2" y="114" width="200.8" height="18"/></clipPath><clipPath id="svgimg3cp13"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="svgimg3ct14"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="svgimg3ct15"><rect x="230.9" y="154.8" width="192.1" height="18"/></clipPath></defs><g clip-path="url(#svgimg3cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgb(17,17,19)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp2)"><g clip-path="url(#svgimg3ct3)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Status</text></g></g><text x="391.91" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Live</text></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp5)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg3svgic6"><rect x="37" y="70.2" width="24" height="24"/></clipPath><g clip-path="url(#svgimg3svgic6)"><g transform="translate(37 70.188)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" 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(#svgimg3cp7)"><g clip-path="url(#svgimg3ct8)"><text x="69" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Environment</text></g></g><text x="338.63" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Production</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="69" y1="62.5" x2="423" y2="62.5" stroke="rgb(72, 72, 74)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp10)"><g clip-path="url(#svgimg3ct11)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Region</text></g></g><text x="349.39" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">us-east-1</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgb(72, 72, 74)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp13)"><g clip-path="url(#svgimg3ct14)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Last deploy</text></g></g><text x="333.14" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">2 hours ago</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgb(72, 72, 74)" stroke-width="1"/></g></g></g></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 274" width="492" height="274"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="220"/></clipPath><clipPath id="ct1"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc2"><rect x="16" y="38" width="460" height="220" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="274" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Key/value detail rows</text><g clip-path="url(#cp0)"><g clip-path="url(#irc2)"><clipPath id="svgimg3vclip"><rect x="16" y="38" width="460" height="220"/></clipPath><g clip-path="url(#svgimg3vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg3cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="svgimg3ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="svgimg3cp2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg3ct3"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg3ct4"><rect x="241.7" y="32.4" width="181.3" height="18"/></clipPath><clipPath id="svgimg3cp5"><rect x="37" y="70" width="24" height="24.2"/></clipPath><clipPath id="svgimg3cp7"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="svgimg3ct8"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="svgimg3ct9"><rect x="253.1" y="73.2" width="169.9" height="18"/></clipPath><clipPath id="svgimg3cp10"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="svgimg3ct11"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="svgimg3ct12"><rect x="222.2" y="114" width="200.8" height="18"/></clipPath><clipPath id="svgimg3cp13"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="svgimg3ct14"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="svgimg3ct15"><rect x="230.9" y="154.8" width="192.1" height="18"/></clipPath></defs><g clip-path="url(#svgimg3cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgba(228,228,255,0.075)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp2)"><g clip-path="url(#svgimg3ct3)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Status</text></g></g><text x="391.91" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Live</text></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp5)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg3svgic6"><rect x="37" y="70.2" width="24" height="24"/></clipPath><g clip-path="url(#svgimg3svgic6)"><g transform="translate(37 70.188)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" 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(#svgimg3cp7)"><g clip-path="url(#svgimg3ct8)"><text x="69" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Environment</text></g></g><text x="338.63" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Production</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="69" y1="62.5" x2="423" y2="62.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp10)"><g clip-path="url(#svgimg3ct11)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Region</text></g></g><text x="349.39" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">us-east-1</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp13)"><g clip-path="url(#svgimg3ct14)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Last deploy</text></g></g><text x="333.14" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">2 hours ago</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g></g></g></g></g></svg>

package/docs/design/templates/value-table.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 274" width="492" height="274"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="220"/></clipPath><clipPath id="ct1"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc2"><rect x="16" y="38" width="460" height="220" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="274" 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)">Key/value detail rows</text><g clip-path="url(#cp0)"><g clip-path="url(#irc2)"><clipPath id="svgimg3vclip"><rect x="16" y="38" width="460" height="220"/></clipPath><g clip-path="url(#svgimg3vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg3cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="svgimg3ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="svgimg3cp2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg3ct3"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg3ct4"><rect x="241.7" y="32.4" width="181.3" height="18"/></clipPath><clipPath id="svgimg3cp5"><rect x="37" y="70" width="24" height="24.2"/></clipPath><clipPath id="svgimg3cp7"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="svgimg3ct8"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="svgimg3ct9"><rect x="253.1" y="73.2" width="169.9" height="18"/></clipPath><clipPath id="svgimg3cp10"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="svgimg3ct11"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="svgimg3ct12"><rect x="222.2" y="114" width="200.8" height="18"/></clipPath><clipPath id="svgimg3cp13"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="svgimg3ct14"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="svgimg3ct15"><rect x="230.9" y="154.8" width="192.1" height="18"/></clipPath></defs><g clip-path="url(#svgimg3cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgb(242,242,247)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp2)"><g clip-path="url(#svgimg3ct3)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Status</text></g></g><text x="391.91" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Live</text></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp5)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg3svgic6"><rect x="37" y="70.2" width="24" height="24"/></clipPath><g clip-path="url(#svgimg3svgic6)"><g transform="translate(37 70.188)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" 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(#svgimg3cp7)"><g clip-path="url(#svgimg3ct8)"><text x="69" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Environment</text></g></g><text x="338.63" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Production</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="69" y1="62.5" x2="423" y2="62.5" stroke="rgb(209, 209, 214)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp10)"><g clip-path="url(#svgimg3ct11)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Region</text></g></g><text x="349.39" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">us-east-1</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgb(209, 209, 214)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp13)"><g clip-path="url(#svgimg3ct14)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Last deploy</text></g></g><text x="333.14" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">2 hours ago</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgb(209, 209, 214)" stroke-width="1"/></g></g></g></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 274" width="492" height="274"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="220"/></clipPath><clipPath id="ct1"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc2"><rect x="16" y="38" width="460" height="220" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="274" 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)">Key/value detail rows</text><g clip-path="url(#cp0)"><g clip-path="url(#irc2)"><clipPath id="svgimg3vclip"><rect x="16" y="38" width="460" height="220"/></clipPath><g clip-path="url(#svgimg3vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg3cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="svgimg3ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="svgimg3cp2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg3ct3"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg3ct4"><rect x="241.7" y="32.4" width="181.3" height="18"/></clipPath><clipPath id="svgimg3cp5"><rect x="37" y="70" width="24" height="24.2"/></clipPath><clipPath id="svgimg3cp7"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="svgimg3ct8"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="svgimg3ct9"><rect x="253.1" y="73.2" width="169.9" height="18"/></clipPath><clipPath id="svgimg3cp10"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="svgimg3ct11"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="svgimg3ct12"><rect x="222.2" y="114" width="200.8" height="18"/></clipPath><clipPath id="svgimg3cp13"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="svgimg3ct14"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="svgimg3ct15"><rect x="230.9" y="154.8" width="192.1" height="18"/></clipPath></defs><g clip-path="url(#svgimg3cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgba(0,0,98,0.05)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp2)"><g clip-path="url(#svgimg3ct3)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Status</text></g></g><text x="391.91" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Live</text></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp5)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg3svgic6"><rect x="37" y="70.2" width="24" height="24"/></clipPath><g clip-path="url(#svgimg3svgic6)"><g transform="translate(37 70.188)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" 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(#svgimg3cp7)"><g clip-path="url(#svgimg3ct8)"><text x="69" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Environment</text></g></g><text x="338.63" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Production</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="69" y1="62.5" x2="423" y2="62.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp10)"><g clip-path="url(#svgimg3ct11)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Region</text></g></g><text x="349.39" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">us-east-1</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp13)"><g clip-path="url(#svgimg3ct14)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Last deploy</text></g></g><text x="333.14" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">2 hours ago</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g></g></g></g></g></svg>

package/docs/document-baseline.md

@@ -17,6 +17,10 @@ The opt-in stylesheet applies `border-box` sizing to every element and
 pseudo-element, removes the body margin, and gives the body the foundation
 font, foreground, lowered surface, and `1.45` line height. Plain links use the
 semantic `--kui-color-text-link` token with zero selector specificity.
+Native table cells (`th`, `td`) and form controls (`button`, `input`, `select`,
+`textarea`) inherit the surrounding font family, size, and line height through
+zero-specificity selectors. Table headers keep their native bold weight and
+alignment, and application styles can override the baseline.
 
 `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

package/docs/layout.md

@@ -194,6 +194,7 @@ import { ContentItem } from "@kerfjs/ui/content-item";
 <Pane label="Inspector">
   <ContentItem>{details}</ContentItem>
   <ContentItem frame="framed">{pendingChanges}</ContentItem>
+  <ContentItem appearance="success">{completedWork}</ContentItem>
   <ContentItem flush>{markdownPreview}</ContentItem>
   <ContentItem shape="pill">{summary}</ContentItem>
 </Pane>;
@@ -203,8 +204,11 @@ import { ContentItem } from "@kerfjs/ui/content-item";
 reserves, so framed and unframed items share the same geometry. Frame an item
 only when it marks a real distinction and must read as visibly bounded; do not
 frame it to make it "look contained". `shape="pill"` selects the 22px pill
-radius expressed as `calc(1px + remify(21px))`. There is deliberately no filled
-variant: a lowered, filled surface is `SunkenPanel`, and bare text that only
+radius expressed as `calc(1px + remify(21px))`. `appearance="surface"` paints
+the base surface. The `neutral`, `info`, `pop`, `success`, `warning`, and
+`danger` appearances coordinate the same quiet status background, border, and
+foreground tokens as `StateBanner`; `transparent` is the default. A lowered,
+inset surface around a content stack is `SunkenPanel`, and bare text that only
 needs to align with neighboring items is `ListInsetText`. Safe `data-*`
 metadata goes in `rootAttributes`. Pass `ariaLabel` only for a distinct named
 region (`role="region"`), and `focusTarget` to make the item a programmatic
@@ -489,6 +493,8 @@ their shared track width rather than expanding across an otherwise empty row.
 It requires `minColumnWidth`; the default `auto-fit` keeps the existing form
 behavior. When Grid is a direct child of a flex-owned `ListInsetControl`, pass
 `flex` so the Grid takes the available row width instead of shrink-wrapping.
+`textInsets` adds the standard 17px physical-side inset and `controlInsets`
+adds 8px on selected sides; text insets take precedence where they overlap.
 Grid is layout-only by default and adds no ARIA grid role. With
 `selectionMode="multiple"` and a required `ariaLabel`, it supplies a labeled
 multi-select grid for `ContentItem selectionMode="multiple"` tiles. Their
@@ -557,14 +563,14 @@ and its safe-area padding keeps an edge-docked rail or drawer from painting
 through the unsafe area. A `Pane` is for a real column with a header, one
 scrolling content region, or a footer.
 
-Both components also accept `textInsets` and `controlInsets` using the shared
+`Row`, `Grid`, and `List` also accept `textInsets` and `controlInsets` using the shared
 physical `Sides` union. Values follow canonical top/right/bottom/left order
 (`t`, `rb`, `tbl`, `trbl`, and so on). A selected control side adds 8px of
 padding. A selected text side adds the complete content-item alignment inset —
 8px outer margin + 1px border + 8px inner padding, represented as 17px of
 container padding. When both props select the same side, the text inset wins.
-Each nested `Row` or `List` resolves its own four inset sides; unselected sides
-reset to zero instead of inheriting a same-type parent's inset selection.
+Each nested `Row`, `Grid`, or `List` resolves its own four inset sides;
+unselected sides reset to zero instead of inheriting a same-type parent's inset selection.
 The same holds for `gap` and `flex` on a nested `List`, `Row`, or `Grid`: an
 omitted prop falls back to that component's own default (no gap for `List`,
 `xs` for `Row` and `Grid`; the CSS initial `flex`) rather than the enclosing

package/docs/sunken-panel.md

@@ -74,13 +74,13 @@ Override the public properties at the composition boundary:
 - `--kui-sunken-panel-gap`
 - `--kui-sunken-panel-radius`
 
-`--kui-sunken-panel-background` can be overridden for a known backdrop. Keep
-the default lowered surface opaque; a translucent override compounds when
-sunken panels nest. See [Contextual transparency](./webawesome-theme.md#contextual-transparency)
-for the color and contrast evaluation and its opt-in bounded prototype. The
-prototype also compares Pane and Web Awesome sunken surfaces. Assign its
-first, second, and transparent deeper tints on application-owned wrappers;
-a single translucent override on every nested surface has no depth cap.
+The default background uses the shared translucent lowered-surface token.
+Nested panels composite naturally at every depth: darker in light mode and
+lighter in dark mode, without wrappers, depth classes, or per-instance token
+assignments. Pane and Web Awesome sunken surfaces use the same palette.
+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.
 
 The public root class is `.kui-sunken-panel`. Prefer the properties above over
 styling descendants. The `square` shape deliberately overrides the radius

package/docs/type-contracts.md

@@ -11,22 +11,22 @@ 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.                                                                                                |
-| `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 `CssForegroundColor` (foreground tokens via `uiColor()` or `foregroundColorVar()`; fill tokens such as `uiColor('success-fill-quiet')` are rejected); row declaration strings are absent. |
-| `KUI-T014` | Stable single-root visual components accept the explicit native `slot` attribute. Multi-root `ResizableRegion` and `CollapsiblePanel` remain excluded because no single returned element can own the assignment, and other arbitrary native attributes remain rejected.                                                                 |
+| 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 and `LucideIcon.color` use `CssForegroundColor` (foreground tokens via `uiColor()`, `foregroundColorVar()`, or custom values via `foregroundColor()`; fill tokens such as `uiColor('success-fill-quiet')` are rejected); row declaration strings are absent. |
+| `KUI-T014` | Stable single-root visual components accept the explicit native `slot` attribute. Multi-root `ResizableRegion` and `CollapsiblePanel` remain excluded because no single returned element can own the assignment, and other arbitrary native attributes remain rejected.                                                                                                                                |
 
 `KerfUiContent` lets conditionals and mapped component collections be direct
 siblings without an otherwise-unnecessary `Fragment`:
@@ -123,7 +123,7 @@ move errors into casts without making the integration safer.
 - 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 a foreground token such as
-  `uiColor('success-on-quiet')` or an app-owned `foregroundColorVar()`.
+  `uiColor('success-on-quiet')`, an app-owned `foregroundColorVar()`, or `foregroundColor('rebeccapurple')` for an application-chosen CSS color.
   `SelectChoice.color` rejects fill tokens (`uiColor('success-fill-quiet')`) and
   unqualified `colorVar()` values because a fill paints a nearly invisible
   icon.

package/docs/ui-analyzer.md

@@ -121,6 +121,15 @@ applications and component packages; the selector parsing is the same module
 (`analyzer/selectors.mjs`), so the package rule and the consumer rule agree on
 which element a selector styles.
 
+A component may freely style raw HTML and Web Awesome elements it renders and
+controls in its own stylesheet. A nested Kerf or application component remains
+a separate owner. A thin composition that only connects children should
+normally have no stylesheet; if it owns raw wrapper markup or layout, its CSS
+may style that markup while these diagnostics continue to reject child
+overrides. “Thin composition” is architectural guidance rather than a static
+classification, so Doctor reports concrete ownership violations instead of
+rejecting every stylesheet attached to a `kind: composition` catalog entry.
+
 - **`KUI-L019` — a rule restyles a cataloged component.** The rule's subject
   (the rightmost compound of each selector, ignoring `:has()` and `:not()`
   arguments) names a public class of a cataloged component (`.kui-toolbar`,
@@ -162,7 +171,9 @@ which element a selector styles.
 - **`KUI-L022` — a hook class on a component's root.** A literal class on an
   imported component's JSX (`<Toolbar className="header" />`) is the subject
   of a rule in a stylesheet that file imports, so the application restyles the
-  component through it. The evidence names the stylesheet, line, and selector.
+  component through it. This also checks components nested in JSX prop values
+  (such as `Toolbar.leading`) and application-owned classes placed on another
+  component's root. The evidence names the stylesheet, line, and selector.
   For cataloged application components, the import may be direct and relative
   or use an exact or wildcard TypeScript `paths` alias from the nearest
   `tsconfig.json` inside the analyzed root (including inherited options).

package/docs/ui-doctor.md

@@ -35,7 +35,8 @@ Component ownership is part of the same loop. The analyzer stage reports
 application or third-party CSS that restyles another package's component
 (`KUI-L019`), touches its private `--_*` variables (`KUI-L020`), overrides a
 token a typed prop sets (`KUI-L021`), or styles it through a hook class on its
-root (`KUI-L022`). It also reports source modules that render another
+root (`KUI-L022`), including components nested in JSX prop values and hooks
+owned by the surrounding application. It also reports source modules that render another
 component's public classes as their own markup (`KUI-L023`), including raw HTML
 and DOM class writes. Raw HTML checks include complete static class tokens in
 interpolated template literals. `KUI-L023` skips `*.test.*`, `*.spec.*`, and `__tests__/`
@@ -73,6 +74,13 @@ including dynamic BEM modifiers; `evidence.components` names the co-owner set.
 Set `"implicitComponentOwnership": true` to include uncataloged modules
 that directly import CSS. Component mode reports sibling CSS and hook-class
 restyles while allowing a component's own stylesheet and module.
+For an application with reusable or app-level components, the recommended
+policy is `"ownership": "component"`, `"implicitComponentOwnership": true`,
+and `"ownershipContext": "any-package"`. This lets components style raw HTML
+and Web Awesome elements they own while blocking overrides of nested Kerf and
+application components. Thin glue compositions should normally omit CSS; when
+they own wrapper markup or layout, Doctor permits that own CSS and reports any
+selector that crosses into a child component.
 For an entry stylesheet shared by modules without direct CSS imports, configure
 `"ownershipGroups": [{ "styleSources": ["src/style.css"], "sources": ["src/main.tsx", "src/app/"] }]`.
 These package-relative paths define one owner: its stylesheet and every listed
@@ -105,7 +113,7 @@ excluded consistently from TypeScript, the isolated ESLint pass, analyzer
 discovery, and cache inputs, even when one lives below another application
 directory.
 
-TypeScript constructs the selected package's program so compiler options retain their real meaning, while its root inputs are narrowed to changed source files. Use `--full` for release gates.
+TypeScript constructs the selected package's program so compiler options retain their real meaning. In changed mode, its root inputs are narrowed to changed source files plus the tsconfig's declaration roots, so ambient globals still participate; reported source diagnostics stay scoped to the changed files. Use `--full` for release gates.
 
 ## Configuration and suppressions
 
@@ -117,6 +125,8 @@ Place `.kerf-ui-doctor.json` at the workspace root:
   "schemaVersion": 1,
   "mode": "full",
   "ownership": "component",
+  "ownershipContext": "any-package",
+  "implicitComponentOwnership": true,
   "stages": { "browser": false },
   "cache": true,
   "failOn": "warning",

package/docs/webawesome-theme.md

@@ -140,65 +140,35 @@ tiers:
 
 ## Contextual transparency
 
-Keep the shared `--kui-color-*` semantic fills, foregrounds, and borders opaque
-by default. Their light and dark values mirror the Web Awesome theme, and the
-contrast checks in `tests/browser/tone-contrast.spec.ts` assume known surfaces.
-Compositing those tokens over arbitrary app backgrounds changes text contrast
-and makes the same token mean a different visible color in each container.
-
-The strongest candidate for transparency is a **component-scoped sunken
-background**, through the existing `--kui-sunken-panel-background` and
-`--kui-wa-sunken-background` overrides. A simple black overlay of 5.5% over
-white approximates `#f1f1f1`, near the current light lowered surface; a second
-nesting level becomes `#e4e4e4`. Matching the current dark lowered surface from
-`#1c1c1e` takes about 39% black, and a second layer becomes near-black
-`#0a0a0b`. An alpha that works for one level therefore needs a separate nesting
-rule or a lighter dark treatment before it can become a default. The existing
-opaque `--kui-color-surface-lowered` remains appropriate for page backgrounds.
-
-| Candidate                             | Finding                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Selected `ListItem` fill and border   | A translucent brand layer would preserve a tinted or textured backdrop. Keep it in the component's existing `--kui-list-item-selected-*` overrides: making the shared brand fill translucent would also affect components that put `--kui-color-brand-on-fill` text on it. A 16% brand overlay gives about 4.35:1 for that text over the light lowered surface and 3.99:1 over a warm `#eee7dc` surface, below the 4.5:1 text target. |
-| `ToolbarControlGroup` fill and border | A light 10% black layer approximates the current fill over white, and a dark 13% white layer approximates it over the dark surface. On a warm `#eee7dc` backdrop, the light layer puts the existing quiet text at about 3.31:1. Its dark tone already uses a translucent fill. Keep default control chrome opaque until a backdrop matrix validates its text, icons, borders, and selected state.                                     |
-| Quiet or disabled text and icons      | Keep normal and quiet text/foreground tokens opaque; alpha changes their contrast with every backdrop. Disabled controls may use component-owned opacity, as they do now, without weakening shared foreground tokens.                                                                                                                                                                                                                 |
-| Dividers and borders                  | Decorative separators can use scoped alpha over a known surface. Control boundaries and focus indicators need reliable contrast; do not replace the shared border or focus tokens with alpha globally.                                                                                                                                                                                                                                |
-
-### Bounded translucent prototype
-
-The opt-in catalog prototype (`SunkenPanel` → Backdrop-aware prototype) uses
-the existing public background overrides on `SunkenPanel`, `Pane`, and Web
-Awesome sunken Card/Details. It does not change shared semantic tokens or
-component defaults. The application assigns a depth class to each
-application-owned wrapper; the component inside inherits its public color
-override:
-
-| Depth            | Light tint  | Dark tint   | Treatment                                       |
-| ---------------- | ----------- | ----------- | ----------------------------------------------- |
-| First            | 5.5% black  | 12% black   | Shows the backdrop through the lowered surface. |
-| Second           | 3.5% black  | 5% black    | Adds a smaller inset step.                      |
-| Third and deeper | transparent | transparent | Caps accumulated darkening.                     |
-
-Over default white, the light levels approximate `#f1f1f1` then `#e9e9e9`;
-over dark default `#1c1c1e`, they approximate `#19191a` then `#171719`.
-The dark lowered backdrop reaches roughly `#0f0f11` then `#0e0e10`, which is
-still visually close to black. Warm and textured backdrops retain their tone
-and pattern; the first and second layers remain discernible in light mode but
-are subtle in dark mode. These values are sRGB estimates; actual rendering
-depends on backdrop and browser.
-
-The browser matrix covers one and two layers on default, lowered, warm, and
-two textured stripe colors in light and dark, across Chromium, Firefox, and
-WebKit. It composites computed text and control colors with each tint and
-requires at least 4.5:1 for panel text, an opaque button, Card text, and
-Details text. It also checks a visible focus outline with forced colors and
-the third layer's transparent cap. Theme colors must finish transitioning
-before contrast is measured. The prototype keeps controls on opaque semantic
-surfaces for predictable contrast.
-
-Keep this treatment opt-in. It needs explicit depth assignment, and the dark
-lowered case has too little separation to replace the opaque default. A
-future default would need a stronger depth and contrast rule for arbitrary
-backdrops, especially dark textures and nested mixed components.
+The lowered surface, neutral quiet/normal fills, and neutral borders are
+translucent shared theme colors. The foundation mirrors them when Web Awesome
+is absent. Nested SunkenPanel, Pane, and Web Awesome sunken surfaces therefore
+composite on their actual backdrop without application-owned depth wrappers
+or component-token overrides.
+
+The lowered light tint is `rgb(0 0 98.076923 / 0.05098)` (approximately
+`#f2f2f7` over white); dark is `rgb(228.157895 228.157895 255 / 0.07451)`
+(approximately `#111113` over black). Repeated layers darken in light mode
+and brighten in dark mode. The same value is used at every depth; there is no
+arbitrary third-level cap. Neutral normal fills and borders use alpha values
+chosen to retain their former single-layer appearance over the default surface.
+Their painted result adapts to other backgrounds. Neutral on-quiet text uses
+`#626267` / `#c2c2c6` to retain AA contrast across the tested layered catalog
+surfaces.
+
+Default/raised surfaces remain opaque canvas and overlay anchors. The optional
+document baseline paints an opaque default surface on `html` and one lowered
+layer on `body`. Normal/quiet foregrounds, focus indicators, and loud neutral
+fills remain opaque for legible controls. Colored semantic fill/border tokens
+also remain opaque pending their separate contrast evaluation. Transparency
+is not a guarantee of contrast on an arbitrary photograph or infinitely nested
+surface; applications must verify their actual composition and keep text and
+interactive controls on suitable surfaces.
+
+The catalog demonstrates three directly nested panels, a sunken Pane containing
+a panel, and a Web Awesome card containing details, using public components and
+no demo stylesheet. Browser tests cover repeated layers, actual compositing,
+text contrast, light/dark switching, narrow/wide layouts, and forced colors.
 
 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

package/doctor/index.mjs

@@ -847,13 +847,14 @@ async function runTypeScript({ packageRoot, paths }) {
     { ...ts.default.sys, onUnRecoverableConfigFileDiagnostic: () => {} },
   );
   if (!parsed) throw new Error('TypeScript could not parse tsconfig.json.');
-  parsed.fileNames = parsed.fileNames.filter(
-    (file) => !isUiTraversalExcluded(packageRoot, file),
-  );
-  if (paths?.length) {
-    const selected = new Set(paths.map((path) => resolve(packageRoot, path)));
-    parsed.fileNames = parsed.fileNames.filter((file) => selected.has(file));
-  }
+  const selected = paths?.length
+    ? new Set(paths.map((path) => resolve(packageRoot, path)))
+    : undefined;
+  parsed.fileNames = parsed.fileNames.filter((file) => {
+    if (isUiTraversalExcluded(packageRoot, file)) return false;
+    if (!selected || selected.has(file)) return true;
+    return /\.d\.(?:ts|mts|cts)$/.test(file);
+  });
   const program = ts.default.createProgram(
     parsed.fileNames,
     { ...parsed.options, noEmit: true },
@@ -864,30 +865,38 @@ async function runTypeScript({ packageRoot, paths }) {
   const diagnostics = [
     ...parsed.errors,
     ...ts.default.getPreEmitDiagnostics(program),
-  ].map((item) => {
-    const point =
-      item.file && item.start !== undefined
-        ? item.file.getLineAndCharacterOfPosition(item.start)
-        : undefined;
-    return normalizedDiagnostic({
-      id: `TS${item.code}`,
-      severity:
-        item.category === ts.default.DiagnosticCategory.Error
-          ? 'error'
-          : 'warning',
-      stage: 'typescript',
-      message: ts.default.flattenDiagnosticMessageText(item.messageText, '\n'),
-      location: item.file
-        ? {
-            file: portablePath(packageRoot, item.file.fileName),
-            line: (point?.line ?? 0) + 1,
-            column: (point?.character ?? 0) + 1,
-          }
-        : undefined,
-      action: 'Repair the TypeScript diagnostic at this source location.',
-      meaning: `TypeScript diagnostic TS${item.code}`,
+  ]
+    .filter(
+      (item) =>
+        !selected || !item.file || selected.has(resolve(item.file.fileName)),
+    )
+    .map((item) => {
+      const point =
+        item.file && item.start !== undefined
+          ? item.file.getLineAndCharacterOfPosition(item.start)
+          : undefined;
+      return normalizedDiagnostic({
+        id: `TS${item.code}`,
+        severity:
+          item.category === ts.default.DiagnosticCategory.Error
+            ? 'error'
+            : 'warning',
+        stage: 'typescript',
+        message: ts.default.flattenDiagnosticMessageText(
+          item.messageText,
+          '\n',
+        ),
+        location: item.file
+          ? {
+              file: portablePath(packageRoot, item.file.fileName),
+              line: (point?.line ?? 0) + 1,
+              column: (point?.character ?? 0) + 1,
+            }
+          : undefined,
+        action: 'Repair the TypeScript diagnostic at this source location.',
+        meaning: `TypeScript diagnostic TS${item.code}`,
+      });
     });
-  });
   return { diagnostics };
 }
 

package/llms.txt

@@ -17,6 +17,16 @@ component per source file and one owned stylesheet per visual component. Keep it
 compatibility entrypoints implementation-free: JavaScript/TypeScript only re-exports
 the folder modules, and CSS only imports their owner stylesheets.
 
+### Shared semantic tones
+
+`SemanticTone` is the shared color-role type for `Badge`, `Chip`, `StateBanner`,
+and semantic `ContentItem` appearances: `neutral`, `info`, `pop`, `success`,
+`warning`, and `danger`. Import it as a type from `@kerfjs/ui`,
+`@kerfjs/ui/badge`, `@kerfjs/ui/state-banner`, or `@kerfjs/ui/content-item`.
+Use `info` for the role backed by the existing `--kui-color-brand-*` tokens.
+Migrate Badge/Chip `tone="brand"` to `tone="info"`; `BadgeTone` and
+`StateBannerTone` remain deprecated aliases of `SemanticTone`.
+
 ## The rule: components own their styles
 
 Configure components through their typed props (size, density, inset,
@@ -147,7 +157,8 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   container padding on top of a content-item's own margin — pick one owner. Use
   `.kui-content` for 24px major vertical rhythm.
 - **Opt into document globals explicitly.** Import `@kerfjs/ui/document.css`
-  once for border-box sizing, token-backed body/link presentation, and zero body
+  once for border-box sizing, token-backed body/link presentation, inherited
+  native table-cell and form-control font metrics, and zero body
   margin. Put `.kui-app-root` on the one direct mount container only when a
   percentage-height shell needs the provided `html` → `body` → app-root height
   chain. The baseline is not part of `styles.css` or component browser imports.
@@ -204,15 +215,19 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   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
-  foreground colors for choice icons: `uiColor()` with an `*-on-*`/text token
-  or `foregroundColorVar()`; fill tokens such as `uiColor('success-fill-quiet')` do not
+  foreground colors for choice icons and `LucideIcon.color`: `uiColor()` with an `*-on-*`/text token,
+  `foregroundColorVar()`, or `foregroundColor()` for a custom CSS color; fill tokens such as `uiColor('success-fill-quiet')` do not
   type-check. These brands are intentionally
   not interchangeable; rows use classes/tokens/props rather than raw `style`.
+  Set `LucideIcon.inline` for an icon in `Text` or prose; it changes the SVG
+  from block to inline-block without changing its inherited 1em size.
 - **Use `Grid` for equal-width columns.** Set a fixed positive `columns` count
   or typed `minColumnWidth` for automatic container-width collapse, never both.
   The app owns the outer width and child semantics; use custom CSS grid for
   asymmetric/intrinsic tracks and `ResizableRegion` for adjustable boundaries.
   `Grid.gap` and `Grid.flex` use the same typed grammars as Row.
+  `Grid.textInsets` and `Grid.controlInsets` select physical sides for the
+  standard 17px text and 8px control inset; text wins on overlap.
   For selectable document tiles, use `selectionMode="multiple"` and a required
   `ariaLabel`, with `ContentItem selectionMode="multiple"` children. Wire
   `wireContentItems` for spatial arrow navigation and Enter/Space activation.
@@ -516,3 +531,5 @@ shell, `@kerfjs/ui/collapsible-panel` (`CollapsiblePanel`, `CollapsiblePanelTogg
 - [component-catalog.json](./ai/component-catalog.json) + [component-catalog-extension.schema.json](./ai/component-catalog-extension.schema.json) + [catalog-authoring.json](./ai/catalog-authoring.json) + [public-api-signatures-v1.md](./ai/public-api-signatures-v1.md) + [webawesome-jsx-signatures-v1.md](./ai/webawesome-jsx-signatures-v1.md): machine-readable selection facts, a reusable app-component extension contract, Catalog authoring discovery, and exact signatures.
 - [compile-time-contracts-v1.json](./ai/compile-time-contracts-v1.json) + [type-contracts.md](./docs/type-contracts.md): stable compile diagnostics, packed-declaration proof, migrations, and explicit non-goals.
 - [README.md](./README.md): package overview and the component subpath table.
+
+Neutral lowered surfaces and decorative neutral fills/borders are translucent theme colors; compose nested public components directly. Default/raised canvases, foregrounds, focus indicators, and loud contrast-bearing fills remain opaque. Do not assign depth-specific component tokens in demo wrappers.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.74",
+  "version": "5.0.0-beta.76",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",
@@ -428,6 +428,7 @@
     "check:demo-conformance": "node scripts/check-catalog-demo-conformance.mjs",
     "check:recipes": "node scripts/check-recipes.mjs",
     "check:css-ownership": "node scripts/check-css-ownership.mjs",
+    "check:source-organization": "node scripts/check-source-organization.mjs",
     "check:ai-regressions": "node scripts/check-ai-regressions.mjs && node scripts/audit-ai-regression-results.mjs && node scripts/audit-ai-regression-results-v3.mjs",
     "check:ai-signatures": "node scripts/sync-ai-public-signatures.mjs --check",
     "ai:signatures:sync": "npm run build && node scripts/sync-ai-public-signatures.mjs",
@@ -455,7 +456,7 @@
     "test:contract-types:packed": "node scripts/check-packed-type-contracts.mjs",
     "test:consumer-types": "npm run test:contract-types:source && npm run build && node node_modules/typescript7/bin/tsc -p tests/consumer-types/webawesome/tsconfig.json && npm run test:contract-types:packed",
     "test:e2e": "playwright test",
-    "check": "npm run check:catalog && npm run check:component-integrations && npm run check:profile && npm run check:demo-conformance && npm run check:recipes && npm run check:css-ownership && npm run check:guidance && npm run check:ai-compatibility && npm run check:ai-regressions && npm run lint && npm run typecheck && npm test && npm run test:consumer-types && npm run check:ai-signatures && npm run demo:build && npm run check:design-templates && npm pack --dry-run",
+    "check": "npm run check:source-organization && npm run check:catalog && npm run check:component-integrations && npm run check:profile && npm run check:demo-conformance && npm run check:recipes && npm run check:css-ownership && npm run check:guidance && npm run check:ai-compatibility && npm run check:ai-regressions && npm run lint && npm run typecheck && npm test && npm run test:consumer-types && npm run check:ai-signatures && npm run demo:build && npm run check:design-templates && npm pack --dry-run",
     "prepublishOnly": "npm run check",
     "check:design-templates": "node scripts/check-design-templates.mjs",
     "check:design-templates:drift": "node scripts/check-design-templates-drift.mjs",