@kerfjs/ui 5.0.0-beta.60 → 5.0.0-beta.62

package/docs/design/templates/segmented-control-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 268" width="492" height="268"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="88"/></clipPath><clipPath id="cp1"><rect x="16" y="164" width="460" height="88"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="460" height="88" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="142" width="460" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="164" width="460" height="88" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="268" 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)">Equal-width rounded</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="460" height="88"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="20" y="20" width="210.3" height="44"/></clipPath><clipPath id="svgimg4ov1"><rect x="21" y="21" width="208.3" height="42" rx="11"/></clipPath><filter id="svgimg4sh2" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="svgimg4ct3"><rect x="38.7" y="36" width="35.3" height="12"/></clipPath><clipPath id="svgimg4ct4"><rect x="114.1" y="36" width="22" height="12"/></clipPath><clipPath id="svgimg4ct5"><rect x="168.5" y="36" width="50.8" height="12"/></clipPath></defs><g clip-path="url(#svgimg4cp0)"><rect x="20" y="20" width="210.3" height="44" rx="12" fill="rgb(58,58,60)"/><rect x="20.5" y="20.5" width="209" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/></g><g clip-path="url(#svgimg4cp0)"><g clip-path="url(#svgimg4ov1)"><rect x="22" y="23" width="68.8" height="40" rx="10" fill="rgba(0,0,0,0.5)" filter="url(#svgimg4sh2)"/><rect x="22" y="22" width="68.8" height="40" rx="10" fill="rgb(28,28,30)"/><rect x="22.5" y="22.5" width="68" height="39" rx="9.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="38.7" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(138,203,255)">Board</text><rect x="91.5" y="22.5" width="68" height="39" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="114.13" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">List</text><rect x="160.5" y="22.5" width="67" height="39" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="168.5" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">Timeline</text></g></g></g></g></g></g><text x="16" y="154" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Pill, small</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="164" width="460" height="88"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 164)"><defs><clipPath id="svgimg7cp0"><rect x="20" y="20" width="141.4" height="44"/></clipPath><clipPath id="svgimg7ov1"><rect x="21" y="21" width="139.4" height="42" rx="21"/></clipPath><clipPath id="svgimg7ct2"><rect x="31.5" y="36.5" width="21.1" height="11"/></clipPath><filter id="svgimg7sh3" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="svgimg7ct4"><rect x="70" y="36.5" width="30.3" height="11"/></clipPath><clipPath id="svgimg7ct5"><rect x="116.3" y="36.5" width="35.1" height="11"/></clipPath></defs><g clip-path="url(#svgimg7cp0)"><rect x="20" y="20" width="141.4" height="44" rx="22" fill="rgb(58,58,60)"/><rect x="20.5" y="20.5" width="140" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7ov1)"><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="31.47" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(174,174,178)">Day</text><rect x="62" y="23" width="46.3" height="40" rx="20" fill="rgba(0,0,0,0.5)" filter="url(#svgimg7sh3)"/><rect x="62" y="22" width="46.3" height="40" rx="20" fill="rgb(28,28,30)"/><rect x="62.5" y="22.5" width="45" height="39" rx="19.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="70" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(138,203,255)">Week</text><rect x="108.5" y="22.5" width="50" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="116.28" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(174,174,178)">Month</text></g></g></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 268" width="492" height="268"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="88"/></clipPath><clipPath id="cp1"><rect x="16" y="164" width="460" height="88"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="460" height="88" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="142" width="460" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="164" width="460" height="88" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="268" 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)">Equal-width rounded</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="460" height="88"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="20" y="20" width="210.3" height="44"/></clipPath><clipPath id="svgimg4ov1"><rect x="21" y="21" width="208.3" height="42" rx="11"/></clipPath><filter id="svgimg4sh2" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="svgimg4ct3"><rect x="38.7" y="36" width="35.3" height="12"/></clipPath><clipPath id="svgimg4ct4"><rect x="114.1" y="36" width="22" height="12"/></clipPath><clipPath id="svgimg4ct5"><rect x="168.5" y="36" width="50.8" height="12"/></clipPath></defs><g clip-path="url(#svgimg4cp0)"><rect x="20" y="20" width="210.3" height="44" rx="12" fill="rgb(58,58,60)"/><rect x="20.5" y="20.5" width="209" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/></g><g clip-path="url(#svgimg4cp0)"><g clip-path="url(#svgimg4ov1)"><rect x="22" y="23" width="68.8" height="40" rx="10" fill="rgba(0,0,0,0.5)" filter="url(#svgimg4sh2)"/><rect x="22" y="22" width="68.8" height="40" rx="10" fill="rgb(28,28,30)"/><rect x="22.5" y="22.5" width="68" height="39" rx="9.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="38.7" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(138,203,255)">Board</text><rect x="91.5" y="22.5" width="68" height="39" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="114.13" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(245,245,247)">List</text><rect x="160.5" y="22.5" width="67" height="39" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="168.5" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(245,245,247)">Timeline</text></g></g></g></g></g></g><text x="16" y="154" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Pill, small</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="164" width="460" height="88"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 164)"><defs><clipPath id="svgimg7cp0"><rect x="20" y="20" width="141.4" height="44"/></clipPath><clipPath id="svgimg7ov1"><rect x="21" y="21" width="139.4" height="42" rx="21"/></clipPath><clipPath id="svgimg7ct2"><rect x="31.5" y="36.5" width="21.1" height="11"/></clipPath><filter id="svgimg7sh3" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="svgimg7ct4"><rect x="70" y="36.5" width="30.3" height="11"/></clipPath><clipPath id="svgimg7ct5"><rect x="116.3" y="36.5" width="35.1" height="11"/></clipPath></defs><g clip-path="url(#svgimg7cp0)"><rect x="20" y="20" width="141.4" height="44" rx="22" fill="rgb(58,58,60)"/><rect x="20.5" y="20.5" width="140" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7ov1)"><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="31.47" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(245,245,247)">Day</text><rect x="62" y="23" width="46.3" height="40" rx="20" fill="rgba(0,0,0,0.5)" filter="url(#svgimg7sh3)"/><rect x="62" y="22" width="46.3" height="40" rx="20" fill="rgb(28,28,30)"/><rect x="62.5" y="22.5" width="45" height="39" rx="19.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><text x="70" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(138,203,255)">Week</text><rect x="108.5" y="22.5" width="50" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="116.28" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(245,245,247)">Month</text></g></g></g></g></g></g></svg>

package/docs/design/templates/segmented-control.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 268" width="492" height="268"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="88"/></clipPath><clipPath id="cp1"><rect x="16" y="164" width="460" height="88"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="460" height="88" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="142" width="460" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="164" width="460" height="88" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="268" 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)">Equal-width rounded</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="460" height="88"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="20" y="20" width="210.3" height="44"/></clipPath><clipPath id="svgimg4ov1"><rect x="21" y="21" width="208.3" height="42" rx="11"/></clipPath><filter id="svgimg4sh2" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="svgimg4ct3"><rect x="38.7" y="36" width="35.3" height="12"/></clipPath><clipPath id="svgimg4ct4"><rect x="114.1" y="36" width="22" height="12"/></clipPath><clipPath id="svgimg4ct5"><rect x="168.5" y="36" width="50.8" height="12"/></clipPath></defs><g clip-path="url(#svgimg4cp0)"><rect x="20" y="20" width="210.3" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="209" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/></g><g clip-path="url(#svgimg4cp0)"><g clip-path="url(#svgimg4ov1)"><rect x="22" y="23" width="68.8" height="40" rx="10" fill="rgba(0,0,0,0.14)" filter="url(#svgimg4sh2)"/><rect x="22" y="22" width="68.8" height="40" rx="10" fill="rgb(255,255,255)"/><rect x="22.5" y="22.5" width="68" height="39" rx="9.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="38.7" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(12,98,243)">Board</text><rect x="91.5" y="22.5" width="68" height="39" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="114.13" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">List</text><rect x="160.5" y="22.5" width="67" height="39" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="168.5" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">Timeline</text></g></g></g></g></g></g><text x="16" y="154" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Pill, small</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="164" width="460" height="88"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 164)"><defs><clipPath id="svgimg7cp0"><rect x="20" y="20" width="141.4" height="44"/></clipPath><clipPath id="svgimg7ov1"><rect x="21" y="21" width="139.4" height="42" rx="21"/></clipPath><clipPath id="svgimg7ct2"><rect x="31.5" y="36.5" width="21.1" height="11"/></clipPath><filter id="svgimg7sh3" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="svgimg7ct4"><rect x="70" y="36.5" width="30.3" height="11"/></clipPath><clipPath id="svgimg7ct5"><rect x="116.3" y="36.5" width="35.1" height="11"/></clipPath></defs><g clip-path="url(#svgimg7cp0)"><rect x="20" y="20" width="141.4" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="140" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7ov1)"><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="31.47" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(110,110,115)">Day</text><rect x="62" y="23" width="46.3" height="40" rx="20" fill="rgba(0,0,0,0.14)" filter="url(#svgimg7sh3)"/><rect x="62" y="22" width="46.3" height="40" rx="20" fill="rgb(255,255,255)"/><rect x="62.5" y="22.5" width="45" height="39" rx="19.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="70" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(12,98,243)">Week</text><rect x="108.5" y="22.5" width="50" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="116.28" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(110,110,115)">Month</text></g></g></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 268" width="492" height="268"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="88"/></clipPath><clipPath id="cp1"><rect x="16" y="164" width="460" height="88"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="460" height="88" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="142" width="460" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="164" width="460" height="88" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="268" 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)">Equal-width rounded</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="460" height="88"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="20" y="20" width="210.3" height="44"/></clipPath><clipPath id="svgimg4ov1"><rect x="21" y="21" width="208.3" height="42" rx="11"/></clipPath><filter id="svgimg4sh2" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="svgimg4ct3"><rect x="38.7" y="36" width="35.3" height="12"/></clipPath><clipPath id="svgimg4ct4"><rect x="114.1" y="36" width="22" height="12"/></clipPath><clipPath id="svgimg4ct5"><rect x="168.5" y="36" width="50.8" height="12"/></clipPath></defs><g clip-path="url(#svgimg4cp0)"><rect x="20" y="20" width="210.3" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="209" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/></g><g clip-path="url(#svgimg4cp0)"><g clip-path="url(#svgimg4ov1)"><rect x="22" y="23" width="68.8" height="40" rx="10" fill="rgba(0,0,0,0.14)" filter="url(#svgimg4sh2)"/><rect x="22" y="22" width="68.8" height="40" rx="10" fill="rgb(255,255,255)"/><rect x="22.5" y="22.5" width="68" height="39" rx="9.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="38.7" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(12,98,243)">Board</text><rect x="91.5" y="22.5" width="68" height="39" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="114.13" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(29,29,31)">List</text><rect x="160.5" y="22.5" width="67" height="39" rx="9.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="168.5" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(29,29,31)">Timeline</text></g></g></g></g></g></g><text x="16" y="154" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Pill, small</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="164" width="460" height="88"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 164)"><defs><clipPath id="svgimg7cp0"><rect x="20" y="20" width="141.4" height="44"/></clipPath><clipPath id="svgimg7ov1"><rect x="21" y="21" width="139.4" height="42" rx="21"/></clipPath><clipPath id="svgimg7ct2"><rect x="31.5" y="36.5" width="21.1" height="11"/></clipPath><filter id="svgimg7sh3" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="svgimg7ct4"><rect x="70" y="36.5" width="30.3" height="11"/></clipPath><clipPath id="svgimg7ct5"><rect x="116.3" y="36.5" width="35.1" height="11"/></clipPath></defs><g clip-path="url(#svgimg7cp0)"><rect x="20" y="20" width="141.4" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="140" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7ov1)"><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="31.47" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(29,29,31)">Day</text><rect x="62" y="23" width="46.3" height="40" rx="20" fill="rgba(0,0,0,0.14)" filter="url(#svgimg7sh3)"/><rect x="62" y="22" width="46.3" height="40" rx="20" fill="rgb(255,255,255)"/><rect x="62.5" y="22.5" width="45" height="39" rx="19.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><text x="70" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(12,98,243)">Week</text><rect x="108.5" y="22.5" width="50" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="116.28" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(29,29,31)">Month</text></g></g></g></g></g></g></svg>

package/docs/layout.md

@@ -36,6 +36,37 @@ size) tall, and below that lets the whole pane scroll as one column, header,
 content, and footer together, so the content keeps its natural height. The
 default `fixed` always pins them.
 
+### Lowered work surfaces
+
+Set `appearance="sunken"` when the work area itself should use the lowered
+surface color, including blank space below short content and the scroll
+viewport. The default appearance is unchanged. The fixed Pane paints its
+content scroller; with `chromePlacement="auto"`, the Pane root paints the
+surface because it becomes the scroller in a short viewport. Header and footer
+chrome stay on the normal surface. No second scroll container or
+`SunkenPanel` wrapper is needed.
+For custom chrome colors in auto mode, set `--kui-pane-chrome-background`
+on the Pane; it defaults to `--kui-color-surface`.
+
+```tsx
+<Pane appearance="sunken" footer={<Composer />}>
+  <Conversation />
+</Pane>
+```
+
+`PaneConfig.appearance` forwards through Workbench `mainPane`, panel `pane`,
+and CollapsiblePanel `pane`. Workbench also applies that choice to its main or
+panel region when it renders no Pane chrome. Set `appearance: "sunken"` on a
+`NavStackView` or `TabScaffoldTab` when its view or scene owns scrolling.
+For a `SplitView`, put a `Pane` in the list or detail region and set its
+appearance; SplitView only arranges the regions and does not own their scroll.
+Choose the innermost owner when composing layouts.
+
+The color uses `--kui-sunken-panel-background`, falling back to
+`--kui-color-surface-lowered`, just like `SunkenPanel`. Select one scroll owner
+in a nested layout so a translucent override paints once. The public color
+override may be set at a Pane or layout boundary.
+
 Pass any combination of logical sides to `separators`: `block-start`,
 `block-end`, `inline-start`, and `inline-end`. Every line is off by default and
 each enabled side uses `--kui-pane-separator-width` (1px) and
@@ -331,26 +362,37 @@ insets.
 
 ## Grid
 
-Use `Grid` from `@kerfjs/ui/grid` when a fixed positive number of columns must
-share the available width evenly. Every track is `minmax(0, 1fr)`, so a child
-with wider intrinsic content cannot make its column wider than its peers. Grid
-defaults to the `xs` gap and accepts the same finite spacing names, complete
-typed `CssLength` values, and typed flex-participation contract as Row.
+Use `Grid` from `@kerfjs/ui/grid` when equal-width columns must share the
+available width. Set a fixed positive `columns` count or a typed
+`minColumnWidth` for automatic container-width collapse. Fixed tracks use
+`minmax(0, 1fr)`; responsive tracks use `auto-fit` and cap their minimum at
+100% so a narrow container keeps one column without overflow. Grid defaults
+to the `xs` gap and accepts the same finite spacing names, complete typed
+`CssLength` values, and typed flex-participation contract as Row.
 
 ```tsx
 import { Grid } from "@kerfjs/ui/grid";
+import { px } from "@kerfjs/ui/css-values";
 
 <Grid columns={2} gap="m">
   <label>Quantity <input /></label>
   <label>Unit <input /></label>
 </Grid>;
+
+<Grid minColumnWidth={px(376)} gap="m">
+  <label>Provider <input /></label>
+  <label>Endpoint <input /></label>
+</Grid>;
 ```
 
 `columns` must be a positive safe integer; invalid counts throw instead of
-silently producing invalid CSS. Grid is layout-only and adds no ARIA grid role.
-The application owns child semantics and responsive count changes. Use
-application-owned CSS grid for intrinsic, asymmetric, spanning, auto-fit, or
-masonry tracks, and use `ResizableRegion` when people must adjust a boundary.
+silently producing invalid CSS. Import `px` from `@kerfjs/ui/css-values` for a
+pixel minimum. `columns` and `minColumnWidth` are mutually exclusive. In the
+responsive mode, the container width decides how many equal tracks fit; constrain
+the Grid's outer width when the form should have a maximum count. Grid is
+layout-only and adds no ARIA grid role. The application owns child semantics.
+Use application-owned CSS grid for intrinsic, asymmetric, spanning, or masonry
+tracks, and use `ResizableRegion` when people must adjust a boundary.
 
 ## Row and List alignment
 

package/docs/nav-stack.md

@@ -60,6 +60,11 @@ optional per-view `bottomToolbar`. The component-level
 The back control appears automatically once the stack has more than one entry;
 `wireNavStack`'s `onBack` is where the app pops its own signal.
 
+Set a view's `appearance: "sunken"` to paint its scroll viewport with the
+shared lowered-surface color, including space after short content. When the
+view holds a `Pane` as its only child, set the appearance on the Pane instead
+if its content owns scrolling. See [Lowered work surfaces](layout.md#lowered-work-surfaces).
+
 ## The top toolbar
 
 The top chrome is a real `Toolbar`, so it follows the same zone,

package/docs/split-view.md

@@ -26,6 +26,11 @@ shared interior edge. A pane whose only child is a `Pane` lets that child own
 the insets, and the compact form hands them to its `NavStack`. See
 [Choosing an app layout › Safe areas](app-layouts.md#safe-areas).
 
+For a lowered list or detail background, render a `Pane` in that region with
+`appearance="sunken"`. SplitView arranges regions but does not own their
+vertical scroll; its compact NavStack form can use the view's or nested Pane's
+appearance. See [Lowered work surfaces](layout.md#lowered-work-surfaces).
+
 ## Responsive by device class
 
 `SplitView` is declarative; the app derives `compact` from the device class and

package/docs/sunken-panel.md

@@ -38,6 +38,10 @@ Do not use `SunkenPanel` merely to add padding, as a substitute for pane
 header/content/footer anatomy, or around a child that already owns the same
 outer surface.
 
+For a lowered scrolling work area with Pane chrome, use
+[`Pane appearance="sunken"`](layout.md#lowered-work-surfaces). It paints the
+scroll viewport and empty space without adding a second scroller.
+
 ## Public styling boundary
 
 Override the public properties at the composition boundary:
@@ -48,6 +52,14 @@ 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 public root class is `.kui-sunken-panel`. Prefer the properties above over
 styling descendants. The `square` shape deliberately overrides the radius
 property with zero; use `rounded` when customizing the radius token.

package/docs/tab-scaffold.md

@@ -59,6 +59,11 @@ 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.
 
+Set a tab's `appearance: "sunken"` when its scene owns scrolling and should
+paint the lowered surface behind short or long content. For a scene whose
+only child is a `Pane` or `NavStack`, set appearance on that child's scroll
+owner. See [Lowered work surfaces](layout.md#lowered-work-surfaces).
+
 ## Scroll divider
 
 The bar has no permanent top border. With `wireScrollDividers(appRoot)`

package/docs/webawesome-theme.md

@@ -131,6 +131,68 @@ tiers:
   content stays compact and the action group has a clearer boundary. These two
   parts do not inherit the dialog's shared `--spacing` value.
 
+## 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.
+
 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

package/docs/workbench.md

@@ -80,8 +80,9 @@ an optional `label`. Common shell behavior is configured rather than restyled:
 - `separator: "auto" | "hidden"` controls the owned dock-edge separator;
 - `collapseMotion: "slide" | "fade-slide" | "none"` keeps the track change
   instant while choosing composited content motion;
-- `contentOverflow: "clip" | "auto" | "visible"` lets a drawer temporarily
-  expose an open popup without a descendant override;
+- `contentOverflow: "clip" | "auto" | "visible"` chooses the resting overflow
+  policy. An open descendant `PopupMenu` or Web Awesome dropdown temporarily
+  releases rail/drawer clipping and raises its popup layer automatically;
 - `presentation: "inline" | "overlay" | "hidden"` supports compact overlays
   or a responsive replacement. An overlay rail spans the Workbench height at
   its side and an overlay drawer spans the work-area column at the bottom,
@@ -236,11 +237,14 @@ The `Pane`s and `List`s the Workbench composes around your content are
 configurable the same way:
 
 - `mainPane` (`PaneConfig`: `contentElement`, `contentLabel`, `separators`,
-  `safeAreaEdges`, `chromeDividers`) configures the work area's `Pane`, which exists whenever the
-  work area has a toolbar, `mainHeader`, or `mainFooter`;
+  `safeAreaEdges`, `chromeDividers`, `appearance`) configures the work area's
+  `Pane`, which exists whenever the work area has a toolbar, `mainHeader`, or
+  `mainFooter`. Without that chrome, `appearance: "sunken"` paints the main
+  region's own scroll surface;
 - a panel's `pane` configures the `Pane` a `toolbar` panel's `content` renders
   in — for example `{ contentElement: "nav", contentLabel: "Files" }` for a
-  navigator rail;
+  navigator rail. Without a toolbar, `appearance: "sunken"` paints the panel
+  scroll region;
 - `mainHeaderList` / `mainFooterList` (`ListConfig`: `gap`, `hAlign`,
   `vAlign`, `dividerSides`, `textInsets`, `controlInsets`) configure the
   `List`s holding `mainHeader` / `mainFooter`.
@@ -310,8 +314,8 @@ const stop = wireWorkbench(root, {
 ```
 
 - **Pointer:** dragging the separator resizes the panel live (the wire marks
-  it `data-resizing` and suppresses content motion) and commits the final
-  size to the signal on release.
+  the rail or drawer `data-resizing` and suppresses its content transform
+  transition) and commits the final size to the signal on release.
 - **Keyboard:** focus the separator; arrow keys resize by `step` (16px),
   Shift+arrow by `largeStep` (64px), Home/End jump to `min`/`max`. The
   separator's `aria-valuenow`/`aria-valuemin`/`aria-valuemax` report the size
@@ -506,7 +510,6 @@ with state-derived props:
   collapsed={!drawerVisible.value}
   separator={magnified.value ? "hidden" : "auto"}
   collapseMotion="fade-slide"
-  contentOverflow={createMenuOpen.value ? "visible" : "clip"}
   presentation={mobile.value ? "overlay" : "inline"}
   restoreControl={
     <ToolbarControlGroup label="Terminals" single>
@@ -528,8 +531,10 @@ collapse slides it out at the resized width. A collapsed,
 overlay, or hidden region is not resizeable. Together these policies replace
 app CSS for separator suppression, instant-track/composited-content collapse,
 popup overflow, mobile overlay/hidden replacement, resize-transition guards,
-and safe-area restore placement. The app still owns the signals and decides
-when each policy applies.
+and safe-area restore placement. A descendant `PopupMenu` or Web Awesome
+dropdown with `open` releases clipping for its lifecycle, so menu events need
+not rerender the region. The app still owns the other signals and decides when
+each policy applies.
 
 ## Public styling boundary
 
@@ -556,6 +561,13 @@ takes that edge away, and collapsing it (or presenting it as an overlay) hands
 the edge back. A region whose only child is a `Pane` or layout lets that child
 own the insets. See [Choosing an app layout › Safe areas](app-layouts.md#safe-areas).
 
+Workbench projects panel presentation, collapse, and responsive breakpoint
+state onto its own region attributes. Its stylesheet then matches those local
+attributes instead of searching descendants during list updates. It clears the
+edge context on each region, while a sole Pane or layout child receives the
+insets it owns. Applications still pass arbitrary `main` and panel content;
+they need no marker classes or extra wrappers.
+
 ## How the collapse animates
 
 Collapsing snaps the panel's flex track to zero in a single reflow (so the work

package/llms.txt

@@ -161,6 +161,9 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   expanded trailing control to a full second row at `responsiveAt`; the leading
   title remains above it. Public leading-min-width, trailing-gap/justify, and
   per-zone inline-padding tokens cover app-specific toolbar geometry.
+  `--kui-toolbar-inset: 0px` removes an embedded Toolbar's outer padding and
+  corresponding minimum-height allowance while preserving its zone gap and
+  safe-area compensation.
 - **Position region restore controls declaratively.** A ResizableRegion has a
   background token, `contentOverflow="visible"` for an anchored popup,
   top/bottom `restorePosition`, typed `restoreInset`, and
@@ -172,6 +175,9 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   `divider` owns row separators and `state="drag-target"` paints the drop
   target. Public ListItem tokens set row, icon, label, and trailing geometry;
   ListHeader height, title padding, and border tokens tune section density.
+  For a filled command list, scope `--kui-list-item-background`,
+  `--kui-list-item-border`, `--kui-list-item-hover-border`, and
+  `--kui-list-item-selected-border` at the list or row boundary.
 - **Use `Row` for horizontal and `List` for vertical layout.** Both expose
   physical `hAlign`/`vAlign` props and typed gaps. Row defaults to left/full,
   an `xs` gap, and no wrapping; List retains full/top and zero-gap defaults.
@@ -190,11 +196,11 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   or `foregroundColorVar()`; 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`.
-- **Use `Grid` for a fixed positive count of equal-width columns.** It uses
-  zero-minimum fractional tracks, so intrinsic content cannot make one column
-  wider than its peers. The app owns responsive count changes; 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.
+- **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.
 - **Give a layout root `fill`, not a frame `Pane`.** A Row, List, or Grid that
   is the sole layout root of a definite-height parent takes its full height
   with `fill` and carries safe `data-*` markers through `rootAttributes`.
@@ -234,6 +240,13 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   toolbar filter menu adds `selectedPresentation="icon-only"` and a fixed
   `triggerIcon`: the trigger shows that icon plus a count badge while any
   choice is chosen, and its accessible name ends with the chosen labels.
+  Set `caret={false}` on an icon-only toolbar Select to make a round trigger;
+  the default keeps the visible caret.
+  `SelectChoice.disabled` keeps an unavailable option visible but unselectable;
+  `disabledReason` adds its tooltip. For multiple selects, opt in to
+  `selectAllLabel` and `clearLabel` footer buttons to select enabled choices
+  or clear the value through ordinary change events. The app owns the updated
+  controlled value and localized action labels.
   Icon-only Selects (single or multiple) and icon-only `PopupMenu`s show an
   `aria-hidden` Web Awesome help tag repeating that name (and a Select's
   choice) on hover and keyboard focus, hidden while the popup is open; the
@@ -264,7 +277,8 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   in a `single` `ToolbarControlGroup` with `nestedDropdown`; never hand-write
   `wa-dropdown` markup for a menu. Let the group size the trigger from its icon,
   localized text, and caret. `PopupMenu` items also support nested `submenu`
-  actions, checked or trailing choice marks, danger tone, and disabled reasons;
+  actions, headings, dividers, checked or trailing choice marks, danger tone,
+  and disabled reasons; nested headings/dividers stay out of keyboard choices;
   use `context` with `openPopupMenuAt`/`closePopupMenu` for pointer-anchored row
   menus. Do not force a dropdown or button width. Nothing
   wraps inside a group: an icon sits beside its label on one row, and a
@@ -285,6 +299,8 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   app-owned content below. Do not create a private heading wrapper or restyle the
   toolbar. A narrow peripheral rail or drawer, where extra-large would truncate
   at its minimum size, names itself with the default `ToolbarText` size.
+  `ToolbarText size="xlarge-fixed"` keeps the 20px `--kui-font-l` heading step;
+  `xlarge` retains the responsive page-title clamp.
 - **Use `Text` for ordinary semantic headings, paragraphs, and inline secondary
   text outside toolbar title zones.** Omit `variant` for the default `p`, pass
   `h1`–`h6` based on the document outline, or use `variant="span"` inside a row,
@@ -358,7 +374,14 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   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; change
-  `revision` to replace its DOM-owned text programmatically. The one richer case is `wireTokenSearchFields`, which manages the
+  `revision` to replace unmanaged DOM-owned text programmatically, or call
+  `model.replace({ query, tokens })` for a model-managed field. In grammar-assisted
+  search, a model rule's `suggest(input, state)` receives current committed tokens
+  so suggestions can omit selected values; one-argument callbacks still work.
+  A sibling helper can call `model.commit(value)` for the active `name:` prefix
+  even when that value is not suggested; invalid values and missing prefixes
+  leave state unchanged.
+  The one richer case is `wireTokenSearchFields`, which manages the
   collapsible field's expand/collapse/focus by default (on, per-behavior opt-out) and
   exposes the `expanded` signal on its handle — bind it in render or hand in your own
   via `collapsible.signals`. Do not hand-roll open/collapse/focus that helper
@@ -404,8 +427,13 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   closed value ellipsizes when space runs out.
 - **Configure application tabs at their owners.** AppTab's `icon-only`
   presentation keeps `name` accessible, `labelMaxWidth` ellipsizes a long name,
-  and `attention` uses `--kui-app-tab-attention-color`. TabBar's public
+  `nameOverflow="visible"` shows the full name during inline loading, and
+  `dropTarget` highlights a drag-over without changing selection. `attention`
+  uses `--kui-app-tab-attention-color`. TabBar's public
   `--kui-tab-bar-strip-*` tokens set compact strip geometry.
+  Set `pinned` on the first AppTab to keep it visible within a scrolling
+  tablist; it remains in keyboard order. Use `--kui-app-tab-pinned-background`
+  for the surrounding surface and keep that backdrop opaque.
 - **Use `Badge` for compact non-interactive metadata.** Configure its semantic
   tone, appearance, shape, and size instead of creating badge CSS in an app or
   consuming component. Use a real button or link for interactive content.
@@ -413,6 +441,10 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   takes no children, and needs a `label` (announced as an image) or
   `ariaHidden` when its owner announces it. A `TabScaffold` tab shows the dot
   with `badge: true` plus its required `badgeLabel`.
+- **Use `Chip` for removable tags.** Give the native remove button a delegated
+  `removeAction` and a specific `removeLabel`; the application updates the tag
+  list. `itemId` identifies the chip to the action handler. `size="compact"`
+  gives a 20px chip and 16px remove button; `disabled` disables removal.
 
 ## Public exports
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.60",
+  "version": "5.0.0-beta.62",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",
@@ -65,6 +65,11 @@
       "browser": "./dist/browser/badge.js",
       "import": "./dist/badge.js"
     },
+    "./chip": {
+      "types": "./dist/chip.d.ts",
+      "browser": "./dist/browser/chip.js",
+      "import": "./dist/chip.js"
+    },
     "./toolbar": {
       "types": "./dist/toolbar.d.ts",
       "browser": "./dist/browser/toolbar.js",
@@ -336,6 +341,7 @@
     "./styles.css": "./dist/styles/styles.css",
     "./lucide-icon.css": "./dist/styles/lucide-icon.css",
     "./badge.css": "./dist/styles/badge.css",
+    "./chip.css": "./dist/styles/chip.css",
     "./disclosure-arrow.css": "./dist/styles/disclosure-arrow.css",
     "./toolbar.css": "./dist/styles/toolbar.css",
     "./toolbar-control-group.css": "./dist/styles/toolbar-control-group.css",