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

package/dist/styles/catalog/components/catalog-example.css

@@ -97,7 +97,6 @@
 
 .kui-catalog-example__viewport[data-frame] {
   border: 1px solid var(--kui-color-neutral-border-normal);
-  border-radius: var(--kui-radius-m);
 }
 
 .kui-catalog-example__viewport[data-frame="dashed"] {
@@ -150,7 +149,7 @@
   }
 }
 
-/* The published inset lets the geometry overlay exclude this authoring aid. */
+/* Bare specimens use a small inset to align with the surrounding examples. */
 .kui-catalog-example[data-align="glyph"]
   > :not([data-catalog-example-label]):not([data-catalog-example-note]) {
   --kui-catalog-example-align: 1rem;

package/dist/styles/catalog/components/catalog-stage.css

@@ -1,55 +1,53 @@
-/* The preview stage fills the work area's scroller — and grows with a taller
-   specimen, never shrinking under it — behind a transparency checkerboard,
-   so a specimen's own surface (or lack of one) stays visible. */
+/* The preview stage fills the work area's scroller and grows with a taller
+   specimen, never shrinking under it. The default checkerboard shares the
+   sunken Pane's translucent surface instead of painting a second layer. */
 .kui-catalog__stage {
   flex: 1 0 auto;
-  background-color: var(--kui-color-surface-lowered);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238e8e93' fill-opacity='.12' d='M0 0h12v12H0zM12 12h12v12H12z'/%3E%3C/svg%3E");
-  background-size: 1.5rem 1.5rem;
+  background-color: transparent;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238e8e93' fill-opacity='.12' d='M0 0h8v8H0zM8 8h8v8H8z'/%3E%3C/svg%3E");
+  background-size: 1rem 1rem;
 }
 
-/* The centered specimen canvas, at the catalog's reading measure. */
-.kui-catalog__canvas {
-  position: relative;
-  display: grid;
-  width: min(100%, 70rem);
-  min-width: 0;
-  min-height: 100%;
-  margin-inline: auto;
-  padding: var(--kui-layout-content-gap);
-  box-sizing: border-box;
-  place-items: center;
+.kui-catalog__stage[data-background-style="vertical-stripes"] {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238e8e93' fill-opacity='.12' d='M0 0h8v16H0z'/%3E%3C/svg%3E");
+  background-size: 1rem 1rem;
 }
 
-/* `wireCatalogGeometryOverlay` appends the bound, border, and margin layers. */
-/* css-ownership: allow-root kui-catalog__geometry-bound -- The catalog wire appends measured specimen bound layers at runtime. */
-/* css-ownership: allow-root kui-catalog__geometry-border -- The catalog wire appends computed border layers at runtime. */
-/* css-ownership: allow-root kui-catalog__geometry-margin -- The catalog wire appends computed margin layers at runtime. */
-.kui-catalog__geometry-overlay {
-  position: absolute;
-  z-index: 3;
-  pointer-events: none;
-  inset: 0;
+.kui-catalog__stage[data-background-style="layout-guide"] {
+  background-image: linear-gradient(
+    to right,
+    transparent 15px,
+    rgb(142 142 147 / 12%) 15px 16px,
+    transparent 16px 23px,
+    rgb(142 142 147 / 12%) 23px 24px,
+    transparent 24px 32px,
+    rgb(142 142 147 / 12%) 32px 33px,
+    transparent 33px
+  );
+  background-size: auto;
+  background-repeat: no-repeat;
 }
 
-.kui-catalog__geometry-bound,
-.kui-catalog__geometry-border,
-.kui-catalog__geometry-margin {
-  position: absolute;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
+.kui-catalog__stage[data-background-style="surface"] {
+  background-color: var(--kui-color-surface);
+  background-image: none;
+  background-size: auto;
 }
 
-.kui-catalog__geometry-bound {
-  border: 1px dashed color-mix(in srgb, var(--kui-color-text) 40%, transparent);
+.kui-catalog__stage[data-background-style="sunken"] {
+  background-color: transparent;
+  background-image: none;
+  background-size: auto;
 }
 
-.kui-catalog__geometry-border {
-  border: 0 solid
-    color-mix(in srgb, var(--kui-color-brand-on-quiet) 72%, transparent);
-}
-
-.kui-catalog__geometry-margin {
-  background: color-mix(in srgb, #f6a94c 55%, transparent);
+/* Align the specimen canvas with the work area's reading start. */
+.kui-catalog__canvas {
+  position: relative;
+  display: grid;
+  width: min(100%, 70rem);
+  min-width: 0;
+  min-height: 100%;
+  padding: var(--kui-space-m);
+  box-sizing: border-box;
+  place-items: start;
 }

package/dist/styles/catalog/components/catalog.css

@@ -4,17 +4,6 @@
   height: 100%;
 }
 
-/* The brand mark, sized to sit inside a toolbar group. */
-.kui-catalog__mark {
-  display: block;
-  width: 2.125rem;
-  height: 2.125rem;
-}
-
-.kui-catalog__filter {
-  border-radius: var(--kui-layout-rounded-radius);
-}
-
 .kui-catalog [data-catalog-filter-empty],
 .kui-catalog [data-catalog-section][hidden],
 .kui-catalog [data-catalog-entry-name][hidden],

package/dist/styles/components/collections/list/list.css

@@ -5,6 +5,8 @@
      omits `gap` or `flex` never inherits its ancestor's; the component's inline
      style overrides these defaults for the props it does set. */
   --_kui-list-gap: 0;
+  --_kui-list-column-gap: var(--_kui-list-gap);
+  --_kui-list-row-gap: var(--_kui-list-gap);
   --_kui-list-flex: 0 1 auto;
   --_kui-list-inset-top: 0;
   --_kui-list-inset-right: 0;
@@ -26,7 +28,8 @@
   align-items: stretch;
   align-content: space-between;
   justify-content: flex-start;
-  gap: var(--_kui-list-gap, 0);
+  column-gap: var(--_kui-list-column-gap);
+  row-gap: var(--_kui-list-row-gap);
   box-shadow:
     inset 0 1px var(--_kui-list-divider-top),
     inset -1px 0 var(--_kui-list-divider-right),

package/dist/styles/components/feedback/anchored-surface/anchored-surface.css

@@ -0,0 +1,15 @@
+.kui-anchored-surface {
+  box-sizing: border-box;
+  inset: auto;
+  width: max-content;
+  max-width: calc(100vw - 2 * var(--kui-space-xs, 8px));
+  max-height: calc(100dvh - 2 * var(--kui-space-xs, 8px));
+  overflow: auto;
+  padding: var(--kui-anchored-surface-inset, var(--kui-space-xs, 8px));
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-anchored-surface-radius, var(--kui-radius-m));
+  color: var(--kui-color-text, inherit);
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-l);
+  font: inherit;
+}

package/dist/styles/components/layout/grid/grid.css

@@ -3,6 +3,8 @@
   /* Private per-instance values are reset on every Grid so a nested Grid never
      inherits its ancestor's; the inline style overrides them per prop. */
   --_kui-grid-gap: var(--kui-grid-gap);
+  --_kui-grid-column-gap: var(--_kui-grid-gap);
+  --_kui-grid-row-gap: var(--_kui-grid-gap);
   --_kui-grid-flex: 0 1 auto;
   --_kui-grid-inset-top: 0;
   --_kui-grid-inset-right: 0;
@@ -17,7 +19,8 @@
     var(--_kui-grid-inset-bottom, 0) var(--_kui-grid-inset-left, 0);
   flex: var(--_kui-grid-flex, initial);
   grid-template-columns: repeat(var(--_kui-grid-columns), minmax(0, 1fr));
-  gap: var(--_kui-grid-gap, var(--kui-grid-gap));
+  column-gap: var(--_kui-grid-column-gap);
+  row-gap: var(--_kui-grid-row-gap);
 }
 
 .kui-grid[data-control-insets*="t"] {

package/dist/styles/components/layout/pane/pane.css

@@ -4,6 +4,7 @@
   --kui-pane-separator-inline-start-width: 0;
   --kui-pane-separator-inline-end-width: 0;
 
+  position: relative;
   display: grid;
   min-width: 0;
   min-height: 0;
@@ -27,6 +28,18 @@
   outline-offset: -3px;
 }
 
+/* A bleeding child can establish its own paint layer above the Pane outline.
+   Repeat the ring as an overlay after the content, without intercepting input. */
+.kui-pane:is(:focus-visible, [data-outlined="true"])::after {
+  position: absolute;
+  z-index: 1;
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+  content: "";
+  inset: 0;
+  pointer-events: none;
+}
+
 /* Paint the active scroll owner once, so alpha lowered colors do not stack.
    Fixed chrome leaves the content slot scrolling; auto chrome lets the Pane
    root scroll in its short mode, while its content remains transparent. */
@@ -180,6 +193,8 @@
 /* Add one outer gutter without changing the inherited item-margin token.
    Nested Row, List, and Grid therefore keep their own default 8px insets. */
 .kui-pane[data-deep-inset="true"] > .kui-pane__content {
+  /* Reserve a vertical scrollbar gutter when the host uses opaque edge-to-edge content. */
+  scrollbar-gutter: var(--kui-pane-scrollbar-gutter, auto);
   --_kui-pane-deep-block-inset: var(--kui-space-xs);
   --kui-pane-content-inset-inline-start: calc(
     var(--_kui-pane-safe-inline-start) + var(--kui-space-xs)

package/dist/styles/components/layout/row/row.css

@@ -3,6 +3,8 @@
   /* Private per-instance values are reset on every Row so a nested Row never
      inherits its ancestor's; the inline style overrides them per prop. */
   --_kui-row-gap: var(--kui-row-gap);
+  --_kui-row-column-gap: var(--_kui-row-gap);
+  --_kui-row-row-gap: var(--_kui-row-gap);
   --_kui-row-flex: 0 1 auto;
   --_kui-row-inset-top: 0;
   --_kui-row-inset-right: 0;
@@ -21,7 +23,8 @@
   align-items: stretch;
   align-content: space-between;
   justify-content: flex-start;
-  gap: var(--_kui-row-gap, var(--kui-row-gap));
+  column-gap: var(--_kui-row-column-gap);
+  row-gap: var(--_kui-row-row-gap);
 }
 
 .kui-row[data-control-insets*="t"] {

package/dist/styles/components/layout/workbench/workbench.css

@@ -100,6 +100,7 @@
 }
 
 .kui-workbench__main {
+  position: relative;
   flex: 1;
   min-height: 0;
   overflow: auto;
@@ -113,6 +114,22 @@
   outline-offset: -3px;
 }
 
+/* A sole Pane can host an opaque full-width scroller above the main outline.
+   Keep the selected work-area ring in the final paint layer, without blocking
+   controls in that Pane. Other main compositions retain their own outline. */
+.kui-workbench__main:has(> [data-component="pane"]:only-child):is(
+    :focus-visible,
+    [data-outlined="true"]
+  )::after {
+  position: absolute;
+  z-index: 1;
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+  content: "";
+  inset: 0;
+  pointer-events: none;
+}
+
 /* When no Pane chrome is composed, the Workbench region owns its scroll.
    A resizable auto-overflow panel instead scrolls its content box so its
    separator handle remains fixed. Paint only that owner. */

package/dist/styles/components/navigation/nav-stack/nav-stack.css

@@ -197,10 +197,19 @@
    neither, whatever it reports. The chrome's line is an overlaid 1px pseudo-element
    (whatever the chrome holds never covers it) and the bottom's border is
    always there, so showing either never moves the chrome, the toolbar, or
-   the content. A cross-fading chrome copy keeps the line its snapshot had. */
-.kui-nav-stack:not([data-chrome-dividers])
+   the content. A cross-fading chrome copy keeps the line its snapshot had.
+   With `separator="auto"`, an active sunken Pane also colors both available
+   edges; `hidden` suppresses the stack-owned lines. */
+.kui-nav-stack[data-separator="auto"]:has(
+    > .kui-nav-stack__viewport
+      > .kui-nav-stack__view[data-nav-active="true"]
+      > [data-component="pane"][data-appearance="sunken"]
+  )
+  > .kui-nav-stack__chrome::after,
+.kui-nav-stack[data-separator="auto"]:not([data-chrome-dividers])
   > .kui-nav-stack__chrome[data-scroll-divider*="b"]::after,
-.kui-nav-stack[data-chrome-dividers="always"] > .kui-nav-stack__chrome::after {
+.kui-nav-stack[data-separator="auto"][data-chrome-dividers="always"]
+  > .kui-nav-stack__chrome::after {
   position: absolute;
   block-size: 1px;
   background: var(--kui-color-neutral-border-normal);
@@ -210,9 +219,16 @@
   pointer-events: none;
 }
 
-.kui-nav-stack:not([data-chrome-dividers])
+.kui-nav-stack[data-separator="auto"]:has(
+    > .kui-nav-stack__viewport
+      > .kui-nav-stack__view[data-nav-active="true"]
+      > [data-component="pane"][data-appearance="sunken"]
+  )
+  > .kui-nav-stack__bottom,
+.kui-nav-stack[data-separator="auto"]:not([data-chrome-dividers])
   > .kui-nav-stack__bottom[data-scroll-divider*="t"],
-.kui-nav-stack[data-chrome-dividers="always"] > .kui-nav-stack__bottom {
+.kui-nav-stack[data-separator="auto"][data-chrome-dividers="always"]
+  > .kui-nav-stack__bottom {
   --_kui-nav-stack-bottom-divider: var(--kui-color-neutral-border-normal);
 }
 

package/dist/styles/components/navigation/tab-navigator/tab-navigator.css

@@ -133,21 +133,37 @@
   );
   padding-inline: var(--_kui-tab-scaffold-safe-inline-start)
     var(--_kui-tab-scaffold-safe-inline-end);
-  /* Chrome divider: with `chromeDividers="scroll"` (the default, no
-     attribute) the bar's 1px top border shows only while the active scene's
-     content continues below it — never at the scroll end or when the content
-     fits. `wireScrollDividers` reports that state through
-     `data-scroll-divider`; `always` shows it without the wiring, and `none`
-     never. The border is always there and only its color changes, so
-     showing it never moves the bar or a tab. */
+  /* The reserved 1px edge serves both the sunken-surface separator and the
+     scroll divider. Changing its color never moves the bar or a tab. */
   border-block-start: 1px solid
     var(--_kui-tab-scaffold-bar-divider, transparent);
   background: var(--kui-color-surface);
 }
 
-.kui-tab-scaffold:not([data-chrome-dividers])
+.kui-tab-scaffold[data-separator="auto"]:has(
+    > .kui-tab-scaffold__scenes
+      > .kui-tab-scaffold__scene[data-active="true"][data-appearance="sunken"]
+  )
+  > .kui-tab-scaffold__bar,
+.kui-tab-scaffold[data-separator="auto"]:has(
+    > .kui-tab-scaffold__scenes
+      > .kui-tab-scaffold__scene[data-active="true"]
+      > [data-component="pane"][data-appearance="sunken"]:only-child
+  )
+  > .kui-tab-scaffold__bar,
+.kui-tab-scaffold[data-separator="auto"]:has(
+    > .kui-tab-scaffold__scenes
+      > .kui-tab-scaffold__scene[data-active="true"]
+      > [data-component="nav-stack"]:only-child
+      > [data-nav-stack-viewport]
+      > [data-nav-active="true"]
+      > [data-component="pane"][data-appearance="sunken"]
+  )
+  > .kui-tab-scaffold__bar,
+.kui-tab-scaffold[data-separator="auto"]:not([data-chrome-dividers])
   > .kui-tab-scaffold__bar[data-scroll-divider*="t"],
-.kui-tab-scaffold[data-chrome-dividers="always"] > .kui-tab-scaffold__bar {
+.kui-tab-scaffold[data-separator="auto"][data-chrome-dividers="always"]
+  > .kui-tab-scaffold__bar {
   --_kui-tab-scaffold-bar-divider: var(--kui-color-neutral-border-normal);
 }
 

package/dist/styles/grid.css

@@ -3,6 +3,8 @@
   /* Private per-instance values are reset on every Grid so a nested Grid never
      inherits its ancestor's; the inline style overrides them per prop. */
   --_kui-grid-gap: var(--kui-grid-gap);
+  --_kui-grid-column-gap: var(--_kui-grid-gap);
+  --_kui-grid-row-gap: var(--_kui-grid-gap);
   --_kui-grid-flex: 0 1 auto;
   --_kui-grid-inset-top: 0;
   --_kui-grid-inset-right: 0;
@@ -17,7 +19,8 @@
     var(--_kui-grid-inset-bottom, 0) var(--_kui-grid-inset-left, 0);
   flex: var(--_kui-grid-flex, initial);
   grid-template-columns: repeat(var(--_kui-grid-columns), minmax(0, 1fr));
-  gap: var(--_kui-grid-gap, var(--kui-grid-gap));
+  column-gap: var(--_kui-grid-column-gap);
+  row-gap: var(--_kui-grid-row-gap);
 }
 
 .kui-grid[data-control-insets*="t"] {

package/dist/styles/list.css

@@ -5,6 +5,8 @@
      omits `gap` or `flex` never inherits its ancestor's; the component's inline
      style overrides these defaults for the props it does set. */
   --_kui-list-gap: 0;
+  --_kui-list-column-gap: var(--_kui-list-gap);
+  --_kui-list-row-gap: var(--_kui-list-gap);
   --_kui-list-flex: 0 1 auto;
   --_kui-list-inset-top: 0;
   --_kui-list-inset-right: 0;
@@ -26,7 +28,8 @@
   align-items: stretch;
   align-content: space-between;
   justify-content: flex-start;
-  gap: var(--_kui-list-gap, 0);
+  column-gap: var(--_kui-list-column-gap);
+  row-gap: var(--_kui-list-row-gap);
   box-shadow:
     inset 0 1px var(--_kui-list-divider-top),
     inset -1px 0 var(--_kui-list-divider-right),

package/dist/styles/nav-stack.css

@@ -197,10 +197,19 @@
    neither, whatever it reports. The chrome's line is an overlaid 1px pseudo-element
    (whatever the chrome holds never covers it) and the bottom's border is
    always there, so showing either never moves the chrome, the toolbar, or
-   the content. A cross-fading chrome copy keeps the line its snapshot had. */
-.kui-nav-stack:not([data-chrome-dividers])
+   the content. A cross-fading chrome copy keeps the line its snapshot had.
+   With `separator="auto"`, an active sunken Pane also colors both available
+   edges; `hidden` suppresses the stack-owned lines. */
+.kui-nav-stack[data-separator="auto"]:has(
+    > .kui-nav-stack__viewport
+      > .kui-nav-stack__view[data-nav-active="true"]
+      > [data-component="pane"][data-appearance="sunken"]
+  )
+  > .kui-nav-stack__chrome::after,
+.kui-nav-stack[data-separator="auto"]:not([data-chrome-dividers])
   > .kui-nav-stack__chrome[data-scroll-divider*="b"]::after,
-.kui-nav-stack[data-chrome-dividers="always"] > .kui-nav-stack__chrome::after {
+.kui-nav-stack[data-separator="auto"][data-chrome-dividers="always"]
+  > .kui-nav-stack__chrome::after {
   position: absolute;
   block-size: 1px;
   background: var(--kui-color-neutral-border-normal);
@@ -210,9 +219,16 @@
   pointer-events: none;
 }
 
-.kui-nav-stack:not([data-chrome-dividers])
+.kui-nav-stack[data-separator="auto"]:has(
+    > .kui-nav-stack__viewport
+      > .kui-nav-stack__view[data-nav-active="true"]
+      > [data-component="pane"][data-appearance="sunken"]
+  )
+  > .kui-nav-stack__bottom,
+.kui-nav-stack[data-separator="auto"]:not([data-chrome-dividers])
   > .kui-nav-stack__bottom[data-scroll-divider*="t"],
-.kui-nav-stack[data-chrome-dividers="always"] > .kui-nav-stack__bottom {
+.kui-nav-stack[data-separator="auto"][data-chrome-dividers="always"]
+  > .kui-nav-stack__bottom {
   --_kui-nav-stack-bottom-divider: var(--kui-color-neutral-border-normal);
 }
 

package/dist/styles/pane.css

@@ -4,6 +4,7 @@
   --kui-pane-separator-inline-start-width: 0;
   --kui-pane-separator-inline-end-width: 0;
 
+  position: relative;
   display: grid;
   min-width: 0;
   min-height: 0;
@@ -27,6 +28,18 @@
   outline-offset: -3px;
 }
 
+/* A bleeding child can establish its own paint layer above the Pane outline.
+   Repeat the ring as an overlay after the content, without intercepting input. */
+.kui-pane:is(:focus-visible, [data-outlined="true"])::after {
+  position: absolute;
+  z-index: 1;
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+  content: "";
+  inset: 0;
+  pointer-events: none;
+}
+
 /* Paint the active scroll owner once, so alpha lowered colors do not stack.
    Fixed chrome leaves the content slot scrolling; auto chrome lets the Pane
    root scroll in its short mode, while its content remains transparent. */
@@ -180,6 +193,8 @@
 /* Add one outer gutter without changing the inherited item-margin token.
    Nested Row, List, and Grid therefore keep their own default 8px insets. */
 .kui-pane[data-deep-inset="true"] > .kui-pane__content {
+  /* Reserve a vertical scrollbar gutter when the host uses opaque edge-to-edge content. */
+  scrollbar-gutter: var(--kui-pane-scrollbar-gutter, auto);
   --_kui-pane-deep-block-inset: var(--kui-space-xs);
   --kui-pane-content-inset-inline-start: calc(
     var(--_kui-pane-safe-inline-start) + var(--kui-space-xs)

package/dist/styles/row.css

@@ -3,6 +3,8 @@
   /* Private per-instance values are reset on every Row so a nested Row never
      inherits its ancestor's; the inline style overrides them per prop. */
   --_kui-row-gap: var(--kui-row-gap);
+  --_kui-row-column-gap: var(--_kui-row-gap);
+  --_kui-row-row-gap: var(--_kui-row-gap);
   --_kui-row-flex: 0 1 auto;
   --_kui-row-inset-top: 0;
   --_kui-row-inset-right: 0;
@@ -21,7 +23,8 @@
   align-items: stretch;
   align-content: space-between;
   justify-content: flex-start;
-  gap: var(--_kui-row-gap, var(--kui-row-gap));
+  column-gap: var(--_kui-row-column-gap);
+  row-gap: var(--_kui-row-row-gap);
 }
 
 .kui-row[data-control-insets*="t"] {

package/dist/styles/styles.css

@@ -24,6 +24,7 @@
 @import "./skeleton.css";
 @import "./select.css";
 @import "./popup-menu.css";
+@import "./anchored-surface.css";
 @import "./segmented-control.css";
 @import "./token-search-field.css";
 @import "./state-banner.css";

package/dist/styles/tab-navigator.css

@@ -133,21 +133,37 @@
   );
   padding-inline: var(--_kui-tab-scaffold-safe-inline-start)
     var(--_kui-tab-scaffold-safe-inline-end);
-  /* Chrome divider: with `chromeDividers="scroll"` (the default, no
-     attribute) the bar's 1px top border shows only while the active scene's
-     content continues below it — never at the scroll end or when the content
-     fits. `wireScrollDividers` reports that state through
-     `data-scroll-divider`; `always` shows it without the wiring, and `none`
-     never. The border is always there and only its color changes, so
-     showing it never moves the bar or a tab. */
+  /* The reserved 1px edge serves both the sunken-surface separator and the
+     scroll divider. Changing its color never moves the bar or a tab. */
   border-block-start: 1px solid
     var(--_kui-tab-scaffold-bar-divider, transparent);
   background: var(--kui-color-surface);
 }
 
-.kui-tab-scaffold:not([data-chrome-dividers])
+.kui-tab-scaffold[data-separator="auto"]:has(
+    > .kui-tab-scaffold__scenes
+      > .kui-tab-scaffold__scene[data-active="true"][data-appearance="sunken"]
+  )
+  > .kui-tab-scaffold__bar,
+.kui-tab-scaffold[data-separator="auto"]:has(
+    > .kui-tab-scaffold__scenes
+      > .kui-tab-scaffold__scene[data-active="true"]
+      > [data-component="pane"][data-appearance="sunken"]:only-child
+  )
+  > .kui-tab-scaffold__bar,
+.kui-tab-scaffold[data-separator="auto"]:has(
+    > .kui-tab-scaffold__scenes
+      > .kui-tab-scaffold__scene[data-active="true"]
+      > [data-component="nav-stack"]:only-child
+      > [data-nav-stack-viewport]
+      > [data-nav-active="true"]
+      > [data-component="pane"][data-appearance="sunken"]
+  )
+  > .kui-tab-scaffold__bar,
+.kui-tab-scaffold[data-separator="auto"]:not([data-chrome-dividers])
   > .kui-tab-scaffold__bar[data-scroll-divider*="t"],
-.kui-tab-scaffold[data-chrome-dividers="always"] > .kui-tab-scaffold__bar {
+.kui-tab-scaffold[data-separator="auto"][data-chrome-dividers="always"]
+  > .kui-tab-scaffold__bar {
   --_kui-tab-scaffold-bar-divider: var(--kui-color-neutral-border-normal);
 }
 

package/dist/styles/workbench.css

@@ -100,6 +100,7 @@
 }
 
 .kui-workbench__main {
+  position: relative;
   flex: 1;
   min-height: 0;
   overflow: auto;
@@ -113,6 +114,22 @@
   outline-offset: -3px;
 }
 
+/* A sole Pane can host an opaque full-width scroller above the main outline.
+   Keep the selected work-area ring in the final paint layer, without blocking
+   controls in that Pane. Other main compositions retain their own outline. */
+.kui-workbench__main:has(> [data-component="pane"]:only-child):is(
+    :focus-visible,
+    [data-outlined="true"]
+  )::after {
+  position: absolute;
+  z-index: 1;
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+  content: "";
+  inset: 0;
+  pointer-events: none;
+}
+
 /* When no Pane chrome is composed, the Workbench region owns its scroll.
    A resizable auto-overflow panel instead scrolls its content box so its
    separator handle remains fixed. Paint only that owner. */

package/dist/tab-navigator.d.ts

@@ -59,14 +59,21 @@ interface TabNavigatorProps<Id extends string = string> {
     tabs: readonly TabNavigatorTab<Id>[];
     /** The controlled active tab id (the app owns selection). */
     active: NoInfer<Id>;
+    /**
+     * The bar's top separator. `auto` (default) draws it against a sunken active
+     * work surface and otherwise follows `chromeDividers`; `hidden` suppresses
+     * the line, including a scroll divider.
+     */
+    separator?: 'auto' | 'hidden';
     /**
      * The line over the tab bar, where it meets the active scene. `scroll`
      * (default) shows it only while more of the scene's content lies below —
      * never at the scroll end or when the content fits — once
      * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above
      * the scaffold; unwired, it does not show. `always` shows it without the
-     * wiring; `none` never, even when wired. The line is the bar's own 1px top
-     * border, so no state moves the bar or a tab.
+     * wiring; `none` suppresses that scroll divider. A sunken active work
+     * surface still draws the separator unless `separator="hidden"`. The line
+     * is the bar's own 1px top border, so no state moves the bar or a tab.
      */
     chromeDividers?: 'scroll' | 'always' | 'none';
     className?: string;
@@ -81,6 +88,6 @@ interface TabNavigatorProps<Id extends string = string> {
  * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of
  * a bottom bar. See `docs/23-app-layouts.md` §3.4.
  */
-declare function TabNavigator<Id extends string>({ id, label, tabs, active, chromeDividers, className, slot, }: TabNavigatorProps<Id>): SafeHtml;
+declare function TabNavigator<Id extends string>({ id, label, tabs, active, separator, chromeDividers, className, slot, }: TabNavigatorProps<Id>): SafeHtml;
 
 export { TabNavigator, type TabNavigatorProps, type TabNavigatorTab };

package/dist/tab-navigator.js

@@ -6,6 +6,7 @@ function TabNavigator({
   label,
   tabs,
   active,
+  separator = "auto",
   chromeDividers = "scroll",
   className = "",
   slot
@@ -17,6 +18,7 @@ function TabNavigator({
       id,
       "data-component": "tab-scaffold",
       "data-tab-scaffold-id": id,
+      "data-separator": separator,
       "data-chrome-dividers": chromeDividers === "always" || chromeDividers === "none" ? chromeDividers : void 0,
       slot,
       children: [