closes Yohn/PicoCSS/pull/1 and Yohn/PicoCSS/pull/11

.gitignore

@@ -30,3 +30,4 @@ Thumbs.db
 
 # Pico
 .pico
+package-lock.json

package.json

@@ -49,20 +49,20 @@
     "done": "echo '\\033[32m[@picocss/pico] ✨ Done\\033[0m'"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.18",
+    "autoprefixer": "^10.4",
-    "caniuse-lite": "1.0.30001591",
+    "caniuse-lite": "^1.0",
-    "clean-css-cli": "^5.6.3",
+    "clean-css-cli": "^5.6",
-    "css-declaration-sorter": "^7.1.1",
+    "css-declaration-sorter": "^7.1",
-    "nodemon": "^3.1.0",
+    "nodemon": "^3.1",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all": "^4.1",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4",
-    "postcss-cli": "^11.0.0",
+    "postcss-cli": "^11.0",
-    "postcss-scss": "^4.0.9",
+    "postcss-scss": "^4.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.2",
-    "sass": "^1.71.1"
+    "sass": "^1.71"
   },
   "engines": {
-    "node": ">=18.19.0"
+    "node": ">=20"
   },
   "browserslist": [
     "defaults"

scss/components/_modal.scss

@@ -11,7 +11,7 @@
   }
 
   #{$parent-selector} dialog {
-    display: flex;
+    display: grid;
     z-index: 999;
     position: fixed;
     top: 0;
@@ -24,7 +24,7 @@
     min-width: 100%;
     height: inherit;
     min-height: 100%;
-    padding: 0;
+    padding: var(#{$css-var-prefix}spacing);
     border: 0;
     backdrop-filter: var(#{$css-var-prefix}modal-overlay-backdrop-filter);
     background-color: var(#{$css-var-prefix}modal-overlay-background-color);
@@ -38,9 +38,6 @@
         ":is(a, button)[rel=prev]"
       );
       width: 100%;
-      max-height: calc(100vh - var(#{$css-var-prefix}spacing) * 2);
-      margin: var(#{$css-var-prefix}spacing);
-      overflow: auto;
 
       @if map.get($breakpoints, "sm") {
         @media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
@@ -80,6 +77,11 @@
         }
       }
 
+      @if $enable-transitions {
+        transform: scale(1);
+        transition: transform var(#{$css-var-prefix}transition);
+      }
+
       // Close icon
       #{$close-selector} {
         display: block;
@@ -109,7 +111,12 @@
     // Closed state
     &:not([open]),
     &[open="false"] {
-      display: none;
+      visibility: hidden;
+      opacity: 0;
+
+      & article {
+        transform: scale(0.7);
+      }
     }
   }
 
@@ -128,6 +135,11 @@
     }
   }
 
+  // Prevent scrolling body when modal is open
+  body:has(dialog[open]) {
+    overflow: hidden;
+  }
+
   // Animations
   @if $enable-classes and $enable-transitions {
     $animation-duration: 0.2s;

scss/forms/_basics.scss

@@ -438,10 +438,15 @@
       }
     }
   }
+
   @if map.get($modules, "layout/grid") and $enable-classes {
     $helper-previous-tags: $helper-previous-tags + ", .grid";
   }
 
+  @if map.get($modules, "components/dropdown") and $enable-classes {
+    $helper-previous-tags: $helper-previous-tags + ", .dropdown";
+  }
+
   #{$parent-selector} :where(#{$helper-previous-tags}) {
     + small {
       display: block;