@kerfjs/ui 5.0.0-beta.68 → 5.0.0-beta.69

package/dist/styles/app-tab.css

@@ -43,13 +43,30 @@
   position: absolute;
   z-index: -1;
   inset-block: 0;
-  inset-inline-start: calc(-1 * var(--kui-tab-bar-strip-padding, 1px));
+  inset-inline-start: calc(
+    -1 *
+      (
+        var(--kui-tab-bar-strip-padding, 1px) +
+          var(--kui-tab-bar-strip-border-width, 1px)
+      )
+  );
   inset-inline-end: 0;
   background: var(
     --kui-app-tab-pinned-background,
     var(--_kui-app-tab-pinned-default-background, var(--kui-color-surface))
   );
 }
+/* The leading overflow line belongs after the pinned tab, where its scrolling
+   peers disappear. Reuse the opaque backing so drag indicators can still use
+   ::after. */
+.kui-tab-bar__tabs:dir(ltr)[data-scroll-overflow*="l"]
+  > .kui-app-tab[data-pinned="true"]::before,
+.kui-tab-bar__tabs:dir(rtl)[data-scroll-overflow*="r"]
+  > .kui-app-tab[data-pinned="true"]::before {
+  inset-inline-end: -1px;
+  border-inline-end: 1px solid
+    var(--kui-tab-bar-divider-color, var(--kui-color-neutral-border-normal));
+}
 .kui-tab-bar[data-presentation="segmented"] .kui-app-tab[data-pinned="true"],
 .kui-tab-bar[data-presentation="inspector"] .kui-app-tab[data-pinned="true"] {
   --_kui-app-tab-pinned-default-background: var(

package/dist/styles/loading-spinner.css

@@ -5,6 +5,10 @@
   overflow: visible;
   fill: currentColor;
 }
+.kui-loading-spinner[data-size] {
+  width: var(--_kui-loading-spinner-size);
+  height: var(--_kui-loading-spinner-size);
+}
 .kui-loading-spinner path {
   transform-origin: 12px 12px;
   animation: kui-loading-spinner-rotate 0.85s linear infinite;

package/dist/styles/select.css

@@ -40,6 +40,55 @@
   width: max-content;
   max-width: 100%;
 }
+.kui-select[data-presentation="title"] {
+  width: max-content;
+  max-width: 100%;
+}
+.kui-select[data-presentation="title"]::part(combobox) {
+  width: max-content;
+  min-height: 2.25rem;
+  padding-inline: 0;
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+  font-size: var(--kui-font-l, 1.25rem);
+  font-weight: 700;
+}
+.kui-select[data-presentation="title"]::part(display-input) {
+  field-sizing: content;
+  flex: 0 0 auto;
+}
+.kui-select[data-presentation="title"]::part(expand-icon) {
+  margin-inline-start: 0;
+}
+/* A Toolbar has an 8px inset; ListItem text starts at 17px after its own
+   margin, border, and padding. The group contributes 3px, so the title
+   Select advances 6px to share the list's text edge. */
+.kui-toolbar-control-group > .kui-select[data-presentation="title"] {
+  margin-inline-start: 0.375rem;
+}
+.kui-select[data-presentation="inline"] {
+  width: max-content;
+  max-width: 100%;
+}
+.kui-select[data-presentation="inline"]::part(combobox) {
+  width: max-content;
+  min-height: 0;
+  padding: 0;
+  border-width: 0;
+  background: transparent;
+}
+.kui-select--custom-selected[data-presentation="inline"]::part(start) {
+  flex: 0 0 auto;
+}
+.kui-select--custom-selected[data-presentation="inline"]
+  .kui-select__custom-selected {
+  margin-inline-end: 0 !important;
+}
+.kui-select--custom-selected[data-presentation="inline"]
+  .kui-select__custom-selected-content {
+  display: flex;
+}
 .kui-select[data-focus-ring-owner="group"]:focus-within::part(combobox) {
   outline: none;
   box-shadow: none;
@@ -101,6 +150,12 @@
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
+.kui-select[data-focus-ring-inset="true"][data-focus-ring-owner="select"]:focus-within:not(
+    [open]
+  )::part(combobox) {
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+}
 /* The popup-menu wa-button draws the same chevron glyph at 0.875em inside a
    20px box; match its box, spacing, and glyph size rather than the smaller
    form-field disclosure scale. */
@@ -332,6 +387,30 @@
   width: max-content;
   max-width: 100%;
 }
+.kui-select--placeholder[data-presentation="title"] {
+  width: max-content;
+  max-width: 100%;
+}
+.kui-select--placeholder[data-presentation="title"]
+  .kui-select__placeholder-box {
+  min-height: 2.25rem;
+  padding-inline: 0;
+  border-color: transparent;
+  background: transparent;
+  font-size: var(--kui-font-l, 1.25rem);
+  font-weight: 700;
+}
+.kui-select--placeholder[data-presentation="inline"] {
+  width: max-content;
+  max-width: 100%;
+}
+.kui-select--placeholder[data-presentation="inline"]
+  .kui-select__placeholder-box {
+  min-height: 0;
+  padding: 0;
+  border-width: 0;
+  background: transparent;
+}
 .kui-select__placeholder-hint {
   /* The live wa-select hint part: small body text at Web Awesome's form-control
      hint metrics (1.6 line height, 7px below the box), inset like the value. */

package/dist/styles/tab-bar.css

@@ -136,12 +136,12 @@
   margin-inline-start: calc(-1px - var(--kui-toolbar-gap, 0.5rem));
 }
 
-.kui-tab-bar[data-presentation="rail"]:dir(ltr):has(
-    > .kui-tab-bar__tabs[data-scroll-overflow*="l"]
-  )::before,
-.kui-tab-bar[data-presentation="rail"]:dir(rtl):has(
-    > .kui-tab-bar__tabs[data-scroll-overflow*="r"]
-  )::before,
+.kui-tab-bar[data-presentation="rail"]:dir(ltr):not(
+    :has(> .kui-tab-bar__tabs > .kui-app-tab[data-pinned="true"])
+  ):has(> .kui-tab-bar__tabs[data-scroll-overflow*="l"])::before,
+.kui-tab-bar[data-presentation="rail"]:dir(rtl):not(
+    :has(> .kui-tab-bar__tabs > .kui-app-tab[data-pinned="true"])
+  ):has(> .kui-tab-bar__tabs[data-scroll-overflow*="r"])::before,
 .kui-tab-bar[data-presentation="rail"]:dir(ltr):has(
     > .kui-tab-bar__tabs[data-scroll-overflow*="r"]
   )::after,
@@ -155,7 +155,9 @@
 }
 
 .kui-tab-bar:not([data-presentation="rail"])
-  > .kui-tab-bar__tabs[data-scroll-overflow*="l"] {
+  > .kui-tab-bar__tabs[data-scroll-overflow*="l"]:not(
+    :dir(ltr):has(> .kui-app-tab[data-pinned="true"])
+  ) {
   border-left-color: var(
     --kui-tab-bar-divider-color,
     var(--kui-color-neutral-border-normal)
@@ -163,7 +165,9 @@
 }
 
 .kui-tab-bar:not([data-presentation="rail"])
-  > .kui-tab-bar__tabs[data-scroll-overflow*="r"] {
+  > .kui-tab-bar__tabs[data-scroll-overflow*="r"]:not(
+    :dir(rtl):has(> .kui-app-tab[data-pinned="true"])
+  ) {
   border-right-color: var(
     --kui-tab-bar-divider-color,
     var(--kui-color-neutral-border-normal)

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

@@ -28,10 +28,6 @@
 }
 
 .kui-token-search {
-  --kui-token-search-background: var(--kui-color-surface);
-  --kui-token-search-border: var(--kui-color-neutral-border-normal);
-  --kui-token-search-token-background: var(--kui-color-brand-fill-normal);
-  --kui-token-search-token-foreground: var(--kui-color-brand-on-quiet);
   --kui-token-search-line-size: 2.125rem;
 
   display: grid;
@@ -41,10 +37,11 @@
   min-height: 2.75rem;
   padding: 0.25rem 0.5rem;
   box-sizing: border-box;
-  border: 1px solid var(--kui-token-search-border);
+  border: 1px solid
+    var(--kui-token-search-border, var(--kui-color-neutral-border-normal));
   border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
   color: var(--kui-color-text);
-  background: var(--kui-token-search-background);
+  background: var(--kui-token-search-background, var(--kui-color-surface));
   grid-template-columns: auto minmax(0, 1fr) auto auto;
   align-items: start;
   gap: var(--kui-layout-item-gap, 0.5rem);
@@ -119,8 +116,14 @@
   margin-inline: 0.125rem;
   padding-inline-start: 0.45rem;
   border-radius: var(--kui-radius-pill);
-  color: var(--kui-token-search-token-foreground);
-  background: var(--kui-token-search-token-background);
+  color: var(
+    --kui-token-search-token-foreground,
+    var(--kui-color-brand-on-quiet)
+  );
+  background: var(
+    --kui-token-search-token-background,
+    var(--kui-color-brand-fill-normal)
+  );
   font-size: var(--kui-font-xs);
   line-height: 1;
   white-space: nowrap;
@@ -255,7 +258,13 @@
 }
 
 .kui-token-search[data-collapsible="true"] {
-  width: min(var(--kui-token-search-expanded-width, 30rem), 100%);
+  width: min(
+    var(
+      --_kui-toolbar-group-grow-search-width,
+      var(--kui-token-search-expanded-width, 30rem)
+    ),
+    100%
+  );
   max-width: 100%;
   overflow: hidden;
   /* Size the inline axis through `width` only. A `flex-basis` of the expanded
@@ -343,7 +352,7 @@
 
 .kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"]:focus-within {
   border-color: var(--kui-color-focus);
-  background: var(--kui-token-search-background);
+  background: var(--kui-token-search-background, var(--kui-color-surface));
 }
 
 .kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"][data-expanded="false"] {

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

@@ -102,6 +102,24 @@
   }
 }
 
+@container kui-toolbar (max-width: 14rem) {
+  .kui-toolbar-control-group[data-visibility="hide-collapsed-tiny"][data-expanded="false"] {
+    display: none;
+  }
+}
+
+/* An expanded trailing control owns the compact row when sibling groups opt
+   into yielding. Scoping to the trailing zone keeps independent center and
+   leading controls visible, and the siblings return when it closes. */
+@container kui-toolbar (max-width: 30rem) {
+  .kui-toolbar__trailing:has(> .kui-toolbar-control-group[data-expanded="true"])
+    > .kui-toolbar-control-group[data-visibility="yield-to-expanded-sibling"]:not(
+      [data-expanded="true"]
+    ) {
+    display: none;
+  }
+}
+
 /* `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. */
@@ -143,6 +161,16 @@
   max-width: 100%;
   overflow-x: auto;
 }
+.kui-toolbar-control-group[data-overflow="wrap"] {
+  max-width: 100%;
+  height: auto;
+  flex-wrap: wrap;
+}
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-control-group[data-overflow="wrap"] {
+  margin-block-start: 0;
+  align-self: center;
+}
 .kui-toolbar-control-group[data-content="search"] {
   width: min(var(--kui-token-search-expanded-width, 30rem), 100%);
   max-width: 100%;
@@ -179,6 +207,55 @@
   width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   flex: 0 0 auto;
 }
+
+.kui-toolbar-control-group[data-sizing="grow"][data-expanded="true"] {
+  --_kui-toolbar-group-grow-search-width: 100%;
+  width: auto;
+  min-width: min(100%, var(--kui-toolbar-group-grow-basis, 19rem));
+  flex: 1 1 var(--kui-toolbar-group-grow-basis, 19rem);
+}
+.kui-toolbar-control-group[data-sizing="fill"] {
+  width: 100%;
+  min-width: 0;
+  flex: 1 1 100%;
+}
+
+/* Auto margin consumes the free space before this group on its flex line;
+   when the expanded fill search takes a whole line, the margin resolves to 0. */
+.kui-toolbar[data-responsive="stack"]
+  > :is(.kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-control-group[data-placement="end"] {
+  margin-inline-start: auto;
+}
+
+/* A fill search crosses from the preceding control line to its own line.
+   Move its visual down one control band as it opens without changing layout. */
+.kui-toolbar[data-responsive="stack"]
+  > :is(.kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-control-group[data-content="search"][data-sizing="fill"][data-expanded="true"] {
+  animation: kui-toolbar-fill-search-enter 0.25s ease-out both;
+}
+
+@keyframes kui-toolbar-fill-search-enter {
+  from {
+    transform: translateY(
+      calc(
+        -1 * (var(--_kui-toolbar-band) + var(--kui-toolbar-gap, 0.5rem))
+      )
+    );
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@container kui-toolbar (max-width: 30rem) {
+  .kui-toolbar-control-group[data-sizing="grow"][data-expanded="true"] {
+    width: 100%;
+    min-width: 0;
+    flex: 1 1 100%;
+  }
+}
 .kui-toolbar-control-group[data-content="text"]
   > :is(button, wa-button, .kui-toolbar-action-link),
 .kui-toolbar-control-group[data-content="mixed"]
@@ -284,7 +361,12 @@
   place-items: center;
 }
 
-.kui-toolbar-control-group > button:hover {
+.kui-toolbar-control-group > button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.kui-toolbar-control-group > button:not(:disabled):hover {
   border-color: var(--kui-toolbar-control-border);
   background: var(--kui-toolbar-control-hover-background);
 }
@@ -495,7 +577,7 @@
 
 .kui-toolbar-control-group[data-single="true"]:has(
     > :is(
-      button,
+      button:not(:disabled),
       wa-button,
       .kui-popup-menu,
       wa-dropdown:not(.kui-popup-menu),
@@ -519,7 +601,12 @@
    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, .kui-select, .kui-toolbar-action-link):only-child
+    > :is(
+        button:not(:disabled),
+        wa-button,
+        .kui-select,
+        .kui-toolbar-action-link
+      ):only-child
   ):hover {
   background-color: var(--kui-toolbar-control-hover-background);
 }
@@ -653,6 +740,12 @@
   .kui-toolbar-control-group[data-content="search"] {
     transition-duration: 0s;
   }
+
+  .kui-toolbar[data-responsive="stack"]
+    > :is(.kui-toolbar__center, .kui-toolbar__trailing)
+    > .kui-toolbar-control-group[data-content="search"][data-sizing="fill"][data-expanded="true"] {
+    animation: none;
+  }
 }
 
 /* Avatar controls paint the image as chrome rather than inserting a replaced

package/dist/tab-bar.d.ts

@@ -12,10 +12,12 @@ interface TabBarProps {
     label: string;
     children: KerfUiContent;
     leading?: KerfUiContent;
+    /** Tab-local action: a ToolbarControlGroup or a standalone Web Awesome button. */
     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.
+     * Accepts a ToolbarControlGroup or a standalone Web Awesome button.
      */
     end?: KerfUiContent;
     className?: string;

package/dist/tab-bar.js

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

package/dist/token-search-field.js

@@ -1,4 +1,4 @@
-export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-5SYE4CCT.js';
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-PQZPVBP4.js';
 
 
 

package/dist/toolbar-control-group.d.ts

@@ -11,9 +11,11 @@ type ToolbarControlGroupContent = 'icon' | 'text' | 'mixed' | 'avatar' | 'search
 type ToolbarControlGroupFocusRing = 'control' | 'outline' | 'halo';
 type ToolbarControlGroupSelectedChrome = 'raised' | 'filled' | 'outline';
 type ToolbarControlGroupSelectedTone = 'brand' | 'neutral' | 'pop';
-type ToolbarControlGroupOverflow = 'visible' | 'scroll';
+type ToolbarControlGroupOverflow = 'visible' | 'scroll' | 'wrap';
 type ToolbarControlGroupMenuInset = 'standard' | 'compact' | 'list-zero';
-type ToolbarControlGroupVisibility = 'always' | 'compact-only';
+type ToolbarControlGroupVisibility = 'always' | 'compact-only' | 'hide-collapsed-tiny' | 'yield-to-expanded-sibling';
+type ToolbarControlGroupSizing = 'content' | 'grow' | 'fill';
+type ToolbarControlGroupPlacement = 'start' | 'end';
 interface ToolbarActionLinkProps {
     href: string;
     label: string;
@@ -52,10 +54,16 @@ interface ToolbarControlGroupProps {
     nestedDropdown?: boolean;
     /** Configure the nested dropdown menu inset without consumer ::part() CSS. */
     menuInset?: ToolbarControlGroupMenuInset;
-    /** Keep an overlong row of actions inside the available width with horizontal scrolling. */
+    /** Keep an overlong row inside the available width by scrolling or wrapping. */
     overflow?: ToolbarControlGroupOverflow;
     /** Responsive visibility owned by the enclosing Toolbar container. */
     visibility?: ToolbarControlGroupVisibility;
+    /** Intrinsic (default), grow from a basis, or occupy a full wrapping row. */
+    sizing?: ToolbarControlGroupSizing;
+    /** Place this group at the end of its flex row in a wrapping Toolbar zone. */
+    placement?: ToolbarControlGroupPlacement;
+    /** CSS length used as the minimum width and flex basis for `sizing="grow"`; defaults to 19rem. */
+    growBasis?: string;
     /** Move this group into the work-area toolbar when its panel collapses. */
     relocateOnCollapse?: boolean;
     /** Add contrast behind photo-backed avatar content. */
@@ -72,6 +80,6 @@ interface ToolbarControlGroupProps {
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-declare function ToolbarControlGroup({ children, label, className, expanded, single, appearance, tone, buttonAppearance, shape, size, density, content, focusRing, selectedChrome, selectedTone, nestedDropdown, menuInset, overflow, visibility, relocateOnCollapse, scrim, busy, busyLabel, avatarImage, slot, }: ToolbarControlGroupProps): kerfjs.SafeHtml;
+declare function ToolbarControlGroup({ children, label, className, expanded, single, appearance, tone, buttonAppearance, shape, size, density, content, focusRing, selectedChrome, selectedTone, nestedDropdown, menuInset, overflow, visibility, sizing, placement, growBasis, relocateOnCollapse, scrim, busy, busyLabel, avatarImage, slot, }: ToolbarControlGroupProps): kerfjs.SafeHtml;
 
-export { ToolbarActionLink, type ToolbarActionLinkProps, ToolbarControlGroup, type ToolbarControlGroupAppearance, type ToolbarControlGroupButtonAppearance, type ToolbarControlGroupContent, type ToolbarControlGroupDensity, type ToolbarControlGroupFocusRing, type ToolbarControlGroupMenuInset, type ToolbarControlGroupOverflow, type ToolbarControlGroupProps, type ToolbarControlGroupSelectedChrome, type ToolbarControlGroupSelectedTone, type ToolbarControlGroupShape, type ToolbarControlGroupSize, type ToolbarControlGroupTone, type ToolbarControlGroupVisibility };
+export { ToolbarActionLink, type ToolbarActionLinkProps, ToolbarControlGroup, type ToolbarControlGroupAppearance, type ToolbarControlGroupButtonAppearance, type ToolbarControlGroupContent, type ToolbarControlGroupDensity, type ToolbarControlGroupFocusRing, type ToolbarControlGroupMenuInset, type ToolbarControlGroupOverflow, type ToolbarControlGroupPlacement, type ToolbarControlGroupProps, type ToolbarControlGroupSelectedChrome, type ToolbarControlGroupSelectedTone, type ToolbarControlGroupShape, type ToolbarControlGroupSize, type ToolbarControlGroupSizing, type ToolbarControlGroupTone, type ToolbarControlGroupVisibility };

package/dist/toolbar-control-group.js

@@ -1,4 +1,5 @@
-export { ToolbarActionLink, ToolbarControlGroup } from './chunk-NXWE5S57.js';
+export { ToolbarActionLink, ToolbarControlGroup } from './chunk-QJ5VFCW3.js';
+
 
 
 //# sourceMappingURL=toolbar-control-group.js.map

package/dist/wire-catalog.js

@@ -1,6 +1,6 @@
 import { wireWorkbench } from './chunk-TJK44RQC.js';
 
-import { wireScrollDividers } from './chunk-JCV4GXWB.js';
+import { wireScrollDividers } from './chunk-6DFDTWGG.js';
 
 
 import { delegate } from 'kerfjs';

package/dist/wire-scroll-dividers.d.ts

@@ -33,6 +33,7 @@ interface WireScrollDividersOptions {
      */
     targets?: readonly ScrollDividerTarget[];
 }
+type Root = HTMLElement | Document;
 /**
  * Wire scroll dividers below `root`: a divider between pinned chrome and the
  * content that scrolls beside it shows only while content is scrolled away
@@ -60,10 +61,12 @@ interface WireScrollDividersOptions {
  *
  * Structure is re-read after every DOM change below root (a re-render that
  * drops the attributes gets them back before paint), scroll is tracked with
- * one capturing listener, and size changes of each scroller and its children
- * with a `ResizeObserver`. Returns a disposer that removes every attribute it
- * wrote. See `docs/23-app-layouts.md` §3.7.
+ * one capturing listener per registered root, and size changes of each
+ * scroller and its children with a `ResizeObserver`. Overlapping registrations
+ * share one attribute writer; each disposer removes its registration, and the
+ * final disposer removes the wiring-owned attributes. See
+ * `docs/23-app-layouts.md` §3.7.
  */
-declare function wireScrollDividers(root: HTMLElement | Document, { targets }?: WireScrollDividersOptions): () => void;
+declare function wireScrollDividers(root: Root, { targets }?: WireScrollDividersOptions): () => void;
 
 export { type ScrollDividerTarget, type WireScrollDividersOptions, wireScrollDividers };

package/dist/wire-scroll-dividers.js

@@ -1,3 +1,3 @@
-export { wireScrollDividers } from './chunk-JCV4GXWB.js';
+export { wireScrollDividers } from './chunk-6DFDTWGG.js';
 
 //# sourceMappingURL=wire-scroll-dividers.js.map

package/dist/wire-token-search-fields.js

@@ -1,4 +1,4 @@
-export { wireTokenSearchFields } from './chunk-P4UXSYIJ.js';
+export { wireTokenSearchFields } from './chunk-2ZOLX3IE.js';
 
 
 

package/dist/workbench.js

@@ -1,4 +1,4 @@
-export { Workbench } from './chunk-TGM424PI.js';
+export { Workbench } from './chunk-H7IODXGY.js';
 
 
 

package/docs/accessibility.md

@@ -101,6 +101,13 @@ Navigation selects can use intrinsic `presentation="navigation"` plus
 `labelMaxWidth` for component-owned ellipsis. These props own the control's
 appearance; its parent continues to own outer placement.
 
+Use `presentation="inline"` with a single-value `renderSelected` when the
+selected content, such as a `Badge`, already provides the trigger chrome. The
+closed combobox has no minimum height, inline padding, or border width, so the
+rendered content defines its box. The Select still owns the focus ring,
+accessible combobox name, and listbox interaction; keep `label` or `ariaLabel`
+even when the selected content shows its own short text.
+
 Use `hint` for persistent supporting text below the control; use
 `placeholderText` only for the empty value shown inside the closed control.
 Kerf passes hint text through Web Awesome's form-control contract, which renders
@@ -346,6 +353,9 @@ workspace action in `end`; TabBar keeps the adjacent action immediately after
 the shrinkable/scrolling tabs and pins `end` at the far edge. Leading,
 trailing, and end actions remain visible and do not shrink. The component owns
 that geometry; applications must not override its anatomy to create the split.
+`trailing` and `end` each accept one `ToolbarControlGroup` for grouped controls
+or one standalone `wa-button` when a primary action needs its own Web Awesome
+chrome. Do not add a wrapper or flex margins to position the action.
 `AppTab` provides compact 32px, segmented, truncating-label, and icon-only
 presentations. Icon-only tabs keep the required `name` as the tab button's
 accessible name while visually hiding the duplicate label. The default name

package/docs/catalog.md

@@ -441,6 +441,9 @@ revealCatalogEntry(app, initial, { block: "center" });
   the preview (`scroll`), or stay pinned while the entry pane is tall enough and
   scroll with the preview when it is short (`auto`, the default) — so a short
   window or large text never squeezes the preview out.
+  The resource footer uses `ToolbarControlGroup overflow="wrap"`: whole links
+  move to another row when they do not fit, keeping Guidance and source labels
+  readable without horizontal scrolling.
 - **`sidebar`** configures the sidebar rail — it forwards to the Workbench's left
   rail: `size` (default 288px), `resizable` (`true` or `{ min, max }`),
   `separator`, `collapseMotion`, `presentation`, `responsiveOverlayAt` (default