@kerfjs/ui 5.0.0-beta.34 → 5.0.0-beta.36

package/docs/component-integration.md

@@ -0,0 +1,63 @@
+# Public component integration workflow
+
+The canonical `ai/component-catalog.json` is also the integration manifest for
+first-party public components. Every entry with `source: "kerf"` and
+`kind: "component"` projects into the package, build, root API, catalog demo,
+and AI authoring surfaces. This keeps a new List-like primitive from reaching a
+late build or release gate before an omitted surface is discovered.
+
+Author the implementation, CSS, catalog facts, demo, and behavior tests first.
+Then run:
+
+```bash
+npm run component-integrations:dry-run
+```
+
+The dry run reports every mismatched projection together, using diff-like
+`expected` and `actual` lines without changing files or failing the command.
+Resolve the complete report, build the package, regenerate signatures with
+`npm run ai:signatures:sync`, and refresh reviewed compatibility digests with
+`npm run ai:compatibility:sync`. `npm run check:component-integrations` runs the
+same validator in failing CI mode, and the package `check` gate includes it.
+
+For each catalog component, the validator checks:
+
+- the source module and stylesheet;
+- the tsup entry and typed package subpath, including the browser-conditioned
+  entry when the catalog declares `browserImport`;
+- the CSS package export;
+- root-barrel exposure for browser-conditioned components;
+- the stable catalog route, demo module, and exhaustive demo registry; and
+- inclusion of the public subpath in the generated AI signature reference.
+
+The existing catalog sync and compatibility gates remain responsible for the
+typed catalog projections, catalog count/order, and artifact digests. Public
+API signatures derive component subpaths from the catalog, so a newly cataloged
+component can no longer be silently omitted from that corpus.
+
+Non-component helpers, wiring modules, compositions, recipes, and development
+tools remain explicit package surfaces. They do not masquerade as visual
+components merely to enter this workflow.
+
+## Change-local verification and bundle review
+
+Run `npm run check:change` after changing a public component. It synchronizes
+both catalog projections, declarations, AI signatures, and compatibility
+digests; names every checked-in projection changed by that synchronization;
+runs the catalog/component contracts, unit coverage, consumer bundle tests,
+source and packed type contracts; builds the production catalog; and reports
+the exact gzip byte delta from the last reviewed baseline. The broader
+`npm run check` remains the release gate.
+
+Intentional bundle changes use the same workflow with an explicit review
+reason:
+
+```bash
+npm run check:change -- --update-bundle-budget \
+  --reason "Added the reviewed List detail states and keyboard behavior"
+```
+
+That mode writes `demo-bundle-budget.json`, records the previous and new exact
+measurements and budgets with the reason and timestamp, and rounds the total
+budget to the next 100 bytes. Do not edit the budget or add a history comment
+by hand.

package/docs/component-selection.md

@@ -66,7 +66,7 @@ contract lands before the 5.0 stable release so misspelled tokens and incomplete
 expressions fail during typechecking rather than in the browser.
 
 Other CSS-valued props use distinct contracts: `flex()` creates `CssFlex` for
-`List.flex`; `Skeleton` dimensions take typed lengths (plus finite intrinsic
+`Row.flex` and `List.flex`; `Skeleton` dimensions take typed lengths (plus finite intrinsic
 keywords for width/height); and `uiColor()`/`colorVar()` create `CssColor` for
 `SelectChoice.color`. Do not substitute one brand for another. Row components
 have no declaration-string `style` prop; use `className`, documented public

package/docs/design/templates/list-header/inline-action-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="29" y="34.5" width="54.2" height="15"/></clipPath><clipPath id="ct1"><rect x="29" y="34.5" width="54.2" height="15"/></clipPath><clipPath id="cp2"><rect x="109" y="33" width="18.2" height="18"/></clipPath></defs><rect x="20.5" y="20.5" width="71" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">QUEUED</text></g></g><rect x="100.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp2)"><g color="rgb(174, 174, 178)"><clipPath id="svgic3"><rect x="109.2" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgic3)"><g transform="matrix(.75 0 0 .75 109.188 33)"><path d="M5 12h14" 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="M12 5v14" 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></svg>

package/docs/design/templates/list-header/inline-action.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="29" y="34.5" width="54.2" height="15"/></clipPath><clipPath id="ct1"><rect x="29" y="34.5" width="54.2" height="15"/></clipPath><clipPath id="cp2"><rect x="109" y="33" width="18.2" height="18"/></clipPath></defs><rect x="20.5" y="20.5" width="71" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">QUEUED</text></g></g><rect x="100.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp2)"><g color="rgb(110, 110, 115)"><clipPath id="svgic3"><rect x="109.2" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgic3)"><g transform="matrix(.75 0 0 .75 109.188 33)"><path d="M5 12h14" 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="M12 5v14" 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></svg>

package/docs/design/templates/list-header-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 536" width="452" height="536"><defs><clipPath id="cp0"><rect x="16" y="38" width="420" height="92"/></clipPath><clipPath id="cp1"><rect x="16" y="168" width="420" height="92"/></clipPath><clipPath id="cp2"><rect x="16" y="298" width="420" height="92"/></clipPath><clipPath id="cp3"><rect x="16" y="428" width="420" height="92"/></clipPath><clipPath id="ct4"><rect x="16" y="16" width="420" height="22"/></clipPath><clipPath id="irc5"><rect x="16" y="38" width="420" height="92" rx="0"/></clipPath><clipPath id="ct7"><rect x="16" y="146" width="420" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="168" width="420" height="92" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="276" width="420" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="298" width="420" height="92" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="406" width="420" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="428" width="420" height="92" rx="0"/></clipPath></defs><rect x="0" y="0" width="452" height="536" 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)">Label with an action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc5)"><clipPath id="svgimg6vclip"><rect x="16" y="38" width="420" height="92"/></clipPath><g clip-path="url(#svgimg6vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg6cp0"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="svgimg6ct1"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="svgimg6cp2"><rect x="365" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="319" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp0)"><g clip-path="url(#svgimg6ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">TEAM MEMBERS</text></g></g><rect x="356.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp2)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg6svgic3"><rect x="365" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg6svgic3)"><g transform="matrix(.75 0 0 .75 365 33)"><path d="M5 12h14" 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="M12 5v14" 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></g></g></g><text x="16" y="158" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Label with a count pill</text><g clip-path="url(#cp1)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="168" width="420" height="92"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 168)"><defs><clipPath id="svgimg9cp0"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="svgimg9ct1"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="svgimg9ct2"><rect x="140" y="31.2" width="23" height="21.6"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg9cp0)"><g clip-path="url(#svgimg9ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">OPEN TICKETS</text></g></g><rect x="140" y="31.2" width="23" height="21.6" rx="10.8" fill="rgb(17,17,19)"/><text x="145.64" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(174,174,178)">12</text></g></g></g></g><text x="16" y="288" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Disclosure toggle, collapsed</text><g clip-path="url(#cp2)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="298" width="420" height="92"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 298)"><defs><clipPath id="svgimg12cp0"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="svgimg12ct1"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="svgimg12cp2"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg12cp0)"><g clip-path="url(#svgimg12ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">ARCHIVED</text></g></g><g clip-path="url(#svgimg12cp2)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg12svgic3"><rect x="362" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg12svgic3)"><g transform="matrix(.75 0 0 .75 362 33)"><path d="m9 18 6-6-6-6" 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></g></g></g><text x="16" y="418" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Disclosure toggle, expanded</text><g clip-path="url(#cp3)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="428" width="420" height="92"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 428)"><defs><clipPath id="svgimg15cp0"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="svgimg15ct1"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="svgimg15ct2"><rect x="96.8" y="31.2" width="21.6" height="21.6"/></clipPath><clipPath id="svgimg15cp3"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp0)"><g clip-path="url(#svgimg15ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">RECENT</text></g></g><rect x="96.8" y="31.2" width="21.6" height="21.6" rx="10.8" fill="rgb(17,17,19)"/><text x="104.25" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(174,174,178)">5</text><g transform="rotate(90 371 42)"><g clip-path="url(#svgimg15cp3)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg15svgic4"><rect x="362" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg15svgic4)"><g transform="matrix(.75 0 0 .75 362 33)"><path d="m9 18 6-6-6-6" 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></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 666" width="452" height="666"><defs><clipPath id="cp0"><rect x="16" y="38" width="420" height="92"/></clipPath><clipPath id="cp1"><rect x="16" y="168" width="420" height="92"/></clipPath><clipPath id="cp2"><rect x="16" y="298" width="420" height="92"/></clipPath><clipPath id="cp3"><rect x="16" y="428" width="420" height="92"/></clipPath><clipPath id="cp4"><rect x="16" y="558" width="420" height="92"/></clipPath><clipPath id="ct5"><rect x="16" y="16" width="420" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="38" width="420" height="92" rx="0"/></clipPath><clipPath id="ct8"><rect x="16" y="146" width="420" height="22"/></clipPath><clipPath id="irc9"><rect x="16" y="168" width="420" height="92" rx="0"/></clipPath><clipPath id="ct11"><rect x="16" y="276" width="420" height="22"/></clipPath><clipPath id="irc12"><rect x="16" y="298" width="420" height="92" rx="0"/></clipPath><clipPath id="ct14"><rect x="16" y="406" width="420" height="22"/></clipPath><clipPath id="irc15"><rect x="16" y="428" width="420" height="92" rx="0"/></clipPath><clipPath id="ct17"><rect x="16" y="536" width="420" height="22"/></clipPath><clipPath id="irc18"><rect x="16" y="558" width="420" height="92" rx="0"/></clipPath></defs><rect x="0" y="0" width="452" height="666" 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)">Label with an action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="38" width="420" height="92"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg7cp0"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="svgimg7ct1"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="svgimg7cp2"><rect x="365" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="319" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp0)"><g clip-path="url(#svgimg7ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">TEAM MEMBERS</text></g></g><rect x="356.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp2)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg7svgic3"><rect x="365" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg7svgic3)"><g transform="matrix(.75 0 0 .75 365 33)"><path d="M5 12h14" 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="M12 5v14" 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></g></g></g><text x="16" y="158" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Label with a count pill</text><g clip-path="url(#cp1)"><g clip-path="url(#irc9)"><clipPath id="svgimg10vclip"><rect x="16" y="168" width="420" height="92"/></clipPath><g clip-path="url(#svgimg10vclip)"><g transform="translate(16 168)"><defs><clipPath id="svgimg10cp0"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="svgimg10ct1"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="svgimg10ct2"><rect x="140" y="31.2" width="23" height="21.6"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg10cp0)"><g clip-path="url(#svgimg10ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">OPEN TICKETS</text></g></g><rect x="140" y="31.2" width="23" height="21.6" rx="10.8" fill="rgb(17,17,19)"/><text x="145.64" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(174,174,178)">12</text></g></g></g></g><text x="16" y="288" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Inline label with an action</text><g clip-path="url(#cp2)"><g clip-path="url(#irc12)"><clipPath id="svgimg13vclip"><rect x="16" y="298" width="420" height="92"/></clipPath><g clip-path="url(#svgimg13vclip)"><g transform="translate(16 298)"><defs><clipPath id="svgimg13cp0"><rect x="29" y="34.5" width="54.2" height="15"/></clipPath><clipPath id="svgimg13ct1"><rect x="29" y="34.5" width="54.2" height="15"/></clipPath><clipPath id="svgimg13cp2"><rect x="109" y="33" width="18.2" height="18"/></clipPath></defs><rect x="20.5" y="20.5" width="71" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg13cp0)"><g clip-path="url(#svgimg13ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">QUEUED</text></g></g><rect x="100.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg13cp2)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg13svgic3"><rect x="109.2" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg13svgic3)"><g transform="matrix(.75 0 0 .75 109.188 33)"><path d="M5 12h14" 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="M12 5v14" 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></g></g></g><text x="16" y="418" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Disclosure toggle, collapsed</text><g clip-path="url(#cp3)"><g clip-path="url(#irc15)"><clipPath id="svgimg16vclip"><rect x="16" y="428" width="420" height="92"/></clipPath><g clip-path="url(#svgimg16vclip)"><g transform="translate(16 428)"><defs><clipPath id="svgimg16cp0"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="svgimg16ct1"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="svgimg16cp2"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg16cp0)"><g clip-path="url(#svgimg16ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">ARCHIVED</text></g></g><g clip-path="url(#svgimg16cp2)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg16svgic3"><rect x="362" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg16svgic3)"><g transform="matrix(.75 0 0 .75 362 33)"><path d="m9 18 6-6-6-6" 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></g></g></g><text x="16" y="548" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Disclosure toggle, expanded</text><g clip-path="url(#cp4)"><g clip-path="url(#irc18)"><clipPath id="svgimg19vclip"><rect x="16" y="558" width="420" height="92"/></clipPath><g clip-path="url(#svgimg19vclip)"><g transform="translate(16 558)"><defs><clipPath id="svgimg19cp0"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="svgimg19ct1"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="svgimg19ct2"><rect x="96.8" y="31.2" width="21.6" height="21.6"/></clipPath><clipPath id="svgimg19cp3"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg19cp0)"><g clip-path="url(#svgimg19ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">RECENT</text></g></g><rect x="96.8" y="31.2" width="21.6" height="21.6" rx="10.8" fill="rgb(17,17,19)"/><text x="104.25" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(174,174,178)">5</text><g transform="rotate(90 371 42)"><g clip-path="url(#svgimg19cp3)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg19svgic4"><rect x="362" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg19svgic4)"><g transform="matrix(.75 0 0 .75 362 33)"><path d="m9 18 6-6-6-6" 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></g></g></g></g></svg>

package/docs/design/templates/list-header.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 536" width="452" height="536"><defs><clipPath id="cp0"><rect x="16" y="38" width="420" height="92"/></clipPath><clipPath id="cp1"><rect x="16" y="168" width="420" height="92"/></clipPath><clipPath id="cp2"><rect x="16" y="298" width="420" height="92"/></clipPath><clipPath id="cp3"><rect x="16" y="428" width="420" height="92"/></clipPath><clipPath id="ct4"><rect x="16" y="16" width="420" height="22"/></clipPath><clipPath id="irc5"><rect x="16" y="38" width="420" height="92" rx="0"/></clipPath><clipPath id="ct7"><rect x="16" y="146" width="420" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="168" width="420" height="92" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="276" width="420" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="298" width="420" height="92" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="406" width="420" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="428" width="420" height="92" rx="0"/></clipPath></defs><rect x="0" y="0" width="452" height="536" 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)">Label with an action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc5)"><clipPath id="svgimg6vclip"><rect x="16" y="38" width="420" height="92"/></clipPath><g clip-path="url(#svgimg6vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg6cp0"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="svgimg6ct1"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="svgimg6cp2"><rect x="365" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="319" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp0)"><g clip-path="url(#svgimg6ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">TEAM MEMBERS</text></g></g><rect x="356.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg6cp2)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg6svgic3"><rect x="365" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg6svgic3)"><g transform="matrix(.75 0 0 .75 365 33)"><path d="M5 12h14" 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="M12 5v14" 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></g></g></g><text x="16" y="158" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Label with a count pill</text><g clip-path="url(#cp1)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="168" width="420" height="92"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 168)"><defs><clipPath id="svgimg9cp0"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="svgimg9ct1"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="svgimg9ct2"><rect x="140" y="31.2" width="23" height="21.6"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg9cp0)"><g clip-path="url(#svgimg9ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">OPEN TICKETS</text></g></g><rect x="140" y="31.2" width="23" height="21.6" rx="10.8" fill="rgb(242,242,247)"/><text x="145.64" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(110,110,115)">12</text></g></g></g></g><text x="16" y="288" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Disclosure toggle, collapsed</text><g clip-path="url(#cp2)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="298" width="420" height="92"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 298)"><defs><clipPath id="svgimg12cp0"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="svgimg12ct1"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="svgimg12cp2"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg12cp0)"><g clip-path="url(#svgimg12ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">ARCHIVED</text></g></g><g clip-path="url(#svgimg12cp2)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg12svgic3"><rect x="362" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg12svgic3)"><g transform="matrix(.75 0 0 .75 362 33)"><path d="m9 18 6-6-6-6" 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></g></g></g><text x="16" y="418" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Disclosure toggle, expanded</text><g clip-path="url(#cp3)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="428" width="420" height="92"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 428)"><defs><clipPath id="svgimg15cp0"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="svgimg15ct1"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="svgimg15ct2"><rect x="96.8" y="31.2" width="21.6" height="21.6"/></clipPath><clipPath id="svgimg15cp3"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp0)"><g clip-path="url(#svgimg15ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">RECENT</text></g></g><rect x="96.8" y="31.2" width="21.6" height="21.6" rx="10.8" fill="rgb(242,242,247)"/><text x="104.25" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(110,110,115)">5</text><g transform="rotate(90 371 42)"><g clip-path="url(#svgimg15cp3)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg15svgic4"><rect x="362" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg15svgic4)"><g transform="matrix(.75 0 0 .75 362 33)"><path d="m9 18 6-6-6-6" 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></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 666" width="452" height="666"><defs><clipPath id="cp0"><rect x="16" y="38" width="420" height="92"/></clipPath><clipPath id="cp1"><rect x="16" y="168" width="420" height="92"/></clipPath><clipPath id="cp2"><rect x="16" y="298" width="420" height="92"/></clipPath><clipPath id="cp3"><rect x="16" y="428" width="420" height="92"/></clipPath><clipPath id="cp4"><rect x="16" y="558" width="420" height="92"/></clipPath><clipPath id="ct5"><rect x="16" y="16" width="420" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="38" width="420" height="92" rx="0"/></clipPath><clipPath id="ct8"><rect x="16" y="146" width="420" height="22"/></clipPath><clipPath id="irc9"><rect x="16" y="168" width="420" height="92" rx="0"/></clipPath><clipPath id="ct11"><rect x="16" y="276" width="420" height="22"/></clipPath><clipPath id="irc12"><rect x="16" y="298" width="420" height="92" rx="0"/></clipPath><clipPath id="ct14"><rect x="16" y="406" width="420" height="22"/></clipPath><clipPath id="irc15"><rect x="16" y="428" width="420" height="92" rx="0"/></clipPath><clipPath id="ct17"><rect x="16" y="536" width="420" height="22"/></clipPath><clipPath id="irc18"><rect x="16" y="558" width="420" height="92" rx="0"/></clipPath></defs><rect x="0" y="0" width="452" height="666" 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)">Label with an action</text><g clip-path="url(#cp0)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="38" width="420" height="92"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg7cp0"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="svgimg7ct1"><rect x="37" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="svgimg7cp2"><rect x="365" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="319" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp0)"><g clip-path="url(#svgimg7ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">TEAM MEMBERS</text></g></g><rect x="356.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7cp2)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg7svgic3"><rect x="365" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg7svgic3)"><g transform="matrix(.75 0 0 .75 365 33)"><path d="M5 12h14" 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="M12 5v14" 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></g></g></g><text x="16" y="158" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Label with a count pill</text><g clip-path="url(#cp1)"><g clip-path="url(#irc9)"><clipPath id="svgimg10vclip"><rect x="16" y="168" width="420" height="92"/></clipPath><g clip-path="url(#svgimg10vclip)"><g transform="translate(16 168)"><defs><clipPath id="svgimg10cp0"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="svgimg10ct1"><rect x="37" y="34.5" width="95" height="15"/></clipPath><clipPath id="svgimg10ct2"><rect x="140" y="31.2" width="23" height="21.6"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg10cp0)"><g clip-path="url(#svgimg10ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">OPEN TICKETS</text></g></g><rect x="140" y="31.2" width="23" height="21.6" rx="10.8" fill="rgb(242,242,247)"/><text x="145.64" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(110,110,115)">12</text></g></g></g></g><text x="16" y="288" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Inline label with an action</text><g clip-path="url(#cp2)"><g clip-path="url(#irc12)"><clipPath id="svgimg13vclip"><rect x="16" y="298" width="420" height="92"/></clipPath><g clip-path="url(#svgimg13vclip)"><g transform="translate(16 298)"><defs><clipPath id="svgimg13cp0"><rect x="29" y="34.5" width="54.2" height="15"/></clipPath><clipPath id="svgimg13ct1"><rect x="29" y="34.5" width="54.2" height="15"/></clipPath><clipPath id="svgimg13cp2"><rect x="109" y="33" width="18.2" height="18"/></clipPath></defs><rect x="20.5" y="20.5" width="71" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg13cp0)"><g clip-path="url(#svgimg13ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">QUEUED</text></g></g><rect x="100.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg13cp2)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg13svgic3"><rect x="109.2" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg13svgic3)"><g transform="matrix(.75 0 0 .75 109.188 33)"><path d="M5 12h14" 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="M12 5v14" 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></g></g></g><text x="16" y="418" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Disclosure toggle, collapsed</text><g clip-path="url(#cp3)"><g clip-path="url(#irc15)"><clipPath id="svgimg16vclip"><rect x="16" y="428" width="420" height="92"/></clipPath><g clip-path="url(#svgimg16vclip)"><g transform="translate(16 428)"><defs><clipPath id="svgimg16cp0"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="svgimg16ct1"><rect x="37" y="34.5" width="67.5" height="15"/></clipPath><clipPath id="svgimg16cp2"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg16cp0)"><g clip-path="url(#svgimg16ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">ARCHIVED</text></g></g><g clip-path="url(#svgimg16cp2)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg16svgic3"><rect x="362" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg16svgic3)"><g transform="matrix(.75 0 0 .75 362 33)"><path d="m9 18 6-6-6-6" 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></g></g></g><text x="16" y="548" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Disclosure toggle, expanded</text><g clip-path="url(#cp4)"><g clip-path="url(#irc18)"><clipPath id="svgimg19vclip"><rect x="16" y="558" width="420" height="92"/></clipPath><g clip-path="url(#svgimg19vclip)"><g transform="translate(16 558)"><defs><clipPath id="svgimg19cp0"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="svgimg19ct1"><rect x="37" y="34.5" width="51.8" height="15"/></clipPath><clipPath id="svgimg19ct2"><rect x="96.8" y="31.2" width="21.6" height="21.6"/></clipPath><clipPath id="svgimg19cp3"><rect x="362" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg19cp0)"><g clip-path="url(#svgimg19ct1)"><text x="37" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">RECENT</text></g></g><rect x="96.8" y="31.2" width="21.6" height="21.6" rx="10.8" fill="rgb(242,242,247)"/><text x="104.25" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(110,110,115)">5</text><g transform="rotate(90 371 42)"><g clip-path="url(#svgimg19cp3)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg19svgic4"><rect x="362" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg19svgic4)"><g transform="matrix(.75 0 0 .75 362 33)"><path d="m9 18 6-6-6-6" 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></g></g></g></g></svg>

package/docs/layout.md

@@ -136,6 +136,26 @@ items, while applying the requested distribution to `align-content` when a
 Row wraps. Prefer the descriptive values in application code; the short and
 CSS-shaped aliases are provided for compact or migrated call sites.
 
+`Row.flex` and `List.flex` share one typed participation contract. Omit the prop
+for the CSS initial value, pass `true` for `1 1 auto`, select the finite
+`"none"`, `"auto"`, or `"initial"` keyword, or use
+`flex(grow, shrink, basis)` from `@kerfjs/ui/css-values` for a complete branded
+shorthand. A `CssLength` is not a flex shorthand, and arbitrary strings are
+rejected by the type contract.
+
+Both components 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.
+
+`ListInsetText` and `ListInsetControl` use the same `sides` vocabulary and
+default to `trbl`. The text wrapper applies its complete 8/1/8 geometry only on
+selected sides; the control wrapper applies its 8px outer margin only on
+selected sides. `ListInsetText.horizontalOnly` remains a deprecated alias for
+`sides="rl"`; an explicit `sides` value takes precedence.
+
 `--kui-space-s` (12px) and `--kui-space-xl` (32px) exist but are **off the
 canonical rhythm** — reach for them only as a deliberate exception, never as a
 default step. Prefer the five canonical tokens so spacing stays legible and

package/docs/ux-demo.md

@@ -2,6 +2,16 @@
 
 Run `npm run dev` from `ui/`. The catalog is a development and review surface, not a second implementation. The development server allows repo-owned assets used by the catalog, and its production bundle uses relative asset URLs so the complete catalog remains intact below preview and proxy paths.
 
+Every Playwright entry point builds current source before the preview server
+starts. `npm run test:e2e -- tests/browser/row.spec.ts` and a direct focused
+`npx playwright test tests/browser/row.spec.ts` both run catalog generation and
+demo-conformance preflights, build the package and production catalog, then
+launch Chromium, Firefox, and WebKit. The build emits
+`source-freshness.json`; browser coverage compares it with an independent hash
+of the current `src/` and `ux-demo/` inputs, so a stale `dist-demo` cannot pass
+after a route or component edit. `npm run demo:serve` remains a preview-only
+command for an already-built catalog.
+
 Seven lazy production-composition routes live under the `Recipes` category.
 Each `?component=recipe-*` route uses public package primitives, real wiring,
 deterministic state, and semantic layout owners from the [recipe guide](./recipes.md).

package/llms.txt

@@ -94,6 +94,10 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
 - **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.
+  Use canonical physical `textInsets` or `controlInsets` sides in
+  `t`/`r`/`b`/`l` order; text geometry wins on overlapping sides.
+  `ListInsetText` and `ListInsetControl` inset every side by default and accept
+  the same `sides` grammar for selective edges.
   List additionally supplies
   optional typed `gap`, `flex`, vertical scrolling, and canonical
   `dividerSides` (`t`/`r`/`b`/`l` order). It adds no list semantics; children own

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.34",
+  "version": "5.0.0-beta.36",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",
@@ -329,11 +329,15 @@
     "dev": "npm run build && vite --config ux-demo/vite.config.ts",
     "demo:build": "npm run build && vite build --config ux-demo/vite.config.ts && node scripts/check-demo-bundle.mjs",
     "demo:serve": "vite preview --config ux-demo/vite.config.ts",
+    "test:e2e:serve": "npm run check:catalog && npm run check:demo-conformance && npm run demo:build && npm run demo:serve",
     "format": "prettier --write . --ignore-unknown",
     "format:css": "prettier --write \"src/**/*.css\" \"ux-demo/**/*.css\"",
     "check:format": "prettier --check . --ignore-unknown",
     "catalog:sync": "node scripts/sync-component-catalog.mjs && node scripts/sync-component-catalog-v2.mjs",
     "catalog:v2:sync": "node scripts/sync-component-catalog-v2.mjs",
+    "check:component-integrations": "node scripts/check-component-integrations.mjs",
+    "component-integrations:dry-run": "node scripts/check-component-integrations.mjs --dry-run",
+    "check:change": "node scripts/check-ui-change.mjs",
     "check:catalog": "node scripts/sync-component-catalog.mjs --check && node scripts/sync-component-catalog-v2.mjs --check && node scripts/check-component-catalog.mjs",
     "check:profile": "node scripts/check-application-ui-profile.mjs",
     "check:demo-conformance": "node scripts/check-catalog-demo-conformance.mjs",
@@ -341,6 +345,8 @@
     "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",
+    "check:ai-compatibility": "node scripts/sync-ai-compatibility.mjs",
+    "ai:compatibility:sync": "node scripts/sync-ai-compatibility.mjs --write",
     "ai:regressions:compile": "node scripts/compile-ai-regression-response.mjs",
     "ai:regressions:prepare": "node scripts/prepare-ai-regression.mjs",
     "ai:regressions:record": "node scripts/record-ai-regression-run.mjs",
@@ -360,8 +366,8 @@
     "test:contract-types:source": "node node_modules/typescript7/bin/tsc -p tests/consumer-types/contracts/tsconfig.source.json",
     "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": "npm run demo:build && playwright test",
-    "check": "npm run check:catalog && npm run check:profile && npm run check:demo-conformance && npm run check:recipes && npm run check:guidance && 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",
+    "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: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",

package/dist/chunk-7JQAQWVC.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/list.tsx"],"names":[],"mappings":";;;;AAgBA,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAoBO,SAAS,IAAA,CAAK;AAAA,EACnB,QAAA;AAAA,EACA,GAAA,GAAM,KAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,MAAA,GAAS,MAAA;AAAA,EACT,MAAA,GAAS,KAAA;AAAA,EACT,UAAA,GAAa,KAAA;AAAA,EACb,YAAA,GAAe,EAAA;AAAA,EACf,SAAA,GAAY;AACd,CAAA,EAAc;AACZ,EAAA,MAAM,QAAA,GACJ,GAAA,KAAQ,IAAA,GACJ,qBAAA,GACA,UAAA,CAAW,QAAA,CAAS,GAAkB,CAAA,GACpC,KAAA,CAAM,GAAkB,CAAA,GACxB,GAAA,IAAO,MAAA;AACf,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,QAAA,GAAW,CAAA,gBAAA,EAAmB,QAAQ,CAAA,CAAA,GAAK,EAAA;AAAA,IAC3C,SAAA,GAAY,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,GAAK;AAAA,GAChD,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACpC,gBAAA,EAAe,MAAA;AAAA,MACf,UAAA,EAAU,MAAA,CAAO,OAAA,CAAQ,GAAG,CAAC,CAAA;AAAA,MAC7B,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,cAAA,EAAc,oBAAoB,MAAM,CAAA;AAAA,MACxC,cAAA,EAAc,kBAAkB,MAAM,CAAA;AAAA,MACtC,iBAAA,EAAiB,OAAO,UAAU,CAAA;AAAA,MAClC,iBAAe,YAAA,IAAgB,MAAA;AAAA,MAC/B,OAAO,KAAA,IAAS,MAAA;AAAA,MAEf;AAAA;AAAA,GACH;AAEJ","file":"chunk-7JQAQWVC.js","sourcesContent":["import {\n  type CssFlex,\n  type CssFlexKeyword,\n  type CssLength,\n  space,\n  type UiSpaceName,\n} from './css-values.js';\nimport type { DividerSides } from './divider-sides.js';\nimport {\n  type HorizontalAlignment,\n  horizontalAlignment,\n  type VerticalAlignment,\n  verticalAlignment,\n} from './flex-alignment.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n  'none',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n];\n\nexport interface ListProps {\n  children?: KerfUiContent;\n  /** Use the standard item gap, a named UI spacing token, or a typed CSS length. Defaults to no gap. */\n  gap?: boolean | UiSpaceName | CssLength;\n  /** Allow this list to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n  flex?: boolean | CssFlexKeyword | CssFlex;\n  /** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */\n  hAlign?: HorizontalAlignment;\n  /** Vertical distribution. Defaults to top. */\n  vAlign?: VerticalAlignment;\n  /** Own vertical scrolling and overscroll containment. */\n  scrollable?: boolean;\n  /** Physical divider edges in canonical top/right/bottom/left order. */\n  dividerSides?: DividerSides;\n  className?: string;\n}\n\n/** A stretch-aligned vertical stack with optional gap, flex, scroll, and dividers. */\nexport function List({\n  children,\n  gap = false,\n  flex = false,\n  hAlign = 'full',\n  vAlign = 'top',\n  scrollable = false,\n  dividerSides = '',\n  className = '',\n}: ListProps) {\n  const gapValue =\n    gap === true\n      ? 'var(--kui-list-gap)'\n      : spaceNames.includes(gap as UiSpaceName)\n        ? space(gap as UiSpaceName)\n        : gap || undefined;\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  const style = [\n    gapValue ? `--_kui-list-gap:${gapValue}` : '',\n    flexValue ? `--_kui-list-flex:${flexValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      class={`kui-list ${className}`.trim()}\n      data-component=\"list\"\n      data-gap={String(Boolean(gap))}\n      data-flex={String(Boolean(flex))}\n      data-h-align={horizontalAlignment(hAlign)}\n      data-v-align={verticalAlignment(vAlign)}\n      data-scrollable={String(scrollable)}\n      divider-sides={dividerSides || undefined}\n      style={style || undefined}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type {\n  CssFlex,\n  CssFlexKeyword,\n  CssLength,\n  UiSpaceName,\n} from './css-values.js';\nexport type { DividerSides } from './divider-sides.js';\nexport type {\n  HorizontalAlignment,\n  VerticalAlignment,\n} from './flex-alignment.js';\n"]}

package/dist/chunk-KFUUFNTS.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/list-inset-text.tsx"],"names":[],"mappings":";;;AAuBO,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,cAAA,GAAiB,KAAA;AAAA,EACjB,SAAA,GAAY;AACd,CAAA,EAAuB;AACrB,EAAA,MAAM,GAAA,GACJ,sBAAsB,cAAA,GAAiB,kCAAA,GAAqC,EAAE,CAAA,CAAA,EAAI,SAAS,GAAG,IAAA,EAAK;AACrG,EAAA,2BACG,KAAA,EAAA,EAAI,KAAA,EAAO,GAAA,EAAK,gBAAA,EAAe,mBAC7B,QAAA,EACH,CAAA;AAEJ","file":"chunk-KFUUFNTS.js","sourcesContent":["import type { KerfUiContent } from './semantic-content.js';\n\nexport interface ListInsetTextProps {\n  /** Text (or inline content) that carries no margin, border, or padding of its own. */\n  children: KerfUiContent | string;\n  /**\n   * Keep only the horizontal geometry (inline margin, left/right border, and\n   * left/right padding) and drop the vertical margin, border, and padding. Use it\n   * when the text edge must still align with bordered items but the line should not\n   * add its own vertical box space — tight text layout inside a content region.\n   */\n  horizontalOnly?: boolean;\n  className?: string;\n}\n\n/**\n * Gives bare text the content-item geometry — an 8px inline margin, a 1px\n * transparent border, and 8px padding — so a plain string lines up with\n * bordered `.kui-content` items (its text edge lands at the same 17px inset).\n * Use it for text elements that have no margin, border, or padding of their own.\n * Pass `horizontalOnly` to keep the horizontal inset but drop the vertical box\n * space for tight text layout.\n */\nexport function ListInsetText({\n  children,\n  horizontalOnly = false,\n  className = '',\n}: ListInsetTextProps) {\n  const cls =\n    `kui-list-inset-text${horizontalOnly ? ' kui-list-inset-text--horizontal' : ''} ${className}`.trim();\n  return (\n    <div class={cls} data-component=\"list-inset-text\">\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/chunk-MFR2IIFG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/list-inset-control.tsx"],"names":[],"mappings":";;;AAcO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,QAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAA0B;AACxB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,uBAAA,EAA0B,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAClD,gBAAA,EAAe,oBAAA;AAAA,MAEd;AAAA;AAAA,GACH;AAEJ","file":"chunk-MFR2IIFG.js","sourcesContent":["import type { KerfUiContent } from './semantic-content.js';\n\nexport interface ListInsetControlProps {\n  /** Control(s) that own their own border and padding (e.g. an input, a `wa-*`). */\n  children: KerfUiContent;\n  className?: string;\n}\n\n/**\n * Insets a control into a pane/list content region: an 8px inline margin (so its\n * edges line up with `.kui-content` items) and a stretch flex row with an 8px gap.\n * Use it for controls that carry their own border and padding but no outer margin\n * — the wrapper adds only the alignment margin and layout, not a second inset.\n */\nexport function ListInsetControl({\n  children,\n  className = '',\n}: ListInsetControlProps) {\n  return (\n    <div\n      class={`kui-list-inset-control ${className}`.trim()}\n      data-component=\"list-inset-control\"\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/chunk-OC275HHS.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/list-header.tsx"],"names":[],"mappings":"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","file":"chunk-OC275HHS.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { em } from './css-values.js';\nimport { DisclosureArrow } from './disclosure-arrow.js';\nimport {\n  filterControlAttributes,\n  filterDataAttributes,\n} from './extension-attributes.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-has-badge',\n  'data-has-count',\n  'data-density',\n  'data-divider',\n  'data-indicator-tone',\n  'data-toggle',\n]);\nconst PROTECTED_TRIGGER_DATA_ATTRIBUTES = new Set(['data-action']);\n\ntype ListHeaderRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-has-badge'?: never;\n    'data-has-count'?: never;\n    'data-density'?: never;\n    'data-divider'?: never;\n    'data-indicator-tone'?: never;\n    'data-toggle'?: never;\n  }\n>;\n\ntype ListHeaderTriggerAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-action'?: never;\n    popoverTarget?: string;\n    popoverTargetAction?: 'toggle' | 'show' | 'hide';\n    'aria-controls'?: string;\n    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n  }\n>;\n\ninterface ListHeaderBaseProps {\n  label: string;\n  density?: 'standard' | 'compact';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  indicatorTone?: 'neutral' | 'accent' | 'pop' | 'danger';\n  /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */\n  placeholder?: boolean;\n  rootAttributes?: ListHeaderRootAttributes;\n  triggerAttributes?: ListHeaderTriggerAttributes;\n}\n\ntype ListHeaderModeProps =\n  | {\n      /** Render the title as a controlled disclosure trigger. */\n      toggle: true;\n      action: string;\n      expanded: boolean;\n      actionIcon?: SafeHtml;\n      actionLabel?: never;\n      actionDisabled?: boolean;\n      disabledReason?: string;\n    }\n  | {\n      /** Render a separately named trailing action. */\n      toggle?: false;\n      action: string;\n      actionLabel: string;\n      actionIcon: SafeHtml;\n      expanded?: never;\n      actionDisabled?: boolean;\n      disabledReason?: string;\n    }\n  | {\n      /** Render a passive section heading. */\n      toggle?: false;\n      action?: never;\n      actionLabel?: never;\n      actionIcon?: never;\n      expanded?: never;\n      actionDisabled?: never;\n      disabledReason?: never;\n    };\n\ntype ListHeaderIndicatorProps =\n  | { count: number; countLabel: string; badge?: never; status?: never }\n  | { count?: never; countLabel?: never; badge: SafeHtml; status?: never }\n  | { count?: never; countLabel?: never; badge?: never; status?: SafeHtml };\n\nexport type ListHeaderProps = ListHeaderBaseProps &\n  ListHeaderIndicatorProps &\n  ListHeaderModeProps;\n\nexport function ListHeader({\n  label,\n  count,\n  countLabel,\n  badge,\n  status,\n  density = 'standard',\n  divider = 'none',\n  indicatorTone = 'neutral',\n  action,\n  actionLabel,\n  actionIcon,\n  actionDisabled = false,\n  disabledReason,\n  expanded,\n  toggle = false,\n  placeholder = false,\n  rootAttributes = {},\n  triggerAttributes = {},\n}: ListHeaderProps) {\n  const extensionRootAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const extensionTriggerAttributes = filterControlAttributes(\n    triggerAttributes,\n    PROTECTED_TRIGGER_DATA_ATTRIBUTES,\n  );\n  const normalizedCount =\n    typeof count === 'number' && Number.isSafeInteger(count) && count >= 0\n      ? count\n      : undefined;\n  const normalizedCountLabel =\n    normalizedCount === undefined\n      ? undefined\n      : typeof countLabel === 'string' && countLabel.trim()\n        ? countLabel\n        : String(normalizedCount);\n  const renderedBadge =\n    normalizedCount === undefined ? (status ?? badge) : undefined;\n  const renderedActionIcon =\n    actionIcon ??\n    (toggle ? <DisclosureArrow open={Boolean(expanded)} /> : undefined);\n  const accessibleLabel =\n    normalizedCount === undefined\n      ? undefined\n      : `${label}, ${normalizedCountLabel}`;\n  const indicator = placeholder ? (\n    (normalizedCount !== undefined || renderedBadge) && (\n      <span class=\"kui-list-header__badge\">\n        <Skeleton width={em(1.75)} />\n      </span>\n    )\n  ) : normalizedCount === undefined ? (\n    renderedBadge && <span class=\"kui-list-header__badge\">{renderedBadge}</span>\n  ) : (\n    <span class=\"kui-list-header__count\" aria-hidden=\"true\">\n      {normalizedCount}\n    </span>\n  );\n  const busy = placeholder ? ('true' as const) : undefined;\n  if (toggle) {\n    return (\n      <header\n        {...extensionRootAttributes}\n        class=\"kui-list-header\"\n        data-component=\"list-header\"\n        data-has-badge={String(Boolean(renderedBadge))}\n        data-has-count={String(normalizedCount !== undefined)}\n        data-density={density}\n        data-divider={divider}\n        data-indicator-tone={indicatorTone}\n        data-toggle=\"true\"\n        data-placeholder={placeholder ? 'true' : undefined}\n        aria-busy={busy}\n      >\n        <button\n          {...extensionTriggerAttributes}\n          type=\"button\"\n          class=\"kui-list-header__title kui-list-header__toggle\"\n          data-action={placeholder ? undefined : action}\n          title={actionDisabled ? disabledReason : undefined}\n          disabled={actionDisabled || placeholder || undefined}\n          aria-label={accessibleLabel}\n          aria-expanded={String(Boolean(expanded))}\n        >\n          <span class=\"kui-list-header__label\">{label}</span>\n          {indicator}\n          {renderedActionIcon && (\n            <span class=\"kui-list-header__action-layer\">\n              {renderedActionIcon}\n            </span>\n          )}\n        </button>\n      </header>\n    );\n  }\n  return (\n    <header\n      {...extensionRootAttributes}\n      class=\"kui-list-header\"\n      data-component=\"list-header\"\n      data-has-badge={String(Boolean(renderedBadge))}\n      data-has-count={String(normalizedCount !== undefined)}\n      data-density={density}\n      data-divider={divider}\n      data-indicator-tone={indicatorTone}\n      data-toggle=\"false\"\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-busy={busy}\n    >\n      <div class=\"kui-list-header__title\">\n        <h2 class=\"kui-list-header__label\" aria-label={accessibleLabel}>\n          {label}\n        </h2>\n        {indicator}\n      </div>\n      {action && (\n        <button\n          {...extensionTriggerAttributes}\n          type=\"button\"\n          class=\"kui-list-header__action\"\n          data-action={placeholder ? undefined : action}\n          aria-label={actionLabel}\n          title={actionDisabled ? disabledReason : actionLabel}\n          disabled={actionDisabled || placeholder || undefined}\n        >\n          {renderedActionIcon}\n        </button>\n      )}\n    </header>\n  );\n}\n"]}

package/dist/chunk-OKRCKIVO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/row.tsx"],"names":[],"mappings":";;;;AASA,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAgBO,SAAS,GAAA,CAAI;AAAA,EAClB,QAAA;AAAA,EACA,MAAA,GAAS,MAAA;AAAA,EACT,MAAA,GAAS,MAAA;AAAA,EACT,GAAA,GAAM,IAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,SAAA,GAAY;AACd,CAAA,EAAa;AACX,EAAA,MAAM,WAAW,UAAA,CAAW,QAAA,CAAS,GAAkB,CAAA,GACnD,KAAA,CAAM,GAAkB,CAAA,GACxB,GAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,QAAA,EAAW,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACnC,gBAAA,EAAe,KAAA;AAAA,MACf,cAAA,EAAc,oBAAoB,MAAM,CAAA;AAAA,MACxC,cAAA,EAAc,kBAAkB,MAAM,CAAA;AAAA,MACtC,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,KAAA,EAAO,kBAAkB,QAAQ,CAAA,CAAA;AAAA,MAEhC;AAAA;AAAA,GACH;AAEJ","file":"chunk-OKRCKIVO.js","sourcesContent":["import { type CssLength, space, type UiSpaceName } from './css-values.js';\nimport {\n  type HorizontalAlignment,\n  horizontalAlignment,\n  type VerticalAlignment,\n  verticalAlignment,\n} from './flex-alignment.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n  'none',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n];\n\nexport interface RowProps {\n  children?: KerfUiContent;\n  /** Horizontal distribution. Defaults to left. */\n  hAlign?: HorizontalAlignment;\n  /** Vertical alignment and wrapped-line distribution. Defaults to full. */\n  vAlign?: VerticalAlignment;\n  /** A named UI spacing token or typed CSS length. Defaults to xs. */\n  gap?: UiSpaceName | CssLength;\n  /** Allow children to wrap onto additional lines. */\n  wrap?: boolean;\n  className?: string;\n}\n\n/** A horizontal flex row with explicit physical-axis alignment and spacing. */\nexport function Row({\n  children,\n  hAlign = 'left',\n  vAlign = 'full',\n  gap = 'xs',\n  wrap = false,\n  className = '',\n}: RowProps) {\n  const gapValue = spaceNames.includes(gap as UiSpaceName)\n    ? space(gap as UiSpaceName)\n    : gap;\n\n  return (\n    <div\n      class={`kui-row ${className}`.trim()}\n      data-component=\"row\"\n      data-h-align={horizontalAlignment(hAlign)}\n      data-v-align={verticalAlignment(vAlign)}\n      data-wrap={String(wrap)}\n      style={`--_kui-row-gap:${gapValue}`}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type { CssLength, UiSpaceName } from './css-values.js';\nexport type {\n  HorizontalAlignment,\n  VerticalAlignment,\n} from './flex-alignment.js';\n"]}

package/dist/divider-sides-267FA7sY.d.ts

@@ -1,4 +0,0 @@
-/** Canonical physical edge combinations for components that draw dividers. */
-type DividerSides = '' | 't' | 'r' | 'b' | 'l' | 'tr' | 'tb' | 'tl' | 'rb' | 'rl' | 'bl' | 'trb' | 'trl' | 'tbl' | 'rbl' | 'trbl';
-
-export type { DividerSides as D };