@nordcode/ui 1.0.6 → 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) {
@@ -2018,7 +2043,7 @@
     --_input-border: var(--input-border, var(--border-width-thin) solid var(--color-border-base));
     --_input-border-radius: var(--input-border-radius, var(--border-radius-medium));
     --_input-box-shadow: var(--input-box-shadow, var(--shadow-inset));
-    --_input-outline: var(--input-outline, var(--border-width-thick) solid var(--color-brand-primary-base));
+    --_input-outline: var(--input-outline, var(--border-width-medium) solid var(--color-brand-primary-base));
     --_input-disabled-filter: var(--input-disabled-filter, contrast(.72) opacity(.72));
     --_input-padding-block: var(--input-padding-block, .125lh);
     --_input-padding-inline: var(--input-padding-inline, 1ch);

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) {
@@ -1768,7 +1793,7 @@
     --_input-border: var(--input-border, var(--border-width-thin) solid var(--color-border-base));
     --_input-border-radius: var(--input-border-radius, var(--border-radius-medium));
     --_input-box-shadow: var(--input-box-shadow, var(--shadow-inset));
-    --_input-outline: var(--input-outline, var(--border-width-thick) solid var(--color-brand-primary-base));
+    --_input-outline: var(--input-outline, var(--border-width-medium) solid var(--color-brand-primary-base));
     --_input-disabled-filter: var(--input-disabled-filter, contrast(.72) opacity(.72));
     --_input-padding-block: var(--input-padding-block, .125lh);
     --_input-padding-inline: var(--input-padding-inline, 1ch);

package/package.json

@@ -12,7 +12,7 @@
     "type": "git",
     "url": "https://github.com/nordcode-agency/nordcode/tree/main/packages/ui"
   },
-  "version": "1.0.6",
+  "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/components/inputs/base.css

@@ -11,55 +11,49 @@
         align-items: center;
     }
 
-    :where(
-            input[type="text"],
-            input[type="email"],
-            input[type="password"],
-            input[type="number"],
-            input[type="url"],
-            input[type="search"],
-            input[type="date"],
-            input[type="month"],
-            input[type="week"],
-            input[type="text"],
-            input[type="datetime"],
-            input[type="datetime-local"],
-            input[type="time"],
-            input[type="tel"],
-            input[type="color"],
-            input[type="file"],
-            input[type="checkbox"],
-            input[type="radio"],
-            textarea,
-            select,
-            .nc-input,
-            .nc-select,
-            .nc-textarea,
-            .nc-input-checkbox,
-            .nc-input-radio,
-            .nc-input-label,
-            .nc-input-color,
-            .nc-input-field,
-            .nc-input-error,
-            .nc-checkbox-wrapper,
-            .nc-input-switch,
-            .nc-radio-field,
-            .nc-checkbox-field
-        ) {
+    :where(input[type="text"],
+        input[type="email"],
+        input[type="password"],
+        input[type="number"],
+        input[type="url"],
+        input[type="search"],
+        input[type="date"],
+        input[type="month"],
+        input[type="week"],
+        input[type="text"],
+        input[type="datetime"],
+        input[type="datetime-local"],
+        input[type="time"],
+        input[type="tel"],
+        input[type="color"],
+        input[type="file"],
+        input[type="checkbox"],
+        input[type="radio"],
+        textarea,
+        select,
+        .nc-input,
+        .nc-select,
+        .nc-textarea,
+        .nc-input-checkbox,
+        .nc-input-radio,
+        .nc-input-label,
+        .nc-input-color,
+        .nc-input-field,
+        .nc-input-error,
+        .nc-checkbox-wrapper,
+        .nc-input-switch,
+        .nc-radio-field,
+        .nc-checkbox-field) {
         --_input-background: var(--input-background, var(--color-surface-subtle));
         --_input-background-active: var(--input-background-active, var(--color-surface-base));
         --_input-color: var(--input-color, var(--color-text-base));
-        --_input-border: var(
-            --input-border,
-            var(--border-width-thin) solid var(--color-border-base)
-        );
+        --_input-border: var(--input-border,
+                var(--border-width-thin) solid var(--color-border-base));
         --_input-border-radius: var(--input-border-radius, var(--border-radius-medium));
 
         --_input-box-shadow: var(--input-box-shadow, var(--shadow-inset));
-        --_input-outline: var(
-            --input-outline,
-            var(--border-width-thick) solid var(--color-brand-primary-base)
-        );
+        --_input-outline: var(--input-outline,
+                var(--border-width-medium) solid var(--color-brand-primary-base));
         --_input-disabled-filter: var(--input-disabled-filter, contrast(0.72) opacity(0.72));
 
         --_input-padding-block: var(--input-padding-block, 0.125lh);
@@ -67,27 +61,25 @@
         --_input-hover-background: var(--input-hover-background, var(--color-brand-primary-hover));
     }
 
-    :where(
-            input[type="text"],
-            input[type="email"],
-            input[type="password"],
-            input[type="number"],
-            input[type="url"],
-            input[type="search"],
-            input[type="date"],
-            input[type="month"],
-            input[type="week"],
-            input[type="text"],
-            input[type="datetime"],
-            input[type="datetime-local"],
-            input[type="time"],
-            input[type="tel"],
-            input[type="color"],
-            input[type="file"],
-            textarea,
-            select,
-            .nc-input
-        ) {
+    :where(input[type="text"],
+        input[type="email"],
+        input[type="password"],
+        input[type="number"],
+        input[type="url"],
+        input[type="search"],
+        input[type="date"],
+        input[type="month"],
+        input[type="week"],
+        input[type="text"],
+        input[type="datetime"],
+        input[type="datetime-local"],
+        input[type="time"],
+        input[type="tel"],
+        input[type="color"],
+        input[type="file"],
+        textarea,
+        select,
+        .nc-input) {
         font: inherit;
         letter-spacing: inherit;
         word-spacing: inherit;
@@ -144,13 +136,11 @@
         padding-block: var(--_input-padding-block);
     }
 
-    :where(
-            input[type="checkbox"]:not([class]),
-            input[type="radio"]:not([class]),
-            .nc-input-checkbox,
-            .nc-input-radio,
-            .nc-input-switch
-        ) {
+    :where(input[type="checkbox"]:not([class]),
+        input[type="radio"]:not([class]),
+        .nc-input-checkbox,
+        .nc-input-radio,
+        .nc-input-switch) {
         inline-size: 1lh;
         block-size: 1lh;
         margin: 0;
@@ -233,7 +223,7 @@
     }
 
     :where(input[type="range"], .nc-input-range) {
-        & > .nc-hint {
+        &>.nc-hint {
             margin-inline-start: auto;
         }
 

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;
+    }
 }