@kerfjs/ui 5.0.0-beta.23 → 5.0.0-beta.24

package/dist/{chunk-PIDTEQ3U.js → chunk-Y45PPBDV.js}

@@ -1,5 +1,5 @@
 import { filterDataAttributes } from './chunk-SRSJO5QE.js';
-import { Skeleton } from './chunk-PZQVSDLH.js';
+import { Skeleton } from './chunk-RKVQEH4J.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
 var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
@@ -102,4 +102,4 @@ function AppTab({
 
 export { AppTab };
 
-//# sourceMappingURL=chunk-PIDTEQ3U.js.map
+//# sourceMappingURL=chunk-Y45PPBDV.js.map

package/dist/{chunk-PIDTEQ3U.js.map → chunk-Y45PPBDV.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/app-tab.tsx"],"names":[],"mappings":"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","file":"chunk-PIDTEQ3U.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterDataAttributes } 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-tab-id',\n  'data-selected',\n  'data-tab-dragging',\n  'data-tab-drop-position',\n]);\n\ntype AppTabRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-tab-id'?: never;\n    'data-selected'?: never;\n    'data-tab-dragging'?: never;\n    'data-tab-drop-position'?: never;\n  }\n>;\n\nexport interface AppTabProps {\n  id: string;\n  name: string;\n  selected?: boolean;\n  closable?: boolean;\n  draggable?: boolean;\n  leading?: SafeHtml;\n  trailing?: SafeHtml;\n  /** Decorative dormant content for the close button. Must not contain interactive descendants. */\n  closeIcon?: SafeHtml;\n  selectAction?: string;\n  closeAction?: string;\n  className?: string;\n  /** Render as an unanimated loading skeleton, disabling select/close and dragging. */\n  placeholder?: boolean;\n  rootAttributes?: AppTabRootAttributes;\n}\n\nfunction CloseIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2.25\"\n      stroke-linecap=\"round\"\n    >\n      <path d=\"m7 7 10 10\"></path>\n      <path d=\"M17 7 7 17\"></path>\n    </svg>\n  );\n}\n\nexport function AppTab({\n  id,\n  name,\n  selected = false,\n  closable = true,\n  draggable = false,\n  leading,\n  trailing,\n  closeIcon,\n  selectAction = 'select-tab',\n  closeAction = 'close-tab',\n  className = '',\n  placeholder = false,\n  rootAttributes = {},\n}: AppTabProps) {\n  const keyshortcuts = [\n    closable ? 'Delete Backspace' : '',\n    draggable ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  return (\n    <div\n      {...extensionAttributes}\n      class={`kui-app-tab ${className}`.trim()}\n      data-component=\"app-tab\"\n      data-tab-id={id}\n      data-selected={String(selected)}\n      data-placeholder={placeholder ? 'true' : undefined}\n      draggable={placeholder ? 'false' : draggable ? 'true' : 'false'}\n      aria-busy={placeholder ? 'true' : undefined}\n    >\n      {closable && (\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"kui-app-tab__close\"\n          data-action={placeholder ? undefined : closeAction}\n          data-tab-id={id}\n          disabled={placeholder || undefined}\n          aria-label={`Close ${name}`}\n          title={`Close ${name}`}\n        >\n          <span class=\"kui-app-tab__close-icon\" aria-hidden=\"true\">\n            {closeIcon ?? <CloseIcon />}\n          </span>\n        </button>\n      )}\n      <button\n        type=\"button\"\n        class=\"kui-app-tab__select\"\n        role=\"tab\"\n        aria-selected={String(selected)}\n        aria-keyshortcuts={placeholder ? undefined : keyshortcuts || undefined}\n        data-action={placeholder ? undefined : selectAction}\n        data-tab-id={id}\n        disabled={placeholder || undefined}\n        tabindex={placeholder ? '-1' : selected ? '0' : '-1'}\n      >\n        {leading}\n        <span class=\"kui-app-tab__name\">\n          {placeholder ? <Skeleton width=\"7em\" /> : name}\n        </span>\n        {closable || trailing ? (\n          <span class=\"kui-app-tab__trailing\">{trailing}</span>\n        ) : undefined}\n      </button>\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/app-tab.tsx"],"names":[],"mappings":"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","file":"chunk-Y45PPBDV.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterDataAttributes } 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-tab-id',\n  'data-selected',\n  'data-tab-dragging',\n  'data-tab-drop-position',\n]);\n\ntype AppTabRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-tab-id'?: never;\n    'data-selected'?: never;\n    'data-tab-dragging'?: never;\n    'data-tab-drop-position'?: never;\n  }\n>;\n\nexport interface AppTabProps {\n  id: string;\n  name: string;\n  selected?: boolean;\n  closable?: boolean;\n  draggable?: boolean;\n  leading?: SafeHtml;\n  trailing?: SafeHtml;\n  /** Decorative dormant content for the close button. Must not contain interactive descendants. */\n  closeIcon?: SafeHtml;\n  selectAction?: string;\n  closeAction?: string;\n  className?: string;\n  /** Render as an unanimated loading skeleton, disabling select/close and dragging. */\n  placeholder?: boolean;\n  rootAttributes?: AppTabRootAttributes;\n}\n\nfunction CloseIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2.25\"\n      stroke-linecap=\"round\"\n    >\n      <path d=\"m7 7 10 10\"></path>\n      <path d=\"M17 7 7 17\"></path>\n    </svg>\n  );\n}\n\nexport function AppTab({\n  id,\n  name,\n  selected = false,\n  closable = true,\n  draggable = false,\n  leading,\n  trailing,\n  closeIcon,\n  selectAction = 'select-tab',\n  closeAction = 'close-tab',\n  className = '',\n  placeholder = false,\n  rootAttributes = {},\n}: AppTabProps) {\n  const keyshortcuts = [\n    closable ? 'Delete Backspace' : '',\n    draggable ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  return (\n    <div\n      {...extensionAttributes}\n      class={`kui-app-tab ${className}`.trim()}\n      data-component=\"app-tab\"\n      data-tab-id={id}\n      data-selected={String(selected)}\n      data-placeholder={placeholder ? 'true' : undefined}\n      draggable={placeholder ? 'false' : draggable ? 'true' : 'false'}\n      aria-busy={placeholder ? 'true' : undefined}\n    >\n      {closable && (\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"kui-app-tab__close\"\n          data-action={placeholder ? undefined : closeAction}\n          data-tab-id={id}\n          disabled={placeholder || undefined}\n          aria-label={`Close ${name}`}\n          title={`Close ${name}`}\n        >\n          <span class=\"kui-app-tab__close-icon\" aria-hidden=\"true\">\n            {closeIcon ?? <CloseIcon />}\n          </span>\n        </button>\n      )}\n      <button\n        type=\"button\"\n        class=\"kui-app-tab__select\"\n        role=\"tab\"\n        aria-selected={String(selected)}\n        aria-keyshortcuts={placeholder ? undefined : keyshortcuts || undefined}\n        data-action={placeholder ? undefined : selectAction}\n        data-tab-id={id}\n        disabled={placeholder || undefined}\n        tabindex={placeholder ? '-1' : selected ? '0' : '-1'}\n      >\n        {leading}\n        <span class=\"kui-app-tab__name\">\n          {placeholder ? <Skeleton width=\"7em\" /> : name}\n        </span>\n        {closable || trailing ? (\n          <span class=\"kui-app-tab__trailing\">{trailing}</span>\n        ) : undefined}\n      </button>\n    </div>\n  );\n}\n"]}

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

@@ -0,0 +1,4 @@
+/** 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 };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { AppTab, AppTabProps } from './app-tab.js';
 export { DisclosureArrow, DisclosureArrowProps, DisclosureDirection } from './disclosure-arrow.js';
 export { EmptyState, EmptyStateProps } from './empty-state.js';
 export { FloatingToolbar, FloatingToolbarPosition, FloatingToolbarProps } from './floating-toolbar.js';
+export { List, ListProps } from './list.js';
 export { ListActionRow, ListActionRowProps } from './list-action-row.js';
 export { ListHeader, ListHeaderProps } from './list-header.js';
 export { ListInsetControl, ListInsetControlProps } from './list-inset-control.js';
@@ -16,7 +17,7 @@ export { SegmentedControl, SegmentedControlAppearance, SegmentedControlChoice, S
 export { Select, SelectChoice, SelectProps } from './select.js';
 export { Skeleton, SkeletonProps } from './skeleton.js';
 export { StateBanner, StateBannerProps, StateBannerTone, StateBannerUrgency } from './state-banner.js';
-export { SunkenPanel, SunkenPanelProps } from './sunken-panel.js';
+export { SunkenPanel, SunkenPanelProps, SunkenPanelShape } from './sunken-panel.js';
 export { TabActivation, TabBar, TabBarProps } from './tab-bar.js';
 export { TokenSearchEditorAttributes, TokenSearchField, TokenSearchFieldProps, TokenSearchFieldValue, TokenSearchToken, placeTokenSearchCaret, readTokenSearchField } from './token-search-field.js';
 export { Toolbar, ToolbarProps } from './toolbar.js';
@@ -26,5 +27,6 @@ export { ValueTable, ValueTableProps, ValueTableRow, ValueTableRowProps } from '
 export { ResizeCommit, WireResizableRegionsOptions, wireResizableRegions } from './wire-resizable-regions.js';
 export { TabDropPosition, TabReorder, TabReorderSource, WireTabBarsOptions, reorderTabs, wireTabBars } from './wire-tab-bars.js';
 export { TokenSearchCollapsibleOptions, TokenSearchEdit, TokenSearchFieldsHandle, TokenSearchSubmit, WireTokenSearchFieldsOptions, wireTokenSearchFields } from './wire-token-search-fields.js';
+export { D as DividerSides } from './divider-sides-267FA7sY.js';
 import 'kerfjs';
 import 'lucide';

package/dist/index.js

@@ -1,27 +1,28 @@
-export { wireTokenSearchFields } from './chunk-GP5DP5DL.js';
-export { ValueTable, ValueTableRow } from './chunk-QQFJMRIB.js';
+export { reorderTabs, wireTabBars } from './chunk-UKKSMZYT.js';
+export { wireTokenSearchFields } from './chunk-OJWWHFH3.js';
+export { ValueTable, ValueTableRow } from './chunk-KWWR5VMS.js';
 export { wireResizableRegions } from './chunk-DPDBVKNA.js';
-export { reorderTabs, wireTabBars } from './chunk-AASLYRGE.js';
-export { StateBanner } from './chunk-VLYV65LK.js';
-export { SunkenPanel } from './chunk-W4CXQYSG.js';
+export { StateBanner } from './chunk-W5L2JSBY.js';
+export { SunkenPanel } from './chunk-TB6DY7H5.js';
 export { TabBar } from './chunk-M7JBER5U.js';
 export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-7KEUJIIC.js';
-export { PanelHeader } from './chunk-RYRIFZCT.js';
-export { ToolbarText } from './chunk-W7YD6E4N.js';
+export { PanelHeader } from './chunk-7XRDUG4Y.js';
+export { ToolbarText } from './chunk-R7ZWUN64.js';
 export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-NENBUYX5.js';
-export { SegmentedControl } from './chunk-OZWU5ZPZ.js';
-export { Select } from './chunk-K57KRAOV.js';
-export { ListActionRow } from './chunk-BBRXX6PF.js';
+export { SegmentedControl } from './chunk-IJBSZ4NX.js';
+export { Select } from './chunk-NWSEP5RT.js';
+export { ListActionRow } from './chunk-UFZKLBCF.js';
 export { ListInsetControl } from './chunk-QO55FN2Y.js';
 export { ListInsetText } from './chunk-FEY65TBV.js';
-export { AppTab } from './chunk-PIDTEQ3U.js';
+export { AppTab } from './chunk-Y45PPBDV.js';
 export { Pane } from './chunk-JRKSK2HX.js';
-export { Toolbar } from './chunk-7L6EHUMV.js';
+export { Toolbar } from './chunk-SYDMYBPG.js';
 export { ToolbarControlGroup } from './chunk-5VTB2BKP.js';
-export { ListHeader } from './chunk-DSNIYOZ3.js';
-export { ListItem } from './chunk-ELSJX4W7.js';
+export { ListHeader } from './chunk-PSKN344N.js';
+export { ListItem } from './chunk-FEAMR7S4.js';
+export { List } from './chunk-J5BFYY7Q.js';
 
-export { Skeleton } from './chunk-PZQVSDLH.js';
+export { Skeleton } from './chunk-RKVQEH4J.js';
 export { DisclosureArrow } from './chunk-Y6LYKFXY.js';
 export { LucideIcon } from './chunk-W2FK7ZNY.js';
 export { EmptyState } from './chunk-PX3YSS5C.js';

package/dist/list-action-row.js

@@ -1,4 +1,4 @@
-export { ListActionRow } from './chunk-BBRXX6PF.js';
+export { ListActionRow } from './chunk-UFZKLBCF.js';
 
 
 

package/dist/list-header.js

@@ -1,4 +1,4 @@
-export { ListHeader } from './chunk-DSNIYOZ3.js';
+export { ListHeader } from './chunk-PSKN344N.js';
 
 
 

package/dist/list-item.js

@@ -1,4 +1,4 @@
-export { ListItem } from './chunk-ELSJX4W7.js';
+export { ListItem } from './chunk-FEAMR7S4.js';
 
 
 

package/dist/list.d.ts

@@ -0,0 +1,19 @@
+import { SafeHtml } from 'kerfjs';
+import { D as DividerSides } from './divider-sides-267FA7sY.js';
+
+interface ListProps {
+    children?: SafeHtml | readonly SafeHtml[];
+    /** Use the standard item gap, or supply browser CSS such as `var(--kui-space-2xs)` or `0.25rem`. Defaults to no gap. */
+    gap?: boolean | string;
+    /** Allow this list to grow/shrink, or supply a CSS flex shorthand. */
+    flex?: boolean | string;
+    /** Own vertical scrolling and overscroll containment. */
+    scrollable?: boolean;
+    /** Physical divider edges in canonical top/right/bottom/left order. */
+    dividerSides?: DividerSides;
+    className?: string;
+}
+/** A stretch-aligned vertical stack with optional gap, flex, scroll, and dividers. */
+declare function List({ children, gap, flex, scrollable, dividerSides, className, }: ListProps): SafeHtml;
+
+export { DividerSides, List, type ListProps };

package/dist/list.js

@@ -0,0 +1,3 @@
+export { List } from './chunk-J5BFYY7Q.js';
+
+//# sourceMappingURL=list.js.map

package/dist/list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"list.js"}

package/dist/nav-stack.js

@@ -1,4 +1,4 @@
-export { NavStack } from './chunk-OHU6CI22.js';
+export { NavStack } from './chunk-B3A3IVO5.js';
 
 
 

package/dist/panel-header.js

@@ -1,4 +1,4 @@
-export { PanelHeader } from './chunk-RYRIFZCT.js';
+export { PanelHeader } from './chunk-7XRDUG4Y.js';
 
 
 

package/dist/segmented-control.js

@@ -1,4 +1,4 @@
-export { SegmentedControl } from './chunk-OZWU5ZPZ.js';
+export { SegmentedControl } from './chunk-IJBSZ4NX.js';
 
 
 //# sourceMappingURL=segmented-control.js.map

package/dist/select.js

@@ -1,4 +1,4 @@
-export { Select } from './chunk-K57KRAOV.js';
+export { Select } from './chunk-NWSEP5RT.js';
 
 
 

package/dist/skeleton.d.ts

@@ -1,7 +1,7 @@
 import * as kerfjs from 'kerfjs';
 
 interface SkeletonProps {
-    /** Width as any CSS length (e.g. `remify(120px)`, `60%`). Defaults to filling its slot. */
+    /** Width as any browser CSS length (e.g. `7.5rem`, `60%`). Defaults to filling its slot. */
     width?: string;
     /** Height as any CSS length. Defaults to a single text line. */
     height?: string;

package/dist/skeleton.js

@@ -1,3 +1,3 @@
-export { Skeleton } from './chunk-PZQVSDLH.js';
+export { Skeleton } from './chunk-RKVQEH4J.js';
 
 //# sourceMappingURL=skeleton.js.map

package/dist/split-view.js

@@ -1,4 +1,4 @@
-import { NavStack } from './chunk-OHU6CI22.js';
+import { NavStack } from './chunk-B3A3IVO5.js';
 
 import { ResizableRegion } from './chunk-NENBUYX5.js';
 

package/dist/state-banner.d.ts

@@ -5,14 +5,16 @@ type StateBannerUrgency = 'status' | 'alert';
 interface StateBannerProps {
     title: string;
     detail?: string;
+    /** Optional compact status or count shown beside the title. */
+    badge?: string;
     icon?: SafeHtml;
     action?: SafeHtml;
     tone?: StateBannerTone;
     urgency?: StateBannerUrgency;
     className?: string;
-    /** Render the title and detail as unanimated loading skeletons, keeping the icon and tone. */
+    /** Render the title, badge, and detail as unanimated loading skeletons, keeping the icon and tone. */
     placeholder?: boolean;
 }
-declare function StateBanner({ title, detail, icon, action, tone, urgency, className, placeholder, }: StateBannerProps): SafeHtml;
+declare function StateBanner({ title, detail, badge, icon, action, tone, urgency, className, placeholder, }: StateBannerProps): SafeHtml;
 
 export { StateBanner, type StateBannerProps, type StateBannerTone, type StateBannerUrgency };

package/dist/state-banner.js

@@ -1,4 +1,4 @@
-export { StateBanner } from './chunk-VLYV65LK.js';
+export { StateBanner } from './chunk-W5L2JSBY.js';
 
 
 //# sourceMappingURL=state-banner.js.map

package/dist/styles/catalog.css

@@ -325,8 +325,8 @@
 }
 
 /* Optional devtools-style geometry overlay. `wireCatalogGeometryOverlay` draws
-   a quiet dashed outer bound for transparent specimens and orange bands for
-   non-zero margins. */
+   computed border edges, a quiet dashed bound for transparent borderless
+   specimens, and orange bands for non-zero margins. */
 .kui-catalog__geometry-overlay {
   position: absolute;
   z-index: 3;
@@ -335,6 +335,7 @@
 }
 
 .kui-catalog__geometry-bound,
+.kui-catalog__geometry-border,
 .kui-catalog__geometry-margin {
   position: absolute;
   top: 0;
@@ -346,6 +347,11 @@
   border: 1px dashed color-mix(in srgb, var(--kui-color-text) 40%, transparent);
 }
 
+.kui-catalog__geometry-border {
+  border: 0 solid
+    color-mix(in srgb, var(--kui-color-accent-text) 72%, transparent);
+}
+
 .kui-catalog__geometry-margin {
   background: color-mix(in srgb, #f6a94c 55%, transparent);
 }

package/dist/styles/list-item.css

@@ -26,7 +26,7 @@
 }
 
 .kui-list-item[data-has-icon="true"] {
-  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
+  grid-template-columns: 1.125rem minmax(0, 1fr) auto;
 }
 
 .kui-list-item[data-has-icon="true"] .kui-list-item__icon {
@@ -75,16 +75,16 @@
 
 .kui-list-item__icon {
   display: grid;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.125rem;
+  height: 1.125rem;
   color: currentColor;
   place-items: center;
 }
 
 .kui-list-item__icon svg {
   display: block;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.125rem;
+  height: 1.125rem;
 }
 
 .kui-list-item__label {
@@ -106,7 +106,7 @@
 
 .kui-list-item[data-multiline="true"] .kui-list-item__icon {
   align-self: start;
-  margin-block-start: calc((1lh - 1.5rem) / 2);
+  margin-block-start: calc((1lh - 1.125rem) / 2);
 }
 
 .kui-list-item__trailing {

package/dist/styles/list.css

@@ -0,0 +1,43 @@
+.kui-list {
+  --kui-list-divider-color: var(--kui-color-border);
+  --kui-list-gap: var(--kui-layout-item-gap, 0.5rem);
+  --_kui-list-divider-top: transparent;
+  --_kui-list-divider-right: transparent;
+  --_kui-list-divider-bottom: transparent;
+  --_kui-list-divider-left: transparent;
+
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  flex: var(--_kui-list-flex, initial);
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--_kui-list-gap, 0);
+  box-shadow:
+    inset 0 1px var(--_kui-list-divider-top),
+    inset -1px 0 var(--_kui-list-divider-right),
+    inset 0 -1px var(--_kui-list-divider-bottom),
+    inset 1px 0 var(--_kui-list-divider-left);
+}
+
+.kui-list[data-scrollable="true"] {
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+}
+
+.kui-list[divider-sides*="t"] {
+  --_kui-list-divider-top: var(--kui-list-divider-color);
+}
+
+.kui-list[divider-sides*="r"] {
+  --_kui-list-divider-right: var(--kui-list-divider-color);
+}
+
+.kui-list[divider-sides*="b"] {
+  --_kui-list-divider-bottom: var(--kui-list-divider-color);
+}
+
+.kui-list[divider-sides*="l"] {
+  --_kui-list-divider-left: var(--kui-list-divider-color);
+}

package/dist/styles/state-banner.css

@@ -21,6 +21,14 @@
     )
   );
   --_kui-state-banner-detail: var(--kui-state-banner-detail, currentColor);
+  --_kui-state-banner-badge-background: var(
+    --kui-state-banner-badge-background,
+    var(--_kui-state-banner-foreground)
+  );
+  --_kui-state-banner-badge-foreground: var(
+    --kui-state-banner-badge-foreground,
+    var(--kui-color-surface)
+  );
   --_kui-state-banner-action-background: var(
     --kui-state-banner-action-background,
     color-mix(in srgb, var(--kui-color-surface) 52%, transparent)
@@ -129,7 +137,23 @@
 .kui-state-banner__copy strong {
   font-size: var(--kui-font-xs);
 }
-.kui-state-banner__copy span {
+.kui-state-banner__badge {
+  display: inline-grid;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
+  padding-inline: 0.35rem;
+  box-sizing: border-box;
+  border-radius: var(--kui-radius-pill);
+  color: var(--_kui-state-banner-badge-foreground);
+  background: var(--_kui-state-banner-badge-background);
+  place-items: center;
+  flex: none;
+  font-size: var(--kui-font-2xs);
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1;
+}
+.kui-state-banner__detail {
   overflow: hidden;
   color: var(--_kui-state-banner-detail);
   font-size: var(--kui-font-2xs);
@@ -162,6 +186,13 @@
 @media (max-width: 36rem) {
   .kui-state-banner__copy {
     display: grid;
+    grid-template-columns: auto 1fr;
     gap: 0.05rem;
   }
+  .kui-state-banner__badge {
+    justify-self: start;
+  }
+  .kui-state-banner__detail {
+    grid-column: 1 / -1;
+  }
 }

package/dist/styles/styles.css

@@ -5,6 +5,7 @@
 @import "./toolbar.css";
 @import "./toolbar-control-group.css";
 @import "./toolbar-text.css";
+@import "./list.css";
 @import "./list-action-row.css";
 @import "./list-item.css";
 @import "./list-header.css";

package/dist/styles/sunken-panel.css

@@ -16,3 +16,7 @@
   flex-direction: column;
   gap: var(--kui-sunken-panel-gap, 0.5rem);
 }
+
+.kui-sunken-panel[data-shape="square"] {
+  border-radius: 0;
+}

package/dist/styles/toolbar.css

@@ -20,8 +20,44 @@
   grid-template-columns: minmax(0, 1fr) auto;
 }
 
-.kui-toolbar[data-divider="true"] {
-  box-shadow: inset 0 -1px var(--kui-color-border);
+.kui-toolbar {
+  --_kui-toolbar-divider-top: transparent;
+  --_kui-toolbar-divider-right: transparent;
+  --_kui-toolbar-divider-bottom: transparent;
+  --_kui-toolbar-divider-left: transparent;
+  box-shadow:
+    inset 0 1px var(--_kui-toolbar-divider-top),
+    inset -1px 0 var(--_kui-toolbar-divider-right),
+    inset 0 -1px var(--_kui-toolbar-divider-bottom),
+    inset 1px 0 var(--_kui-toolbar-divider-left);
+}
+
+.kui-toolbar[divider-sides*="t"] {
+  --_kui-toolbar-divider-top: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
+}
+
+.kui-toolbar[divider-sides*="r"] {
+  --_kui-toolbar-divider-right: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
+}
+
+.kui-toolbar[divider-sides*="b"] {
+  --_kui-toolbar-divider-bottom: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
+}
+
+.kui-toolbar[divider-sides*="l"] {
+  --_kui-toolbar-divider-left: var(
+    --kui-toolbar-divider-color,
+    var(--kui-color-border)
+  );
 }
 
 .kui-toolbar__leading,

package/dist/sunken-panel.d.ts

@@ -1,9 +1,12 @@
 import { SafeHtml } from 'kerfjs';
 
+type SunkenPanelShape = 'rounded' | 'square';
 interface SunkenPanelProps {
     children?: SafeHtml | readonly SafeHtml[];
     /** Optional accessible landmark name for a distinct application region. */
     ariaLabel?: string;
+    /** Corner shape: a rounded rectangle (default) or square corners. */
+    shape?: SunkenPanelShape;
     className?: string;
 }
 /**
@@ -11,6 +14,6 @@ interface SunkenPanelProps {
  * stack. The panel owns its background and padding; children own their own
  * borders and internal geometry.
  */
-declare function SunkenPanel({ children, ariaLabel, className, }: SunkenPanelProps): SafeHtml;
+declare function SunkenPanel({ children, ariaLabel, shape, className, }: SunkenPanelProps): SafeHtml;
 
-export { SunkenPanel, type SunkenPanelProps };
+export { SunkenPanel, type SunkenPanelProps, type SunkenPanelShape };

package/dist/sunken-panel.js

@@ -1,3 +1,3 @@
-export { SunkenPanel } from './chunk-W4CXQYSG.js';
+export { SunkenPanel } from './chunk-TB6DY7H5.js';
 
 //# sourceMappingURL=sunken-panel.js.map

package/dist/toolbar-text.js

@@ -1,4 +1,4 @@
-export { ToolbarText } from './chunk-W7YD6E4N.js';
+export { ToolbarText } from './chunk-R7ZWUN64.js';
 
 
 //# sourceMappingURL=toolbar-text.js.map

package/dist/toolbar.d.ts

@@ -1,13 +1,15 @@
 import { SafeHtml } from 'kerfjs';
+import { D as DividerSides } from './divider-sides-267FA7sY.js';
 
 interface ToolbarProps {
     leading?: SafeHtml;
     center?: SafeHtml;
     trailing?: SafeHtml;
     label?: string;
-    divider?: boolean;
+    /** Physical divider edges in canonical top/right/bottom/left order. Defaults to bottom. */
+    dividerSides?: DividerSides;
     className?: string;
 }
-declare function Toolbar({ leading, center, trailing, label, divider, className, }: ToolbarProps): SafeHtml;
+declare function Toolbar({ leading, center, trailing, label, dividerSides, className, }: ToolbarProps): SafeHtml;
 
-export { Toolbar, type ToolbarProps };
+export { DividerSides, Toolbar, type ToolbarProps };

package/dist/toolbar.js

@@ -1,3 +1,3 @@
-export { Toolbar } from './chunk-7L6EHUMV.js';
+export { Toolbar } from './chunk-SYDMYBPG.js';
 
 //# sourceMappingURL=toolbar.js.map

package/dist/value-table.js

@@ -1,4 +1,4 @@
-export { ValueTable, ValueTableRow } from './chunk-QQFJMRIB.js';
+export { ValueTable, ValueTableRow } from './chunk-KWWR5VMS.js';
 
 
 //# sourceMappingURL=value-table.js.map

package/dist/wire-catalog.d.ts

@@ -39,8 +39,10 @@ interface CatalogRevealOptions {
 declare function revealCatalogEntry(root: HTMLElement, id: string, { block, inline, behavior, media, }?: CatalogRevealOptions): () => void;
 /**
  * Keep a Catalog's opt-in geometry overlay synchronized with its preview.
- * Transparent specimens receive a dashed outer bound and positive margins use
- * devtools-style orange bands. Returns a disposer.
+ * Specimens receive computed border highlights (or a dashed bound when they
+ * have no border and are transparent), while positive computed margins use
+ * devtools-style orange bands. CSS/stylesheet-only changes are observed too.
+ * Returns a disposer.
  */
 declare function wireCatalogGeometryOverlay(root: HTMLElement): () => void;
 /**