@kerfjs/ui 5.0.0-beta.103 → 5.0.0-beta.105

package/dist/styles/surface-scaffold.css

@@ -1,44 +1,79 @@
-.kui-dialog-surface > wa-dialog {
+/* 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)
   );
-  --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)
   );
+  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);
+  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[data-body-inset="comfortable"] > wa-dialog {
+.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 > wa-dialog::part(dialog) {
-  border-radius: var(--_kui-dialog-surface-radius);
-}
-.kui-dialog-surface[data-size="small"] > wa-dialog {
+.kui-dialog-surface[data-size="small"] {
   --_kui-dialog-surface-width: 25rem;
-  --width: min(25rem, calc(100vw - 2rem));
 }
-.kui-dialog-surface[data-size="large"] > wa-dialog {
+.kui-dialog-surface[data-size="large"] {
   --_kui-dialog-surface-width: 50rem;
-  --width: min(50rem, calc(100vw - 2rem));
 }
-.kui-dialog-surface[data-presentation="modal"][data-preferred-width]
-  > wa-dialog {
-  --width: min(
-    var(--_kui-dialog-surface-preferred-width),
-    calc(100vw - 2rem)
-  );
-}
-.kui-dialog-surface[data-presentation="modal"][data-viewport-gutter]
-  > wa-dialog {
-  --width: min(
+.kui-dialog-surface[data-presentation="modal"][data-viewport-gutter] {
+  width: min(
     var(
       --_kui-dialog-surface-preferred-width,
       var(--_kui-dialog-surface-width)
@@ -51,11 +86,6 @@
       )
     )
   );
-}
-/* Web Awesome has a separate max-width clamp; setting --width alone cannot
-   provide an 8px phone gutter. Omitted props retain its legacy geometry. */
-.kui-dialog-surface[data-presentation="modal"][data-viewport-gutter]
-  > wa-dialog::part(dialog) {
   max-width: max(
     0px,
     calc(
@@ -64,8 +94,7 @@
     )
   );
 }
-.kui-dialog-surface[data-presentation="modal"][data-max-height]
-  > wa-dialog::part(dialog) {
+.kui-dialog-surface[data-presentation="modal"][data-max-height] {
   max-height: max(
     0px,
     min(
@@ -77,8 +106,7 @@
     )
   );
 }
-.kui-dialog-surface[data-presentation="modal"][data-height]
-  > wa-dialog::part(dialog) {
+.kui-dialog-surface[data-presentation="modal"][data-height] {
   --_kui-dialog-surface-resolved-height: max(
     0px,
     min(
@@ -92,39 +120,125 @@
   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"] > wa-dialog::part(body) {
+.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"] > wa-dialog::part(body),
-.kui-dialog-surface[data-footer-inset="none"] > wa-dialog::part(footer) {
+.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"] > wa-dialog::part(body),
-.kui-dialog-surface[data-footer-inset="compact"] > wa-dialog::part(footer) {
+.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"] > wa-dialog::part(body),
-.kui-dialog-surface[data-footer-inset="comfortable"] > wa-dialog::part(footer) {
+.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 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) {
+   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"] > wa-dialog > :not([slot]) {
+.kui-dialog-surface[data-body-layout="fill-last"]
+  > .kui-dialog-surface__body
+  > * {
   flex: none;
 }
 .kui-dialog-surface[data-body-layout="fill-last"]
-  > wa-dialog
-  > :nth-last-child(1 of :not([slot])) {
+  > .kui-dialog-surface__body
+  > :last-child {
   flex: 1 1 0;
   min-block-size: 0;
 }
@@ -134,7 +248,7 @@
    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[data-footer-presentation="floating"] {
   --_kui-dialog-surface-footer-resolved-offset: max(
     0px,
     var(
@@ -144,15 +258,15 @@
   );
 }
 .kui-dialog-surface[data-footer-presentation="floating"]
-  > wa-dialog::part(footer) {
+  > .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);
-  z-index: 1;
   background: transparent;
 }
 .kui-dialog-surface[data-footer-presentation="floating"]
-  > wa-dialog::part(body) {
+  > .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)
@@ -160,45 +274,39 @@
   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) {
+  > .kui-dialog-surface__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) {
+  > .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"]
-  > wa-dialog::part(body) {
+  > .kui-dialog-surface__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
+/* 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 > 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(
+  > .kui-dialog-surface__body:has(
+    > :last-child: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;
 }
@@ -211,8 +319,13 @@
    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"]
-  > wa-dialog::part(header) {
+  > .kui-dialog-surface__header {
   position: relative;
   z-index: 1;
   margin-block-end: calc(
@@ -221,21 +334,14 @@
   -webkit-backdrop-filter: var(--kui-chrome-material-filter);
   backdrop-filter: var(--kui-chrome-material-filter);
   background: 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);
 }
-/* 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__body {
   --_kui-dialog-surface-header-clearance: var(
     --_kui-dialog-surface-header-block-size,
     0px
@@ -243,18 +349,18 @@
   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) {
+  > .kui-dialog-surface__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) {
+  > .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"]
-  > wa-dialog::part(body) {
+  > .kui-dialog-surface__body {
   padding-block-start: calc(
     var(--kui-wa-container-inset, 1rem) +
       var(--_kui-dialog-surface-header-clearance)
@@ -270,12 +376,12 @@
     [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(
+  > .kui-dialog-surface__body:has(
+    > :only-child:is(
         [data-scroll-clearance="block-start"],
         [data-scroll-clearance="both"]
       )
-  )::part(body) {
+  ) {
   --kui-scroll-clearance-block-start: var(
     --_kui-dialog-surface-header-clearance
   );
@@ -283,14 +389,14 @@
 }
 @media (forced-colors: active) {
   .kui-dialog-surface[data-header-presentation="floating"]
-    > wa-dialog::part(header) {
+    > .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"] > wa-dialog::part(dialog) {
+.kui-dialog-surface[data-presentation="side-sheet"] {
   width: min(30rem, 100vw);
   max-width: 100vw;
   height: 100dvh;
@@ -299,10 +405,7 @@
   border-radius: var(--_kui-dialog-surface-radius) 0 0
     var(--_kui-dialog-surface-radius);
 }
-.kui-dialog-surface[data-presentation="fullscreen"] > wa-dialog {
-  --width: 100vw;
-}
-.kui-dialog-surface[data-presentation="fullscreen"] > wa-dialog::part(dialog) {
+.kui-dialog-surface[data-presentation="fullscreen"] {
   width: 100vw;
   max-width: 100vw;
   height: 100dvh;
@@ -317,8 +420,7 @@
    `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[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),
@@ -338,7 +440,6 @@
       )
     )
   );
-  box-sizing: border-box;
   width: min(
     var(
       --_kui-dialog-surface-preferred-width,
@@ -362,8 +463,7 @@
   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) {
+.kui-dialog-surface[data-presentation="bottom-sheet"][data-height] {
   height: calc(
     var(
         --_kui-dialog-surface-sheet-height,
@@ -372,11 +472,10 @@
       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) {
+/* 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) +
@@ -386,47 +485,73 @@
   );
   padding-block-start: 0.75rem;
 }
-.kui-dialog-surface[data-presentation="bottom-sheet"][data-resizable]
-  > wa-dialog::part(sheet-handle) {
+.kui-dialog-surface__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;
+  inset-block-start: 0;
+  inset-inline: 0;
   touch-action: none;
 }
-.kui-dialog-surface[data-presentation="bottom-sheet"][data-resizable]
-  > wa-dialog::part(sheet-handle)::before {
+.kui-dialog-surface__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: "";
+  inset-block-start: 0.375rem;
+  inset-inline: 0;
 }
-.kui-dialog-surface[data-presentation="bottom-sheet"][data-resizable]
-  > wa-dialog::part(sheet-handle):focus-visible {
+.kui-dialog-surface__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 {
+  .kui-dialog-surface__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. */
+
+/* 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%;
@@ -436,19 +561,41 @@
   }
 }
 @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"]
-    )
-    > wa-dialog[data-kui-sheet-motion="enter"]::part(dialog),
+    )[data-kui-dialog-motion="enter"],
   :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;
+    )[data-kui-dialog-motion="exit"] {
     /* A full-height travel needs longer than the dialog's 150ms scale. */
-    animation-duration: var(--wa-transition-slow, 300ms);
+    animation-name: kui-dialog-surface-sheet-slide;
+    animation-duration: 300ms;
     animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
   }
 }