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

package/dist/styles/nav-stack.css

@@ -58,68 +58,17 @@
   opacity: 0;
 }
 
+/* The chrome hosts the stack's real top Toolbar. It hands that toolbar the
+   edges the stack still touches through the edge context (never the bottom,
+   which the viewport owns); the toolbar pads for the sides it claims with
+   `safeAreaEdges` while its box paints through them. */
 .kui-nav-stack__chrome {
-  display: flex;
-  min-width: 0;
-  min-height: calc(2px + 2.625rem + var(--_kui-nav-stack-safe-block-start));
-  padding-block-start: var(--_kui-nav-stack-safe-block-start);
-  padding-inline: calc(
-      var(--kui-space-xs) + var(--_kui-nav-stack-safe-inline-start)
-    )
-    calc(var(--kui-space-xs) + var(--_kui-nav-stack-safe-inline-end));
-  align-items: center;
-  gap: var(--kui-space-xs);
+  --kui-edge-inset-block-start: var(--_kui-nav-stack-safe-block-start);
+  --kui-edge-inset-inline-start: var(--_kui-nav-stack-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-nav-stack-safe-inline-end);
   background: var(--kui-color-surface);
 }
 
-.kui-nav-stack__lead {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  align-items: center;
-  gap: var(--kui-space-2xs);
-}
-
-.kui-nav-stack__back {
-  display: grid;
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
-  color: inherit;
-  background: transparent;
-  cursor: pointer;
-  place-items: center;
-}
-
-.kui-nav-stack__back:hover {
-  border-color: var(--kui-color-border);
-  background: var(--kui-color-neutral-fill-normal);
-}
-
-.kui-nav-stack__back:focus-visible {
-  outline: var(--kui-focus-ring);
-  outline-offset: 1px;
-}
-
-.kui-nav-stack__back-icon {
-  display: block;
-}
-
-/* The title is ToolbarText (which owns its font, height, and ellipsis); it just
-   needs to flex to fill the lead zone beside the back control. */
-.kui-nav-stack__title {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.kui-nav-stack__actions {
-  display: flex;
-  align-items: center;
-  gap: var(--kui-space-2xs);
-}
-
 .kui-nav-stack__viewport {
   --kui-edge-inset-block-start: var(--_kui-nav-stack-safe-block-start);
   --kui-edge-inset-block-end: var(--_kui-nav-stack-safe-block-end);
@@ -174,18 +123,16 @@
     var(--kui-edge-inset-block-end);
 }
 
-.kui-nav-stack__view:not(
-    :has(
-      > :is(
-          [data-component="pane"],
-          [data-component="nav-stack"],
-          [data-component="split-view"],
-          [data-component="workbench"],
-          [data-component="tab-scaffold"]
-        ):only-child
-    )
-  )
-  > * {
+.kui-nav-stack__view
+  > :not(
+    :is(
+      [data-component="pane"],
+      [data-component="nav-stack"],
+      [data-component="split-view"],
+      [data-component="workbench"],
+      [data-component="tab-scaffold"]
+    ):only-child
+  ) {
   --kui-edge-inset-block-start: 0px;
   --kui-edge-inset-block-end: 0px;
   --kui-edge-inset-inline-start: 0px;
@@ -214,10 +161,45 @@
   padding-block-end: var(--_kui-nav-stack-safe-block-end);
   padding-inline: var(--_kui-nav-stack-safe-inline-start)
     var(--_kui-nav-stack-safe-inline-end);
-  border-block-start: 1px solid var(--kui-color-border);
+  border-block-start: 1px solid
+    var(--_kui-nav-stack-bottom-divider, transparent);
   background: var(--kui-color-surface);
 }
 
+/* The live chrome is the containing block of its scroll divider; a
+   cross-fading copy stays absolutely positioned. */
+.kui-nav-stack__chrome:not(.kui-nav-stack__chrome-copy) {
+  position: relative;
+}
+
+/* Chrome dividers: with `chromeDividers="scroll"` (the default, no
+   attribute) the top chrome draws a line along its bottom edge while the
+   active view's content is scrolled beneath it, and the bottom toolbar
+   colors its 1px top border while more content lies below it — never when
+   the content fits. `wireScrollDividers` reports that state through
+   `data-scroll-divider`; `always` draws both lines without it, and `none`
+   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])
+  > .kui-nav-stack__chrome[data-scroll-divider*="b"]::after,
+.kui-nav-stack[data-chrome-dividers="always"] > .kui-nav-stack__chrome::after {
+  position: absolute;
+  block-size: 1px;
+  background: var(--kui-color-neutral-border-normal);
+  content: "";
+  inset-block-end: 0;
+  inset-inline: 0;
+  pointer-events: none;
+}
+
+.kui-nav-stack: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-bottom-divider: var(--kui-color-neutral-border-normal);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .kui-nav-stack__view,
   .kui-nav-stack__chrome,
@@ -226,3 +208,13 @@
     transition: none;
   }
 }
+
+/* As the only child of a Workbench region (its main area or a panel's
+   content, which the Workbench marks with `data-workbench-main` /
+   `data-workbench-panel-content`), a NavStack fills the region, so a
+   composed toolbar's footer (or the app's own) sits at the region's bottom
+   edge rather than under short content. */
+:is([data-workbench-main], [data-workbench-panel-content])
+  > [data-component="nav-stack"]:only-child {
+  height: 100%;
+}

package/dist/styles/pane.css

@@ -9,7 +9,8 @@
   min-height: 0;
   padding: 0;
   box-sizing: border-box;
-  border: 0 solid var(--kui-pane-separator-color, var(--kui-color-border));
+  border: 0 solid
+    var(--kui-pane-separator-color, var(--kui-color-neutral-border-normal));
   border-block-start-width: var(--kui-pane-separator-block-start-width);
   border-block-end-width: var(--kui-pane-separator-block-end-width);
   border-inline-start-width: var(--kui-pane-separator-inline-start-width);
@@ -145,3 +146,84 @@
   flex-direction: column;
   grid-area: footer;
 }
+
+/* Chrome dividers: one line under the header and one over the footer, where
+   the pinned chrome meets the scrolling content, whatever the chrome holds.
+   `chromeDividers="scroll"` (the default, no attribute) draws each only while
+   `wireScrollDividers` reports content scrolled away beneath it through
+   `data-scroll-divider` on the slot; `always` draws both; `none` neither. The
+   line is an inset shadow inside the slot, so showing or hiding it never
+   moves the chrome or the content. */
+.kui-pane > :is(.kui-pane__header, .kui-pane__toolbar, .kui-pane__footer) {
+  --_kui-pane-chrome-divider: transparent;
+}
+
+.kui-pane > :is(.kui-pane__header, .kui-pane__toolbar) {
+  box-shadow: inset 0 -1px var(--_kui-pane-chrome-divider);
+}
+
+.kui-pane > .kui-pane__footer {
+  box-shadow: inset 0 1px var(--_kui-pane-chrome-divider);
+}
+
+.kui-pane:not([data-chrome-dividers])
+  > :is(.kui-pane__header, .kui-pane__toolbar)[data-scroll-divider*="b"],
+.kui-pane:not([data-chrome-dividers])
+  > .kui-pane__footer[data-scroll-divider*="t"],
+.kui-pane[data-chrome-dividers="always"]
+  > :is(.kui-pane__header, .kui-pane__toolbar, .kui-pane__footer) {
+  --_kui-pane-chrome-divider: var(
+    --kui-pane-separator-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}
+
+/* `chromePlacement="auto"`: the header and footer stay pinned while the pane
+   is tall enough; below 480px of height (30rem, so it scales with the text
+   size) the whole pane scrolls as one column instead, so tall chrome can never
+   squeeze the content to nothing. The pane is its own size container and lays
+   its slots out as a column: while tall, the content fills the space between
+   the chrome and scrolls itself, and the pane never scrolls; while short, the
+   content takes its natural height and the pane scrolls. */
+.kui-pane[data-chrome-placement="auto"] {
+  container: kui-pane / size;
+  display: flex;
+  overflow-y: auto;
+  flex-direction: column;
+  overscroll-behavior: contain;
+}
+
+.kui-pane[data-chrome-placement="auto"]
+  > :is(.kui-pane__header, .kui-pane__footer) {
+  flex: none;
+}
+
+.kui-pane[data-chrome-placement="auto"] > .kui-pane__content {
+  flex: 1 1 0;
+}
+
+@container kui-pane (max-height: 30rem) {
+  .kui-pane[data-chrome-placement="auto"] > .kui-pane__content {
+    flex: none;
+    overflow: visible;
+  }
+}
+
+/* As the only child of a Workbench region (its main area or a panel's
+   content, which the Workbench marks with `data-workbench-main` /
+   `data-workbench-panel-content`), a Pane fills the region, so a
+   composed toolbar's footer (or the app's own) sits at the region's bottom
+   edge rather than under short content. */
+:is([data-workbench-main], [data-workbench-panel-content])
+  > [data-component="pane"]:only-child {
+  height: 100%;
+}
+
+/* As the only child of a NavStack view or a TabScaffold scene, a Pane fills
+   it too, so its content owns the scroll and its header and footer stay
+   pinned; the view or scene then never scrolls (it hands the Pane its
+   safe-area edge context, which the Pane's slots apply). */
+:is(.kui-nav-stack__view, .kui-tab-scaffold__scene)
+  > [data-component="pane"]:only-child {
+  height: 100%;
+}

package/dist/styles/popup-menu.css

@@ -10,3 +10,232 @@
   white-space: nowrap;
   clip-path: inset(50%);
 }
+
+/* A PopupMenu draws exactly the Select's popup: the same caret motion, surface
+   inset, row geometry, reserved check column, current-row fill, and group
+   titles, all read from the private popup-choice contract in foundation.css
+   (select.css reads the same values). */
+
+/* The trigger caret turns to face the open menu, like the Select's. */
+.kui-popup-menu > wa-button::part(caret) {
+  rotate: 0deg;
+  transition: var(--_kui-popup-caret-transition);
+}
+.kui-popup-menu[open] > wa-button::part(caret) {
+  rotate: var(--_kui-popup-caret-open-rotation);
+}
+
+/* The Select's popup fades in place; Web Awesome's dropdown also scales from
+   90%. Holding the scale leaves the shared fade. */
+.kui-popup-menu::part(menu) {
+  padding: var(--_kui-popup-inset);
+  gap: var(--_kui-popup-row-gap);
+  scale: none !important;
+}
+
+.kui-popup-menu > wa-dropdown-item {
+  /* Leading inset plus the Select's check column, so item icons and labels
+     start where a Select option's do. */
+  padding: var(--_kui-popup-row-padding-block)
+    var(--_kui-popup-row-padding-inline-end) var(--_kui-popup-row-padding-block)
+    calc(
+      var(--_kui-popup-row-padding-inline-start) +
+        var(--_kui-popup-row-check-width)
+    );
+}
+.kui-popup-menu > wa-dropdown-item::part(label) {
+  padding-block: var(--_kui-popup-row-label-padding-block);
+  line-height: var(--_kui-popup-row-label-line-height);
+}
+/* A keyboard-focused item is the menu's current row: the Select's brand fill,
+   with no second focus ring inside the open popup. */
+.kui-popup-menu > wa-dropdown-item:focus-visible {
+  outline: none;
+  color: var(--_kui-popup-row-current-color);
+  background-color: var(--_kui-popup-row-current-background);
+}
+.kui-popup-menu > wa-divider {
+  --spacing: 0.5em;
+}
+
+/* Center the icon on the label's line, like the Select's start slot. */
+.kui-popup-menu > wa-dropdown-item::part(icon) {
+  display: flex;
+  align-self: center;
+}
+.kui-popup-menu__icon {
+  display: inline-flex;
+  width: var(--_kui-popup-row-icon-size);
+  height: var(--_kui-popup-row-icon-size);
+  flex: none;
+  /* Web Awesome spaces a slotted item icon 0.75em from its label (an
+     !important shadow rule). Sizing that em makes the gap the Select's. */
+  font-size: calc(var(--_kui-popup-row-icon-gap) / 0.75);
+}
+.kui-popup-menu__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* A group title matches the Select's group title. It is a styled element
+   rather than a slotted heading, whose Web Awesome metrics are !important. */
+.kui-popup-menu__heading {
+  padding: var(--_kui-popup-group-title-padding);
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-2xs);
+  font-weight: var(--_kui-popup-group-title-font-weight);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+/* In a ToolbarControlGroup a PopupMenu sizes itself in the group's context:
+   the group lays out its own native and raw Web Awesome children and names a
+   PopupMenu only to key its own state on it. The trigger takes the group's
+   control height (40px, or 32px in a compact group). A mixed-content trigger
+   in a nested-dropdown group grows for its label plus the caret; a fixed 32px
+   base would center both outside its host, painting the label across the
+   separator and the caret beyond the group border. */
+/* The trigger button takes the group's control metrics, as the group's own
+   raw wa-button children do (toolbar-control-group.css excludes this
+   trigger). The PopupMenu ancestor sits in `:where()` so each rule keeps the
+   specificity of the group's matching raw-child rule and resolves against the
+   group's attribute-keyed variants exactly as they do. */
+.kui-toolbar-control-group :where(wa-dropdown.kui-popup-menu) > wa-button {
+  --wa-form-control-height: 2.5rem;
+  display: inline-flex;
+  line-height: 0;
+  align-items: center;
+  justify-content: center;
+  --wa-color-fill-quiet: transparent;
+}
+.kui-toolbar-control-group[data-size="compact"]
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button {
+  --wa-form-control-height: 2rem;
+}
+.kui-toolbar-control-group[data-content="mixed"]
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button {
+  line-height: normal;
+}
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button
+  > svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+}
+/* Toolbar controls never wrap: a slotted icon and its label share one row. */
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button::part(label) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kui-space-xs);
+  white-space: nowrap;
+}
+/* At least a circle around an icon-only trigger, with the group's item radius;
+   hover lifts the trigger like a group button, except in a `single` group,
+   whose whole surface shows the hover (toolbar-control-group.css). */
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button::part(base) {
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(
+    --kui-toolbar-item-radius,
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
+  );
+}
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button:hover::part(base) {
+  border-color: var(--kui-toolbar-control-border);
+  background-color: var(--kui-toolbar-control-hover-background);
+}
+.kui-toolbar-control-group[data-single="true"]
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button:hover::part(base) {
+  border-color: transparent;
+  background: transparent;
+}
+.kui-toolbar-control-group > wa-dropdown.kui-popup-menu {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+.kui-toolbar-control-group > wa-dropdown.kui-popup-menu,
+.kui-toolbar-control-group > wa-dropdown.kui-popup-menu > wa-button,
+.kui-toolbar-control-group
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  min-width: 2.5rem;
+  height: 2.5rem;
+}
+.kui-toolbar-control-group[data-size="compact"] > wa-dropdown.kui-popup-menu,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base),
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown.kui-popup-menu
+  wa-button,
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown.kui-popup-menu
+  wa-button::part(base) {
+  min-width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+}
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
+  > wa-dropdown.kui-popup-menu {
+  margin: -2px;
+}
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button,
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  min-width: max-content;
+}
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  width: max-content;
+}
+.kui-toolbar-control-group[data-single="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  width: max-content;
+}
+
+/* The menu insets a composing parent asks for. A PopupMenu applies them to
+   itself; its default is the Select listbox inset above, which a
+   ToolbarControlGroup's `standard` inset keeps. A PopupSurface's inset follows
+   the group's, so a surface wins when both apply. */
+.kui-toolbar-control-group[data-menu-inset="compact"]
+  wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0.25rem;
+}
+.kui-toolbar-control-group[data-menu-inset="list-zero"]
+  wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0;
+}
+.kui-popup-surface[data-inset="standard"]
+  > wa-dropdown.kui-popup-menu::part(menu) {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-popup-surface[data-inset="compact"]
+  > wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0.25rem;
+}
+.kui-popup-surface[data-inset="list-zero"]
+  > wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0;
+}

package/dist/styles/resizable-region.css

@@ -1,17 +1,27 @@
 .kui-resizable-region {
-  --kui-resizable-region-separator-color: var(--kui-color-border);
+  --kui-resizable-region-separator-color: var(
+    --kui-color-neutral-border-normal
+  );
   --kui-resizable-region-handle-color: var(--kui-color-neutral-on-quiet);
   --kui-resizable-region-handle-active-color: var(--kui-color-text-link);
   /* Extra track a horizontal region adds when it reaches an unsafe screen edge,
      so its surface paints through the unsafe area while its committed size
-     stays the content width. A composing layout sets it on the region (a
-     SplitView list does); it never inherits into a nested region. */
+     stays the content width. The region sets it itself from the context of a
+     layout that places it at an edge (a SplitView list); it never inherits
+     into a nested region. */
   --kui-resizable-region-edge-extent: 0px;
   position: relative;
   display: flex;
   min-width: 0;
   min-height: 0;
 }
+/* As a split SplitView's list, the region's track grows by the unsafe
+   inline-start inset the SplitView provides, while its committed size stays
+   the content width. A collapsed region stays shut. */
+.kui-split-view[data-split-mode="split"]
+  > .kui-resizable-region:not([data-collapsed="true"]) {
+  --kui-resizable-region-edge-extent: var(--_kui-split-view-safe-inline-start);
+}
 .kui-resizable-region[data-axis="horizontal"] {
   width: calc(
     var(--kui-resizable-region-size) + var(--kui-resizable-region-edge-extent)
@@ -211,6 +221,37 @@
 .kui-resizable-region[data-presentation="hidden"] {
   display: none;
 }
+/* An open side overlay (a horizontal region) covers the work area beside it,
+   so that area's floating controls (a FloatingToolbar, a restore corner) are
+   hidden, not merely stacked beneath it: they never paint over the overlay
+   whatever stacking context an app puts them in, and hidden they leave the
+   tab order and the accessibility tree. They come back as the overlay
+   closes. The ResizableRegion's own covered context,
+   `--_kui-resizable-region-covered`, is read by FloatingToolbar and the
+   layouts' restore corners. It is set on the overlay's container and cleared again on the
+   overlay regions in it, so it reaches the overlay's siblings only. It is
+   never set by a universal selector below the :has() container (`:has(…) >
+   :not(…)`): Chromium then restyles every child of every ancestor of a DOM
+   change, which made each change in a long list about 30× slower. */
+:where(
+  :has(
+    > .kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"]:not(
+        [data-collapsed="true"]
+      )
+  )
+) {
+  --_kui-resizable-region-covered: hidden;
+}
+:where(
+    :has(
+      > .kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"]:not(
+          [data-collapsed="true"]
+        )
+    )
+  )
+  > .kui-resizable-region[data-presentation="overlay"] {
+  --_kui-resizable-region-covered: initial;
+}
 
 @container (max-width: 44rem) {
   .kui-resizable-region[data-responsive-fill-at="narrow"] {
@@ -256,27 +297,38 @@
    beside the collapsed one — a direct child of that container or of one of
    its direct children (the app's work-area column) — owns the container's
    bottom, so the corner floats above the drawer's top edge instead of over
-   it. CollapsiblePanel drawers publish the same anchor. A drawer nested
-   deeper, inside the work area's own content, belongs to another layout and
-   is scoped out. Without anchor positioning the corner keeps the container's
-   bottom edge. */
-.kui-resizable-region[data-axis="vertical"][data-edge="start"][data-presentation="inline"]:not(
+   it. The region publishes that edge as an anchor only there, beside a
+   CollapsiblePanel or ResizableRegion restore control (matched by their
+   restore attributes); CollapsiblePanel drawers publish the same anchor. A
+   drawer nested deeper, inside the work area's own content, belongs to
+   another layout and publishes nothing. The selector ends on the region, not
+   on a universal `> * > * > *` scope below the container: a universal
+   selector after a :has() container restyles every child of every ancestor
+   of a DOM change in Chromium. Without anchor positioning the corner keeps
+   the container's bottom edge. */
+:where(
+    :has(> [data-panel-restore], > [data-region-restore]),
+    :has(> [data-panel-restore], > [data-region-restore]) > *
+  )
+  > .kui-resizable-region[data-axis="vertical"][data-edge="start"][data-presentation="inline"]:not(
     [data-collapsed="true"]
   ) {
   anchor-name: --kui-restore-drawer;
 }
-:where(:has(> .kui-resizable-region__restore)) > * > * > * {
-  anchor-scope: --kui-restore-drawer;
-}
 .kui-resizable-region__restore {
   --_kui-resizable-region-restore-inset: var(
     --kui-resizable-region-restore-inset,
     1rem
   );
-  /* The corner owns the inset, so a FloatingToolbar composed here floats
-     from this point instead of adding its own inset on top. */
-  --kui-floating-toolbar-inset: 0px;
   position: absolute;
+  /* Hidden while an open side overlay covers the content (see above). */
+  visibility: var(
+    --_kui-workbench-covered,
+    var(
+      --_kui-collapsible-panel-covered,
+      var(--_kui-resizable-region-covered, inherit)
+    )
+  );
   z-index: var(
     --kui-resizable-region-restore-z,
     calc(var(--kui-resizable-region-overlay-z, 41) - 2)
@@ -379,7 +431,10 @@
    and the separator has less room past it than the handle's overhang, which
    puts it at the parent's edge. The handle then sits wholly inside the region
    and keeps its separator line on the region's edge, so a clipping ancestor
-   never cuts off half of the hit target or its focus ring. */
+   never cuts off half of the hit target or its focus ring. The grip stays
+   centered in the handle there: the separator is the clipping edge, so a grip
+   centered on it would be cut in half. Everywhere else the grip is drawn on
+   the separator line. */
 .kui-resizable-region[data-handle-inset][data-axis="horizontal"][data-edge="end"]
   > .kui-resizable-region__handle {
   right: 0;