@kerfjs/ui 5.0.0-beta.84 → 5.0.0-beta.85

package/ai/component-catalog.json

@@ -625,7 +625,8 @@
         "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).",
         "A lowered background must cover the scrolling work viewport and blank space after short content without a second scroll container (appearance: sunken).",
-        "A child table or other component needs edge-to-edge decoration with text aligned to other pane content."
+        "A child table or other component needs edge-to-edge decoration with text aligned to other pane content.",
+        "An opaque edge-to-edge child needs a reserved vertical scrollbar gutter."
       ],
       "avoidWhen": [
         "Do not use Pane as a padded card or add a competing scroll owner around its content slot.",
@@ -647,6 +648,7 @@
         "responsive placement and visibility",
         "whether the chrome dividers follow the scroll, always show, or never show (chromeDividers)",
         "default or sunken scrolling work surface (appearance)",
+        "whether to reserve a vertical scrollbar gutter for opaque edge-to-edge content (--kui-pane-scrollbar-gutter)",
         "optional keyboard or programmatic focus (tabIndex) and persistent focus outline (outlined)"
       ],
       "variants": [
@@ -672,7 +674,8 @@
         "The pane is unpadded; separators are independently opt-in on logical edges and default off.",
           "Safe areas: the root and separators paint through unsafe areas while header, content, and footer pad the sides the pane still reaches (routed by --kui-edge-inset-*); content block insets are scroll padding.",
           "The scrolling content exposes its resolved logical inline padding to descendants as --kui-pane-content-inset-inline-start/end, including safe areas and deepInset.",
-          "deepInset adds --kui-space-xs to every side of the scrolling content and its block scroll padding; header/footer chrome still owns safe-area padding at its edge."
+          "deepInset adds --kui-space-xs to every side of the scrolling content and its block scroll padding; header/footer chrome still owns safe-area padding at its edge.",
+          "For opaque edge-to-edge children, --kui-pane-scrollbar-gutter: stable reserves a vertical scrollbar gutter outside the published content insets; the default is auto."
         ]
       },
       "delivery": {
@@ -718,6 +721,7 @@
         "--kui-pane-chrome-background",
         "--kui-pane-content-inset-inline-start",
         "--kui-pane-content-inset-inline-end",
+        "--kui-pane-scrollbar-gutter",
         "--kui-sunken-panel-background"
       ],
       "links": {

package/ai/component-composition.json

@@ -613,6 +613,11 @@
           "owner": "application",
           "required": false
         },
+        {
+          "id": "whether to reserve a vertical scrollbar gutter for opaque edge-to-edge content (--kui-pane-scrollbar-gutter)",
+          "owner": "application",
+          "required": false
+        },
         {
           "id": "optional keyboard or programmatic focus (tabIndex) and persistent focus outline (outlined)",
           "owner": "application",
@@ -649,7 +654,8 @@
             "The pane is unpadded; separators are independently opt-in on logical edges and default off.",
             "Safe areas: the root and separators paint through unsafe areas while header, content, and footer pad the sides the pane still reaches (routed by --kui-edge-inset-*); content block insets are scroll padding.",
             "The scrolling content exposes its resolved logical inline padding to descendants as --kui-pane-content-inset-inline-start/end, including safe areas and deepInset.",
-            "deepInset adds --kui-space-xs to every side of the scrolling content and its block scroll padding; header/footer chrome still owns safe-area padding at its edge."
+            "deepInset adds --kui-space-xs to every side of the scrolling content and its block scroll padding; header/footer chrome still owns safe-area padding at its edge.",
+            "For opaque edge-to-edge children, --kui-pane-scrollbar-gutter: stable reserves a vertical scrollbar gutter outside the published content insets; the default is auto."
           ]
         }
       },
@@ -679,6 +685,7 @@
           "--kui-pane-chrome-background",
           "--kui-pane-content-inset-inline-start",
           "--kui-pane-content-inset-inline-end",
+          "--kui-pane-scrollbar-gutter",
           "--kui-sunken-panel-background"
         ]
       },

package/ai/components/pane.md

@@ -15,6 +15,7 @@ Organize a sidebar, main area, inspector, or dialog column into fixed vertical h
 - Pinned chrome needs a divider from the scrolling content only while content is scrolled beneath it (wireScrollDividers).
 - A lowered background must cover the scrolling work viewport and blank space after short content without a second scroll container (appearance: sunken).
 - A child table or other component needs edge-to-edge decoration with text aligned to other pane content.
+- An opaque edge-to-edge child needs a reserved vertical scrollbar gutter.
 
 **Not when:**
 
@@ -62,7 +63,7 @@ Zones (a zone is bound to JSX only through its listed prop; never assume the zon
 
 ## State and wiring
 
-**The app owns:** root and content semantics; accessible labels; 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; whether the chrome dividers follow the scroll, always show, or never show (chromeDividers); default or sunken scrolling work surface (appearance); optional keyboard or programmatic focus (tabIndex) and persistent focus outline (outlined).
+**The app owns:** root and content semantics; accessible labels; 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; whether the chrome dividers follow the scroll, always show, or never show (chromeDividers); default or sunken scrolling work surface (appearance); whether to reserve a vertical scrollbar gutter for opaque edge-to-edge content (--kui-pane-scrollbar-gutter); optional keyboard or programmatic focus (tabIndex) and persistent focus outline (outlined).
 
 **Wiring:** `wireScrollDividers` is optional.
 
@@ -79,6 +80,7 @@ Margin: child · border: conditional · padding: child (layout role: structure).
 - Safe areas: the root and separators paint through unsafe areas while header, content, and footer pad the sides the pane still reaches (routed by --kui-edge-inset-\*); content block insets are scroll padding.
 - The scrolling content exposes its resolved logical inline padding to descendants as --kui-pane-content-inset-inline-start/end, including safe areas and deepInset.
 - deepInset adds --kui-space-xs to every side of the scrolling content and its block scroll padding; header/footer chrome still owns safe-area padding at its edge.
+- For opaque edge-to-edge children, --kui-pane-scrollbar-gutter: stable reserves a vertical scrollbar gutter outside the published content insets; the default is auto.
 
 ## Accessibility
 
@@ -93,7 +95,7 @@ Public class hooks (select for layout placement only, never to change the compon
 
 Never put `kui-pane`, `kui-pane__content`, `kui-pane__footer`, `kui-pane__header`, `kui-pane__toolbar` on an element you write; render `Pane` instead (`KUI-L103`).
 
-Public tokens it reads: `--kui-edge-inset-block-end`, `--kui-edge-inset-block-start`, `--kui-edge-inset-inline-end`, `--kui-edge-inset-inline-start`, `--kui-pane-separator-color`, `--kui-pane-separator-width`, `--kui-pane-chrome-background`, `--kui-pane-content-inset-inline-start`, `--kui-pane-content-inset-inline-end`, `--kui-sunken-panel-background`. Set a token only where its public contract allows; prefer a prop.
+Public tokens it reads: `--kui-edge-inset-block-end`, `--kui-edge-inset-block-start`, `--kui-edge-inset-inline-end`, `--kui-edge-inset-inline-start`, `--kui-pane-separator-color`, `--kui-pane-separator-width`, `--kui-pane-chrome-background`, `--kui-pane-content-inset-inline-start`, `--kui-pane-content-inset-inline-end`, `--kui-pane-scrollbar-gutter`, `--kui-sunken-panel-background`. Set a token only where its public contract allows; prefer a prop.
 
 Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
 

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.84` and `kerfjs@5.0.0-beta.84`. 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.85` and `kerfjs@5.0.0-beta.85`. 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/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.84` 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.85` 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/package.json

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