@kerfjs/ui 5.0.0-beta.55 → 5.0.0-beta.57

package/dist/styles/workbench.css

@@ -55,14 +55,14 @@
   --_kui-workbench-rail-safe-inset: var(--_kui-workbench-safe-inline-start);
   --kui-edge-inset-inline-start: var(--_kui-workbench-safe-inline-start);
   --kui-edge-inset-inline-end: 0px;
-  border-inline-end: 1px solid var(--kui-color-border);
+  border-inline-end: 1px solid var(--kui-color-neutral-border-normal);
 }
 
 .kui-workbench__rail--right {
   --_kui-workbench-rail-safe-inset: var(--_kui-workbench-safe-inline-end);
   --kui-edge-inset-inline-start: 0px;
   --kui-edge-inset-inline-end: var(--_kui-workbench-safe-inline-end);
-  border-inline-start: 1px solid var(--kui-color-border);
+  border-inline-start: 1px solid var(--kui-color-neutral-border-normal);
 }
 
 .kui-workbench__rail[data-collapsed="true"] {
@@ -157,30 +157,32 @@
     var(--kui-edge-inset-block-end);
 }
 
-.kui-workbench__main:not(
-    :has(
-      > :is(
-          [data-component="pane"],
-          [data-component="nav-stack"],
-          [data-component="split-view"],
-          [data-component="workbench"],
-          [data-component="tab-scaffold"]
-        ):only-child
-    )
-  )
-  > *,
-.kui-workbench__panel-content:not(
-    :has(
-      > :is(
-          [data-component="pane"],
-          [data-component="nav-stack"],
-          [data-component="split-view"],
-          [data-component="workbench"],
-          [data-component="tab-scaffold"]
-        ):only-child
-    )
-  )
-  > * {
+/* Every other child sees a cleared context. The exemption is tested on the
+   child itself, never as `region:not(:has(…)) > *`: a `:has()` before a
+   universal child makes each child of the region re-check the region's
+   `:has()` on every DOM change (~46ms per restyle for 1000 rows in Chromium).
+   SplitView, NavStack, TabScaffold, and CollapsiblePanel content use the same
+   shape. */
+.kui-workbench__main
+  > :not(
+    :is(
+      [data-component="pane"],
+      [data-component="nav-stack"],
+      [data-component="split-view"],
+      [data-component="workbench"],
+      [data-component="tab-scaffold"]
+    ):only-child
+  ),
+.kui-workbench__panel-content
+  > :not(
+    :is(
+      [data-component="pane"],
+      [data-component="nav-stack"],
+      [data-component="split-view"],
+      [data-component="workbench"],
+      [data-component="tab-scaffold"]
+    ):only-child
+  ) {
   --kui-edge-inset-block-start: 0px;
   --kui-edge-inset-block-end: 0px;
   --kui-edge-inset-inline-start: 0px;
@@ -189,15 +191,11 @@
 
 /* A region whose only child is a Pane or layout lets it fill the region, so a
    composed toolbar's footer (or the app's own) sits at the region's bottom
-   edge rather than under short content. */
+   edge rather than under short content. Each of those components fills the
+   region from its own stylesheet (pane.css, nav-stack.css, split-view.css,
+   tab-scaffold.css); a nested Workbench fills it here. */
 :is(.kui-workbench__main, .kui-workbench__panel-content)
-  > :is(
-    [data-component="pane"],
-    [data-component="nav-stack"],
-    [data-component="split-view"],
-    [data-component="workbench"],
-    [data-component="tab-scaffold"]
-  ):only-child {
+  > [data-component="workbench"]:only-child {
   height: 100%;
 }
 
@@ -213,7 +211,7 @@
   flex: 0 0 var(--_kui-workbench-drawer-extent);
   min-height: 0;
   overflow: hidden;
-  border-block-start: 1px solid var(--kui-color-border);
+  border-block-start: 1px solid var(--kui-color-neutral-border-normal);
   background: var(--kui-color-surface);
 }
 
@@ -387,10 +385,64 @@
   display: none;
 }
 
-/* Where the engine can extend a clip past the panel's edge, an expanded
-   panel lets exactly the handle's outer half through, so the hit target
-   straddles the separator like a ResizableRegion handle does. Collapsing drops
-   the margin again before the content slides out. */
+/* An expanded panel lets exactly the handle's outer half through its clip, so
+   the hit target straddles the separator like a ResizableRegion handle does
+   and the grip is drawn centered on the separator line. Collapsing drops the
+   extension again before the content slides out. Engines that can extend a
+   clip past the panel's edge do it with `overflow-clip-margin`; the rest
+   (WebKit) clip with a `clip-path` that reaches past the panel's edges. That
+   also makes the panel a stacking context, so the panel stacks at the
+   handle's own level to keep the handle's outer half above the work area
+   beside it. The clip and the stacking level sit at low specificity, so a
+   responsive overlay presentation (below) replaces both. */
+@supports not (overflow-clip-margin: 10px) {
+  .kui-workbench__rail[data-resizable="true"][data-presentation="inline"]:not(
+      [data-collapsed="true"],
+      [data-content-overflow="visible"]
+    ),
+  .kui-workbench__drawer[data-resizable="true"][data-presentation="inline"]:not(
+      [data-collapsed="true"],
+      [data-content-overflow="visible"]
+    ) {
+    overflow: visible;
+  }
+
+  .kui-workbench__rail:where(
+    [data-resizable="true"][data-presentation="inline"]:not(
+        [data-collapsed="true"],
+        [data-content-overflow="visible"]
+      )
+  ) {
+    z-index: 3;
+    clip-path: inset(0 -10px);
+  }
+
+  .kui-workbench__drawer:where(
+    [data-resizable="true"][data-presentation="inline"]:not(
+        [data-collapsed="true"],
+        [data-content-overflow="visible"]
+      )
+  ) {
+    z-index: 3;
+    clip-path: inset(-10px 0 0);
+  }
+
+  .kui-workbench__rail--left[data-resizable="true"][data-presentation="inline"]
+    > .kui-workbench__handle {
+    inset-inline-end: -10px;
+  }
+
+  .kui-workbench__rail--right[data-resizable="true"][data-presentation="inline"]
+    > .kui-workbench__handle {
+    inset-inline-start: -10px;
+  }
+
+  .kui-workbench__drawer[data-resizable="true"][data-presentation="inline"]
+    > .kui-workbench__handle {
+    inset-block-start: -10px;
+  }
+}
+
 @supports (overflow-clip-margin: 10px) {
   .kui-workbench__rail[data-resizable="true"]:not(
       [data-collapsed="true"],
@@ -542,6 +594,7 @@
     max-width: var(--kui-workbench-overlay-max-width, 85vw);
     inset-block: 0;
     box-shadow: var(--kui-shadow-l);
+    clip-path: none;
   }
 
   .kui-workbench__rail--left[data-responsive-overlay-at="narrow"] {
@@ -592,6 +645,7 @@
     inset-inline: 0;
     inset-block-end: 0;
     box-shadow: var(--kui-shadow-l);
+    clip-path: none;
   }
 
   .kui-workbench__drawer[data-responsive-overlay-at="narrow"][data-collapsed="true"] {
@@ -626,6 +680,7 @@
     max-width: var(--kui-workbench-overlay-max-width, 85vw);
     inset-block: 0;
     box-shadow: var(--kui-shadow-l);
+    clip-path: none;
   }
 
   .kui-workbench__rail--left[data-responsive-overlay-at="compact"] {
@@ -676,6 +731,7 @@
     inset-inline: 0;
     inset-block-end: 0;
     box-shadow: var(--kui-shadow-l);
+    clip-path: none;
   }
 
   .kui-workbench__drawer[data-responsive-overlay-at="compact"][data-collapsed="true"] {
@@ -717,10 +773,15 @@
     --kui-workbench-restore-inset,
     1rem
   );
-  /* The corner owns the inset, so a FloatingToolbar composed here floats
-     from this point instead of adding its own inset on top. */
-  --kui-floating-toolbar-inset: 0px;
   position: absolute;
+  /* Hidden while an open rail overlay covers the work area (see below). */
+  visibility: var(
+    --_kui-workbench-covered,
+    var(
+      --_kui-collapsible-panel-covered,
+      var(--_kui-resizable-region-covered, inherit)
+    )
+  );
   z-index: var(
     --kui-workbench-restore-z,
     calc(var(--kui-workbench-overlay-z, 41) - 2)
@@ -788,6 +849,48 @@
   );
 }
 
+/* An open rail overlay — static or a responsive one whose breakpoint applies —
+   covers the work area, so the work area's floating controls (a
+   FloatingToolbar in main, the drawer's restore corner, the other rail's
+   restore corner) are hidden, not merely stacked beneath it: they never paint
+   over the overlay whatever stacking context an app puts them in, and hidden
+   they leave the tab order and the accessibility tree. They come back as the
+   overlay closes. The Workbench's own covered context,
+   `--_kui-workbench-covered`, is set on the rail's siblings only (never on
+   the open rail), so the overlay's own floating controls stay; FloatingToolbar
+   and the layouts' restore corners read it. A direct child
+   resolves the Workbench's own container query, never a nested one's. */
+.kui-workbench:has(
+    > .kui-workbench__rail[data-presentation="overlay"]:not(
+        [data-collapsed="true"]
+      )
+  )
+  > :is(.kui-workbench__center, .kui-workbench__restore) {
+  --_kui-workbench-covered: hidden;
+}
+
+@container kui-workbench (max-width: 44rem) {
+  .kui-workbench:has(
+      > .kui-workbench__rail[data-responsive-overlay-at="narrow"][data-presentation="inline"]:not(
+          [data-collapsed="true"]
+        )
+    )
+    > :is(.kui-workbench__center, .kui-workbench__restore) {
+    --_kui-workbench-covered: hidden;
+  }
+}
+
+@container kui-workbench (max-width: 28rem) {
+  .kui-workbench:has(
+      > .kui-workbench__rail[data-responsive-overlay-at="compact"][data-presentation="inline"]:not(
+          [data-collapsed="true"]
+        )
+    )
+    > :is(.kui-workbench__center, .kui-workbench__restore) {
+    --_kui-workbench-covered: hidden;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .kui-workbench__panel-content {
     transition: none;

package/dist/tab-scaffold.d.ts

@@ -1,7 +1,7 @@
 import { SafeHtml } from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
-interface TabScaffoldTab<Id extends string = string> {
+interface TabScaffoldTabBase<Id extends string> {
     id: Id;
     label: string;
     /** Decorative icon shown above the label in the bottom bar. */
@@ -9,6 +9,40 @@ interface TabScaffoldTab<Id extends string = string> {
     /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */
     content: KerfUiContent;
 }
+/** A tab with an optional count or short-status badge. */
+interface TabScaffoldTabCountBadge {
+    /**
+     * Optional count or short status shown as a solid danger `Badge` at the
+     * top-trailing corner of the tab icon (the iOS tab-bar badge). Omitted, `''`,
+     * or non-finite numbers render no badge. The visual badge is `aria-hidden`;
+     * its meaning reaches assistive technology through `badgeLabel`.
+     *
+     * Pass `true` instead for the text-free dot (new content without a count).
+     */
+    badge?: string | number;
+    /**
+     * Localized phrase folded into the tab's accessible name as
+     * `"<label>, <badgeLabel>"` (for example `"3 unread"` → `"Inbox, 3 unread"`).
+     * Defaults to the badge text itself. Ignored when no badge renders.
+     */
+    badgeLabel?: string;
+}
+/** A tab with the text-free dot badge (new content without a count). */
+interface TabScaffoldTabDotBadge {
+    /**
+     * `true` shows a solid danger dot `Badge` at the top-trailing corner of the
+     * tab icon — the iOS tab-bar dot for new content without a count.
+     */
+    badge: true;
+    /**
+     * Required localized phrase folded into the tab's accessible name as
+     * `"<label>, <badgeLabel>"` (for example `"New activity"` →
+     * `"Feed, New activity"`). A dot has no text, so this is its only meaning.
+     */
+    badgeLabel: string;
+}
+/** One bottom-bar destination: its label, optional icon and badge, and content. */
+type TabScaffoldTab<Id extends string = string> = TabScaffoldTabBase<Id> & (TabScaffoldTabCountBadge | TabScaffoldTabDotBadge);
 interface TabScaffoldProps<Id extends string = string> {
     id: string;
     /** Accessible name for the tab bar. */
@@ -16,6 +50,16 @@ interface TabScaffoldProps<Id extends string = string> {
     tabs: readonly TabScaffoldTab<Id>[];
     /** The controlled active tab id (the app owns selection). */
     active: NoInfer<Id>;
+    /**
+     * The line over the tab bar, where it meets the active scene. `scroll`
+     * (default) shows it only while more of the scene's content lies below —
+     * never at the scroll end or when the content fits — once
+     * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above
+     * the scaffold; unwired, it does not show. `always` shows it without the
+     * wiring; `none` never, even when wired. The line is the bar's own 1px top
+     * border, so no state moves the bar or a tab.
+     */
+    chromeDividers?: 'scroll' | 'always' | 'none';
     className?: string;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
@@ -28,6 +72,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, slot, }: TabScaffoldProps<Id>): SafeHtml;
+declare function TabScaffold<Id extends string>({ id, label, tabs, active, chromeDividers, className, slot, }: TabScaffoldProps<Id>): SafeHtml;
 
 export { TabScaffold, type TabScaffoldProps, type TabScaffoldTab };

package/dist/tab-scaffold.js

@@ -1,11 +1,12 @@
+import { Badge } from './chunk-MP2GDBQZ.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
-// src/tab-scaffold.tsx
 function TabScaffold({
   id,
   label,
   tabs,
   active,
+  chromeDividers = "scroll",
   className = "",
   slot
 }) {
@@ -16,6 +17,7 @@ function TabScaffold({
       id,
       "data-component": "tab-scaffold",
       "data-tab-scaffold-id": id,
+      "data-chrome-dividers": chromeDividers === "always" || chromeDividers === "none" ? chromeDividers : void 0,
       slot,
       children: [
         /* @__PURE__ */ jsx("div", { class: "kui-tab-scaffold__scenes", children: tabs.map((tab) => /* @__PURE__ */ jsx(
@@ -28,25 +30,59 @@ function TabScaffold({
             children: tab.content
           }
         )) }),
-        /* @__PURE__ */ jsx("nav", { class: "kui-tab-scaffold__bar", role: "tablist", "aria-label": label, children: tabs.map((tab) => /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            class: "kui-tab-scaffold__tab",
-            role: "tab",
-            "data-tab-scaffold-tab": tab.id,
-            "aria-selected": String(tab.id === active),
-            tabindex: tab.id === active ? "0" : "-1",
-            children: [
-              tab.icon && /* @__PURE__ */ jsx("span", { class: "kui-tab-scaffold__tab-icon", "aria-hidden": "true", children: tab.icon }),
-              /* @__PURE__ */ jsx("span", { class: "kui-tab-scaffold__tab-label", children: tab.label })
-            ]
-          }
-        )) })
+        /* @__PURE__ */ jsx("nav", { class: "kui-tab-scaffold__bar", role: "tablist", "aria-label": label, children: tabs.map((tab) => {
+          const dot = tab.badge === true;
+          const badgeText = dot ? void 0 : normalizeBadge(tab.badge);
+          const hasBadge = dot || badgeText !== void 0;
+          const badge = hasBadge && /* @__PURE__ */ jsx(
+            "span",
+            {
+              class: "kui-tab-scaffold__tab-badge",
+              "data-badge-kind": dot ? "dot" : "text",
+              children: badgeText === void 0 ? /* @__PURE__ */ jsx(Badge, { tone: "danger", size: "dot", ariaHidden: true }) : /* @__PURE__ */ jsx(
+                Badge,
+                {
+                  tone: "danger",
+                  appearance: "solid",
+                  size: "compact",
+                  ariaHidden: true,
+                  children: badgeText
+                }
+              )
+            }
+          );
+          const badgeLabel = hasBadge ? tab.badgeLabel?.trim() || badgeText : void 0;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              class: "kui-tab-scaffold__tab",
+              role: "tab",
+              "data-tab-scaffold-tab": tab.id,
+              "aria-selected": String(tab.id === active),
+              tabindex: tab.id === active ? "0" : "-1",
+              "aria-label": badgeLabel === void 0 ? void 0 : `${tab.label}, ${badgeLabel}`,
+              "data-has-badge": hasBadge ? "true" : void 0,
+              children: [
+                tab.icon ? /* @__PURE__ */ jsxs("span", { class: "kui-tab-scaffold__tab-icon", "aria-hidden": "true", children: [
+                  tab.icon,
+                  badge
+                ] }) : badge,
+                /* @__PURE__ */ jsx("span", { class: "kui-tab-scaffold__tab-label", children: tab.label })
+              ]
+            }
+          );
+        }) })
       ]
     }
   );
 }
+function normalizeBadge(badge) {
+  if (typeof badge === "number")
+    return Number.isFinite(badge) ? String(badge) : void 0;
+  if (typeof badge === "string" && badge.trim()) return badge.trim();
+  return void 0;
+}
 
 export { TabScaffold };
 

package/dist/tab-scaffold.js.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["../src/tab-scaffold.tsx"],"names":[],"mappings":"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","file":"tab-scaffold.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Badge } from './badge.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\ninterface TabScaffoldTabBase<Id extends 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\n/** A tab with an optional count or short-status badge. */\ninterface TabScaffoldTabCountBadge {\n  /**\n   * Optional count or short status shown as a solid danger `Badge` at the\n   * top-trailing corner of the tab icon (the iOS tab-bar badge). Omitted, `''`,\n   * or non-finite numbers render no badge. The visual badge is `aria-hidden`;\n   * its meaning reaches assistive technology through `badgeLabel`.\n   *\n   * Pass `true` instead for the text-free dot (new content without a count).\n   */\n  badge?: string | number;\n  /**\n   * Localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"3 unread\"` → `\"Inbox, 3 unread\"`).\n   * Defaults to the badge text itself. Ignored when no badge renders.\n   */\n  badgeLabel?: string;\n}\n\n/** A tab with the text-free dot badge (new content without a count). */\ninterface TabScaffoldTabDotBadge {\n  /**\n   * `true` shows a solid danger dot `Badge` at the top-trailing corner of the\n   * tab icon — the iOS tab-bar dot for new content without a count.\n   */\n  badge: true;\n  /**\n   * Required localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"New activity\"` →\n   * `\"Feed, New activity\"`). A dot has no text, so this is its only meaning.\n   */\n  badgeLabel: string;\n}\n\n/** One bottom-bar destination: its label, optional icon and badge, and content. */\nexport type TabScaffoldTab<Id extends string = string> =\n  TabScaffoldTabBase<Id> & (TabScaffoldTabCountBadge | TabScaffoldTabDotBadge);\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  /**\n   * The line over the tab bar, where it meets the active scene. `scroll`\n   * (default) shows it only while more of the scene's content lies below —\n   * never at the scroll end or when the content fits — once\n   * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above\n   * the scaffold; unwired, it does not show. `always` shows it without the\n   * wiring; `none` never, even when wired. The line is the bar's own 1px top\n   * border, so no state moves the bar or a tab.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\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  chromeDividers = 'scroll',\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      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\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          const dot = tab.badge === true;\n          const badgeText = dot ? undefined : normalizeBadge(tab.badge);\n          const hasBadge = dot || badgeText !== undefined;\n          const badge = hasBadge && (\n            <span\n              class=\"kui-tab-scaffold__tab-badge\"\n              data-badge-kind={dot ? 'dot' : 'text'}\n            >\n              {badgeText === undefined ? (\n                <Badge tone=\"danger\" size=\"dot\" ariaHidden />\n              ) : (\n                <Badge\n                  tone=\"danger\"\n                  appearance=\"solid\"\n                  size=\"compact\"\n                  ariaHidden\n                >\n                  {badgeText}\n                </Badge>\n              )}\n            </span>\n          );\n          // A dot has no text fallback: without a usable badgeLabel (reachable\n          // only from untyped callers) the tab keeps its plain accessible name.\n          const badgeLabel = hasBadge\n            ? tab.badgeLabel?.trim() || badgeText\n            : undefined;\n          return (\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              aria-label={\n                badgeLabel === undefined\n                  ? undefined\n                  : `${tab.label}, ${badgeLabel}`\n              }\n              data-has-badge={hasBadge ? 'true' : undefined}\n            >\n              {tab.icon ? (\n                <span class=\"kui-tab-scaffold__tab-icon\" aria-hidden=\"true\">\n                  {tab.icon}\n                  {badge}\n                </span>\n              ) : (\n                badge\n              )}\n              <span class=\"kui-tab-scaffold__tab-label\">{tab.label}</span>\n            </button>\n          );\n        })}\n      </nav>\n    </section>\n  );\n}\n\nfunction normalizeBadge(\n  badge: string | number | undefined,\n): string | undefined {\n  if (typeof badge === 'number')\n    return Number.isFinite(badge) ? String(badge) : undefined;\n  if (typeof badge === 'string' && badge.trim()) return badge.trim();\n  return undefined;\n}\n"]}

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

@@ -1,4 +1,4 @@
-import * as kerfjs from 'kerfjs';
+import { SafeHtml } from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 interface TokenSearchToken {
@@ -41,6 +41,8 @@ interface TokenSearchFieldBaseProps {
     removeAction?: string;
     clearAction?: string;
     clearLabel?: string;
+    /** Icon for the clear button. Default: the Lucide `x` glyph token chips also use. */
+    clearIcon?: SafeHtml;
     className?: string;
     editorAttributes?: TokenSearchEditorAttributes;
     /** Native named-slot assignment when composed inside a web component. */
@@ -64,7 +66,7 @@ interface TokenSearchFieldValue {
     query: string;
     tokens: TokenSearchToken[];
 }
-declare function TokenSearchField({ id, label, query, tokens, revision, placeholder, tokenPlaceholder, disabled, autofocus, collapsible, expanded, expandAction, expandLabel, leading, trailing, presentation, editAction, removeAction, clearAction, clearLabel, className, editorAttributes, slot, }: TokenSearchFieldProps): kerfjs.SafeHtml;
+declare function TokenSearchField({ id, label, query, tokens, revision, placeholder, tokenPlaceholder, disabled, autofocus, collapsible, expanded, expandAction, expandLabel, leading, trailing, presentation, editAction, removeAction, clearAction, clearLabel, clearIcon, className, editorAttributes, slot, }: TokenSearchFieldProps): 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-RNRUVPJ3.js';
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-63ZWBGE3.js';
 
 
 //# sourceMappingURL=token-search-field.js.map

package/dist/toolbar-text.d.ts

@@ -23,6 +23,12 @@ interface ToolbarTextBaseProps {
      * instead. Default true.
      */
     ellipsis?: boolean;
+    /**
+     * Grow to fill the free space of the flex row it sits in (a Toolbar zone),
+     * truncating at the space left by its siblings instead of taking only its
+     * text's width. Default false.
+     */
+    fill?: boolean;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
@@ -35,6 +41,6 @@ type ToolbarTextWrappingProps = {
     maxLines?: never;
 };
 type ToolbarTextProps = ToolbarTextBaseProps & ToolbarTextWrappingProps;
-declare function ToolbarText({ text, size, className, id, headingLevel, placeholder, wrap, ellipsis, maxLines, slot, }: ToolbarTextProps): kerfjs.SafeHtml;
+declare function ToolbarText({ text, size, className, id, headingLevel, placeholder, wrap, ellipsis, maxLines, fill, slot, }: ToolbarTextProps): kerfjs.SafeHtml;
 
 export { type HeadingLevel, ToolbarText, type ToolbarTextProps, type ToolbarTextSize };

package/dist/toolbar-text.js

@@ -1,4 +1,4 @@
-export { ToolbarText } from './chunk-TZ5IHWB2.js';
+export { ToolbarText } from './chunk-XDKAYSVD.js';
 
 
 

package/dist/toolbar.d.ts

@@ -1,21 +1,30 @@
 import * as kerfjs from 'kerfjs';
-import { D as DividerSides } from './divider-sides-BzB6rphT.js';
 import { PaneSeparatorSide } from './pane.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as Sides } from './sides-BPSWde0A.js';
 
 interface ToolbarProps {
     leading?: KerfUiContent;
     center?: KerfUiContent;
     trailing?: KerfUiContent;
     label?: string;
-    /** Physical divider edges in canonical top/right/bottom/left order. Defaults to bottom. */
-    dividerSides?: DividerSides;
+    /**
+     * Physical divider edges in canonical top/right/bottom/left order, drawn
+     * always. Defaults to none: a toolbar pinned over or under scrolling content
+     * gets its divider from the scroll state instead — a `Pane` draws the line
+     * between its chrome and content while content is scrolled away beneath it,
+     * and `wireScrollDividers` `targets` can name a toolbar as chrome, which
+     * then draws its facing side the same way.
+     */
+    dividerSides?: Sides;
     /** Horizontal treatment of the center zone. Defaults to centered content. */
     centerAlign?: 'center' | 'stretch';
     /**
      * Component-owned responsive layout; applications choose the policy rather
      * than restyling toolbar internals. Under every policy the trailing zone
-     * wraps its groups instead of clipping an action.
+     * wraps its groups instead of clipping an action, and the center zone keeps
+     * its whole content width: when the zones do not fit one row, the leading
+     * title truncates with an ellipsis rather than the center overlapping it.
      * - `none` keeps one row; the leading identity truncates first.
      * - `stack` stacks the zones at `responsiveAt`, wrapping stacked control
      *   groups onto further rows.
@@ -40,6 +49,12 @@ interface ToolbarProps {
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
+/**
+ * A toolbar's configuration, apart from its content: the props a composite
+ * that renders a `Toolbar` for the app (a Workbench or CollapsiblePanel
+ * toolbar) forwards, so the app configures that toolbar instead of styling it.
+ */
+type ToolbarConfig = Pick<ToolbarProps, 'dividerSides' | 'centerAlign' | 'responsive' | 'responsiveAt' | 'safeAreaEdges'>;
 declare function Toolbar({ leading, center, trailing, label, dividerSides, centerAlign, responsive, responsiveAt, safeAreaEdges, className, slot, }: ToolbarProps): kerfjs.SafeHtml;
 
-export { DividerSides, Toolbar, type ToolbarProps };
+export { Sides, Toolbar, type ToolbarConfig, type ToolbarProps };

package/dist/toolbar.js

@@ -1,3 +1,3 @@
-export { Toolbar } from './chunk-MTM43SJO.js';
+export { Toolbar } from './chunk-6YFHCLHG.js';
 
 //# sourceMappingURL=toolbar.js.map

package/dist/{types-D6vzj-VT.d.ts → types-BuHELdXR.d.ts}

@@ -1,4 +1,6 @@
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { ToolbarConfig } from './toolbar.js';
+import { WorkbenchPanel } from './workbench.js';
 
 /** A reference link shown in the detail footer for the active entry. */
 interface CatalogResource {
@@ -43,6 +45,20 @@ interface CatalogBrand {
 type CatalogStageRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-catalog-stage'?: never;
 }>;
+/**
+ * The Catalog sidebar's configuration, forwarded to its Workbench left rail.
+ * Everything is optional; omitted fields keep the Catalog's defaults.
+ */
+interface CatalogSidebarConfig extends Pick<WorkbenchPanel, 'resizable' | 'separator' | 'collapseMotion' | 'presentation' | 'responsiveOverlayAt' | 'compactOverlay'> {
+    /**
+     * Sidebar width in px (default 288). With `resizable`, it is the current
+     * width: render the app's size signal here and hand the same signal to
+     * `wireCatalog`'s `sidebarSize`, which writes each committed resize to it.
+     */
+    size?: number;
+    /** The sidebar header toolbar's configuration (default: no divider; its pane draws one while scrolled). */
+    toolbar?: ToolbarConfig;
+}
 interface CatalogProps {
     /**
      * The catalog's `id` (default `kui-catalog`). Its Workbench derives the
@@ -67,15 +83,32 @@ interface CatalogProps {
     toggleThemeAction?: string;
     toggleSecondaryAction?: string;
     /**
-     * Whether the entry toolbar stays pinned above the preview (`fixed`,
-     * default) or scrolls away with it (`scroll`).
+     * Whether the entry toolbar and description stay pinned above the preview
+     * (`fixed`), scroll away with it (`scroll`), or stay pinned while the entry
+     * pane is tall enough and scroll with the preview when it is short (`auto`,
+     * default), so a short window or large text never squeezes the preview out.
+     */
+    headerPlacement?: 'fixed' | 'scroll' | 'auto';
+    /**
+     * The same for the status and resource footer (default `auto`).
+     */
+    footerPlacement?: 'fixed' | 'scroll' | 'auto';
+    /**
+     * The sidebar's size, resizing, and overlay configuration, forwarded to the
+     * Workbench left rail (default: 288px, not resizable, an overlay below the
+     * Workbench's `narrow` breakpoint, `inset` in a compact Workbench).
+     */
+    sidebar?: CatalogSidebarConfig;
+    /**
+     * The entry toolbar's configuration (default `responsive: 'wrap'`: the entry
+     * title stays whole and the actions wrap below it when narrow).
      */
-    headerPlacement?: 'fixed' | 'scroll';
+    mainToolbar?: ToolbarConfig;
     /**
-     * Whether the status and resource footer stays pinned below the preview
-     * (`fixed`, default) or scrolls with it (`scroll`).
+     * The resource footer toolbar's configuration (default no divider,
+     * `responsive: 'stack'` at `responsiveAt: 'narrow'`).
      */
-    footerPlacement?: 'fixed' | 'scroll';
+    footerToolbar?: ToolbarConfig;
     className?: string;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;