kerfjs 5.0.0-beta.29 → 5.0.0-beta.30

package/CHANGELOG.md

@@ -1,11 +1,102 @@
 # Changelog
 
+- Added `wa-dialog.hide-actions` support to `@kerfjs/ui/webawesome.css`, hiding
+  Web Awesome's directly exported `header-actions` shadow part for dialogs that
+  provide their own dismissal affordance.
+
 All notable changes to **kerf** are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+- Added catalog-driven CSS value diagnostics across `eslint-plugin-kerfjs`,
+  `kerf-ui-analyze`, and `kerf-ui-doctor`. Stable `KUI-L013`–`KUI-L017`
+  findings now identify raw or unknown values, wrong-dimension helpers,
+  incomplete expressions, declaration-list escapes, and review-worthy
+  off-scale spacing from first- or third-party component catalogs.
+- Extended the property-specific `@kerfjs/ui/css-values` contracts: `List.flex`
+  now uses finite keywords or `flex()`, `Skeleton` dimensions use `CssSize` and
+  `CssLength`, and `SelectChoice.color` uses `uiColor()` or `colorVar()`.
+  Removed the unrestricted `style` escape hatches from `ListItem` and
+  `ListActionRow` before the 5.0 stable release; use `className`, public tokens,
+  and cataloged props instead.
+- Added typed, CSS-free `@kerfjs/ui/css-values` builders and branded complete
+  versus expression length types. `List.gap` now accepts direct spacing-token
+  shorthands or complete `CssLength` values and rejects unrestricted CSS strings.
+- Added the public recursive `JSXChildren` type from both `kerfjs` and
+  `kerfjs/jsx-runtime`, giving third-party function components a canonical
+  declaration for nullable, signal-backed, and arbitrarily nested readonly
+  child content that matches the runtime.
+- Added the public recursive `KerfUiContent` type across semantic UI content
+  zones, so nullable conditionals and mutable or readonly nested component
+  arrays compose directly without a `Fragment` while raw strings, numbers, and
+  signals remain rejected outside explicit text positions.
+- Fixed bottom `Workbench` drawers overshooting and snapping during collapse
+  transitions by anchoring fixed-height content to the shell's stable bottom
+  edge.
+- Fixed bottom `CollapsiblePanel` drawers overshooting their open position and
+  snapping back by anchoring fixed-height content to the panel's stable bottom
+  edge throughout the transform transition.
+- Formalized named `SafeHtml` prop slots as explicit `zone.jsx.prop` bindings
+  in the UI composition catalog and generalized `ui-composition` linting beyond
+  Toolbar, including statically visible `children`, cardinality, aliases,
+  namespaces, arrays, fragments, and branches.
+- Added `ToolbarControlGroup.avatarImage`, painting contained avatar imagery on
+  a lone group or on the pressed highlight when the group has multiple buttons.
+- Split the AppTab and TabBar catalog routes into focused component specimens,
+  and moved their controlled selection, tabpanel, overflow, add/close, and
+  reorder lifecycle into a separate application-tabs composition demo.
+- Fixed `wireNavStack` focus ownership across controlled navigation: pushes
+  focus the new top view, pops restore its remembered descendant, and removed
+  targets fall back through `data-nav-focus`, the first enabled control, and
+  the view container.
+- Fixed compact mixed-content `ToolbarControlGroup` dropdown triggers being
+  forced into an icon-only width, which painted the label across its separator
+  and the Web Awesome caret outside the group.
+- Made `ListItem` clip label, status, and dormant trailing painting to its
+  rounded row boundary so compact and constrained rows cannot visibly overflow;
+  described rows now grow enough to keep their owned two-line label readable.
+- Fixed compact toolbar `Select` focus to follow its owning group's pill or
+  rounded geometry and restored consistent spacing between popup icons and labels.
+- Fixed the compact-toolbar recipe's independent overflow action to use the
+  same full-height pill geometry as its adjacent toolbar controls.
+- Fixed the catalog footer's `Components` relationship selector to fit its icon
+  and plural label and give popup headings/items consistent border clearance.
+- Fixed a collapsible `TokenSearchField` inside a rounded
+  `ToolbarControlGroup` retaining its independent pill radius instead of using
+  the group's shared concentric highlight radius.
+- Updated the header-composition catalog demo's supporting copy to use the
+  horizontal `ListInsetText` geometry, aligning it with the value-table content
+  edge across responsive, RTL, and zoomed layouts.
+- Updated the `Pane` catalog demo's secondary header copy to use
+  `ListInsetText`, aligning it with the standard pane content gutter at wide and
+  narrow sizes instead of maintaining demo-only padding.
+- Completed `NavStack` navigation transitions by cross-fading top and bottom
+  chrome alongside content slides, added per-view bottom toolbars with a
+  persistent fallback, and replaced the static focused demo with a working
+  push/pop flow.
+- Replaced the static compact `SplitView` detail specimen with a controlled,
+  interactive list-to-detail drill-down whose Back action restores the list;
+  the roomy example now demonstrates controlled selection as well.
+- Documented and demonstrated list-first dialog bodies: use `List` with
+  `bodyInset="none"`, and wrap bare dialog copy in `ListInsetText` so content
+  shares the standard list gutter without double-insetting.
+- Fixed `@kerfjs/ui`'s collapsible `TokenSearchField` keep-open ownership in
+  WebKit: when `focusout.relatedTarget` is missing during pointer activation of
+  an external `data-token-search-keep-open` surface, the helper now uses the
+  actual pointer target instead of collapsing and removing the target before
+  its click handler runs.
+- Added a first-class vibrant `pop` semantic color for attractive non-status
+  emphasis, with complete light/dark/increased-contrast token roles and typed
+  StateBanner, ListHeader indicator, and ToolbarControlGroup selected tones.
+- Fixed managed `TokenSearchField` Clear focus before the next input task, so
+  immediate typing stays in the replacement editor instead of triggering page
+  shortcuts; genuine later focus handoffs and selections remain untouched.
+- Fixed `@kerfjs/ui/tab-scaffold` bottom-tab labels being vertically clipped by
+  flex shrinkage while retaining horizontal ellipsis for long labels.
+- Made inset selection and hover highlights follow their owning control's pill
+  or rounded shape, with concentric inner radii derived from the full inset.
 - Fixed animated `ResizableRegion` overlays so remembered desktop dimensions
   cannot make their content overflow the responsive panel cap on narrow screens.
 - Added configuration-first application-panel policies across `ResizableRegion`,

package/ai/cursorrules

@@ -1,4 +1,4 @@
-<!-- kerf-skill-version: 1.20.0 -->
+<!-- kerf-skill-version: 1.21.0 -->
 
 # kerf.cursorrules — rules for building apps with kerf
 
@@ -87,6 +87,7 @@ import {
   isSafeHtml,
   raw,
   Fragment,
+  type JSXChildren,
 } from "kerfjs";
 
 // Optional, only when you need granular collection updates:
@@ -114,6 +115,7 @@ if (import.meta.env.DEV) await import("kerfjs/dev");
 | `attr(name)`                                 | dynamic factory — `attr<N,V=string>(name)` returns `(value: V) => { readonly [name]: V }`; both generics off → N inferred, V defaults to string; specify both to constrain values                                                                                                                         |
 | `toElement(jsx)`                             | parse JSX into a DOM node (SVG-aware). Single-root → `Element`; multi-root (`<><svg/> label</>`, two icons side by side) → `DocumentFragment` that `appendChild`/`replaceChildren`/`append` inlines into the parent.                                                                                      |
 | `raw(html)`                                  | inject pre-escaped HTML                                                                                                                                                                                                                                                                                   |
+| `JSXChildren`                                | recursive type for general-purpose component `children`: SafeHtml, primitives, read-only signals, nullish/boolean empty values, and readonly arrays at any depth. Use a narrower union for semantically restricted slots                                                                                  |
 | `arraySignal(initial?)`                      | granular keyed-list signal at `kerfjs/array-signal` subpath; `each()` reconciles in O(patches)                                                                                                                                                                                                            |
 | `` html`…` ``                                | tagged template at `kerfjs/html` subpath — JSX-identical runtime semantics with NO build step (CDN/importmap projects). Real HTML attribute names (`class`, not `className`); holes only in text positions or as a COMPLETE attribute value (`attr=${v}` / `attr="${v}"`)                                 |
 

package/ai/manifest.json

@@ -1,13 +1,13 @@
 {
-  "kerfjsVersion": "5.0.0-beta.29",
+  "kerfjsVersion": "5.0.0-beta.30",
   "files": [
     {
       "name": "skill",
       "source": "kerf.claude-skill.md",
       "bundle": "ai/skill.md",
       "dest": ".claude/skills/kerf-app/SKILL.md",
-      "version": "1.22.0",
-      "sha256": "dc99b0ca5e911be11cbfa2ae515c0e161a414a5185895069535c41ba56664e70",
+      "version": "1.23.0",
+      "sha256": "28b82b4d31b98814c8fbbe1cb0bcf716192deb494c020b9af41a30830e6a0007",
       "history": {
         "1.0.0": "bef982cb743fd4c73e666ee5cf774112e57c93ebb13b24bbacbf08577db0930a",
         "1.1.0": "f2aadb21e33dd389028951ae1ecbd9f8ba68648b3c5beba43fb4dfa2ab29f195",
@@ -36,7 +36,8 @@
         "1.19.0": "bbbe87446cc4e1be250d27152adfd385431f4498cde320534f65f10f853ab7f9",
         "1.20.0": "aa88ccdbf969624bbc6cefadba76ada1f090fae436597a7bab564e24c467287f",
         "1.21.0": "265b747eeb9c3d445c60d66a1109eec42705075b7cd154d107bd79d543c1e7e5",
-        "1.22.0": "dc99b0ca5e911be11cbfa2ae515c0e161a414a5185895069535c41ba56664e70"
+        "1.22.0": "dc99b0ca5e911be11cbfa2ae515c0e161a414a5185895069535c41ba56664e70",
+        "1.23.0": "28b82b4d31b98814c8fbbe1cb0bcf716192deb494c020b9af41a30830e6a0007"
       }
     },
     {
@@ -44,8 +45,8 @@
       "source": "kerf.cursorrules",
       "bundle": "ai/cursorrules",
       "dest": ".cursorrules",
-      "version": "1.20.0",
-      "sha256": "5e7b8d8ddc41f60220961417c9ae01c193fae045378a10a3e9c96a0e3cf10a03",
+      "version": "1.21.0",
+      "sha256": "a1b663b44650b1a04f89c60b26b002322fc6789650291477e14e13329c3ce25f",
       "history": {
         "1.0.0": "98f7faff2b7585ef9cc511add42ea5d9bf0cbae8307b066af090e9281136d2ab",
         "1.1.0": "a2ec8c221dc694c98b81009cd2d99f9159a45fda94585de2f54471b227099eda",
@@ -72,7 +73,8 @@
         "1.17.0": "6ad51fb0eec468f584346d1d7b4d1c2eca2cb52b04891b38ba44e93b57eb9e1c",
         "1.18.0": "de3eea1bc181da629694d19a0817d252a868e4704437fbdd9e923856b8a0890a",
         "1.19.0": "c5b91e449f6feccaa36a04cb7f8550d3e414eb2795ea6c5dccdf6071206b3261",
-        "1.20.0": "5e7b8d8ddc41f60220961417c9ae01c193fae045378a10a3e9c96a0e3cf10a03"
+        "1.20.0": "5e7b8d8ddc41f60220961417c9ae01c193fae045378a10a3e9c96a0e3cf10a03",
+        "1.21.0": "a1b663b44650b1a04f89c60b26b002322fc6789650291477e14e13329c3ce25f"
       }
     }
   ]

package/ai/skill.md

@@ -1,7 +1,7 @@
 ---
 name: kerf-app
 description: Build UIs in the kerf reactive framework and its @kerfjs/ui component package (https://github.com/brianwestphal/kerf). Use this skill whenever the user is writing or modifying code that imports `kerfjs` or `@kerfjs/ui`, asks to add a feature to a kerf app, or asks "how do I do X in kerf?". Use it proactively the moment you spot a kerf import in the file you're editing.
-kerf-skill-version: 1.22.0
+kerf-skill-version: 1.23.0
 ---
 
 # Building apps with kerf
@@ -93,6 +93,7 @@ import {
   isSafeHtml,
   raw,
   Fragment,
+  type JSXChildren,
 } from "kerfjs";
 
 // Optional, only when you need granular collection updates:
@@ -120,6 +121,7 @@ if (import.meta.env.DEV) await import("kerfjs/dev");
 | `attr(name)`                                 | dynamic factory — `attr<N,V=string>(name)` returns `(value: V) => { readonly [name]: V }`; both generics off → N inferred, V defaults to string; specify both to constrain values                                                                                                                         |
 | `toElement(jsx)`                             | parse JSX into a DOM node (SVG-aware). Single-root → `Element`; multi-root (`<><svg/> label</>`, two icons side by side) → `DocumentFragment` that `appendChild`/`replaceChildren`/`append` inlines into the parent.                                                                                      |
 | `raw(html)`                                  | inject pre-escaped HTML                                                                                                                                                                                                                                                                                   |
+| `JSXChildren`                                | recursive type for general-purpose component `children`: SafeHtml, primitives, read-only signals, nullish/boolean empty values, and readonly arrays at any depth. Use a narrower union for semantically restricted slots                                                                                  |
 | `arraySignal(initial?)`                      | granular keyed-list signal (subpath `kerfjs/array-signal`); `each()` reconciles in O(patches)                                                                                                                                                                                                             |
 | `` html`…` ``                                | tagged template (subpath `kerfjs/html`) — JSX-identical runtime semantics with NO build step, for CDN/importmap projects. Real HTML attribute names (`class`, not `className`); holes only in text positions or as a COMPLETE attribute value (`attr=${v}` / `attr="${v}"`)                               |
 

package/dist/{chunk-V757BT6U.js → chunk-DLY444MN.js}

@@ -1,6 +1,6 @@
 import { itemVersion } from './chunk-5WRGJZV6.js';
 import { parseRowTemplate, rowContractError, parseSingleRow, collectTemplateChildren } from './chunk-WKIPLNVO.js';
-import { captureRowBindings, listSafeHtml, boundTextNodeOf, syncFormProp, newBindingContext, disposeRowBindings, wireBindings, isSafeHtml, _setBindingContext, TEXT_MARKER_PREFIX, ROW_TEXT_PREFIX, wireRowBindings, carryOrRewireRowBindings, granularListSafeHtml } from './chunk-QFUNWHKH.js';
+import { captureRowBindings, listSafeHtml, boundTextNodeOf, syncFormProp, newBindingContext, disposeRowBindings, wireBindings, isSafeHtml, _setBindingContext, TEXT_MARKER_PREFIX, ROW_TEXT_PREFIX, wireRowBindings, carryOrRewireRowBindings, granularListSafeHtml } from './chunk-JRKE6XEK.js';
 import { effect } from './chunk-Y2FOYPBV.js';
 import { LIST_MARKER_PREFIX, flattenWithoutListItems, collectLists, flatten } from './chunk-BDX3R4OM.js';
 import { devHooks } from './chunk-CEQMZYLR.js';
@@ -1497,4 +1497,4 @@ function collectComments(node, out) {
 
 export { captureFocus, each, morph, mount, moveNode, restoreFocus };
 
-//# sourceMappingURL=chunk-V757BT6U.js.map
+//# sourceMappingURL=chunk-DLY444MN.js.map