@kerfjs/ui 5.0.0-beta.29 → 5.0.0-beta.30

package/dist/styles/foundation.css

@@ -58,6 +58,7 @@
   --kui-layout-content-gap: var(--kui-space-l);
   --kui-layout-control-gap: var(--kui-space-xs);
   --kui-layout-metadata-gap: var(--kui-space-2xs);
+  --kui-layout-highlight-inset: 2px;
   --kui-layout-rounded-radius: calc(1px + 0.6875rem);
   --kui-layout-pill-radius: calc(1px + 1.3125rem);
   --kui-toolbar-group-inner-size: 2.625rem;
@@ -186,6 +187,35 @@
      value matches brand-on-quiet, which already passes over the dark fills. */
   --kui-color-brand-on-fill: light-dark(#1a5dcf, #8acbff);
 
+  /* Pop is attractive emphasis without status meaning: use it for featured,
+     novel, or celebratory content, never as a success/danger substitute. */
+  --kui-color-pop-fill-loud: light-dark(#af34d4, #da8fff);
+  --kui-color-pop-fill-quiet: color-mix(
+    in srgb,
+    var(--kui-color-pop-fill-loud) 10%,
+    var(--kui-color-surface)
+  );
+  --kui-color-pop-fill-normal: color-mix(
+    in srgb,
+    var(--kui-color-pop-fill-loud) 18%,
+    var(--kui-color-surface)
+  );
+  --kui-color-pop-border-quiet: color-mix(
+    in srgb,
+    var(--kui-color-pop-fill-loud) 36%,
+    var(--kui-color-surface)
+  );
+  --kui-color-pop-border-normal: color-mix(
+    in srgb,
+    var(--kui-color-pop-fill-loud) 58%,
+    var(--kui-color-surface)
+  );
+  --kui-color-pop-border-loud: var(--kui-color-pop-fill-loud);
+  --kui-color-pop-on-quiet: light-dark(#792498, #e8a5ff);
+  --kui-color-pop-on-normal: var(--kui-color-pop-on-quiet);
+  --kui-color-pop-on-loud: light-dark(#fff, #241126);
+  --kui-color-pop-on-fill: var(--kui-color-pop-on-quiet);
+
   --kui-color-success-fill-loud: var(--wa-color-success-fill-loud, #34c759);
   --kui-color-success-fill-quiet: var(
     --wa-color-success-fill-quiet,
@@ -337,6 +367,8 @@
   --kui-color-border-quiet: var(--kui-color-neutral-border-quiet);
   --kui-color-accent: var(--kui-color-brand-fill-normal);
   --kui-color-accent-text: var(--kui-color-brand-on-quiet);
+  --kui-color-pop: var(--kui-color-pop-fill-quiet);
+  --kui-color-pop-text: var(--kui-color-pop-on-fill);
   --kui-color-success: var(--kui-color-success-fill-quiet);
   --kui-color-success-text: var(--kui-color-success-on-quiet);
   --kui-color-warning: var(--kui-color-warning-fill-quiet);
@@ -356,6 +388,18 @@
 
 @media (prefers-contrast: more) {
   :root {
+    --kui-color-pop-fill-quiet: Canvas;
+    --kui-color-pop-fill-normal: Canvas;
+    --kui-color-pop-fill-loud: Highlight;
+    --kui-color-pop-border-quiet: currentColor;
+    --kui-color-pop-border-normal: currentColor;
+    --kui-color-pop-border-loud: currentColor;
+    --kui-color-pop-on-quiet: currentColor;
+    --kui-color-pop-on-normal: currentColor;
+    --kui-color-pop-on-loud: HighlightText;
+    --kui-color-pop-on-fill: currentColor;
+    --kui-color-pop: Canvas;
+    --kui-color-pop-text: currentColor;
     --kui-color-border: currentColor;
     --kui-focus-ring: 3px solid currentColor;
   }

package/dist/styles/list-header.css

@@ -112,6 +112,12 @@
   background: var(--kui-color-brand-fill-normal);
 }
 
+.kui-list-header[data-indicator-tone="pop"]
+  :is(.kui-list-header__count, .kui-list-header__badge) {
+  color: var(--kui-color-pop-on-normal);
+  background: var(--kui-color-pop-fill-normal);
+}
+
 .kui-list-header[data-indicator-tone="danger"]
   :is(.kui-list-header__count, .kui-list-header__badge) {
   color: var(--kui-color-danger-on-normal);

package/dist/styles/list-item.css

@@ -11,6 +11,7 @@
   display: grid;
   width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
   min-height: 2.75rem;
+  overflow: hidden;
   margin-inline: var(--kui-layout-inline-margin, 0.5rem);
   padding: var(--kui-layout-item-padding, 0.5rem);
   box-sizing: border-box;
@@ -31,6 +32,14 @@
   padding-block: 0.25rem;
 }
 
+.kui-list-item[data-has-description="true"] {
+  min-height: 3.25rem;
+}
+
+.kui-list-item[data-density="compact"][data-has-description="true"] {
+  min-height: 2.75rem;
+}
+
 .kui-list-item[data-divider="before"],
 .kui-list-item[data-divider="both"] {
   border-block-start-color: var(--kui-list-group-divider-color);

package/dist/styles/nav-stack.css

@@ -1,4 +1,5 @@
 .kui-nav-stack {
+  position: relative;
   display: flex;
   min-width: 0;
   min-height: 0;
@@ -8,6 +9,32 @@
   background: var(--kui-color-surface);
 }
 
+.kui-nav-stack__chrome,
+.kui-nav-stack__bottom {
+  transition: opacity var(--kui-nav-stack-transition-duration, 200ms) ease;
+}
+
+.kui-nav-stack__chrome--entering {
+  opacity: 0;
+}
+
+.kui-nav-stack__chrome-copy {
+  position: absolute;
+  z-index: 2;
+  inset-block-start: 0;
+  inset-inline: 0;
+  pointer-events: none;
+  transition: opacity var(--kui-nav-stack-transition-duration, 200ms) ease;
+}
+
+.kui-nav-stack__chrome-copy--bottom {
+  inset-block: auto 0;
+}
+
+.kui-nav-stack__chrome-copy--exiting {
+  opacity: 0;
+}
+
 .kui-nav-stack__chrome {
   display: flex;
   min-width: 0;
@@ -77,7 +104,7 @@
   position: absolute;
   overflow: auto;
   background: var(--kui-color-surface);
-  transition: transform 200ms ease;
+  transition: transform var(--kui-nav-stack-transition-duration, 200ms) ease;
   inset: 0;
 }
 
@@ -105,7 +132,10 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .kui-nav-stack__view {
+  .kui-nav-stack__view,
+  .kui-nav-stack__chrome,
+  .kui-nav-stack__bottom,
+  .kui-nav-stack__chrome-copy {
     transition: none;
   }
 }

package/dist/styles/segmented-control.css

@@ -14,7 +14,7 @@
   );
   --kui-segmented-item-radius: max(
     0px,
-    calc(var(--kui-segmented-radius) - 2px)
+    calc(var(--kui-segmented-radius) - var(--kui-layout-highlight-inset, 2px))
   );
   display: inline-flex;
   max-width: 100%;
@@ -41,6 +41,13 @@
 }
 
 .kui-segmented-control[data-appearance="toolbar"] {
+  --kui-segmented-item-radius: var(
+    --kui-control-highlight-radius,
+    max(
+      0px,
+      calc(var(--kui-segmented-radius) - var(--kui-layout-highlight-inset, 2px))
+    )
+  );
   --kui-segmented-background: transparent;
   --kui-segmented-foreground: var(
     --kui-toolbar-control-color,

package/dist/styles/select.css

@@ -86,6 +86,7 @@
 }
 .kui-select wa-option::part(start) {
   align-self: center;
+  margin-inline-end: 0.5rem;
   margin-top: 0;
 }
 .kui-select wa-option::part(label) {
@@ -102,7 +103,7 @@
   height: 1rem;
   flex: none;
 }
-.kui-select__icon[slot="start"] {
+.kui-select > .kui-select__icon[slot="start"] {
   margin-inline-end: 0.5rem !important;
 }
 .kui-select__icon svg {

package/dist/styles/state-banner.css

@@ -63,6 +63,20 @@
     var(--kui-state-banner-info-foreground, var(--kui-color-brand-on-fill))
   );
 }
+.kui-state-banner[data-tone="pop"] {
+  --_kui-state-banner-background: var(
+    --kui-state-banner-background,
+    var(--kui-state-banner-pop-background, var(--kui-color-pop-fill-quiet))
+  );
+  --_kui-state-banner-border: var(
+    --kui-state-banner-border,
+    var(--kui-state-banner-pop-border, var(--kui-color-pop-border-normal))
+  );
+  --_kui-state-banner-foreground: var(
+    --kui-state-banner-foreground,
+    var(--kui-state-banner-pop-foreground, var(--kui-color-pop-on-fill))
+  );
+}
 .kui-state-banner[data-tone="success"] {
   --_kui-state-banner-background: var(
     --kui-state-banner-background,

package/dist/styles/tab-scaffold.css

@@ -76,6 +76,7 @@
 }
 
 .kui-tab-scaffold__tab-label {
+  flex: none;
   max-width: 100%;
   overflow: hidden;
   font-size: var(--kui-font-2xs);

package/dist/styles/token-search-field.css

@@ -242,6 +242,10 @@
   min-height: 2.5rem;
   padding: 0.25rem 0.375rem;
   border: 0;
+  /* This field is the group's inset visual layer. Inherit the same concentric
+     radius contract as buttons instead of retaining TokenSearchField's own pill
+     radius when the group switches to `shape="rounded"`. */
+  border-radius: var(--kui-control-highlight-radius);
   background: transparent;
   box-shadow: none;
 }

package/dist/styles/toolbar-control-group.css

@@ -10,16 +10,24 @@
   --kui-toolbar-control-pressed-background: var(--kui-color-neutral-fill-loud);
   --kui-toolbar-control-pressed-border: var(--kui-color-neutral-border-loud);
   --kui-toolbar-control-pressed-color: var(--kui-color-neutral-on-loud);
+  --kui-toolbar-group-radius: var(
+    --kui-layout-pill-radius,
+    calc(1px + 1.3125rem)
+  );
+  --kui-control-highlight-radius: max(
+    0px,
+    calc(
+      var(--kui-toolbar-group-radius) - var(--kui-layout-highlight-inset, 2px)
+    )
+  );
+  --kui-toolbar-item-radius: var(--kui-control-highlight-radius);
   display: inline-flex;
   height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   min-width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   padding: 1px;
   box-sizing: border-box;
   border: 1px solid var(--kui-toolbar-control-border);
-  border-radius: var(
-    --kui-toolbar-group-radius,
-    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
-  );
+  border-radius: var(--kui-toolbar-group-radius);
   color: var(--kui-toolbar-control-color);
   background: var(--kui-toolbar-control-background);
   align-items: center;
@@ -28,17 +36,13 @@
 }
 
 /* `shape="rounded"` swaps the default pill radius for the design system's softer
-   rounded-rectangle radius on both the group and its items (custom properties
-   inherit to the item rules that read them). */
+   rounded rectangle. The shared highlight contract derives every inner hover or
+   selected surface from this outer radius and the group's full inset. */
 .kui-toolbar-control-group[data-shape="rounded"] {
   --kui-toolbar-group-radius: var(
     --kui-layout-rounded-radius,
     calc(1px + 0.6875rem)
   );
-  --kui-toolbar-item-radius: var(
-    --kui-layout-rounded-radius,
-    calc(1px + 0.6875rem)
-  );
 }
 
 .kui-toolbar-control-group[data-tone="dark"] {
@@ -76,12 +80,6 @@
   padding-inline-start: 0.375rem;
   border-inline-start: 1px solid var(--kui-toolbar-control-border);
 }
-.kui-toolbar-control-group[data-content="avatar"] img {
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: var(--kui-radius-pill);
-  object-fit: cover;
-}
 .kui-toolbar-control-group[data-content="avatar"][data-scrim="true"] {
   --kui-toolbar-control-background: color-mix(
     in srgb,
@@ -96,6 +94,9 @@
     --kui-color-neutral-fill-normal
   );
 }
+.kui-toolbar-control-group[data-selected-tone="pop"] {
+  --kui-toolbar-control-selected-color: var(--kui-color-pop-on-quiet);
+}
 .kui-toolbar-control-group[data-selected-chrome="filled"] {
   --kui-toolbar-control-selected-shadow: none;
   --kui-toolbar-control-selected-border: transparent;
@@ -107,6 +108,14 @@
   --kui-toolbar-control-selected-background: transparent;
   --kui-toolbar-control-selected-border: var(--kui-color-brand-border-normal);
 }
+.kui-toolbar-control-group[data-selected-tone="pop"][data-selected-chrome="filled"] {
+  --kui-toolbar-control-selected-background: var(--kui-color-pop-fill-normal);
+  --kui-toolbar-control-selected-color: var(--kui-color-pop-on-normal);
+}
+.kui-toolbar-control-group[data-selected-tone="pop"][data-selected-chrome="outline"] {
+  --kui-toolbar-control-selected-border: var(--kui-color-pop-border-normal);
+  --kui-toolbar-control-selected-color: var(--kui-color-pop-on-quiet);
+}
 
 .kui-toolbar-control-group[data-appearance="borderless"] {
   /* A borderless group has no base fill to lift from, so the default
@@ -184,6 +193,28 @@
   min-height: 2rem;
 }
 
+/* A compact icon-only trigger may stay square, but a mixed-content dropdown
+   trigger must grow for its slotted label plus Web Awesome's caret. Otherwise
+   the fixed 32px base centers both outside its host, painting the label across
+   the separator and the caret beyond the group border. */
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown
+  > wa-button,
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown
+  > wa-button::part(base) {
+  min-width: max-content;
+}
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown
+  > wa-button {
+  /* WebKit does not contribute a custom element's shadow-part caret to the
+     host's intrinsic inline size. Give the standard short text trigger an
+     engine-stable floor; max-content still wins for longer light-DOM labels,
+     and consumers can raise the public variable for localized copy. */
+  width: var(--kui-toolbar-dropdown-trigger-width, 4.125rem);
+}
+
 .kui-toolbar-control-group[data-single="true"] > wa-dropdown,
 .kui-toolbar-control-group[data-single="true"] > wa-dropdown > wa-button,
 .kui-toolbar-control-group[data-single="true"]
@@ -282,6 +313,16 @@
   outline-offset: 1px;
 }
 
+/* A composed Select can delegate focus paint to the group so the visible ring
+   follows the group's selected pill/rounded geometry instead of Web Awesome's
+   form-control radius. */
+.kui-toolbar-control-group:has(
+  > .kui-select[data-focus-ring-owner="group"]:is(:focus-within, [open])
+) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
 .kui-toolbar-control-group[data-button-appearance="push"][data-single="true"]:has(
     > :is(button, wa-button)[aria-pressed="true"]
   ) {
@@ -295,3 +336,44 @@
   > :is(button, wa-button)[aria-pressed="true"] {
   color: var(--kui-toolbar-control-pressed-color);
 }
+
+/* Avatar controls paint the image as chrome rather than inserting a replaced
+   <img> into the control. `background-size: contain` is the background-image
+   equivalent of `object-fit: contain`: the whole avatar remains visible. A
+   lone control belongs to the outer group surface; in a group of choices the
+   image belongs only to the selected highlight. */
+.kui-toolbar-control-group[data-content="avatar"] {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.kui-toolbar-control-group[data-content="avatar"]:is(
+    [data-single="true"],
+    :has(> :is(button, wa-button):only-child)
+  ) {
+  background-image: var(--kui-toolbar-avatar-image);
+}
+
+.kui-toolbar-control-group[data-content="avatar"]:is(
+    [data-single="true"],
+    :has(> :is(button, wa-button):only-child)
+  )
+  > :is(button, wa-button) {
+  color: transparent;
+}
+
+.kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
+    :has(> :is(button, wa-button):only-child)
+  )
+  > button[aria-pressed="true"],
+.kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
+    :has(> :is(button, wa-button):only-child)
+  )
+  > wa-button[aria-pressed="true"]::part(base) {
+  color: transparent;
+  background-image: var(--kui-toolbar-avatar-image);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}

package/dist/styles/webawesome.css

@@ -287,13 +287,27 @@
   /* Card halves --spacing for its header block padding upstream, so pin the
      public part to the same full surface inset as its body and footer. */
   wa-card::part(header) {
+    border-bottom: none;
     padding: var(--kui-wa-surface-inset);
   }
 
+  wa-card::part(body) {
+    padding: var(--kui-wa-surface-inset);
+  }
+
+  wa-card::part(footer) {
+    border-top: none;
+    padding: var(--kui-wa-container-inset);
+  }
+
   /* Dialog content follows the compact surface inset, while its action region
      retains the roomier homogeneous-group step. Keep these independent of
      Web Awesome's shared --spacing property so applications can tune the
      header without accidentally moving body or footer content. */
+  wa-dialog::part(header) {
+    padding: var(--kui-wa-surface-inset);
+  }
+
   wa-dialog::part(body) {
     padding: var(--kui-wa-surface-inset);
   }
@@ -302,6 +316,14 @@
     padding: var(--kui-wa-container-inset);
   }
 
+  /* Dialogs that provide their own dismissal affordance can opt out of Web
+     Awesome's header action region without reaching through the shadow root.
+     `header-actions` is a directly exported part, so it must be targeted from
+     the host rather than chained through the `dialog` and `header` parts. */
+  wa-dialog.hide-actions::part(header-actions) {
+    display: none;
+  }
+
   wa-callout {
     padding: var(--kui-wa-surface-inset) !important;
   }

package/dist/styles/workbench.css

@@ -53,6 +53,7 @@
 
 /* Bottom drawer — the vertical analogue of a rail. */
 .kui-workbench__drawer {
+  position: relative;
   flex: 0 0 var(--kui-workbench-drawer-height, 13.75rem);
   min-height: 0;
   overflow: hidden;
@@ -85,6 +86,9 @@
 }
 
 .kui-workbench__drawer .kui-workbench__panel-content {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
   width: 100%;
   height: var(--kui-workbench-drawer-height, 13.75rem);
   transition: transform 200ms ease;

package/dist/sunken-panel.d.ts

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

package/dist/sunken-panel.js

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

package/dist/surface-scaffold.d.ts

@@ -1,10 +1,11 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 type DialogSurfaceSize = 'small' | 'medium' | 'large';
 type DialogSurfacePresentation = 'modal' | 'side-sheet' | 'fullscreen';
 type SurfaceInset = 'none' | 'compact' | 'comfortable';
 interface DialogSurfaceProps {
-    children: SafeHtml | readonly SafeHtml[];
+    children: KerfUiContent;
     size?: DialogSurfaceSize;
     presentation?: DialogSurfacePresentation;
     bodyInset?: SurfaceInset;
@@ -12,14 +13,14 @@ interface DialogSurfaceProps {
     className?: string;
 }
 /** Configure recurring Web Awesome dialog geometry without consumer ::part() CSS. */
-declare function DialogSurface({ children, size, presentation, bodyInset, footerInset, className, }: DialogSurfaceProps): SafeHtml;
+declare function DialogSurface({ children, size, presentation, bodyInset, footerInset, className, }: DialogSurfaceProps): kerfjs.SafeHtml;
 type PopupSurfaceInset = 'standard' | 'compact' | 'list-zero';
 interface PopupSurfaceProps {
-    children: SafeHtml | readonly SafeHtml[];
+    children: KerfUiContent;
     inset?: PopupSurfaceInset;
     className?: string;
 }
 /** Configure recurring Web Awesome dropdown-menu geometry without consumer ::part() CSS. */
-declare function PopupSurface({ children, inset, className, }: PopupSurfaceProps): SafeHtml;
+declare function PopupSurface({ children, inset, className, }: PopupSurfaceProps): kerfjs.SafeHtml;
 
 export { DialogSurface, type DialogSurfacePresentation, type DialogSurfaceProps, type DialogSurfaceSize, PopupSurface, type PopupSurfaceInset, type PopupSurfaceProps, type SurfaceInset };

package/dist/surface-scaffold.js

@@ -1,3 +1,3 @@
-export { DialogSurface, PopupSurface } from './chunk-OBLTAKSX.js';
+export { DialogSurface, PopupSurface } from './chunk-WSXUPSID.js';
 
 //# sourceMappingURL=surface-scaffold.js.map

package/dist/tab-bar.d.ts

@@ -1,4 +1,5 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 type TabActivation = 'automatic' | 'manual';
 type TabBarAllocation = 'intrinsic' | 'fill';
@@ -7,9 +8,9 @@ type TabBarTrailingPlacement = 'separate' | 'adjacent';
 interface TabBarProps {
     id: string;
     label: string;
-    children: SafeHtml | readonly SafeHtml[];
-    leading?: SafeHtml;
-    trailing?: SafeHtml;
+    children: KerfUiContent;
+    leading?: KerfUiContent;
+    trailing?: KerfUiContent;
     className?: string;
     /**
      * Keyboard activation mode for this strip, emitted as `data-tab-activation` for
@@ -26,6 +27,6 @@ interface TabBarProps {
     trailingPlacement?: TabBarTrailingPlacement;
 }
 /** Render a controlled tab strip. The application owns selection, order, and persistence. */
-declare function TabBar({ id, label, children, leading, trailing, className, activation, allocation, presentation, trailingPlacement, }: TabBarProps): SafeHtml;
+declare function TabBar({ id, label, children, leading, trailing, className, activation, allocation, presentation, trailingPlacement, }: TabBarProps): kerfjs.SafeHtml;
 
 export { type TabActivation, TabBar, type TabBarAllocation, type TabBarPresentation, type TabBarProps, type TabBarTrailingPlacement };

package/dist/tab-bar.js

@@ -1,3 +1,3 @@
-export { TabBar } from './chunk-X2U3QJCJ.js';
+export { TabBar } from './chunk-ZPWZIVI6.js';
 
 //# sourceMappingURL=tab-bar.js.map

package/dist/tab-scaffold.d.ts

@@ -1,4 +1,5 @@
 import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 interface TabScaffoldTab<Id extends string = string> {
     id: Id;
@@ -6,7 +7,7 @@ interface TabScaffoldTab<Id extends string = string> {
     /** Decorative icon shown above the label in the bottom bar. */
     icon?: SafeHtml;
     /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */
-    content: SafeHtml;
+    content: KerfUiContent;
 }
 interface TabScaffoldProps<Id extends string = string> {
     id: string;

package/dist/tab-scaffold.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tab-scaffold.tsx"],"names":[],"mappings":";;;AA6BO,SAAS,WAAA,CAA+B;AAAA,EAC7C,EAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAyB;AACvB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,EAAA;AAAA,MACA,gBAAA,EAAe,cAAA;AAAA,MACf,sBAAA,EAAsB,EAAA;AAAA,MAEtB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,KAAA,EAAM,0BAAA,EACR,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,qBACT,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,yBAAA;AAAA,YACN,2BAAyB,GAAA,CAAI,EAAA;AAAA,YAC7B,aAAA,EAAa,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YACrC,aAAA,EAAa,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YAEpC,QAAA,EAAA,GAAA,CAAI;AAAA;AAAA,SAER,CAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAwB,IAAA,EAAK,SAAA,EAAU,YAAA,EAAY,KAAA,EAC3D,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,qBACT,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,uBAAA;AAAA,YACN,IAAA,EAAK,KAAA;AAAA,YACL,yBAAuB,GAAA,CAAI,EAAA;AAAA,YAC3B,eAAA,EAAe,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YACvC,QAAA,EAAU,GAAA,CAAI,EAAA,KAAO,MAAA,GAAS,GAAA,GAAM,IAAA;AAAA,YAEnC,QAAA,EAAA;AAAA,cAAA,GAAA,CAAI,IAAA,wBACF,MAAA,EAAA,EAAK,KAAA,EAAM,8BAA6B,aAAA,EAAY,MAAA,EAClD,cAAI,IAAA,EACP,CAAA;AAAA,8BAEF,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,6BAAA,EAA+B,cAAI,KAAA,EAAM;AAAA;AAAA;AAAA,SAExD,CAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ","file":"tab-scaffold.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface TabScaffoldTab<Id extends string = string> {\n  id: Id;\n  label: string;\n  /** Decorative icon shown above the label in the bottom bar. */\n  icon?: SafeHtml;\n  /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */\n  content: SafeHtml;\n}\n\nexport interface TabScaffoldProps<Id extends string = string> {\n  id: string;\n  /** Accessible name for the tab bar. */\n  label: string;\n  tabs: readonly TabScaffoldTab<Id>[];\n  /** The controlled active tab id (the app owns selection). */\n  active: NoInfer<Id>;\n  className?: string;\n}\n\n/**\n * A mobile-first, iOS-like bottom tab scaffold: a bottom tab bar that switches\n * between major sections, each tab keeping its own content (usually a `NavStack`)\n * mounted so its stack and scroll survive a switch. Controlled — the app owns\n * `active`; wire selection with `@kerfjs/ui/wire-tab-scaffold`'s `wireTabScaffold`.\n * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of\n * a bottom bar. See `docs/23-app-layouts.md` §3.4.\n */\nexport function TabScaffold<Id extends string>({\n  id,\n  label,\n  tabs,\n  active,\n  className = '',\n}: TabScaffoldProps<Id>) {\n  return (\n    <section\n      class={`kui-tab-scaffold ${className}`.trim()}\n      id={id}\n      data-component=\"tab-scaffold\"\n      data-tab-scaffold-id={id}\n    >\n      <div class=\"kui-tab-scaffold__scenes\">\n        {tabs.map((tab) => (\n          <div\n            class=\"kui-tab-scaffold__scene\"\n            data-tab-scaffold-scene={tab.id}\n            data-active={String(tab.id === active)}\n            aria-hidden={String(tab.id !== active)}\n          >\n            {tab.content}\n          </div>\n        ))}\n      </div>\n      <nav class=\"kui-tab-scaffold__bar\" role=\"tablist\" aria-label={label}>\n        {tabs.map((tab) => (\n          <button\n            type=\"button\"\n            class=\"kui-tab-scaffold__tab\"\n            role=\"tab\"\n            data-tab-scaffold-tab={tab.id}\n            aria-selected={String(tab.id === active)}\n            tabindex={tab.id === active ? '0' : '-1'}\n          >\n            {tab.icon && (\n              <span class=\"kui-tab-scaffold__tab-icon\" aria-hidden=\"true\">\n                {tab.icon}\n              </span>\n            )}\n            <span class=\"kui-tab-scaffold__tab-label\">{tab.label}</span>\n          </button>\n        ))}\n      </nav>\n    </section>\n  );\n}\n"]}
+{"version":3,"sources":["../src/tab-scaffold.tsx"],"names":[],"mappings":";;;AA+BO,SAAS,WAAA,CAA+B;AAAA,EAC7C,EAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAyB;AACvB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,EAAA;AAAA,MACA,gBAAA,EAAe,cAAA;AAAA,MACf,sBAAA,EAAsB,EAAA;AAAA,MAEtB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,KAAA,EAAM,0BAAA,EACR,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,qBACT,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,yBAAA;AAAA,YACN,2BAAyB,GAAA,CAAI,EAAA;AAAA,YAC7B,aAAA,EAAa,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YACrC,aAAA,EAAa,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YAEpC,QAAA,EAAA,GAAA,CAAI;AAAA;AAAA,SAER,CAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAwB,IAAA,EAAK,SAAA,EAAU,YAAA,EAAY,KAAA,EAC3D,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,qBACT,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,uBAAA;AAAA,YACN,IAAA,EAAK,KAAA;AAAA,YACL,yBAAuB,GAAA,CAAI,EAAA;AAAA,YAC3B,eAAA,EAAe,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YACvC,QAAA,EAAU,GAAA,CAAI,EAAA,KAAO,MAAA,GAAS,GAAA,GAAM,IAAA;AAAA,YAEnC,QAAA,EAAA;AAAA,cAAA,GAAA,CAAI,IAAA,wBACF,MAAA,EAAA,EAAK,KAAA,EAAM,8BAA6B,aAAA,EAAY,MAAA,EAClD,cAAI,IAAA,EACP,CAAA;AAAA,8BAEF,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,6BAAA,EAA+B,cAAI,KAAA,EAAM;AAAA;AAAA;AAAA,SAExD,CAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ","file":"tab-scaffold.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from './semantic-content.js';\n\nexport interface TabScaffoldTab<Id extends string = string> {\n  id: Id;\n  label: string;\n  /** Decorative icon shown above the label in the bottom bar. */\n  icon?: SafeHtml;\n  /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */\n  content: KerfUiContent;\n}\n\nexport interface TabScaffoldProps<Id extends string = string> {\n  id: string;\n  /** Accessible name for the tab bar. */\n  label: string;\n  tabs: readonly TabScaffoldTab<Id>[];\n  /** The controlled active tab id (the app owns selection). */\n  active: NoInfer<Id>;\n  className?: string;\n}\n\n/**\n * A mobile-first, iOS-like bottom tab scaffold: a bottom tab bar that switches\n * between major sections, each tab keeping its own content (usually a `NavStack`)\n * mounted so its stack and scroll survive a switch. Controlled — the app owns\n * `active`; wire selection with `@kerfjs/ui/wire-tab-scaffold`'s `wireTabScaffold`.\n * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of\n * a bottom bar. See `docs/23-app-layouts.md` §3.4.\n */\nexport function TabScaffold<Id extends string>({\n  id,\n  label,\n  tabs,\n  active,\n  className = '',\n}: TabScaffoldProps<Id>) {\n  return (\n    <section\n      class={`kui-tab-scaffold ${className}`.trim()}\n      id={id}\n      data-component=\"tab-scaffold\"\n      data-tab-scaffold-id={id}\n    >\n      <div class=\"kui-tab-scaffold__scenes\">\n        {tabs.map((tab) => (\n          <div\n            class=\"kui-tab-scaffold__scene\"\n            data-tab-scaffold-scene={tab.id}\n            data-active={String(tab.id === active)}\n            aria-hidden={String(tab.id !== active)}\n          >\n            {tab.content}\n          </div>\n        ))}\n      </div>\n      <nav class=\"kui-tab-scaffold__bar\" role=\"tablist\" aria-label={label}>\n        {tabs.map((tab) => (\n          <button\n            type=\"button\"\n            class=\"kui-tab-scaffold__tab\"\n            role=\"tab\"\n            data-tab-scaffold-tab={tab.id}\n            aria-selected={String(tab.id === active)}\n            tabindex={tab.id === active ? '0' : '-1'}\n          >\n            {tab.icon && (\n              <span class=\"kui-tab-scaffold__tab-icon\" aria-hidden=\"true\">\n                {tab.icon}\n              </span>\n            )}\n            <span class=\"kui-tab-scaffold__tab-label\">{tab.label}</span>\n          </button>\n        ))}\n      </nav>\n    </section>\n  );\n}\n"]}

package/dist/token-search-field.d.ts

@@ -1,4 +1,5 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 interface TokenSearchToken {
     value: string;
@@ -23,8 +24,8 @@ interface TokenSearchFieldBaseProps {
     tokenPlaceholder?: string;
     disabled?: boolean;
     autofocus?: boolean;
-    leading?: SafeHtml;
-    trailing?: SafeHtml;
+    leading?: KerfUiContent;
+    trailing?: KerfUiContent;
     editAction?: string;
     removeAction?: string;
     clearAction?: string;
@@ -50,7 +51,7 @@ interface TokenSearchFieldValue {
     query: string;
     tokens: TokenSearchToken[];
 }
-declare function TokenSearchField({ id, label, query, tokens, placeholder, tokenPlaceholder, disabled, autofocus, collapsible, expanded, expandAction, expandLabel, leading, trailing, editAction, removeAction, clearAction, clearLabel, className, editorAttributes, }: TokenSearchFieldProps): SafeHtml;
+declare function TokenSearchField({ id, label, query, tokens, placeholder, tokenPlaceholder, disabled, autofocus, collapsible, expanded, expandAction, expandLabel, leading, trailing, editAction, removeAction, clearAction, clearLabel, className, editorAttributes, }: TokenSearchFieldProps): kerfjs.SafeHtml;
 /** Read editable text and ordered token offsets from a rendered TokenSearchField editor. */
 declare function readTokenSearchField(editor: HTMLElement, knownTokens?: readonly TokenSearchToken[]): TokenSearchFieldValue;
 /** Focus an editor and place its caret at a text offset, skipping atomic token chips. */

package/dist/token-search-field.js

@@ -1,4 +1,4 @@
-export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-7KEUJIIC.js';
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-TIGSG6BX.js';
 
 
 //# sourceMappingURL=token-search-field.js.map