@nordcode/ui 2.1.7 → 2.1.9

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 2.1.9 (2026-01-02)
+
+### fixes
+
+- fix dialog styles
+
+## 2.1.8 (2026-01-02)
+
+### features
+
+- use starting style & new animation for dialogs
+
 ## 2.1.7 (2025-12-18)
 
 ### features

package/out/complete.css

@@ -1817,7 +1817,7 @@
 
   :where(.nc-clickable-card) {
     cursor: pointer;
-    transition: scale var(--transition-duration-quick-2) var(--ease-2);
+    transition: scale var(--transition-duration-quick-2) var(--ease-out-2);
     position: relative;
   }
 
@@ -1852,49 +1852,67 @@
 @layer components.dialogs {
   :where(.nc-dialog) {
     --_dialog-padding-inline: var(--dialog-padding-inline, var(--spacing-base));
-    --_dialog-layout-padding: var(--layout-padding, var(--spacing-base));
     --_dialog-close-size: var(--dialog-close-size, var(--control-height-base));
-    --_dialog-transition-duration: var(--dialog-transition-duration, var(--transition-duration-moderate-2));
-    --_dialog-max-block-size: var(--dialog-max-block-size, 90dvh);
-    --_dialog-max-inline-size: var(--dialog-max-inline-size, 28rem);
-    --_dialog-radius: 0;
-    z-index: var(--layer-important);
-    animation: close-dialog var(--_dialog-transition-duration) var(--easing-exit) forwards;
-    transition: opacity var(--_dialog-transition-duration) var(--easing-exit);
     border: var(--border-width-thin) solid var(--color-border-base);
     block-size: max-content;
     inline-size: 100dvw;
-    max-inline-size: var(--_dialog-max-inline-size);
+    max-inline-size: var(--dialog-max-inline-size, 28rem);
     background: var(--color-surface-base);
-    border-radius: var(--_dialog-radius);
-    overflow-clip-margin: var(--control-spacing-far, 1em);
-    pointer-events: all;
+    border-radius: var(--dialog-radius, var(--border-radius-medium));
     max-block-size: 100dvh;
-    margin: auto 0;
     padding: 0;
-    display: block;
-    position: fixed;
-    inset: 0;
-    overflow: clip;
+    overflow: hidden;
   }
 
   @media (width >= 36rem) {
     :where(.nc-dialog) {
-      --_dialog-radius: var(--dialog-radius, var(--border-radius-medium));
-      inline-size: calc(100dvw - 2 * var(--_dialog-layout-padding));
-      max-block-size: var(--_dialog-max-block-size);
+      inline-size: calc(100dvw - 2 * var(--layout-padding, var(--spacing-base)));
+      max-block-size: var(--dialog-max-block-size, 90dvh);
       box-shadow: var(--shadow-medium);
       margin-inline: auto;
     }
   }
 
-  :where(.nc-dialog)[open] {
-    animation: open-dialog var(--_dialog-transition-duration) var(--easing-entry);
+  :where(.nc-dialog) {
+    --transform-in: perspective(80px) rotateX(.5deg) scale(.9);
+    --transform-out: perspective(80px) rotateX(.5deg) scale(.95);
+    --transition-time-in: var(--transition-duration-gentle-1);
+    --transition-time-out: var(--transition-duration-moderate-1);
+    transform: var(--transform-in);
   }
 
-  :where(.nc-dialog):not([open]) {
+  :where(.nc-dialog), :where(.nc-dialog)::backdrop {
+    transition: display var(--transition-time-out) allow-discrete, overlay var(--transition-time-out) allow-discrete, transform var(--transition-time-out) var(--ease-in-out-2), opacity var(--transition-duration-moderate-1) var(--ease-in-out-2);
     opacity: 0;
-    pointer-events: none;
+  }
+
+  :where(.nc-dialog) {
+    transform: var(--transform-out);
+  }
+
+  :where(.nc-dialog)[open] {
+    opacity: 1;
+    transform: perspective(80px)rotateX(0)scale(1);
+  }
+
+  :where(.nc-dialog)[open], :where(.nc-dialog)[open]::backdrop {
+    transition: display var(--transition-time-in) allow-discrete, overlay var(--transition-time-in) allow-discrete, transform var(--transition-time-in) var(--ease-in-out-2), opacity var(--transition-time-in) var(--ease-in-out-2);
+  }
+
+  :where(.nc-dialog)[open]::backdrop {
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    opacity: 1;
+  }
+
+  @starting-style {
+    :where(.nc-dialog)[open], :where(.nc-dialog)[open]::backdrop {
+      opacity: 0;
+    }
+
+    :where(.nc-dialog)[open] {
+      transform: var(--transform-in);
+    }
   }
 
   :where(.nc-dialog)::backdrop {
@@ -1906,14 +1924,12 @@
   :where(.nc-dialog) :where(.dialog-container) {
     block-size: max-content;
     inline-size: 100%;
-    max-block-size: var(--_dialog-max-block-size);
-    overflow-clip-margin: var(--control-spacing-far, 1em);
+    max-block-size: inherit;
     grid-template: "header header"
                    "content content" 1fr
                    "footer footer"
                    / 1fr 1fr;
     display: grid;
-    overflow: clip;
   }
 
   :where(.nc-dialog) :where(.dialog-container) > :first-child {
@@ -1967,26 +1983,6 @@
     align-items: flex-start;
     display: flex;
   }
-
-  @keyframes open-dialog {
-    from {
-      transform: translate(0%, 100dvh)rotate(0);
-    }
-
-    to {
-      transform: translate(0)rotate(0);
-    }
-  }
-
-  @keyframes close-dialog {
-    from {
-      transform: translate(0)rotate(0);
-    }
-
-    to {
-      transform: translate(0%, 100dvh)rotate(10deg);
-    }
-  }
 }
 
 @layer components.forms {

package/out/complete_configless.css

@@ -1601,7 +1601,7 @@
 
   :where(.nc-clickable-card) {
     cursor: pointer;
-    transition: scale var(--transition-duration-quick-2) var(--ease-2);
+    transition: scale var(--transition-duration-quick-2) var(--ease-out-2);
     position: relative;
   }
 
@@ -1636,49 +1636,67 @@
 @layer components.dialogs {
   :where(.nc-dialog) {
     --_dialog-padding-inline: var(--dialog-padding-inline, var(--spacing-base));
-    --_dialog-layout-padding: var(--layout-padding, var(--spacing-base));
     --_dialog-close-size: var(--dialog-close-size, var(--control-height-base));
-    --_dialog-transition-duration: var(--dialog-transition-duration, var(--transition-duration-moderate-2));
-    --_dialog-max-block-size: var(--dialog-max-block-size, 90dvh);
-    --_dialog-max-inline-size: var(--dialog-max-inline-size, 28rem);
-    --_dialog-radius: 0;
-    z-index: var(--layer-important);
-    animation: close-dialog var(--_dialog-transition-duration) var(--easing-exit) forwards;
-    transition: opacity var(--_dialog-transition-duration) var(--easing-exit);
     border: var(--border-width-thin) solid var(--color-border-base);
     block-size: max-content;
     inline-size: 100dvw;
-    max-inline-size: var(--_dialog-max-inline-size);
+    max-inline-size: var(--dialog-max-inline-size, 28rem);
     background: var(--color-surface-base);
-    border-radius: var(--_dialog-radius);
-    overflow-clip-margin: var(--control-spacing-far, 1em);
-    pointer-events: all;
+    border-radius: var(--dialog-radius, var(--border-radius-medium));
     max-block-size: 100dvh;
-    margin: auto 0;
     padding: 0;
-    display: block;
-    position: fixed;
-    inset: 0;
-    overflow: clip;
+    overflow: hidden;
   }
 
   @media (width >= 36rem) {
     :where(.nc-dialog) {
-      --_dialog-radius: var(--dialog-radius, var(--border-radius-medium));
-      inline-size: calc(100dvw - 2 * var(--_dialog-layout-padding));
-      max-block-size: var(--_dialog-max-block-size);
+      inline-size: calc(100dvw - 2 * var(--layout-padding, var(--spacing-base)));
+      max-block-size: var(--dialog-max-block-size, 90dvh);
       box-shadow: var(--shadow-medium);
       margin-inline: auto;
     }
   }
 
-  :where(.nc-dialog)[open] {
-    animation: open-dialog var(--_dialog-transition-duration) var(--easing-entry);
+  :where(.nc-dialog) {
+    --transform-in: perspective(80px) rotateX(.5deg) scale(.9);
+    --transform-out: perspective(80px) rotateX(.5deg) scale(.95);
+    --transition-time-in: var(--transition-duration-gentle-1);
+    --transition-time-out: var(--transition-duration-moderate-1);
+    transform: var(--transform-in);
   }
 
-  :where(.nc-dialog):not([open]) {
+  :where(.nc-dialog), :where(.nc-dialog)::backdrop {
+    transition: display var(--transition-time-out) allow-discrete, overlay var(--transition-time-out) allow-discrete, transform var(--transition-time-out) var(--ease-in-out-2), opacity var(--transition-duration-moderate-1) var(--ease-in-out-2);
     opacity: 0;
-    pointer-events: none;
+  }
+
+  :where(.nc-dialog) {
+    transform: var(--transform-out);
+  }
+
+  :where(.nc-dialog)[open] {
+    opacity: 1;
+    transform: perspective(80px)rotateX(0)scale(1);
+  }
+
+  :where(.nc-dialog)[open], :where(.nc-dialog)[open]::backdrop {
+    transition: display var(--transition-time-in) allow-discrete, overlay var(--transition-time-in) allow-discrete, transform var(--transition-time-in) var(--ease-in-out-2), opacity var(--transition-time-in) var(--ease-in-out-2);
+  }
+
+  :where(.nc-dialog)[open]::backdrop {
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    opacity: 1;
+  }
+
+  @starting-style {
+    :where(.nc-dialog)[open], :where(.nc-dialog)[open]::backdrop {
+      opacity: 0;
+    }
+
+    :where(.nc-dialog)[open] {
+      transform: var(--transform-in);
+    }
   }
 
   :where(.nc-dialog)::backdrop {
@@ -1690,14 +1708,12 @@
   :where(.nc-dialog) :where(.dialog-container) {
     block-size: max-content;
     inline-size: 100%;
-    max-block-size: var(--_dialog-max-block-size);
-    overflow-clip-margin: var(--control-spacing-far, 1em);
+    max-block-size: inherit;
     grid-template: "header header"
                    "content content" 1fr
                    "footer footer"
                    / 1fr 1fr;
     display: grid;
-    overflow: clip;
   }
 
   :where(.nc-dialog) :where(.dialog-container) > :first-child {
@@ -1751,26 +1767,6 @@
     align-items: flex-start;
     display: flex;
   }
-
-  @keyframes open-dialog {
-    from {
-      transform: translate(0%, 100dvh)rotate(0);
-    }
-
-    to {
-      transform: translate(0)rotate(0);
-    }
-  }
-
-  @keyframes close-dialog {
-    from {
-      transform: translate(0)rotate(0);
-    }
-
-    to {
-      transform: translate(0%, 100dvh)rotate(10deg);
-    }
-  }
 }
 
 @layer components.forms {

package/package.json

@@ -12,7 +12,7 @@
     "type": "git",
     "url": "https://github.com/nordcode-agency/nordcode/tree/main/packages/ui"
   },
-  "version": "2.1.7",
+  "version": "2.1.9",
   "publishConfig": {
     "access": "public"
   },

package/src/styles/components/card.css

@@ -56,7 +56,7 @@
     :where(.nc-clickable-card) {
         cursor: pointer;
         position: relative;
-        transition: scale var(--transition-duration-quick-2) var(--ease-2);
+        transition: scale var(--transition-duration-quick-2) var(--ease-out-2);
 
         &:focus-within,
         &:hover {

package/src/styles/components/dialogs.css

@@ -1,50 +1,79 @@
 @layer components.dialogs {
     :where(.nc-dialog) {
         --_dialog-padding-inline: var(--dialog-padding-inline, var(--spacing-base));
-        --_dialog-layout-padding: var(--layout-padding, var(--spacing-base));
         --_dialog-close-size: var(--dialog-close-size, var(--control-height-base));
-        --_dialog-transition-duration: var(
-            --dialog-transition-duration,
-            var(--transition-duration-moderate-2)
-        );
-        --_dialog-max-block-size: var(--dialog-max-block-size, 90dvh);
-        --_dialog-max-inline-size: var(--dialog-max-inline-size, 28rem);
-
-        --_dialog-radius: 0;
-        display: block;
-        z-index: var(--layer-important);
-        animation: close-dialog var(--_dialog-transition-duration) var(--easing-exit) forwards;
-        transition: opacity var(--_dialog-transition-duration) var(--easing-exit);
-        position: fixed;
-        inset: 0;
+
         border: var(--border-width-thin) solid var(--color-border-base);
         inline-size: 100dvw;
         block-size: max-content;
-        max-inline-size: var(--_dialog-max-inline-size);
+        max-inline-size: var(--dialog-max-inline-size, 28rem);
         max-block-size: 100dvh;
         background: var(--color-surface-base);
-        margin: auto 0;
         padding: 0;
-        border-radius: var(--_dialog-radius);
-        overflow: clip;
-        overflow-clip-margin: var(--control-spacing-far, 1em);
-        pointer-events: all;
+        overflow: hidden;
+        border-radius: var(--dialog-radius, var(--border-radius-medium));
 
         @media (min-width: 36rem) {
-            --_dialog-radius: var(--dialog-radius, var(--border-radius-medium));
-            inline-size: calc(100dvw - 2 * var(--_dialog-layout-padding));
-            max-block-size: var(--_dialog-max-block-size);
+            inline-size: calc(100dvw - 2 * var(--layout-padding, var(--spacing-base)));
+            max-block-size: var(--dialog-max-block-size, 90dvh);
             margin-inline: auto;
             box-shadow: var(--shadow-medium);
         }
 
+        /* Credits to Adam Argyle. Modified from: https://nerdy.dev/notebook/dialog-starter.html */
+
+        /* Exit Stage To */
+        --transform-in: perspective(80px) rotateX(0.5deg) scale(0.9);
+        --transform-out: perspective(80px) rotateX(0.5deg) scale(0.95);
+        --transition-time-in: var(--transition-duration-gentle-1);
+        --transition-time-out: var(--transition-duration-moderate-1);
+
+        transform: var(--transform-in);
+
+        &, &::backdrop {
+            transition:
+                display var(--transition-time-out) allow-discrete,
+                overlay var(--transition-time-out) allow-discrete,
+                transform var(--transition-time-out) var(--ease-in-out-2),
+                opacity var(--transition-duration-moderate-1) var(--ease-in-out-2);
+
+            /* Exit Stage To */
+            opacity: 0;
+        }
+
+        & {
+            transform: var(--transform-out);
+        }
+
+        /* On Stage */
         &[open] {
-            animation: open-dialog var(--_dialog-transition-duration) var(--easing-entry);
+            opacity: 1;
+            transform: perspective(80px) rotateX(0deg) scale(1);
+
+            &, &::backdrop {
+                transition:
+                    display var(--transition-time-in) allow-discrete,
+                    overlay var(--transition-time-in) allow-discrete,
+                    transform var(--transition-time-in) var(--ease-in-out-2),
+                    opacity var(--transition-time-in) var(--ease-in-out-2);
+            }
+
+            &::backdrop {
+                backdrop-filter: blur(20px);
+                opacity: 1;
+            }
         }
 
-        &:not([open]) {
-            opacity: 0;
-            pointer-events: none;
+        /* Enter Stage From */
+        @starting-style {
+            &[open],
+            &[open]::backdrop {
+                opacity: 0;
+            }
+
+            &[open] {
+                transform: var(--transform-in);
+            }
         }
 
         &::backdrop {
@@ -60,9 +89,7 @@
                 "footer footer" auto / 1fr 1fr;
             inline-size: 100%;
             block-size: max-content;
-            max-block-size: var(--_dialog-max-block-size);
-            overflow: clip;
-            overflow-clip-margin: var(--control-spacing-far, 1em);
+            max-block-size: inherit;
 
             & > *:first-child {
                 border-radius: var(--_dialog-radius) var(--_dialog-radius) 0 0;
@@ -117,24 +144,4 @@
             background-color: var(--color-surface-subtle);
         }
     }
-
-    @keyframes open-dialog {
-        from {
-            transform: translate(0%, 100dvh) rotate(0deg);
-        }
-
-        to {
-            transform: translate(0dvh, 0%) rotate(0deg);
-        }
-    }
-
-    @keyframes close-dialog {
-        from {
-            transform: translate(0dvh, 0%) rotate(0deg);
-        }
-
-        to {
-            transform: translate(0%, 100dvh) rotate(10deg);
-        }
-    }
 }