Fixes header and footer in modal when form is direct child of the article, and if the form would be between the header and footer tags.

Modals with the size classes on the dialog were not sizing correctly when form was a child of the modal, and this has been corrected.

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/[email protected].6/css/pico.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].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/[email protected].6/css/pico.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].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/[email protected].6/css/pico.fluid.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].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/[email protected].6/css/pico.classless.min.css"
+      href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].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/[email protected].6/css/pico.' + newTheme + '.min.css');
+					linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/[email protected].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
  */