@limetech/lime-elements 37.55.6 → 37.55.8

package/dist/collection/components/dialog/dialog.css

@@ -1,10 +1,4 @@
 @charset "UTF-8";
-/*
- * This file is imported into every component!
- *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
- */
 /**
  * Note! This file is exported to `dist/scss/` in the published
  * node module, for consumer projects to import.
@@ -58,83 +52,21 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
-/*
- * This file is imported into every component that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-/*
- * This file is imported into every component that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-:host {
-  --mdc-theme-primary: var(
-      --lime-primary-color,
-      rgb(var(--color-teal-default))
-  );
-  --mdc-theme-secondary: var(
-      --lime-secondary-color,
-      rgb(var(--contrast-1100))
-  );
-  --mdc-theme-on-primary: var(
-      --lime-on-primary-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-on-secondary: var(
-      --lime-on-secondary-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-text-disabled-on-background: var(
-      --lime-text-disabled-on-background-color,
-      rgba(var(--contrast-1700), 0.38)
-  );
-  --mdc-theme-text-primary-on-background: var(
-      --lime-text-primary-on-background-color,
-      rgba(var(--contrast-1700), 0.87)
-  );
-  --mdc-theme-text-secondary-on-background: var(
-      --lime-text-secondary-on-background-color,
-      rgba(var(--contrast-1700), 0.54)
-  );
-  --mdc-theme-error: var(
-      --lime-error-background-color,
-      rgb(var(--color-red-dark))
-  );
-  --lime-error-text-color: rgb(var(--color-red-darker));
-  --mdc-theme-surface: var(
-      --lime-surface-background-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-on-surface: var(
-      --lime-on-surface-color,
-      rgb(var(--contrast-1500))
-  );
-}
-
 /**
  * @prop --dialog-width: Width of the dialog.
+ * @prop --dialog-max-width: Max width of the dialog.
  * @prop --dialog-height: Height of the dialog.
- * @prop --dialog-z-index: z-index of the dialog container, including the scrim.
+ * @prop --dialog-max-height: Max height of the dialog.
+ * @prop --dialog-padding-top-bottom: Padding on top and bottom of dialog content. Affects the height of fade-out effects on top and bottom edges when the content is scrollable and has overflowed out of the content area. Defaults to `1.5rem`. Note that if you use this variable and set it to numbers smaller than 1rem, you will loose the fade-out effects on the edges. If you have set these paddings to `0`, losing the fade out effects should be however fine for your use case! Because in such a case your intention is to handle the `overflow` internally in the component that is displayed in the dialog's content.
+ * @prop --dialog-padding-left-right: Padding on the sides of dialog content. Defaults to `1.25rem`.
  * @prop --dialog-heading-title-color: Color of the title.
  * @prop --dialog-heading-subtitle-color: Color of the subtitle.
  * @prop --dialog-heading-supporting-text-color: Color of the supporting text.
  * @prop --dialog-heading-icon-color: Color of the icon.
  * @prop --dialog-heading-icon-background-color: Background color of the icon when displayed as a badge.
- * @prop --dialog-max-width: Max width of the dialog.
- * @prop --dialog-max-height: Max height of the dialog.
- * @prop --dialog-border-radius: Border radius of the dialog corners
- * @prop --dialog-padding-top-bottom: Padding on top and bottom of dialog content. Affects the height of fade-out effects on top and bottom edges when the content is scrollable and has overflowed out of the content area. Defaults to `1.5rem`. Note that if you use this variable and set it to numbers smaller than 1rem, you will loose the fade-out effects on the edges. If you have set these paddings to `0`, losing the fade out effects should be however fine for your use case! Because in such a case your intention is to handle the `overflow` internally in the component that is displayed in the dialog's content.
- * @prop --dialog-padding-left-right: Padding on the sides of dialog content. Defaults to `1.25rem`.
  */
-:host {
-  --dialog-background-color: var(--lime-elevated-surface-background-color);
+:host(limel-dialog) {
+  --limel-dialog-border-radius: 0.75rem;
   --header-heading-color: var(--dialog-heading-title-color);
   --header-subheading-color: var(--dialog-heading-subtitle-color);
   --header-supporting-text-color: var(--dialog-heading-supporting-text-color);
@@ -142,620 +74,43 @@
   --header-icon-background-color: var(--dialog-heading-icon-background-color);
 }
 
-.mdc-dialog .mdc-dialog__surface {
-  background-color: #fff;
-  /* @alternate */
-  background-color: var(--mdc-theme-surface, #fff);
-}
-.mdc-dialog .mdc-dialog__scrim {
-  background-color: rgba(0, 0, 0, 0.32);
-}
-.mdc-dialog .mdc-dialog__surface-scrim {
-  background-color: rgba(0, 0, 0, 0.32);
-}
-.mdc-dialog .mdc-dialog__title {
-  color: rgba(0, 0, 0, 0.87);
-}
-.mdc-dialog .mdc-dialog__content {
-  color: rgba(0, 0, 0, 0.6);
-}
-.mdc-dialog .mdc-dialog__close {
-  color: #000;
-  /* @alternate */
-  color: var(--mdc-theme-on-surface, #000);
-}
-.mdc-dialog .mdc-dialog__close .mdc-icon-button__ripple::before, .mdc-dialog .mdc-dialog__close .mdc-icon-button__ripple::after {
-  background-color: #000;
-  /* @alternate */
-  background-color: var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000));
-}
-.mdc-dialog .mdc-dialog__close:hover .mdc-icon-button__ripple::before, .mdc-dialog .mdc-dialog__close.mdc-ripple-surface--hover .mdc-icon-button__ripple::before {
-  opacity: 0.04;
-  /* @alternate */
-  opacity: var(--mdc-ripple-hover-opacity, 0.04);
-}
-.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before, .mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-focus-opacity, 0.12);
-}
-.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after {
-  transition: opacity 150ms linear;
-}
-.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title, .mdc-dialog.mdc-dialog--scrollable .mdc-dialog__actions, .mdc-dialog.mdc-dialog--scrollable.mdc-dialog-scroll-divider-footer .mdc-dialog__actions {
-  border-color: rgba(0, 0, 0, 0.12);
-}
-.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  margin-bottom: 0;
-}
-.mdc-dialog.mdc-dialog-scroll-divider-header.mdc-dialog--fullscreen .mdc-dialog__header {
-  /* @alternate */
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-}
-.mdc-dialog .mdc-dialog__surface {
-  border-radius: 4px;
-  /* @alternate */
-  border-radius: var(--mdc-shape-medium, 4px);
-}
-
-.mdc-dialog__surface {
-  /* @alternate */
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
-}
-
-.mdc-dialog__title {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: inherit;
-  /* @alternate */
-  font-family: var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, inherit));
-  font-size: 0.875rem;
-  /* @alternate */
-  font-size: var(--mdc-typography-headline6-font-size, 0.875rem);
-  line-height: 0.875rem;
-  /* @alternate */
-  line-height: var(--mdc-typography-headline6-line-height, 0.875rem);
-  font-weight: 500;
-  /* @alternate */
-  font-weight: var(--mdc-typography-headline6-font-weight, 500);
-  letter-spacing: 0.0125em;
-  /* @alternate */
-  letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em);
-  text-decoration: inherit;
-  /* @alternate */
-  text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
-  text-transform: inherit;
-  /* @alternate */
-  text-transform: var(--mdc-typography-headline6-text-transform, inherit);
-}
-
-.mdc-dialog__content {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: inherit;
-  /* @alternate */
-  font-family: var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, inherit));
-  font-size: 0.8125rem;
-  /* @alternate */
-  font-size: var(--mdc-typography-body1-font-size, 0.8125rem);
-  line-height: 1.5rem;
-  /* @alternate */
-  line-height: var(--mdc-typography-body1-line-height, 1.5rem);
-  font-weight: 400;
-  /* @alternate */
-  font-weight: var(--mdc-typography-body1-font-weight, 400);
-  letter-spacing: 0.03125em;
-  /* @alternate */
-  letter-spacing: var(--mdc-typography-body1-letter-spacing, 0.03125em);
-  text-decoration: inherit;
-  /* @alternate */
-  text-decoration: var(--mdc-typography-body1-text-decoration, inherit);
-  text-transform: inherit;
-  /* @alternate */
-  text-transform: var(--mdc-typography-body1-text-transform, inherit);
-}
-
-.mdc-dialog__title-icon {
-  /** Hook for theming API. */
-}
-
-.mdc-elevation-overlay {
-  position: absolute;
-  border-radius: inherit;
-  pointer-events: none;
-  opacity: 0;
-  /* @alternate */
-  opacity: var(--mdc-elevation-overlay-opacity, 0);
-  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  background-color: #fff;
-  /* @alternate */
-  background-color: var(--mdc-elevation-overlay-color, #fff);
-}
-
-.mdc-dialog,
-.mdc-dialog__scrim {
-  position: fixed;
-  top: 0;
-  left: 0;
-  align-items: center;
-  justify-content: center;
+* {
   box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-}
-
-.mdc-dialog {
-  display: none;
-  z-index: 7;
-  /* @alternate */
-  z-index: var(--mdc-dialog-z-index, 7);
-}
-.mdc-dialog .mdc-dialog__content {
-  padding: 20px 24px 20px 24px;
-}
-.mdc-dialog .mdc-dialog__surface {
-  min-width: 280px;
-}
-@media (max-width: 592px) {
-  .mdc-dialog .mdc-dialog__surface {
-    max-width: calc(100vw - 32px);
-  }
-}
-@media (min-width: 592px) {
-  .mdc-dialog .mdc-dialog__surface {
-    max-width: 560px;
-  }
-}
-.mdc-dialog .mdc-dialog__surface {
-  max-height: calc(100% - 32px);
-}
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  .mdc-dialog .mdc-dialog__container {
-    /* stylelint-disable */
-    /* stylelint-enable*/
-  }
-}
-.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
-  max-width: none;
-}
-@media (max-width: 960px) {
-  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
-    max-height: 560px;
-    width: 560px;
-  }
-  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
-    right: -12px;
-  }
-}
-@media (max-width: 720px) and (max-width: 672px) {
-  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
-    width: calc(100vw - 112px);
-  }
-}
-@media (max-width: 720px) and (min-width: 672px) {
-  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
-    width: 560px;
-  }
-}
-@media (max-width: 720px) and (max-height: 720px) {
-  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
-    max-height: calc(100vh - 160px);
-  }
-}
-@media (max-width: 720px) and (min-height: 720px) {
-  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
-    max-height: 560px;
-  }
-}
-@media (max-width: 720px) {
-  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
-    right: -12px;
-  }
-}
-@media (max-width: 720px) and (max-height: 400px) {
-  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
-    height: 100%;
-    max-height: 100vh;
-    max-width: 100vw;
-    width: 100vw;
-    border-radius: 0;
-  }
-  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
-    order: -1;
-    left: -12px;
-  }
-  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header {
-    padding: 0 16px 9px;
-    justify-content: flex-start;
-  }
-  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title {
-    margin-left: calc(16px - 2 * 12px);
-  }
-}
-@media (max-width: 600px) {
-  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
-    height: 100%;
-    max-height: 100vh;
-    max-width: 100vw;
-    width: 100vw;
-    border-radius: 0;
-  }
-  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
-    order: -1;
-    left: -12px;
-  }
-  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header {
-    padding: 0 16px 9px;
-    justify-content: flex-start;
-  }
-  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title {
-    margin-left: calc(16px - 2 * 12px);
-  }
-}
-@media (min-width: 960px) {
-  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
-    width: calc(100vw - 400px);
-  }
-  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
-    right: -12px;
-  }
-}
-.mdc-dialog.mdc-dialog__scrim--hidden .mdc-dialog__scrim {
-  opacity: 0;
 }
 
-.mdc-dialog__scrim {
-  opacity: 0;
-  z-index: -1;
-}
-
-.mdc-dialog__container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-around;
-  box-sizing: border-box;
+dialog {
+  border: none;
+  outline: none;
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+  border-radius: var(--limel-dialog-border-radius);
+  width: var(--dialog-width, fit-content);
+  height: var(--dialog-height, fit-content);
+  max-width: var(--dialog-max-width, calc(100vw - 1rem));
+  max-height: var(--dialog-max-height, calc(100% - 1rem));
+  background-color: transparent;
+  box-shadow: var(--shadow-depth-8), var(--shadow-depth-64);
+}
+dialog.fullscreen {
+  --dialog-width: 100%;
+  --dialog-height: 100%;
+  width: 100%;
   height: 100%;
-  transform: scale(0.8);
-  opacity: 0;
-  pointer-events: none;
 }
 
-.mdc-dialog__surface {
-  /* @alternate */
-  position: relative;
+.surface {
   display: flex;
   flex-direction: column;
-  flex-grow: 0;
-  flex-shrink: 0;
-  box-sizing: border-box;
-  max-width: 100%;
-  max-height: 100%;
-  pointer-events: auto;
-  overflow-y: auto;
-}
-.mdc-dialog__surface .mdc-elevation-overlay {
-  width: 100%;
   height: 100%;
-  top: 0;
-  /* @noflip */ /*rtl:ignore*/
-  left: 0;
-}
-[dir=rtl] .mdc-dialog__surface, .mdc-dialog__surface[dir=rtl] {
-  /*rtl:begin:ignore*/
-  /* @noflip */ /*rtl:ignore*/
-  text-align: right;
-  /*rtl:end:ignore*/
-}
-
-@media screen and (forced-colors: active), (-ms-high-contrast: active) {
-  .mdc-dialog__surface {
-    outline: 2px solid windowText;
-  }
-}
-.mdc-dialog__surface::before {
-  position: absolute;
-  box-sizing: border-box;
   width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  border: 2px solid transparent;
-  border-radius: inherit;
-  content: "";
-  pointer-events: none;
-}
-@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
-  .mdc-dialog__surface::before {
-    content: none;
-  }
+  border-radius: var(--limel-dialog-border-radius);
+  background-color: var(--lime-elevated-surface-background-color);
 }
 
-.mdc-dialog__title {
-  display: block;
-  margin-top: 0;
-  /* @alternate */
-  position: relative;
-  flex-shrink: 0;
-  box-sizing: border-box;
-  margin: 0 0 1px;
-  padding: 0 24px 9px;
-}
-.mdc-dialog__title::before {
-  display: inline-block;
-  width: 0;
-  height: 40px;
-  content: "";
-  vertical-align: 0;
-}
-[dir=rtl] .mdc-dialog__title, .mdc-dialog__title[dir=rtl] {
-  /*rtl:begin:ignore*/
-  /* @noflip */ /*rtl:ignore*/
-  text-align: right;
-  /*rtl:end:ignore*/
-}
-
-.mdc-dialog--scrollable .mdc-dialog__title {
-  margin-bottom: 1px;
-  padding-bottom: 15px;
-}
-
-.mdc-dialog--fullscreen .mdc-dialog__header {
-  align-items: baseline;
-  border-bottom: 1px solid transparent;
-  display: inline-flex;
-  justify-content: space-between;
-  padding: 0 24px 9px;
-  z-index: 1;
-}
-.mdc-dialog--fullscreen .mdc-dialog__header .mdc-dialog__close {
-  right: -12px;
-}
-.mdc-dialog--fullscreen .mdc-dialog__title {
-  margin-bottom: 0;
-  padding: 0;
-  border-bottom: 0;
-}
-.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__title {
-  border-bottom: 0;
-  margin-bottom: 0;
-}
-.mdc-dialog--fullscreen .mdc-dialog__close {
-  top: 5px;
-}
-.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__actions {
-  border-top: 1px solid transparent;
-}
-
-.mdc-dialog__content {
+.content {
   flex-grow: 1;
-  box-sizing: border-box;
-  margin: 0;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-}
-.mdc-dialog__content > :first-child {
-  margin-top: 0;
-}
-.mdc-dialog__content > :last-child {
-  margin-bottom: 0;
-}
-
-.mdc-dialog__title + .mdc-dialog__content,
-.mdc-dialog__header + .mdc-dialog__content {
-  padding-top: 0;
-}
-
-.mdc-dialog--scrollable .mdc-dialog__title + .mdc-dialog__content {
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-.mdc-dialog__content .mdc-deprecated-list:first-child:last-child {
-  padding: 6px 0 0;
-}
-
-.mdc-dialog--scrollable .mdc-dialog__content .mdc-deprecated-list:first-child:last-child {
-  padding: 0;
-}
-
-.mdc-dialog__actions {
-  display: flex;
-  position: relative;
-  flex-shrink: 0;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  box-sizing: border-box;
-  min-height: 52px;
-  margin: 0;
-  padding: 8px;
-  border-top: 1px solid transparent;
-}
-.mdc-dialog--stacked .mdc-dialog__actions {
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.mdc-dialog__button {
-  /* @noflip */ /*rtl:ignore*/
-  margin-left: 8px;
-  /* @noflip */ /*rtl:ignore*/
-  margin-right: 0;
-  max-width: 100%;
-  /* @noflip */ /*rtl:ignore*/
-  text-align: right;
-}
-[dir=rtl] .mdc-dialog__button, .mdc-dialog__button[dir=rtl] {
-  /*rtl:begin:ignore*/
-  /* @noflip */ /*rtl:ignore*/
-  margin-left: 0;
-  /* @noflip */ /*rtl:ignore*/
-  margin-right: 8px;
-  /*rtl:end:ignore*/
-}
-
-.mdc-dialog__button:first-child {
-  /* @noflip */ /*rtl:ignore*/
-  margin-left: 0;
-  /* @noflip */ /*rtl:ignore*/
-  margin-right: 0;
-}
-[dir=rtl] .mdc-dialog__button:first-child, .mdc-dialog__button:first-child[dir=rtl] {
-  /*rtl:begin:ignore*/
-  /* @noflip */ /*rtl:ignore*/
-  margin-left: 0;
-  /* @noflip */ /*rtl:ignore*/
-  margin-right: 0;
-  /*rtl:end:ignore*/
-}
-
-[dir=rtl] .mdc-dialog__button, .mdc-dialog__button[dir=rtl] {
-  /*rtl:begin:ignore*/
-  /* @noflip */ /*rtl:ignore*/
-  text-align: left;
-  /*rtl:end:ignore*/
-}
-
-.mdc-dialog--stacked .mdc-dialog__button:not(:first-child) {
-  margin-top: 12px;
-}
-
-.mdc-dialog--open,
-.mdc-dialog--opening,
-.mdc-dialog--closing {
-  display: flex;
-}
-
-.mdc-dialog--opening .mdc-dialog__scrim {
-  transition: opacity 150ms linear;
-}
-.mdc-dialog--opening .mdc-dialog__container {
-  transition: opacity 75ms linear, transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.mdc-dialog--closing .mdc-dialog__scrim,
-.mdc-dialog--closing .mdc-dialog__container {
-  transition: opacity 75ms linear;
-}
-.mdc-dialog--closing .mdc-dialog__container {
-  transform: none;
-}
-
-.mdc-dialog--open .mdc-dialog__scrim {
-  opacity: 1;
-}
-.mdc-dialog--open .mdc-dialog__container {
-  transform: none;
-  opacity: 1;
-}
-.mdc-dialog--open.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim {
-  opacity: 1;
-  z-index: 1;
-}
-.mdc-dialog--open.mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim {
-  transition: opacity 75ms linear;
-}
-.mdc-dialog--open.mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim {
-  transition: opacity 150ms linear;
-}
-
-.mdc-dialog__surface-scrim {
-  display: none;
-  opacity: 0;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim, .mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim, .mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim {
-  display: block;
-}
-
-.mdc-dialog-scroll-lock {
-  overflow: hidden;
-}
-
-.mdc-dialog__content {
-  font-family: inherit;
-}
-
-.mdc-dialog {
-  z-index: var(--dialog-z-index, 7);
-  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
-}
-@media (max-width: 16032px) {
-  .mdc-dialog .mdc-dialog__surface {
-    max-width: calc(100vw - 32px);
-  }
-}
-@media (min-width: 16032px) {
-  .mdc-dialog .mdc-dialog__surface {
-    max-width: 16000px;
-  }
-}
-@media (max-height: 16032px) {
-  .mdc-dialog.full-screen .mdc-dialog__surface {
-    max-height: calc(100% - 32px);
-  }
-}
-@media (min-height: 16032px) {
-  .mdc-dialog.full-screen .mdc-dialog__surface {
-    max-height: 16000px;
-  }
-}
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  .mdc-dialog.full-screen .mdc-dialog__container {
-    /* stylelint-disable */
-    /* stylelint-enable*/
-  }
-}
-@media (-ms-high-contrast: none) and (min-height: 16032px), (-ms-high-contrast: active) and (min-height: 16032px) {
-  .mdc-dialog.full-screen .mdc-dialog__container {
-    align-items: stretch;
-    height: auto;
-  }
-}
-.mdc-dialog.full-screen .mdc-dialog__container {
-  height: 100%;
-  width: 100%;
-}
-.mdc-dialog.full-screen .mdc-dialog__container .mdc-dialog__surface {
-  height: 100%;
-  width: 100%;
-}
-.mdc-dialog .mdc-dialog__scrim {
-  background-color: rgba(var(--color-black), 0.4);
-}
-.mdc-dialog .mdc-dialog__container {
-  height: 100%;
-  width: var(--dialog-width, auto);
-}
-.mdc-dialog .mdc-dialog__surface {
-  width: var(--dialog-width, auto);
-  height: var(--dialog-height, auto);
-  background-color: var(--dialog-background-color);
-  box-shadow: var(--shadow-depth-64);
-  max-width: var(--dialog-max-width, calc(100vw - 2rem));
-  max-height: var(--dialog-max-height, calc(100% - 2rem));
-  border-radius: var(--dialog-border-radius, 0.25rem);
-}
-.mdc-dialog .mdc-dialog__content {
+  overflow-y: auto;
   --limel-top-edge-fade-height: var(--dialog-padding-top-bottom, 1.5rem);
-  --limel-bottom-edge-fade-height: var(
-      --dialog-padding-top-bottom,
-      1.5rem
-  );
+  --limel-bottom-edge-fade-height: var(--dialog-padding-top-bottom, 1.5rem);
   --limel-overflow-mask-vertical: linear-gradient(
       to bottom,
       transparent 0%,
@@ -772,11 +127,19 @@
   padding-right: var(--dialog-padding-left-right, min(1.25rem, 3vw));
 }
 
-#initialFocusElement {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-  z-index: -1;
+limel-header,
+.actions {
+  flex-shrink: 0;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: 52px;
+  margin: 0px;
+  padding: 8px;
+  border-top: 1px solid transparent;
 }
 
 slot[name=header] {
@@ -798,4 +161,41 @@ slot[name=button] {
     padding: min(1.5rem, 3vw);
     padding-top: 1rem;
   }
+}
+dialog {
+  --limel-dialog-display-speed: 0.2s;
+  transition: opacity 0.2s ease, display var(--limel-dialog-display-speed) ease, transform var(--limel-dialog-display-speed) ease;
+  transition-behavior: allow-discrete;
+  opacity: 0;
+  transform: translate3d(0, 1rem, 0);
+}
+dialog::backdrop {
+  transition: background-color 0.6s ease;
+  transition-behavior: allow-discrete;
+  background-color: rgb(var(--color-black), 0);
+}
+dialog[open] {
+  --limel-dialog-display-speed: 0.4s;
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1);
+}
+@starting-style {
+  dialog[open] {
+    opacity: 0;
+    transform: translate3d(0, -1rem, 0) scale(0.9);
+  }
+}
+dialog[open]::backdrop {
+  transition-delay: var(--limel-dialog-display-speed);
+  background-color: rgb(var(--color-black), 0.4);
+}
+@starting-style {
+  dialog[open]::backdrop {
+    background-color: rgb(var(--color-black), 0);
+  }
+}
+
+dialog {
+  position: fixed;
+  inset: 0;
 }