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

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

@@ -0,0 +1,744 @@
+/* DialogSurface: a native modal <dialog> (the panel) holding Kerf's header,
+   body, and footer. The UA rules supply the top layer, the centered placement
+   between both viewport insets, and the closed `display: none`; these rules
+   only replace the UA chrome. */
+.kui-dialog-surface {
+  --_kui-dialog-surface-width: 35rem;
+  --_kui-dialog-surface-resolved-gutter: max(
+    0px,
+    var(--_kui-dialog-surface-gutter, 1rem)
+  );
+  /* 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)
+  );
+  box-sizing: border-box;
+  width: min(
+    var(
+      --_kui-dialog-surface-preferred-width,
+      var(--_kui-dialog-surface-width)
+    ),
+    calc(100vw - 2rem)
+  );
+  max-width: calc(100% - 2.5rem);
+  max-height: calc(100% - 2.5rem);
+  padding: 0;
+  margin: auto;
+  color: var(--kui-color-text, inherit);
+  border: none;
+  border-radius: var(--_kui-dialog-surface-radius);
+  --kui-color-surface-current: var(--kui-color-surface-raised);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
+  background-color: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-l);
+  /* Sizes apply at once: a theme's transition on bare dialog elements would
+     ease the safe-area, keyboard, and resized sheet heights. */
+  transition: none;
+}
+.kui-dialog-surface[open] {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+.kui-dialog-surface:focus {
+  outline: none;
+}
+.kui-dialog-surface::backdrop {
+  background-color: var(
+    --wa-color-overlay-modal,
+    light-dark(rgb(29 29 31 / 0.34), rgb(0 0 0 / 0.6))
+  );
+}
+/* Room for phones whose viewport height ignores the browser chrome. */
+@media screen and (max-width: 26.25rem) {
+  .kui-dialog-surface {
+    max-height: 80vh;
+  }
+}
+@media (forced-colors: active) {
+  .kui-dialog-surface {
+    border: 1px solid CanvasText;
+  }
+}
+.kui-dialog-surface[data-body-inset="comfortable"] {
+  --_kui-dialog-surface-radius: calc(
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem)) +
+      var(--kui-wa-container-inset, 1rem)
+  );
+}
+.kui-dialog-surface[data-size="small"] {
+  --_kui-dialog-surface-width: 25rem;
+}
+.kui-dialog-surface[data-size="large"] {
+  --_kui-dialog-surface-width: 50rem;
+}
+.kui-dialog-surface[data-presentation="modal"][data-viewport-gutter] {
+  width: min(
+    var(
+      --_kui-dialog-surface-preferred-width,
+      var(--_kui-dialog-surface-width)
+    ),
+    max(
+      0px,
+      calc(
+        100vw - var(--_kui-dialog-surface-resolved-gutter) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+  max-width: max(
+    0px,
+    calc(
+      100vw - var(--_kui-dialog-surface-resolved-gutter) -
+        var(--_kui-dialog-surface-resolved-gutter)
+    )
+  );
+}
+.kui-dialog-surface[data-presentation="modal"][data-max-height] {
+  max-height: max(
+    0px,
+    min(
+      var(--_kui-dialog-surface-max-height, 100dvh),
+      calc(
+        100dvh - var(--_kui-dialog-surface-resolved-gutter) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+}
+.kui-dialog-surface[data-presentation="modal"][data-height] {
+  --_kui-dialog-surface-resolved-height: max(
+    0px,
+    min(
+      var(--_kui-dialog-surface-height, 100dvh),
+      calc(
+        100dvh - var(--_kui-dialog-surface-resolved-gutter) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+  height: var(--_kui-dialog-surface-resolved-height);
+  max-height: var(--_kui-dialog-surface-resolved-height);
+}
+
+/* The header: the title (the label text, inset by the list item step so it
+   lines up with the body's text, or the application's heading content), then
+   the header actions and the close button. */
+.kui-dialog-surface__header {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-dialog-surface__title {
+  min-width: 0;
+  flex: 1 1 auto;
+  align-self: center;
+  margin: 0;
+  font-family: inherit;
+  font-size: var(--kui-font-l, 1.25rem);
+  font-weight: 600;
+  line-height: 1.2;
+}
+h2.kui-dialog-surface__title {
+  padding-inline: calc(var(--kui-layout-item-padding, 0.5rem) + 1px);
+}
+.kui-dialog-surface__header-actions {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-self: start;
+  justify-content: end;
+  gap: 0.25rem;
+  padding-inline-start: 1.5rem;
+}
+/* The close control matches a borderless single ToolbarControlGroup button:
+   a 40px circle with the toolbar's neutral hover fill. */
+.kui-dialog-surface__close {
+  display: inline-flex;
+  width: 2.5rem;
+  height: 2.5rem;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  color: var(--kui-color-neutral-on-quiet);
+  font: inherit;
+  border: none;
+  border-radius: var(--kui-radius-circle, 50%);
+  background: transparent;
+  cursor: pointer;
+}
+.kui-dialog-surface__close:hover {
+  background-color: var(--kui-color-neutral-fill-normal);
+}
+.kui-dialog-surface__close:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: var(--kui-focus-ring-offset, 1px);
+}
+@media (forced-colors: active) {
+  .kui-dialog-surface__close {
+    color: ButtonText;
+  }
+}
+
+.kui-dialog-surface__body {
+  /* A dialog body starts a new scroll context, so it clears any
+     `--kui-scroll-clearance-*` a page region published around the dialog. */
+  --kui-scroll-clearance-block-start: 0px;
+  --kui-scroll-clearance-block-end: 0px;
+  display: block;
+  min-height: 0;
+  flex: 1 1 auto;
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.kui-dialog-surface__footer {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+  padding: var(--kui-wa-container-inset, 1rem);
+}
+
+/* One child owns the body: it gets the body's whole height and its own
+   scrolling (the body itself no longer scrolls). */
+.kui-dialog-surface[data-body-layout="fill"] > .kui-dialog-surface__body {
+  display: grid;
+  overflow: hidden;
+  grid-template-rows: minmax(0, 1fr);
+}
+.kui-dialog-surface[data-body-inset="none"] > .kui-dialog-surface__body,
+.kui-dialog-surface[data-footer-inset="none"] > .kui-dialog-surface__footer {
+  padding: 0;
+}
+.kui-dialog-surface[data-body-inset="compact"] > .kui-dialog-surface__body,
+.kui-dialog-surface[data-footer-inset="compact"] > .kui-dialog-surface__footer {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-dialog-surface[data-body-inset="comfortable"] > .kui-dialog-surface__body,
+.kui-dialog-surface[data-footer-inset="comfortable"]
+  > .kui-dialog-surface__footer {
+  padding: var(--kui-wa-container-inset, 1rem);
+}
+/* Fixed rows above one filling row: the leading children keep their natural
+   height and the last child takes the rest and owns its scrolling. */
+.kui-dialog-surface[data-body-layout="fill-last"] > .kui-dialog-surface__body {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.kui-dialog-surface[data-body-layout="fill-last"]
+  > .kui-dialog-surface__body
+  > * {
+  flex: none;
+}
+.kui-dialog-surface[data-body-layout="fill-last"]
+  > .kui-dialog-surface__body
+  > :last-child {
+  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"] {
+  --_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"]
+  > .kui-dialog-surface__footer {
+  position: absolute;
+  z-index: 1;
+  inset-inline: var(--_kui-dialog-surface-footer-resolved-offset);
+  inset-block-end: var(--_kui-dialog-surface-footer-resolved-offset);
+  background: transparent;
+}
+.kui-dialog-surface[data-footer-presentation="floating"]
+  > .kui-dialog-surface__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"]
+  > .kui-dialog-surface__body {
+  padding-block-end: var(--_kui-dialog-surface-footer-clearance);
+}
+.kui-dialog-surface[data-footer-presentation="floating"][data-body-inset="compact"]
+  > .kui-dialog-surface__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"]
+  > .kui-dialog-surface__body {
+  padding-block-end: calc(
+    var(--kui-wa-container-inset, 1rem) +
+      var(--_kui-dialog-surface-footer-clearance)
+  );
+}
+/* With a floating footer over a filling last 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[data-footer-presentation="floating"]:is(
+    [data-body-layout="fill"],
+    [data-body-layout="fill-last"]
+  )
+  > .kui-dialog-surface__body:has(
+    > :last-child:is(
+        [data-scroll-clearance="block-end"],
+        [data-scroll-clearance="both"]
+      )
+  ) {
+  --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"] {
+  --_kui-dialog-surface-header-divider-color: var(
+    --kui-color-neutral-border-normal
+  );
+}
+.kui-dialog-surface[data-header-presentation="floating"]
+  > .kui-dialog-surface__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);
+  /* The material's surface context at rest, over the raised panel. */
+  --kui-color-surface-current-tint: var(--kui-chrome-material-raised);
+  /* The divider is scroll state: the register publishes it only while
+     content is scrolled beneath the header. An inset shadow, so showing it
+     never moves the header or the content. */
+  box-shadow: inset 0 -1px
+    var(--_kui-dialog-surface-header-divider, transparent);
+}
+.kui-dialog-surface[data-header-presentation="floating"]
+  > .kui-dialog-surface__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"]
+  > .kui-dialog-surface__body {
+  padding-block-start: var(--_kui-dialog-surface-header-clearance);
+}
+.kui-dialog-surface[data-header-presentation="floating"][data-body-inset="compact"]
+  > .kui-dialog-surface__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"]
+  > .kui-dialog-surface__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"]
+  )
+  > .kui-dialog-surface__body:has(
+    > :only-child:is(
+        [data-scroll-clearance="block-start"],
+        [data-scroll-clearance="both"]
+      )
+  ) {
+  --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"]
+    > .kui-dialog-surface__header {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: Canvas;
+    border-block-end: 1px solid CanvasText;
+  }
+}
+.kui-dialog-surface[data-presentation="side-sheet"] {
+  width: min(30rem, 100vw);
+  max-width: 100vw;
+  height: 100dvh;
+  max-height: 100dvh;
+  margin-inline-end: 0;
+  border-radius: var(--_kui-dialog-surface-radius) 0 0
+    var(--_kui-dialog-surface-radius);
+}
+.kui-dialog-surface[data-presentation="fullscreen"] {
+  width: 100vw;
+  max-width: 100vw;
+  height: 100dvh;
+  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"] {
+  --_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)
+      )
+    )
+  );
+  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] {
+  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 its grabber: 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] {
+  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__sheet-handle {
+  position: absolute;
+  z-index: 2;
+  width: 6rem;
+  height: 1.25rem;
+  margin-inline: auto;
+  border-radius: var(--kui-radius-s);
+  cursor: ns-resize;
+  inset-block-start: 0;
+  inset-inline: 0;
+  touch-action: none;
+}
+.kui-dialog-surface__sheet-handle::before {
+  position: absolute;
+  width: 2.25rem;
+  height: 0.3125rem;
+  margin-inline: auto;
+  border-radius: 0.15625rem;
+  background: var(--kui-color-neutral-border-loud);
+  content: "";
+  inset-block-start: 0.375rem;
+  inset-inline: 0;
+}
+.kui-dialog-surface__sheet-handle:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+}
+@media (forced-colors: active) {
+  .kui-dialog-surface__sheet-handle::before {
+    background: CanvasText;
+  }
+}
+
+/* Motion: the controller marks the panel while an enter, exit, or pulse
+   runs, and ends each by a timer read from these durations. The panel scales
+   and fades in (and back out); a bottom sheet slides up from, and back down
+   to, the bottom edge; a refused close pulses. Reduced motion and the static
+   effects mode skip it. */
+@keyframes kui-dialog-surface-show {
+  from {
+    opacity: 0;
+    scale: 0.8;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+@keyframes kui-dialog-surface-backdrop {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes kui-dialog-surface-pulse {
+  0% {
+    scale: 1;
+  }
+  50% {
+    scale: 1.02;
+  }
+  100% {
+    scale: 1;
+  }
+}
+@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-kui-dialog-motion="enter"],
+  :root:not([data-kui-effects="static"])
+    .kui-dialog-surface[data-kui-dialog-motion="enter"]::backdrop {
+    animation: kui-dialog-surface-show 150ms ease;
+  }
+  :root:not([data-kui-effects="static"])
+    .kui-dialog-surface[data-kui-dialog-motion="enter"]::backdrop {
+    animation-name: kui-dialog-surface-backdrop;
+  }
+  :root:not([data-kui-effects="static"])
+    .kui-dialog-surface[data-kui-dialog-motion="exit"],
+  :root:not([data-kui-effects="static"])
+    .kui-dialog-surface[data-kui-dialog-motion="exit"]::backdrop {
+    animation: kui-dialog-surface-show 150ms ease reverse forwards;
+  }
+  :root:not([data-kui-effects="static"])
+    .kui-dialog-surface[data-kui-dialog-motion="exit"]::backdrop {
+    animation-name: kui-dialog-surface-backdrop;
+  }
+  :root:not([data-kui-effects="static"])
+    .kui-dialog-surface[data-kui-dialog-motion="pulse"] {
+    animation: kui-dialog-surface-pulse 250ms ease;
+  }
+  :root:not([data-kui-effects="static"])
+    .kui-dialog-surface[data-presentation="bottom-sheet"]:not(
+      [data-enter-motion="standard"]
+    )[data-kui-dialog-motion="enter"],
+  :root:not([data-kui-effects="static"])
+    .kui-dialog-surface[data-presentation="bottom-sheet"]:not(
+      [data-exit-motion="standard"]
+    )[data-kui-dialog-motion="exit"] {
+    /* A full-height travel needs longer than the dialog's 150ms scale. */
+    animation-name: kui-dialog-surface-sheet-slide;
+    animation-duration: 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. */
+.kui-popover-dialog-surface {
+  --_kui-popover-dialog-surface-width: 35rem;
+  --_kui-popover-dialog-surface-resolved-gutter: max(
+    0px,
+    var(--_kui-popover-dialog-surface-gutter, 1rem)
+  );
+  --_kui-popover-dialog-surface-available-height: calc(
+    100dvh - var(--_kui-popover-dialog-surface-resolved-gutter) -
+      var(--_kui-popover-dialog-surface-resolved-gutter)
+  );
+  box-sizing: border-box;
+  width: min(
+    var(
+      --_kui-popover-dialog-surface-preferred-width,
+      var(--_kui-popover-dialog-surface-width)
+    ),
+    max(
+      0px,
+      calc(
+        100vw - var(--_kui-popover-dialog-surface-resolved-gutter) -
+          var(--_kui-popover-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+  max-height: max(0px, var(--_kui-popover-dialog-surface-available-height));
+  padding: 0;
+  overflow: auto;
+  color: var(--kui-color-text);
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  /* 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)
+  );
+  --kui-color-surface-current: var(--kui-color-surface-raised);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-l);
+}
+.kui-popover-dialog-surface[data-size="small"] {
+  --_kui-popover-dialog-surface-width: 25rem;
+}
+.kui-popover-dialog-surface[data-size="large"] {
+  --_kui-popover-dialog-surface-width: 50rem;
+}
+.kui-popover-dialog-surface[data-max-height] {
+  max-height: max(
+    0px,
+    min(
+      var(--_kui-popover-dialog-surface-max-height, 100dvh),
+      var(--_kui-popover-dialog-surface-available-height)
+    )
+  );
+}
+.kui-popover-dialog-surface[data-height] {
+  height: max(
+    0px,
+    min(
+      var(--_kui-popover-dialog-surface-height, 100dvh),
+      var(--_kui-popover-dialog-surface-available-height)
+    )
+  );
+  max-height: none;
+}
+/* Centered in the top layer whatever margins or item alignment the host
+   sets: an absolutely positioned box's auto self-alignment otherwise
+   follows its parent's justify-items. */
+.kui-popover-dialog-surface[data-presentation="overlay"]:popover-open {
+  inset: 0;
+  margin: auto;
+  place-self: center;
+}
+.kui-popover-dialog-surface::backdrop {
+  background: var(
+    --wa-color-overlay-modal,
+    light-dark(rgb(29 29 31 / 0.34), rgb(0 0 0 / 0.6))
+  );
+}
+/* Only an open overlay lays out, so a closed one stays hidden. One filling
+   child takes the whole surface and owns its scrolling. */
+.kui-popover-dialog-surface[data-body-layout="fill"]:is(
+    :popover-open,
+    [data-presentation="embedded"]
+  ) {
+  display: grid;
+  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"] {
+  position: relative;
+  inset: auto;
+  /* The available inline space, after any margin the container gives it. */
+  max-width: 100%;
+  max-width: -webkit-fill-available;
+  max-width: -moz-available;
+  max-width: stretch;
+  margin: 0;
+}
+.kui-popup-surface {
+  display: inline-flex;
+}
+/* The surface insets the menu of a raw wa-dropdown it wraps. A PopupMenu
+   applies the surface's inset to itself (popup-menu.css). */
+.kui-popup-surface[data-inset="standard"]
+  > wa-dropdown:not(.kui-popup-menu)::part(menu) {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-popup-surface[data-inset="compact"]
+  > wa-dropdown:not(.kui-popup-menu)::part(menu) {
+  padding: 0.25rem;
+}
+.kui-popup-surface[data-inset="list-zero"]
+  > wa-dropdown:not(.kui-popup-menu)::part(menu) {
+  padding: 0;
+}