@nordcode/ui 1.0.7 → 1.0.9

package/CHANGELOG.md

@@ -28,3 +28,20 @@ Be sure to checkout the updated markup for these components in the documentation
 ### Fixes
 
 - Fix fields not compiling
+
+## 1.0.8 (2024-12-27)
+
+### Improvements
+
+- Tweak Dialog Styles
+- Disable scroll when modal dialog is open
+
+### Fixes
+
+- Fix user selection styles
+
+## 1.0.9 (2024-12-27)
+
+### Improvements
+
+- Tweak Dialog Radius and mobile styles

package/out/bundle.css

@@ -451,6 +451,11 @@
   :where(p) {
     text-wrap: pretty;
   }
+
+  :where(html):has(dialog:modal) {
+    scrollbar-gutter: stable;
+    overflow: hidden;
+  }
 }
 
 @layer base {
@@ -647,7 +652,12 @@
     color: var(--color-brand-primary-base);
   }
 
-  :where() {
+  ::selection {
+    background-color: var(--color-brand-primary-base);
+    color: var(--color-surface-base);
+  }
+
+  ::target-text {
     background-color: var(--color-brand-primary-base);
     color: var(--color-surface-base);
   }

package/out/bundle_configless.css

@@ -201,6 +201,11 @@
   :where(p) {
     text-wrap: pretty;
   }
+
+  :where(html):has(dialog:modal) {
+    scrollbar-gutter: stable;
+    overflow: hidden;
+  }
 }
 
 @layer base {
@@ -397,7 +402,12 @@
     color: var(--color-brand-primary-base);
   }
 
-  :where() {
+  ::selection {
+    background-color: var(--color-brand-primary-base);
+    color: var(--color-surface-base);
+  }
+
+  ::target-text {
     background-color: var(--color-brand-primary-base);
     color: var(--color-surface-base);
   }

package/out/complete.css

@@ -451,6 +451,11 @@
   :where(p) {
     text-wrap: pretty;
   }
+
+  :where(html):has(dialog:modal) {
+    scrollbar-gutter: stable;
+    overflow: hidden;
+  }
 }
 
 @layer base {
@@ -647,7 +652,12 @@
     color: var(--color-brand-primary-base);
   }
 
-  :where() {
+  ::selection {
+    background-color: var(--color-brand-primary-base);
+    color: var(--color-surface-base);
+  }
+
+  ::target-text {
     background-color: var(--color-brand-primary-base);
     color: var(--color-surface-base);
   }
@@ -1740,23 +1750,40 @@
   :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, 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);
     background: var(--color-surface-base);
-    block-size: 90dvh;
-    max-inline-size: 28rem;
-    box-shadow: var(--shadow-medium);
-    border-radius: var(--_dialog-radius);
-    margin-block: 5dvh;
+    overflow-clip-margin: 1rem;
+    pointer-events: all;
+    border-radius: 0;
+    max-block-size: 100dvw;
+    margin: auto 0;
     padding: 0;
     display: block;
     position: fixed;
     inset: 0;
+    overflow: clip;
+  }
+
+  @media (min-width: 36rem) {
+    :where(.nc-dialog) {
+      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;
+    }
   }
 
   :where(.nc-dialog)[open] {
@@ -1765,6 +1792,7 @@
 
   :where(.nc-dialog):not([open]) {
     opacity: 0;
+    pointer-events: none;
   }
 
   :where(.nc-dialog)::backdrop {
@@ -1774,20 +1802,30 @@
   }
 
   :where(.nc-dialog) :where(.dialog-container) {
+    block-size: max-content;
+    inline-size: 100%;
+    max-block-size: var(--_dialog-max-block-size);
+    overflow-clip-margin: 1rem;
     grid-template: "header header"
                    "content content" 1fr
                    "footer footer"
                    / 1fr 1fr;
-    block-size: 100%;
-    inline-size: 100%;
     display: grid;
+    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

@@ -201,6 +201,11 @@
   :where(p) {
     text-wrap: pretty;
   }
+
+  :where(html):has(dialog:modal) {
+    scrollbar-gutter: stable;
+    overflow: hidden;
+  }
 }
 
 @layer base {
@@ -397,7 +402,12 @@
     color: var(--color-brand-primary-base);
   }
 
-  :where() {
+  ::selection {
+    background-color: var(--color-brand-primary-base);
+    color: var(--color-surface-base);
+  }
+
+  ::target-text {
     background-color: var(--color-brand-primary-base);
     color: var(--color-surface-base);
   }
@@ -1490,23 +1500,40 @@
   :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, 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);
     background: var(--color-surface-base);
-    block-size: 90dvh;
-    max-inline-size: 28rem;
-    box-shadow: var(--shadow-medium);
-    border-radius: var(--_dialog-radius);
-    margin-block: 5dvh;
+    overflow-clip-margin: 1rem;
+    pointer-events: all;
+    border-radius: 0;
+    max-block-size: 100dvw;
+    margin: auto 0;
     padding: 0;
     display: block;
     position: fixed;
     inset: 0;
+    overflow: clip;
+  }
+
+  @media (min-width: 36rem) {
+    :where(.nc-dialog) {
+      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;
+    }
   }
 
   :where(.nc-dialog)[open] {
@@ -1515,6 +1542,7 @@
 
   :where(.nc-dialog):not([open]) {
     opacity: 0;
+    pointer-events: none;
   }
 
   :where(.nc-dialog)::backdrop {
@@ -1524,20 +1552,30 @@
   }
 
   :where(.nc-dialog) :where(.dialog-container) {
+    block-size: max-content;
+    inline-size: 100%;
+    max-block-size: var(--_dialog-max-block-size);
+    overflow-clip-margin: 1rem;
     grid-template: "header header"
                    "content content" 1fr
                    "footer footer"
                    / 1fr 1fr;
-    block-size: 100%;
-    inline-size: 100%;
     display: grid;
+    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.7",
+  "version": "1.0.9",
   "publishConfig": {
     "access": "public"
   },

package/src/styles/components/dialogs.css

@@ -2,28 +2,40 @@
     :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-transition-duration: var(--dialog-transition-duration,
+                var(--transition-duration-base));
+        --_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;
+        animation: close-dialog var(--_dialog-transition-duration) cubic-bezier(0.7, 0, 1, 1) forwards;
         transition: opacity var(--_dialog-transition-duration) cubic-bezier(0.7, 0, 1, 1);
         position: fixed;
         inset: 0;
         border: var(--border-width-thin) solid var(--color-border-base);
-        inline-size: calc(100dvw - 2 * var(--spacing-base));
-        block-size: 90dvh;
-        max-inline-size: 28rem;
+        inline-size: 100dvw;
+        block-size: max-content;
+        max-inline-size: var(--_dialog-max-inline-size);
+        max-block-size: 100dvw;
         background: var(--color-surface-base);
-        box-shadow: var(--shadow-medium);
-        margin-block: 5dvh;
+        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) {
+            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] {
             animation: open-dialog var(--_dialog-transition-duration) cubic-bezier(0, 0.6, 0.58, 1);
@@ -31,6 +43,7 @@
 
         &:not([open]) {
             opacity: 0;
+            pointer-events: none;
         }
 
         &::backdrop {
@@ -45,7 +58,18 @@
                 "content content" 1fr
                 "footer footer" auto / 1fr 1fr;
             inline-size: 100%;
-            block-size: 100%;
+            block-size: max-content;
+            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) {
@@ -53,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;
@@ -61,7 +84,7 @@
             min-inline-size: calc(2 * var(--spacing-near) + var(--_dialog-close-size));
         }
 
-        :where(.dialog-header) > button[data-closes-dialog] {
+        :where(.dialog-header)>button[data-closes-dialog] {
             grid-area: close;
             inline-size: var(--_dialog-close-size);
             block-size: var(--_dialog-close-size);

package/src/styles/utils/base.css

@@ -196,8 +196,8 @@
         color: var(--color-brand-primary-base);
     }
 
-    :where(::selection,
-        ::target-text) {
+    ::selection,
+    ::target-text {
         background-color: var(--color-brand-primary-base);
         color: var(--color-surface-base);
     }

package/src/styles/utils/reset.css

@@ -125,4 +125,9 @@
     :where(p) {
         text-wrap: pretty;
     }
+
+    :where(html):has(dialog:modal) {
+        scrollbar-gutter: stable;
+        overflow: hidden;
+    }
 }