@material/web 1.0.0-pre.0 → 1.0.0-pre.2

package/dialog/harness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAK9C;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAe;IACvC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CACjC,CAAC;IACxB,CAAC;IAED,KAAK,CAAC,SAAS;QACb,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5E,CAAC;IAED,KAAK,CAAC,SAAS;QACb,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7E,CAAC;IAED,KAAK,CAAC,kBAAkB;QACtB,IAAI,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;QACvB,MAAM,iBAAiB,GAAG,IAAI,OAAO,CAAO,QAAQ,CAAC,EAAE;YACrD,OAAO,GAAG,GAAG,EAAE;gBACb,QAAQ,EAAE,CAAC;YACb,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,IAAI,MAAM,IAAI,CAAC,SAAS,EAAE,EAAE;YAC1B,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;SAChE;aAAM,IAAI,MAAM,IAAI,CAAC,SAAS,EAAE,EAAE;YACjC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;SAChE;aAAM;YACL,OAAO,EAAE,CAAC;SACX;QACD,MAAM,iBAAiB,CAAC;IAC1B,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAChC,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACzD,MAAM,EAAC,OAAO,EAAC,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;QAClD,OAAO,OAAO,KAAK,MAAM,CAAC;IAC5B,CAAC;IAED,KAAK,CAAC,cAAc;QAClB,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAChC,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACzD,MAAM,EAAC,eAAe,EAAE,OAAO,EAAC,GAC5B,gBAAgB,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;QAChD,MAAM,QAAQ,GAAG,kBAAkB,CAAC;QACpC,OAAO,eAAe,KAAK,QAAQ,IAAI,OAAO,KAAK,MAAM,CAAC;IAC5D,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Dialog} from './lib/dialog.js';\n\n\n/**\n * Test harness for dialog.\n */\nexport class DialogHarness extends Harness<Dialog> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.dialog') as\n        HTMLDialogElement;\n  }\n\n  async isOpening() {\n    await this.element.updateComplete;\n    return Boolean(this.element.open && this.element.hasAttribute('opening'));\n  }\n\n  async isClosing() {\n    await this.element.updateComplete;\n    return Boolean(!this.element.open && this.element.hasAttribute('closing'));\n  }\n\n  async transitionComplete() {\n    let resolve = () => {};\n    const doneTransitioning = new Promise<void>(resolver => {\n      resolve = () => {\n        resolver();\n      };\n    });\n    if (await this.isOpening()) {\n      this.element.addEventListener('opened', resolve, {once: true});\n    } else if (await this.isClosing()) {\n      this.element.addEventListener('closed', resolve, {once: true});\n    } else {\n      resolve();\n    }\n    await doneTransitioning;\n  }\n\n  async isDialogVisible() {\n    await this.transitionComplete();\n    const dialogElement = await this.getInteractiveElement();\n    const {display} = getComputedStyle(dialogElement);\n    return display !== 'none';\n  }\n\n  async isScrimVisible() {\n    await this.transitionComplete();\n    const dialogElement = await this.getInteractiveElement();\n    const {backgroundColor, display} =\n        getComputedStyle(dialogElement, '::before');\n    const hiddenBg = `rgba(0, 0, 0, 0)`;\n    return backgroundColor !== hiddenBg && display !== 'none';\n  }\n}\n"]}

package/dialog/lib/_dialog.scss

@@ -0,0 +1,386 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// PUBLIC PROPERTIES
+
+@use 'sass:map';
+@use './tokens';
+@use '../../sass/color';
+@use '../../sass/resolvers';
+@use '../../sass/shape';
+@use '../../sass/theme';
+@use '../../sass/var';
+
+@mixin styles() {
+  $tokens: tokens.md-comp-dialog-values();
+  $tokens: theme.create-theme-vars($tokens, 'dialog');
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    // Private properties for drag data.
+    --_container-drag-inline-start: initial;
+    --_container-drag-block-start: initial;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      --_opening-transition-duration: 0;
+      --_closing-transition-duration: 0;
+    }
+  }
+
+  .dialog {
+    position: fixed;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    inset: 0;
+    block-size: 100vh;
+    inline-size: 100vw;
+    max-block-size: 100vh;
+    max-inline-size: 100vw;
+    border: none;
+    background: transparent;
+    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;
+  }
+
+  .dialog[open] {
+    display: flex;
+  }
+
+  .dialog::backdrop {
+    // Per spec, custom properties don't inherit to backdrop so we avoid using it.
+    background: none;
+  }
+
+  // Note, using ::before as scrim because ::backdrop cannot inherit custom properties.
+  .dialog::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    block-size: 100vh;
+    inline-size: 100vw;
+    pointer-events: none;
+  }
+
+  // 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);
+    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 {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    --md-elevation-level: var(--_container-elevation);
+    --md-elevation-surface-tine-color: var(
+      --_container-surface-tint-layer-color
+    );
+  }
+
+  .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);
+  }
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--_header-spacing);
+    -webkit-font-smoothing: antialiased;
+    color: var(--_headline-color);
+    font-family: var(--_headline-font);
+    line-height: var(--_headline-line-height);
+    font-size: var(--_headline-size);
+    letter-spacing: var(--_headline-tracking);
+    font-weight: var(--_headline-weight);
+  }
+
+  .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-family: var(--_supporting-text-font);
+    line-height: var(--_supporting-text-line-height);
+    font-size: var(--_supporting-text-size);
+    letter-spacing: var(--_supporting-text-tracking);
+    font-weight: var(--_supporting-text-weight);
+  }
+
+  .footer {
+    display: flex;
+    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;
+  }
+
+  .stacked .footer {
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  .scrollable .content {
+    border-block-start: var(--_with-divider-divider-height) solid transparent;
+    border-block-end: var(--_with-divider-divider-height) solid transparent;
+  }
+
+  .scroll-divider-header .content {
+    border-block-start-color: var(--_with-divider-divider-color);
+  }
+
+  .scroll-divider-footer:not(.footerHidden) .content {
+    border-block-end-color: var(--_with-divider-divider-color);
+  }
+
+  .dragging {
+    user-select: none;
+    cursor: move;
+    touch-action: none;
+  }
+
+  // Transitions for open/closed states
+  .container {
+    will-change: transform, opacity;
+    transition-property: transform;
+    overflow: hidden;
+  }
+
+  .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;
+  }
+
+  :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;
+  }
+
+  :host([transition^='grow-']) .container {
+    transform-origin: var(--_origin);
+    transform: var(--_opening-transform);
+  }
+
+  :host([transition^='grow-']) .container > * {
+    transform-origin: var(--_origin);
+    transform: var(--_opening-content-transform);
+  }
+
+  :host([transition^='grow-']) .footer {
+    transform-origin: var(--_origin-footer);
+  }
+
+  :host([transition^='grow-'][closing]) {
+    transform: var(--_closing-transform);
+  }
+
+  :host([transition='shrink']) .container {
+    transform: scale(1.2);
+  }
+
+  :host([transition='grow']) .container {
+    transform: scale(0.8);
+  }
+
+  :host([transition='shrink'][closing]) .container,
+  :host([transition='grow'][closing]) .container {
+    transition-duration: 0;
+    transform: none;
+  }
+
+  // fullscreen
+  :host([showing-fullscreen]) {
+    --_container-max-block-size: none;
+    --_container-max-inline-size: none;
+  }
+
+  :host([showing-fullscreen]) .container {
+    block-size: 100vh;
+    inline-size: 100vw;
+    border-radius: 0px;
+    padding-block-start: 0;
+    padding-block-end: 0;
+  }
+
+  :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;
+  }
+
+  :host([showing-fullscreen]) .content {
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
+
+  :host([showing-fullscreen]) .footer {
+    max-block-size: var(--_fullscreen-footer-block-size);
+    padding-block-end: var(--_fullscreen-container-block-padding);
+  }
+
+  // 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;
+  }
+
+  // High contrast mode
+  @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+    .container {
+      outline: windowtext solid 2px;
+    }
+  }
+
+  // Slot styling
+  [name='headline-prefix']::slotted(*),
+  [name='headline-suffix']::slotted(*) {
+    color: var(--_with-icon-icon-color);
+    font-size: var(--_with-icon-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/lib/_tokens.scss

@@ -0,0 +1,86 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:map';
+@use 'sass:string';
+@use '../../sass/color';
+@use '../../sass/shape';
+@use '../../sass/theme';
+@use '../../sass/var';
+@use '../../tokens';
+@use '../../sass/string-ext';
+
+$_md-sys-motion: tokens.md-sys-motion-values();
+$_md-sys-color: tokens.md-sys-color-values-light();
+
+$_tokens: (
+  // Container size
+  container-max-inline-size: min(560px, calc(100% - 48px)),
+  container-min-inline-size: 280px,
+  container-max-block-size: min(560px, calc(100% - 48px)),
+  container-min-block-size: 140px,
+  // Container position
+  container-inset-inline-start: auto,
+  container-inset-inline-end: auto,
+  container-inset-block-start: auto,
+  container-inset-block-end: auto,
+
+  // Transition
+  // Basing on https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration#27a05b8b-02b1-4695-a7e4-70797f205222
+  opening-transition-duration: map.get($_md-sys-motion, 'duration-medium4'),
+  opening-transition-easing:
+    map.get($_md-sys-motion, 'easing-emphasized-decelerate'),
+  closing-transition-duration: map.get($_md-sys-motion, 'duration-short4'),
+  closing-transition-easing:
+    map.get($_md-sys-motion, 'easing-emphasized-accelerate'),
+  // Scrim
+  scrim-color: rgba(0, 0, 0, 0.32),
+  // Content
+  container-block-padding: 24px,
+  container-inline-padding: 24px,
+  header-spacing: 16px,
+  action-spacing: 8px,
+  content-block-start-spacing: 16px,
+  content-block-end-spacing: 24px,
+  // Divider
+  with-divider-divider-height: 1px,
+  with-divider-divider-color: map.get($_md-sys-color, 'outline')
+);
+
+$_fullscreen-tokens: (
+  fullscreen-header-block-size: 56px,
+  fullscreen-footer-block-size: 56px,
+  // Note, the 8px here is not per spec, but needed to make the explicit 56px not be cramped.
+  fullscreen-container-block-padding: 8px,
+);
+
+@function _map-without-keys-with-prefix($map, $prefix) {
+  $filtered: ();
+  @each $prop, $value in $map {
+    @if not string-ext.has-prefix($prop, $prefix) {
+      $filtered: map.set($filtered, $prop, $value);
+    }
+  }
+  @return $filtered;
+}
+
+@function remove-unsupported-tokens($tokens) {
+  $remove-prefix: 'action-';
+  $tokens: _map-without-keys-with-prefix($tokens, $remove-prefix);
+
+  // b/203778922: `*-type` used by other platforms but not web.
+  $unsupported-tokens: ('headline-type', 'supporting-text-type');
+  @return map.remove($tokens, $unsupported-tokens...);
+}
+
+/**
+ * Extended token set for dialog. Note, currently ignoring tokens for 
+ * `action-*-label-text` and `action-*-state-layer` since actions are 
+ * spec'd as standard text buttons.
+ */
+@function md-comp-dialog-values() {
+  $tokens: remove-unsupported-tokens(tokens.md-comp-dialog-values());
+  @return map.merge(map.merge($tokens, $_tokens), $_fullscreen-tokens);
+}

package/dialog/lib/dialog-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-dialog-container-elevation, 6);--_container-shape: var(--md-dialog-container-shape, 28px);--_container-surface-tint-layer-color: var(--md-dialog-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1c1b1f));--_headline-font: var(--md-dialog-headline-font, Roboto);--_headline-line-height: var(--md-dialog-headline-line-height, 2rem);--_headline-size: var(--md-dialog-headline-size, 1.5rem);--_headline-tracking: var(--md-dialog-headline-tracking, 0rem);--_headline-weight: var(--md-dialog-headline-weight, 400);--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-dialog-supporting-text-font, Roboto);--_supporting-text-line-height: var(--md-dialog-supporting-text-line-height, 1.25rem);--_supporting-text-size: var(--md-dialog-supporting-text-size, 0.875rem);--_supporting-text-tracking: var(--md-dialog-supporting-text-tracking, 0.016rem);--_supporting-text-weight: var(--md-dialog-supporting-text-weight, 400);--_with-icon-icon-color: var(--md-dialog-with-icon-icon-color, var(--md-sys-color-secondary, #625b71));--_with-icon-icon-size: var(--md-dialog-with-icon-icon-size, 24px);--_container-max-inline-size: var(--md-dialog-container-max-inline-size, min(560px, 100% - 48px));--_container-min-inline-size: var(--md-dialog-container-min-inline-size, 280px);--_container-max-block-size: var(--md-dialog-container-max-block-size, min(560px, 100% - 48px));--_container-min-block-size: var(--md-dialog-container-min-block-size, 140px);--_container-inset-inline-start: var(--md-dialog-container-inset-inline-start, auto);--_container-inset-inline-end: var(--md-dialog-container-inset-inline-end, auto);--_container-inset-block-start: var(--md-dialog-container-inset-block-start, auto);--_container-inset-block-end: var(--md-dialog-container-inset-block-end, auto);--_opening-transition-duration: var(--md-dialog-opening-transition-duration, 400ms);--_opening-transition-easing: var(--md-dialog-opening-transition-easing, cubic-bezier(0.05, 0.7, 0.1, 1));--_closing-transition-duration: var(--md-dialog-closing-transition-duration, 200ms);--_closing-transition-easing: var(--md-dialog-closing-transition-easing, cubic-bezier(0.3, 0, 0.8, 0.15));--_scrim-color: var(--md-dialog-scrim-color, rgba(0, 0, 0, 0.32));--_container-block-padding: var(--md-dialog-container-block-padding, 24px);--_container-inline-padding: var(--md-dialog-container-inline-padding, 24px);--_header-spacing: var(--md-dialog-header-spacing, 16px);--_action-spacing: var(--md-dialog-action-spacing, 8px);--_content-block-start-spacing: var(--md-dialog-content-block-start-spacing, 16px);--_content-block-end-spacing: var(--md-dialog-content-block-end-spacing, 24px);--_with-divider-divider-height: var(--md-dialog-with-divider-divider-height, 1px);--_with-divider-divider-color: var(--md-dialog-with-divider-divider-color, var(--md-sys-color-outline, #79747e));--_fullscreen-header-block-size: var(--md-dialog-fullscreen-header-block-size, 56px);--_fullscreen-footer-block-size: var(--md-dialog-fullscreen-footer-block-size, 56px);--_fullscreen-container-block-padding: var(--md-dialog-fullscreen-container-block-padding, 8px);--_container-drag-inline-start: initial;--_container-drag-block-start: initial}@media(prefers-reduced-motion: reduce){:host{--_opening-transition-duration: 0;--_closing-transition-duration: 0}}.dialog{position:fixed;align-items:center;justify-content:center;box-sizing:border-box;inset:0;block-size:100vh;inline-size:100vw;max-block-size:100vh;max-inline-size:100vw;border:none;background:rgba(0,0,0,0);padding:0;margin:0;overflow:clip}.dialog:not(:modal){z-index:10000;pointer-events:none}.dialog[open]{display:flex}.dialog::backdrop{background:none}.dialog::before{content:"";position:absolute;z-index:-1;inset:0;block-size:100vh;inline-size:100vw;pointer-events:none}: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);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{position:absolute;inset:0;pointer-events:none;border-radius:inherit;--md-elevation-level: var(--_container-elevation);--md-elevation-surface-tine-color: var( --_container-surface-tint-layer-color )}.container>*{box-sizing:border-box;padding-inline-start:var(--_container-inline-padding);padding-inline-end:var(--_container-inline-padding)}.header{display:flex;flex-direction:column;align-items:center;gap:var(--_header-spacing);-webkit-font-smoothing:antialiased;color:var(--_headline-color);font-family:var(--_headline-font);line-height:var(--_headline-line-height);font-size:var(--_headline-size);letter-spacing:var(--_headline-tracking);font-weight:var(--_headline-weight)}.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-family:var(--_supporting-text-font);line-height:var(--_supporting-text-line-height);font-size:var(--_supporting-text-size);letter-spacing:var(--_supporting-text-tracking);font-weight:var(--_supporting-text-weight)}.footer{display:flex;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}.stacked .footer{flex-direction:column;align-items:flex-end}.scrollable .content{border-block-start:var(--_with-divider-divider-height) solid rgba(0,0,0,0);border-block-end:var(--_with-divider-divider-height) solid rgba(0,0,0,0)}.scroll-divider-header .content{border-block-start-color:var(--_with-divider-divider-color)}.scroll-divider-footer:not(.footerHidden) .content{border-block-end-color:var(--_with-divider-divider-color)}.dragging{user-select:none;cursor:move;touch-action:none}.container{will-change:transform,opacity;transition-property:transform;overflow:hidden}.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:rgba(0,0,0,0)}: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}: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}:host([transition^=grow-]) .container{transform-origin:var(--_origin);transform:var(--_opening-transform)}:host([transition^=grow-]) .container>*{transform-origin:var(--_origin);transform:var(--_opening-content-transform)}:host([transition^=grow-]) .footer{transform-origin:var(--_origin-footer)}:host([transition^=grow-][closing]){transform:var(--_closing-transform)}:host([transition=shrink]) .container{transform:scale(1.2)}:host([transition=grow]) .container{transform:scale(0.8)}:host([transition=shrink][closing]) .container,:host([transition=grow][closing]) .container{transition-duration:0;transform:none}:host([showing-fullscreen]){--_container-max-block-size: none;--_container-max-inline-size: none}:host([showing-fullscreen]) .container{block-size:100vh;inline-size:100vw;border-radius:0px;padding-block-start:0;padding-block-end:0}: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);padding-inline:4px;--_header-spacing: 4px}:host([showing-fullscreen]) .content{margin-block-start:0;margin-block-end:0}:host([showing-fullscreen]) .footer{max-block-size:var(--_fullscreen-footer-block-size);padding-block-end:var(--_fullscreen-container-block-padding)}:host([showing-fullscreen]) .scroll-divider-footer .content{border-block-end-color:rgba(0,0,0,0)}@media screen and (forced-colors: active),(-ms-high-contrast: active){.container{outline:windowtext solid 2px}}[name=headline-prefix]::slotted(*),[name=headline-suffix]::slotted(*){color:var(--_with-icon-icon-color);font-size:var(--_with-icon-icon-size)}[name=header]::slotted(*){flex:1;align-self:stretch;display:flex;align-items:center}:host([showing-fullscreen]) [name=headline]::slotted(*){flex:1}/*# sourceMappingURL=dialog-styles.css.map */
+`;
+//# sourceMappingURL=dialog-styles.css.js.map

package/dialog/lib/dialog-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-styles.css.js","sourceRoot":"","sources":["dialog-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-dialog-container-elevation, 6);--_container-shape: var(--md-dialog-container-shape, 28px);--_container-surface-tint-layer-color: var(--md-dialog-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1c1b1f));--_headline-font: var(--md-dialog-headline-font, Roboto);--_headline-line-height: var(--md-dialog-headline-line-height, 2rem);--_headline-size: var(--md-dialog-headline-size, 1.5rem);--_headline-tracking: var(--md-dialog-headline-tracking, 0rem);--_headline-weight: var(--md-dialog-headline-weight, 400);--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-dialog-supporting-text-font, Roboto);--_supporting-text-line-height: var(--md-dialog-supporting-text-line-height, 1.25rem);--_supporting-text-size: var(--md-dialog-supporting-text-size, 0.875rem);--_supporting-text-tracking: var(--md-dialog-supporting-text-tracking, 0.016rem);--_supporting-text-weight: var(--md-dialog-supporting-text-weight, 400);--_with-icon-icon-color: var(--md-dialog-with-icon-icon-color, var(--md-sys-color-secondary, #625b71));--_with-icon-icon-size: var(--md-dialog-with-icon-icon-size, 24px);--_container-max-inline-size: var(--md-dialog-container-max-inline-size, min(560px, 100% - 48px));--_container-min-inline-size: var(--md-dialog-container-min-inline-size, 280px);--_container-max-block-size: var(--md-dialog-container-max-block-size, min(560px, 100% - 48px));--_container-min-block-size: var(--md-dialog-container-min-block-size, 140px);--_container-inset-inline-start: var(--md-dialog-container-inset-inline-start, auto);--_container-inset-inline-end: var(--md-dialog-container-inset-inline-end, auto);--_container-inset-block-start: var(--md-dialog-container-inset-block-start, auto);--_container-inset-block-end: var(--md-dialog-container-inset-block-end, auto);--_opening-transition-duration: var(--md-dialog-opening-transition-duration, 400ms);--_opening-transition-easing: var(--md-dialog-opening-transition-easing, cubic-bezier(0.05, 0.7, 0.1, 1));--_closing-transition-duration: var(--md-dialog-closing-transition-duration, 200ms);--_closing-transition-easing: var(--md-dialog-closing-transition-easing, cubic-bezier(0.3, 0, 0.8, 0.15));--_scrim-color: var(--md-dialog-scrim-color, rgba(0, 0, 0, 0.32));--_container-block-padding: var(--md-dialog-container-block-padding, 24px);--_container-inline-padding: var(--md-dialog-container-inline-padding, 24px);--_header-spacing: var(--md-dialog-header-spacing, 16px);--_action-spacing: var(--md-dialog-action-spacing, 8px);--_content-block-start-spacing: var(--md-dialog-content-block-start-spacing, 16px);--_content-block-end-spacing: var(--md-dialog-content-block-end-spacing, 24px);--_with-divider-divider-height: var(--md-dialog-with-divider-divider-height, 1px);--_with-divider-divider-color: var(--md-dialog-with-divider-divider-color, var(--md-sys-color-outline, #79747e));--_fullscreen-header-block-size: var(--md-dialog-fullscreen-header-block-size, 56px);--_fullscreen-footer-block-size: var(--md-dialog-fullscreen-footer-block-size, 56px);--_fullscreen-container-block-padding: var(--md-dialog-fullscreen-container-block-padding, 8px);--_container-drag-inline-start: initial;--_container-drag-block-start: initial}@media(prefers-reduced-motion: reduce){:host{--_opening-transition-duration: 0;--_closing-transition-duration: 0}}.dialog{position:fixed;align-items:center;justify-content:center;box-sizing:border-box;inset:0;block-size:100vh;inline-size:100vw;max-block-size:100vh;max-inline-size:100vw;border:none;background:rgba(0,0,0,0);padding:0;margin:0;overflow:clip}.dialog:not(:modal){z-index:10000;pointer-events:none}.dialog[open]{display:flex}.dialog::backdrop{background:none}.dialog::before{content:\"\";position:absolute;z-index:-1;inset:0;block-size:100vh;inline-size:100vw;pointer-events:none}: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);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{position:absolute;inset:0;pointer-events:none;border-radius:inherit;--md-elevation-level: var(--_container-elevation);--md-elevation-surface-tine-color: var( --_container-surface-tint-layer-color )}.container>*{box-sizing:border-box;padding-inline-start:var(--_container-inline-padding);padding-inline-end:var(--_container-inline-padding)}.header{display:flex;flex-direction:column;align-items:center;gap:var(--_header-spacing);-webkit-font-smoothing:antialiased;color:var(--_headline-color);font-family:var(--_headline-font);line-height:var(--_headline-line-height);font-size:var(--_headline-size);letter-spacing:var(--_headline-tracking);font-weight:var(--_headline-weight)}.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-family:var(--_supporting-text-font);line-height:var(--_supporting-text-line-height);font-size:var(--_supporting-text-size);letter-spacing:var(--_supporting-text-tracking);font-weight:var(--_supporting-text-weight)}.footer{display:flex;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}.stacked .footer{flex-direction:column;align-items:flex-end}.scrollable .content{border-block-start:var(--_with-divider-divider-height) solid rgba(0,0,0,0);border-block-end:var(--_with-divider-divider-height) solid rgba(0,0,0,0)}.scroll-divider-header .content{border-block-start-color:var(--_with-divider-divider-color)}.scroll-divider-footer:not(.footerHidden) .content{border-block-end-color:var(--_with-divider-divider-color)}.dragging{user-select:none;cursor:move;touch-action:none}.container{will-change:transform,opacity;transition-property:transform;overflow:hidden}.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:rgba(0,0,0,0)}: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}: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}:host([transition^=grow-]) .container{transform-origin:var(--_origin);transform:var(--_opening-transform)}:host([transition^=grow-]) .container>*{transform-origin:var(--_origin);transform:var(--_opening-content-transform)}:host([transition^=grow-]) .footer{transform-origin:var(--_origin-footer)}:host([transition^=grow-][closing]){transform:var(--_closing-transform)}:host([transition=shrink]) .container{transform:scale(1.2)}:host([transition=grow]) .container{transform:scale(0.8)}:host([transition=shrink][closing]) .container,:host([transition=grow][closing]) .container{transition-duration:0;transform:none}:host([showing-fullscreen]){--_container-max-block-size: none;--_container-max-inline-size: none}:host([showing-fullscreen]) .container{block-size:100vh;inline-size:100vw;border-radius:0px;padding-block-start:0;padding-block-end:0}: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);padding-inline:4px;--_header-spacing: 4px}:host([showing-fullscreen]) .content{margin-block-start:0;margin-block-end:0}:host([showing-fullscreen]) .footer{max-block-size:var(--_fullscreen-footer-block-size);padding-block-end:var(--_fullscreen-container-block-padding)}:host([showing-fullscreen]) .scroll-divider-footer .content{border-block-end-color:rgba(0,0,0,0)}@media screen and (forced-colors: active),(-ms-high-contrast: active){.container{outline:windowtext solid 2px}}[name=headline-prefix]::slotted(*),[name=headline-suffix]::slotted(*){color:var(--_with-icon-icon-color);font-size:var(--_with-icon-icon-size)}[name=header]::slotted(*){flex:1;align-self:stretch;display:flex;align-items:center}:host([showing-fullscreen]) [name=headline]::slotted(*){flex:1}/*# sourceMappingURL=dialog-styles.css.map */\n`;\n "]}

package/dialog/lib/dialog-styles.scss

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use './dialog';
+
+@include dialog.styles;