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

package/dist/styles/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/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/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/token-search-field.css

@@ -172,10 +172,19 @@
 .kui-token-search__clear:hover,
 .kui-token-search__clear:focus-visible,
 .kui-token-search__trailing-action:hover,
-.kui-token-search__trailing-action:focus-visible {
+.kui-token-search__trailing-action:focus-visible,
+.kui-token-search__trailing-action[aria-expanded="true"],
+.kui-token-search__trailing-action[aria-pressed="true"] {
   background: color-mix(in srgb, currentColor 12%, transparent);
 }
 
+/* An open disclosure or an on toggle keeps the hover fill and reads at full
+   text strength, so its state stays visible after the pointer leaves. */
+.kui-token-search__trailing-action[aria-expanded="true"],
+.kui-token-search__trailing-action[aria-pressed="true"] {
+  color: var(--kui-color-text);
+}
+
 .kui-token-search__token button:focus-visible,
 .kui-token-search__clear:focus-visible,
 .kui-token-search__trailing-action:focus-visible {
@@ -386,7 +395,9 @@
   box-shadow: none;
 }
 
-.kui-token-search[data-presentation="toolbar-group"] .kui-token-search__clear {
+.kui-token-search[data-presentation="toolbar-group"] .kui-token-search__clear,
+.kui-token-search[data-presentation="toolbar-group"]
+  .kui-token-search__trailing-action {
   border-radius: var(--kui-control-highlight-radius);
 }
 

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

@@ -139,9 +139,12 @@
   );
   --kui-toolbar-control-border: var(--kui-toolbar-control-dark-border, #353536);
   --kui-toolbar-control-color: var(--kui-color-neutral-on-loud);
+  /* A 14% surface wash over the loud fill: visible hover feedback that keeps
+     the on-loud icon above 3:1 over a light page (about 3.4:1; a 28% wash
+     measured 2.7:1) and well above it in dark (about 5.8:1). */
   --kui-toolbar-control-hover-background: color-mix(
     in srgb,
-    var(--kui-color-surface) 28%,
+    var(--kui-color-surface) 14%,
     transparent
   );
 }
@@ -384,6 +387,39 @@
   background: transparent;
 }
 
+/* In overlay NavStack chrome (`chromePresentation="overlay"`), an overlay
+   NavStack bottom toolbar (`bottomToolbarPresentation="overlay"`), cross-fading
+   copies included, an overlay Pane header (`headerPresentation="overlay"`), or
+   a DialogSurface floating header's actions (`headerPresentation="floating"`),
+   the group sits on the translucent chrome material with arbitrary content
+   scrolling beneath it. Its quiet control color over its own translucent fill
+   falls below AA there over the worst-case backdrop (about 3.0:1 in light
+   over black, 3.5:1 in dark over white), so an untoned group's controls take
+   the normal text color (well above 4.5:1 in both), as an untoned
+   ToolbarText's title does. A dark-toned group (or an avatar scrim) keeps its
+   own loud colors. */
+.kui-pane[data-header-presentation="overlay"]
+  > .kui-pane__header
+  .kui-toolbar-control-group:not([data-tone="dark"], [data-scrim="true"]),
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > .kui-toolbar-control-group[slot="header-actions"]:not(
+    [data-tone="dark"],
+    [data-scrim="true"]
+  ),
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > [slot="header-actions"]
+  .kui-toolbar-control-group:not([data-tone="dark"], [data-scrim="true"]),
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome
+  .kui-toolbar-control-group:not([data-tone="dark"], [data-scrim="true"]),
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom
+  .kui-toolbar-control-group:not([data-tone="dark"], [data-scrim="true"]) {
+  --kui-toolbar-control-color: var(--kui-color-text);
+}
+
 /* `selectedChrome="none"`: a pressed control paints like its unpressed
    neighbors, for an icon-state toggle whose glyph already shows the state.
    One button opts out alone with `data-selected-chrome="none"`. After the
@@ -732,6 +768,44 @@
   background: transparent;
 }
 
+/* A lone control's hover replaces the whole group's fill (above). A dark
+   group's hover tint is a translucent surface wash meant to lie OVER its loud
+   fill, as it does on one control of a dark group; replacing the fill with it
+   left a near-white circle behind the dark tone's white icon on a light page
+   (about 1.3:1). So a dark lone group keeps its fill and paints the tint over
+   it as an image layer. Avatar groups paint their image as the background and
+   keep the plain rule. */
+.kui-toolbar-control-group[data-tone="dark"][data-single="true"]:not(
+    [data-content="avatar"]
+  ):has(
+    > :is(
+      button:not(:disabled, [aria-disabled="true"]),
+      wa-button:not([disabled]),
+      .kui-popup-menu,
+      wa-dropdown:not(.kui-popup-menu),
+      .kui-select,
+      .kui-toolbar-action-link
+    )
+  ):hover,
+.kui-toolbar-control-group[data-tone="dark"]:not(
+    [data-single="true"],
+    [data-content="avatar"]
+  ):has(
+    > :is(
+        button:not(:disabled, [aria-disabled="true"]),
+        wa-button:not([disabled]),
+        .kui-select,
+        .kui-toolbar-action-link
+      ):nth-child(1 of :where(:not([data-toolbar-visibility-state]))):where(
+        :nth-last-child(1 of :not([data-toolbar-visibility-state]))
+      )
+  ):hover {
+  background-color: var(--kui-toolbar-control-background);
+  background-image: linear-gradient(
+    var(--kui-toolbar-control-hover-background) 0 0
+  );
+}
+
 /* A toolbar Select beside other controls highlights its own pill on hover
    (select.css); a lone Select instead lifts the whole group (above). */
 

package/dist/styles/toolbar-text.css

@@ -138,6 +138,72 @@ button.kui-toolbar-text:focus-visible {
   color: var(--kui-color-text);
 }
 
+/* In an overlay Pane header (`headerPresentation="overlay"`), overlay
+   NavStack chrome (`chromePresentation="overlay"`), or an overlay NavStack
+   bottom toolbar (`bottomToolbarPresentation="overlay"`), cross-fading
+   copies included, the title sits on the translucent chrome material with
+   arbitrary content scrolling beneath it. Quiet colors fall below AA there
+   over the worst-case backdrop (the material over black in light, white in
+   dark): the default title color
+   measures about 3.8:1 (light) and the description about 3.2:1 (light) and
+   4.1:1 (dark). The title takes the normal text color (about 10.5:1 and
+   8.3:1), and the description lifts halfway toward it (about 5.9:1 in both
+   themes), so it still reads as secondary but keeps AA. A ToolbarText in a
+   DialogSurface floating header (`headerPresentation="floating"`), slotted
+   as the dialog's label or into its header actions, sits on the raised chrome
+   material and takes the same lift. See docs/accessibility.md "Chrome
+   material". */
+.kui-pane[data-header-presentation="overlay"]
+  > .kui-pane__header
+  .kui-toolbar-text:not([data-tone]),
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > .kui-toolbar-text:is([slot="label"], [slot="header-actions"]):not(
+    [data-tone]
+  ),
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > :is([slot="label"], [slot="header-actions"])
+  .kui-toolbar-text:not([data-tone]),
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome
+  .kui-toolbar-text:not([data-tone]),
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom
+  .kui-toolbar-text:not([data-tone]) {
+  color: var(--kui-color-text);
+}
+
+.kui-pane[data-header-presentation="overlay"]
+  > .kui-pane__header
+  .kui-toolbar-text:not([data-tone])
+  .kui-toolbar-text__description,
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > .kui-toolbar-text:is([slot="label"], [slot="header-actions"]):not(
+    [data-tone]
+  )
+  .kui-toolbar-text__description,
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > :is([slot="label"], [slot="header-actions"])
+  .kui-toolbar-text:not([data-tone])
+  .kui-toolbar-text__description,
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome
+  .kui-toolbar-text:not([data-tone])
+  .kui-toolbar-text__description,
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom
+  .kui-toolbar-text:not([data-tone])
+  .kui-toolbar-text__description {
+  color: color-mix(
+    in srgb,
+    var(--kui-color-text-quiet),
+    var(--kui-color-text) 50%
+  );
+}
+
 .kui-toolbar-text[data-tone="dark"] {
   color: var(--kui-color-neutral-on-loud);
 }

package/dist/surface-scaffold-register.d.ts

@@ -1,4 +1,9 @@
-/** Importing this module registers wa-dialog and repairs wrapped native names. */
+/**
+ * Importing this module registers wa-dialog, repairs wrapped native names, and
+ * measures each DialogSurface header and footer for a floating header's or
+ * footer's body clearance, and shows a floating header's divider while
+ * content is scrolled beneath it.
+ */
 declare const surfaceScaffoldElementsRegistered = true;
 
 export { surfaceScaffoldElementsRegistered };

package/dist/surface-scaffold-register.js

@@ -2,13 +2,56 @@ import WaDialog from '@awesome.me/webawesome/dist/components/dialog/dialog.js';
 
 // src/components/surfaces/surface-scaffold/register/surface-scaffold-register.ts
 
-// src/components/surfaces/surface-scaffold/internal/install-dialog-label.ts
+// src/components/surfaces/surface-scaffold/internal/install-chrome-block-size.ts
+var HEADER_BLOCK_SIZE_PROPERTY = "--_kui-dialog-surface-header-block-size";
+var FOOTER_BLOCK_SIZE_PROPERTY = "--_kui-dialog-surface-footer-block-size";
+var CHROME_PARTS = [
+  ["header", HEADER_BLOCK_SIZE_PROPERTY],
+  ["footer", FOOTER_BLOCK_SIZE_PROPERTY]
+];
 var installed = /* @__PURE__ */ new WeakSet();
+var observedParts = /* @__PURE__ */ new WeakSet();
+function installChromeBlockSize(prototype) {
+  if (installed.has(prototype)) return;
+  installed.add(prototype);
+  const target = prototype;
+  const update = target.update;
+  target.update = function(changed) {
+    update.call(this, changed);
+    if (!this.parentElement?.classList.contains("kui-dialog-surface")) return;
+    const panel = this.dialog;
+    if (!panel) return;
+    for (const [part, property] of CHROME_PARTS) {
+      const element = this.shadowRoot?.querySelector(`[part~="${part}"]`);
+      if (element) observePart(panel, element, property);
+      else panel.style.removeProperty(property);
+    }
+  };
+}
+function observePart(panel, element, property) {
+  if (observedParts.has(element)) return;
+  observedParts.add(element);
+  const publish = (blockSize) => {
+    const value = `${blockSize}px`;
+    if (panel.style.getPropertyValue(property) !== value)
+      panel.style.setProperty(property, value);
+  };
+  publish(element.getBoundingClientRect().height);
+  if (typeof ResizeObserver === "undefined") return;
+  new ResizeObserver((entries) => {
+    if (!element.isConnected) return;
+    const box = entries[entries.length - 1]?.borderBoxSize?.[0];
+    publish(box ? box.blockSize : element.getBoundingClientRect().height);
+  }).observe(element);
+}
+
+// src/components/surfaces/surface-scaffold/internal/install-dialog-label.ts
+var installed2 = /* @__PURE__ */ new WeakSet();
 var observed = /* @__PURE__ */ new WeakSet();
 var ownedNames = /* @__PURE__ */ new WeakMap();
 function installDialogLabel(prototype) {
-  if (installed.has(prototype)) return;
-  installed.add(prototype);
+  if (installed2.has(prototype)) return;
+  installed2.add(prototype);
   const target = prototype;
   const update = target.update;
   target.update = function(changed) {
@@ -56,8 +99,51 @@ function syncDialogLabel(host) {
   ownedNames.set(panel, { attribute, value });
 }
 
+// src/components/surfaces/surface-scaffold/internal/install-header-scroll-divider.ts
+var HEADER_DIVIDER_PROPERTY = "--_kui-dialog-surface-header-divider";
+var SHOWN = "var(--_kui-dialog-surface-header-divider-color)";
+var THRESHOLD = 1;
+var installed3 = /* @__PURE__ */ new WeakSet();
+var wiredPanels = /* @__PURE__ */ new WeakSet();
+function installHeaderScrollDivider(prototype) {
+  if (installed3.has(prototype)) return;
+  installed3.add(prototype);
+  const target = prototype;
+  const update = target.update;
+  target.update = function(changed) {
+    update.call(this, changed);
+    if (!this.parentElement?.classList.contains("kui-dialog-surface")) return;
+    const panel = this.dialog;
+    if (panel && !wiredPanels.has(panel)) wire(this, panel);
+  };
+}
+function wire(host, panel) {
+  wiredPanels.add(panel);
+  const scrolled = /* @__PURE__ */ new Set();
+  const onScroll = (event) => {
+    const scroller = event.target;
+    if (!(scroller instanceof Element)) return;
+    const header = host.shadowRoot?.querySelector('[part~="header"]');
+    const floating = host.parentElement?.getAttribute("data-header-presentation") === "floating";
+    if (floating && header && scroller.scrollTop > THRESHOLD && // Only a scroller that reaches beneath the header.
+    scroller.getBoundingClientRect().top <= header.getBoundingClientRect().bottom)
+      scrolled.add(scroller);
+    else scrolled.delete(scroller);
+    for (const element of scrolled)
+      if (!element.isConnected) scrolled.delete(element);
+    const value = scrolled.size > 0 ? SHOWN : "";
+    if (panel.style.getPropertyValue(HEADER_DIVIDER_PROPERTY) === value) return;
+    if (value) panel.style.setProperty(HEADER_DIVIDER_PROPERTY, value);
+    else panel.style.removeProperty(HEADER_DIVIDER_PROPERTY);
+  };
+  for (const root of [panel, host])
+    root.addEventListener("scroll", onScroll, { capture: true, passive: true });
+}
+
 // src/components/surfaces/surface-scaffold/register/surface-scaffold-register.ts
 installDialogLabel(WaDialog.prototype);
+installChromeBlockSize(WaDialog.prototype);
+installHeaderScrollDivider(WaDialog.prototype);
 var surfaceScaffoldElementsRegistered = true;
 
 export { surfaceScaffoldElementsRegistered };