@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.110

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

@@ -0,0 +1,780 @@
+.kui-pane {
+  --kui-pane-separator-block-start-width: 0;
+  --kui-pane-separator-block-end-width: 0;
+  --kui-pane-separator-inline-start-width: 0;
+  --kui-pane-separator-inline-end-width: 0;
+
+  position: relative;
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+  box-sizing: border-box;
+  border: 0 solid
+    var(--kui-pane-separator-color, var(--kui-color-neutral-border-normal));
+  border-block-start-width: var(--kui-pane-separator-block-start-width);
+  border-block-end-width: var(--kui-pane-separator-block-end-width);
+  border-inline-start-width: var(--kui-pane-separator-inline-start-width);
+  border-inline-end-width: var(--kui-pane-separator-inline-end-width);
+  grid-template-areas:
+    "header"
+    "content"
+    "footer";
+  grid-template-rows: auto minmax(0, 1fr) auto;
+}
+
+.kui-pane:is(:focus-visible, [data-outlined="true"]) {
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+}
+
+/* A bleeding child can establish its own paint layer above the Pane outline.
+   Repeat the ring as an overlay after the content, without intercepting input. */
+.kui-pane:is(:focus-visible, [data-outlined="true"])::after {
+  position: absolute;
+  z-index: 1;
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+  content: "";
+  inset: 0;
+  pointer-events: none;
+}
+
+/* Paint the active scroll owner once, so alpha lowered colors do not stack.
+   Fixed chrome leaves the content slot scrolling; auto chrome lets the Pane
+   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"]
+  > .kui-pane__content {
+  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));
+}
+
+/* `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-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;
+}
+
+/* `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
+   still reaches into an unsafe area: layouts clear an edge a region does not
+   reach, and an unset edge means the full device inset. Every slot clears the
+   context once it has applied it, so nested content never double-insets. */
+.kui-pane {
+  --_kui-pane-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-pane-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-pane-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-pane-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
+}
+
+.kui-pane[data-safe-area-block-start="false"] {
+  --_kui-pane-safe-block-start: 0px;
+}
+
+.kui-pane[data-safe-area-block-end="false"] {
+  --_kui-pane-safe-block-end: 0px;
+}
+
+.kui-pane[data-safe-area-inline-start="false"] {
+  --_kui-pane-safe-inline-start: 0px;
+}
+
+.kui-pane[data-safe-area-inline-end="false"] {
+  --_kui-pane-safe-inline-end: 0px;
+}
+
+.kui-pane[data-separator-block-start="true"] {
+  --kui-pane-separator-block-start-width: var(--kui-pane-separator-width, 1px);
+}
+
+.kui-pane[data-separator-block-end="true"] {
+  --kui-pane-separator-block-end-width: var(--kui-pane-separator-width, 1px);
+}
+
+.kui-pane[data-separator-inline-start="true"] {
+  --kui-pane-separator-inline-start-width: var(--kui-pane-separator-width, 1px);
+}
+
+.kui-pane[data-separator-inline-end="true"] {
+  --kui-pane-separator-inline-end-width: var(--kui-pane-separator-width, 1px);
+}
+
+/* Child selectors outrank the `.kui-content` reset the content slot also carries. */
+.kui-pane > :is(.kui-pane__header, .kui-pane__content, .kui-pane__footer) {
+  --kui-edge-inset-block-start: 0px;
+  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-start: 0px;
+  --kui-edge-inset-inline-end: 0px;
+  padding-inline: var(--_kui-pane-safe-inline-start)
+    var(--_kui-pane-safe-inline-end);
+}
+
+.kui-pane__header,
+.kui-pane__toolbar {
+  display: flex;
+  min-width: 0;
+  padding-block-start: var(--_kui-pane-safe-block-start);
+  flex-direction: column;
+  grid-area: header;
+}
+
+/* A header or footer holding only a Toolbar hands the toolbar its inline edges
+   instead of padding around it, so the toolbar's dividers still reach the
+   pane edge while its controls clear the unsafe area. */
+.kui-pane
+  > :is(.kui-pane__header, .kui-pane__footer):has(
+    > [data-component="toolbar"]:only-child
+  ) {
+  --kui-edge-inset-inline-start: var(--_kui-pane-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-pane-safe-inline-end);
+  padding-inline: 0;
+}
+
+/* The scrolling content takes the block insets as padding inside the scroller
+   (and matching scroll padding), so content scrolls under an unsafe edge yet
+   its first and last items can always be scrolled clear of it. A header or
+   footer already owns that edge. */
+.kui-pane__content {
+  /* Descendants can use these resolved insets to bleed decoration to the
+     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;
+  --_kui-pane-content-safe-block-start: var(--_kui-pane-safe-block-start);
+  --_kui-pane-content-safe-block-end: var(--_kui-pane-safe-block-end);
+  --_kui-pane-content-block-start: calc(
+    var(--_kui-pane-content-safe-block-start) +
+      var(--_kui-pane-deep-block-inset) + var(--_kui-pane-clearance-block-start)
+  );
+  --_kui-pane-content-block-end: calc(
+    var(--_kui-pane-content-safe-block-end) +
+      var(--_kui-pane-deep-block-inset) + var(--_kui-pane-clearance-block-end)
+  );
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  grid-area: content;
+  overscroll-behavior: contain;
+  scroll-padding-block: var(--_kui-pane-content-block-start)
+    var(--_kui-pane-content-block-end);
+}
+
+.kui-pane > .kui-pane__content {
+  padding-inline: var(--kui-pane-content-inset-inline-start)
+    var(--kui-pane-content-inset-inline-end);
+  padding-block: var(--_kui-pane-content-block-start)
+    var(--_kui-pane-content-block-end);
+}
+
+/* `scrollClearance`: chrome lying over the content's block edge (a dialog's
+   floating footer) publishes how far it covers that edge through the
+   inherited `--kui-scroll-clearance-block-*` context. The content scroller
+   adds it to the block padding and scroll padding above, so content scrolls
+   visibly beneath that chrome yet its first and last items can always rest
+   clear of it. */
+.kui-pane:is(
+    [data-scroll-clearance="block-start"],
+    [data-scroll-clearance="both"]
+  )
+  > .kui-pane__content {
+  --_kui-pane-clearance-block-start: var(
+    --kui-scroll-clearance-block-start,
+    0px
+  );
+}
+
+.kui-pane:is(
+    [data-scroll-clearance="block-end"],
+    [data-scroll-clearance="both"]
+  )
+  > .kui-pane__content {
+  --_kui-pane-clearance-block-end: var(--kui-scroll-clearance-block-end, 0px);
+}
+
+/* `headerPresentation="overlay"`: the header paints the translucent chrome
+   material (opaque under reduced transparency, without `backdrop-filter`, or
+   in forced colors). Once `wireScrollDividers` has measured it
+   (`data-header-overlay="measured"`, with its border-box height published as
+   `--kui-scroll-clearance-block-start` on this root), the header moves into
+   the content cell above the scroller, and the scroller clears it through
+   the same block padding and scroll padding `scrollClearance` uses, and the
+   header leaves a classic scrollbar uncovered. Unwired,
+   or with `chromePlacement="auto"`, the header stays docked in its own row,
+   so it never covers content it has not measured. */
+.kui-pane[data-header-presentation="overlay"] > .kui-pane__header {
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  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"]
+  )
+  > .kui-pane__header {
+  position: relative;
+  z-index: 1;
+  align-self: start;
+  grid-area: content;
+  /* A classic (space-taking) vertical scrollbar stays uncovered: the wiring
+     publishes its inline size, so the header ends where the scrollbar's
+     track begins and its thumb and arrow buttons stay visible and usable.
+     An overlay scrollbar takes no space and leaves this unset, so it passes
+     beneath the material like the content. */
+  margin-inline-end: var(--kui-pane-scrollbar-inline-size, 0px);
+}
+
+.kui-pane[data-header-presentation="overlay"][data-header-overlay="measured"]:not(
+    [data-chrome-placement="auto"]
+  )
+  > .kui-pane__content {
+  --_kui-pane-clearance-block-start: var(
+    --kui-scroll-clearance-block-start,
+    0px
+  );
+}
+
+@media (forced-colors: active) {
+  .kui-pane[data-header-presentation="overlay"] > .kui-pane__header {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: Canvas;
+    border-block-end: 1px solid CanvasText;
+  }
+}
+
+/* `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 {
+  /* Reserve a vertical scrollbar gutter when the host uses opaque edge-to-edge content. */
+  scrollbar-gutter: var(--kui-pane-scrollbar-gutter, auto);
+  --_kui-pane-deep-block-inset: var(--kui-space-xs);
+  --kui-pane-content-inset-inline-start: calc(
+    var(--_kui-pane-safe-inline-start) + var(--kui-space-xs)
+  );
+  --kui-pane-content-inset-inline-end: calc(
+    var(--_kui-pane-safe-inline-end) + var(--kui-space-xs)
+  );
+}
+
+.kui-pane__header ~ .kui-pane__content {
+  --_kui-pane-content-safe-block-start: 0px;
+}
+
+.kui-pane__content:has(~ .kui-pane__footer) {
+  --_kui-pane-content-safe-block-end: 0px;
+}
+
+.kui-pane__footer {
+  display: flex;
+  min-width: 0;
+  padding-block-end: var(--_kui-pane-safe-block-end);
+  flex-direction: column;
+  grid-area: footer;
+}
+
+/* Chrome dividers: one line under the header and one over the footer, where
+   the pinned chrome meets the scrolling content, whatever the chrome holds.
+   `chromeDividers="scroll"` (the plain-pane default, no attribute) draws each only while
+   `wireScrollDividers` reports content scrolled away beneath it through
+   `data-scroll-divider` on the slot; a sunken pane defaults to `always`, which
+   draws both; `none` draws neither. The
+   line is an inset shadow inside the slot, so showing or hiding it never
+   moves the chrome or the content. */
+.kui-pane > :is(.kui-pane__header, .kui-pane__toolbar, .kui-pane__footer) {
+  --_kui-pane-chrome-divider: transparent;
+}
+
+.kui-pane > :is(.kui-pane__header, .kui-pane__toolbar) {
+  box-shadow: inset 0 -1px var(--_kui-pane-chrome-divider);
+}
+
+.kui-pane > .kui-pane__footer {
+  box-shadow: inset 0 1px var(--_kui-pane-chrome-divider);
+}
+
+.kui-pane:not([data-chrome-dividers], [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"],
+.kui-pane[data-chrome-dividers="always"]
+  > :is(.kui-pane__header, .kui-pane__toolbar, .kui-pane__footer) {
+  --_kui-pane-chrome-divider: var(
+    --kui-pane-separator-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}
+
+/* `chromePlacement="auto"`: the header and footer stay pinned while the pane
+   is tall enough; below 480px of height (30rem, so it scales with the text
+   size) the whole pane scrolls as one column instead, so tall chrome can never
+   squeeze the content to nothing. The pane is its own size container and lays
+   its slots out as a column: while tall, the content fills the space between
+   the chrome and scrolls itself, and the pane never scrolls; while short, the
+   content takes its natural height and the pane scrolls. */
+.kui-pane[data-chrome-placement="auto"] {
+  container: kui-pane / size;
+  display: flex;
+  overflow-y: auto;
+  flex-direction: column;
+  overscroll-behavior: contain;
+}
+
+.kui-pane[data-chrome-placement="auto"]
+  > :is(.kui-pane__header, .kui-pane__footer) {
+  flex: none;
+}
+
+.kui-pane[data-chrome-placement="auto"] > .kui-pane__content {
+  flex: 1 1 0;
+}
+
+@container kui-pane (max-height: 30rem) {
+  .kui-pane[data-chrome-placement="auto"] > .kui-pane__content {
+    flex: none;
+    overflow: visible;
+  }
+}
+
+/* As the only child of a Workbench region (its main area or a panel's
+   content, which the Workbench marks with `data-workbench-main` /
+   `data-workbench-panel-content`), a Pane fills the region, so a
+   composed toolbar's footer (or the app's own) sits at the region's bottom
+   edge rather than under short content. */
+:is([data-workbench-main], [data-workbench-panel-content])
+  > [data-component="pane"]:only-child {
+  height: 100%;
+  --kui-edge-inset-block-start: var(--_kui-workbench-content-edge-block-start);
+  --kui-edge-inset-block-end: var(--_kui-workbench-content-edge-block-end);
+  --kui-edge-inset-inline-start: var(
+    --_kui-workbench-content-edge-inline-start
+  );
+  --kui-edge-inset-inline-end: var(--_kui-workbench-content-edge-inline-end);
+}
+
+/* As the only child of a NavStack view or a TabNavigator scene, a Pane fills
+   it too, so its content owns the scroll and its header and footer stay
+   pinned; the view or scene then never scrolls (it hands the Pane its
+   safe-area edge context, which the Pane's slots apply). */
+:is(.kui-nav-stack__view, .kui-tab-scaffold__scene)
+  > [data-component="pane"]:only-child {
+  height: 100%;
+}
+
+/* Compact chrome (`compactChrome`): the pane declares a policy for its header
+   and footer, and applies it only where its container presents compactly — a
+   NavStack view, a TabNavigator scene, a full-screen dialog, or a Workbench at
+   its compact width (448px or less). Elsewhere the chrome stays docked. */
+
+/* `scroll`: the pane scrolls as one column. Scrolling chrome moves with
+     the content; a footer settles at the bottom of short content and
+     scrolls past long content. Fixed chrome stays stuck to its edge. */
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane:is([data-compact-header="scroll"], [data-compact-footer="scroll"]) {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  grid-template-rows: auto minmax(max-content, 1fr) auto;
+}
+
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane:is([data-compact-header="scroll"], [data-compact-footer="scroll"])
+  > .kui-pane__content {
+  overflow: visible;
+}
+
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-footer="scroll"]:not([data-compact-header])
+  > .kui-pane__header,
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-header="scroll"]:not([data-compact-footer])
+  > .kui-pane__footer {
+  position: sticky;
+  z-index: 1;
+  background: var(--kui-pane-chrome-background, var(--kui-color-surface));
+}
+
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-footer="scroll"]:not([data-compact-header])
+  > .kui-pane__header {
+  inset-block-start: 0;
+}
+
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-header="scroll"]:not([data-compact-footer])
+  > .kui-pane__footer {
+  inset-block-end: 0;
+}
+
+/* `overlay`: the chrome lies over the content's edge on the chrome
+     material, out of the way until the app opens it. The content keeps the
+     whole pane. */
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-header="overlay"]
+  > .kui-pane__header,
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-footer="overlay"]
+  > .kui-pane__footer {
+  position: absolute;
+  z-index: 2;
+  inset-inline: 0;
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material);
+  transition:
+    translate 200ms ease,
+    visibility 0s 200ms;
+}
+
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-header="overlay"]
+  > .kui-pane__header {
+  inset-block-start: 0;
+}
+
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-footer="overlay"]
+  > .kui-pane__footer {
+  inset-block-end: 0;
+}
+
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-header="overlay"]:not([data-compact-header-open])
+  > .kui-pane__header {
+  visibility: hidden;
+  translate: 0 -100%;
+}
+
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-footer="overlay"]:not([data-compact-footer-open])
+  > .kui-pane__footer {
+  visibility: hidden;
+  translate: 0 100%;
+}
+
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-header-open]
+  > .kui-pane__header,
+:is(
+    .kui-nav-stack__view,
+    .kui-tab-scaffold__scene,
+    .kui-dialog-surface[data-presentation="fullscreen"]
+  )
+  .kui-pane[data-compact-footer-open]
+  > .kui-pane__footer {
+  transition: translate 200ms ease;
+}
+
+@container kui-workbench (max-width: 28rem) {
+  /* `scroll`: the pane scrolls as one column. Scrolling chrome moves with
+     the content; a footer settles at the bottom of short content and
+     scrolls past long content. Fixed chrome stays stuck to its edge. */
+  :where(.kui-workbench)
+    .kui-pane:is(
+      [data-compact-header="scroll"],
+      [data-compact-footer="scroll"]
+    ) {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    grid-template-rows: auto minmax(max-content, 1fr) auto;
+  }
+
+  :where(.kui-workbench)
+    .kui-pane:is([data-compact-header="scroll"], [data-compact-footer="scroll"])
+    > .kui-pane__content {
+    overflow: visible;
+  }
+
+  :where(.kui-workbench)
+    .kui-pane[data-compact-footer="scroll"]:not([data-compact-header])
+    > .kui-pane__header,
+  :where(.kui-workbench)
+    .kui-pane[data-compact-header="scroll"]:not([data-compact-footer])
+    > .kui-pane__footer {
+    position: sticky;
+    z-index: 1;
+    background: var(--kui-pane-chrome-background, var(--kui-color-surface));
+  }
+
+  :where(.kui-workbench)
+    .kui-pane[data-compact-footer="scroll"]:not([data-compact-header])
+    > .kui-pane__header {
+    inset-block-start: 0;
+  }
+
+  :where(.kui-workbench)
+    .kui-pane[data-compact-header="scroll"]:not([data-compact-footer])
+    > .kui-pane__footer {
+    inset-block-end: 0;
+  }
+
+  /* `overlay`: the chrome lies over the content's edge on the chrome
+     material, out of the way until the app opens it. The content keeps the
+     whole pane. */
+  :where(.kui-workbench)
+    .kui-pane[data-compact-header="overlay"]
+    > .kui-pane__header,
+  :where(.kui-workbench)
+    .kui-pane[data-compact-footer="overlay"]
+    > .kui-pane__footer {
+    position: absolute;
+    z-index: 2;
+    inset-inline: 0;
+    -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+    backdrop-filter: var(--kui-chrome-material-filter);
+    background: var(--kui-chrome-material);
+    transition:
+      translate 200ms ease,
+      visibility 0s 200ms;
+  }
+
+  :where(.kui-workbench)
+    .kui-pane[data-compact-header="overlay"]
+    > .kui-pane__header {
+    inset-block-start: 0;
+  }
+
+  :where(.kui-workbench)
+    .kui-pane[data-compact-footer="overlay"]
+    > .kui-pane__footer {
+    inset-block-end: 0;
+  }
+
+  :where(.kui-workbench)
+    .kui-pane[data-compact-header="overlay"]:not([data-compact-header-open])
+    > .kui-pane__header {
+    visibility: hidden;
+    translate: 0 -100%;
+  }
+
+  :where(.kui-workbench)
+    .kui-pane[data-compact-footer="overlay"]:not([data-compact-footer-open])
+    > .kui-pane__footer {
+    visibility: hidden;
+    translate: 0 100%;
+  }
+
+  :where(.kui-workbench)
+    .kui-pane[data-compact-header-open]
+    > .kui-pane__header,
+  :where(.kui-workbench)
+    .kui-pane[data-compact-footer-open]
+    > .kui-pane__footer {
+    transition: translate 200ms ease;
+  }
+}