@kerfjs/ui 5.0.0-beta.106 → 5.0.0-beta.108

package/dist/styles/components/actions/split-button/split-button.css

@@ -1,20 +1,32 @@
 /* One loud semantic fill split into a primary half and a narrow options
    trigger, with a hairline divider in the foreground color. Both halves are
-   native buttons on the shared fill; each brightens on its own hover. */
+   native buttons on the shared fill; each brightens on its own hover. The
+   outer corners take the shared control radius, or full round ends as a
+   pill; the divider seam between the halves stays square. */
 .kui-split-button {
   --_kui-split-button-fill: var(--kui-color-brand-fill-loud);
   --_kui-split-button-on: var(--kui-color-brand-on-loud);
+  --_kui-split-button-radius: var(
+    --kui-layout-rounded-radius,
+    calc(1px + 0.6875rem)
+  );
   display: inline-grid;
   min-width: 0;
   min-height: 2.75rem;
-  overflow: hidden;
-  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  border-radius: var(--_kui-split-button-radius);
   color: var(--_kui-split-button-on);
   background: var(--_kui-split-button-fill);
   grid-template-columns: minmax(0, auto) 2.5rem;
   font-weight: var(--kui-font-weight-semibold);
 }
 
+.kui-split-button[data-shape="pill"] {
+  --_kui-split-button-radius: var(
+    --kui-layout-pill-radius,
+    calc(1px + 1.3125rem)
+  );
+}
+
 .kui-split-button[data-tone="neutral"] {
   --_kui-split-button-fill: var(--kui-color-neutral-fill-loud);
   --_kui-split-button-on: var(--kui-color-neutral-on-loud);
@@ -50,6 +62,7 @@
   padding-inline: var(--kui-space-s);
   border: 0;
   border-radius: 0;
+  appearance: none;
   color: inherit;
   background: transparent;
   cursor: pointer;
@@ -69,11 +82,44 @@
   background: color-mix(in srgb, currentColor 12%, transparent);
 }
 
-/* The group clips outer outlines at its rounded corners, so the ring sits
-   inside each half. */
+/* Each half rounds its outer corners with the group, so its hover fill and
+   focus ring follow the rounded or pill end. The group does not clip, so
+   these radii are what keep a half's fill inside the group's corners. */
+.kui-split-button > .kui-split-button__primary {
+  border-start-start-radius: var(--_kui-split-button-radius);
+  border-end-start-radius: var(--_kui-split-button-radius);
+}
+
+.kui-split-button > .kui-split-button__options {
+  border-start-end-radius: var(--_kui-split-button-radius);
+  border-end-end-radius: var(--_kui-split-button-radius);
+}
+
+/* The ring sits outside the focused half, offset like Button's, so it is
+   drawn against the surrounding surface rather than the loud fill, whose
+   brand color can match the ring's own (an inset ring vanished there). The
+   segment along the divider overlaps the neighboring half, painted above it. */
+.kui-split-button > button:focus {
+  outline: none;
+}
+
 .kui-split-button > button:focus-visible {
   outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+/* focusRingInset: inside an ancestor that clips overflow, each half's ring
+   moves inside its box. The loud fill can share the ring's hue (brand), so a
+   surface-colored line runs inside the ring: the ring then meets the surface
+   on both edges, as the outside ring does, on every tone. The line runs 3px
+   past the ring, wide enough to stay solid at a fractional position. It
+   paints the surface context, as Button's does (foundation.css). */
+.kui-split-button[data-focus-ring-inset="true"] > button:focus-visible {
   outline-offset: -3px;
+  box-shadow:
+    inset 0 0 0 6px var(--kui-color-surface-current-tint, transparent),
+    inset 0 0 0 6px var(--kui-color-surface-current-region, transparent),
+    inset 0 0 0 6px var(--kui-color-surface-current, var(--kui-color-surface));
 }
 
 .kui-split-button > button:disabled {

package/dist/styles/components/actions/toolbar/toolbar.css

@@ -16,6 +16,15 @@
   font-family: var(--kui-font-sans);
 }
 
+/* In a List, a vertical stack, the toolbar is chrome and keeps its whole
+   natural height. Its explicit one-band min-height (below) replaces the flex
+   item's automatic content minimum, so a column shrinking toward a long
+   flex scroller beside it would otherwise squeeze a wrapped or stacked
+   toolbar onto its first row and clip the rest. */
+.kui-list > .kui-toolbar {
+  flex-shrink: 0;
+}
+
 /* Safe areas: a toolbar compensates only for the inline edges its owner hands
    it through `--kui-edge-inset-inline-*` (a Pane header or footer does), so its
    box and dividers keep reaching the edge while its zones clear the unsafe

package/dist/styles/components/actions/toolbar-control-group/toolbar-control-group.css

@@ -132,6 +132,31 @@
   }
 }
 
+/* A sibling of an expanded trailing control yields to the trailing-priority
+   row the Toolbar moves that control onto: the same container queries and
+   responsiveAt keys as the Toolbar's own row (toolbar.css), so the group
+   hides exactly while the row is active and never wraps onto a third row at
+   a threshold restated with hideBelow. */
+@container kui-toolbar (max-width: 52rem) {
+  .kui-toolbar[data-responsive="trailing-priority"][data-responsive-at="narrow"]
+    > .kui-toolbar__trailing:has(> [data-expanded="true"])
+    > .kui-toolbar-control-group[data-visibility="yield-to-priority-row"]:not(
+      [data-expanded="true"]
+    ) {
+    display: none;
+  }
+}
+
+@container kui-toolbar (max-width: 44rem) {
+  .kui-toolbar[data-responsive="trailing-priority"][data-responsive-at="compact"]
+    > .kui-toolbar__trailing:has(> [data-expanded="true"])
+    > .kui-toolbar-control-group[data-visibility="yield-to-priority-row"]:not(
+      [data-expanded="true"]
+    ) {
+    display: none;
+  }
+}
+
 /* `shape="rounded"` swaps the default pill radius for the design system's softer
    rounded rectangle. The shared highlight contract derives every inner hover or
    selected surface from this outer radius and the group's full inset. */
@@ -206,7 +231,10 @@
     border-color 0.2s ease;
 }
 
-.kui-toolbar-control-group[data-content="search"]:has(
+/* A fill search spans a content-sized group's line. A `sizing="grow"` group
+   keeps its own grow basis instead (below): taking the whole line would make
+   it the line's hypothetical size and wrap every sibling group. */
+.kui-toolbar-control-group[data-content="search"]:not([data-sizing="grow"]):has(
     > .kui-search-field[data-expanded="true"][data-fill="true"]
   ) {
   width: 100%;

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

@@ -11,10 +11,14 @@
   border: 1px solid var(--kui-framed-list-border);
   border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
   background: var(--kui-color-surface-lowered);
+  --kui-color-surface-current-tint: var(--kui-color-surface-lowered);
   list-style: none;
 }
 
 .kui-framed-list[data-surface="base"] {
+  --kui-color-surface-current: var(--kui-color-surface);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
   background: var(--kui-color-surface);
 }
 
@@ -44,4 +48,6 @@
 
 .kui-framed-list__row[data-highlighted="true"] {
   background: var(--kui-color-brand-fill-quiet);
+  /* The row's controls sit on the tint, not the list's lowered fill. */
+  --kui-color-surface-current-tint: var(--kui-color-brand-fill-quiet);
 }

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

@@ -273,10 +273,16 @@
 
 /* `surface`: a solid background behind the stack and its insets. */
 .kui-list[data-surface="base"] {
+  --kui-color-surface-current: var(--kui-color-surface);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
   background: var(--kui-color-surface);
 }
 
 .kui-list[data-surface="raised"] {
+  --kui-color-surface-current: var(--kui-color-surface-raised);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
   background: var(--kui-color-surface-raised);
 }
 

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

@@ -29,6 +29,13 @@
   padding-block: var(--kui-list-header-title-padding-block, 0.25rem);
 }
 
+/* Wrapped label lines keep the compact header's 4px block inset off the
+   header edges; a one-line label still centers in the unchanged minimum
+   height. */
+.kui-list-header[data-wrap="true"] .kui-list-header__title {
+  padding-block: var(--kui-list-header-title-padding-block, 0.25rem);
+}
+
 .kui-list-header[data-divider="before"],
 .kui-list-header[data-divider="both"] {
   border-block-start: 1px solid

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

@@ -20,6 +20,9 @@
   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);
+  --kui-color-surface-current: var(--kui-color-surface-raised);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
   background: var(--kui-color-surface-raised);
   box-shadow: var(--kui-shadow-l);
   font: inherit;

package/dist/styles/components/forms/checkbox/checkbox.css

@@ -1,6 +1,7 @@
-/* Checkbox: a drawn box beside its label, with hint and error text on the
-   label's column. The native input sits invisibly over the box, so pointer,
-   keyboard, touch exploration, and forms all reach the real control. */
+/* Checkbox: a drawn box beside its label, with hint and error text directly
+   under the label on its column, as a grouped choice hint sits. The native
+   input sits invisibly over the box, so pointer, keyboard, touch
+   exploration, and forms all reach the real control. */
 .kui-checkbox {
   --_kui-checkbox-box: 1.25rem;
   --_kui-checkbox-gap: 0.5rem;
@@ -91,7 +92,6 @@
 .kui-checkbox__hint,
 .kui-checkbox__error {
   display: block;
-  margin-block-start: 0.4375rem;
   padding-inline-start: calc(
     var(--_kui-checkbox-box) + var(--_kui-checkbox-gap)
   );
@@ -106,8 +106,9 @@
 .kui-checkbox__error {
   color: var(--kui-color-danger-on-quiet);
 }
-.kui-checkbox__hint + .kui-checkbox__error {
-  margin-block-start: 0;
+/* Inside a CheckboxGroup an invalid group marks every box. */
+.kui-checkbox-group[data-invalid] .kui-checkbox__box {
+  border-color: var(--kui-color-danger-border-loud);
 }
 @media (forced-colors: active) {
   .kui-checkbox__box {

package/dist/styles/components/forms/checkbox-group/checkbox-group.css

@@ -0,0 +1,63 @@
+/* CheckboxGroup: the group label, the choices (each a Kerf Checkbox, which
+   draws its own box, label, and hint), and hint and error text below. It is
+   laid out exactly like a RadioGroup: each box sits on the group's
+   inline-start edge and stacked choices sit 8px apart, the 28px pitch
+   checkboxes and radios share. */
+.kui-checkbox-group {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  border: none;
+  font-size: var(--kui-font-m, 1rem);
+  font-weight: 400;
+  line-height: 1.2;
+}
+.kui-checkbox-group[data-size="compact"] {
+  font-size: var(--kui-font-s, 0.875rem);
+}
+/* The label matches every Kerf form control's label (RadioGroup's too). */
+.kui-checkbox-group__label {
+  display: block;
+  float: none;
+  margin-block-end: 0.375rem;
+  padding: 0;
+  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+.kui-checkbox-group__choices {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kui-space-xs);
+}
+.kui-checkbox-group[data-orientation="horizontal"]
+  .kui-checkbox-group__choices {
+  flex-direction: row;
+  flex-wrap: wrap;
+  column-gap: 1.5rem;
+}
+.kui-checkbox-group__hint,
+.kui-checkbox-group__error {
+  display: block;
+  margin-block-start: 0.4375rem;
+  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s, 0.875rem);
+  line-height: 1.6;
+}
+.kui-checkbox-group[data-size="compact"]
+  :is(.kui-checkbox-group__hint, .kui-checkbox-group__error) {
+  font-size: var(--kui-font-xs, 0.75rem);
+}
+.kui-checkbox-group__error {
+  color: var(--kui-color-danger-on-quiet);
+}
+.kui-checkbox-group__hint + .kui-checkbox-group__error {
+  margin-block-start: 0;
+}

package/dist/styles/components/forms/color-picker/color-picker.css

@@ -1,8 +1,10 @@
-/* ColorPicker: a saturation and brightness area, hue and opacity sliders, a
-   color-model menu with its tools, channel fields, a hex and opacity row,
-   then preset and sample swatches. The surface's custom properties
-   (--_kui-color-picker-h/s/v/a and the opaque color) place the thumbs and
-   paint the tracks; the wiring updates them while a person drags. */
+/* ColorPicker: a saturation and brightness area, a slider per channel of the
+   color model plus an opacity slider, a color-model menu with its tools,
+   channel fields, a hex and opacity row, then preset and sample swatches.
+   The surface's custom properties (--_kui-color-picker-h/s/v/a and the
+   opaque color) place the area thumb and paint the opacity slider; each
+   channel slider carries its own track gradient and thumb color inline. The
+   wiring updates both while a person drags. */
 .kui-color-picker {
   display: grid;
   width: 100%;
@@ -18,7 +20,18 @@
   font-size: var(--kui-font-m, 1rem);
 }
 
+/* The area and every slider track carry an inner edge halfway to the text
+   color, so an area or track as dark (or as light) as the surface behind it
+   keeps a visible boundary in either scheme. Every thumb draws a two-tone
+   ring, white inside a dark outline, so it keeps a 3:1 boundary over light
+   and dark colors alike. */
 .kui-color-picker__surface {
+  --_kui-color-picker-track-edge: color-mix(
+    in srgb,
+    var(--kui-color-text) 50%,
+    transparent
+  );
+  --_kui-color-picker-thumb-outline: rgb(0 0 0 / 0.6);
   --_kui-color-picker-checker: repeating-conic-gradient(
       var(--kui-color-neutral-fill-normal) 0% 25%,
       var(--kui-color-surface) 0% 50%
@@ -38,6 +51,7 @@
   background:
     linear-gradient(to top, #000, transparent),
     linear-gradient(to right, #fff, hsl(var(--_kui-color-picker-h) 100% 50%));
+  box-shadow: inset 0 0 0 1px var(--_kui-color-picker-track-edge);
   cursor: crosshair;
   touch-action: none;
 }
@@ -58,17 +72,28 @@
   border-radius: 50%;
   background: var(--_kui-color-picker-color);
   box-shadow:
-    0 0 0 1px rgb(0 0 0 / 0.3),
+    0 0 0 1px var(--_kui-color-picker-thumb-outline),
     var(--kui-shadow-s);
   pointer-events: none;
   translate: -50% -50%;
 }
 
-/* The hue and opacity sliders: native ranges drawn as 12px tracks with a
-   round thumb that shows the color at that point. */
-.kui-color-picker__hue,
+/* The channel and opacity sliders, one group: native ranges drawn as 12px
+   tracks with a round thumb that shows the color at that point. A channel
+   slider's inline style carries its track (the colors its channel produces
+   while the others hold, or the full rainbow for hue) and its thumb color.
+   Every track runs in the writing direction, as the native range does, and
+   carries the surface's inner edge. */
+.kui-color-picker__sliders {
+  display: grid;
+  min-width: 0;
+  gap: var(--kui-space-xs, 0.5rem);
+}
+
+.kui-color-picker__slider,
 .kui-color-picker__opacity {
   --_kui-color-picker-thumb: 1.25rem;
+  --_kui-color-picker-track-direction: to right;
 
   display: block;
   width: 100%;
@@ -81,23 +106,22 @@
   appearance: none;
 }
 
-.kui-color-picker__hue {
-  --_kui-color-picker-track: linear-gradient(
-    to right,
-    #f00,
-    #ff0,
-    #0f0,
-    #0ff,
-    #00f,
-    #f0f,
-    #f00
-  );
-  --_kui-color-picker-thumb-color: hsl(var(--_kui-color-picker-h) 100% 50%);
+.kui-color-picker__slider[hidden] {
+  display: none;
+}
+
+.kui-color-picker__slider:dir(rtl),
+.kui-color-picker__opacity:dir(rtl) {
+  --_kui-color-picker-track-direction: to left;
 }
 
 .kui-color-picker__opacity {
   --_kui-color-picker-track:
-    linear-gradient(to right, transparent, var(--_kui-color-picker-color)),
+    linear-gradient(
+      var(--_kui-color-picker-track-direction),
+      transparent,
+      var(--_kui-color-picker-color)
+    ),
     var(--_kui-color-picker-checker);
   --_kui-color-picker-thumb-color: color-mix(
     in srgb,
@@ -106,23 +130,23 @@
   );
 }
 
-.kui-color-picker__hue::-webkit-slider-runnable-track,
+.kui-color-picker__slider::-webkit-slider-runnable-track,
 .kui-color-picker__opacity::-webkit-slider-runnable-track {
   height: 0.75rem;
   border-radius: var(--kui-radius-pill);
   background: var(--_kui-color-picker-track);
-  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
+  box-shadow: inset 0 0 0 1px var(--_kui-color-picker-track-edge);
 }
 
-.kui-color-picker__hue::-moz-range-track,
+.kui-color-picker__slider::-moz-range-track,
 .kui-color-picker__opacity::-moz-range-track {
   height: 0.75rem;
   border-radius: var(--kui-radius-pill);
   background: var(--_kui-color-picker-track);
-  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
+  box-shadow: inset 0 0 0 1px var(--_kui-color-picker-track-edge);
 }
 
-.kui-color-picker__hue::-webkit-slider-thumb,
+.kui-color-picker__slider::-webkit-slider-thumb,
 .kui-color-picker__opacity::-webkit-slider-thumb {
   width: var(--_kui-color-picker-thumb);
   height: var(--_kui-color-picker-thumb);
@@ -132,12 +156,12 @@
   border-radius: 50%;
   background: var(--_kui-color-picker-thumb-color);
   box-shadow:
-    0 0 0 1px rgb(0 0 0 / 0.2),
+    0 0 0 1px var(--_kui-color-picker-thumb-outline),
     var(--kui-shadow-s);
   appearance: none;
 }
 
-.kui-color-picker__hue::-moz-range-thumb,
+.kui-color-picker__slider::-moz-range-thumb,
 .kui-color-picker__opacity::-moz-range-thumb {
   width: var(--_kui-color-picker-thumb);
   height: var(--_kui-color-picker-thumb);
@@ -146,22 +170,22 @@
   border-radius: 50%;
   background: var(--_kui-color-picker-thumb-color);
   box-shadow:
-    0 0 0 1px rgb(0 0 0 / 0.2),
+    0 0 0 1px var(--_kui-color-picker-thumb-outline),
     var(--kui-shadow-s);
 }
 
-.kui-color-picker__hue:focus-visible,
+.kui-color-picker__slider:focus-visible,
 .kui-color-picker__opacity:focus-visible {
   outline: none;
 }
 
-.kui-color-picker__hue:focus-visible::-webkit-slider-thumb,
+.kui-color-picker__slider:focus-visible::-webkit-slider-thumb,
 .kui-color-picker__opacity:focus-visible::-webkit-slider-thumb {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
-.kui-color-picker__hue:focus-visible::-moz-range-thumb,
+.kui-color-picker__slider:focus-visible::-moz-range-thumb,
 .kui-color-picker__opacity:focus-visible::-moz-range-thumb {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
@@ -317,10 +341,21 @@
   cursor: not-allowed;
 }
 
+/* Increased contrast draws the area and track edge in the full text color. */
+@media (prefers-contrast: more) {
+  .kui-color-picker__surface {
+    --_kui-color-picker-track-edge: var(--kui-color-text);
+  }
+}
+
 @media (forced-colors: active) {
+  .kui-color-picker__surface {
+    --_kui-color-picker-track-edge: CanvasText;
+  }
+
   .kui-color-picker__area,
   .kui-color-picker__area-thumb,
-  .kui-color-picker__hue,
+  .kui-color-picker__slider,
   .kui-color-picker__opacity {
     forced-color-adjust: none;
   }

package/dist/styles/components/forms/radio-group/radio-group.css

@@ -1,6 +1,9 @@
-/* RadioGroup: the group label, the choices on the text column (each a drawn
-   circle beside its label, the native radio invisibly over the circle), and
-   hint and error text below. */
+/* RadioGroup: the group label, the choices (each a drawn circle beside its
+   label, the native radio invisibly over the circle), and hint and error text
+   below. Each circle sits on the group's inline-start edge, where a
+   Checkbox draws its box, so stacked checkboxes and radios share one control
+   column, and stacked choices sit 8px apart: the same 28px pitch as Checkboxes
+   in a List gap="xs". */
 .kui-radio-group {
   --_kui-radio-group-size: 1.25rem;
   --_kui-radio-group-gap: 0.5rem;
@@ -36,8 +39,7 @@
 .kui-radio-group__choices {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
-  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  gap: var(--kui-space-xs);
 }
 .kui-radio-group[data-orientation="horizontal"] .kui-radio-group__choices {
   flex-direction: row;

package/dist/styles/components/forms/select/select.css

@@ -67,8 +67,12 @@
   outline-color: transparent;
 }
 /* Focus shows on the control (pointer or keyboard), but not while its
-   listbox is open: the listbox shows where focus is then. */
-.kui-select:not([open]):focus-within > .kui-select__trigger {
+   listbox is open: the listbox shows where focus is then. A Select whose
+   enclosing group owns the ring (`focusRingOwner="group"`) never paints its
+   own here: the exclusion lives in this selector, not in a later override,
+   because the focus state outranks any plain owner rule. */
+.kui-select:not([data-focus-ring-owner="group"]):not([open]):focus-within
+  > .kui-select__trigger {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }

package/dist/styles/components/forms/switch/switch.css

@@ -1,5 +1,6 @@
-/* Switch: a track and thumb beside its label, with a hint on the label's
-   column. The native input sits invisibly over the track. */
+/* Switch: a track and thumb beside its label, with a hint directly under
+   the label on its column, as a Checkbox hint sits. The native input sits
+   invisibly over the track. */
 .kui-switch {
   --_kui-switch-height: 1.25rem;
   --_kui-switch-gap: 0.5rem;
@@ -99,7 +100,6 @@
 }
 .kui-switch__hint {
   display: block;
-  margin-block-start: 0.4375rem;
   padding-inline-start: calc(
     var(--_kui-switch-height) * 1.75 + var(--_kui-switch-gap)
   );

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

@@ -45,10 +45,12 @@
    root scroll in its short mode, while its content remains transparent. */
 .kui-pane[data-appearance="sunken"] > .kui-pane__content {
   background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+  --kui-color-surface-current-region: var(--kui-color-surface-lowered);
 }
 
 .kui-pane[data-appearance="sunken"][data-chrome-placement="auto"] {
   background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+  --kui-color-surface-current-region: var(--kui-color-surface-lowered);
 }
 
 .kui-pane[data-appearance="sunken"][data-chrome-placement="auto"]
@@ -56,8 +58,15 @@
   background: transparent;
 }
 
+/* The surface context follows the paint: the auto chrome is opaque again. */
 .kui-pane[data-appearance="sunken"][data-chrome-placement="auto"]
   > :is(.kui-pane__header, .kui-pane__footer) {
+  --kui-color-surface-current: var(
+    --kui-pane-chrome-background,
+    var(--kui-color-surface)
+  );
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
   background: var(--kui-pane-chrome-background, var(--kui-color-surface));
 }
 
@@ -67,11 +76,16 @@
    surface instead. */
 .kui-pane[data-background] {
   background: var(--_kui-pane-background);
+  --kui-color-surface-current-region: var(--_kui-pane-background);
 }
 
+/* The transparent slots keep the root's surface context. */
 .kui-pane[data-background][data-appearance="sunken"] > .kui-pane__content,
 .kui-pane[data-background][data-appearance="sunken"][data-chrome-placement="auto"]
   > :is(.kui-pane__header, .kui-pane__footer) {
+  --kui-color-surface-current: inherit;
+  --kui-color-surface-current-region: inherit;
+  --kui-color-surface-current-tint: inherit;
   background: transparent;
 }
 
@@ -257,6 +271,16 @@
   background: var(--kui-chrome-material);
 }
 
+/* The material has no single color over scrolling content; the surface
+   context takes it at rest, as a tint over the region it covers. A clear
+   header paints nothing and keeps the inherited context. */
+.kui-pane[data-header-presentation="overlay"]:not(
+    [data-header-material="clear"]
+  )
+  > .kui-pane__header {
+  --kui-color-surface-current-tint: var(--kui-chrome-material);
+}
+
 .kui-pane[data-header-presentation="overlay"][data-header-overlay="measured"]:not(
     [data-chrome-placement="auto"]
   )

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

@@ -136,6 +136,7 @@
 .kui-workbench__main[data-appearance="sunken"],
 :is(.kui-workbench__rail, .kui-workbench__drawer)[data-appearance="sunken"] {
   background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+  --kui-color-surface-current-region: var(--kui-color-surface-lowered);
 }
 
 :is(
@@ -143,6 +144,8 @@
     .kui-workbench__drawer
   )[data-appearance="sunken"][data-resizable="true"][data-content-overflow="auto"] {
   background: transparent;
+  /* Only the content paints; the root keeps the inherited context. */
+  --kui-color-surface-current-region: inherit;
 }
 
 :is(
@@ -151,6 +154,7 @@
   )[data-appearance="sunken"][data-resizable="true"][data-content-overflow="auto"]
   > .kui-workbench__panel-content {
   background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
+  --kui-color-surface-current-region: var(--kui-color-surface-lowered);
 }
 
 .kui-workbench__main[data-drawer-inline-expanded="true"] {