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

package/README.md

@@ -229,6 +229,7 @@ interchangeable. `ListItem` and `ListActionRow` deliberately expose no raw
 | `ListActionRow`                                                     | `@kerfjs/ui/list-action-row`            | `@kerfjs/ui/list-action-row.css`         |
 | `ListItem`                                                          | `@kerfjs/ui/list-item`                  | `@kerfjs/ui/list-item.css`               |
 | `wireListReorder`, `reorderListItems`                               | `@kerfjs/ui/wire-list-reorder`          | —                                        |
+| `wireListFocusScroll`                                               | `@kerfjs/ui/wire-list-focus-scroll`     | —                                        |
 | `ListHeader`                                                        | `@kerfjs/ui/list-header`                | `@kerfjs/ui/list-header.css`             |
 | `ListInsetControl`                                                  | `@kerfjs/ui/list-inset-control`         | `@kerfjs/ui/list-inset-control.css`      |
 | `ListInsetText`                                                     | `@kerfjs/ui/list-inset-text`            | `@kerfjs/ui/list-inset-text.css`         |
@@ -257,6 +258,8 @@ interchangeable. `ListItem` and `ListActionRow` deliberately expose no raw
 | `Select`                                                            | `@kerfjs/ui/select`                     | `@kerfjs/ui/select.css`                  |
 | `SegmentedControl`                                                  | `@kerfjs/ui/segmented-control`          | `@kerfjs/ui/segmented-control.css`       |
 | `ChoiceChips`                                                       | `@kerfjs/ui/choice-chips`               | `@kerfjs/ui/choice-chips.css`            |
+| `Composer`                                                          | `@kerfjs/ui/composer`                   | `@kerfjs/ui/composer.css`                |
+| `wireComposers`                                                     | `@kerfjs/ui/wire-composers`             | —                                        |
 | `TokenSearchField`, `readTokenSearchField`, `placeTokenSearchCaret` | `@kerfjs/ui/token-search-field`         | `@kerfjs/ui/token-search-field.css`      |
 | `wireTokenSearchFields`                                             | `@kerfjs/ui/wire-token-search-fields`   | —                                        |
 | `createTokenSearchModel`                                            | `@kerfjs/ui/token-search-model`         | —                                        |
@@ -716,7 +719,7 @@ struck-through no-color dot) or a decorative `icon`:
   action="select-command-color"
   choices={[
     { value: "transparent", label: "Transparent", swatch: "transparent" },
-    { value: "blue", label: "Blue", swatch: foregroundColor("#3b82f6") },
+    { value: "blue", label: "Blue", swatch: fillColor("#3b82f6") },
   ]}
 />
 ```
@@ -725,6 +728,43 @@ Listen for `change` on the supplied action (for example
 `delegateActions(root, "change", { "select-command-color": … })`), read the
 radio's `value`, and re-render.
 
+Set `multiple` when any number of the options may be on, such as label filters
+or annotation intents. `value` is then a `readonly Value[]`, the pills are
+native checkboxes in a `role="group"` (each a Tab stop that Space toggles), and
+every checked value submits under `name`. Read the checked boxes by name in the
+change handler. A multiple group takes no `required`. On dark inverse chrome,
+place the chips in a dark appearance scope (`.wa-dark`) instead of restyling
+them.
+
+`Composer` is the chat or prompt composer: a raised frame (the standard
+border, large radius, and `shadow-l`) whose border turns brand while focus is
+within. Its borderless message field grows with its content between `minRows`
+(default 1) and `maxRows` (default 8) lines, then scrolls, above an action row
+with an optional quiet `hint` and the trailing `actions`:
+
+```tsx
+<Composer
+  id="assistant-message"
+  name="message"
+  label="Message"
+  placeholder="Ask about this build"
+  hint="Answers use the latest nightly build."
+  actions={<wa-button variant="brand" data-action="send-message">Send</wa-button>}
+/>
+```
+
+The app reads and clears the textarea from its send action. For
+Enter-to-send, set `submitOnEnter` and call `wireComposers(root)` from
+`@kerfjs/ui/wire-composers` once: Enter or Cmd/Ctrl+Enter clicks the first
+trailing action, Shift+Enter inserts a newline, and an IME composition commit
+or an empty message never sends. Put it in a `DialogSurface` with
+`footerPresentation="floating"` (`slot="footer"`) to float it over a
+transcript, and give the transcript `scrollClearance="block-end"` so it
+scrolls beneath the composer while its last message still rests above it.
+Add `headerPresentation="floating"` with a `fill` body and
+`scrollClearance="both"` to let the transcript scroll beneath a translucent
+title bar as well.
+
 `TokenSearchField` is a token-controlled contenteditable searchbox that keeps
 free text and ordered filter chips in one field. Its editable text stays
 DOM-owned between token changes so typing does not replace the caret. Tokens
@@ -830,6 +870,7 @@ than default patterns. The detailed rationale lives in the theme contract.
 - [Component selection and composition](./docs/component-selection.md)
 - [Design philosophy](./docs/design-philosophy.md)
 - [Apple HIG translation](./docs/apple-hig.md)
+- [Writing interface copy](./docs/writing.md)
 - [Accessibility and keyboard contracts](./docs/accessibility.md)
 - [Component and integration contract](./docs/component-contract.md)
 - [Spacing and application layout](./docs/layout.md)

package/ai/application-ui-diagnostic-ids-v1.json

@@ -32,6 +32,7 @@
     "KUI-D030",
     "KUI-D031",
     "KUI-D032",
+    "KUI-D040",
     "KUI-L001",
     "KUI-L002",
     "KUI-L003",