@kerfjs/ui 5.0.0-beta.97 → 5.0.0-beta.99

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

@@ -188,6 +188,90 @@
   position: relative;
 }
 
+/* `chromePresentation="overlay"`: the top chrome (and any copy cross-fading
+   out of it) paints the translucent chrome material (opaque under reduced
+   transparency or increased contrast, without `backdrop-filter`, or in
+   forced colors). Once `wireNavStack` has measured the live chrome
+   (`data-chrome-overlay="measured"`, with its border-box block size, top
+   safe area included, published on this root), the chrome lies over the
+   viewport's top edge and the viewport hands that size to its views as the
+   block-start edge context, so a plain view, a sole Pane, or a nested layout
+   pads and scroll-pads by it: content scrolls beneath the chrome yet rests
+   clear of it. Unwired, the chrome stays docked in its own band, so it never
+   covers content it has not measured. */
+.kui-nav-stack[data-chrome-presentation="overlay"] > .kui-nav-stack__chrome {
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material);
+}
+
+.kui-nav-stack[data-chrome-presentation="overlay"][data-chrome-overlay="measured"]
+  > .kui-nav-stack__chrome:not(.kui-nav-stack__chrome-copy) {
+  position: absolute;
+  z-index: 2;
+  inset-block-start: 0;
+  /* A classic (space-taking) vertical scrollbar in the active view stays
+     uncovered: `wireNavStack` publishes its inline size, so the chrome ends
+     where the track begins and its thumb and arrows stay usable. An overlay
+     scrollbar takes no space and passes beneath the material like the
+     content. */
+  inset-inline: 0 var(--_kui-nav-stack-scrollbar-inline-size, 0px);
+}
+
+.kui-nav-stack[data-chrome-presentation="overlay"][data-chrome-overlay="measured"]
+  > .kui-nav-stack__viewport {
+  --kui-edge-inset-block-start: var(--_kui-nav-stack-chrome-block-size, 0px);
+}
+
+/* `bottomToolbarPresentation="overlay"`: the bottom toolbar (and any copy
+   cross-fading out of it) paints the same material. Once `wireNavStack` has
+   measured the live toolbar (`data-bottom-toolbar-overlay="measured"`, with
+   its border-box block size, bottom safe area and scroll-divider border
+   included, published on this root), the toolbar lies over the viewport's
+   bottom edge and the viewport hands that size to its views as the
+   block-end edge context (outranking the docked rule above that zeroes it),
+   so a plain view, a sole Pane's content or footer, or a nested layout pads
+   and scroll-pads by it: content scrolls beneath the toolbar yet its last
+   item rests clear of it. Unwired, the toolbar stays docked. */
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom {
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material);
+}
+
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"][data-bottom-toolbar-overlay="measured"]
+  > .kui-nav-stack__bottom:not(.kui-nav-stack__chrome-copy) {
+  position: absolute;
+  z-index: 2;
+  inset-block-end: 0;
+  /* Like the top chrome, it ends where a classic scrollbar's track begins. */
+  inset-inline: 0 var(--_kui-nav-stack-bottom-scrollbar-inline-size, 0px);
+}
+
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"][data-bottom-toolbar-overlay="measured"]
+  > .kui-nav-stack__viewport {
+  --kui-edge-inset-block-end: var(--_kui-nav-stack-bottom-block-size, 0px);
+}
+
+@media (forced-colors: active) {
+  .kui-nav-stack[data-chrome-presentation="overlay"] > .kui-nav-stack__chrome {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: Canvas;
+    border-block-end: 1px solid CanvasText;
+  }
+
+  /* Its always-present 1px top border becomes the visible edge. */
+  .kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+    > .kui-nav-stack__bottom {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: Canvas;
+    border-block-start-color: CanvasText;
+  }
+}
+
 /* 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

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

@@ -48,10 +48,21 @@
 .kui-tab-bar__tabs[data-snap-tabs="true"] {
   scroll-snap-type: x mandatory;
   scroll-padding-inline-start: var(--kui-tab-bar-snap-inset, 0px);
-  padding-inline-end: calc(
-    var(--kui-tab-bar-strip-padding, 1px) +
-      var(--kui-tab-bar-snap-end-extra, 0px)
-  );
+}
+/* The snap end room is scrollable content after the last tab, not padding on
+   the strip: padding is part of the strip's box, which a flex item cannot
+   shrink below, so a room measured at one width would hold the strip open
+   past its allocation when it narrows and push the trailing and end zones out
+   of the bar. As content it lengthens only the scroll range, and the strip
+   still shrinks to its allocation. The start margin gives back the strip gap,
+   so an empty room adds no width. */
+.kui-tab-bar__tabs[data-snap-tabs="true"]::after {
+  content: "";
+  inline-size: var(--kui-tab-bar-snap-end-extra, 0px);
+  margin-inline-start: calc(-1 * var(--kui-tab-bar-strip-gap, 0px));
+  pointer-events: none;
+  align-self: stretch;
+  flex: none;
 }
 .kui-tab-bar[data-icon-only-at] .kui-tab-bar__tabs {
   container: kui-tab-bar-tabs / inline-size;

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

@@ -69,10 +69,12 @@
       ):only-child
   )
 ) {
-  padding-block-start: var(--kui-edge-inset-block-start);
+  padding-block: var(--kui-edge-inset-block-start)
+    var(--kui-edge-inset-block-end);
   padding-inline: var(--kui-edge-inset-inline-start)
     var(--kui-edge-inset-inline-end);
-  scroll-padding-block-start: var(--kui-edge-inset-block-start);
+  scroll-padding-block: var(--kui-edge-inset-block-start)
+    var(--kui-edge-inset-block-end);
 }
 
 /* A plain scene adds one outer gutter; a sole Pane or layout keeps ownership
@@ -91,13 +93,15 @@
   padding-block-start: calc(
     var(--kui-edge-inset-block-start) + var(--kui-space-xs)
   );
-  padding-block-end: var(--kui-space-xs);
+  padding-block-end: calc(
+    var(--kui-edge-inset-block-end) + var(--kui-space-xs)
+  );
   padding-inline: calc(var(--kui-edge-inset-inline-start) + var(--kui-space-xs))
     calc(var(--kui-edge-inset-inline-end) + var(--kui-space-xs));
   scroll-padding-block: calc(
       var(--kui-edge-inset-block-start) + var(--kui-space-xs)
     )
-    var(--kui-space-xs);
+    calc(var(--kui-edge-inset-block-end) + var(--kui-space-xs));
 }
 
 .kui-tab-scaffold__scene
@@ -164,6 +168,51 @@
   --_kui-tab-scaffold-bar-divider: var(--kui-color-neutral-border-normal);
 }
 
+/* `barPresentation="overlay"`: the bar paints the translucent chrome
+   material. Once `wireTabNavigator` has measured the live bar
+   (`data-bar-overlay="measured"`, with its border-box block size, bottom safe
+   area and 1px top edge included, published on this root), the bar lies over
+   the scenes' bottom edge and the scenes hand that size to their content as
+   the block-end edge context (outranking the docked 0px above): a plain scene
+   pads and scroll-pads by it, and a sole Pane or layout (a NavStack, whose own
+   bottom toolbar then sits just above the bar) clears it itself. Content
+   scrolls visibly beneath the bar while its last item rests clear of it.
+   Unwired, the bar stays docked. */
+.kui-tab-scaffold[data-bar-presentation="overlay"] > .kui-tab-scaffold__bar {
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material);
+}
+
+.kui-tab-scaffold[data-bar-presentation="overlay"][data-bar-overlay="measured"] {
+  position: relative;
+}
+
+.kui-tab-scaffold[data-bar-presentation="overlay"][data-bar-overlay="measured"]
+  > .kui-tab-scaffold__bar {
+  position: absolute;
+  z-index: 2;
+  inset-block-end: 0;
+  /* Like the NavStack overlay bars, it ends where a classic scrollbar's
+     track begins, so the thumb and buttons stay visible and usable. */
+  inset-inline: 0 var(--_kui-tab-scaffold-bar-scrollbar-inline-size, 0px);
+}
+
+.kui-tab-scaffold[data-bar-presentation="overlay"][data-bar-overlay="measured"]
+  > .kui-tab-scaffold__scenes {
+  --kui-edge-inset-block-end: var(--_kui-tab-scaffold-bar-block-size, 0px);
+}
+
+@media (forced-colors: active) {
+  /* Its always-present 1px top border becomes the visible edge. */
+  .kui-tab-scaffold[data-bar-presentation="overlay"] > .kui-tab-scaffold__bar {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: Canvas;
+    border-block-start-color: CanvasText;
+  }
+}
+
 .kui-tab-scaffold__tab {
   display: flex;
   flex: 1 1 0;
@@ -185,6 +234,32 @@
   color: var(--kui-color-brand-on-quiet);
 }
 
+/* Over the material, content of any color passes beneath the bar. Both label
+   colors fall below AA over the worst case (the material over black in light,
+   white in dark): the quiet unselected color, and in light the brand selected
+   color (about 3.2:1). An unselected tab lifts halfway toward the normal text
+   color, as an overlaid ToolbarText description does, and the selected tab
+   mixes 40% of it into the brand color, staying plainly the brand hue. */
+.kui-tab-scaffold[data-bar-presentation="overlay"]
+  > .kui-tab-scaffold__bar
+  > .kui-tab-scaffold__tab:not([aria-selected="true"]) {
+  color: color-mix(
+    in srgb,
+    var(--kui-color-text-quiet),
+    var(--kui-color-text) 50%
+  );
+}
+
+.kui-tab-scaffold[data-bar-presentation="overlay"]
+  > .kui-tab-scaffold__bar
+  > .kui-tab-scaffold__tab[aria-selected="true"] {
+  color: color-mix(
+    in srgb,
+    var(--kui-color-brand-on-quiet),
+    var(--kui-color-text) 40%
+  );
+}
+
 .kui-tab-scaffold__tab:focus-visible {
   outline: var(--kui-focus-ring);
   outline-offset: -2px;

package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css

@@ -96,6 +96,185 @@
 .kui-dialog-surface[data-footer-inset="comfortable"] > wa-dialog::part(footer) {
   padding: var(--kui-wa-container-inset, 1rem);
 }
+/* Fixed rows above one filling row: the leading children keep their natural
+   height and the last unslotted child (the light-DOM children are the body
+   slot's flex items) takes the rest and owns its scrolling. */
+.kui-dialog-surface[data-body-layout="fill-last"] > wa-dialog::part(body) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.kui-dialog-surface[data-body-layout="fill-last"] > wa-dialog > :not([slot]) {
+  flex: none;
+}
+.kui-dialog-surface[data-body-layout="fill-last"]
+  > wa-dialog
+  > :nth-last-child(1 of :not([slot])) {
+  flex: 1 1 0;
+  min-block-size: 0;
+}
+/* A floating footer lies over the body's block end, inset from the panel's
+   inline and block-end edges; the top-layer panel is its positioning
+   context. The register publishes the footer's measured block size on the
+   panel, and the body reserves it (plus the offset) after its own inset, so
+   flowing content scrolls beneath the footer and a filling child's scrollport
+   ends above it: the last content is never hidden. */
+.kui-dialog-surface[data-footer-presentation="floating"] > wa-dialog {
+  --_kui-dialog-surface-footer-resolved-offset: max(
+    0px,
+    var(
+      --_kui-dialog-surface-footer-offset,
+      var(--kui-wa-container-inset, 1rem)
+    )
+  );
+}
+.kui-dialog-surface[data-footer-presentation="floating"]
+  > wa-dialog::part(footer) {
+  position: absolute;
+  inset-inline: var(--_kui-dialog-surface-footer-resolved-offset);
+  inset-block-end: var(--_kui-dialog-surface-footer-resolved-offset);
+  z-index: 1;
+  background: transparent;
+}
+.kui-dialog-surface[data-footer-presentation="floating"]
+  > wa-dialog::part(body) {
+  --_kui-dialog-surface-footer-clearance: calc(
+    var(--_kui-dialog-surface-footer-block-size, 0px) +
+      var(--_kui-dialog-surface-footer-resolved-offset)
+  );
+  scroll-padding-block-end: var(--_kui-dialog-surface-footer-clearance);
+}
+.kui-dialog-surface[data-footer-presentation="floating"][data-body-inset="none"]
+  > wa-dialog::part(body) {
+  padding-block-end: var(--_kui-dialog-surface-footer-clearance);
+}
+.kui-dialog-surface[data-footer-presentation="floating"][data-body-inset="compact"]
+  > wa-dialog::part(body) {
+  padding-block-end: calc(
+    var(--kui-wa-surface-inset, 0.5rem) +
+      var(--_kui-dialog-surface-footer-clearance)
+  );
+}
+.kui-dialog-surface[data-footer-presentation="floating"][data-body-inset="comfortable"]
+  > wa-dialog::part(body) {
+  padding-block-end: calc(
+    var(--kui-wa-container-inset, 1rem) +
+      var(--_kui-dialog-surface-footer-clearance)
+  );
+}
+/* Scroll clearance. A dialog body starts a new scroll context, so it clears
+   any `--kui-scroll-clearance-*` a page region published around the dialog.
+   With a floating footer over a filling child that opts into block-end
+   `scrollClearance` (a transcript List or Pane), the body stops reserving the
+   footer below that child: the child reaches the panel's block end, the body
+   publishes the footer's clearance for it, and the child adds it inside its
+   own scroll area, so content scrolls visibly beneath the transparent footer
+   while its last item still comes to rest above it. */
+.kui-dialog-surface > wa-dialog::part(body) {
+  --kui-scroll-clearance-block-start: 0px;
+  --kui-scroll-clearance-block-end: 0px;
+}
+.kui-dialog-surface[data-footer-presentation="floating"]:is(
+    [data-body-layout="fill"],
+    [data-body-layout="fill-last"]
+  )
+  > wa-dialog:has(
+    > :nth-last-child(1 of :not([slot])):is(
+        [data-scroll-clearance="block-end"],
+        [data-scroll-clearance="both"]
+      )
+  )::part(body) {
+  --kui-scroll-clearance-block-end: var(--_kui-dialog-surface-footer-clearance);
+  padding-block-end: 0;
+}
+/* A floating header lies over the body's block-start edge on the
+   translucent chrome material (opaque under reduced transparency, increased
+   contrast, or without backdrop-filter; a system surface in forced colors).
+   The register publishes the header's measured block size on the panel; the
+   header gives that height back as a negative block-end margin, so the body
+   starts at the panel's block-start edge beneath it, and the body reserves it
+   again before its own inset (with a matching scroll-padding): flowing
+   content rests below the title bar and scrolls beneath it. Unmeasured, the
+   size resolves to 0px and the header stays docked. */
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog::part(header) {
+  position: relative;
+  z-index: 1;
+  margin-block-end: calc(
+    -1 * var(--_kui-dialog-surface-header-block-size, 0px)
+  );
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material-raised);
+  box-shadow: inset 0 -1px
+    var(--_kui-dialog-surface-header-divider, transparent);
+}
+/* The floating header's divider is scroll state, as on a Pane's overlay
+   header: the register publishes `--_kui-dialog-surface-header-divider` on
+   the panel (as this color) only while the body, or a filling child that
+   reaches beneath the header, is scrolled away from its top. The line is an
+   inset shadow, so showing it never moves the header or the content. */
+.kui-dialog-surface[data-header-presentation="floating"] > wa-dialog {
+  --_kui-dialog-surface-header-divider-color: var(
+    --kui-color-neutral-border-normal
+  );
+}
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog::part(body) {
+  --_kui-dialog-surface-header-clearance: var(
+    --_kui-dialog-surface-header-block-size,
+    0px
+  );
+  scroll-padding-block-start: var(--_kui-dialog-surface-header-clearance);
+}
+.kui-dialog-surface[data-header-presentation="floating"][data-body-inset="none"]
+  > wa-dialog::part(body) {
+  padding-block-start: var(--_kui-dialog-surface-header-clearance);
+}
+.kui-dialog-surface[data-header-presentation="floating"][data-body-inset="compact"]
+  > wa-dialog::part(body) {
+  padding-block-start: calc(
+    var(--kui-wa-surface-inset, 0.5rem) +
+      var(--_kui-dialog-surface-header-clearance)
+  );
+}
+.kui-dialog-surface[data-header-presentation="floating"][data-body-inset="comfortable"]
+  > wa-dialog::part(body) {
+  padding-block-start: calc(
+    var(--kui-wa-container-inset, 1rem) +
+      var(--_kui-dialog-surface-header-clearance)
+  );
+}
+/* A filling child that is the body's only child and opts into block-start
+   `scrollClearance` reaches the panel's block-start edge beneath the floating
+   header: the body publishes the header's clearance for it, and the child
+   adds it inside its own scroll area, so content scrolls visibly beneath the
+   title bar while its first item still rests below it. Leading children of
+   `fill-last` keep the body's reservation instead. */
+.kui-dialog-surface[data-header-presentation="floating"]:is(
+    [data-body-layout="fill"],
+    [data-body-layout="fill-last"]
+  )
+  > wa-dialog:has(
+    > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])):is(
+        [data-scroll-clearance="block-start"],
+        [data-scroll-clearance="both"]
+      )
+  )::part(body) {
+  --kui-scroll-clearance-block-start: var(
+    --_kui-dialog-surface-header-clearance
+  );
+  padding-block-start: 0;
+}
+@media (forced-colors: active) {
+  .kui-dialog-surface[data-header-presentation="floating"]
+    > wa-dialog::part(header) {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: Canvas;
+    border-block-end: 1px solid CanvasText;
+  }
+}
 .kui-dialog-surface[data-presentation="side-sheet"] > wa-dialog::part(dialog) {
   width: min(30rem, 100vw);
   max-width: 100vw;
@@ -199,6 +378,22 @@
   overflow: hidden;
   grid-template-rows: minmax(0, 1fr);
 }
+/* Fixed rows above one filling last child, which owns its scrolling. */
+.kui-popover-dialog-surface[data-body-layout="fill-last"]:is(
+    :popover-open,
+    [data-presentation="embedded"]
+  ) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.kui-popover-dialog-surface[data-body-layout="fill-last"] > * {
+  flex: none;
+}
+.kui-popover-dialog-surface[data-body-layout="fill-last"] > :last-child {
+  flex: 1 1 0;
+  min-block-size: 0;
+}
 /* In flow for a catalog or inline use: the same surface without the top
    layer, never wider than its container. */
 .kui-popover-dialog-surface[data-presentation="embedded"] {

package/dist/styles/composer.css

@@ -0,0 +1,100 @@
+/* A chat or prompt composer: a raised frame (surface-raised, the standard
+   neutral border, large radius, shadow-l) whose border turns brand while
+   focus is within. It holds a borderless message field that sizes to its
+   content between the min and max row counts, above an action row with a
+   quiet hint and trailing actions. The 8px padding puts the field's text on
+   the 17px text column when the composer sits 8px from a container edge. */
+
+.kui-composer {
+  --_kui-composer-min-rows: 1;
+  --_kui-composer-max-rows: 8;
+  display: flex;
+  flex-direction: column;
+  gap: var(--kui-layout-control-gap, 0.5rem);
+  /* Fill the container's inline size: a content-sized field would otherwise
+     shrink the frame to its text. */
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-radius-l);
+  color: var(--kui-color-neutral-on-normal);
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-l);
+}
+
+/* The frame is the field's boundary, so it carries the focus state. */
+.kui-composer:focus-within {
+  border-color: var(--kui-color-brand-border-loud);
+}
+
+.kui-composer__field {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0.25rem 0;
+  border: 0;
+  outline: none;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  font-size: var(--kui-font-m, inherit);
+  line-height: var(--wa-line-height-normal, 1.6);
+  resize: none;
+  field-sizing: content;
+  min-height: calc(var(--_kui-composer-min-rows) * 1lh + 0.5rem);
+  max-height: calc(var(--_kui-composer-max-rows) * 1lh + 0.5rem);
+  overflow-y: auto;
+}
+
+/* Engines without content sizing keep a three-line field, clamped to the
+   row bounds, that scrolls once the message is longer. */
+@supports not (field-sizing: content) {
+  .kui-composer__field {
+    height: calc(
+      clamp(var(--_kui-composer-min-rows), 3, var(--_kui-composer-max-rows)) *
+        1lh + 0.5rem
+    );
+  }
+}
+
+.kui-composer__field::placeholder {
+  color: var(--kui-color-neutral-on-quiet);
+  opacity: 1;
+}
+
+.kui-composer__field:disabled {
+  color: var(--kui-color-neutral-on-quiet);
+  cursor: not-allowed;
+}
+
+.kui-composer__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--kui-layout-control-gap, 0.5rem);
+  min-width: 0;
+}
+
+.kui-composer__hint {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.kui-composer__trailing {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--kui-layout-control-gap, 0.5rem);
+  margin-inline-start: auto;
+}
+
+@media (forced-colors: active) {
+  .kui-composer:focus-within {
+    border-color: Highlight;
+    outline: 2px solid Highlight;
+    outline-offset: 1px;
+  }
+}

package/dist/styles/foundation.css

@@ -104,6 +104,32 @@
   --_kui-popup-row-current-color: var(--kui-color-brand-on-fill);
   --_kui-popup-group-title-padding: 0.2rem 0.75rem 0.3rem;
   --_kui-popup-group-title-font-weight: 750;
+  /* A capped, scrolling popup shows that it scrolls: a soft shadow along an
+     edge while more choices lie beyond it. Covers painted in the surface
+     color scroll with the content (`local`) and hide each shadow (`scroll`,
+     fixed to the box) only while the list rests at that edge, so a popup
+     whose choices all fit, or one scrolled to its end, draws no cue there.
+     CSS alone, so it works in every engine with no listeners, and it leaves
+     the popup's own border, radius, and drop shadow untouched. */
+  --_kui-popup-scroll-cue-color: light-dark(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.9));
+  --_kui-popup-scroll-cue:
+    linear-gradient(var(--kui-color-surface-raised) 30%, transparent) center
+      top / 100% 1.5rem no-repeat local,
+    linear-gradient(transparent, var(--kui-color-surface-raised) 70%) center
+      bottom / 100% 1.5rem no-repeat local,
+    radial-gradient(
+        farthest-side at 50% 0,
+        var(--_kui-popup-scroll-cue-color),
+        transparent
+      )
+      center top / 100% 0.75rem no-repeat scroll,
+    radial-gradient(
+        farthest-side at 50% 100%,
+        var(--_kui-popup-scroll-cue-color),
+        transparent
+      )
+      center bottom / 100% 0.75rem no-repeat scroll,
+    var(--kui-color-surface-raised);
   --_kui-popup-caret-open-rotation: -180deg;
   --_kui-popup-caret-transition: rotate var(--wa-transition-slow, 0.3s)
     var(--wa-transition-easing, ease);
@@ -139,6 +165,28 @@
   --kui-sunken-surface:
     var(--kui-sunken-texture) 0 0 / 100px 100px repeat,
     var(--kui-color-surface-lowered);
+  /* Translucent chrome material: a bar laid over scrolling content (a Pane's
+     overlay header) lets the content show through, blurred, beneath it.
+     80% of the surface keeps --kui-color-text at AA over any content
+     (about 10:1 light and 8:1 dark against a black or white backdrop). It
+     resolves to the opaque surface under prefers-reduced-transparency or
+     prefers-contrast: more, and where backdrop-filter is unsupported
+     (below). */
+  --kui-chrome-material: color-mix(
+    in srgb,
+    var(--kui-color-surface) 80%,
+    transparent
+  );
+  /* The same material over a raised surface (a dialog panel's floating
+     header): 80% of surface-raised keeps --kui-color-text at AA over any
+     content (about 10:1 light and 6.7:1 dark against a black or white
+     backdrop), with the same opaque fallbacks. */
+  --kui-chrome-material-raised: color-mix(
+    in srgb,
+    var(--kui-color-surface-raised) 80%,
+    transparent
+  );
+  --kui-chrome-material-filter: blur(20px) saturate(180%);
   --kui-color-text: var(--wa-color-text-normal, light-dark(#1d1d1f, #f5f5f7));
   --kui-color-text-quiet: var(
     --wa-color-text-quiet,
@@ -479,6 +527,24 @@
   --kui-safe-area-inline-end: env(safe-area-inset-left, 0px);
 }
 
+@supports not (
+  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
+) {
+  :root {
+    --kui-chrome-material: var(--kui-color-surface);
+    --kui-chrome-material-raised: var(--kui-color-surface-raised);
+    --kui-chrome-material-filter: none;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  :root {
+    --kui-chrome-material: var(--kui-color-surface);
+    --kui-chrome-material-raised: var(--kui-color-surface-raised);
+    --kui-chrome-material-filter: none;
+  }
+}
+
 @media (prefers-contrast: more) {
   :root {
     --kui-color-pop-fill-quiet: Canvas;