@kerfjs/ui 5.0.0-beta.60 → 5.0.0-beta.61

package/dist/select.js

@@ -1,4 +1,4 @@
-export { Select } from './chunk-WPLIO5WJ.js';
+export { Select } from './chunk-TEYARRAK.js';
 
 
 

package/dist/styles/app-tab.css

@@ -13,6 +13,9 @@
     transparent
   );
   --kui-app-tab-drop-indicator: var(--kui-color-brand-border-normal);
+  --kui-app-tab-drop-target-background: var(--kui-color-brand-fill-quiet);
+  --kui-app-tab-drop-target-ring: var(--kui-color-brand-border-normal);
+  --kui-app-tab-drop-target-color: var(--kui-color-brand-on-quiet);
   position: relative;
   display: flex;
   width: max-content;
@@ -26,6 +29,28 @@
   align-items: center;
   flex: none;
 }
+.kui-app-tab[data-pinned="true"] {
+  position: sticky;
+  z-index: 1;
+  inset-inline-start: 0;
+  background: var(
+    --kui-app-tab-pinned-background,
+    var(--_kui-app-tab-pinned-default-background, var(--kui-color-surface))
+  );
+}
+.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(
+    --kui-tab-bar-strip-background,
+    var(--kui-color-neutral-fill-quiet)
+  );
+}
+.kui-app-tab[data-pinned="true"]:not([data-selected="true"]):hover {
+  background: var(
+    --kui-app-tab-pinned-hover-background,
+    var(--kui-color-neutral-fill-quiet)
+  );
+}
 .kui-app-tab[data-size="compact"] {
   height: 2rem;
 }
@@ -43,6 +68,11 @@
   background: var(--kui-app-tab-selected-background);
   box-shadow: var(--kui-shadow-s);
 }
+.kui-app-tab[data-drop-target="true"] {
+  color: var(--kui-app-tab-drop-target-color);
+  background: var(--kui-app-tab-drop-target-background);
+  box-shadow: inset 0 0 0 2px var(--kui-app-tab-drop-target-ring);
+}
 .kui-app-tab[data-tab-dragging="true"] {
   opacity: 0.55;
 }
@@ -106,6 +136,11 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.kui-app-tab[data-name-overflow="visible"] .kui-app-tab__name {
+  max-width: none;
+  overflow: visible;
+  text-overflow: clip;
+}
 .kui-app-tab[data-attention="true"] .kui-app-tab__name {
   color: var(--kui-app-tab-attention-color, var(--kui-color-warning-on-quiet));
 }

package/dist/styles/chip.css

@@ -0,0 +1,118 @@
+.kui-chip {
+  --_kui-chip-fill-quiet: var(--kui-color-neutral-fill-quiet);
+  --_kui-chip-fill-solid: var(--kui-color-neutral-on-normal);
+  --_kui-chip-border: var(--kui-color-neutral-border-normal);
+  --_kui-chip-on-quiet: var(--kui-color-neutral-on-quiet);
+  --_kui-chip-on-solid: var(--kui-color-surface);
+
+  display: inline-flex;
+  min-width: 0;
+  min-height: 1.75rem;
+  padding-inline: 0.5rem;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+  color: var(--_kui-chip-on-quiet);
+  background: var(--_kui-chip-fill-quiet);
+  align-items: center;
+  gap: 0.25rem;
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.kui-chip[data-tone="brand"] {
+  --_kui-chip-fill-quiet: var(--kui-color-brand-fill-quiet);
+  --_kui-chip-fill-solid: var(--kui-color-brand-on-fill);
+  --_kui-chip-border: var(--kui-color-brand-border-normal);
+  --_kui-chip-on-quiet: var(--kui-color-brand-on-fill);
+}
+
+.kui-chip[data-tone="pop"] {
+  --_kui-chip-fill-quiet: var(--kui-color-pop-fill-quiet);
+  --_kui-chip-fill-solid: var(--kui-color-pop-on-fill);
+  --_kui-chip-border: var(--kui-color-pop-border-normal);
+  --_kui-chip-on-quiet: var(--kui-color-pop-on-fill);
+}
+
+.kui-chip[data-tone="success"] {
+  --_kui-chip-fill-quiet: var(--kui-color-success-fill-quiet);
+  --_kui-chip-fill-solid: var(--kui-color-success-on-fill);
+  --_kui-chip-border: var(--kui-color-success-border-normal);
+  --_kui-chip-on-quiet: var(--kui-color-success-on-fill);
+}
+
+.kui-chip[data-tone="warning"] {
+  --_kui-chip-fill-quiet: var(--kui-color-warning-fill-quiet);
+  --_kui-chip-fill-solid: var(--kui-color-warning-on-fill);
+  --_kui-chip-border: var(--kui-color-warning-border-normal);
+  --_kui-chip-on-quiet: var(--kui-color-warning-on-fill);
+}
+
+.kui-chip[data-tone="danger"] {
+  --_kui-chip-fill-quiet: var(--kui-color-danger-fill-quiet);
+  --_kui-chip-fill-solid: var(--kui-color-danger-on-fill);
+  --_kui-chip-border: var(--kui-color-danger-border-normal);
+  --_kui-chip-on-quiet: var(--kui-color-danger-on-fill);
+}
+
+.kui-chip[data-appearance="solid"] {
+  color: var(--_kui-chip-on-solid);
+  background: var(--_kui-chip-fill-solid);
+}
+
+.kui-chip[data-appearance="outline"] {
+  border-color: var(--_kui-chip-border);
+  background: transparent;
+}
+
+.kui-chip[data-shape="rounded"] {
+  border-radius: var(--kui-radius-s);
+}
+
+.kui-chip[data-size="compact"] {
+  min-height: 1.25rem;
+  padding-inline: 0.3125rem;
+  font-size: var(--kui-font-2xs);
+}
+
+.kui-chip[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.kui-chip__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.kui-chip__remove {
+  display: inline-grid;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  color: inherit;
+  background: transparent;
+  align-items: center;
+  justify-items: center;
+  cursor: pointer;
+  flex: none;
+}
+
+.kui-chip[data-size="compact"] .kui-chip__remove {
+  width: 1rem;
+  height: 1rem;
+}
+
+.kui-chip__remove:hover {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+.kui-chip__remove:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}

package/dist/styles/grid.css

@@ -14,6 +14,13 @@
   gap: var(--_kui-grid-gap, var(--kui-grid-gap));
 }
 
+.kui-grid[data-min-column-width="true"] {
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(100%, var(--_kui-grid-min-column-width)), 1fr)
+  );
+}
+
 /* `fill`: the layout root of a definite-height parent (an app root or a
    fixed-height frame) takes its full height. Inside a flex layout use `flex`. */
 .kui-grid[data-fill="true"] {

package/dist/styles/list-item.css

@@ -1,12 +1,8 @@
 .kui-list-item {
   --kui-list-group-divider-color: var(--kui-color-neutral-border-quiet);
   --kui-list-item-color: var(--kui-color-neutral-on-normal);
-  --kui-list-item-border: transparent;
-  --kui-list-item-background: transparent;
-  --kui-list-item-hover-border: var(--kui-color-neutral-border-normal);
   --kui-list-item-hover-background: var(--kui-color-neutral-fill-quiet);
   --kui-list-item-selected-color: var(--kui-color-neutral-on-normal);
-  --kui-list-item-selected-border: var(--kui-color-brand-border-quiet);
   --kui-list-item-selected-background: var(--kui-color-brand-fill-normal);
   display: grid;
   width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
@@ -23,19 +19,20 @@
   );
   box-sizing: border-box;
   border: var(--kui-list-item-border-width, 1px) solid
-    var(--kui-list-item-border);
+    var(--kui-list-item-border, transparent);
   border-radius: var(
     --kui-list-item-radius,
     var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
   );
   color: var(--kui-list-item-color);
-  background: var(--kui-list-item-background);
+  background: var(--kui-list-item-background, transparent);
   cursor: pointer;
   grid-template-columns: var(--kui-list-item-columns, minmax(0, 1fr) auto);
   align-items: var(--kui-list-item-align-items, center);
   column-gap: var(--kui-list-item-gap, var(--kui-layout-item-gap, 0.5rem));
   font: inherit;
   text-align: start;
+  text-decoration: none;
 }
 
 .kui-list-item[data-density="compact"] {
@@ -98,7 +95,10 @@
 }
 
 .kui-list-item:hover:not([data-placeholder="true"]) {
-  border-color: var(--kui-list-item-hover-border);
+  border-color: var(
+    --kui-list-item-hover-border,
+    var(--kui-color-neutral-border-normal)
+  );
   background: var(--kui-list-item-hover-background);
 }
 
@@ -112,13 +112,18 @@
   opacity: 0.58;
 }
 
-.kui-list-item:disabled:not([data-placeholder="true"]) {
+.kui-list-item:is(:disabled, [aria-disabled="true"]):not(
+    [data-placeholder="true"]
+  ) {
   cursor: not-allowed;
 }
 
 .kui-list-item[aria-current="page"],
 .kui-list-item[aria-pressed="true"] {
-  border-color: var(--kui-list-item-selected-border);
+  border-color: var(
+    --kui-list-item-selected-border,
+    var(--kui-color-brand-border-quiet)
+  );
   color: var(--kui-list-item-selected-color);
   background: var(--kui-list-item-selected-background);
   font-weight: 650;

package/dist/styles/popup-menu.css

@@ -54,7 +54,8 @@
   color: var(--_kui-popup-row-current-color);
   background-color: var(--_kui-popup-row-current-background);
 }
-.kui-popup-menu > wa-divider {
+.kui-popup-menu > wa-divider,
+.kui-popup-menu wa-divider[slot="submenu"] {
   --spacing: 0.5em;
 }
 

package/dist/styles/segmented-control.css

@@ -1,7 +1,7 @@
 .kui-segmented-control {
   --kui-segmented-background: var(--kui-color-neutral-fill-normal);
   --kui-segmented-border: transparent;
-  --kui-segmented-foreground: var(--kui-color-neutral-on-quiet);
+  --kui-segmented-foreground: var(--kui-color-neutral-on-normal);
   --kui-segmented-hover-background: var(--kui-color-surface);
   --kui-segmented-hover-border: var(--kui-color-neutral-border-normal);
   --kui-segmented-selected-background: var(--kui-color-surface);
@@ -38,6 +38,7 @@
 .kui-segmented-control[data-appearance="outlined"] {
   --kui-segmented-border: var(--kui-color-neutral-border-normal);
   --kui-segmented-background: var(--kui-color-surface);
+  --kui-segmented-foreground: var(--kui-color-neutral-on-quiet);
 }
 
 .kui-segmented-control[data-appearance="toolbar"] {

package/dist/styles/select.css

@@ -233,6 +233,36 @@
   text-transform: uppercase;
 }
 
+.kui-select__actions {
+  display: flex;
+  gap: 0.25rem;
+  margin-block-start: 0.25rem;
+  padding-block-start: 0.5rem;
+  border-block-start: 1px solid var(--kui-color-neutral-border-quiet);
+}
+
+.kui-select__action {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 2.25rem;
+  padding-inline: 0.5rem;
+  border: 0;
+  border-radius: var(--kui-radius-s);
+  color: var(--kui-color-neutral-on-quiet);
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+}
+
+.kui-select__action:hover {
+  background: var(--kui-color-neutral-fill-quiet);
+}
+
+.kui-select__action:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}
+
 /* Loading placeholder: a static box that mirrors the closed combobox (label
    above, a value skeleton and a dormant chevron inside a 44px control box).
    Rendered instead of the interactive wa-select, so it needs no registration. */

package/dist/styles/styles.css

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

package/dist/styles/toolbar.css

@@ -35,21 +35,24 @@
      column shrinks still keeps a whole control row clear of the unsafe area. */
   min-height: calc(
     var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
-      (2 * var(--kui-toolbar-gap, 0.5rem)) +
+      (2 * var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem))) +
       var(--_kui-toolbar-safe-block-start) + var(--_kui-toolbar-safe-block-end)
   );
   padding-block: calc(
-      var(--kui-toolbar-gap, 0.5rem) + var(--_kui-toolbar-safe-block-start)
+      var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem)) +
+        var(--_kui-toolbar-safe-block-start)
     )
     calc(
-      var(--kui-toolbar-gap, 0.5rem) + var(--_kui-toolbar-safe-block-end)
+      var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem)) +
+        var(--_kui-toolbar-safe-block-end)
     );
   padding-inline: calc(
-      var(--kui-toolbar-gap, 0.5rem) +
+      var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem)) +
         var(--_kui-toolbar-safe-inline-start)
     )
     calc(
-      var(--kui-toolbar-gap, 0.5rem) + var(--_kui-toolbar-safe-inline-end)
+      var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem)) +
+        var(--_kui-toolbar-safe-inline-end)
     );
 }
 

package/dist/{token-search-field-CCke1yvQ.d.ts → token-search-field-DvgFLhLL.d.ts}

@@ -8,8 +8,8 @@ interface TokenSearchRule {
     parse?: (input: string) => string | undefined;
     /** Label for a committed chip. Defaults to `name:input`. */
     label?: (value: string, input: string) => string;
-    /** Suggestions for the unfinished value after `name:`. */
-    suggest?: (input: string) => readonly (string | {
+    /** Suggestions for the unfinished value after `name:`, with current committed tokens. */
+    suggest?: (input: string, state: TokenSearchState) => readonly (string | {
         value: string;
         label: string;
     })[];
@@ -33,8 +33,12 @@ interface TokenSearchModel<Result = unknown> {
     suggestions: Signal<readonly TokenSearchSuggestion[]>;
     result: Signal<Result | undefined>;
     edit(value: TokenSearchFieldValue, commit?: boolean): void;
+    /** Replace app-owned search state and rebuild the DOM-owned editor text. */
+    replace(value: TokenSearchFieldValue): void;
     submit(value: TokenSearchFieldValue): void;
     choose(value: string): void;
+    /** Commit a value for the active `name:` prefix, even when it is not suggested. */
+    commit(value: string): void;
     expandToken(value: string): void;
     remove(value: string): void;
     clear(): void;

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

@@ -1,3 +1,3 @@
 import 'kerfjs';
 import './semantic-content-BbzjvSu9.js';
-export { T as TokenSearchEditorAttributes, a as TokenSearchField, b as TokenSearchFieldProps, c as TokenSearchFieldValue, j as TokenSearchToken, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-field-CCke1yvQ.js';
+export { T as TokenSearchEditorAttributes, a as TokenSearchField, b as TokenSearchFieldProps, c as TokenSearchFieldValue, j as TokenSearchToken, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-field-DvgFLhLL.js';

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

@@ -1,3 +1,3 @@
 import 'kerfjs';
-export { d as TokenSearchModel, e as TokenSearchModelOptions, f as TokenSearchResolvedToken, g as TokenSearchRule, h as TokenSearchState, i as TokenSearchSuggestion, k as createTokenSearchModel } from './token-search-field-CCke1yvQ.js';
+export { d as TokenSearchModel, e as TokenSearchModelOptions, f as TokenSearchResolvedToken, g as TokenSearchRule, h as TokenSearchState, i as TokenSearchSuggestion, k as createTokenSearchModel } from './token-search-field-DvgFLhLL.js';
 import './semantic-content-BbzjvSu9.js';

package/dist/token-search-model.js

@@ -1,3 +1,3 @@
-export { createTokenSearchModel } from './chunk-F7F7KRO2.js';
+export { createTokenSearchModel } from './chunk-4SQK27MR.js';
 
 //# sourceMappingURL=token-search-model.js.map

package/dist/wire-catalog.js

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

package/dist/wire-tab-bars.js

@@ -1,3 +1,3 @@
-export { reorderTabs, wireTabBars } from './chunk-46263QLK.js';
+export { reorderTabs, wireTabBars } from './chunk-C4OYOKWX.js';
 
 //# sourceMappingURL=wire-tab-bars.js.map

package/dist/wire-token-search-fields.d.ts

@@ -1,5 +1,5 @@
 import { Signal } from 'kerfjs';
-import { d as TokenSearchModel } from './token-search-field-CCke1yvQ.js';
+import { d as TokenSearchModel } from './token-search-field-DvgFLhLL.js';
 import './semantic-content-BbzjvSu9.js';
 
 interface TokenSearchSubmit {

package/dist/workbench.js

@@ -1,4 +1,4 @@
-export { Workbench } from './chunk-2OXQHM7I.js';
+export { Workbench } from './chunk-Y74NWGQW.js';
 
 
 

package/docs/accessibility.md

@@ -7,6 +7,7 @@ These are normative contracts for package components and consuming applications.
 - All controls have accessible names and visible `:focus-visible` treatment.
 - Decorative `LucideIcon` output is `aria-hidden`; pass `label` only when the SVG itself conveys meaning.
 - `ListItem` uses native button Enter/Space behavior. `selected` maps to `aria-current="page"`; `pressed` maps to `aria-pressed`. Selected rows keep the normal foreground over their brand-tinted fill so text retains WCAG AA contrast in light and dark themes. Its leading icon visual is 18px while the row retains its 44px minimum target; multiline icons align to the first text line. Its `trailing` content is dormant and must not contain controls. Its `rootAttributes` slot accepts only application `data-*` metadata and deliberately cannot emit `role="menuitem"` in isolation—a true ARIA menu must own arrow, Home/End, Escape, and focus behavior as one widget.
+- `ListItemLink` shares that row content and geometry but uses native anchor Enter behavior and requires `href`. It has no `action` or `pressed` state. `external` opens a new tab with `rel="noopener noreferrer"`; the default accessible name announces the new tab for a string label, so an explicit `accessibleLabel` should do the same. Disabled and loading links omit `href`, expose `aria-disabled`, and leave the tab order. Its trailing content remains dormant.
 - `ListHeader` owns action naming, disabled state, and disclosure `aria-expanded`. Toggle mode supplies one decorative 18px `DisclosureArrow` when `actionIcon` is omitted; it mirrors `expanded` while the native button's accessible name stays stable. The application must update that controlled state and reveal or hide real content. A valid `count` is visually rendered in an `aria-hidden` neutral pill while the required localized `countLabel` becomes part of the owning heading or disclosure button's accessible name; zero remains a real count. Its narrow `triggerAttributes` slot may describe a native popover or controlled-content relationship with `popoverTarget`, `popoverTargetAction`, `aria-controls`, and `aria-haspopup`; the application owns the target surface and its focus/dismissal behavior.
 - Dispose `wireTabBars` and `wireTokenSearchFields` with their owning view. Disposal cancels queued controlled-render focus restoration, so a torn-down view cannot reclaim focus from its successor.
 - `wireNavStack` moves focus into every newly active top view and remembers the last focused descendant of each mounted view for pop restoration. Mark a preferred initial heading or control with `data-nav-focus` (and `tabindex="-1"` when it is not normally tabbable); otherwise the helper uses the first enabled focusable descendant, then a programmatically focusable view-container fallback.
@@ -14,6 +15,7 @@ These are normative contracts for package components and consuming applications.
 - `LoadingSpinner` is either labeled (`role="img"`) or hidden. Its rotation stops for reduced motion.
 - An unlabeled `Skeleton` (including the value slots a component's `placeholder` prop renders) is decorative loading chrome: it is `aria-hidden`, conveys no information a user needs to act on, and is deliberately exempt from the WCAG 3:1 non-text-contrast target. Inside a solid `Badge` it stays subtle (about 2.1–4.4:1 in light, 2.4–2.8:1 in dark, depending on tone); `tests/browser/tone-contrast.spec.ts` holds those values as a regression floor rather than an accessibility threshold. Announce loading through a labeled `Skeleton`, `LoadingSpinner`, or `aria-busy` on the owning region, never through the skeleton's visibility.
 - `StateBanner` defaults to polite `role="status"`; use `urgency="alert"` only for an attention-requiring failure. Its optional `badge` is persistent inline status/count content beside the title and is announced as part of the banner; keep it terse and do not rely on color alone for its meaning.
+- A removable `Chip` has a native button with a specific `removeLabel`, such as "Remove Urgent tag". The button is absent for a plain chip and disabled for a disabled chip. Tag text remains visible because tone does not convey meaning alone.
 - `EmptyState` reports busy state through `aria-busy` and never relies on an illustration as its label.
 - `Select` follows the Web Awesome host's standard `input`/`change` events. Application tests verify the live `value`, focus, and events—not attributes alone. Its decorative option icons and value-dependent selected content remain present after controlled rerenders, so the visible choice does not silently lose its non-text cue.
 - `DisclosureArrow` is an 18px root-scaled decorative visual by default, not an interaction target. Its owning native control supplies a stable accessible name, pointer and keyboard interaction, and `aria-expanded`; multiple arrows keep independently controlled state. Consumers may resize it with the typed `size` prop without changing that ownership. Configured directions animate over the shortest path; a 180-degree closed-to-open tie uses counterclockwise rotation.
@@ -38,6 +40,12 @@ chosen option shows its check, and the closed control reads the chosen labels
 in choice order as one short localized list (the `placeholderText` when none
 are chosen) instead of a removable tag per choice. `change` and `input` report
 the value array; in a form, every chosen value is submitted under `name`.
+Disabled choices remain visible with `aria-disabled` and cannot be selected;
+`disabledReason` adds a native tooltip. For a multiple Select, opt-in
+`selectAllLabel` and `clearLabel` render named footer buttons. They keep the
+popup open, select only enabled choices or clear the selection, and emit the
+ordinary `input` and `change` events only when the value changes. Their labels
+come from the application so they can be localized.
 
 A toolbar filter menu (a "Filter by label" funnel) is a multiple Select with
 `selectedPresentation="icon-only"` and a fixed `triggerIcon`; the types accept
@@ -196,7 +204,8 @@ with the Select's current-option fill rather than a second focus ring inside the
 open popup. A disabled item stays in the menu but cannot be
 chosen; disable the whole trigger only when every command is unavailable.
 Nested items use Web Awesome's submenu pointer and Left/Right arrow routing;
-checked items expose checkbox menu semantics. `details` supplies optional
+headings and dividers can separate nested groups without becoming keyboard
+choices. Checked items expose checkbox menu semantics. `details` supplies optional
 trailing visual content without changing a command's accessible label. A
 `context` menu's invisible anchor is outside the accessibility tree and normal
 Tab order; opening the menu moves focus into its commands and Escape dismisses
@@ -317,7 +326,11 @@ 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.
 `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. A `pending` tab (known,
+accessible name while visually hiding the duplicate label. The default name
+overflow is an ellipsis; `nameOverflow="visible"` lets an inline loading
+treatment show the whole name, without changing the accessible name. The app
+sets `dropTarget` during a content drag-over to paint a brand highlight;
+selection and tab focus stay independent of that visual state. A `pending` tab (known,
 still opening) keeps its visible name as the tab button's accessible name, so a
 trailing spinner's own label is not folded into it. It is `aria-busy` and stays
 selectable (in the roving tab order like a live tab), so the application can
@@ -330,6 +343,12 @@ filtering rejects roles plus case variants of component- or wiring-owned
 action, identity, selection, drag, drop, and component attributes. An optional
 `closeIcon` is decorative dormant content inside the already named close button
 and must not contain interactive descendants.
+The first `AppTab` can set `pinned` to stay at the inline start while its peers
+scroll. It remains a normal tab within the same tablist and roving-focus order;
+focus and controlled selection reveal peers beyond the pinned tab. Pin only the
+leading tab of a strip.
+WebKit currently moves a pinned tab outside an RTL strip as it scrolls;
+`KF-MYFQAS` tracks the browser correction.
 `wireTabBars()` adds Left/Right wrapping, Home/End, Delete/Backspace close
 activation, same-bar pointer reordering, `Alt+Shift+ArrowLeft/ArrowRight`
 reordering, focus restoration, scroll-into-view, and pointer-proximity
@@ -363,7 +382,8 @@ stays in sequential Tab order, matching Hot Sheet 2's compact view and inspector
 controls; Enter and Space use native button activation. The application handles
 the supplied `data-action`, reads `data-segment-value`, updates `value`, and
 re-renders. Keep labels unique and meaningful even when `content` shows only an
-icon. Use tabs—not a segmented control—when choices switch page regions that
+icon. The filled track uses the normal neutral text role for readable unselected
+labels in light and dark themes. Use tabs—not a segmented control—when choices switch page regions that
 need `tab`/`tabpanel` semantics.
 
 ## TokenSearchField
@@ -390,6 +410,12 @@ trailing controls share the first text line's fixed vertical center and remain
 there as the editor wraps. In `collapsible` mode, the closed state is one named
 iconic search button and the open state is the same named searchbox, whether
 the field stands alone or is composed inside `ToolbarControlGroup`.
+
+For an app-driven query replacement with an unmanaged field, change its
+`revision` along with `query` so the editor text rebuilds. For a model-managed
+field, call `model.replace({ query, tokens })`: it parses the supplied state and
+advances `editorRevision` even when the tokens did not change.
+
 Applications set `expanded` while the field is focused, move focus from the
 trigger into the revealed editor, and clear `expanded` only after focus leaves
 the complete component. Text or tokens keep the field expanded even when that

package/docs/component-contract.md

@@ -52,6 +52,11 @@ CSS boundaries, diagnostics, and provenance. A wrapper entry may add
 composition checks treat its elements as each root rather than as an unknown
 child. A placement with listed parent constraints produces one `KUI-L201`
 diagnostic even when both the wrapper and a rendered root reject that parent.
+When one catalog entry exports another JSX component with different placement,
+`jsxExports` gives that export its own parent contract. The extra export does
+not stand for the entry's root when a parent zone is checked.
+Generated `boundaries.rootClass` prefers the public `kui-<entry-id>` class when
+present, so a sibling export's class cannot become the entry's root class.
 
 `boundaries.placeableClasses` names the subset of `publicClasses` an
 application may write onto its own elements (layout utilities, the document