@blockquote-web-components/blockquote-dialog 1.4.2 → 1.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockquote-web-components/blockquote-dialog",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "Webcomponent blockquote-dialog following open-wc recommendations",
   "keywords": [
     "lit",
@@ -118,18 +118,18 @@
     ]
   },
   "dependencies": {
-    "@blockquote-web-components/blockquote-directive-ariaidref-slot": "^1.3.2",
+    "@blockquote-web-components/blockquote-directive-ariaidref-slot": "^1.3.4",
     "@blockquote/frontend-utilities": "^1.1.0",
-    "lit": "^3.3.0"
+    "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.12.1",
-    "@blockquote-web-components/blockquote-base-embedded-webview": "^1.13.2",
+    "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.12.3",
+    "@blockquote-web-components/blockquote-base-embedded-webview": "^1.13.4",
     "@blockquote-web-components/blockquote-foundations-sass": "^1.1.6"
   },
   "publishConfig": {
     "access": "public"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "e21572ce7ed04ce4de920cd60cf8d2fea027153a"
+  "gitHead": "13c87a3d8022cc2b9b46fcf2c0b5c3a719025070"
 }

package/src/styles/blockqoute-dialog-animations-styles.css.js

@@ -1,28 +1,31 @@
 import {css} from 'lit';
 
 export const styles = css`
-  /* Closed state of the dialog */
   dialog {
     opacity: 0;
     transform: translateY(16%);
     transition:
       opacity 200ms ease-out,
-      transform 200ms ease-out,
-      overlay 200ms ease-out allow-discrete,
-      display 200ms ease-out allow-discrete;
-    /* Equivalent to
-    transition: all 200ms allow-discrete; */
+      transform 200ms ease-out;
   }
 
-  /* Open state of the dialog */
+  @supports (transition-behavior: allow-discrete) {
+    dialog {
+      transition:
+        opacity 200ms ease-out,
+        transform 200ms ease-out,
+        overlay 200ms ease-out allow-discrete,
+        display 200ms ease-out allow-discrete;
+    }
+  }
+
+  /* [open state] */
   dialog[open] {
     opacity: 1;
     transform: translateY(0);
   }
 
-  /* Before-open state
-   Needs to be after the previous dialog[open] rule to take effect,
-  as the specificity is the same */
+  /* Before - [open state] Needs to be after the previous dialog[open] rule to take effect, as the specificity is the same */
   @starting-style {
     dialog[open] {
       opacity: 0;
@@ -33,23 +36,41 @@ export const styles = css`
   /* Transition the :backdrop when the dialog modal is promoted to the top layer */
   dialog::backdrop {
     background-color: rgb(120, 120, 120, 0);
-    transition:
-      display 190ms ease-in allow-discrete,
-      overlay 190ms ease-in allow-discrete,
-      background-color 190ms;
-    /* Equivalent to
-    transition: all 190ms allow-discrete; */
+    transition: background-color 190ms ease-in;
+  }
+
+  @supports (transition-behavior: allow-discrete) {
+    dialog::backdrop {
+      transition:
+        display 190ms ease-in allow-discrete,
+        overlay 190ms ease-in allow-discrete,
+        background-color 190ms ease-in;
+    }
   }
 
   dialog[open]::backdrop {
-    background-color: rgb(120, 120, 120, 0.25);
+    background-color: rgb(120, 120, 120, 0.2);
   }
 
-  /* This starting-style rule cannot be nested inside the above selector
-  because the nesting selector cannot represent pseudo-elements. */
   @starting-style {
     dialog[open]::backdrop {
       background-color: rgb(120, 120, 120, 0);
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    dialog {
+      transition: none !important;
+      transform: none !important;
+    }
+
+    dialog[open] {
+      transform: none !important;
+    }
+
+    dialog::backdrop,
+    dialog[open]::backdrop {
+      transition: none !important;
+    }
+  }
 `;

package/src/styles/blockquote-dialog-styles.css.js

@@ -11,16 +11,12 @@ export const styles = css`
     box-sizing: border-box;
     display: contents;
     background-color: var(--_background-color);
-    margin: auto;
-    max-height: var(--_max-height);
-    max-width: var(--_max-width);
-    min-height: var(--_min-height);
-    min-width: var(--_min-width);
-    position: fixed;
-    height: -moz-fit-content;
-    height: fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
+    margin-block: auto;
+    margin-inline: auto;
+    max-block-size: var(--_max-height);
+    max-inline-size: var(--_max-width);
+    min-block-size: var(--_min-height);
+    min-inline-size: var(--_min-width);
   }
 
   :host([hidden]),
@@ -35,33 +31,35 @@ export const styles = css`
   }
 
   dialog {
+    inset: 0;
     background: inherit;
     border: none;
     border-radius: inherit;
-    flex-direction: column;
-    margin: inherit;
-    height: inherit;
-    width: inherit;
-    max-height: inherit;
-    max-width: inherit;
-    min-height: inherit;
-    min-width: inherit;
+    margin-block: inherit;
+    margin-inline: inherit;
+    max-block-size: inherit;
+    max-inline-size: inherit;
+    min-block-size: inherit;
+    min-inline-size: inherit;
     outline: none;
     overflow: visible;
     padding: 0;
   }
 
-  :host([open]) dialog {
+  dialog[open],
+  .scroller,
+  .content {
     display: flex;
+    flex-direction: column;
   }
 
   .scroller {
     overflow-y: auto;
-    min-height: var(--_min-height);
+    overflow-block: auto;
   }
 
   .content {
-    padding: var(--_padding);
-    min-height: inherit;
+    padding-block: var(--_padding);
+    padding-inline: var(--_padding);
   }
 `;