@nordcode/ui 1.0.8 → 1.0.9

package/CHANGELOG.md

@@ -39,3 +39,9 @@ Be sure to checkout the updated markup for these components in the documentation
 ### Fixes
 
 - Fix user selection styles
+
+## 1.0.9 (2024-12-27)
+
+### Improvements
+
+- Tweak Dialog Radius and mobile styles

package/out/complete.css

@@ -1750,22 +1750,24 @@
   :where(.nc-dialog) {
     --_dialog-radius: var(--dialog-radius, var(--border-radius-medium));
     --_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(--button-height-base));
     --_dialog-transition-duration: var(--dialog-transition-duration, var(--transition-duration-base));
-    --_dialog-max-block-size: var(--dialog-max-block-size, 100dvh);
+    --_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) cubic-bezier(.7, 0, 1, 1) forwards;
     transition: opacity var(--_dialog-transition-duration) cubic-bezier(.7, 0, 1, 1);
     border: var(--border-width-thin) solid var(--color-border-base);
-    inline-size: calc(100dvw - 2 * var(--spacing-base));
     block-size: max-content;
+    inline-size: 100dvw;
     max-inline-size: var(--_dialog-max-inline-size);
-    max-block-size: var(--_dialog-max-block-size);
     background: var(--color-surface-base);
-    box-shadow: var(--shadow-medium);
-    border-radius: var(--_dialog-radius);
     overflow-clip-margin: 1rem;
+    pointer-events: all;
+    border-radius: 0;
+    max-block-size: 100dvw;
     margin: auto 0;
     padding: 0;
     display: block;
@@ -1776,7 +1778,10 @@
 
   @media (min-width: 36rem) {
     :where(.nc-dialog) {
-      --dialog-max-block-size: 90dvh;
+      border-radius: var(--_dialog-radius);
+      inline-size: calc(100dvw - 2 * var(--_dialog-layout-padding));
+      max-block-size: var(--_dialog-max-block-size);
+      box-shadow: var(--shadow-medium);
       margin-inline: auto;
     }
   }
@@ -1787,6 +1792,7 @@
 
   :where(.nc-dialog):not([open]) {
     opacity: 0;
+    pointer-events: none;
   }
 
   :where(.nc-dialog)::backdrop {
@@ -1808,11 +1814,18 @@
     overflow: clip;
   }
 
+  :where(.nc-dialog) :where(.dialog-container) > :first-child {
+    border-radius: var(--_dialog-radius) var(--_dialog-radius) 0 0;
+  }
+
+  :where(.nc-dialog) :where(.dialog-container) > :last-child {
+    border-radius: 0 0 var(--_dialog-radius) var(--_dialog-radius);
+  }
+
   :where(.nc-dialog) :where(.dialog-header) {
     border-block-end: var(--border-width-thin) solid var(--color-border-muted);
     background-color: var(--color-surface-subtle);
     padding-inline: var(--_dialog-padding-inline);
-    border-radius: var(--_dialog-radius) var(--_dialog-radius) 0 0;
     grid-area: header;
     grid-template: "title close" / 1fr var(--_dialog-close-size);
     padding-block: var(--spacing-near);

package/out/complete_configless.css

@@ -1500,22 +1500,24 @@
   :where(.nc-dialog) {
     --_dialog-radius: var(--dialog-radius, var(--border-radius-medium));
     --_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(--button-height-base));
     --_dialog-transition-duration: var(--dialog-transition-duration, var(--transition-duration-base));
-    --_dialog-max-block-size: var(--dialog-max-block-size, 100dvh);
+    --_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) cubic-bezier(.7, 0, 1, 1) forwards;
     transition: opacity var(--_dialog-transition-duration) cubic-bezier(.7, 0, 1, 1);
     border: var(--border-width-thin) solid var(--color-border-base);
-    inline-size: calc(100dvw - 2 * var(--spacing-base));
     block-size: max-content;
+    inline-size: 100dvw;
     max-inline-size: var(--_dialog-max-inline-size);
-    max-block-size: var(--_dialog-max-block-size);
     background: var(--color-surface-base);
-    box-shadow: var(--shadow-medium);
-    border-radius: var(--_dialog-radius);
     overflow-clip-margin: 1rem;
+    pointer-events: all;
+    border-radius: 0;
+    max-block-size: 100dvw;
     margin: auto 0;
     padding: 0;
     display: block;
@@ -1526,7 +1528,10 @@
 
   @media (min-width: 36rem) {
     :where(.nc-dialog) {
-      --dialog-max-block-size: 90dvh;
+      border-radius: var(--_dialog-radius);
+      inline-size: calc(100dvw - 2 * var(--_dialog-layout-padding));
+      max-block-size: var(--_dialog-max-block-size);
+      box-shadow: var(--shadow-medium);
       margin-inline: auto;
     }
   }
@@ -1537,6 +1542,7 @@
 
   :where(.nc-dialog):not([open]) {
     opacity: 0;
+    pointer-events: none;
   }
 
   :where(.nc-dialog)::backdrop {
@@ -1558,11 +1564,18 @@
     overflow: clip;
   }
 
+  :where(.nc-dialog) :where(.dialog-container) > :first-child {
+    border-radius: var(--_dialog-radius) var(--_dialog-radius) 0 0;
+  }
+
+  :where(.nc-dialog) :where(.dialog-container) > :last-child {
+    border-radius: 0 0 var(--_dialog-radius) var(--_dialog-radius);
+  }
+
   :where(.nc-dialog) :where(.dialog-header) {
     border-block-end: var(--border-width-thin) solid var(--color-border-muted);
     background-color: var(--color-surface-subtle);
     padding-inline: var(--_dialog-padding-inline);
-    border-radius: var(--_dialog-radius) var(--_dialog-radius) 0 0;
     grid-area: header;
     grid-template: "title close" / 1fr var(--_dialog-close-size);
     padding-block: var(--spacing-near);

package/package.json

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

package/src/styles/components/dialogs.css

@@ -2,12 +2,14 @@
     :where(.nc-dialog) {
         --_dialog-radius: var(--dialog-radius, var(--border-radius-medium));
         --_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(--button-height-base));
         --_dialog-transition-duration: var(--dialog-transition-duration,
                 var(--transition-duration-base));
-        --_dialog-max-block-size: var(--dialog-max-block-size, 100dvh);
+        --_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) cubic-bezier(0.7, 0, 1, 1) forwards;
@@ -15,21 +17,24 @@
         position: fixed;
         inset: 0;
         border: var(--border-width-thin) solid var(--color-border-base);
-        inline-size: calc(100dvw - 2 * var(--spacing-base));
+        inline-size: 100dvw;
         block-size: max-content;
         max-inline-size: var(--_dialog-max-inline-size);
-        max-block-size: var(--_dialog-max-block-size);
+        max-block-size: 100dvw;
         background: var(--color-surface-base);
-        box-shadow: var(--shadow-medium);
         margin: auto 0;
         padding: 0;
-        border-radius: var(--_dialog-radius);
+        border-radius: 0;
         overflow: clip;
         overflow-clip-margin: 1rem;
+        pointer-events: all;
 
         @media (min-width: 36rem) {
-            --dialog-max-block-size: 90dvh;
+            border-radius: var(--_dialog-radius);
+            inline-size: calc(100dvw - 2 * var(--_dialog-layout-padding));
+            max-block-size: var(--_dialog-max-block-size);
             margin-inline: auto;
+            box-shadow: var(--shadow-medium);
         }
 
         &[open] {
@@ -38,6 +43,7 @@
 
         &:not([open]) {
             opacity: 0;
+            pointer-events: none;
         }
 
         &::backdrop {
@@ -56,6 +62,14 @@
             max-block-size: var(--_dialog-max-block-size);
             overflow: clip;
             overflow-clip-margin: 1rem;
+
+            &>*:first-child {
+                border-radius: var(--_dialog-radius) var(--_dialog-radius) 0 0;
+            }
+
+            &>*:last-child {
+                border-radius: 0 0 var(--_dialog-radius) var(--_dialog-radius);
+            }
         }
 
         :where(.dialog-header) {
@@ -63,7 +77,6 @@
             border-block-end: var(--border-width-thin) solid var(--color-border-muted);
             background-color: var(--color-surface-subtle);
             padding-inline: var(--_dialog-padding-inline);
-            border-radius: var(--_dialog-radius) var(--_dialog-radius) 0 0;
             display: grid;
             grid-template: "title close" / 1fr var(--_dialog-close-size);
             align-items: flex-start;