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

package/dialog/lib/_dialog.scss

@@ -1,376 +0,0 @@
-//
-// Copyright 2023 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// PUBLIC PROPERTIES
-
-// go/keep-sorted start
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../elevation/elevation';
-@use '../../internal/sass/theme';
-@use './tokens';
-// go/keep-sorted end
-
-@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: 100dvh;
-    inline-size: 100dvw;
-    max-block-size: 100dvh;
-    max-inline-size: 100dvw;
-    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: 100dvh;
-    inline-size: 100dvw;
-    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 {
-    @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);
-  }
-
-  .header {
-    display: flex;
-    flex-direction: column;
-    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;
-    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: 100dvh;
-    inline-size: 100dvw;
-    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(--_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/lib/_tokens.scss

@@ -1,68 +0,0 @@
-//
-// Copyright 2023 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// go/keep-sorted start
-@use 'sass:map';
-@use 'sass:string';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../internal/sass/string-ext';
-@use '../../internal/sass/theme';
-@use '../../tokens';
-// go/keep-sorted end
-
-$_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,
-);
-
-/**
- * Extended token set for dialog.
- */
-@function md-comp-dialog-values() {
-  @return map.merge(
-    map.merge(tokens.md-comp-dialog-values(), $_tokens),
-    $_fullscreen-tokens
-  );
-}

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

@@ -1,9 +0,0 @@
-/**
-  * @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-container-high, #ece6f0));--_container-elevation: var(--md-dialog-container-elevation, 3);--_container-shape: var(--md-dialog-container-shape, 28px);--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));--_headline-type: var(--md-dialog-headline-type, var(--md-sys-typescale-headline-small, 400 1.5rem / 2rem var(--md-ref-typeface-brand, Roboto)));--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-dialog-supporting-text-type, 400 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto));--_icon-color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));--_icon-size: var(--md-dialog-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:100dvh;inline-size:100dvw;max-block-size:100dvh;max-inline-size:100dvw;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:100dvh;inline-size:100dvw;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{--md-elevation-level:var(--_container-elevation)}.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: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;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:100dvh;inline-size:100dvw;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(--_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}/*# sourceMappingURL=dialog-styles.css.map */
-`;
-//# sourceMappingURL=dialog-styles.css.js.map

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

@@ -1 +0,0 @@
-{"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-container-high, #ece6f0));--_container-elevation: var(--md-dialog-container-elevation, 3);--_container-shape: var(--md-dialog-container-shape, 28px);--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));--_headline-type: var(--md-dialog-headline-type, var(--md-sys-typescale-headline-small, 400 1.5rem / 2rem var(--md-ref-typeface-brand, Roboto)));--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-dialog-supporting-text-type, 400 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto));--_icon-color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));--_icon-size: var(--md-dialog-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:100dvh;inline-size:100dvw;max-block-size:100dvh;max-inline-size:100dvw;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:100dvh;inline-size:100dvw;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{--md-elevation-level:var(--_container-elevation)}.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: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;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:100dvh;inline-size:100dvw;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(--_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}/*# sourceMappingURL=dialog-styles.css.map */\n`;\n "]}

package/dialog/lib/dialog.d.ts

@@ -1,196 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import '../../elevation/elevation.js';
-import { LitElement, PropertyValues } from 'lit';
-/**
- * Default close action.
- */
-export declare const CLOSE_ACTION = "close";
-/**
- * A dialog component.
- *
- * @fires opening Dispatched when the dialog is opening before any animations.
- * @fires opened Dispatched when the dialog has opened after any animations.
- * @fires closing Dispatched when the dialog is closing before any animations.
- * @fires closed Dispatched when the dialog has closed after any animations.
- * @fires cancel The native HTMLDialogElement cancel event.
- */
-export declare class Dialog extends LitElement {
-    private static preventedScrollingCount;
-    private static scrollbarTester;
-    private static setDocumentScrollingDisabled;
-    /**
-     * Opens the dialog when set to `true` and closes it when set to `false`.
-     */
-    open: boolean;
-    /**
-     * Setting fullscreen displays the dialog fullscreen on small screens.
-     * This can be customized via the `fullscreenBreakpoint` property.
-     * When showing fullscreen, the header will take up less vertical space, and
-     * the dialog will have a `showing-fullscreen`attribute, allowing content to
-     * be styled in this state.
-     *
-     * Dialogs can be sized by setting:
-     *
-     * * --md-dialog-container-min-block-size
-     * * --md-dialog-container-max-block-size
-     * * --md-dialog-container-min-inline-size
-     * * --md-dialog-container-max-inline-size
-     *
-     * These are typically configured via media queries and are independent of the
-     * fullscreen setting.
-     */
-    fullscreen: boolean;
-    /**
-     * A media query string specifying the breakpoint at which the dialog
-     * should be shown fullscreen. Note, this only applies when the `fullscreen`
-     * property is set.
-     *
-     * By default, the dialog is shown fullscreen on screens less than 600px wide
-     * or 400px tall.
-     */
-    fullscreenBreakpoint: string;
-    /**
-     * Hides the dialog footer, making any content slotted into the footer
-     * inaccessible.
-     */
-    footerHidden: boolean;
-    /**
-     * Renders footer content in a vertically stacked alignment rather than the
-     * normal horizontal alignment.
-     */
-    stacked: boolean;
-    /**
-     * When the dialog is closed it disptaches `closing` and `closed` events.
-     * These events have an action property which has a default value of
-     * the value of this property. Specific actions have explicit values but when
-     * a value is not specified, the default is used. For example, clicking the
-     * scrim, pressing escape, or clicking a button with an action attribute set
-     * produce an explicit action.
-     *
-     * Defaults to `close`.
-     */
-    defaultAction: string;
-    /**
-     * The name of an attribute which can be placed on any element slotted into
-     * the dialog. If an element has an action attribute set, clicking it will
-     * close the dialog and the `closing` and `closed` events dispatched will
-     * have their action property set the value of this attribute on the
-     * clicked element.The default value is `dialog-action`. For example,
-     *
-     *   <md-dialog>
-     *    Content
-     *     <md-filled-button slot="footer" dialog-action="buy">
-     *       Buy
-     *     </md-filled-button>
-     *   </md-dialog>
-     */
-    actionAttribute: string;
-    /**
-     * When the dialog is opened, it will focus the first element which has
-     * an attribute name matching this property. The default value is
-     * `dialogFocus`. For example:
-     *
-     *  <md-dialog>
-     *    <md-filled-text-field
-     *      label="Enter some text"
-     *      dialog-focus
-     *    >
-     *    </md-filled-text-field>
-     *  </md-dialog>
-     */
-    focusAttribute: string;
-    /**
-     * Clicking on the scrim surrounding the dialog closes the dialog.
-     * The `closing` and `closed` events this produces have an `action` property
-     * which is the value of this property and defaults to `close`.
-     */
-    scrimClickAction: string;
-    /**
-     * Pressing the `escape` key while the dialog is open closes the dialog.
-     * The `closing` and `closed` events this produces have an `action` property
-     * which is the value of this property and defaults to `close`.
-     */
-    escapeKeyAction: string;
-    /**
-     * When opened, the dialog is displayed modeless or non-modal. This
-     * allows users to interact with content outside the dialog without
-     * closing the dialog and does not display the scrim around the dialog.
-     */
-    modeless: boolean;
-    /**
-     * Set to make the dialog position draggable.
-     */
-    draggable: boolean;
-    private readonly throttle;
-    private readonly dialogElement;
-    private readonly footerSlot;
-    private readonly contentSlot;
-    private readonly contentElement;
-    private readonly containerElement;
-    private readonly headerElement;
-    /**
-     * Private properties that reflect for styling manually in `updated`.
-     */
-    private showingFullscreen;
-    private showingOpen;
-    private opening;
-    private closing;
-    /**
-     * Transition kind. Supported options include: grow, shrink, grow-down,
-     * grow-up, grow-left, and grow-right.
-     *
-     * Defaults to grow-down.
-     */
-    transition: string;
-    private currentAction;
-    private dragging;
-    private readonly dragMargin;
-    private dragInfo?;
-    /**
-     * Opens and shows the dialog. This is equivalent to setting the `open`
-     * property to true.
-     */
-    show(): void;
-    /**
-     * Closes the dialog. This is equivalent to setting the `open`
-     * property to false.
-     */
-    close(action?: string): void;
-    /**
-     * Opens and shows the dialog if it is closed; otherwise closes it.
-     */
-    toggleShow(): void;
-    private getContentScrollInfo;
-    protected render(): import("lit-html").TemplateResult<1>;
-    protected willUpdate(changed: PropertyValues): void;
-    protected firstUpdated(): void;
-    protected updated(changed: PropertyValues): void;
-    /**
-     * Internal state is reflected here as attributes to effect styling. This
-     * could be done via internal classes, but it's published on the host
-     * to facilitate the (currently undocumented) possibility of customizing
-     * styling of user content based on these states.
-     * Note, in the future this could be done with `:state(...)` when browser
-     * support improves.
-     */
-    private reflectStateProp;
-    private dialogClosedResolver?;
-    private performTransition;
-    private dispatchActionEvent;
-    private fullscreenQuery?;
-    private fullscreenQueryListener;
-    private updateFullscreen;
-    private handleDialogDismiss;
-    private handleDialogClick;
-    private handleContentScroll;
-    private getFocusElement;
-    focus(): void;
-    blur(): void;
-    private canStartDrag;
-    private handlePointerMove;
-    private handleDragEnd;
-}