@nordcode/ui 1.0.7 → 1.0.8

package/CHANGELOG.md

@@ -28,3 +28,14 @@ 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

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);
   }
@@ -1742,21 +1752,33 @@
     --_dialog-padding-inline: var(--dialog-padding-inline, 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-inline-size: var(--dialog-max-inline-size, 28rem);
     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;
+    max-inline-size: var(--_dialog-max-inline-size);
+    max-block-size: var(--_dialog-max-block-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;
+    margin: auto 0;
     padding: 0;
     display: block;
     position: fixed;
     inset: 0;
+    overflow: clip;
+  }
+
+  @media (min-width: 36rem) {
+    :where(.nc-dialog) {
+      --dialog-max-block-size: 90dvh;
+      margin-inline: auto;
+    }
   }
 
   :where(.nc-dialog)[open] {
@@ -1774,13 +1796,16 @@
   }
 
   :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-header) {

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);
   }
@@ -1492,21 +1502,33 @@
     --_dialog-padding-inline: var(--dialog-padding-inline, 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-inline-size: var(--dialog-max-inline-size, 28rem);
     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;
+    max-inline-size: var(--_dialog-max-inline-size);
+    max-block-size: var(--_dialog-max-block-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;
+    margin: auto 0;
     padding: 0;
     display: block;
     position: fixed;
     inset: 0;
+    overflow: clip;
+  }
+
+  @media (min-width: 36rem) {
+    :where(.nc-dialog) {
+      --dialog-max-block-size: 90dvh;
+      margin-inline: auto;
+    }
   }
 
   :where(.nc-dialog)[open] {
@@ -1524,13 +1546,16 @@
   }
 
   :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-header) {

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.8",
   "publishConfig": {
     "access": "public"
   },

package/src/styles/components/dialogs.css

@@ -3,27 +3,34 @@
         --_dialog-radius: var(--dialog-radius, var(--border-radius-medium));
         --_dialog-padding-inline: var(--dialog-padding-inline, 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, 100dvh);
+        --_dialog-max-inline-size: var(--dialog-max-inline-size, 28rem);
 
         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;
+        block-size: max-content;
+        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);
-        margin-block: 5dvh;
+        margin: auto 0;
         padding: 0;
         border-radius: var(--_dialog-radius);
+        overflow: clip;
+        overflow-clip-margin: 1rem;
+
+        @media (min-width: 36rem) {
+            --dialog-max-block-size: 90dvh;
+            margin-inline: auto;
+        }
 
         &[open] {
             animation: open-dialog var(--_dialog-transition-duration) cubic-bezier(0, 0.6, 0.58, 1);
@@ -45,7 +52,10 @@
                 "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;
         }
 
         :where(.dialog-header) {
@@ -61,7 +71,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;
+    }
 }