@kerfjs/ui 5.0.0-beta.31 → 5.0.0-beta.32

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.31` and `kerfjs@5.0.0-beta.31`. 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.32` and `kerfjs@5.0.0-beta.32`. 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

@@ -129,7 +129,7 @@ Hard rules:
 14. Treat the complete Web Awesome catalog as support coverage, not a recommendation list. Its UX sidebar marks superseded and exceptional entries `Discouraged`. Consider Popup when it replaces custom anchored positioning. Prefer Kerf `Select` over direct Dropdown/Dropdown Item/Select/Option composition, `SegmentedControl` over Button Group, `TabBar` or `SegmentedControl` over Web Awesome Tabs, `LucideIcon` over Web Awesome Icon, and `ResizableRegion` over Split Panel. Use Tree/Tree Item, Animated Image, and Comparison only for a specific required behavior; avoid Zoomable Frame.
 15. Build sidebars, main areas, inspectors, and dialogs from `@kerfjs/ui/layout.css`: an unpadded `.kui-pane`, optional `.kui-pane__toolbar`, one scrolling `.kui-pane__content`, and optional `.kui-pane__footer`. Use `List` instead of a hand-written flex-column wrapper when rows or sections need stretch alignment, standard/custom gap, flex growth, one vertical scroll owner, or physical-edge dividers; `dividerSides` uses canonical `t`/`r`/`b`/`l` order. A dialog body is generally a `List`: set `DialogSurface bodyInset="none"` when its list children own geometry, and wrap bare dialog prose in `ListInsetText` so it aligns with bordered siblings without a second inset. Add `.kui-content` for 24px major vertical separation and `.kui-content-item` for a child-owned 8px inline margin, 1px transparent-or-visible border, 8px padding, and 12px radius. Use the pill modifier for 22px. Do not pad pane shells, duplicate item geometry in wrappers, or create nested scroll owners.
 16. Keep a visible collapsible pane's collapse control in its own toolbar. When hidden, move its restore control into the adjacent main toolbar on the corresponding logical edge: leading for an inline-start sidebar and trailing for an inline-end inspector. Collapse the pane completely; do not preserve an empty icon-only rail.
-17. The only direct children of a `Toolbar` zone (`leading`/`center`/`trailing`) are `ToolbarText` (identity/title text) and `ToolbarControlGroup`; never drop bare buttons, inputs, links, or arbitrary markup straight into a zone. Put identity/title text directly in the zone as `ToolbarText`; wrap interactive controls and icon tiles in `ToolbarControlGroup`. `SegmentedControl`, `Select`, a collapsible `TokenSearchField`, and Web Awesome controls all live inside a group. For an ordinary icon/action control inside a group, use a plain `<button>` (the group styles `> button` fully) — that is the default; reach for `wa-button` only when you need a Web Awesome feature, chiefly a `wa-dropdown` popup trigger. A popup menu in a toolbar is a `single` group wrapping a `wa-dropdown` whose `slot="trigger"` `wa-button` is the toolbar button and whose `wa-dropdown-item`s are the menu, with the dropdown kept under `data-morph-skip-children`. For an avatar control, set `content="avatar"` and `avatarImage` on the group instead of inserting an `img`: a lone control paints the contained image on the outer group and a multi-button group paints it only on the pressed selection highlight. Compose panel/dialog/page headings with a direct extra-large `ToolbarText`, optional grouped icon, grouped trailing controls, and app-owned supporting copy below. A group remains 44px outside (`calc(2px + remify(42px))`) when its border/background are transparent; use 8px between groups and inside items. Split dormant and interactive regions: `ListHeader` fills the available inline width and keeps its label and mutually exclusive semantic count or non-count `badge` together, with an independent logical-end 44px action unless disclosure mode makes the title cluster the button. Its action visual defaults to 18px through `--kui-list-header-action-icon-size`; never shrink the target to match it. Pass every non-negative safe-integer section quantity through `count` with a localized full spoken `countLabel`; never concatenate it into `label` or put a number in `badge`. `ListItem.trailing` is dormant; use `ListActionRow` when primary and trailing actions need sibling 44px native buttons. Its `label`, `icon`, and `trailingActionIcon` slots are also dormant and cannot contain controls. Let panes relocate at narrow widths instead of shrinking targets.
+17. The only direct children of a `Toolbar` zone (`leading`/`center`/`trailing`) are `ToolbarText` (identity/title text) and `ToolbarControlGroup`; never drop bare buttons, inputs, links, or arbitrary markup straight into a zone. Put identity/title text directly in the zone as `ToolbarText`; wrap interactive controls and icon tiles in `ToolbarControlGroup`. `SegmentedControl`, `Select`, a collapsible `TokenSearchField`, and Web Awesome controls all live inside a group. For an ordinary icon/action control inside a group, use a plain `<button>` (the group styles `> button` fully) — that is the default; reach for `wa-button` only when you need a Web Awesome feature, chiefly a `wa-dropdown` popup trigger. A popup menu in a toolbar is a `single` group wrapping a `wa-dropdown` whose `slot="trigger"` `wa-button` is the toolbar button and whose `wa-dropdown-item`s are the menu, with the dropdown kept under `data-morph-skip-children`. For a compact mixed group, keep the standard item padding and raised selected chrome; the selected item paints over the outer border without an internal separator. For an avatar control, set `content="avatar"` and `avatarImage` on the group instead of inserting an `img`: a lone control paints the contained image on the outer group and a multi-button group paints it only on the pressed selection highlight. Compose panel/dialog/page headings with a direct extra-large `ToolbarText`, optional grouped icon, grouped trailing controls, and app-owned supporting copy below. A group remains 44px outside (`calc(2px + remify(42px))`) when its border/background are transparent; use 8px between groups and inside items. Split dormant and interactive regions: `ListHeader` fills the available inline width and keeps its label and mutually exclusive semantic count or non-count `badge` together, with an independent logical-end 44px action unless disclosure mode makes the title cluster the button. Its action visual defaults to 18px through `--kui-list-header-action-icon-size`; never shrink the target to match it. Pass every non-negative safe-integer section quantity through `count` with a localized full spoken `countLabel`; never concatenate it into `label` or put a number in `badge`. `ListItem.trailing` is dormant; use `ListActionRow` when primary and trailing actions need sibling 44px native buttons. Its `label`, `icon`, and `trailingActionIcon` slots are also dormant and cannot contain controls. Let panes relocate at narrow widths instead of shrinking targets.
 18. When a recurring concept has no matching export or production recipe, keep its semantics in a thin application adapter while reusing the public layout vocabulary. The composer recipe uses one visible form surface, toolbar title/supporting-copy ids, shared 8px field/action gutters, 24px major rhythm, and a conditional StateBanner as its only nested semantic surface; do not turn every section into a card or double-inset intrinsically bordered controls. The application-local `../docs/examples/command-palette-adapter.tsx` is reference source for one such missing concept, not an `@kerfjs/ui` runtime export or catalog recipe. The application owns its registration, ranking, history, permissions, availability, shortcut policy, focus policy, dispatch, and copy. If a missing concept recurs across products, open an upstream component or recipe request.
 19. Compose `ValueTable` from typed `ValueTableRow` entries instead of handwritten `dt`/`dd` wrappers. Pass `icon` for the optional 24px leading visual; the row owns 8px of root-scaled top and bottom padding, the 8px iconless or 40px icon-bearing separator start, and the common 8px right inset.
 20. Use the standard direct `Toolbar` composition for a panel, dialog, or page heading, not a private wrapper or custom heading row. Put an optional icon in a `ToolbarControlGroup`, the title directly in the leading zone as extra-large `ToolbarText`, and actions in a trailing group. Set `headingLevel` for page/section landmarks. Supporting copy stays below the toolbar as app-owned content. The app owns modal behavior, focus, dismissal, command policy, ids, and action handling.

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.31` 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.32` 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/toolbar-control-group.css

@@ -73,13 +73,6 @@
   display: flex;
   gap: var(--kui-space-xs);
 }
-.kui-toolbar-control-group[data-content="mixed"] {
-  gap: 0.5rem;
-}
-.kui-toolbar-control-group[data-content="mixed"] > wa-dropdown {
-  padding-inline-start: 0.375rem;
-  border-inline-start: 1px solid var(--kui-toolbar-control-border);
-}
 .kui-toolbar-control-group[data-content="avatar"][data-scrim="true"] {
   --kui-toolbar-control-background: color-mix(
     in srgb,
@@ -193,6 +186,22 @@
   min-height: 2rem;
 }
 
+/* Compact mixed controls keep the default horizontal breathing room. Their
+   raised selection grows over the group's own border instead of becoming a
+   smaller inset lozenge, while negative margins keep the outer geometry and
+   neighboring trigger position stable. */
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"] {
+  --kui-layout-item-padding: 0.5rem;
+}
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
+  > button[aria-pressed="true"] {
+  position: relative;
+  z-index: 1;
+  height: var(--kui-toolbar-group-size);
+  margin: -2px;
+  border-radius: var(--kui-toolbar-group-radius);
+}
+
 /* A compact icon-only trigger may stay square, but a mixed-content dropdown
    trigger must grow for its slotted label plus Web Awesome's caret. Otherwise
    the fixed 32px base centers both outside its host, painting the label across
@@ -247,13 +256,13 @@
 
 .kui-toolbar-control-group wa-button:hover::part(base) {
   border-color: var(--kui-toolbar-control-border);
-  background: var(--kui-toolbar-control-hover-background);
+  background-color: var(--kui-toolbar-control-hover-background);
 }
 
 .kui-toolbar-control-group[data-single="true"]:has(
     > :is(button, wa-button, wa-dropdown)
   ):hover {
-  background: var(--kui-toolbar-control-hover-background);
+  background-color: var(--kui-toolbar-control-hover-background);
 }
 
 .kui-toolbar-control-group[data-single="true"] > :is(button, wa-button):hover,
@@ -269,7 +278,7 @@
 .kui-toolbar-control-group:not([data-single="true"]):has(
     > :is(button, wa-button):only-child
   ):hover {
-  background: var(--kui-toolbar-control-hover-background);
+  background-color: var(--kui-toolbar-control-hover-background);
 }
 
 .kui-toolbar-control-group:not([data-single="true"]):has(

package/dist/styles/webawesome.css

@@ -298,6 +298,9 @@
   wa-card::part(footer) {
     border-top: none;
     padding: var(--kui-wa-container-inset);
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--kui-layout-item-gap, 0.5rem);
   }
 
   /* Dialog content follows the compact surface inset, while its action region
@@ -314,6 +317,9 @@
 
   wa-dialog::part(footer) {
     padding: var(--kui-wa-container-inset);
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--kui-layout-item-gap, 0.5rem);
   }
 
   /* Dialogs that provide their own dismissal affordance can opt out of Web

package/docs/component-contract.md

@@ -299,8 +299,10 @@ free of a Web Awesome dependency and shadow DOM. Reach for `wa-button` only when
 you need a Web Awesome feature, chiefly the `slot="trigger"` button of a
 `wa-dropdown` popup menu. For a compact mixed-content group, set
 `nestedDropdown`; a text-and-caret trigger grows to its intrinsic width while an
-icon-only trigger can remain square, keeping the separator and caret inside the
-group. The short text trigger has an engine-stable 66px floor because WebKit
+icon-only trigger can remain square. Compact mixed controls retain the standard
+item padding, omit an internal separator, and let the raised selected item paint
+over the outer border instead of shrinking to an inset highlight. The short text
+trigger has an engine-stable 66px floor because WebKit
 does not include the shadow caret in the custom-element host's intrinsic width;
 raise `--kui-toolbar-dropdown-trigger-width` for longer localized copy.
 `ListHeader` similarly separates its dormant title and

package/llms.txt

@@ -138,7 +138,9 @@ maintain a central style list. Configure JSX with `"jsxImportSource": "kerfjs"`.
   need a Web Awesome feature, chiefly the `slot="trigger"` button of a `wa-dropdown`
   popup menu. A toolbar popup menu is a `single` `ToolbarControlGroup` around a
   `wa-dropdown` (its `slot="trigger"` `wa-button` is the toolbar button, kept under
-  `data-morph-skip-children`). For an avatar control, set `content="avatar"` and
+  `data-morph-skip-children`). Compact mixed groups keep standard item padding
+  and raised selected chrome without an internal separator; the selected item
+  paints over the outer border. For an avatar control, set `content="avatar"` and
   `avatarImage` on the group instead of inserting an `img`; a lone control paints
   the group and a multi-button group paints only its pressed highlight.
 - **Use one direct toolbar composition for panel/dialog/page headings.** Put an

package/package.json

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