@nordcode/ui 1.0.9 → 1.0.11

package/CHANGELOG.md

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

package/out/complete.css

@@ -1748,14 +1748,13 @@
 
 @layer components.dialogs {
   :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;
+    --_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);
@@ -1764,9 +1763,9 @@
     inline-size: 100dvw;
     max-inline-size: var(--_dialog-max-inline-size);
     background: var(--color-surface-base);
+    border-radius: var(--_dialog-radius);
     overflow-clip-margin: 1rem;
     pointer-events: all;
-    border-radius: 0;
     max-block-size: 100dvw;
     margin: auto 0;
     padding: 0;
@@ -1778,7 +1777,7 @@
 
   @media (min-width: 36rem) {
     :where(.nc-dialog) {
-      border-radius: var(--_dialog-radius);
+      --_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);
       box-shadow: var(--shadow-medium);

package/out/complete_configless.css

@@ -1498,14 +1498,13 @@
 
 @layer components.dialogs {
   :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;
+    --_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);
@@ -1514,9 +1513,9 @@
     inline-size: 100dvw;
     max-inline-size: var(--_dialog-max-inline-size);
     background: var(--color-surface-base);
+    border-radius: var(--_dialog-radius);
     overflow-clip-margin: 1rem;
     pointer-events: all;
-    border-radius: 0;
     max-block-size: 100dvw;
     margin: auto 0;
     padding: 0;
@@ -1528,7 +1527,7 @@
 
   @media (min-width: 36rem) {
     :where(.nc-dialog) {
-      border-radius: var(--_dialog-radius);
+      --_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);
       box-shadow: var(--shadow-medium);

package/package.json

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

package/src/styles/components/dialogs.css

@@ -1,6 +1,5 @@
 @layer components.dialogs {
     :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));
@@ -9,7 +8,7 @@
         --_dialog-max-block-size: var(--dialog-max-block-size, 90dvh);
         --_dialog-max-inline-size: var(--dialog-max-inline-size, 28rem);
 
-        --dialog-radius: 0;
+        --_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;
@@ -20,17 +19,17 @@
         inline-size: 100dvw;
         block-size: max-content;
         max-inline-size: var(--_dialog-max-inline-size);
-        max-block-size: 100dvw;
+        max-block-size: 100dvh;
         background: var(--color-surface-base);
         margin: auto 0;
         padding: 0;
-        border-radius: 0;
+        border-radius: var(--_dialog-radius);
         overflow: clip;
         overflow-clip-margin: 1rem;
         pointer-events: all;
 
         @media (min-width: 36rem) {
-            border-radius: var(--_dialog-radius);
+            --_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);
             margin-inline: auto;

package/src/styles/utils/reset.css

@@ -85,9 +85,9 @@
     }
 
     :where(figure) {
-        display: grid;
+        display: flex;
+        flex-direction: column;
         gap: 0;
-        place-items: center;
     }
 
     :where(a[href],