@kerfjs/ui 5.0.0-beta.35 → 5.0.0-beta.37

package/dist/styles/list.css

@@ -10,6 +10,8 @@
   min-width: 0;
   min-height: 0;
   box-sizing: border-box;
+  padding: var(--_kui-list-inset-top, 0) var(--_kui-list-inset-right, 0)
+    var(--_kui-list-inset-bottom, 0) var(--_kui-list-inset-left, 0);
   flex: var(--_kui-list-flex, initial);
   flex-direction: column;
   align-items: stretch;
@@ -23,6 +25,50 @@
     inset 1px 0 var(--_kui-list-divider-left);
 }
 
+.kui-list[data-control-insets*="t"] {
+  --_kui-list-inset-top: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list[data-control-insets*="r"] {
+  --_kui-list-inset-right: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list[data-control-insets*="b"] {
+  --_kui-list-inset-bottom: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list[data-control-insets*="l"] {
+  --_kui-list-inset-left: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list[data-text-insets*="t"] {
+  --_kui-list-inset-top: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-list[data-text-insets*="r"] {
+  --_kui-list-inset-right: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-list[data-text-insets*="b"] {
+  --_kui-list-inset-bottom: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-list[data-text-insets*="l"] {
+  --_kui-list-inset-left: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
 .kui-list[data-h-align="left"] {
   align-items: flex-start;
   align-content: flex-start;

package/dist/styles/row.css

@@ -5,6 +5,8 @@
   min-width: 0;
   min-height: 0;
   box-sizing: border-box;
+  padding: var(--_kui-row-inset-top, 0) var(--_kui-row-inset-right, 0)
+    var(--_kui-row-inset-bottom, 0) var(--_kui-row-inset-left, 0);
   flex: var(--_kui-row-flex, initial);
   flex-direction: row;
   flex-wrap: nowrap;
@@ -14,6 +16,50 @@
   gap: var(--_kui-row-gap, var(--kui-row-gap));
 }
 
+.kui-row[data-control-insets*="t"] {
+  --_kui-row-inset-top: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[data-control-insets*="r"] {
+  --_kui-row-inset-right: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[data-control-insets*="b"] {
+  --_kui-row-inset-bottom: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[data-control-insets*="l"] {
+  --_kui-row-inset-left: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[data-text-insets*="t"] {
+  --_kui-row-inset-top: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-row[data-text-insets*="r"] {
+  --_kui-row-inset-right: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-row[data-text-insets*="b"] {
+  --_kui-row-inset-bottom: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-row[data-text-insets*="l"] {
+  --_kui-row-inset-left: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
 .kui-row[data-wrap="true"] {
   flex-wrap: wrap;
 }

package/dist/styles/spacer.css

@@ -0,0 +1,11 @@
+.kui-spacer {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  min-width: 0;
+  min-height: 0;
+  pointer-events: none;
+}
+
+.kui-spacer[data-flex="true"] {
+  flex: 1 1 auto;
+}

package/dist/styles/styles.css

@@ -8,6 +8,7 @@
 @import "./toolbar-text.css";
 @import "./list.css";
 @import "./row.css";
+@import "./spacer.css";
 @import "./list-action-row.css";
 @import "./list-item.css";
 @import "./list-header.css";

package/dist/toolbar.d.ts

@@ -1,5 +1,5 @@
 import * as kerfjs from 'kerfjs';
-import { D as DividerSides } from './divider-sides-267FA7sY.js';
+import { D as DividerSides } from './divider-sides-BzB6rphT.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 interface ToolbarProps {

package/docs/component-contract.md

@@ -231,9 +231,12 @@ In `ListHeader` toggle mode, omitting `actionIcon` composes the production
 `DisclosureArrow` and derives its visual direction from `expanded`. The app
 must update that controlled state and reveal or hide real content. Passing a
 custom `actionIcon` replaces the default rather than layering or rotating both.
-The root fills the available inline width after its standard margins. A
-separate action stays at the logical end in its 44px target while the visible
-glyph defaults to 18px through `--kui-list-header-action-icon-size`.
+The root fills the available inline width after its standard margins by
+default. Set `inline` when it must shrink-wrap beside surrounding content; that
+presentation removes the root margin, border, and padding while retaining the
+title and optional action's own control geometry. A separate action stays at
+the logical end while the visible glyph defaults to 18px through
+`--kui-list-header-action-icon-size`.
 
 `StateBanner` exposes instance-level `--kui-state-banner-background`,
 `--kui-state-banner-border`, `--kui-state-banner-foreground`,

package/docs/component-selection.md

@@ -38,8 +38,10 @@ foreground/background contrast relationships and visible focus ring.
 
 ### Typed runtime dimensions
 
-Use `Row` or `List` spacing shorthands for the common case: `gap="xs"`, `gap="m"`, and
-the other `UiSpaceName` values resolve to their matching `--kui-space-*` token.
+Use `Row` or `List` spacing shorthands for repeated sibling spacing: `gap="xs"`,
+`gap="m"`, and the other `UiSpaceName` values resolve to their matching
+`--kui-space-*` token. Use `Spacer` for one deliberate empty width or height, or
+pass `flex` to consume the remaining space along a flex parent's main axis.
 The canonical rhythm is `none`, `2xs`, `xs`, `m`, and `l`; use `s` and `xl`
 only as deliberate exceptions.
 
@@ -65,7 +67,8 @@ Raw strings such as `"0.25rem"` no longer satisfy `Row.gap` or `List.gap`; this
 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
+Other CSS-valued props use distinct contracts: `Spacer.width` and
+`Spacer.height` take `UiSpaceName | CssLength`; `flex()` creates `CssFlex` for
 `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

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

@@ -118,6 +118,31 @@ Use `rem`, `em`, `px`, `pct`, `lengthVar`, and `calc(plus(...))` only when a
 named spacing relationship does not express the requirement; do not pass raw
 CSS strings.
 
+## Spacer
+
+Use `Spacer` from `@kerfjs/ui/spacer` for one intentional empty dimension that
+is not the repeated relationship owned by a parent's `gap`. Its `width` and
+`height` accept the same finite `UiSpaceName` vocabulary or a complete typed
+`CssLength`. Fixed spacers use `flex: 0 0 auto`, so flex layouts do not compress
+the requested dimension. Pass `flex` to use `1 1 auto` and consume the remaining
+space along a `Row`, `List`, or other flex parent's main axis.
+
+```tsx
+import { Row } from "@kerfjs/ui/row";
+import { Spacer } from "@kerfjs/ui/spacer";
+
+<Row gap="none">
+  <button>Back</button>
+  <Spacer flex />
+  <button>Save</button>
+</Row>;
+```
+
+Spacer is always decorative (`aria-hidden="true"`), accepts no children, and
+uses physical width and height. Prefer `Row.gap` or `List.gap` for uniform
+sibling rhythm, and never use Spacer to cancel or duplicate component-owned
+insets.
+
 ## Row and List alignment
 
 Use `Row` for a horizontal flex layout and `List` for a vertical one. `Row`
@@ -143,6 +168,19 @@ for the CSS initial value, pass `true` for `1 1 auto`, select the finite
 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/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
@@ -158,7 +162,8 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
   `--kui-space-none`, `4px` `--kui-space-2xs`, `8px` `--kui-space-xs` (inside a
   group), `16px` `--kui-space-m`, `24px` `--kui-space-l` (between major differing
   regions). 12px/32px are off-scale exceptions. Prefer direct `Row.gap`/`List.gap`
-  shorthands; use `space`, `px`, `rem`, `em`, `pct`, `lengthVar`, and
+  shorthands for repeated rhythm; use `Spacer` for one typed empty width/height
+  or flexible main-axis gap. Use `space`, `px`, `rem`, `em`, `pct`, `lengthVar`, and
   `calc(plus(...))` for typed runtime composition. `remify()` is source-CSS only.
 - **Keep nested highlight corners concentric.** Inset hover and selection surfaces
   follow the owning control's pill or rounded shape; their radius is the outer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.35",
+  "version": "5.0.0-beta.37",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",
@@ -93,6 +93,11 @@
       "browser": "./dist/browser/row.js",
       "import": "./dist/row.js"
     },
+    "./spacer": {
+      "types": "./dist/spacer.d.ts",
+      "browser": "./dist/browser/spacer.js",
+      "import": "./dist/spacer.js"
+    },
     "./list-action-row": {
       "types": "./dist/list-action-row.d.ts",
       "browser": "./dist/browser/list-action-row.js",
@@ -284,6 +289,7 @@
     "./toolbar-text.css": "./dist/styles/toolbar-text.css",
     "./list.css": "./dist/styles/list.css",
     "./row.css": "./dist/styles/row.css",
+    "./spacer.css": "./dist/styles/spacer.css",
     "./list-action-row.css": "./dist/styles/list-action-row.css",
     "./list-item.css": "./dist/styles/list-item.css",
     "./list-header.css": "./dist/styles/list-header.css",

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":";;;;;;AAUA,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,qBAAA;AAAA,EACA;AACF,CAAC,CAAA;AACD,IAAM,iCAAA,mBAAoC,IAAI,GAAA,CAAI,CAAC,aAAa,CAAC,CAAA;AA6E1D,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,UAAA;AAAA,EACV,OAAA,GAAU,MAAA;AAAA,EACV,aAAA,GAAgB,SAAA;AAAA,EAChB,MAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA,GAAiB,KAAA;AAAA,EACjB,cAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA,GAAS,KAAA;AAAA,EACT,WAAA,GAAc,KAAA;AAAA,EACd,iBAAiB,EAAC;AAAA,EAClB,oBAAoB;AACtB,CAAA,EAAoB;AAClB,EAAA,MAAM,uBAAA,GAA0B,oBAAA;AAAA,IAC9B,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,0BAAA,GAA6B,uBAAA;AAAA,IACjC,iBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,eAAA,GACJ,OAAO,KAAA,KAAU,QAAA,IAAY,MAAA,CAAO,cAAc,KAAK,CAAA,IAAK,KAAA,IAAS,CAAA,GACjE,KAAA,GACA,MAAA;AACN,EAAA,MAAM,oBAAA,GACJ,eAAA,KAAoB,MAAA,GAChB,MAAA,GACA,OAAO,UAAA,KAAe,QAAA,IAAY,UAAA,CAAW,IAAA,EAAK,GAChD,UAAA,GACA,MAAA,CAAO,eAAe,CAAA;AAC9B,EAAA,MAAM,aAAA,GACJ,eAAA,KAAoB,MAAA,GAAa,MAAA,IAAU,KAAA,GAAS,MAAA;AACtD,EAAA,MAAM,kBAAA,GACJ,eACC,MAAA,mBAAS,GAAA,CAAC,mBAAgB,IAAA,EAAM,OAAA,CAAQ,QAAQ,CAAA,EAAG,CAAA,GAAK,MAAA,CAAA;AAC3D,EAAA,MAAM,kBACJ,eAAA,KAAoB,MAAA,GAChB,SACA,CAAA,EAAG,KAAK,KAAK,oBAAoB,CAAA,CAAA;AACvC,EAAA,MAAM,SAAA,GAAY,WAAA,GAAA,CACf,eAAA,KAAoB,MAAA,IAAa,kCAChC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EACV,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAO,EAAA,CAAG,IAAI,CAAA,EAAG,CAAA,EAC7B,CAAA,GAEA,eAAA,KAAoB,MAAA,GACtB,aAAA,oBAAiB,GAAA,CAAC,MAAA,EAAA,EAAK,OAAM,wBAAA,EAA0B,QAAA,EAAA,aAAA,EAAc,CAAA,mBAErE,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAAyB,aAAA,EAAY,QAC9C,QAAA,EAAA,eAAA,EACH,CAAA;AAEF,EAAA,MAAM,IAAA,GAAO,cAAe,MAAA,GAAmB,MAAA;AAC/C,EAAA,IAAI,MAAA,EAAQ;AACV,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,uBAAA;AAAA,QACJ,KAAA,EAAM,iBAAA;AAAA,QACN,gBAAA,EAAe,aAAA;AAAA,QACf,gBAAA,EAAgB,MAAA,CAAO,OAAA,CAAQ,aAAa,CAAC,CAAA;AAAA,QAC7C,gBAAA,EAAgB,MAAA,CAAO,eAAA,KAAoB,MAAS,CAAA;AAAA,QACpD,cAAA,EAAc,OAAA;AAAA,QACd,cAAA,EAAc,OAAA;AAAA,QACd,qBAAA,EAAqB,aAAA;AAAA,QACrB,aAAA,EAAY,MAAA;AAAA,QACZ,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,QACzC,WAAA,EAAW,IAAA;AAAA,QAEX,QAAA,kBAAA,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACE,GAAG,0BAAA;AAAA,YACJ,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,gDAAA;AAAA,YACN,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,YACvC,KAAA,EAAO,iBAAiB,cAAA,GAAiB,MAAA;AAAA,YACzC,QAAA,EAAU,kBAAkB,WAAA,IAAe,MAAA;AAAA,YAC3C,YAAA,EAAY,eAAA;AAAA,YACZ,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,QAAQ,CAAC,CAAA;AAAA,YAEvC,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,cAC3C,SAAA;AAAA,cACA,kBAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,iCACT,QAAA,EAAA,kBAAA,EACH;AAAA;AAAA;AAAA;AAEJ;AAAA,KACF;AAAA,EAEJ;AACA,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,uBAAA;AAAA,MACJ,KAAA,EAAM,iBAAA;AAAA,MACN,gBAAA,EAAe,aAAA;AAAA,MACf,gBAAA,EAAgB,MAAA,CAAO,OAAA,CAAQ,aAAa,CAAC,CAAA;AAAA,MAC7C,gBAAA,EAAgB,MAAA,CAAO,eAAA,KAAoB,MAAS,CAAA;AAAA,MACpD,cAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAc,OAAA;AAAA,MACd,qBAAA,EAAqB,aAAA;AAAA,MACrB,aAAA,EAAY,OAAA;AAAA,MACZ,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,WAAA,EAAW,IAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,OAAM,wBAAA,EACT,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAA,EAAA,EAAG,KAAA,EAAM,wBAAA,EAAyB,YAAA,EAAY,iBAC5C,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UACC;AAAA,SAAA,EACH,CAAA;AAAA,QACC,MAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACE,GAAG,0BAAA;AAAA,YACJ,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,yBAAA;AAAA,YACN,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,YACvC,YAAA,EAAY,WAAA;AAAA,YACZ,KAAA,EAAO,iBAAiB,cAAA,GAAiB,WAAA;AAAA,YACzC,QAAA,EAAU,kBAAkB,WAAA,IAAe,MAAA;AAAA,YAE1C,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ;AAEJ","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-QHCBZTDK.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/row.tsx"],"names":[],"mappings":";;;;AAeA,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;AAkBO,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,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;AACJ,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,kBAAkB,QAAQ,CAAA,CAAA;AAAA,IAC1B,SAAA,GAAY,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,GAAK;AAAA,GAC/C,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,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,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,KAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-QHCBZTDK.js","sourcesContent":["import {\n  type CssFlex,\n  type CssFlexKeyword,\n  type CssLength,\n  space,\n  type UiSpaceName,\n} 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 this row to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n  flex?: boolean | CssFlexKeyword | CssFlex;\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  flex = false,\n  wrap = false,\n  className = '',\n}: RowProps) {\n  const gapValue = spaceNames.includes(gap as UiSpaceName)\n    ? space(gap as UiSpaceName)\n    : gap;\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  const style = [\n    `--_kui-row-gap:${gapValue}`,\n    flexValue ? `--_kui-row-flex:${flexValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\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-flex={String(Boolean(flex))}\n      data-wrap={String(wrap)}\n      style={style}\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 {\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 };