@tylertech/forge 3.3.0 → 3.3.1

package/custom-elements.json

@@ -1659,6 +1659,18 @@
               "description": "The cursor type of the button.",
               "name": "--forge-button-cursor"
             },
+            {
+              "description": "The transition duration of the button.",
+              "name": "--forge-button-transition-duration"
+            },
+            {
+              "description": "The transition timing of the button.",
+              "name": "--forge-button-transition-timing"
+            },
+            {
+              "description": "The inline padding of the button when using the text variant.",
+              "name": "--forge-button-text-padding-inline"
+            },
             {
               "description": "The background color of the filled button.",
               "name": "--forge-button-filled-background"
@@ -31140,7 +31152,7 @@
     },
     "ButtonComponent": {
       "path": "src/lib/button/button.ts",
-      "lineNumber": 155
+      "lineNumber": 158
     },
     "IButtonAreaAdapter": {
       "path": "src/lib/button-area/button-area-adapter.ts",

package/dist/button/forge-button.css

@@ -8,7 +8,7 @@
   --_button-primary-color: var(--forge-button-primary-color, var(--forge-theme-primary, #3f51b5));
   --_button-text-color: var(--forge-button-text-color, var(--_button-primary-color));
   --_button-disabled-color: var(--forge-button-disabled-color, var(--forge-theme-surface-container, #e0e0e0));
-  --_button-padding: var(--forge-button-padding, 8px);
+  --_button-padding: var(--forge-button-padding, var(--forge-spacing-medium, 16px));
   --_button-display: var(--forge-button-display, inline-flex);
   --_button-justify: var(--forge-button-justify, center);
   --_button-shape: var(--forge-button-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));
@@ -35,6 +35,7 @@
   --_button-cursor: var(--forge-button-cursor, pointer);
   --_button-transition-duration: var(--forge-button-transition-duration, var(--forge-animation-duration-short3, 150ms));
   --_button-transition-timing: var(--forge-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));
+  --_button-text-padding-inline: var(--forge-button-text-padding-inline, var(--forge-spacing-xsmall, 8px));
   --_button-outlined-background: var(--forge-button-outlined-background, transparent);
   --_button-outlined-color: var(--forge-button-outlined-color, var(--_button-primary-color));
   --_button-outlined-border-width: var(--forge-button-outlined-border-width, var(--forge-border-thin, 1px));
@@ -86,6 +87,7 @@
   display: var(--_button-display);
   position: relative;
   outline: none;
+  vertical-align: middle;
   -webkit-tap-highlight-color: transparent;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -251,6 +253,9 @@
   pointer-events: none;
   pointer-events: initial;
 }
+.forge-button:where(:not(.forge-button--outlined, .forge-button--tonal, .forge-button--filled, .forge-button--raised, .forge-button--link)), .forge-button--text {
+  --_button-padding-inline: var(--_button-text-padding-inline);
+}
 .forge-button--outlined {
   --_button-background: var(--_button-outlined-background);
   --_button-color: var(--_button-outlined-color);

package/dist/dialog/forge-dialog.css

@@ -0,0 +1,483 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@keyframes forge-dialog-zoom-in {
+  from {
+    opacity: var(--_dialog-zoom-opacity);
+    scale: var(--_dialog-zoom-scale);
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+@keyframes forge-dialog-zoom-out {
+  from {
+    opacity: 1;
+    scale: 1;
+  }
+  to {
+    opacity: var(--_dialog-zoom-opacity);
+    scale: var(--_dialog-zoom-scale);
+  }
+}
+@keyframes forge-dialog-fade-in {
+  from {
+    opacity: var(--_dialog-fade-opacity);
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes forge-dialog-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: var(--_dialog-fade-opacity);
+  }
+}
+@keyframes forge-dialog-slide-in {
+  from {
+    opacity: var(--_dialog-slide-opacity);
+    translate: var(--_dialog-slide-translate);
+  }
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+@keyframes forge-dialog-slide-out {
+  from {
+    opacity: 1;
+    translate: 0 0;
+  }
+  to {
+    opacity: var(--_dialog-slide-opacity);
+    translate: var(--_dialog-slide-translate);
+  }
+}
+.forge-dialog {
+  --_dialog-background: var(--forge-dialog-background, var(--forge-theme-surface-bright, #ffffff));
+  --_dialog-shape: var(--forge-dialog-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));
+  --_dialog-elevation: var(--forge-dialog-elevation, 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));
+  --_dialog-spacing: var(--forge-dialog-spacing, auto);
+  --_dialog-block-start-spacing: var(--forge-dialog-block-start-spacing, var(--_dialog-spacing));
+  --_dialog-block-end-spacing: var(--forge-dialog-block-end-spacing, var(--_dialog-spacing));
+  --_dialog-inline-start-spacing: var(--forge-dialog-inline-start-spacing, var(--_dialog-spacing));
+  --_dialog-inline-end-spacing: var(--forge-dialog-inline-end-spacing, var(--_dialog-spacing));
+  --_dialog-padding: var(--forge-dialog-padding, 0);
+  --_dialog-width: var(--forge-dialog-width, fit-content);
+  --_dialog-height: var(--forge-dialog-height, fit-content);
+  --_dialog-min-width: var(--forge-dialog-min-width, 0);
+  --_dialog-max-width: var(--forge-dialog-max-width, calc(100% - var(--forge-spacing-xxlarge, 48px)));
+  --_dialog-min-height: var(--forge-dialog-min-height, 0);
+  --_dialog-max-height: var(--forge-dialog-max-height, calc(100% - var(--forge-spacing-xxlarge, 48px)));
+  --_dialog-z-index: var(--forge-dialog-z-index, var(--forge-z-index-dialog, 8));
+  --_dialog-move-handle-color: var(--forge-dialog-move-handle-color, currentColor);
+  --_dialog-move-handle-size: var(--forge-dialog-move-handle-size, 24px);
+  --_dialog-move-handle-hover-cursor: var(--forge-dialog-move-handle-hover-cursor, grab);
+  --_dialog-move-handle-active-cursor: var(--forge-dialog-move-handle-active-cursor, grabbing);
+  --_dialog-move-handle-spacing: var(--forge-dialog-move-handle-spacing, calc(var(--forge-spacing-xxsmall, 4px) * -1) 0 0);
+  --_dialog-move-transition-duration: var(--forge-dialog-move-transition-duration, var(--forge-animation-duration-short4, 200ms));
+  --_dialog-move-transition-easing: var(--forge-dialog-move-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));
+  --_dialog-moving-opacity: var(--forge-dialog-moving-opacity, 0.54);
+  --_dialog-enter-animation-duration: var(--forge-dialog-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));
+  --_dialog-enter-animation-easing: var(--forge-dialog-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));
+  --_dialog-exit-animation-duration: var(--forge-dialog-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));
+  --_dialog-exit-animation-easing: var(--forge-dialog-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)));
+  --_dialog-zoom-opacity: var(--forge-dialog-zoom-opacity, 0);
+  --_dialog-zoom-scale: var(--forge-dialog-zoom-scale, 0.8);
+  --_dialog-fade-opacity: var(--forge-dialog-fade-opacity, 0);
+  --_dialog-slide-opacity: var(--forge-dialog-slide-opacity, 0);
+  --_dialog-slide-translate: var(--forge-dialog-slide-translate, 0 -30%);
+  --_dialog-backdrop-opacity: var(--forge-dialog-backdrop-opacity, var(--forge-backdrop-opacity, 0.54));
+  --_dialog-nonmodal-elevation: var(--forge-dialog-nonmodal-elevation, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));
+  --_dialog-fullscreen-enter-animation-duration: var(--forge-dialog-fullscreen-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));
+  --_dialog-fullscreen-exit-animation-duration: var(--forge-dialog-fullscreen-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));
+  --_dialog-position-x: var(--forge-dialog-position-x, 0);
+  --_dialog-position-y: var(--forge-dialog-position-y, 0);
+  --_dialog-preset-sheet-enter-animation-duration: var(--forge-dialog-preset-sheet-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));
+  --_dialog-preset-sheet-exit-animation-duration: var(--forge-dialog-preset-sheet-exit-animation-duration, var(--forge-animation-duration-short3, 150ms));
+  --_backdrop-background: var(--forge-backdrop-background, #000);
+  --_backdrop-opacity: var(--forge-backdrop-opacity, 0.54);
+  --_backdrop-z-index: var(--forge-backdrop-z-index, var(--forge-z-index-backdrop, 7));
+  --_backdrop-enter-animation-duration: var(--forge-backdrop-enter-animation-duration, var(--forge-animation-duration-short4, 200ms));
+  --_backdrop-enter-animation-easing: var(--forge-backdrop-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));
+  --_backdrop-exit-animation-duration: var(--forge-backdrop-exit-animation-duration, var(--forge-animation-duration-short1, 50ms));
+  --_backdrop-exit-animation-easing: var(--forge-backdrop-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)));
+  --forge-theme-surface: var(--forge-theme-surface-bright, #ffffff);
+}
+
+.forge-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: var(--_dialog-z-index);
+  background-color: transparent;
+  color: inherit;
+  border: none;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  max-width: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  background: var(--_dialog-background);
+  box-shadow: var(--_dialog-elevation);
+  z-index: var(--_dialog-z-index);
+  overflow: hidden;
+  border-radius: var(--_dialog-shape);
+  margin-block-start: var(--_dialog-block-start-spacing);
+  margin-block-end: var(--_dialog-block-end-spacing);
+  margin-inline-start: var(--_dialog-inline-start-spacing);
+  margin-inline-end: var(--_dialog-inline-end-spacing);
+  padding: var(--_dialog-padding);
+  width: var(--_dialog-width);
+  height: var(--_dialog-height);
+  min-width: var(--_dialog-min-width);
+  max-width: var(--_dialog-max-width);
+  min-height: var(--_dialog-min-height);
+  max-height: var(--_dialog-max-height);
+  box-sizing: border-box;
+  animation-duration: var(--_dialog-exit-animation-duration);
+  animation-timing-function: var(--_dialog-exit-animation-easing);
+  position: fixed;
+  transition-property: display, opacity, overlay, scale;
+  transition-behavior: allow-discrete;
+}
+.forge-dialog--fullscreen {
+  --_dialog-enter-animation-duration: var(--_dialog-fullscreen-enter-animation-duration);
+  --_dialog-exit-animation-duration: var(--_dialog-fullscreen-exit-animation-duration);
+  height: 100%;
+  width: 100%;
+  max-width: none;
+  max-height: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+.forge-dialog:not(:modal) {
+  --_dialog-elevation: var(--_dialog-nonmodal-elevation);
+  pointer-events: all;
+}
+.forge-dialog--moveable {
+  user-select: none;
+  transition-property: opacity;
+  transition-duration: var(--_dialog-move-transition-duration);
+  transition-timing-function: var(--_dialog-move-transition-easing);
+}
+.forge-dialog--moved {
+  margin: 0;
+}
+.forge-dialog--moving {
+  opacity: var(--_dialog-moving-opacity);
+}
+.forge-dialog__move-handle {
+  fill: var(--_dialog-move-handle-color);
+  height: var(--_dialog-move-handle-size);
+  width: var(--_dialog-move-handle-size);
+  margin: var(--_dialog-move-handle-spacing);
+  touch-action: none;
+}
+.forge-dialog__move-handle:hover {
+  cursor: var(--_dialog-move-handle-hover-cursor);
+}
+.forge-dialog__move-handle:active {
+  cursor: var(--_dialog-move-handle-active-cursor);
+}
+.forge-dialog__move-handle-container {
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+.forge-dialog--top {
+  --_dialog-block-start-spacing: var(--forge-dialog-block-start-spacing, 0);
+  top: 0;
+  bottom: auto;
+}
+.forge-dialog--top-right {
+  --_dialog-spacing: var(--forge-dialog-spacing, 0);
+  top: 0;
+  left: auto;
+  right: 0;
+  bottom: auto;
+}
+.forge-dialog--top-left {
+  --_dialog-spacing: var(--forge-dialog-spacing, 0);
+  top: 0;
+  left: 0;
+  right: auto;
+  bottom: auto;
+}
+.forge-dialog--bottom {
+  --_dialog-block-end-spacing: var(--forge-dialog-block-end-spacing, 0);
+  top: auto;
+  bottom: 0;
+}
+.forge-dialog--bottom-right {
+  --_dialog-spacing: var(--forge-dialog-spacing, 0);
+  top: auto;
+  left: auto;
+  right: 0;
+  bottom: 0;
+}
+.forge-dialog--bottom-left {
+  --_dialog-spacing: var(--forge-dialog-spacing, 0);
+  top: auto;
+  left: 0;
+  right: auto;
+  bottom: 0;
+}
+.forge-dialog--right {
+  --_dialog-spacing: var(--forge-dialog-spacing, 0);
+  top: auto;
+  left: auto;
+  right: 0;
+  bottom: auto;
+}
+.forge-dialog--left {
+  --_dialog-spacing: var(--forge-dialog-spacing, 0);
+  top: auto;
+  left: 0;
+  right: auto;
+  bottom: auto;
+}
+.forge-dialog--custom {
+  margin: 0;
+  top: var(--_dialog-position-x);
+  left: var(--_dialog-position-y);
+}
+.forge-dialog--bottom-sheet {
+  --_dialog-enter-animation-duration: var(--_dialog-preset-sheet-enter-animation-duration);
+  --_dialog-exit-animation-duration: var(--_dialog-preset-sheet-exit-animation-duration);
+  --_dialog-max-width: var(--forge-dialog-max-width, none);
+  --_dialog-max-height: var(--forge-dialog-max-height, none);
+  inset: auto;
+  display: inline-flex;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  --_dialog-slide-translate: var(--forge-dialog-slide-translate, 0 100%);
+}
+.forge-dialog--bottom-sheet.forge-dialog {
+  transition-property: display, opacity, overlay, translate;
+}
+.forge-dialog--bottom-sheet.forge-dialog[open] {
+  translate: 0 0;
+}
+@starting-style {
+  .forge-dialog--bottom-sheet.forge-dialog[open] {
+    opacity: var(--_dialog-slide-opacity);
+    translate: var(--_dialog-slide-translate);
+  }
+}
+.forge-dialog--bottom-sheet.forge-dialog:not([open]) {
+  opacity: var(--_dialog-slide-opacity);
+  scale: 1;
+  translate: var(--_dialog-slide-translate);
+}
+.forge-dialog--left-sheet {
+  --_dialog-enter-animation-duration: var(--_dialog-preset-sheet-enter-animation-duration);
+  --_dialog-exit-animation-duration: var(--_dialog-preset-sheet-exit-animation-duration);
+  --_dialog-max-width: var(--forge-dialog-max-width, none);
+  --_dialog-max-height: var(--forge-dialog-max-height, none);
+  inset: auto;
+  display: inline-flex;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  height: 100%;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  --_dialog-slide-translate: var(--forge-dialog-slide-translate, -100% 0);
+}
+.forge-dialog--left-sheet.forge-dialog {
+  transition-property: display, opacity, overlay, translate;
+}
+.forge-dialog--left-sheet.forge-dialog[open] {
+  translate: 0 0;
+}
+@starting-style {
+  .forge-dialog--left-sheet.forge-dialog[open] {
+    opacity: var(--_dialog-slide-opacity);
+    translate: var(--_dialog-slide-translate);
+  }
+}
+.forge-dialog--left-sheet.forge-dialog:not([open]) {
+  opacity: var(--_dialog-slide-opacity);
+  scale: 1;
+  translate: var(--_dialog-slide-translate);
+}
+.forge-dialog--right-sheet {
+  --_dialog-enter-animation-duration: var(--_dialog-preset-sheet-enter-animation-duration);
+  --_dialog-exit-animation-duration: var(--_dialog-preset-sheet-exit-animation-duration);
+  --_dialog-max-width: var(--forge-dialog-max-width, none);
+  --_dialog-max-height: var(--forge-dialog-max-height, none);
+  inset: auto;
+  display: inline-flex;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  height: 100%;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  --_dialog-slide-translate: var(--forge-dialog-slide-translate, 100% 0);
+}
+.forge-dialog--right-sheet.forge-dialog {
+  transition-property: display, opacity, overlay, translate;
+}
+.forge-dialog--right-sheet.forge-dialog[open] {
+  translate: 0 0;
+}
+@starting-style {
+  .forge-dialog--right-sheet.forge-dialog[open] {
+    opacity: var(--_dialog-slide-opacity);
+    translate: var(--_dialog-slide-translate);
+  }
+}
+.forge-dialog--right-sheet.forge-dialog:not([open]) {
+  opacity: var(--_dialog-slide-opacity);
+  scale: 1;
+  translate: var(--_dialog-slide-translate);
+}
+.forge-dialog--top-sheet {
+  --_dialog-enter-animation-duration: var(--_dialog-preset-sheet-enter-animation-duration);
+  --_dialog-exit-animation-duration: var(--_dialog-preset-sheet-exit-animation-duration);
+  --_dialog-max-width: var(--forge-dialog-max-width, none);
+  --_dialog-max-height: var(--forge-dialog-max-height, none);
+  inset: auto;
+  display: inline-flex;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  --_dialog-slide-translate: var(--forge-dialog-slide-translate, 0 -100%);
+}
+.forge-dialog--top-sheet.forge-dialog {
+  transition-property: display, opacity, overlay, translate;
+}
+.forge-dialog--top-sheet.forge-dialog[open] {
+  translate: 0 0;
+}
+@starting-style {
+  .forge-dialog--top-sheet.forge-dialog[open] {
+    opacity: var(--_dialog-slide-opacity);
+    translate: var(--_dialog-slide-translate);
+  }
+}
+.forge-dialog--top-sheet.forge-dialog:not([open]) {
+  opacity: var(--_dialog-slide-opacity);
+  scale: 1;
+  translate: var(--_dialog-slide-translate);
+}
+.forge-dialog::backdrop {
+  --forge-backdrop-opacity: var(--_backdrop-opacity);
+  --forge-backdrop-enter-animation-duration: var(--_backdrop-enter-animation-duration);
+  --forge-backdrop-enter-animation-easing: var(--_backdrop-enter-animation-easing);
+  --forge-backdrop-exit-animation-duration: var(--_backdrop-exit-animation-duration);
+  --forge-backdrop-exit-animation-easing: var(--_backdrop-exit-animation-easing);
+  position: absolute;
+  inset: 0;
+  contain: content;
+  z-index: var(--_backdrop-z-index);
+  background: var(--_backdrop-background);
+  opacity: 0;
+  animation-fill-mode: forwards;
+  transition-property: display, opacity, overlay;
+}
+.forge-dialog[open] {
+  opacity: 1;
+  scale: 1;
+  transition-duration: var(--_dialog-enter-animation-duration);
+  transition-timing-function: var(--_dialog-enter-animation-easing);
+}
+@starting-style {
+  .forge-dialog[open] {
+    opacity: var(--_dialog-zoom-opacity);
+    scale: var(--_dialog-zoom-scale);
+  }
+}
+.forge-dialog[open]::backdrop {
+  opacity: var(--_backdrop-opacity);
+  transition-duration: var(--_backdrop-enter-animation-duration);
+  transition-timing-function: var(--_backdrop-enter-animation-easing);
+}
+@starting-style {
+  .forge-dialog[open]::backdrop {
+    opacity: 0;
+  }
+}
+.forge-dialog:not([open]) {
+  animation-duration: var(--_dialog-enter-animation-duration);
+  animation-timing-function: var(--_dialog-enter-animation-easing);
+  display: none;
+  opacity: var(--_dialog-zoom-opacity);
+  scale: var(--_dialog-zoom-scale);
+  transition-duration: var(--_dialog-exit-animation-duration);
+  transition-timing-function: var(--_dialog-exit-animation-easing);
+}
+.forge-dialog:not([open])::backdrop {
+  transition-duration: var(--_backdrop-exit-animation-duration);
+  transition-timing-function: var(--_backdrop-exit-animation-easing);
+}
+.forge-dialog--animation-fade.forge-dialog {
+  transition-property: display, opacity, overlay;
+}
+@starting-style {
+  .forge-dialog--animation-fade.forge-dialog[open] {
+    opacity: var(--_dialog-fade-opacity);
+  }
+}
+.forge-dialog--animation-fade.forge-dialog:not([open]) {
+  opacity: var(--_dialog-fade-opacity);
+  scale: 1;
+}
+.forge-dialog--animation-slide.forge-dialog {
+  transition-property: display, opacity, overlay, translate;
+}
+.forge-dialog--animation-slide.forge-dialog[open] {
+  translate: 0 0;
+}
+@starting-style {
+  .forge-dialog--animation-slide.forge-dialog[open] {
+    opacity: var(--_dialog-slide-opacity);
+    translate: var(--_dialog-slide-translate);
+  }
+}
+.forge-dialog--animation-slide.forge-dialog:not([open]) {
+  opacity: var(--_dialog-slide-opacity);
+  scale: 1;
+  translate: var(--_dialog-slide-translate);
+}
+.forge-dialog--animation-none {
+  --_dialog-enter-animation-duration: var(--forge-dialog-enter-animation-duration, 0s);
+  --_dialog-exit-animation-duration: var(--forge-dialog-exit-animation-duration, 0s);
+  --_backdrop-enter-animation-duration: var(--forge-backdrop-enter-animation-duration, 0s);
+  --_backdrop-exit-animation-duration: var(--forge-backdrop-exit-animation-duration, 0s);
+}
+@media (prefers-reduced-motion) {
+  .forge-dialog.forge-dialog {
+    transition-property: display, opacity, overlay;
+  }
+  @starting-style {
+    .forge-dialog.forge-dialog[open] {
+      opacity: var(--_dialog-fade-opacity);
+    }
+  }
+  .forge-dialog.forge-dialog:not([open]) {
+    opacity: var(--_dialog-fade-opacity);
+    scale: 1;
+  }
+}