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

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

@@ -317,7 +317,12 @@
   padding-inline: 0;
 }
 
-.kui-toolbar-control-group[data-menu-inset="standard"] wa-dropdown::part(menu) {
+/* `standard` keeps each menu's own standard inset: a raw wa-dropdown takes the
+   8px surface inset, while a PopupMenu keeps the Select listbox inset it
+   shares (popup-menu.css). The explicit compact and list-zero choices apply to
+   every nested menu. */
+.kui-toolbar-control-group[data-menu-inset="standard"]
+  wa-dropdown:not([data-component="popup-menu"])::part(menu) {
   padding: var(--kui-wa-surface-inset, 0.5rem);
 }
 .kui-toolbar-control-group[data-menu-inset="compact"] wa-dropdown::part(menu) {
@@ -478,35 +483,49 @@
 
 /* With per-control rings, a composed Select paints its own ring even when it
    was told the group owns it: nothing else would show focus. It matches the
-   sibling controls' ring and offset. */
+   sibling controls' ring and offset. While its listbox is open the popup shows
+   focus instead, so the trigger ring stays off, as a PopupMenu trigger's does. */
 .kui-toolbar-control-group[data-focus-ring="control"]
-  > wa-select:focus-within::part(combobox) {
+  > wa-select:not([open]):focus-within::part(combobox) {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
-.kui-toolbar-control-group[data-focus-ring="outline"]:focus-within {
+.kui-toolbar-control-group[data-focus-ring="outline"]:focus-within:not(
+    :where(:has(wa-select[open], wa-dropdown[open]))
+  ) {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
-.kui-toolbar-control-group[data-focus-ring="halo"]:focus-within {
+.kui-toolbar-control-group[data-focus-ring="halo"]:focus-within:not(
+    :where(:has(wa-select[open], wa-dropdown[open]))
+  ) {
   border-color: var(--kui-color-text-link);
   box-shadow: 0 0 0 3px
     color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
 }
 
-/* Chromium and WebKit do not propagate :focus-within from a focused
-   light-DOM child (an open wa-select's active wa-option) through the host's
-   popup shadow tree, so the group ring vanished while its Select listbox was
-   open. A focused light-DOM descendant still owns the group ring. Kept as
-   separate rules so an engine without :has() keeps the :focus-within ring. */
-.kui-toolbar-control-group[data-focus-ring="outline"]:has(:focus) {
+/* A group-owned ring (outline or halo) is off while a Select listbox or a
+   PopupMenu inside the group is open: the open popup shows focus, as the
+   per-control Select and PopupMenu triggers already do, and the ring returns
+   when the popup closes with focus still in the group. The exclusion sits in
+   a forgiving :where(), so an engine without :has() keeps the ring.
+
+   Chromium and WebKit do not propagate :focus-within from a focused
+   light-DOM child through a host's popup shadow tree, so a focused light-DOM
+   descendant also owns the group ring. Kept as separate rules so an engine
+   without :has() keeps the :focus-within ring. */
+.kui-toolbar-control-group[data-focus-ring="outline"]:has(:focus):not(
+    :where(:has(wa-select[open], wa-dropdown[open]))
+  ) {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
-.kui-toolbar-control-group[data-focus-ring="halo"]:has(:focus) {
+.kui-toolbar-control-group[data-focus-ring="halo"]:has(:focus):not(
+    :where(:has(wa-select[open], wa-dropdown[open]))
+  ) {
   border-color: var(--kui-color-text-link);
   box-shadow: 0 0 0 3px
     color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);

package/dist/styles/toolbar.css

@@ -5,7 +5,11 @@
   box-sizing: border-box;
   color: var(--kui-color-text);
   background: transparent;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  /* The center track's minimum is `auto`, not 0, so it resolves to the center
+     zone's own min-width (its content width, below): when the zones do not all
+     fit, the auto leading track is what shrinks and its title truncates, and
+     the center group never overflows its track onto the leading identity. */
+  grid-template-columns: auto 1fr auto;
   align-items: start;
   gap: var(--kui-toolbar-gap, 0.5rem);
   container: kui-toolbar / inline-size;
@@ -103,28 +107,28 @@
 .kui-toolbar[divider-sides*="t"] {
   --_kui-toolbar-divider-top: var(
     --kui-toolbar-divider-color,
-    var(--kui-color-border)
+    var(--kui-color-neutral-border-normal)
   );
 }
 
 .kui-toolbar[divider-sides*="r"] {
   --_kui-toolbar-divider-right: var(
     --kui-toolbar-divider-color,
-    var(--kui-color-border)
+    var(--kui-color-neutral-border-normal)
   );
 }
 
 .kui-toolbar[divider-sides*="b"] {
   --_kui-toolbar-divider-bottom: var(
     --kui-toolbar-divider-color,
-    var(--kui-color-border)
+    var(--kui-color-neutral-border-normal)
   );
 }
 
 .kui-toolbar[divider-sides*="l"] {
   --_kui-toolbar-divider-left: var(
     --kui-toolbar-divider-color,
-    var(--kui-color-border)
+    var(--kui-color-neutral-border-normal)
   );
 }
 
@@ -190,6 +194,11 @@
 }
 
 .kui-toolbar__center {
+  /* The center content never compresses below its own width (a group cannot
+     shrink or clip its controls). The track above takes this as its minimum, so
+     the leading identity gives way first, the way a platform toolbar truncates
+     its title before it overlaps the centered controls. */
+  min-width: min-content;
   justify-content: center;
   grid-column: 2;
 }

package/dist/styles/value-table.css

@@ -1,6 +1,6 @@
 .kui-value-table {
   --kui-value-table-background: var(--kui-color-surface-lowered);
-  --kui-value-table-border: var(--kui-color-border);
+  --kui-value-table-border: var(--kui-color-neutral-border-normal);
   --_kui-value-table-icon-size: var(--kui-value-table-icon-size, 1.5rem);
   display: grid;
   margin-block: 0;
@@ -22,7 +22,14 @@
   padding-block: 0.5rem;
   padding-inline: var(--_kui-value-table-inline-padding);
   box-sizing: border-box;
-  grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
+  /* Two content-sized tracks share the free space equally, and each stops
+     growing once its content fits. A short value keeps its whole width and a
+     long label takes the rest (ending a word that still does not fit in an
+     ellipsis); a short label keeps its width beside a long, wrapping value;
+     when both are long they split the row. A `1fr` value track would get
+     nothing until the label reached its full width, starving the value to 0px
+     beside a long single-word label. */
+  grid-template-columns: minmax(0, auto) minmax(0, auto);
   align-items: center;
   gap: var(--kui-layout-item-gap, 0.5rem);
 }
@@ -42,7 +49,12 @@
 }
 .kui-value-table__row dt {
   display: flex;
+  /* The label hugs its content (up to its column) rather than stretching, so
+     its box does not change with the value's width — a placeholder row keeps
+     the live row's label geometry beside its skeleton value. */
+  max-width: 100%;
   min-width: 0;
+  justify-self: start;
   color: var(--kui-color-text-quiet);
   align-items: center;
   gap: var(--kui-layout-item-gap, 0.5rem);
@@ -60,6 +72,11 @@
 }
 .kui-value-table__label {
   min-width: 0;
+  overflow: hidden;
+  /* A multi-word label wraps at spaces; a single word wider than the label
+     column (a long component or file name) ends in an ellipsis instead of
+     running under the value. */
+  text-overflow: ellipsis;
 }
 .kui-value-table__row dd {
   display: flex;

package/dist/styles/webawesome.css

@@ -499,7 +499,9 @@
     padding-inline: var(--kui-wa-control-inset) !important;
   }
 
-  wa-dropdown-item {
+  /* A PopupMenu item owns the Select option geometry instead (popup-menu.css),
+     so a command menu and a value list draw identical rows. */
+  wa-dropdown-item:not([data-component="popup-menu"] > *) {
     padding-inline: var(--kui-wa-control-inset) !important;
   }
 

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;
@@ -213,7 +215,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 +389,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 +598,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 +649,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 +684,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 +735,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"] {
@@ -721,6 +781,8 @@
      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-floating-covered, inherit);
   z-index: var(
     --kui-workbench-restore-z,
     calc(var(--kui-workbench-overlay-z, 41) - 2)
@@ -788,6 +850,47 @@
   );
 }
 
+/* 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 flag is set on the rail's siblings only (never on the
+   open rail), so the overlay's own floating controls stay, and it is read by
+   FloatingToolbar and the layouts' restore corners. 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-floating-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-floating-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-floating-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. */

package/dist/tab-scaffold.js

@@ -1,6 +1,6 @@
+import { Badge } from './chunk-MP2GDBQZ.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
-// src/tab-scaffold.tsx
 function TabScaffold({
   id,
   label,
@@ -28,25 +28,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  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          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.js

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