@kerfjs/ui 5.0.0-beta.96 → 5.0.0-beta.97

package/ai/component-catalog.json

@@ -3766,6 +3766,7 @@
         "interaction-revealed trailing action",
         "trailing overflow menu",
         "before, after, or paired group divider",
+        "position-aware divided-list corners: flat wherever a divider line (this row's or a neighbor's) meets the edge",
         "draggable row with dragging and drop-before / drop-after insertion states"
       ],
       "accessibility": [
@@ -3932,7 +3933,8 @@
         "draggable row with dragging and drop-before / drop-after insertion states",
         "description and status",
         "busy while retaining content",
-        "before, after, or paired group divider"
+        "before, after, or paired group divider",
+        "position-aware divided-list corners: flat wherever a divider line (this row's or a neighbor's) meets the edge"
       ],
       "accessibility": [
         "ListItem uses native button activation and pressed maps to aria-pressed; ListItemLink uses native anchor activation and external opens a new tab with safe rel and an announced default label. Both map selected to aria-current; disabled or loading links omit href and leave the tab order. rootAttributes cannot add role=menuitem or replace owned ARIA; trailing is dormant content and must not contain controls. A draggable row reorders by pointer drag or, with wireListReorder, Alt+Shift+ArrowUp/ArrowDown; a placeholder is never draggable."

package/ai/components/list-action-row.md

@@ -49,6 +49,7 @@ Exact prop names and types: [`@kerfjs/ui/list-action-row`](../public-api-signatu
 - interaction-revealed trailing action
 - trailing overflow menu
 - before, after, or paired group divider
+- position-aware divided-list corners: flat wherever a divider line (this row's or a neighbor's) meets the edge
 - draggable row with dragging and drop-before / drop-after insertion states
 
 **CSS-value props** (typed builders from `@kerfjs/ui/css-values`; raw CSS strings are rejected):

package/ai/components/list-item.md

@@ -51,6 +51,7 @@ Exact prop names and types: [`@kerfjs/ui/list-item`](../public-api-signatures-v1
 - description and status
 - busy while retaining content
 - before, after, or paired group divider
+- position-aware divided-list corners: flat wherever a divider line (this row's or a neighbor's) meets the edge
 
 **CSS-value props** (typed builders from `@kerfjs/ui/css-values`; raw CSS strings are rejected):
 

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.96` and `kerfjs@5.0.0-beta.96`. 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.97` and `kerfjs@5.0.0-beta.97`. 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`
 

package/ai/skill.md

@@ -338,7 +338,7 @@ Set `pinned` on the first `AppTab` when it must stay visible while peers scroll.
 
 Use `--kui-resizable-region-background` for a region surface and `contentOverflow="visible"` while its anchored popup needs to escape. Choose a top or bottom `restorePosition`, typed `restoreInset`, or `restorePlacement="inline"` for its collapsed restore control. `FloatingToolbar placement="inline"` stays in normal flow; its per-edge inset tokens and `safeAreaInsets` configure floating placement.
 
-Use `ListItem density="spacious"` for larger option rows, `multiline` plus `multilineIconAlign="center"` when its icon should center on wrapped copy, `divider` for row separators, and `state="drag-target"` for the drop target treatment. For a reorderable list, set `draggable` and `itemId` on each `ListItem`, `ListItemLink`, or `ListActionRow` and call `wireListReorder(root, { onReorder })` from `@kerfjs/ui/wire-list-reorder` once: it dims the dragged rows, draws the brand insertion line on the hovered row's `before`/`after` edge, supports Alt+Shift+ArrowUp/ArrowDown, and reports `{ listId, sourceIds, target: { id, position }, source }` (a selected or pressed row drags every selected row of its `List`; `data-list-id` on the `List` names it). Apply it with `reorderListItems` and re-render; the `dragging` and `dropPosition` props render the same states from app-owned drag state. Never hand-style drag rows. Public `--kui-list-item-*` tokens adjust row, icon, label, and trailing geometry and color; ListHeader height, title padding, and border tokens adjust section density.
+Use `ListItem density="spacious"` for larger option rows, `multiline` plus `multilineIconAlign="center"` when its icon should center on wrapped copy, `divider` for row separators (for lines only between rows, every row but the last takes `divider="after"` and the last `"none"`; corners are flat wherever a divider line meets them, so the group rounds only its outer corners), and `state="drag-target"` for the drop target treatment. For a reorderable list, set `draggable` and `itemId` on each `ListItem`, `ListItemLink`, or `ListActionRow` and call `wireListReorder(root, { onReorder })` from `@kerfjs/ui/wire-list-reorder` once: it dims the dragged rows, draws the brand insertion line on the hovered row's `before`/`after` edge, supports Alt+Shift+ArrowUp/ArrowDown, and reports `{ listId, sourceIds, target: { id, position }, source }` (a selected or pressed row drags every selected row of its `List`; `data-list-id` on the `List` names it). Apply it with `reorderListItems` and re-render; the `dragging` and `dropPosition` props render the same states from app-owned drag state. Never hand-style drag rows. Public `--kui-list-item-*` tokens adjust row, icon, label, and trailing geometry and color; ListHeader height, title padding, and border tokens adjust section density.
 
 Set `ListHeader.size` to `xs`, `sm`, `m`, `l`, or `xl` for label scale. The default `sm` remains the small uppercase style shared with `FieldLabel`; `xs` is 2xs and capitalized, while `m`/`l`/`xl` match themed h5/h4/h3 typography. Choose `headingLevel` separately from the document outline.
 
@@ -429,7 +429,7 @@ For a tab scene with drill-down, place a `NavStack` directly in `TabNavigatorTab
 Use `Pane.deepInset` (also in `PaneConfig`) or `TabNavigatorTab.deepInset` for a plain scene when its scrolling content needs an extra 8px on all four sides, giving ordinary items a 16px inline gutter. The extra 8px is applied to the scroll surface, while nested Row/List/Grid item margins stay 8px. When a tab scene is a sole Pane or NavStack, configure deep inset on that child's Pane; the tab bar and top toolbar stay full width.
 An edge-to-edge table or similar Pane child can read `--kui-pane-content-inset-inline-start` and `--kui-pane-content-inset-inline-end`: negate them for the child's logical margins, then add them to the child's text padding. The inherited values include routed safe areas and `deepInset`; keep the child in the Pane's single scroll slot. See `docs/app-layouts.md` for the CSS recipe.
 
-Expanded search groups accept `expandedOverflow="visible"` to anchor app-owned suggestion/date/help surfaces below their relative root; collapsed/default groups retain existing clipping. Apps own surface placement/dismissal and use `data-token-search-keep-open` or `collapsible.keepOpenOn` for focus.
+Do not grow a collapsible search past the room beside its sibling groups: when it does not fit, the siblings wrap onto a new row while it opens. Size the expanded search to fit (`--kui-token-search-expanded-width`, or `sizing="grow"` with a fitting `growBasis`), and if a useful search still cannot fit, set aside the other controls while it is open, with `visibility="yield-to-expanded-sibling"` on those groups (they leave a 480px-or-narrower toolbar while a sibling is expanded) or behind a "…" `PopupMenu` overflow group; the app chooses which controls yield. Expanded search groups accept `expandedOverflow="visible"` to anchor app-owned suggestion/date/help surfaces below their relative root; collapsed/default groups retain existing clipping. Apps own surface placement/dismissal and use `data-token-search-keep-open` or `collapsible.keepOpenOn` for focus.
 
 `ToolbarText` and `ToolbarControlGroup` accept typed `hideBelow`/`showBelow`
 lengths (for example `px(416)`). Wire `wireToolbarVisibility(root)` from

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.96` 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.97` 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/styles/components/actions/toolbar-control-group/toolbar-control-group.css

@@ -173,6 +173,13 @@
   align-self: center;
 }
 .kui-toolbar-control-group[data-content="search"] {
+  /* The group owns the open/close width motion, and a collapsible search
+     inside follows it on every frame (no second, lagging width transition,
+     which left an empty band). For the length of the opening it also asks the
+     search to keep its query on one line, so the group's clip reveals the
+     query instead of re-wrapping it every frame (KF-CXQB30). */
+  --_kui-toolbar-group-search-width-duration: 0s;
+  --_kui-toolbar-group-search-reveal-duration: 0.25s;
   width: min(var(--kui-token-search-expanded-width, 30rem), 100%);
   max-width: 100%;
   height: auto;
@@ -232,9 +239,9 @@
    inside animated, leaving an empty band (KF-50K0JM). The collapsed state names
    a definite basis and minimum so all three flex lengths interpolate. */
 .kui-toolbar-control-group[data-content="search"][data-sizing="grow"] {
-  /* The group owns this motion; a collapsible search inside follows it on
-     every frame rather than running its own width transition. */
-  --_kui-toolbar-group-grow-search-width-duration: 0s;
+  /* The group's flex size owns this motion; its basis-wide minimum (above)
+     already keeps the query on one line. */
+  --_kui-toolbar-group-search-reveal-duration: 0s;
   transition-property:
     width, flex-basis, flex-grow, min-width, background-color, border-color;
   transition-duration: 0.25s, 0.25s, 0.25s, 0.25s, 0.2s, 0.2s;
@@ -845,6 +852,7 @@
 @media (prefers-reduced-motion: reduce) {
   .kui-toolbar-control-group[data-content="search"],
   .kui-toolbar-control-group[data-content="search"][data-sizing="grow"] {
+    --_kui-toolbar-group-search-reveal-duration: 0s;
     transition-duration: 0s;
   }
 

package/dist/styles/components/collections/list-action-row/list-action-row.css

@@ -46,6 +46,20 @@
   border-end-end-radius: 0;
 }
 
+/* In a divided list, a corner is flat wherever its edge carries a divider
+   line, whichever row draws it (see ListItem). */
+:is([data-divider="after"], [data-divider="both"]) + .kui-list-action-row {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.kui-list-action-row:has(
+  + :is([data-divider="before"], [data-divider="both"])
+) {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
 .kui-list-action-row:not([data-placeholder="true"]):has(
     .kui-list-action-row__primary:hover
   ) {

package/dist/styles/components/collections/list-item/list-item.css

@@ -68,6 +68,20 @@
   border-end-end-radius: 0;
 }
 
+/* In a divided list, a corner is flat wherever its edge carries a divider
+   line, whichever row draws it: the previous row's after line squares this
+   row's top, and the next row's before line squares its bottom. So first,
+   middle, last, and only rows round just their outer corners. */
+:is([data-divider="after"], [data-divider="both"]) + .kui-list-item {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.kui-list-item:has(+ :is([data-divider="before"], [data-divider="both"])) {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
 .kui-list-item[data-has-icon="true"] {
   grid-template-columns: var(
     --kui-list-item-columns,

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

@@ -284,12 +284,12 @@
      no-grow / may-shrink behavior a toolbar row wants without leaking the width
      into the cross axis. */
   flex: 0 1 auto;
-  /* A grow search group animates the open/close itself and sets this duration
-     to 0s: the field is the group's width on every frame instead of running a
-     second, lagging width transition that left an empty band beside a wrapped
-     query (KF-50K0JM). */
+  /* A search toolbar group animates the open/close itself and sets this
+     duration to 0s: the field is the group's width on every frame instead of
+     running a second, lagging width transition that left an empty band beside
+     a wrapped query (KF-50K0JM, KF-CXQB30). */
   transition:
-    width var(--_kui-toolbar-group-grow-search-width-duration, 0.25s) ease,
+    width var(--_kui-toolbar-group-search-width-duration, 0.25s) ease,
     background-color 0.2s ease,
     border-color 0.2s ease;
 }
@@ -301,6 +301,24 @@
   min-width: var(--_kui-toolbar-group-grow-search-min-width, 0px);
 }
 
+/* While a search group opens, keep the query on one line: the group's clip
+   reveals it instead of re-wrapping it in the narrow, still-growing field.
+   Wrapping returns when the opening ends. The duration is 0s (no effect)
+   outside a search group and under reduced motion. */
+.kui-token-search[data-collapsible="true"][data-expanded="true"]
+  > .kui-token-search__editor {
+  animation: kui-token-search-reveal
+    var(--_kui-toolbar-group-search-reveal-duration, 0s) linear;
+}
+
+@keyframes kui-token-search-reveal {
+  from,
+  to {
+    overflow-wrap: normal;
+    white-space: pre;
+  }
+}
+
 .kui-token-search[data-collapsible="true"][data-expanded="true"][data-fill="true"] {
   width: 100%;
   flex: 1 1 auto;

package/dist/styles/list-action-row.css

@@ -46,6 +46,20 @@
   border-end-end-radius: 0;
 }
 
+/* In a divided list, a corner is flat wherever its edge carries a divider
+   line, whichever row draws it (see ListItem). */
+:is([data-divider="after"], [data-divider="both"]) + .kui-list-action-row {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.kui-list-action-row:has(
+  + :is([data-divider="before"], [data-divider="both"])
+) {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
 .kui-list-action-row:not([data-placeholder="true"]):has(
     .kui-list-action-row__primary:hover
   ) {

package/dist/styles/list-item.css

@@ -68,6 +68,20 @@
   border-end-end-radius: 0;
 }
 
+/* In a divided list, a corner is flat wherever its edge carries a divider
+   line, whichever row draws it: the previous row's after line squares this
+   row's top, and the next row's before line squares its bottom. So first,
+   middle, last, and only rows round just their outer corners. */
+:is([data-divider="after"], [data-divider="both"]) + .kui-list-item {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.kui-list-item:has(+ :is([data-divider="before"], [data-divider="both"])) {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
 .kui-list-item[data-has-icon="true"] {
   grid-template-columns: var(
     --kui-list-item-columns,

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

@@ -284,12 +284,12 @@
      no-grow / may-shrink behavior a toolbar row wants without leaking the width
      into the cross axis. */
   flex: 0 1 auto;
-  /* A grow search group animates the open/close itself and sets this duration
-     to 0s: the field is the group's width on every frame instead of running a
-     second, lagging width transition that left an empty band beside a wrapped
-     query (KF-50K0JM). */
+  /* A search toolbar group animates the open/close itself and sets this
+     duration to 0s: the field is the group's width on every frame instead of
+     running a second, lagging width transition that left an empty band beside
+     a wrapped query (KF-50K0JM, KF-CXQB30). */
   transition:
-    width var(--_kui-toolbar-group-grow-search-width-duration, 0.25s) ease,
+    width var(--_kui-toolbar-group-search-width-duration, 0.25s) ease,
     background-color 0.2s ease,
     border-color 0.2s ease;
 }
@@ -301,6 +301,24 @@
   min-width: var(--_kui-toolbar-group-grow-search-min-width, 0px);
 }
 
+/* While a search group opens, keep the query on one line: the group's clip
+   reveals it instead of re-wrapping it in the narrow, still-growing field.
+   Wrapping returns when the opening ends. The duration is 0s (no effect)
+   outside a search group and under reduced motion. */
+.kui-token-search[data-collapsible="true"][data-expanded="true"]
+  > .kui-token-search__editor {
+  animation: kui-token-search-reveal
+    var(--_kui-toolbar-group-search-reveal-duration, 0s) linear;
+}
+
+@keyframes kui-token-search-reveal {
+  from,
+  to {
+    overflow-wrap: normal;
+    white-space: pre;
+  }
+}
+
 .kui-token-search[data-collapsible="true"][data-expanded="true"][data-fill="true"] {
   width: 100%;
   flex: 1 1 auto;

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

@@ -173,6 +173,13 @@
   align-self: center;
 }
 .kui-toolbar-control-group[data-content="search"] {
+  /* The group owns the open/close width motion, and a collapsible search
+     inside follows it on every frame (no second, lagging width transition,
+     which left an empty band). For the length of the opening it also asks the
+     search to keep its query on one line, so the group's clip reveals the
+     query instead of re-wrapping it every frame (KF-CXQB30). */
+  --_kui-toolbar-group-search-width-duration: 0s;
+  --_kui-toolbar-group-search-reveal-duration: 0.25s;
   width: min(var(--kui-token-search-expanded-width, 30rem), 100%);
   max-width: 100%;
   height: auto;
@@ -232,9 +239,9 @@
    inside animated, leaving an empty band (KF-50K0JM). The collapsed state names
    a definite basis and minimum so all three flex lengths interpolate. */
 .kui-toolbar-control-group[data-content="search"][data-sizing="grow"] {
-  /* The group owns this motion; a collapsible search inside follows it on
-     every frame rather than running its own width transition. */
-  --_kui-toolbar-group-grow-search-width-duration: 0s;
+  /* The group's flex size owns this motion; its basis-wide minimum (above)
+     already keeps the query on one line. */
+  --_kui-toolbar-group-search-reveal-duration: 0s;
   transition-property:
     width, flex-basis, flex-grow, min-width, background-color, border-color;
   transition-duration: 0.25s, 0.25s, 0.25s, 0.25s, 0.2s, 0.2s;
@@ -845,6 +852,7 @@
 @media (prefers-reduced-motion: reduce) {
   .kui-toolbar-control-group[data-content="search"],
   .kui-toolbar-control-group[data-content="search"][data-sizing="grow"] {
+    --_kui-toolbar-group-search-reveal-duration: 0s;
     transition-duration: 0s;
   }
 

package/docs/component-contract.md

@@ -578,6 +578,10 @@ close motion: its flex size animates while a collapsible `TokenSearchField`
 inside fills it on every frame, laid out at least basis-wide and clipped by the
 group, so a query never wraps or leaves an empty band mid-transition. At 480px
 container width or less, and under reduced motion, it opens in one frame.
+A plain collapsible search group (no `sizing`) animates its own width the same
+way: the `TokenSearchField` follows the group on every frame and keeps its
+query on one line until the opening ends, so it never shows an empty band or a
+query wrapped in a narrow, still-opening field.
 Use `sizing="fill"` for a group, including a non-search segmented control,
 that spans its wrapping row. Set `visibility="hide-collapsed-tiny"` on a
 collapsible group to omit its closed icon at 224px or less; expanded content

package/docs/component-selection.md

@@ -579,6 +579,22 @@ the control's dimensions, shows `LoadingSpinner` in its icon slot, sets
 | A command menu                 | `<ToolbarControlGroup single nestedDropdown><PopupMenu … /></ToolbarControlGroup>`     | Register `@kerfjs/ui/popup-menu/register` once; set `menuInset` on the group                                      |
 | A collapsible search box       | `<ToolbarControlGroup single><TokenSearchField collapsible … /></ToolbarControlGroup>` | The group animates the iconic ↔ expanded states; `wireTokenSearchFields` manages expand/collapse/focus by default |
 
+### Room for an expanded search
+
+A collapsible search group grows into the room beside its sibling groups. When
+that room is too small, the siblings wrap onto a new row partway through the
+opening, and the toolbar grows a row taller. Kerf does not hide or move your
+other controls; plan for it instead:
+
+- Size the expanded search to what fits: `--kui-token-search-expanded-width`
+  for a plain search group, or `sizing="grow"` with a `growBasis` that fits
+  beside the siblings.
+- If a useful search cannot fit beside the other controls, set those controls
+  aside while it is open. Mark them `visibility="yield-to-expanded-sibling"`
+  (they leave a 480px-or-narrower toolbar while a sibling is expanded), or
+  gather them behind a "…" `PopupMenu` overflow group. The application decides
+  which controls yield.
+
 ### Application surfaces below search
 
 Pass `expandedOverflow="visible"` to `ToolbarControlGroup content="search"`

package/llms.txt

@@ -254,7 +254,10 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   gives option rows more room. `multiline` wraps labels, with
   `multilineIconAlign="center"` when the icon should center on the whole copy.
   `divider` owns row separators and `state="drag-target"` paints the drop
-  target. For a reorderable list, set `draggable` + `itemId` on `ListItem`,
+  target. For lines only between rows, give every row but the last
+  `divider="after"` (the last `"none"`); a row's corners are flat wherever a
+  divider line meets them, so the group rounds only its outer corners on
+  hover and selection. For a reorderable list, set `draggable` + `itemId` on `ListItem`,
   `ListItemLink`, or `ListActionRow` rows and call `wireListReorder` (from
   `@kerfjs/ui/wire-list-reorder`) once; it paints the dimmed dragging rows and
   the before/after insertion line, supports Alt+Shift+ArrowUp/ArrowDown, and
@@ -368,6 +371,16 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
   `LucideIcon` is 24px); if it looks wrong, fix the surrounding layout, not the
   control. Never force a component's width/height to size it — that leaves a halo
   or a stretched oval.
+- **Make room for an expanded search instead of growing it past what fits.** A
+  collapsible search group grows into the space beside its sibling groups; if
+  that space is too small, the siblings wrap onto a new row while it opens.
+  Size the expanded search to what fits (`--kui-token-search-expanded-width`,
+  or `sizing="grow"` with a `growBasis` that fits), and if a useful search
+  cannot fit beside the other controls, set aside those controls while the
+  search is open: mark them `visibility="yield-to-expanded-sibling"` (they
+  leave a 480px-or-narrower toolbar while a sibling is expanded) or gather
+  them behind a "…" `PopupMenu` overflow group. The app decides which
+  controls yield.
 - **Toolbars hold only `ToolbarText` and `ToolbarControlGroup`.** Never put a bare
   button, input, link, or loose markup in a `leading`/`center`/`trailing` zone.
   Wrap every control — `SegmentedControl`, `Select`, a collapsible

package/package.json

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