Merge pull request #45 from Yohn/Modal-forms

Modal sizes and styling with form child

Author: Yohn

README.md

@@ -77,7 +77,7 @@ There are 4 ways to get started with pico.css:
 Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@yohns/picocss) to link pico.css.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.6/css/pico.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.7/css/pico.min.css" />
 ```
 
 ### Install with NPM
@@ -135,7 +135,7 @@ Use the default `.classless` version if you need centered viewports:
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.6/css/pico.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.7/css/pico.classless.min.css"
 />
 ```
 
@@ -144,7 +144,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.6/css/pico.fluid.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.7/css/pico.fluid.classless.min.css"
 />
 ```
 
@@ -159,7 +159,7 @@ Then just write pure HTML, and it should look great:
     <meta name="color-scheme" content="light dark" />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.6/css/pico.classless.min.css"
+      href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.7/css/pico.classless.min.css"
     />
     <title>Hello, world!</title>
   </head>

docs/index.html

@@ -224,8 +224,7 @@
 			<main class="col-12 col-md-9 col-lg-10">
 				<article>
 					<header>
-						<h2>Yohns PicoCSS Fork v2.2.6</h2>
-						<p class="mb-0">Not in npm yet, but will be soon.</p>
+						<h2>Yohns PicoCSS Fork v2.2.7</h2>
 					</header>
 					<p>I've merged some open pull requests from the <a href="https://github.com/picocss/pico">original Pico</a>
 						repository, and then added a few more enhancements that I either needed for a project (timeline) or wanted
@@ -1080,6 +1079,8 @@ <h2><code> -md- </code> Breakpoints</h2>
 					<header>
 						<h2>Modal</h2>
 					</header>
+					<p><code>&lt;form&gt;</code> tags can be between the <code>&lt;header&gt;</code> and <code>&lt;footer&gt;</code>, or wrap around the <code>&lt;header&gt;</code> and <code>&lt;footer&gt;</code> tags within  the modal.</p>
+					<hr>
 					<div class="grid">
 						<button class="contrast" data-target="modal-example" onclick="toggleModal(event)">
 							Launch Demo Modal
@@ -1093,7 +1094,7 @@ <h2>Modal</h2>
 
 					<header>
 						<h2>Modal Sizes</h2>
-						<h6>Having different modal sizes does require a class.</h6>
+						<h6 class="fw-n">Having different modal sizes does require a class.</h6>
 					</header>
 					<p>The main thing will be to add one of the following classes to the <code>&lt;dialog&gt;</code> tag:</p>
 					<ul>
@@ -1116,7 +1117,7 @@ <h6>Having different modal sizes does require a class.</h6>
 				<article id="popover">
 					<header>
 						<h2>Popovers</h2>
-						<p>Popovers will replace the notifications below.</p>
+						<h6 class="fw-n">Popovers will replace the notifications below.</h6>
 					</header>
 
 					<button class="action" popovertarget="popover-example1">Backdrop Close</button>
@@ -1639,7 +1640,7 @@ <h3>Modal with a Form!</h3>
 			function changeTheme(newTheme) {
 				const linkElement = document.getElementById('theme-color-ss');
 				if (linkElement) {
-					linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.6/css/pico.' + newTheme + '.min.css');
+					linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.7/css/pico.' + newTheme + '.min.css');
 				}
 			}
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yohns/picocss",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "Minimal CSS Framework for semantic HTML, updated with enhanced capabilities.",
   "authors": [
     {

scss/components/_card.scss

@@ -6,8 +6,8 @@
    * Card (<article>, role="article")
    */
 
-  #{$parent-selector} article:not(:has(> form)),
-  #{$parent-selector} [role="article"]:not(:has(> form)),
+  #{$parent-selector} article:not(:has(> form:first-child)),
+  #{$parent-selector} [role="article"]:not(:has(> form:first-child)),
   #{$parent-selector} article > form,
   #{$parent-selector} [role="article"] > form {
     margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);

scss/components/_modal.scss

@@ -11,6 +11,25 @@
     #{$css-var-prefix}scrollbar-width: 0px;
   }
 
+  #{$parent-selector} dialog:not(.modal-fs, .modal-xlg, .modal-lg, .modal-md, .modal-sm) {
+    > article:not(:has(> form:first-child)),
+    > article > form:first-child {
+      width: 100%;
+
+      @if map.get($breakpoints, "sm") {
+        @media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
+          max-width: map.get(map.get($breakpoints, "sm"), "viewport");
+        }
+      }
+
+      @if map.get($breakpoints, "md") {
+        @media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
+          max-width: map.get(map.get($breakpoints, "md"), "viewport");
+        }
+      }
+    }
+  }
+
   #{$parent-selector} dialog {
     display: grid;
     z-index: 999;
@@ -37,26 +56,13 @@
     }
 
     // Content
-    > article:not(:has(> form)),
-    > article > form {
+    > article:not(:has(> form:first-child)),
+    > article > form:first-child {
       $close-selector: if(
         $enable-classes,
         ".close, :is(a, button)[rel=prev]",
         ":is(a, button)[rel=prev]"
       );
-      width: 100%;
-
-      @if map.get($breakpoints, "sm") {
-        @media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
-          max-width: map.get(map.get($breakpoints, "sm"), "viewport");
-        }
-      }
-
-      @if map.get($breakpoints, "md") {
-        @media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
-          max-width: map.get(map.get($breakpoints, "md"), "viewport");
-        }
-      }
 
       > header {
         > * {

scss/helpers/_copyright.scss

@@ -1,4 +1,4 @@
 /*!
- * Pico CSS ✨ v2.2.6 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.7 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2025 - Licensed under MIT
  */