@kerfjs/ui 5.0.0-beta.49 → 5.0.0-beta.50

package/dist/styles/split-view.css

@@ -17,7 +17,7 @@
   border-inline-end: 1px solid var(--kui-color-border);
 }
 
-.kui-split-view > .kui-resizable-region .kui-split-view__list {
+.kui-split-view__list[data-resizable="true"] {
   width: 100%;
   border-inline-end: 0;
 }

package/dist/styles/state-banner.css

@@ -21,14 +21,6 @@
     )
   );
   --_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)
@@ -151,22 +143,6 @@
 .kui-state-banner__copy strong {
   font-size: var(--kui-font-xs);
 }
-.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);
@@ -203,9 +179,6 @@
     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

@@ -1,5 +1,6 @@
 @import "./foundation.css";
 @import "./layout.css";
+@import "./badge.css";
 @import "./lucide-icon.css";
 @import "./disclosure-arrow.css";
 @import "./toolbar.css";

package/dist/styles/tab-bar.css

@@ -61,9 +61,14 @@
 }
 
 .kui-tab-bar__leading,
-.kui-tab-bar__trailing {
+.kui-tab-bar__trailing,
+.kui-tab-bar__end {
   display: flex;
   min-height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   align-items: center;
   flex: none;
 }
+
+.kui-tab-bar__end {
+  margin-inline-start: auto;
+}

package/dist/styles/text.css

@@ -20,3 +20,7 @@
 .kui-text[data-font="monospace"] {
   font-family: var(--kui-font-mono);
 }
+
+.kui-text[data-border="none"] {
+  border: 0;
+}

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

@@ -213,30 +213,7 @@
   margin-inline-start: 0.375rem;
 }
 
-.kui-toolbar-control-group:has(> .kui-token-search[data-collapsible="true"]) {
-  width: min(var(--kui-token-search-expanded-width, 30rem), 100%);
-  max-width: 100%;
-  height: auto;
-  min-width: 0;
-  overflow: hidden;
-  /* Same reason as the field above (KF-EPEM88): drive the inline size through
-     `width`, not `flex-basis`, so a group placed in a flex column is not
-     stretched to the expanded width in its cross axis. */
-  flex: 0 1 auto;
-  transition:
-    width 0.25s ease,
-    background-color 0.2s ease,
-    border-color 0.2s ease;
-}
-
-.kui-toolbar-control-group[data-expanded="false"]:has(
-    > .kui-token-search[data-collapsible="true"]
-  ) {
-  width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
-  flex: 0 0 auto;
-}
-
-.kui-toolbar-control-group > .kui-token-search[data-collapsible="true"] {
+.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"] {
   --kui-token-search-line-size: 2rem;
 
   min-height: 2.5rem;
@@ -250,14 +227,12 @@
   box-shadow: none;
 }
 
-.kui-toolbar-control-group
-  > .kui-token-search[data-collapsible="true"]:focus-within {
+.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"]:focus-within {
   border-color: var(--kui-color-focus);
   background: var(--kui-token-search-background);
 }
 
-.kui-toolbar-control-group
-  > .kui-token-search[data-collapsible="true"][data-expanded="false"] {
+.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"][data-expanded="false"] {
   width: 2.5rem;
   min-width: 2.5rem;
   height: 2.5rem;
@@ -265,23 +240,13 @@
   padding: 0;
 }
 
-.kui-toolbar-control-group
-  > .kui-token-search[data-collapsible="true"][data-expanded="false"]
+.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"][data-expanded="false"]
   .kui-token-search__expand {
   padding-inline: 0;
 }
 
-.kui-toolbar-control-group:has(
-    > .kui-token-search[data-collapsible="true"]
-  ):focus-within {
-  border-color: var(--kui-color-text-link);
-  box-shadow: 0 0 0 3px
-    color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
-}
-
 @media (prefers-reduced-motion: reduce) {
-  .kui-token-search[data-collapsible="true"],
-  .kui-toolbar-control-group:has(> .kui-token-search[data-collapsible="true"]) {
+  .kui-token-search[data-collapsible="true"] {
     transition-duration: 0s;
   }
 }

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

@@ -35,6 +35,16 @@
   gap: 0;
 }
 
+.kui-toolbar-control-group[data-visibility="compact-only"] {
+  display: none;
+}
+
+@container kui-toolbar (max-width: 44rem) {
+  .kui-toolbar-control-group[data-visibility="compact-only"] {
+    display: inline-flex;
+  }
+}
+
 /* `shape="rounded"` swaps the default pill radius for the design system's softer
    rounded rectangle. The shared highlight contract derives every inner hover or
    selected surface from this outer radius and the group's full inset. */
@@ -65,8 +75,30 @@
 .kui-toolbar-control-group[data-density="tight"] {
   --kui-layout-item-padding: 0.3125rem;
 }
-.kui-toolbar-control-group[data-content="text"] > :is(button, wa-button),
-.kui-toolbar-control-group[data-content="mixed"] > :is(button, wa-button) {
+.kui-toolbar-control-group[data-overflow="scroll"] {
+  max-width: 100%;
+  overflow-x: auto;
+}
+.kui-toolbar-control-group[data-content="search"] {
+  width: min(var(--kui-token-search-expanded-width, 30rem), 100%);
+  max-width: 100%;
+  height: auto;
+  min-width: 0;
+  overflow: hidden;
+  flex: 0 1 auto;
+  transition:
+    width 0.25s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+}
+.kui-toolbar-control-group[data-content="search"][data-expanded="false"] {
+  width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  flex: 0 0 auto;
+}
+.kui-toolbar-control-group[data-content="text"]
+  > :is(button, wa-button, .kui-toolbar-action-link),
+.kui-toolbar-control-group[data-content="mixed"]
+  > :is(button, wa-button, .kui-toolbar-action-link) {
   min-width: max-content;
 }
 .kui-toolbar-control-group[data-content="mixed"] > button {
@@ -123,7 +155,8 @@
   background: transparent;
 }
 
-.kui-toolbar-control-group > :is(button, wa-button, wa-dropdown) {
+.kui-toolbar-control-group
+  > :is(button, wa-button, wa-dropdown, .kui-toolbar-action-link) {
   flex: 0 0 auto;
 }
 .kui-toolbar-control-group > wa-dropdown {
@@ -154,8 +187,48 @@
   background: var(--kui-toolbar-control-hover-background);
 }
 
+.kui-toolbar-control-group > .kui-toolbar-action-link {
+  position: relative;
+  display: inline-flex;
+  min-width: 2.5rem;
+  height: 2.5rem;
+  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(
+    --kui-toolbar-item-radius,
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
+  );
+  color: inherit;
+  background: transparent;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kui-space-2xs);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.kui-toolbar-control-group > .kui-toolbar-action-link:hover {
+  border-color: var(--kui-toolbar-control-border);
+  background: var(--kui-toolbar-control-hover-background);
+}
+
+.kui-toolbar-action-link code {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 .kui-toolbar-control-group > button svg,
-.kui-toolbar-control-group wa-button > svg {
+.kui-toolbar-control-group wa-button > svg,
+.kui-toolbar-control-group > .kui-toolbar-action-link svg {
   display: block;
   width: 1rem;
   height: 1rem;
@@ -169,6 +242,7 @@
   height: 2.5rem;
 }
 .kui-toolbar-control-group[data-size="compact"] > button,
+.kui-toolbar-control-group[data-size="compact"] > .kui-toolbar-action-link,
 .kui-toolbar-control-group[data-size="compact"] > wa-button,
 .kui-toolbar-control-group[data-size="compact"] > wa-dropdown,
 .kui-toolbar-control-group[data-size="compact"] > wa-dropdown > wa-button,
@@ -186,6 +260,17 @@
   min-height: 2rem;
 }
 
+.kui-toolbar-control-group[data-menu-inset="standard"] wa-dropdown::part(menu) {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-toolbar-control-group[data-menu-inset="compact"] wa-dropdown::part(menu) {
+  padding: 0.25rem;
+}
+.kui-toolbar-control-group[data-menu-inset="list-zero"]
+  wa-dropdown::part(menu) {
+  padding: 0;
+}
+
 /* Compact mixed controls keep the default horizontal breathing room. Their
    raised selection grows over the group's own border instead of becoming a
    smaller inset lozenge, while negative margins keep the outer geometry and
@@ -260,12 +345,13 @@
 }
 
 .kui-toolbar-control-group[data-single="true"]:has(
-    > :is(button, wa-button, wa-dropdown)
+    > :is(button, wa-button, wa-dropdown, .kui-toolbar-action-link)
   ):hover {
   background-color: var(--kui-toolbar-control-hover-background);
 }
 
-.kui-toolbar-control-group[data-single="true"] > :is(button, wa-button):hover,
+.kui-toolbar-control-group[data-single="true"]
+  > :is(button, wa-button, .kui-toolbar-action-link):hover,
 .kui-toolbar-control-group[data-single="true"] wa-button:hover::part(base) {
   border-color: transparent;
   background: transparent;
@@ -276,15 +362,15 @@
    inner layer inset from the border (KF-J9P1ZD — a heading toolbar's lone Close/
    Done action). */
 .kui-toolbar-control-group:not([data-single="true"]):has(
-    > :is(button, wa-button):only-child
+    > :is(button, wa-button, .kui-toolbar-action-link):only-child
   ):hover {
   background-color: var(--kui-toolbar-control-hover-background);
 }
 
 .kui-toolbar-control-group:not([data-single="true"]):has(
-    > :is(button, wa-button):only-child
+    > :is(button, wa-button, .kui-toolbar-action-link):only-child
   )
-  > :is(button, wa-button):hover,
+  > :is(button, wa-button, .kui-toolbar-action-link):hover,
 .kui-toolbar-control-group:not([data-single="true"]):has(
     > :is(button, wa-button):only-child
   )
@@ -317,21 +403,23 @@
   box-shadow: var(--kui-toolbar-control-selected-shadow);
 }
 
-.kui-toolbar-control-group > :is(button, wa-button):focus-visible {
+.kui-toolbar-control-group
+  > :is(button, wa-button, .kui-toolbar-action-link):focus-visible {
   outline: var(--kui-focus-ring);
   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])
-) {
+.kui-toolbar-control-group[data-focus-ring="outline"]:focus-within {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
+.kui-toolbar-control-group[data-focus-ring="halo"]:focus-within {
+  border-color: var(--kui-color-text-link);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
+}
+
 .kui-toolbar-control-group[data-button-appearance="push"][data-single="true"]:has(
     > :is(button, wa-button)[aria-pressed="true"]
   ) {
@@ -346,6 +434,12 @@
   color: var(--kui-toolbar-control-pressed-color);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .kui-toolbar-control-group[data-content="search"] {
+    transition-duration: 0s;
+  }
+}
+
 /* 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

package/dist/styles/toolbar-text.css

@@ -18,6 +18,10 @@
   min-width: 0;
   max-width: 100%;
   overflow: hidden;
+  /* Keep the line box larger than the font's em square. Glyph ink can extend
+     below a 1em line box, so clipping for ellipsis must not also shave off
+     descenders such as g, j, p, q, and y. */
+  line-height: 1.2;
   white-space: nowrap;
   text-overflow: ellipsis;
 }

package/dist/styles/toolbar.css

@@ -85,6 +85,15 @@
   grid-column: 2;
 }
 
+.kui-toolbar[data-center-align="stretch"] > .kui-toolbar__center {
+  justify-content: flex-start;
+}
+
+.kui-toolbar[data-center-align="stretch"] > .kui-toolbar__center > * {
+  width: 100%;
+  flex-basis: 100%;
+}
+
 .kui-toolbar__trailing {
   justify-content: flex-end;
   grid-column: -2 / -1;
@@ -95,3 +104,66 @@
 .kui-toolbar__trailing:empty {
   display: none;
 }
+
+@container kui-toolbar (max-width: 52rem) {
+  .kui-toolbar[data-responsive="stack"][data-responsive-at="narrow"] {
+    height: auto;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "leading" "center" "trailing";
+    row-gap: var(--kui-toolbar-gap, 0.5rem);
+  }
+
+  .kui-toolbar[data-responsive="stack"][data-responsive-at="narrow"]
+    > .kui-toolbar__leading,
+  .kui-toolbar[data-responsive="stack"][data-responsive-at="narrow"]
+    > .kui-toolbar__center,
+  .kui-toolbar[data-responsive="stack"][data-responsive-at="narrow"]
+    > .kui-toolbar__trailing {
+    width: 100%;
+    grid-column: 1;
+    justify-content: flex-start;
+  }
+}
+
+@container kui-toolbar (max-width: 44rem) {
+  .kui-toolbar[data-responsive="stack"][data-responsive-at="compact"] {
+    height: auto;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "leading" "center" "trailing";
+    row-gap: var(--kui-toolbar-gap, 0.5rem);
+  }
+
+  .kui-toolbar[data-responsive="stack"][data-responsive-at="compact"]
+    > .kui-toolbar__leading,
+  .kui-toolbar[data-responsive="stack"][data-responsive-at="compact"]
+    > .kui-toolbar__center,
+  .kui-toolbar[data-responsive="stack"][data-responsive-at="compact"]
+    > .kui-toolbar__trailing {
+    width: 100%;
+    grid-column: 1;
+    justify-content: flex-start;
+  }
+}
+
+@container kui-toolbar (max-width: 42rem) {
+  .kui-toolbar[data-responsive="center-priority"]:has(
+      > .kui-toolbar__center [data-expanded="true"]
+    ) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .kui-toolbar[data-responsive="center-priority"]:has(
+      > .kui-toolbar__center [data-expanded="true"]
+    )
+    > .kui-toolbar__center {
+    width: 100%;
+    grid-column: 1;
+  }
+
+  .kui-toolbar[data-responsive="center-priority"]:has(
+      > .kui-toolbar__center [data-expanded="true"]
+    )
+    > :is(.kui-toolbar__leading, .kui-toolbar__trailing) {
+    display: none;
+  }
+}

package/dist/styles/webawesome.css

@@ -336,22 +336,37 @@
     box-shadow: none;
   }
 
-  /* Unframed disclosures align directly with their surrounding content.
-     Framed disclosure headers use the roomier container tier so the trigger
-     reads as the surface heading while the body keeps its compact inset. */
-  wa-details[appearance="plain"]::part(header),
-  wa-details[appearance="plain"]::part(content),
+  wa-details[appearance="plain"]::part(header) {
+    padding-inline: var(--kui-wa-surface-inset);
+  }
+
+  wa-details[appearance="plain"]::part(content) {
+    padding-inline: 0;
+  }
+
+  wa-details:is([appearance="outlined"], [appearance="sunken"])::part(header) {
+    padding-inline: var(--kui-wa-container-inset);
+  }
+
+  wa-details:is([appearance="outlined"], [appearance="sunken"])::part(content) {
+    padding-inline: var(--kui-wa-surface-inset);
+  }
+
   wa-accordion[appearance="plain"] > wa-accordion-item::part(button),
   wa-accordion[appearance="plain"] > wa-accordion-item::part(content) {
-    padding-inline: 0;
+    padding-inline: var(--kui-wa-surface-inset);
   }
 
-  wa-details:is([appearance="outlined"], [appearance="sunken"])::part(header),
   wa-accordion:is([appearance="outlined"], [appearance="sunken"])
     > wa-accordion-item::part(button) {
     padding-inline: var(--kui-wa-container-inset);
   }
 
+  wa-accordion:is([appearance="outlined"], [appearance="sunken"])
+    > wa-accordion-item::part(content) {
+    padding-inline: var(--kui-wa-container-inset);
+  }
+
   wa-card,
   wa-details,
   wa-accordion-item {

package/dist/sunken-panel.d.ts

@@ -9,12 +9,14 @@ interface SunkenPanelProps {
     /** Corner shape: a rounded rectangle (default) or square corners. */
     shape?: SunkenPanelShape;
     className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /**
  * A lowered application surface with one compact inset and a vertical content
  * stack. The panel owns its background and padding; children own their own
  * borders and internal geometry.
  */
-declare function SunkenPanel({ children, ariaLabel, shape, className, }: SunkenPanelProps): kerfjs.SafeHtml;
+declare function SunkenPanel({ children, ariaLabel, shape, className, slot, }: SunkenPanelProps): kerfjs.SafeHtml;
 
 export { SunkenPanel, type SunkenPanelProps, type SunkenPanelShape };

package/dist/sunken-panel.js

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

package/dist/surface-scaffold.d.ts

@@ -11,16 +11,20 @@ interface DialogSurfaceProps {
     bodyInset?: SurfaceInset;
     footerInset?: SurfaceInset;
     className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /** Configure recurring Web Awesome dialog geometry without consumer ::part() CSS. */
-declare function DialogSurface({ children, size, presentation, bodyInset, footerInset, className, }: DialogSurfaceProps): kerfjs.SafeHtml;
+declare function DialogSurface({ children, size, presentation, bodyInset, footerInset, className, slot, }: DialogSurfaceProps): kerfjs.SafeHtml;
 type PopupSurfaceInset = 'standard' | 'compact' | 'list-zero';
 interface PopupSurfaceProps {
     children: KerfUiContent;
     inset?: PopupSurfaceInset;
     className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /** Configure recurring Web Awesome dropdown-menu geometry without consumer ::part() CSS. */
-declare function PopupSurface({ children, inset, className, }: PopupSurfaceProps): kerfjs.SafeHtml;
+declare function PopupSurface({ children, inset, className, slot, }: 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-WSXUPSID.js';
+export { DialogSurface, PopupSurface } from './chunk-NN6GYOA2.js';
 
 //# sourceMappingURL=surface-scaffold.js.map

package/dist/tab-bar.d.ts

@@ -11,6 +11,11 @@ interface TabBarProps {
     children: KerfUiContent;
     leading?: KerfUiContent;
     trailing?: KerfUiContent;
+    /**
+     * Action pinned to the far edge of the bar. Combine with an adjacent `trailing`
+     * action when the tab-local and workspace-level actions must remain distinct.
+     */
+    end?: KerfUiContent;
     className?: string;
     /**
      * Keyboard activation mode for this strip, emitted as `data-tab-activation` for
@@ -25,8 +30,10 @@ interface TabBarProps {
     presentation?: TabBarPresentation;
     /** Keep a trailing action beside the final tab or at the far edge of the bar. */
     trailingPlacement?: TabBarTrailingPlacement;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /** 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): kerfjs.SafeHtml;
+declare function TabBar({ id, label, children, leading, trailing, end, className, activation, allocation, presentation, trailingPlacement, slot, }: 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-ZPWZIVI6.js';
+export { TabBar } from './chunk-N3GKMPDW.js';
 
 //# sourceMappingURL=tab-bar.js.map

package/dist/tab-scaffold.d.ts

@@ -17,6 +17,8 @@ interface TabScaffoldProps<Id extends string = string> {
     /** The controlled active tab id (the app owns selection). */
     active: NoInfer<Id>;
     className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /**
  * A mobile-first, iOS-like bottom tab scaffold: a bottom tab bar that switches
@@ -26,6 +28,6 @@ interface TabScaffoldProps<Id extends string = string> {
  * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of
  * a bottom bar. See `docs/23-app-layouts.md` §3.4.
  */
-declare function TabScaffold<Id extends string>({ id, label, tabs, active, className, }: TabScaffoldProps<Id>): SafeHtml;
+declare function TabScaffold<Id extends string>({ id, label, tabs, active, className, slot, }: TabScaffoldProps<Id>): SafeHtml;
 
 export { TabScaffold, type TabScaffoldProps, type TabScaffoldTab };

package/dist/tab-scaffold.js

@@ -6,7 +6,8 @@ function TabScaffold({
   label,
   tabs,
   active,
-  className = ""
+  className = "",
+  slot
 }) {
   return /* @__PURE__ */ jsxs(
     "section",
@@ -15,6 +16,7 @@ function TabScaffold({
       id,
       "data-component": "tab-scaffold",
       "data-tab-scaffold-id": id,
+      slot,
       children: [
         /* @__PURE__ */ jsx("div", { class: "kui-tab-scaffold__scenes", children: tabs.map((tab) => /* @__PURE__ */ jsx(
           "div",

package/dist/tab-scaffold.js.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["../src/tab-scaffold.tsx"],"names":[],"mappings":";;;AAiCO,SAAS,WAAA,CAA+B;AAAA,EAC7C,EAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,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,MACtB,IAAA;AAAA,MAEA,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  /** Native named-slot assignment when composed inside a web component. */\n  slot?: 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  slot,\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      slot={slot}\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"]}