@kerfjs/ui 5.0.0-beta.108 → 5.0.0-beta.109

package/ai/component-catalog.json

@@ -5278,6 +5278,7 @@
       "uses": [
         "tabs",
         "toolbar-control-group",
+        "button",
         "wa-button"
       ],
       "purpose": "Controlled tab strips whose tabs shrink and scroll while fixed leading, trailing, and far-edge end actions remain visible.",
@@ -5323,7 +5324,7 @@
         "intrinsic or fill allocation",
         "separate or adjacent trailing action",
         "far-edge end action",
-        "standalone Web Awesome action in trailing or end",
+        "standalone Kerf Button or Web Awesome action in trailing or end",
         "overflow dividers on each side with tabs scrolled out of view (wired by wireScrollDividers)"
       ],
       "accessibility": [

package/ai/component-composition-rules.json

@@ -178,14 +178,14 @@
       {
         "id": "trailing",
         "jsx": { "prop": "trailing" },
-        "accepts": ["toolbar-control-group", "wa-button"],
+        "accepts": ["toolbar-control-group", "button", "wa-button"],
         "cardinality": { "min": 0, "max": 1 },
         "exclusiveWith": []
       },
       {
         "id": "end",
         "jsx": { "prop": "end" },
-        "accepts": ["toolbar-control-group", "wa-button"],
+        "accepts": ["toolbar-control-group", "button", "wa-button"],
         "cardinality": { "min": 0, "max": 1 },
         "exclusiveWith": []
       }

package/ai/component-composition.json

@@ -4379,14 +4379,14 @@
         {
           "id": "trailing",
           "jsx": { "prop": "trailing" },
-          "accepts": ["toolbar-control-group", "wa-button"],
+          "accepts": ["toolbar-control-group", "button", "wa-button"],
           "cardinality": { "min": 0, "max": 1 },
           "exclusiveWith": []
         },
         {
           "id": "end",
           "jsx": { "prop": "end" },
-          "accepts": ["toolbar-control-group", "wa-button"],
+          "accepts": ["toolbar-control-group", "button", "wa-button"],
           "cardinality": { "min": 0, "max": 1 },
           "exclusiveWith": []
         }

package/ai/components/tab-bar.md

@@ -45,7 +45,7 @@ Exact prop names and types: [`@kerfjs/ui/tab-bar`](../public-api-signatures-v1.m
 - intrinsic or fill allocation
 - separate or adjacent trailing action
 - far-edge end action
-- standalone Web Awesome action in trailing or end
+- standalone Kerf Button or Web Awesome action in trailing or end
 - overflow dividers on each side with tabs scrolled out of view (wired by wireScrollDividers)
 
 ## Composition
@@ -53,14 +53,14 @@ Exact prop names and types: [`@kerfjs/ui/tab-bar`](../public-api-signatures-v1.m
 - Parents: any.
 - Contexts: `tabpanel-navigation`.
 - Children: only `tab-bar-item` (required: `tab-bar-item`).
-- Built from: [TabBarItem](./tabs.md), [ToolbarControlGroup](./toolbar-control-group.md), [Button](./wa-button.md).
+- Built from: [TabBarItem](./tabs.md), [ToolbarControlGroup](./toolbar-control-group.md), [Button](./button.md), [Button](./wa-button.md).
 
 Zones (a zone is bound to JSX only through its listed prop; never assume the zone id is a prop):
 
 - `tabs` — JSX prop `children`; accepts [TabBarItem](./tabs.md); at least 1.
 - `leading` — JSX prop `leading`; accepts [ToolbarControlGroup](./toolbar-control-group.md); 0–1.
-- `trailing` — JSX prop `trailing`; accepts [ToolbarControlGroup](./toolbar-control-group.md), [Button](./wa-button.md); 0–1.
-- `end` — JSX prop `end`; accepts [ToolbarControlGroup](./toolbar-control-group.md), [Button](./wa-button.md); 0–1.
+- `trailing` — JSX prop `trailing`; accepts [ToolbarControlGroup](./toolbar-control-group.md), [Button](./button.md), [Button](./wa-button.md); 0–1.
+- `end` — JSX prop `end`; accepts [ToolbarControlGroup](./toolbar-control-group.md), [Button](./button.md), [Button](./wa-button.md); 0–1.
 
 ## State and wiring
 
@@ -109,6 +109,6 @@ Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-
 
 ## Related
 
-- Components: [TabBarItem](./tabs.md), [ToolbarControlGroup](./toolbar-control-group.md), [Button](./wa-button.md), [SegmentedControl](./segmented-control.md), [Select](./select.md), [Tab Group](./wa-tab-group.md).
+- Components: [TabBarItem](./tabs.md), [ToolbarControlGroup](./toolbar-control-group.md), [Button](./button.md), [Button](./wa-button.md), [SegmentedControl](./segmented-control.md), [Select](./select.md), [Tab Group](./wa-tab-group.md).
 - Docs: [`docs/component-selection.md`](../../docs/component-selection.md), [`docs/accessibility.md#tabs`](../../docs/accessibility.md#tabs).
 - UX catalog route: `?component=tab-bar`.

package/ai/public-api-signatures-v1.md

@@ -1,6 +1,6 @@
 # Public API signatures for the UI authoring corpus
 
-Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.108` and `kerfjs@5.0.0-beta.108`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
+Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.109` and `kerfjs@5.0.0-beta.109`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
 
 ## `@kerfjs/ui/css-values`
 
@@ -1461,12 +1461,12 @@ interface TabBarProps {
     label: string;
     children: KerfUiContent;
     leading?: KerfUiContent;
-    /** Tab-local action: a ToolbarControlGroup or a standalone Web Awesome button. */
+    /** Tab-local action: one ToolbarControlGroup, Kerf Button, or 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.
+     * Accepts one ToolbarControlGroup, Kerf Button, or Web Awesome button.
      */
     end?: KerfUiContent;
     className?: string;

package/ai/skill.md

@@ -370,7 +370,7 @@ Hard rules:
 7. Decorative icons are hidden; controls are named; focus is visible; state never relies on color alone; reduced motion and increased contrast remain usable. When the app detects a low-power device, it sets `data-kui-effects="static"` on the root element to turn backdrop materials opaque and stop scroll-driven animations; `@media (update: slow)` does the same automatically. `DisclosureArrow` defaults to an 18px root-scaled visual; size it with its typed `size` prop (`size={remify(24)}`); it never becomes the interaction or accessible-name owner. Put it in an owning native control with a stable accessible name and controlled `aria-expanded`. `ListHeader` toggle mode supplies it when `actionIcon` is omitted, but the app must reveal matching content; a custom icon replaces it. Author replacement icon content facing right before its configured direction transform is applied. Direction changes take the shortest rotation path, with counterclockwise chosen for a 180-degree closed-to-open tie. Kerf `Select` separately keeps its intrinsic Web Awesome expand glyph at `--kui-disclosure-icon-scale: .5`; an icon-only toolbar Select may set `caret={false}` for a round trigger while preserving its help tag and keyboard listbox, and a custom `renderSelected` icon stays centered.
 8. `ResizableRegion` uses `wireResizableRegions()` for Arrow, Shift+Arrow, Home/End, and pointer behavior. The app owns size persistence. `handleIcon` replaces decorative dormant glyph content only. Set `responsiveFillAt="narrow"` or `"compact"` when a responsive composition exposes the pane as its only inline track; the component fills that track and hides its dormant separator. For compact overlays, set `presentation="overlay"` and the overlay maximum variables. A lone child (normally a `Pane`) fills the region and owns scrolling; several children stack at natural height. Do not add descendant width/height overrides.
 9. Use controlled `SegmentedControl` for a small exclusive choice set. Select `appearance="toolbar"` when nesting it inside `ToolbarControlGroup`; use rounded or pill shapes for standalone contexts. The package derives inset hover/selection radii from the owning outer shape through `--kui-layout-highlight-inset`; do not restyle an inner highlight to an independent radius. Handle its action, update `value`, keep meaningful choice labels, and preserve every enabled native button in sequential Tab order. Set `disabled` to make the whole control unavailable (its selection stays visible); a choice's own `disabled` disables just that segment.
-10. Compose `TabBarItem` inside controlled `TabBar`; call `wireTabBars()` once and retain its disposer. It owns same-bar drag mechanics, including proximity-based horizontal edge autoscroll, while the app applies `onReorder` and owns order, selection, panels, close policy, routing, and persistence. For a tab-local action followed by a separately pinned workspace action, set `trailingPlacement="adjacent"`, put the local action in `trailing`, and the workspace action in `end`; each action zone accepts one `ToolbarControlGroup` or a standalone `wa-button` when the action needs its own Web Awesome chrome. TabBar owns the shrinking/scrolling tabs and fixed action geometry, so do not add descendant flex overrides. Arrow/Home/End select on move by default and restore focus by bar/tab identity when controlled activation replaces the strip; pass `activation: 'manual'` (or `TabBar activation="manual"` per strip) so arrow keys move focus only and the user selects with Enter/Space/click — use it when selecting a tab is a heavy action. Use runtime-filtered `rootAttributes` for domain metadata and keep an optional `closeIcon` decorative and noninteractive.
+10. Compose `TabBarItem` inside controlled `TabBar`; call `wireTabBars()` once and retain its disposer. It owns same-bar drag mechanics, including proximity-based horizontal edge autoscroll, while the app applies `onReorder` and owns order, selection, panels, close policy, routing, and persistence. For a tab-local action followed by a separately pinned workspace action, set `trailingPlacement="adjacent"`, put the local action in `trailing`, and the workspace action in `end`; each action zone accepts one `ToolbarControlGroup`, a standalone Kerf `Button`, or a standalone `wa-button` for an exceptional Web Awesome use. TabBar owns the shrinking/scrolling tabs and fixed action geometry, so do not add descendant flex overrides. Arrow/Home/End select on move by default and restore focus by bar/tab identity when controlled activation replaces the strip; pass `activation: 'manual'` (or `TabBar activation="manual"` per strip) so arrow keys move focus only and the user selects with Enter/Space/click — use it when selecting a tab is a heavy action. Use runtime-filtered `rootAttributes` for domain metadata and keep an optional `closeIcon` decorative and noninteractive.
 11. Use token-controlled `SearchField` when free text and removable structured filters share one editor. Editable text stays DOM-owned between token changes; to replace the text programmatically (reseeding a persistent dialog's field on reopen, applying a saved search) change the field's `revision` along with `query` for an unmanaged field, or call `model.replace({ query, tokens })` for a model-managed field; never re-key a wrapper. The leading icon, first text line, clear action, and trailing slot share one fixed row when content wraps. For automatic parsing, chips, suggestions, and evaluation, use createSearchFieldModel with grammar rules, pass it as SearchField.model, and register it in wireSearchFields models; a rule's `suggest(input, state)` receives committed tokens so it can exclude selected values. The field subscribes only to `model.structure` (committed tokens, empty or non-empty text, editor revision), so plain typing never re-runs the host render; in the host's own render read `model.state.peek()` and bind `model.result` (or a `computed`) as a signal hole — reading `model.state.value` there re-renders the host on every keystroke. Otherwise the app owns parsing and suggestions; call `readSearchField()` on input, empty `textContent` on clear, use `placeSearchFieldCaret()` after explicit controlled focus changes, and call `wireSearchFields()` once so Enter submits without inserting a line break and keyboard chip deletion restores focus plus the text-relative caret after controlled replacement. `clearIcon` replaces the clear action's glyph (its `clearLabel` still names it). For a compact icon button beside the clear button (a search-syntax help glyph), pass `trailingAction: { icon, label, action, expanded?, pressed?, controls?, haspopup?, attributes? }` — it matches the clear button's size, hover, focus, and cursor in every presentation; set `expanded` for a disclosure or `pressed` for a toggle, never both, and never hand-style a button into `trailing`. Enable `collapsible` for an animated iconic closed state, standalone or inside `ToolbarControlGroup`; the field keeps text or tokens expanded, and `wireSearchFields()` manages the transient expand/collapse/focus by default (activate to reveal + focus, Escape or empty blur to collapse). Bind the field's `expanded` to the returned handle's `expanded(id)` signal or adopt your own via `collapsible.signals`; opt a behavior out only when the app must own it. Do not hand-roll the open handler, the focusout collapse, a clear-button mousedown guard, or reopening after controlled clear or Select All deletion — the helper keeps the replacement editor open and focused. Clear and deletion restoration finish at the replacement mutation checkpoint before the next input task, so shortcut-letter typing cannot escape to the page and delayed animation frames cannot overwrite a later selection. Persist both query and tokens returned by the DOM read. For real-app adoption it also provides a focusout keep-open exception (`data-search-field-keep-open` regions or `collapsible.keepOpenOn(target)`, so a sibling suggestions/date/help surface does not collapse an empty field), opt-in atomic-chip keyboard (`keyboard`: Backspace/Delete remove the adjacent chip via `onRemoveToken`, ArrowRight moves the caret past a trailing chip), and an `onEdit({id, editor, event})` input callback (the `InputEvent` lets you gate on `inputType`/`data`) — reach for these instead of re-adding hand-rolled keydown/input handlers around the field.
     An application helper can call `model.commit(value)` for the active `name:` prefix when it computes a valid value outside suggestions; invalid values and missing prefixes leave the query unchanged.
 12. Demo work uses public production component subpaths and their browser-selected CSS. Focused demos and recipes have no local stylesheet, inline style, or styling-only class; use public components and `CatalogExample.viewport` for unavoidable specimen constraints (a recipe declares its frame through its exported `presentation`). To preview a top-layer specimen that production anchors with CSS anchor positioning, name the frame with `viewport.anchorName` (a dashed-ident such as `"--app-shell-main"`) and center in-flow content with `viewport.contentWidth` + `contentAlign: "center"` instead of wrapping the specimen in a stage element. When a recipe needs a capability no component offers, report the component gap instead of adding CSS. Use exactly three demo kinds: a `component` is one component with variants/states, a `composition` is a focused container of components commonly used together, and a `recipe` is the recommended production approach to a task. Organize catalog routes into product-important functional groups; within each group put all components before compositions, order each kind by importance with display-name alphabetical tie-breaking, and put recipes after every component/composition group. Show `Composition` as an entry tag instead of repeating the word in its name. Give every public visual component its own category-grouped catalog route; list themed third-party components under a clearly labeled collapsible ecosystem section, with a focused route for each. For the complete taxonomy, focused/composition decision, `CatalogExample` / `CatalogExampleStack` row/group nesting, specimen structure and metadata ownership, follow the single [Catalog demo authoring contract](../docs/catalog.md#catalog-demo-authoring-contract), discovered machine-readably through [`catalog-authoring.json`](./catalog-authoring.json). Never infer structure from private `kui-catalog-*` classes. Project each component's deterministic repository-relative demo source and existing documentation path so the detail can expose `View demo source` and `Read guidance` links without a runtime export; also derive first-party component implementation paths from their canonical browser imports, and label Web Awesome documentation as Kerf integration guidance. Declare direct `uses` relationships so `Used by` stays derivable, and theme shell chrome through the same semantic tokens as the stage instead of drawing a substitute. Enable `wireCatalog({ revealSelection: true })` for long desktop sidebars so controlled selections remain visible without moving focus; keep its default compact media guard unless compact scrolling is an explicit product behavior, and use `revealCatalogEntry` for an initial deep link.

package/ai/webawesome-jsx-signatures-v1.md

@@ -1,6 +1,6 @@
 # Web Awesome JSX signatures for the UI authoring corpus
 
-Generated from the emitted `@kerfjs/ui@5.0.0-beta.108` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
+Generated from the emitted `@kerfjs/ui@5.0.0-beta.109` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
 
 ```ts
 import { KerfCustomElement } from 'kerfjs/jsx-runtime';

package/dist/{chunk-RFLW4FPL.js → chunk-7AK5I7U7.js}

@@ -52,4 +52,4 @@ function TabBar({
 
 export { TabBar };
 
-//# sourceMappingURL=chunk-RFLW4FPL.js.map
+//# sourceMappingURL=chunk-7AK5I7U7.js.map

package/dist/chunk-7AK5I7U7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/tab-bar/tab-bar.tsx"],"names":[],"mappings":";;;AA6CO,SAAS,MAAA,CAAO;AAAA,EACrB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,UAAA;AAAA,EACA,UAAA,GAAa,WAAA;AAAA,EACb,YAAA,GAAe,MAAA;AAAA,EACf,UAAA;AAAA,EACA,iBAAA,GAAoB,UAAA;AAAA,EACpB,QAAA,GAAW,KAAA;AAAA,EACX;AACF,CAAA,EAAgB;AACd,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACvC,gBAAA,EAAe,SAAA;AAAA,MACf,iBAAA,EAAiB,EAAA;AAAA,MACjB,qBAAA,EAAqB,UAAA;AAAA,MACrB,iBAAA,EAAiB,UAAA;AAAA,MACjB,mBAAA,EAAmB,YAAA;AAAA,MACnB,mBAAA,EAAmB,UAAA;AAAA,MACnB,yBAAA,EAAyB,iBAAA;AAAA,MACzB,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,oBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,wBACvD,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,mBAAA;AAAA,YACN,IAAA,EAAK,SAAA;AAAA,YACL,YAAA,EAAY,KAAA;AAAA,YACZ,mBAAA,EAAiB,IAAA;AAAA,YACjB,gBAAA,EAAgB,WAAW,MAAA,GAAS,MAAA;AAAA,YAEnC;AAAA;AAAA,SACH;AAAA,QACC,QAAA,oBAAY,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAyB,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,QACzD,GAAA,oBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,oBAAoB,QAAA,EAAA,GAAA,EAAI;AAAA;AAAA;AAAA,GAC7C;AAEJ","file":"chunk-7AK5I7U7.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\n\nexport type TabActivation = 'automatic' | 'manual';\nexport type TabBarAllocation = 'intrinsic' | 'fill';\nexport type TabBarPresentation = 'rail' | 'segmented' | 'inspector';\nexport type TabBarTrailingPlacement = 'separate' | 'adjacent';\n/** Tablist width where segmented TabBarItems switch to icon-only. */\nexport type TabBarIconOnlyAt = 'wide' | 'narrow' | 'compact';\n\nexport interface TabBarProps {\n  id: string;\n  label: string;\n  children: KerfUiContent;\n  leading?: KerfUiContent;\n  /** Tab-local action: one ToolbarControlGroup, Kerf Button, or Web Awesome button. */\n  trailing?: KerfUiContent;\n  /**\n   * Action pinned to the far edge of the bar. Combine with an adjacent `trailing`\n   * action when the tab-local and workspace-level actions must remain distinct.\n   * Accepts one ToolbarControlGroup, Kerf Button, or Web Awesome button.\n   */\n  end?: KerfUiContent;\n  className?: string;\n  /**\n   * Keyboard activation mode for this strip, emitted as `data-tab-activation` for\n   * `wireTabBars` to read (overrides its `activation` option). `'automatic'` (default)\n   * selects on arrow / Home / End; `'manual'` moves roving focus only and the user\n   * selects with Enter / Space / click — use it when selecting a tab is a heavy action.\n   */\n  activation?: TabActivation;\n  /** How available strip width is allocated across child TabBarItems. */\n  allocation?: TabBarAllocation;\n  /** Named strip chrome for application rails, segmented tabs, or inspectors. */\n  presentation?: TabBarPresentation;\n  /** Switch segmented TabBarItems to icon-only at tablist widths of 832, 704, or 448px. Each tab needs a leading icon. */\n  iconOnlyAt?: TabBarIconOnlyAt;\n  /** Keep a trailing action beside the final tab or at the far edge of the bar. */\n  trailingPlacement?: TabBarTrailingPlacement;\n  /** Settle scrolling peers at whole-tab starts; wireTabBars measures a pinned leading tab's inset. */\n  snapTabs?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** Render a controlled tab strip. The application owns selection, order, and persistence. */\nexport function TabBar({\n  id,\n  label,\n  children,\n  leading,\n  trailing,\n  end,\n  className = '',\n  activation,\n  allocation = 'intrinsic',\n  presentation = 'rail',\n  iconOnlyAt,\n  trailingPlacement = 'separate',\n  snapTabs = false,\n  slot,\n}: TabBarProps) {\n  return (\n    <nav\n      class={`kui-tab-bar ${className}`.trim()}\n      data-component=\"tab-bar\"\n      data-tab-bar-id={id}\n      data-tab-activation={activation}\n      data-allocation={allocation}\n      data-presentation={presentation}\n      data-icon-only-at={iconOnlyAt}\n      data-trailing-placement={trailingPlacement}\n      aria-label={label}\n      slot={slot}\n    >\n      {leading && <div class=\"kui-tab-bar__leading\">{leading}</div>}\n      <div\n        class=\"kui-tab-bar__tabs\"\n        role=\"tablist\"\n        aria-label={label}\n        data-kui-tab-list\n        data-snap-tabs={snapTabs ? 'true' : undefined}\n      >\n        {children}\n      </div>\n      {trailing && <div class=\"kui-tab-bar__trailing\">{trailing}</div>}\n      {end && <div class=\"kui-tab-bar__end\">{end}</div>}\n    </nav>\n  );\n}\n"]}

package/dist/index.js

@@ -16,7 +16,7 @@ export { ValueTable, ValueTableRow } from './chunk-DZJ4GBSP.js';
 export { wireScrollDividers } from './chunk-OZ6X76G5.js';
 export { wireCheckboxes } from './chunk-CNM6ZWP2.js';
 export { TabBarItem } from './chunk-ZCDRLN3B.js';
-export { TabBar } from './chunk-RFLW4FPL.js';
+export { TabBar } from './chunk-7AK5I7U7.js';
 export { TextField } from './chunk-YVZCKXR3.js';
 export { Spacer } from './chunk-YMUIQRWK.js';
 export { SplitButton } from './chunk-TI2GV36S.js';

package/dist/tab-bar.d.ts

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

package/dist/tab-bar.js

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

package/docs/accessibility.md

@@ -421,8 +421,10 @@ 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 `Button` when a primary action needs its own chrome. Do not add a wrapper or flex margins to position the action.
+`trailing` and `end` each accept one `ToolbarControlGroup` for grouped controls,
+one standalone Kerf `Button` for an action with its own chrome, or one standalone
+Web Awesome `wa-button` for an exceptional ecosystem use. Do not add a wrapper
+or flex margins to position the action.
 `TabBarItem` 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/llms.txt

@@ -625,8 +625,8 @@ headingLevel`, `SearchField clearIcon`, `ContentItem frame="framed"` for a
   `TabBar trailingPlacement="adjacent"`, put the local action in `trailing`, and
   the workspace action in `end`; the component keeps both visible while its tab
   list shrinks and scrolls, without application descendant CSS. Each action
-  zone accepts one ToolbarControlGroup or a standalone `Button` for its own
-  chrome. Managed
+  zone accepts one ToolbarControlGroup, standalone Kerf `Button`, or exceptional
+  Web Awesome `wa-button` for its own chrome. Managed
   SearchField clear also preserves open state and replacement
   editor focus before the next input task, so shortcut-letter typing stays in search.
   Select All deletion does the same; deletion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.108",
+  "version": "5.0.0-beta.109",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",

package/dist/chunk-RFLW4FPL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navigation/tab-bar/tab-bar.tsx"],"names":[],"mappings":";;;AA6CO,SAAS,MAAA,CAAO;AAAA,EACrB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,UAAA;AAAA,EACA,UAAA,GAAa,WAAA;AAAA,EACb,YAAA,GAAe,MAAA;AAAA,EACf,UAAA;AAAA,EACA,iBAAA,GAAoB,UAAA;AAAA,EACpB,QAAA,GAAW,KAAA;AAAA,EACX;AACF,CAAA,EAAgB;AACd,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACvC,gBAAA,EAAe,SAAA;AAAA,MACf,iBAAA,EAAiB,EAAA;AAAA,MACjB,qBAAA,EAAqB,UAAA;AAAA,MACrB,iBAAA,EAAiB,UAAA;AAAA,MACjB,mBAAA,EAAmB,YAAA;AAAA,MACnB,mBAAA,EAAmB,UAAA;AAAA,MACnB,yBAAA,EAAyB,iBAAA;AAAA,MACzB,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,oBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,wBACvD,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,mBAAA;AAAA,YACN,IAAA,EAAK,SAAA;AAAA,YACL,YAAA,EAAY,KAAA;AAAA,YACZ,mBAAA,EAAiB,IAAA;AAAA,YACjB,gBAAA,EAAgB,WAAW,MAAA,GAAS,MAAA;AAAA,YAEnC;AAAA;AAAA,SACH;AAAA,QACC,QAAA,oBAAY,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAyB,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,QACzD,GAAA,oBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,oBAAoB,QAAA,EAAA,GAAA,EAAI;AAAA;AAAA;AAAA,GAC7C;AAEJ","file":"chunk-RFLW4FPL.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\n\nexport type TabActivation = 'automatic' | 'manual';\nexport type TabBarAllocation = 'intrinsic' | 'fill';\nexport type TabBarPresentation = 'rail' | 'segmented' | 'inspector';\nexport type TabBarTrailingPlacement = 'separate' | 'adjacent';\n/** Tablist width where segmented TabBarItems switch to icon-only. */\nexport type TabBarIconOnlyAt = 'wide' | 'narrow' | 'compact';\n\nexport interface TabBarProps {\n  id: string;\n  label: string;\n  children: KerfUiContent;\n  leading?: KerfUiContent;\n  /** Tab-local action: a ToolbarControlGroup or a standalone Web Awesome button. */\n  trailing?: KerfUiContent;\n  /**\n   * Action pinned to the far edge of the bar. Combine with an adjacent `trailing`\n   * action when the tab-local and workspace-level actions must remain distinct.\n   * Accepts a ToolbarControlGroup or a standalone Web Awesome button.\n   */\n  end?: KerfUiContent;\n  className?: string;\n  /**\n   * Keyboard activation mode for this strip, emitted as `data-tab-activation` for\n   * `wireTabBars` to read (overrides its `activation` option). `'automatic'` (default)\n   * selects on arrow / Home / End; `'manual'` moves roving focus only and the user\n   * selects with Enter / Space / click — use it when selecting a tab is a heavy action.\n   */\n  activation?: TabActivation;\n  /** How available strip width is allocated across child TabBarItems. */\n  allocation?: TabBarAllocation;\n  /** Named strip chrome for application rails, segmented tabs, or inspectors. */\n  presentation?: TabBarPresentation;\n  /** Switch segmented TabBarItems to icon-only at tablist widths of 832, 704, or 448px. Each tab needs a leading icon. */\n  iconOnlyAt?: TabBarIconOnlyAt;\n  /** Keep a trailing action beside the final tab or at the far edge of the bar. */\n  trailingPlacement?: TabBarTrailingPlacement;\n  /** Settle scrolling peers at whole-tab starts; wireTabBars measures a pinned leading tab's inset. */\n  snapTabs?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** Render a controlled tab strip. The application owns selection, order, and persistence. */\nexport function TabBar({\n  id,\n  label,\n  children,\n  leading,\n  trailing,\n  end,\n  className = '',\n  activation,\n  allocation = 'intrinsic',\n  presentation = 'rail',\n  iconOnlyAt,\n  trailingPlacement = 'separate',\n  snapTabs = false,\n  slot,\n}: TabBarProps) {\n  return (\n    <nav\n      class={`kui-tab-bar ${className}`.trim()}\n      data-component=\"tab-bar\"\n      data-tab-bar-id={id}\n      data-tab-activation={activation}\n      data-allocation={allocation}\n      data-presentation={presentation}\n      data-icon-only-at={iconOnlyAt}\n      data-trailing-placement={trailingPlacement}\n      aria-label={label}\n      slot={slot}\n    >\n      {leading && <div class=\"kui-tab-bar__leading\">{leading}</div>}\n      <div\n        class=\"kui-tab-bar__tabs\"\n        role=\"tablist\"\n        aria-label={label}\n        data-kui-tab-list\n        data-snap-tabs={snapTabs ? 'true' : undefined}\n      >\n        {children}\n      </div>\n      {trailing && <div class=\"kui-tab-bar__trailing\">{trailing}</div>}\n      {end && <div class=\"kui-tab-bar__end\">{end}</div>}\n    </nav>\n  );\n}\n"]}