@material/web 1.0.0-pre.14 → 1.0.0-pre.15

package/dialog/internal/_dialog.scss

@@ -3,374 +3,258 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// PUBLIC PROPERTIES
-
 // go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../elevation/elevation';
-@use '../../internal/sass/theme';
-@use './tokens';
+@use '../../tokens';
 // go/keep-sorted end
 
+@mixin theme($tokens) {
+  $supported-tokens: list.join(
+    tokens.$md-comp-dialog-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
+  );
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-dialog-#{$token}: #{$value};
+    }
+  }
+}
+
 @mixin styles() {
   $tokens: tokens.md-comp-dialog-values();
-  $tokens: theme.create-theme-vars($tokens, 'dialog');
+  $md-sys-color: tokens.md-sys-color-values-light();
+  $md-sys-motion: tokens.md-sys-motion-values();
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-dialog-#{$token}, #{$value});
     }
 
-    // Private properties for drag data.
-    --_container-drag-inline-start: initial;
-    --_container-drag-block-start: initial;
-  }
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-dialog-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-dialog-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-dialog-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-dialog-container-shape-end-start,
+      var(--_container-shape)
+    );
 
-  @media (prefers-reduced-motion: reduce) {
-    :host {
-      --_opening-transition-duration: 0;
-      --_closing-transition-duration: 0;
-    }
+    border-start-start-radius: var(--_container-shape-start-start);
+    border-start-end-radius: var(--_container-shape-start-end);
+    border-end-end-radius: var(--_container-shape-end-end);
+    border-end-start-radius: var(--_container-shape-end-start);
+    display: contents;
+    margin: auto;
+    max-height: min(560px, calc(100% - 48px));
+    max-width: min(560px, calc(100% - 48px));
+    min-height: 140px;
+    min-width: 280px;
+    position: fixed;
+    height: fit-content;
+    width: fit-content;
   }
 
-  .dialog {
-    position: fixed;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    inset: 0;
-    block-size: 100dvh;
-    inline-size: 100dvw;
-    max-block-size: 100dvh;
-    max-inline-size: 100dvw;
-    border: none;
+  dialog {
     background: transparent;
+    border: none;
+    border-radius: inherit;
+    flex-direction: column;
+    height: inherit;
+    margin: inherit;
+    max-height: inherit;
+    max-width: inherit;
+    min-height: inherit;
+    min-width: inherit;
+    outline: none;
+    overflow: visible;
     padding: 0;
-    margin: 0;
-    overflow: clip;
-  }
-
-  // stylelint-disable-next-line selector-pseudo-class-no-unknown --
-  // New platform pseudo-class
-  .dialog:not(:modal) {
-    z-index: 10000;
-    pointer-events: none;
+    width: inherit;
   }
 
-  .dialog[open] {
+  dialog[open] {
     display: flex;
   }
 
-  .dialog::backdrop {
-    // Per spec, custom properties don't inherit to backdrop so we avoid using it.
+  ::backdrop {
+    // Can't use ::backdrop since Firefox does not allow animations on it.
     background: none;
   }
 
-  // Note, using ::before as scrim because ::backdrop cannot inherit custom properties.
-  .dialog::before {
-    content: '';
-    position: absolute;
-    z-index: -1;
+  .scrim {
+    background: map.get($md-sys-color, 'scrim');
+    display: none;
     inset: 0;
-    block-size: 100dvh;
-    inline-size: 100dvw;
+    opacity: 32%;
     pointer-events: none;
+    position: fixed;
+    z-index: 1;
   }
 
-  // Hide scrim when modeless.
-  :host([modeless]) .dialog:before {
-    display: none;
-  }
-
-  .container {
-    position: absolute;
-
-    inset-inline-start: var(
-      --_container-drag-inline-start,
-      var(--_container-inset-inline-start)
-    );
-    inset-inline-end: var(--_container-inset-inline-end);
-    inset-block-start: var(
-      --_container-drag-block-start,
-      var(--_container-inset-block-start)
-    );
-    inset-block-end: var(--_container-inset-block-end);
-
-    background-color: var(--_container-color);
-    border-radius: var(--_container-shape);
+  :host([open]) .scrim {
     display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    pointer-events: auto;
-    min-block-size: var(--_container-min-block-size);
-    max-block-size: var(--_container-max-block-size);
-    min-inline-size: var(--_container-min-inline-size);
-    max-inline-size: var(--_container-max-inline-size);
-    padding-block-start: var(--_container-block-padding);
-    padding-block-end: var(--_container-block-padding);
-  }
-
-  md-elevation {
-    @include elevation.theme(
-      (
-        'level': var(--_container-elevation),
-      )
-    );
   }
 
-  .container > * {
-    box-sizing: border-box;
-    // Apply pad left/right here so scrollbar is not indented.
-    padding-inline-start: var(--_container-inline-padding);
-    padding-inline-end: var(--_container-inline-padding);
+  h2 {
+    all: unset;
+    align-self: stretch;
   }
 
-  .header {
-    display: flex;
-    flex-direction: column;
+  .headline {
     align-items: center;
-    gap: var(--_header-spacing);
-    -webkit-font-smoothing: antialiased;
     color: var(--_headline-color);
-    font: var(--_headline-type);
-  }
-
-  .content {
-    flex: 1;
-    overflow: auto;
-    margin-block-start: var(--_content-block-start-spacing);
-    margin-block-end: var(--_content-block-end-spacing);
-    -webkit-font-smoothing: antialiased;
-    color: var(--_supporting-text-color);
-    font: var(--_supporting-text-type);
-  }
-
-  .footer {
     display: flex;
+    flex-direction: column;
+    font: var(--_headline-type);
     position: relative;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-end;
-    box-sizing: border-box;
-    gap: var(--_action-spacing);
   }
 
-  .footerHidden {
-    --_content-block-end-spacing: 0px;
-  }
-
-  .footerHidden .footer {
-    display: none;
+  slot[name='headline']::slotted(*) {
+    align-items: center;
+    align-self: stretch;
+    display: flex;
+    gap: 8px;
+    margin: 24px 24px 0;
   }
 
-  .stacked .footer {
-    flex-direction: column;
-    align-items: flex-end;
+  .icon {
+    display: flex;
   }
 
-  .scrollable .content {
-    border-block-start: var(--_with-divider-divider-height) solid transparent;
-    border-block-end: var(--_with-divider-divider-height) solid transparent;
+  slot[name='icon']::slotted(*) {
+    color: var(--_icon-color);
+    fill: currentColor;
+    font-size: var(--_icon-size);
+    margin-top: 24px;
+    height: var(--_icon-size);
+    width: var(--_icon-size);
   }
 
-  .scroll-divider-header .content {
-    border-block-start-color: var(--_with-divider-divider-color);
+  .has-icon slot[name='headline']::slotted(*) {
+    justify-content: center;
+    margin-top: 16px;
   }
 
-  .scroll-divider-footer:not(.footerHidden) .content {
-    border-block-end-color: var(--_with-divider-divider-color);
+  .scrollable slot[name='headline']::slotted(*) {
+    margin-bottom: 16px;
   }
 
-  .dragging {
-    user-select: none;
-    cursor: move;
-    touch-action: none;
+  .scrollable.has-headline slot[name='content']::slotted(*) {
+    margin-top: 8px;
   }
 
-  // Transitions for open/closed states
   .container {
-    will-change: transform, opacity;
-    transition-property: transform;
+    border-radius: inherit;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
     overflow: hidden;
+    position: relative;
+    transform-origin: top;
   }
 
-  .container > * {
-    transition-timing-function: inherit;
-    transition-duration: inherit;
-    transition-property: opacity, transform;
-    will-change: transform, opacity;
-    opacity: 0;
-  }
-
-  :host([transition][showing-open]) .container > * {
-    opacity: 1;
-    transform: none;
-  }
-
-  :host([transition][showing-open]) .container {
-    opacity: 1;
-    transform: none;
-  }
-
-  .dialog::before {
-    transition: background-color linear;
-    background-color: transparent;
-  }
-
-  :host([showing-open]) .dialog::before {
-    background-color: var(--_scrim-color);
-  }
-
-  :host([opening]) .dialog::before {
-    transition-duration: calc(var(--_opening-transition-duration) / 2);
-  }
-
-  :host([closing]) .dialog::before {
-    transition-duration: calc(var(--_closing-transition-duration) / 2);
-  }
-
-  :host([opening]) .container {
-    transition-duration: var(--_opening-transition-duration);
-    transition-timing-function: var(--_opening-transition-easing);
-  }
-
-  :host([closing]) .container {
-    transition-duration: var(--_closing-transition-duration);
-    transition-timing-function: var(--_closing-transition-easing);
-  }
-
-  :host([trasition][closing]) .container > * {
-    transform: none;
-    opacity: 0;
-  }
-
-  :host([transition='grow-down']) {
-    --_opening-transform: scale(1, 0.1) translateY(-20%);
-    --_closing-transform: scale(1, 0.9) translateY(-10%);
-    --_origin: top;
-    --_opening-content-transform: scale(1, 2);
-    --_origin-footer: bottom;
-  }
-
-  :host([transition='grow-up']) {
-    --_opening-transform: scale(1, 0.1) translateY(20%);
-    --_closing-transform: scale(1, 0.9) translateY(10%);
-    --_origin: bottom;
-    --_opening-content-transform: scale(1, 2);
-    --_origin-footer: bottom;
-  }
-
-  :host([transition='grow-left']) {
-    --_opening-transform: scale(0.1, 1) translateX(20%);
-    --_closing-transform: scale(0.9, 1) translateX(10%);
-    --_origin: right;
-    --_opening-content-transform: none;
-    --_origin-footer: none;
+  .container::before {
+    background: var(--_container-color);
+    content: '';
+    inset: 0;
+    position: absolute;
   }
 
-  :host([transition='grow-right']) {
-    --_opening-transform: scale(0.1, 1) translateX(-20%);
-    --_closing-transform: scale(0.9, 1) translateX(-10%);
-    --_origin: left;
-    --_opening-content-transform: none;
-    --_origin-footer: none;
+  .scroller {
+    flex: 1;
+    overflow: hidden;
+    z-index: 0; // needed to display scrollbars on Chrome linux
   }
 
-  :host([transition^='grow-']) .container {
-    transform-origin: var(--_origin);
-    transform: var(--_opening-transform);
+  .scrollable .scroller {
+    // Only add scrollbars if the content is overflowing. This prevents extra
+    // space from appearing on platforms that reserve scrollbar space.
+    // Note: we only scroll vertically. Horizontal scrolling should be handled
+    // by the content.
+    overflow-y: scroll;
   }
 
-  :host([transition^='grow-']) .container > * {
-    transform-origin: var(--_origin);
-    transform: var(--_opening-content-transform);
+  .content {
+    color: var(--_supporting-text-color);
+    font: var(--_supporting-text-type);
+    position: relative;
   }
 
-  :host([transition^='grow-']) .footer {
-    transform-origin: var(--_origin-footer);
+  slot[name='content']::slotted(*) {
+    margin: 24px;
   }
 
-  :host([transition^='grow-'][closing]) {
-    transform: var(--_closing-transform);
+  // Anchors are used with an IntersectionObserver to determine when the content
+  // has scrolled.
+  .anchor {
+    position: absolute;
   }
 
-  :host([transition='shrink']) .container {
-    transform: scale(1.2);
+  .top.anchor {
+    top: 0;
   }
 
-  :host([transition='grow']) .container {
-    transform: scale(0.8);
+  .bottom.anchor {
+    bottom: 0;
   }
 
-  :host([transition='shrink'][closing]) .container,
-  :host([transition='grow'][closing]) .container {
-    transition-duration: 0;
-    transform: none;
+  .actions {
+    position: relative;
   }
 
-  // fullscreen
-  :host([showing-fullscreen]) {
-    --_container-max-block-size: none;
-    --_container-max-inline-size: none;
+  slot[name='actions']::slotted(*) {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    margin: 16px 24px 24px;
   }
 
-  :host([showing-fullscreen]) .container {
-    block-size: 100dvh;
-    inline-size: 100dvw;
-    border-radius: 0px;
-    padding-block-start: 0;
-    padding-block-end: 0;
+  .has-actions slot[name='content']::slotted(*) {
+    margin-bottom: 8px;
   }
 
-  :host([showing-fullscreen]) .header {
-    justify-content: space-between;
-    flex-direction: row;
-    max-block-size: var(--_fullscreen-header-block-size);
-    padding-block-start: var(--_fullscreen-container-block-padding);
-    // TODO: should there be explicit tokens for these?
-    padding-inline: 4px;
-    --_header-spacing: 4px;
+  md-divider {
+    display: none;
+    position: absolute;
   }
 
-  :host([showing-fullscreen]) .content {
-    margin-block-start: 0;
-    margin-block-end: 0;
+  .has-headline.show-top-divider .headline md-divider,
+  .has-actions.show-bottom-divider .actions md-divider {
+    display: flex;
   }
 
-  :host([showing-fullscreen]) .footer {
-    max-block-size: var(--_fullscreen-footer-block-size);
-    padding-block-end: var(--_fullscreen-container-block-padding);
+  .headline md-divider {
+    bottom: 0;
   }
 
-  // Hide bottom divider on fullscreen since it's common not to have footer actions.
-  :host([showing-fullscreen]) .scroll-divider-footer .content {
-    border-block-end-color: transparent;
+  .actions md-divider {
+    top: 0;
   }
 
-  // High contrast mode
-  @media screen and (forced-colors: active), (-ms-high-contrast: active) {
-    .container {
-      outline: windowtext solid 2px;
+  @media (forced-colors: active) {
+    dialog {
+      outline: 2px solid WindowText;
     }
   }
-
-  // Slot styling
-  [name='headline-prefix']::slotted(*),
-  [name='headline-suffix']::slotted(*) {
-    color: var(--_icon-color);
-    font-size: var(--_icon-size);
-  }
-
-  [name='header']::slotted(*) {
-    flex: 1;
-    align-self: stretch;
-    display: flex;
-    align-items: center;
-  }
-
-  :host([showing-fullscreen]) [name='headline']::slotted(*) {
-    flex: 1;
-  }
 }

package/dialog/internal/animations.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A dialog animation's arguments. See `Element.prototype.animate`.
+ */
+export type DialogAnimationArgs = Parameters<Element['animate']>;
+/**
+ * A collection of dialog animations. Each element of a dialog may have multiple
+ * animations.
+ */
+export interface DialogAnimation {
+    /**
+     * Animations for the dialog itself.
+     */
+    dialog?: DialogAnimationArgs[];
+    /**
+     * Animations for the scrim backdrop.
+     */
+    scrim?: DialogAnimationArgs[];
+    /**
+     * Animations for the container of the dialog.
+     */
+    container?: DialogAnimationArgs[];
+    /**
+     * Animations for the headline section.
+     */
+    headline?: DialogAnimationArgs[];
+    /**
+     * Animations for the contents section.
+     */
+    content?: DialogAnimationArgs[];
+    /**
+     * Animations for the actions section.
+     */
+    actions?: DialogAnimationArgs[];
+}
+/**
+ * The default dialog open animation.
+ */
+export declare const DIALOG_DEFAULT_OPEN_ANIMATION: DialogAnimation;
+/**
+ * The default dialog close animation.
+ */
+export declare const DIALOG_DEFAULT_CLOSE_ANIMATION: DialogAnimation;