feat(dialog): add dialog container slot

PiperOrigin-RevId: 721930993

Author: material-web-copybara

dialog/internal/_dialog.scss

@@ -157,6 +157,16 @@
     position: absolute;
   }
 
+  .container-slot {
+    border-radius: inherit;
+    inset: 0;
+    position: absolute;
+  }
+
+  slot[name='container'] {
+    border-radius: inherit;
+  }
+
   .scroller {
     display: flex;
     flex: 1;

dialog/internal/animations.ts

@@ -26,6 +26,11 @@ export interface DialogAnimation {
    */
   scrim?: DialogAnimationArgs[];
 
+  /**
+   * Animations for the container slot.
+   */
+  containerSlot?: DialogAnimationArgs[];
+
   /**
    * Animations for the container of the dialog.
    */
@@ -64,6 +69,22 @@ export const DIALOG_DEFAULT_OPEN_ANIMATION: DialogAnimation = {
       {duration: 500, easing: 'linear'},
     ],
   ],
+  containerSlot: [
+    [
+      // Container slot fade in
+      [{'opacity': 0}, {'opacity': 1}],
+      {duration: 50, easing: 'linear'},
+    ],
+    [
+      // Container slot grow
+      // Note: current spec says to grow from 0dp->100% and shrink from
+      // 100%->35%. We change this to 35%->100% to simplify the animation that
+      // is supposed to clip content as it grows. From 0dp it's possible to see
+      // text/actions appear before the container has fully grown.
+      [{'height': '35%'}, {'height': '100%'}],
+      {duration: 500, easing: EASING.EMPHASIZED},
+    ],
+  ],
   container: [
     [
       // Container fade in
@@ -121,6 +142,21 @@ export const DIALOG_DEFAULT_CLOSE_ANIMATION: DialogAnimation = {
       {duration: 150, easing: 'linear'},
     ],
   ],
+  containerSlot: [
+    [
+      // Container slot shrink
+      [{'height': '100%'}, {'height': '35%'}],
+      {
+        duration: 150,
+        easing: EASING.EMPHASIZED_ACCELERATE,
+      },
+    ],
+    [
+      // Container slot fade out
+      [{'opacity': '1'}, {'opacity': '0'}],
+      {delay: 100, duration: 50, easing: 'linear'},
+    ],
+  ],
   container: [
     [
       // Container shrink

dialog/internal/dialog.ts

@@ -115,6 +115,8 @@ export class Dialog extends dialogBaseClass {
   private isConnectedPromise = this.getIsConnectedPromise();
   @query('dialog') private readonly dialog!: HTMLDialogElement | null;
   @query('.scrim') private readonly scrim!: HTMLDialogElement | null;
+  @query('.container-slot')
+  private readonly containerSlot!: HTMLDialogElement | null;
   @query('.container') private readonly container!: HTMLDialogElement | null;
   @query('.headline') private readonly headline!: HTMLDialogElement | null;
   @query('.content') private readonly content!: HTMLDialogElement | null;
@@ -301,6 +303,9 @@ export class Dialog extends dialogBaseClass {
         @keydown=${this.handleKeydown}
         .returnValue=${this.returnValue || nothing}>
         ${showFocusTrap ? focusTrap : nothing}
+        <div class="container-slot">
+          <slot name="container"></slot>
+        </div>
         <div class="container" @click=${this.handleContentClick}>
           <div class="headline">
             <div class="icon" aria-hidden="true">
@@ -433,13 +438,30 @@ export class Dialog extends dialogBaseClass {
       return;
     }
 
-    const {dialog, scrim, container, headline, content, actions} = this;
-    if (!dialog || !scrim || !container || !headline || !content || !actions) {
+    const {
+      dialog,
+      scrim,
+      containerSlot,
+      container,
+      headline,
+      content,
+      actions,
+    } = this;
+    if (
+      !dialog ||
+      !scrim ||
+      !containerSlot ||
+      !container ||
+      !headline ||
+      !content ||
+      !actions
+    ) {
       return;
     }
 
     const {
       container: containerAnimate,
+      containerSlot: containerSlotAnimate,
       dialog: dialogAnimate,
       scrim: scrimAnimate,
       headline: headlineAnimate,
@@ -450,6 +472,7 @@ export class Dialog extends dialogBaseClass {
     const elementAndAnimation: Array<[Element, DialogAnimationArgs[]]> = [
       [dialog, dialogAnimate ?? []],
       [scrim, scrimAnimate ?? []],
+      [containerSlot, containerSlotAnimate ?? []],
       [container, containerAnimate ?? []],
       [headline, headlineAnimate ?? []],
       [content, contentAnimate ?? []],