@kerfjs/ui 5.0.0-beta.55 → 5.0.0-beta.57

package/ai/component-catalog.json

@@ -33,11 +33,11 @@
         "neutral, brand, pop, success, warning, or danger tone",
         "quiet, solid, or outline appearance",
         "pill or rounded shape",
-        "compact or default size",
+        "compact or default size, or a text-free dot (size: 'dot')",
         "labeled or decorative duplicate"
       ],
       "accessibility": [
-        "Badge is non-interactive. Supply label when visible content is abbreviated, and ariaHidden when it repeats an accessible name owned by the surrounding component.",
+        "Badge is non-interactive. Supply label when visible content is abbreviated, and ariaHidden when it repeats an accessible name owned by the surrounding component. A text-free dot must take either label (exposed as an image) or ariaHidden, which the types enforce.",
         "Keep meaningful text visible because tone is supplementary."
       ],
       "geometry": {
@@ -133,6 +133,31 @@
       "publicExports": [
         "DisclosureArrow"
       ],
+      "cssValueProps": [
+        {
+          "path": "size",
+          "grammar": "length",
+          "helpers": [
+            "px",
+            "rem",
+            "em",
+            "pct",
+            "space",
+            "lengthVar",
+            "calc"
+          ],
+          "nonStandaloneHelpers": [
+            "plus"
+          ],
+          "shorthands": [],
+          "canonicalShorthands": [],
+          "exceptionalShorthands": [],
+          "rawPolicy": "forbid",
+          "examples": [
+            "size={remify(24)}"
+          ]
+        }
+      ],
       "useWhen": [
         "Add a shortest-path rotating indicator to a control that owns open and closed state; author replacement icon content facing right before direction transforms are applied."
       ],
@@ -331,18 +356,6 @@
         "--kui-color-danger-on-normal",
         "--kui-color-danger-on-loud",
         "--kui-color-danger-on-fill",
-        "--kui-color-border",
-        "--kui-color-border-quiet",
-        "--kui-color-accent",
-        "--kui-color-accent-text",
-        "--kui-color-pop",
-        "--kui-color-pop-text",
-        "--kui-color-success",
-        "--kui-color-success-text",
-        "--kui-color-warning",
-        "--kui-color-warning-text",
-        "--kui-color-danger",
-        "--kui-color-danger-text",
         "--kui-focus-ring",
         "--kui-shadow-s",
         "--kui-shadow-l"
@@ -407,6 +420,9 @@
       "publicClasses": [
         "kui-app-root"
       ],
+      "placeableClasses": [
+        "kui-app-root"
+      ],
       "publicTokens": [],
       "links": {
         "catalogRoute": "?component=document-baseline",
@@ -421,7 +437,9 @@
       "kind": "composition",
       "source": "kerf",
       "description": "Unpadded panes, 24px content stacks, and self-contained 8/1/8 content items for application layout boundaries.",
-      "uses": [],
+      "uses": [
+        "content-item"
+      ],
       "purpose": "Provide one reusable pane, toolbar, content stack, and content-item geometry across sidebars, main areas, and dialogs.",
       "publicExports": [],
       "useWhen": [
@@ -442,8 +460,6 @@
       "variants": [
         "toolbar + content",
         "toolbar + content + footer",
-        "rounded content item",
-        "pill content item",
         "hidden inline-start pane restored from main-toolbar leading",
         "hidden inline-end pane restored from main-toolbar trailing"
       ],
@@ -465,8 +481,12 @@
       "wiring": [],
       "publicClasses": [
         "kui-content",
-        "kui-content-item",
-        "kui-content-item--pill",
+        "kui-control-cluster",
+        "kui-inline-metadata",
+        "kui-scroll-owner"
+      ],
+      "placeableClasses": [
+        "kui-content",
         "kui-control-cluster",
         "kui-inline-metadata",
         "kui-scroll-owner"
@@ -497,11 +517,13 @@
       "uses": [],
       "purpose": "Organize a sidebar, main area, inspector, or dialog column into fixed vertical header/footer chrome around one scrolling content owner.",
       "publicExports": [
-        "Pane"
+        "Pane",
+        "wireScrollDividers"
       ],
       "useWhen": [
         "An application column needs shared header, content, and optional footer organization with exactly one scrolling content owner.",
-        "A pane boundary needs an opt-in separator on any combination of logical sides."
+        "A pane boundary needs an opt-in separator on any combination of logical sides.",
+        "Pinned chrome needs a divider from the scrolling content only while content is scrolled beneath it (wireScrollDividers)."
       ],
       "avoidWhen": [
         "Do not use Pane as a padded card or add a competing scroll owner around its content slot.",
@@ -520,7 +542,8 @@
         "header, content, and footer children",
         "which logical boundaries show separators",
         "which sides may compensate for device safe areas in an app-owned arrangement (safeAreaEdges)",
-        "responsive placement and visibility"
+        "responsive placement and visibility",
+        "whether the chrome dividers follow the scroll, always show, or never show (chromeDividers)"
       ],
       "variants": [
         "content only",
@@ -529,7 +552,9 @@
         "block-start separator",
         "block-end separator",
         "inline-start separator",
-        "inline-end separator"
+        "inline-end separator",
+        "chrome dividers only while scrolled (default, wired by wireScrollDividers)",
+        "always or no chrome dividers"
       ],
       "accessibility": [
         "Choose semantic root and content elements that match the region and provide labels for landmark elements.",
@@ -551,7 +576,25 @@
           "browser-condition-css"
         ]
       },
-      "wiring": [],
+      "wiring": [
+        {
+          "export": "wireScrollDividers",
+          "import": "@kerfjs/ui/wire-scroll-dividers",
+          "required": false,
+          "stateAttributes": [
+            {
+              "name": "data-scroll-overflow",
+              "on": "kui-pane__content",
+              "meaning": "The physical edges, in canonical t/r/b/l order, beyond which content is scrolled out of view; absent when nothing is hidden (content that fits never reports its far edges). Re-applied if a re-render drops it."
+            },
+            {
+              "name": "data-scroll-divider",
+              "on": "kui-pane__header and kui-pane__footer",
+              "meaning": "The sides, in t/r/b/l order, on which this chrome currently draws its scroll divider: the side facing the scroller while content is hidden beyond it. Re-applied if a re-render drops it."
+            }
+          ]
+        }
+      ],
       "publicClasses": [
         "kui-pane",
         "kui-pane__content",
@@ -581,11 +624,14 @@
       "source": "kerf",
       "description": "A controlled one-pane navigation stack that keeps prior views mounted, slides content on push and pop, cross-fades per-view chrome, and moves/restores focus.",
       "uses": [
+        "toolbar",
+        "toolbar-control-group",
         "toolbar-text"
       ],
       "purpose": "Present a single linear or drill-down flow while preserving each prior view's state, scroll position, and place in the stack.",
       "publicExports": [
         "NavStackView",
+        "NavStackToolbarConfig",
         "NavStackProps",
         "NavStack"
       ],
@@ -614,17 +660,25 @@
         "view content and titles",
         "push and pop actions",
         "preferred initial focus targets when DOM order is insufficient",
-        "per-view bottom toolbar content or a persistent fallback"
+        "per-view bottom toolbar content or a persistent fallback",
+        "per-view leading, center, and trailing top-toolbar groups",
+        "top-toolbar configuration, title size, and heading level",
+        "whether the chrome and bottom-toolbar dividers follow the scroll, always show, or never show (chromeDividers)"
       ],
       "variants": [
         "single root view",
         "pushed detail view",
         "toolbar hidden",
+        "configured top toolbar",
+        "custom back icon or visible back text",
         "per-view bottom toolbar",
-        "persistent bottom-toolbar fallback"
+        "persistent bottom-toolbar fallback",
+        "chrome and bottom-toolbar dividers only while the active view scrolls beneath them (wired by wireScrollDividers)",
+        "permanent or no chrome dividers (chromeDividers always or none)"
       ],
       "accessibility": [
-        "Give the stack region an accessible label and every back control a stable action label.",
+        "Give the stack region an accessible label and every back control a stable action label; visible backText names the control itself.",
+        "Set toolbarConfig.headingLevel when the view title is the page's or section's heading landmark.",
         "Use wireNavStack so each controlled push moves focus into the new top view and each pop restores the revealed view's remembered descendant.",
         "Mark a preferred initial heading or control with data-nav-focus when the first enabled focusable descendant is not the right target."
       ],
@@ -633,14 +687,16 @@
         "border": "conditional",
         "padding": "child",
         "notes": [
-          "The stack owns its full-height chrome and viewport; each view owns its internal content padding and scrollable content."
+          "The stack owns its full-height chrome and viewport; each view owns its internal content padding and scrollable content.",
+          "The top chrome's bottom line and the bottom toolbar's top line are scroll state (wireScrollDividers), drawn as an overlaid 1px pseudo-element on the chrome and the bottom toolbar's always-present 1px top border, so neither moves the chrome or the content."
         ]
       },
       "delivery": {
         "moduleImport": "@kerfjs/ui/nav-stack",
+        "browserImport": "@kerfjs/ui/nav-stack",
         "manualCssImport": "@kerfjs/ui/nav-stack.css",
         "sideEffects": [
-          "manual-css"
+          "browser-condition-css"
         ]
       },
       "wiring": [
@@ -665,6 +721,23 @@
               "meaning": "\"true\" on a popped view the helper briefly re-inserts to slide it out."
             }
           ]
+        },
+        {
+          "export": "wireScrollDividers",
+          "import": "@kerfjs/ui/wire-scroll-dividers",
+          "required": false,
+          "stateAttributes": [
+            {
+              "name": "data-scroll-overflow",
+              "on": "the active kui-nav-stack__view, or the kui-pane__content of a sole Pane in it",
+              "meaning": "The physical edges, in canonical t/r/b/l order, beyond which content is scrolled out of view; absent when nothing is hidden (content that fits never reports its far edges). Re-applied if a re-render drops it."
+            },
+            {
+              "name": "data-scroll-divider",
+              "on": "kui-nav-stack__chrome and kui-nav-stack__bottom",
+              "meaning": "The sides, in t/r/b/l order, on which this chrome currently draws its scroll divider: the side facing the scroller while content is hidden beyond it. Re-applied if a re-render drops it."
+            }
+          ]
         }
       ],
       "publicClasses": [
@@ -675,11 +748,6 @@
         "kui-nav-stack__chrome-copy",
         "kui-nav-stack__chrome-copy--bottom",
         "kui-nav-stack__chrome-copy--exiting",
-        "kui-nav-stack__lead",
-        "kui-nav-stack__back",
-        "kui-nav-stack__back-icon",
-        "kui-nav-stack__title",
-        "kui-nav-stack__actions",
         "kui-nav-stack__viewport",
         "kui-nav-stack__view",
         "kui-nav-stack__view--entering",
@@ -709,7 +777,9 @@
       "publicExports": [
         "SplitView",
         "SplitViewProps",
-        "SplitViewResizable"
+        "SplitViewResizable",
+        "SplitViewCompactStack",
+        "SplitViewCompactViewToolbars"
       ],
       "useWhen": [
         "Selection in a primary list updates a related detail pane and both should remain visible on roomy device classes.",
@@ -736,13 +806,17 @@
         "selected item and detail-active state",
         "list and detail content",
         "optional list width and persistence",
+        "optional list collapse state and its restore control",
+        "compact list and detail toolbar groups, toolbar configuration, and chrome dividers",
         "back action"
       ],
       "variants": [
         "fixed roomy split",
         "resizable roomy split",
+        "collapsed resizable list with a restore control",
         "compact list",
-        "compact detail"
+        "compact detail",
+        "compact stack with configured toolbars"
       ],
       "accessibility": [
         "Give the overall split and both meaningful panes accessible labels.",
@@ -758,9 +832,10 @@
       },
       "delivery": {
         "moduleImport": "@kerfjs/ui/split-view",
+        "browserImport": "@kerfjs/ui/split-view",
         "manualCssImport": "@kerfjs/ui/split-view.css",
         "sideEffects": [
-          "manual-css"
+          "browser-condition-css"
         ]
       },
       "wiring": [
@@ -826,7 +901,9 @@
       "kind": "component",
       "source": "kerf",
       "description": "A controlled compact-device bottom tab scaffold that keeps every tab scene mounted so its navigation and scroll state survive selection changes.",
-      "uses": [],
+      "uses": [
+        "badge"
+      ],
       "purpose": "Switch among two to five co-equal top-level destinations on compact devices while preserving each destination's independent content state.",
       "publicExports": [
         "TabScaffoldTab",
@@ -856,31 +933,39 @@
       "appOwns": [
         "controlled active tab id",
         "tab labels, icons, and content",
+        "tab badge counts or dots and their localized badgeLabel phrases",
         "routing and persistence",
-        "responsive replacement on larger device classes"
+        "responsive replacement on larger device classes",
+        "whether the bar divider follows the scroll, always shows, or never shows (chromeDividers)"
       ],
       "variants": [
         "text-only tabs",
         "icon and text tabs",
-        "one NavStack per tab"
+        "badged tabs (count or text-free dot)",
+        "one NavStack per tab",
+        "bar divider only while the active scene continues below it (wired by wireScrollDividers)",
+        "permanent or no bar divider (chromeDividers always or none)"
       ],
       "accessibility": [
         "Give the tablist an accessible label and keep exactly the active tab in the sequential focus order.",
-        "Wire selection through the controlled active id while leaving inactive scenes mounted and hidden."
+        "Wire selection through the controlled active id while leaving inactive scenes mounted and hidden.",
+        "A tab badge is aria-hidden; supply badgeLabel so the tab's accessible name becomes \"<label>, <badgeLabel>\" (it defaults to the badge text). The dot form, badge: true, has no text, so its badgeLabel is required."
       ],
       "geometry": {
         "margin": "none",
-        "border": "self",
+        "border": "conditional",
         "padding": "self",
         "notes": [
-          "The scaffold owns the full-height scene region and safe-area-aware bottom bar; scene content owns its internal geometry."
+          "The scaffold owns the full-height scene region and safe-area-aware bottom bar; scene content owns its internal geometry.",
+          "The bar's top line is scroll state (wireScrollDividers): it shows only while the active scene's content continues below the bar, by coloring the bar's always-present 1px top border."
         ]
       },
       "delivery": {
         "moduleImport": "@kerfjs/ui/tab-scaffold",
+        "browserImport": "@kerfjs/ui/tab-scaffold",
         "manualCssImport": "@kerfjs/ui/tab-scaffold.css",
         "sideEffects": [
-          "manual-css"
+          "browser-condition-css"
         ]
       },
       "wiring": [
@@ -888,6 +973,23 @@
           "export": "wireTabScaffold",
           "import": "@kerfjs/ui/wire-tab-scaffold",
           "required": true
+        },
+        {
+          "export": "wireScrollDividers",
+          "import": "@kerfjs/ui/wire-scroll-dividers",
+          "required": false,
+          "stateAttributes": [
+            {
+              "name": "data-scroll-overflow",
+              "on": "the active kui-tab-scaffold__scene, or what scrolls inside it (a sole NavStack's active view or a sole Pane's content)",
+              "meaning": "The physical edges, in canonical t/r/b/l order, beyond which content is scrolled out of view; absent when nothing is hidden (content that fits never reports its far edges). Re-applied if a re-render drops it."
+            },
+            {
+              "name": "data-scroll-divider",
+              "on": "kui-tab-scaffold__bar",
+              "meaning": "The sides, in t/r/b/l order, on which this chrome currently draws its scroll divider: the side facing the scroller while content is hidden beyond it. Re-applied if a re-render drops it."
+            }
+          ]
         }
       ],
       "publicClasses": [
@@ -897,6 +999,7 @@
         "kui-tab-scaffold__bar",
         "kui-tab-scaffold__tab",
         "kui-tab-scaffold__tab-icon",
+        "kui-tab-scaffold__tab-badge",
         "kui-tab-scaffold__tab-label"
       ],
       "publicTokens": [],
@@ -967,7 +1070,8 @@
         "clipped, scrolling, or popup-visible content",
         "inline, overlay, or hidden responsive presentation",
         "narrow or compact single-track responsive fill",
-        "safe-area restore control"
+        "safe-area restore control",
+        "chrome dividers only while scrolled (wired by wireScrollDividers)"
       ],
       "accessibility": [
         "Give the Workbench and each meaningful rail or drawer an accessible label.",
@@ -986,9 +1090,10 @@
       },
       "delivery": {
         "moduleImport": "@kerfjs/ui/workbench",
+        "browserImport": "@kerfjs/ui/workbench",
         "manualCssImport": "@kerfjs/ui/workbench.css",
         "sideEffects": [
-          "manual-css"
+          "browser-condition-css"
         ]
       },
       "wiring": [
@@ -1008,6 +1113,23 @@
               "meaning": "Present on a resizable rail or the drawer while a pointer drag resizes it."
             }
           ]
+        },
+        {
+          "export": "wireScrollDividers",
+          "import": "@kerfjs/ui/wire-scroll-dividers",
+          "required": false,
+          "stateAttributes": [
+            {
+              "name": "data-scroll-overflow",
+              "on": "kui-pane__content of each panel and work-area Pane",
+              "meaning": "The physical edges, in canonical t/r/b/l order, beyond which content is scrolled out of view; absent when nothing is hidden (content that fits never reports its far edges). Re-applied if a re-render drops it."
+            },
+            {
+              "name": "data-scroll-divider",
+              "on": "kui-pane__header and kui-pane__footer of each panel and work-area Pane",
+              "meaning": "The sides, in t/r/b/l order, on which this chrome currently draws its scroll divider: the side facing the scroller while content is hidden beyond it. Re-applied if a re-render drops it."
+            }
+          ]
         }
       ],
       "publicClasses": [
@@ -1100,7 +1222,8 @@
         "hidden separator",
         "slide, fade-slide, or instant content",
         "clipped, scrolling, or popup-visible content",
-        "safe-area restore control"
+        "safe-area restore control",
+        "chrome dividers only while scrolled (wired by wireScrollDividers)"
       ],
       "accessibility": [
         "Give the panel region and every collapse or restore control an accessible label.",
@@ -1116,9 +1239,10 @@
       },
       "delivery": {
         "moduleImport": "@kerfjs/ui/collapsible-panel",
+        "browserImport": "@kerfjs/ui/collapsible-panel",
         "manualCssImport": "@kerfjs/ui/collapsible-panel.css",
         "sideEffects": [
-          "manual-css"
+          "browser-condition-css"
         ]
       },
       "wiring": [
@@ -1143,6 +1267,23 @@
               "meaning": "Keeps the injected compact-overlay backdrop through the application's re-render; the helper creates and removes the backdrop itself."
             }
           ]
+        },
+        {
+          "export": "wireScrollDividers",
+          "import": "@kerfjs/ui/wire-scroll-dividers",
+          "required": false,
+          "stateAttributes": [
+            {
+              "name": "data-scroll-overflow",
+              "on": "kui-pane__content of each panel and work-area Pane",
+              "meaning": "The physical edges, in canonical t/r/b/l order, beyond which content is scrolled out of view; absent when nothing is hidden (content that fits never reports its far edges). Re-applied if a re-render drops it."
+            },
+            {
+              "name": "data-scroll-divider",
+              "on": "kui-pane__header and kui-pane__footer of each panel and work-area Pane",
+              "meaning": "The sides, in t/r/b/l order, on which this chrome currently draws its scroll divider: the side facing the scroller while content is hidden beyond it. Re-applied if a re-render drops it."
+            }
+          ]
         }
       ],
       "publicClasses": [
@@ -1272,8 +1413,8 @@
         "which screen edges an app bar or bottom bar outside a Pane header or footer claims for device safe areas (safeAreaEdges)"
       ],
       "variants": [
-        "bottom divider (default)",
-        "no dividers",
+        "no dividers (default)",
+        "scroll dividers when named as wireScrollDividers targets chrome",
         "top/right/bottom/left divider combinations",
         "centered content",
         "stacked zones at compact or narrow widths",
@@ -1301,7 +1442,25 @@
           "browser-condition-css"
         ]
       },
-      "wiring": [],
+      "wiring": [
+        {
+          "export": "wireScrollDividers",
+          "import": "@kerfjs/ui/wire-scroll-dividers",
+          "required": false,
+          "stateAttributes": [
+            {
+              "name": "data-scroll-overflow",
+              "on": "the targets scroller",
+              "meaning": "The physical edges, in canonical t/r/b/l order, beyond which content is scrolled out of view; absent when nothing is hidden (content that fits never reports its far edges). Re-applied if a re-render drops it."
+            },
+            {
+              "name": "data-scroll-divider",
+              "on": "a Toolbar named as targets chrome",
+              "meaning": "The sides, in t/r/b/l order, on which this chrome currently draws its scroll divider: the side facing the scroller while content is hidden beyond it. Re-applied if a re-render drops it."
+            }
+          ]
+        }
+      ],
       "publicClasses": [
         "kui-toolbar",
         "kui-toolbar__center",
@@ -1309,7 +1468,7 @@
         "kui-toolbar__trailing"
       ],
       "publicTokens": [
-        "--kui-color-border",
+        "--kui-color-neutral-border-normal",
         "--kui-font-sans",
         "--kui-toolbar-divider-color"
       ],
@@ -1338,7 +1497,7 @@
       "useWhen": [
         "Group related controls inside a toolbar with a supported visual treatment.",
         "Use ToolbarActionLink for navigation or external resources that must retain native anchor semantics inside a group.",
-        "Fill it with plain <button> controls (the group styles > button fully); use wa-button only for a Web Awesome feature such as a wa-dropdown popup trigger.",
+        "Fill it with plain <button> controls (the group styles > button fully); use wa-button only for a Web Awesome feature. A popup menu is a PopupMenu in a single group with nestedDropdown; it renders its own trigger, so never hand-write wa-dropdown markup. Nothing wraps inside a group: an icon sits beside its label on one row and no trigger gets a fixed width.",
         "For an avatar control, set content=avatar and avatarImage instead of inserting an img; one button paints the group and multiple buttons paint only the pressed highlight."
       ],
       "avoidWhen": [
@@ -1380,7 +1539,8 @@
         "contained avatar background on a single group or selected multi-button highlight"
       ],
       "accessibility": [
-        "Name the group when its relationship is not evident from context."
+        "Name the group when its relationship is not evident from context.",
+        "Name an icon-only button or link with aria-label, not title. Once any help-tag installer is imported (select/register, popup-menu/register, or help-tags/register), it shows an aria-hidden Web Awesome help tag repeating that name after a 500ms hover and at once on keyboard focus, hidden on a press and on Escape, and never joins aria-labelledby. A native title keeps the browser tooltip and gets no second tag."
       ],
       "geometry": {
         "margin": "none",
@@ -1515,6 +1675,31 @@
       "publicExports": [
         "FloatingToolbar"
       ],
+      "cssValueProps": [
+        {
+          "path": "inset",
+          "grammar": "length",
+          "helpers": [
+            "px",
+            "rem",
+            "em",
+            "pct",
+            "space",
+            "lengthVar",
+            "calc"
+          ],
+          "nonStandaloneHelpers": [
+            "plus"
+          ],
+          "shorthands": [],
+          "canonicalShorthands": [],
+          "exceptionalShorthands": [],
+          "rawPolicy": "forbid",
+          "examples": [
+            "inset={space(\"xs\")}"
+          ]
+        }
+      ],
       "useWhen": [
         "Float a small cluster of controls (e.g. a drawer restore) over scrolling content without covering dialogs."
       ],
@@ -1713,7 +1898,7 @@
         "kui-text"
       ],
       "publicTokens": [
-        "--kui-color-danger-text",
+        "--kui-color-danger-on-quiet",
         "--kui-color-text-quiet",
         "--kui-font-mono",
         "--kui-font-xs",
@@ -1834,7 +2019,7 @@
         "kui-value-table__label"
       ],
       "publicTokens": [
-        "--kui-color-border",
+        "--kui-color-neutral-border-normal",
         "--kui-color-surface-lowered",
         "--kui-color-text",
         "--kui-color-text-quiet",
@@ -2442,7 +2627,8 @@
         "top/right/bottom/left divider combinations",
         "top/right/bottom/left text and control inset combinations",
         "fill: the layout root fills a definite-height parent",
-        "rootAttributes: safe data-* metadata on the root"
+        "rootAttributes: safe data-* metadata on the root",
+        "scroll dividers when named as wireScrollDividers targets chrome"
       ],
       "accessibility": [
         "List adds layout only and no list role; children retain responsibility for their native or ARIA semantics.",
@@ -2463,12 +2649,30 @@
           "browser-condition-css"
         ]
       },
-      "wiring": [],
+      "wiring": [
+        {
+          "export": "wireScrollDividers",
+          "import": "@kerfjs/ui/wire-scroll-dividers",
+          "required": false,
+          "stateAttributes": [
+            {
+              "name": "data-scroll-overflow",
+              "on": "the targets scroller",
+              "meaning": "The physical edges, in canonical t/r/b/l order, beyond which content is scrolled out of view; absent when nothing is hidden (content that fits never reports its far edges). Re-applied if a re-render drops it."
+            },
+            {
+              "name": "data-scroll-divider",
+              "on": "a List named as targets chrome",
+              "meaning": "The sides, in t/r/b/l order, on which this chrome currently draws its scroll divider: the side facing the scroller while content is hidden beyond it. Re-applied if a re-render drops it."
+            }
+          ]
+        }
+      ],
       "publicClasses": [
         "kui-list"
       ],
       "publicTokens": [
-        "--kui-color-border",
+        "--kui-color-neutral-border-normal",
         "--kui-layout-item-gap",
         "--kui-list-divider-color",
         "--kui-list-gap"
@@ -2551,14 +2755,12 @@
         "kui-list-header",
         "kui-list-header__action",
         "kui-list-header__action-layer",
-        "kui-list-header__label",
         "kui-list-header__title",
         "kui-list-header__toggle"
       ],
       "publicTokens": [
         "--kui-color-neutral-border-quiet",
         "--kui-focus-ring",
-        "--kui-font-xs",
         "--kui-list-header-action-icon-size",
         "--kui-list-header-color",
         "--kui-layout-inline-margin",
@@ -2900,8 +3102,7 @@
       ],
       "variants": [
         "all-side inset by default",
-        "top/right/bottom/left inset combinations",
-        "deprecated horizontalOnly compatibility alias for sides=\"rl\""
+        "top/right/bottom/left inset combinations"
       ],
       "accessibility": [
         "A layout wrapper only; it adds no role or name."
@@ -2920,8 +3121,7 @@
       },
       "wiring": [],
       "publicClasses": [
-        "kui-list-inset-text",
-        "kui-list-inset-text--horizontal"
+        "kui-list-inset-text"
       ],
       "publicTokens": [],
       "links": {
@@ -2930,6 +3130,103 @@
         "recipe": "docs/component-selection.md#problem-to-component-matrix"
       }
     },
+    {
+      "id": "content-item",
+      "name": "ContentItem",
+      "category": "Structure",
+      "kind": "component",
+      "source": "kerf",
+      "description": "One self-contained content child with the shared 8px margin + 1px border + 8px padding geometry, a typed frame, and a rounded or pill shape.",
+      "uses": [],
+      "purpose": "Render one self-contained .kui-content child that owns its 8px inline margin, real 1px border, 8px padding, and radius, with framing and shape chosen by typed props instead of hand-written modifier classes.",
+      "publicExports": [
+        "ContentItem"
+      ],
+      "useWhen": [
+        "An ordinary surface-like child of a Pane or .kui-content stack needs the shared content-item geometry so its content edge lands at the standard 17px inset.",
+        "A content item marks a real distinction and must read as visibly bounded: pass frame=\"framed\" (the border is always reserved, so geometry does not change).",
+        "A content item should follow a pill control's 22px radius: pass shape=\"pill\"."
+      ],
+      "avoidWhen": [
+        "Do not wrap a component that already owns content-item geometry (ListItem, ListHeader, StateBanner, Toolbar, ValueTable) or pad around a ContentItem; either double-insets.",
+        "Do not frame an item only to make it look contained; hierarchy comes from alignment, spacing, and type first.",
+        "Do not use it as a filled or lowered card; use SunkenPanel for a lowered surface.",
+        "Do not use it for bare text alone; use ListInsetText, which adds the same inset without claiming a surface."
+      ],
+      "alternatives": [
+        {
+          "id": "list-inset-text",
+          "relationship": "nearest",
+          "when": "Use ListInsetText when bare text only needs to align with neighboring content items."
+        },
+        {
+          "id": "sunken-panel",
+          "relationship": "nearest",
+          "when": "Use SunkenPanel for a lowered, filled surface around a vertical stack."
+        },
+        {
+          "id": "layout",
+          "relationship": "composes-with",
+          "when": "Place ContentItem children in a Pane or .kui-content stack, which owns the 24px major rhythm."
+        }
+      ],
+      "appOwns": [
+        "the item content",
+        "whether the item marks a real distinction that warrants a visible frame",
+        "corner shape",
+        "region semantics and accessible name",
+        "whether the item is a programmatic focus target"
+      ],
+      "variants": [
+        "unframed rounded item",
+        "framed rounded item",
+        "pill item",
+        "framed pill item",
+        "named focus-target region"
+      ],
+      "accessibility": [
+        "An ordinary item adds no role or name; pass ariaLabel only when the item is a distinct named region (it then renders role=\"region\").",
+        "focusTarget makes the item a programmatic focus target (tabindex=\"-1\", never a tab stop), such as a NavStack view's data-nav-focus target.",
+        "The frame is decorative and never the only signal of state."
+      ],
+      "geometry": {
+        "margin": "self",
+        "border": "self",
+        "padding": "self",
+        "notes": [
+          "The 1px border is always reserved and transparent unless frame=\"framed\", so framed and unframed items share the same geometry."
+        ]
+      },
+      "delivery": {
+        "browserImport": "@kerfjs/ui/content-item",
+        "manualCssImport": "@kerfjs/ui/content-item.css",
+        "sideEffects": [
+          "browser-condition-css"
+        ]
+      },
+      "wiring": [],
+      "publicClasses": [
+        "kui-content-item",
+        "kui-content-item--pill",
+        "kui-content-item--framed"
+      ],
+      "placeableClasses": [
+        "kui-content-item",
+        "kui-content-item--pill",
+        "kui-content-item--framed"
+      ],
+      "rootElement": "div",
+      "publicTokens": [
+        "--kui-content-item-border",
+        "--kui-content-item-radius",
+        "--kui-content-item-background"
+      ],
+      "links": {
+        "catalogRoute": "?component=content-item",
+        "documentation": "docs/layout.md",
+        "recipe": "docs/layout.md#content-items"
+      }
+    },
     {
       "id": "application-tabs",
       "name": "Application tabs",
@@ -3139,7 +3436,8 @@
         "rail, segmented, and inspector presentation",
         "intrinsic or fill allocation",
         "separate or adjacent trailing action",
-        "far-edge end action"
+        "far-edge end action",
+        "overflow dividers on each side with tabs scrolled out of view (wired by wireScrollDividers)"
       ],
       "accessibility": [
         "Keep exactly one selected tab at tabindex 0 and preserve the wiring keyboard model."
@@ -3186,6 +3484,23 @@
           "export": "reorderTabs",
           "import": "@kerfjs/ui/wire-tab-bars",
           "required": false
+        },
+        {
+          "export": "wireScrollDividers",
+          "import": "@kerfjs/ui/wire-scroll-dividers",
+          "required": false,
+          "stateAttributes": [
+            {
+              "name": "data-scroll-overflow",
+              "on": "kui-tab-bar__tabs",
+              "meaning": "The physical edges, in canonical t/r/b/l order, beyond which content is scrolled out of view; absent when nothing is hidden (content that fits never reports its far edges). Re-applied if a re-render drops it."
+            },
+            {
+              "name": "data-scroll-divider",
+              "on": "chrome named in wireScrollDividers targets (a TabBar strip has none)",
+              "meaning": "The sides, in t/r/b/l order, on which that chrome currently draws its scroll divider. Re-applied if a re-render drops it."
+            }
+          ]
         }
       ],
       "publicClasses": [
@@ -3197,7 +3512,8 @@
       ],
       "publicTokens": [
         "--kui-tab-bar-background",
-        "--kui-tab-bar-border"
+        "--kui-tab-bar-border",
+        "--kui-tab-bar-divider-color"
       ],
       "links": {
         "catalogRoute": "?component=tab-bar",
@@ -3412,9 +3728,9 @@
         "kui-token-search__trailing"
       ],
       "publicTokens": [
-        "--kui-color-accent",
-        "--kui-color-accent-text",
-        "--kui-color-border",
+        "--kui-color-brand-fill-normal",
+        "--kui-color-brand-on-quiet",
+        "--kui-color-neutral-border-normal",
         "--kui-color-text-link",
         "--kui-color-surface",
         "--kui-color-text",
@@ -3544,7 +3860,7 @@
         "kui-resizable-region__restore"
       ],
       "publicTokens": [
-        "--kui-color-border",
+        "--kui-color-neutral-border-normal",
         "--kui-color-neutral-on-quiet",
         "--kui-color-text-link",
         "--kui-focus-ring",
@@ -3571,9 +3887,10 @@
       "category": "Controls",
       "kind": "component",
       "source": "kerf",
-      "description": "Controlled Web Awesome select with typed form, toolbar, navigation, compact, icon-only, truncating, hint, and grouped-choice presentations.",
+      "description": "Controlled Web Awesome select with typed single or multiple values and form, toolbar, navigation, compact, icon-only, truncating, hint, and grouped-choice presentations.",
       "uses": [
         "lucide-icon",
+        "badge",
         "wa-select",
         "wa-option"
       ],
@@ -3643,13 +3960,18 @@
         "default or compact size",
         "label or icon-only selected presentation",
         "select- or group-owned focus ring",
-        "label maximum width and truncation"
+        "label maximum width and truncation",
+        "multiple selection",
+        "multiple icon-only filter trigger with a fixed triggerIcon"
       ],
       "accessibility": [
         "Verify the live value, standard events, focus, and rendered output.",
         "A nonempty label names the internal combobox; otherwise ariaLabel supplies a visually hidden label without adding control height, including custom selected content.",
         "Hint text is visible below the control through Web Awesome's native hint relationship; placeholderText remains the empty value inside the closed control.",
-        "Import select/register once; its scoped lifecycle adapter keeps the latest open/close request authoritative across animation reversals, canceled transitions, and removal. Do not add consumer popup timing or position repairs."
+        "Import select/register once; its scoped lifecycle adapter keeps the latest open/close request authoritative across animation reversals, canceled transitions, and removal. Do not add consumer popup timing or position repairs.",
+        "With multiple, the popup stays open while choices toggle (pointer, Enter, or Space) and closes on an outside press, Escape, or focus leaving; each chosen option shows a check, and the closed control summarizes the chosen labels in choice order.",
+        "A multiple icon-only trigger shows its fixed triggerIcon and, while any choice is chosen, an aria-hidden count Badge; the combobox's accessible name ends with the chosen labels in choice order, and its hidden value stays empty.",
+        "Once registered, an icon-only trigger (single or multiple) shows an aria-hidden Web Awesome help tag repeating its accessible name (a single Select adds its current choice) after a 500ms hover and at once on keyboard focus; it hides while the popup is open, on a press, and on Escape, and never joins aria-labelledby. Do not add a title or another tooltip."
       ],
       "geometry": {
         "margin": "none",
@@ -3677,8 +3999,6 @@
         "kui-select__icon"
       ],
       "publicTokens": [
-        "--kui-color-brand-fill-normal",
-        "--kui-color-brand-on-fill",
         "--kui-color-neutral-border-quiet",
         "--kui-color-neutral-on-quiet",
         "--kui-disclosure-icon-scale",
@@ -3740,7 +4060,8 @@
         "placement"
       ],
       "accessibility": [
-        "An icon-only trigger requires label, rendered as visually hidden slotted text because a Web Awesome button takes its accessible name from its content; a trigger with visible text is named by that text. Web Awesome provides menu roles, arrow-key navigation, typeahead, and Escape."
+        "An icon-only trigger requires label, rendered as visually hidden slotted text because a Web Awesome button takes its accessible name from its content; a trigger with visible text is named by that text. Web Awesome provides menu roles, arrow-key navigation, typeahead, and Escape.",
+        "Once registered, an icon-only trigger shows its label as an aria-hidden Web Awesome help tag after a 500ms hover and at once on keyboard focus; it hides while the menu is open, on a press, and on Escape, and never joins aria-labelledby. Do not add a title or another tooltip."
       ],
       "geometry": {
         "margin": "none",
@@ -5317,6 +5638,9 @@
       "publicClasses": [
         "hide-actions"
       ],
+      "placeableClasses": [
+        "hide-actions"
+      ],
       "geometry": {
         "margin": "none",
         "border": "child",
@@ -7095,7 +7419,8 @@
         "toolbar",
         "toolbar-control-group",
         "lucide-icon",
-        "layout"
+        "layout",
+        "content-item"
       ],
       "useWhen": [
         "A workspace sidebar needs the shared toolbar/content/footer pane model, 24px major section rhythm, and 44px row and utility-action targets."
@@ -7368,7 +7693,8 @@
         "row",
         "text",
         "lucide-icon",
-        "layout"
+        "layout",
+        "content-item"
       ],
       "useWhen": [
         "A flow drills from a list into detail and back on one pane, at any device size or inside a dialog."
@@ -7466,7 +7792,8 @@
         "toolbar-text",
         "value-table",
         "lucide-icon",
-        "layout"
+        "layout",
+        "content-item"
       ],
       "useWhen": [
         "A rail or drawer must collapse and expand outside a full Workbench shell, keeping the app's collapsed signals, sizes, and content while the wire owns toggle, focus, the compact overlay, and persistence."