@kerfjs/ui 5.0.0-beta.100 → 5.0.0-beta.101

package/dist/styles/pane.css

@@ -61,6 +61,32 @@
   background: var(--kui-pane-chrome-background, var(--kui-color-surface));
 }
 
+/* `background`: an app-chosen color paints the whole pane, header and footer
+   included, and replaces the appearance's fill, so a sunken pane's content
+   and auto chrome turn transparent over it. Forced colors paint the system
+   surface instead. */
+.kui-pane[data-background] {
+  background: var(--_kui-pane-background);
+}
+
+.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) {
+  background: transparent;
+}
+
+/* `tint`: the pane paints its re-derived surface, under a sunken pane's
+   lowered layer, unless an explicit `background` already paints it. */
+.kui-pane[data-kui-tint]:not([data-background]) {
+  background: var(--kui-color-surface);
+}
+
+@media (forced-colors: active) {
+  .kui-pane[data-background] {
+    background: Canvas;
+  }
+}
+
 /* Safe areas. The pane root never pads, so its background and separators paint
    through an unsafe area; its slots compensate on the edges the pane still
    touches. The inherited `--kui-edge-inset-*` context says how far each edge
@@ -158,6 +184,9 @@
      pane edge while keeping their own content aligned with ordinary items. */
   --kui-pane-content-inset-inline-start: var(--_kui-pane-safe-inline-start);
   --kui-pane-content-inset-inline-end: var(--_kui-pane-safe-inline-end);
+  /* The resolved block-start inset (safe area, deep inset, and the clearance
+     of overlay or clear chrome), so a first child can run up beneath it. */
+  --kui-pane-content-inset-block-start: var(--_kui-pane-content-block-start);
   --_kui-pane-deep-block-inset: 0px;
   --_kui-pane-clearance-block-start: 0px;
   --_kui-pane-clearance-block-end: 0px;
@@ -263,6 +292,97 @@
   }
 }
 
+/* `headerPresentation="clear"`: an overlay header (the same measuring,
+   placement, and clearance as above) that is fully transparent, for chrome
+   laid over imagery. Legibility comes from glass control groups or a scrim
+   in the content, not from the header. With `scrollEdge="material"` a
+   pseudo-element carrying the chrome material fades in (opacity only, never
+   the filter) while `wireScrollDividers` reports content scrolled beneath
+   the header, and out at rest; the clear header draws no scroll divider. */
+.kui-pane[data-header-material="clear"] > .kui-pane__header {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  background: transparent;
+}
+
+:where(.kui-pane[data-header-material="clear"][data-scroll-edge])
+  > .kui-pane__header {
+  position: relative;
+  isolation: isolate;
+}
+
+/* The scroll edge fades in as content scrolls beneath the bar: the wiring
+   publishes `--kui-scroll-edge-progress` (0 at rest, 1 once content has
+   scrolled `scrollEdgeDistance` past the edge) and only the layer's opacity
+   follows it; the filter never animates. Unwired, it stays clear. */
+.kui-pane[data-header-material="clear"][data-scroll-edge]
+  > .kui-pane__header::before {
+  position: absolute;
+  z-index: -1;
+  content: "";
+  inset: 0;
+  opacity: var(--kui-scroll-edge-progress, 0);
+  pointer-events: none;
+}
+
+.kui-pane[data-header-material="clear"][data-scroll-edge="material"]
+  > .kui-pane__header::before {
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material);
+}
+
+.kui-pane[data-header-material="clear"][data-scroll-edge="surface"]
+  > .kui-pane__header::before {
+  background: var(--kui-color-surface);
+}
+
+/* Static effects and slow displays snap the edge on once content lies
+   beneath the bar instead of tracking the scroll. */
+:root[data-kui-effects="static"]
+  .kui-pane[data-header-material="clear"][data-scroll-edge]
+  > .kui-pane__header::before {
+  opacity: 0;
+}
+
+:root[data-kui-effects="static"]
+  .kui-pane[data-header-material="clear"][data-scroll-edge]
+  > .kui-pane__header[data-scroll-divider*="b"]::before {
+  opacity: 1;
+}
+
+@media (update: slow) {
+  .kui-pane[data-header-material="clear"][data-scroll-edge]
+    > .kui-pane__header::before {
+    opacity: 0;
+  }
+
+  .kui-pane[data-header-material="clear"][data-scroll-edge]
+    > .kui-pane__header[data-scroll-divider*="b"]::before {
+    opacity: 1;
+  }
+}
+
+/* Clear chrome turns opaque where transparency would hurt, like the
+   material itself. */
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  .kui-pane[data-header-material="clear"] > .kui-pane__header {
+    background: var(--kui-chrome-material);
+  }
+}
+
+@media (forced-colors: active) {
+  .kui-pane[data-header-material="clear"] > .kui-pane__header {
+    background: Canvas;
+    border-block-end: 1px solid CanvasText;
+  }
+
+  .kui-pane[data-header-material="clear"][data-scroll-edge]
+    > .kui-pane__header::before {
+    content: none;
+  }
+}
+
 /* Add one outer gutter without changing the inherited item-margin token.
    Nested Row, List, and Grid therefore keep their own default 8px insets. */
 .kui-pane[data-deep-inset="true"] > .kui-pane__content {
@@ -313,7 +433,7 @@
   box-shadow: inset 0 1px var(--_kui-pane-chrome-divider);
 }
 
-.kui-pane:not([data-chrome-dividers])
+.kui-pane:not([data-chrome-dividers], [data-header-material="clear"])
   > :is(.kui-pane__header, .kui-pane__toolbar)[data-scroll-divider*="b"],
 .kui-pane:not([data-chrome-dividers])
   > .kui-pane__footer[data-scroll-divider*="t"],

package/dist/styles/styles.css

@@ -33,6 +33,7 @@
 @import "./corner-status.css";
 @import "./column-track.css";
 @import "./content-swap.css";
+@import "./backdrop-image.css";
 @import "./file-picker.css";
 @import "./combobox.css";
 @import "./edge-activity-indicator.css";

package/dist/styles/surface-scaffold.css

@@ -5,6 +5,21 @@
     var(--_kui-dialog-surface-gutter, 1rem)
   );
   --width: min(35rem, calc(100vw - 2rem));
+  /* Concentric with a pill ToolbarControlGroup at the body inset: 22px + 8px
+     compact, 22px + 16px comfortable. */
+  --_kui-dialog-surface-radius: calc(
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem)) +
+      var(--kui-wa-surface-inset, 0.5rem)
+  );
+}
+.kui-dialog-surface[data-body-inset="comfortable"] > wa-dialog {
+  --_kui-dialog-surface-radius: calc(
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem)) +
+      var(--kui-wa-container-inset, 1rem)
+  );
+}
+.kui-dialog-surface > wa-dialog::part(dialog) {
+  border-radius: var(--_kui-dialog-surface-radius);
 }
 .kui-dialog-surface[data-size="small"] > wa-dialog {
   --_kui-dialog-surface-width: 25rem;
@@ -281,7 +296,8 @@
   height: 100dvh;
   max-height: 100dvh;
   margin-inline-end: 0;
-  border-radius: var(--kui-radius-l) 0 0 var(--kui-radius-l);
+  border-radius: var(--_kui-dialog-surface-radius) 0 0
+    var(--_kui-dialog-surface-radius);
 }
 .kui-dialog-surface[data-presentation="fullscreen"] > wa-dialog {
   --width: 100vw;
@@ -293,6 +309,149 @@
   max-height: 100dvh;
   border-radius: 0;
 }
+/* A bottom sheet rests on the viewport's block-end edge: square bottom
+   corners, the dialog's own radius on top. Its panel runs to the edge, behind
+   the home indicator and any virtual keyboard, while a block-end padding
+   (the larger of the safe area, the keyboard inset the register measures
+   from `visualViewport`, and the VirtualKeyboard API's
+   `env(keyboard-inset-height)`) keeps its content above them. `height`,
+   `minHeight` and `maxHeight` measure that visible content height; the panel
+   is capped at the dynamic viewport minus the top safe area and one gutter. */
+.kui-dialog-surface[data-presentation="bottom-sheet"]
+  > wa-dialog::part(dialog) {
+  --_kui-dialog-surface-sheet-clearance: max(
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px)),
+    var(--_kui-dialog-surface-keyboard-inset, 0px),
+    env(keyboard-inset-height, 0px)
+  );
+  --_kui-dialog-surface-sheet-cap: max(
+    0px,
+    min(
+      calc(
+        var(--_kui-dialog-surface-max-height, 100dvh) +
+          var(--_kui-dialog-surface-sheet-clearance)
+      ),
+      calc(
+        100dvh -
+          var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px)) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+  box-sizing: border-box;
+  width: min(
+    var(
+      --_kui-dialog-surface-preferred-width,
+      var(--_kui-dialog-surface-width)
+    ),
+    100%
+  );
+  max-width: 100%;
+  /* Unset (content height) until the register publishes a resized height. */
+  height: calc(
+    var(--_kui-dialog-surface-sheet-height) +
+      var(--_kui-dialog-surface-sheet-clearance)
+  );
+  max-height: var(--_kui-dialog-surface-sheet-cap);
+  /* A modal dialog sits between both block insets, so an auto height would
+     stretch to the cap; anchored only at the bottom, a sheet with no
+     `height` (and no resized height) opens at its content height. */
+  inset-block-start: auto;
+  margin: auto auto 0;
+  padding-block-end: var(--_kui-dialog-surface-sheet-clearance);
+  border-radius: var(--_kui-dialog-surface-radius)
+    var(--_kui-dialog-surface-radius) 0 0;
+}
+.kui-dialog-surface[data-presentation="bottom-sheet"][data-height]
+  > wa-dialog::part(dialog) {
+  height: calc(
+    var(
+        --_kui-dialog-surface-sheet-height,
+        var(--_kui-dialog-surface-height, 100dvh)
+      ) +
+      var(--_kui-dialog-surface-sheet-clearance)
+  );
+}
+/* A resizable sheet keeps a band at its top edge for the grabber the
+   register injects: a `role="separator"` that resizes the visible height
+   between `minHeight` (default 160px) and the cap by drag or keyboard. */
+.kui-dialog-surface[data-presentation="bottom-sheet"][data-resizable]
+  > wa-dialog::part(dialog) {
+  min-height: min(
+    calc(
+      var(--_kui-dialog-surface-min-height, 10rem) +
+        var(--_kui-dialog-surface-sheet-clearance)
+    ),
+    var(--_kui-dialog-surface-sheet-cap)
+  );
+  padding-block-start: 0.75rem;
+}
+.kui-dialog-surface[data-presentation="bottom-sheet"][data-resizable]
+  > wa-dialog::part(sheet-handle) {
+  position: absolute;
+  z-index: 2;
+  inset-block-start: 0;
+  inset-inline: 0;
+  width: 6rem;
+  height: 1.25rem;
+  margin-inline: auto;
+  border-radius: var(--kui-radius-s);
+  cursor: ns-resize;
+  touch-action: none;
+}
+.kui-dialog-surface[data-presentation="bottom-sheet"][data-resizable]
+  > wa-dialog::part(sheet-handle)::before {
+  position: absolute;
+  inset-block-start: 0.375rem;
+  inset-inline: 0;
+  width: 2.25rem;
+  height: 0.3125rem;
+  margin-inline: auto;
+  border-radius: 0.15625rem;
+  background: var(--kui-color-neutral-border-loud);
+  content: "";
+}
+.kui-dialog-surface[data-presentation="bottom-sheet"][data-resizable]
+  > wa-dialog::part(sheet-handle):focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+}
+@media (forced-colors: active) {
+  .kui-dialog-surface[data-presentation="bottom-sheet"][data-resizable]
+    > wa-dialog::part(sheet-handle)::before {
+    background: CanvasText;
+  }
+}
+/* The sheet slides up from, and back down to, the bottom edge. Web Awesome
+   runs its show, hide and pulse animations through one slot, so the register
+   marks the host only while a show (`enter`) or hide (`exit`) runs, and only
+   those keyframes change; the hide plays them in reverse. Reduced motion and
+   the static effects mode keep Web Awesome's own animation. */
+@keyframes kui-dialog-surface-sheet-slide {
+  from {
+    translate: 0 100%;
+  }
+  to {
+    translate: 0 0;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  :root:not([data-kui-effects="static"])
+    .kui-dialog-surface[data-presentation="bottom-sheet"]:not(
+      [data-enter-motion="standard"]
+    )
+    > wa-dialog[data-kui-sheet-motion="enter"]::part(dialog),
+  :root:not([data-kui-effects="static"])
+    .kui-dialog-surface[data-presentation="bottom-sheet"]:not(
+      [data-exit-motion="standard"]
+    )
+    > wa-dialog[data-kui-sheet-motion="exit"]::part(dialog) {
+    animation-name: kui-dialog-surface-sheet-slide;
+    /* A full-height travel needs longer than the dialog's 150ms scale. */
+    animation-duration: var(--wa-transition-slow, 300ms);
+    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+  }
+}
 /* PopoverDialogSurface: the dialog chrome and bounded geometry for a native
    popover="auto" surface (non-modal, light dismiss) or the same surface in
    flow. The UA popover rules supply the centered top-layer placement. */
@@ -325,7 +484,12 @@
   overflow: auto;
   color: var(--kui-color-text);
   border: 1px solid var(--kui-color-neutral-border-normal);
-  border-radius: var(--kui-radius-l);
+  /* Matches the modal DialogSurface corner: a pill ToolbarControlGroup at the
+     8px surface inset (22px + 8px). */
+  border-radius: calc(
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem)) +
+      var(--kui-wa-surface-inset, 0.5rem)
+  );
   background: var(--kui-color-surface-raised);
   box-shadow: var(--kui-shadow-l);
 }

package/dist/styles/tab-navigator.css

@@ -5,7 +5,7 @@
   height: 100%;
   overflow: hidden;
   flex-direction: column;
-  background: var(--kui-color-surface);
+  background: var(--_kui-tab-scaffold-background, var(--kui-color-surface));
   /* Safe areas: the scenes and the bar paint through unsafe areas; the bar
      compensates for the bottom and inline edges, and the scenes for the top
      and inline edges (see pane.css for the `--kui-edge-inset-*` context). */
@@ -55,6 +55,31 @@
   background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
 }
 
+/* `background`: the navigator's color paints the root and a docked bar (the
+   overlay bar keeps the chrome material); a tab's own color paints its scene
+   and replaces its appearance's fill. A nested navigator never inherits the
+   color. Forced colors paint the system surface. */
+.kui-tab-scaffold:not([data-background]) {
+  --_kui-tab-scaffold-background: initial;
+}
+
+.kui-tab-scaffold__scene[data-kui-tint]:not([data-background]) {
+  background: var(--kui-color-surface);
+}
+
+.kui-tab-scaffold__scene[data-background] {
+  background: var(--_kui-tab-scaffold-scene-background);
+}
+
+@media (forced-colors: active) {
+  .kui-tab-scaffold[data-background],
+  .kui-tab-scaffold[data-background]:not([data-bar-presentation="overlay"])
+    > .kui-tab-scaffold__bar,
+  .kui-tab-scaffold__scene[data-background] {
+    background: Canvas;
+  }
+}
+
 /* A scene is its region's scroll owner, so its top inset is padding inside
    the scroller. A scene whose only child is a Pane or layout (usually a
    NavStack) lets that child own the insets instead. */
@@ -138,7 +163,7 @@
      scroll divider. Changing its color never moves the bar or a tab. */
   border-block-start: 1px solid
     var(--_kui-tab-scaffold-bar-divider, transparent);
-  background: var(--kui-color-surface);
+  background: var(--_kui-tab-scaffold-background, var(--kui-color-surface));
 }
 
 .kui-tab-scaffold[data-separator="auto"]:has(
@@ -161,7 +186,10 @@
       > [data-component="pane"][data-appearance="sunken"]
   )
   > .kui-tab-scaffold__bar,
-.kui-tab-scaffold[data-separator="auto"]:not([data-chrome-dividers])
+.kui-tab-scaffold[data-separator="auto"]:not(
+    [data-chrome-dividers],
+    [data-bar-material="clear"]
+  )
   > .kui-tab-scaffold__bar[data-scroll-divider*="t"],
 .kui-tab-scaffold[data-separator="auto"][data-chrome-dividers="always"]
   > .kui-tab-scaffold__bar {
@@ -213,6 +241,96 @@
   }
 }
 
+/* `barPresentation="clear"`: an overlay bar (the same measuring and edge
+   inset as above) that is fully transparent, for a bar over imagery. With
+   `scrollEdge="material"` a pseudo-element carrying the chrome material
+   fades in (opacity only) while the active scene continues beneath the bar,
+   and out once it is scrolled to its end. A clear bar draws no scroll
+   divider. */
+.kui-tab-scaffold[data-bar-material="clear"] > .kui-tab-scaffold__bar {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  background: transparent;
+}
+
+:where(.kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge])
+  > .kui-tab-scaffold__bar {
+  position: relative;
+  isolation: isolate;
+}
+
+/* The scroll edge fades in as content scrolls beneath the bar: the wiring
+   publishes `--kui-scroll-edge-progress` (0 at rest, 1 once content lies
+   `scrollEdgeDistance` beyond the bar) and only the layer's opacity follows
+   it; the filter never animates. Unwired, it stays clear. */
+.kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge]
+  > .kui-tab-scaffold__bar::before {
+  position: absolute;
+  z-index: -1;
+  content: "";
+  inset: 0;
+  opacity: var(--kui-scroll-edge-progress, 0);
+  pointer-events: none;
+}
+
+.kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge="material"]
+  > .kui-tab-scaffold__bar::before {
+  -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-material="clear"][data-scroll-edge="surface"]
+  > .kui-tab-scaffold__bar::before {
+  background: var(--kui-color-surface);
+}
+
+/* Static effects and slow displays snap the edge on while content lies
+   beneath the bar instead of tracking the scroll. */
+:root[data-kui-effects="static"]
+  .kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge]
+  > .kui-tab-scaffold__bar::before {
+  opacity: 0;
+}
+
+:root[data-kui-effects="static"]
+  .kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge]
+  > .kui-tab-scaffold__bar[data-scroll-divider*="t"]::before {
+  opacity: 1;
+}
+
+@media (update: slow) {
+  .kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge]
+    > .kui-tab-scaffold__bar::before {
+    opacity: 0;
+  }
+
+  .kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge]
+    > .kui-tab-scaffold__bar[data-scroll-divider*="t"]::before {
+    opacity: 1;
+  }
+}
+
+/* Clear chrome turns opaque where transparency would hurt, like the
+   material itself. */
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  .kui-tab-scaffold[data-bar-material="clear"] > .kui-tab-scaffold__bar {
+    background: var(--kui-chrome-material);
+  }
+}
+
+@media (forced-colors: active) {
+  .kui-tab-scaffold[data-bar-material="clear"] > .kui-tab-scaffold__bar {
+    background: Canvas;
+    border-block-start-color: CanvasText;
+  }
+
+  .kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge]
+    > .kui-tab-scaffold__bar::before {
+    content: none;
+  }
+}
+
 .kui-tab-scaffold__tab {
   display: flex;
   flex: 1 1 0;

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

@@ -420,6 +420,134 @@
   --kui-toolbar-control-color: var(--kui-color-text);
 }
 
+/* `material="glass"`: the group floats over imagery or a clear toolbar on the
+   translucent chrome material (foundation.css), blurred and saturated, the
+   per-control glass pills of overlay chrome. The fill and filter come from the
+   shared tokens, so the group inherits every opaque fallback they carry
+   (reduced transparency, increased contrast, static effects, no
+   backdrop-filter). The group's own 1px border becomes the specular edge, a
+   translucent white highlight, instead of a gray border plus a highlight; a
+   soft two-layer shadow lifts it off the content beneath.
+
+   Controls take the normal text color: over its own 80% surface material the
+   quiet control color falls below AA over the worst-case backdrop, while the
+   text color stays well above it (about 10:1 light over black, 8:1 dark over
+   white). Hover mixes a text-color tint into the material itself, so a lone
+   control's whole-group hover keeps a fill rather than replacing it with a
+   bare tint. A raised or outline selection paints an opaque surface pill, so
+   the brand selected color keeps AA over any content. A borderless group has
+   no surface and ignores the material. */
+.kui-toolbar-control-group[data-material="glass"]:not(
+    [data-appearance="borderless"]
+  ) {
+  --kui-toolbar-control-border: light-dark(
+    rgb(255 255 255 / 0.72),
+    rgb(255 255 255 / 0.16)
+  );
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  box-shadow:
+    0 0.0625rem 0.1875rem light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.32)),
+    0 0.375rem 1.125rem light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.28));
+}
+
+.kui-toolbar-control-group[data-material="glass"]:not(
+    [data-appearance="borderless"],
+    [data-tone="dark"],
+    [data-scrim="true"]
+  ) {
+  --kui-toolbar-control-background: var(--kui-chrome-material);
+  --kui-toolbar-control-color: var(--kui-color-text);
+  --kui-toolbar-control-hover-background: color-mix(
+    in srgb,
+    var(--kui-color-text) 12%,
+    var(--kui-chrome-material)
+  );
+}
+
+/* A dark glass group keeps its loud translucent fill and on-loud colors; its
+   edge is a faint white rim in either scheme. */
+.kui-toolbar-control-group[data-material="glass"][data-tone="dark"]:not(
+    [data-appearance="borderless"]
+  ) {
+  --kui-toolbar-control-border: rgb(255 255 255 / 0.18);
+}
+
+.kui-toolbar-control-group[data-material="glass"][data-selected-chrome="outline"] {
+  --kui-toolbar-control-selected-background: var(--kui-color-surface);
+}
+
+/* Wherever the chrome material turns opaque, the glass edge returns to the
+   group's normal border and a dark glass group to its opaque loud fill. The
+   default glass fill already follows the material tokens. */
+@supports not (
+  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
+) {
+  .kui-toolbar-control-group[data-material="glass"]:not(
+      [data-appearance="borderless"]
+    ) {
+    --kui-toolbar-control-border: var(--kui-color-neutral-border-normal);
+  }
+
+  .kui-toolbar-control-group[data-material="glass"][data-tone="dark"]:not(
+      [data-appearance="borderless"]
+    ) {
+    --kui-toolbar-control-background: var(--kui-color-neutral-fill-loud);
+    --kui-toolbar-control-border: var(
+      --kui-toolbar-control-dark-border,
+      #353536
+    );
+  }
+}
+
+@media (prefers-reduced-transparency: reduce),
+  (prefers-contrast: more),
+  (update: slow) {
+  .kui-toolbar-control-group[data-material="glass"]:not(
+      [data-appearance="borderless"]
+    ) {
+    --kui-toolbar-control-border: var(--kui-color-neutral-border-normal);
+  }
+
+  .kui-toolbar-control-group[data-material="glass"][data-tone="dark"]:not(
+      [data-appearance="borderless"]
+    ) {
+    --kui-toolbar-control-background: var(--kui-color-neutral-fill-loud);
+    --kui-toolbar-control-border: var(
+      --kui-toolbar-control-dark-border,
+      #353536
+    );
+  }
+}
+
+:root[data-kui-effects="static"]
+  .kui-toolbar-control-group[data-material="glass"]:not(
+    [data-appearance="borderless"]
+  ) {
+  --kui-toolbar-control-border: var(--kui-color-neutral-border-normal);
+}
+
+:root[data-kui-effects="static"]
+  .kui-toolbar-control-group[data-material="glass"][data-tone="dark"]:not(
+    [data-appearance="borderless"]
+  ) {
+  --kui-toolbar-control-background: var(--kui-color-neutral-fill-loud);
+  --kui-toolbar-control-border: var(--kui-toolbar-control-dark-border, #353536);
+}
+
+@media (forced-colors: active) {
+  .kui-toolbar-control-group[data-material="glass"]:not(
+      [data-appearance="borderless"]
+    ) {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    border-color: CanvasText;
+    color: CanvasText;
+    background-color: Canvas;
+    box-shadow: none;
+  }
+}
+
 /* `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

package/dist/styles/toolbar.css

@@ -217,6 +217,15 @@
   overflow-clip-margin: 4px;
 }
 
+/* A glass control group floats on a soft shadow that reaches well past the
+   ring margin (about 24px below and 18px to the side). While the zone holds
+   one it stops clipping, so the shadow is never cut off flat: a margin would
+   not do, since WebKit has no `overflow-clip-margin`. A title beside it still
+   truncates itself with its own ellipsis. */
+.kui-toolbar__leading:has(> .kui-toolbar-control-group[data-material="glass"]) {
+  overflow: visible;
+}
+
 .kui-toolbar__center {
   /* The center content never compresses below its own width (a group cannot
      shrink or clip its controls). The track above takes this as its minimum, so

package/dist/styles/webawesome.css

@@ -477,6 +477,16 @@
     padding: var(--kui-wa-surface-inset);
   }
 
+  /* The panel corner is concentric with a pill ToolbarControlGroup resting at
+     the surface inset (22px pill + 8px inset = 30px), so header and body
+     controls nest into the corner instead of crowding a tighter curve. */
+  wa-dialog::part(dialog) {
+    border-radius: calc(
+      var(--kui-layout-pill-radius, calc(1px + 1.3125rem)) +
+        var(--kui-wa-surface-inset, 0.5rem)
+    );
+  }
+
   wa-dialog::part(footer) {
     padding: var(--kui-wa-container-inset);
     display: flex;

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

@@ -1,8 +1,9 @@
 /**
  * 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.
+ * footer's body clearance, shows a floating header's divider while content
+ * is scrolled beneath it, and wires a bottom sheet's resize grabber,
+ * virtual-keyboard clearance, and slide motion.
  */
 declare const surfaceScaffoldElementsRegistered = true;