Closes Legend element not styled in role="group" Yohn#23

Added compatability with `.dropdown` to the `role=group` Put a dropdown submenu in the group examples Improved borders on `[role=group] > label, [role=group] > legend` to ensure the same size as other group elements
picocss · Dec 31, 2024 · ddf41a1 · ddf41a1
1 parent 324f6fc
commit ddf41a1
Show file tree

Hide file tree

Showing 265 changed files with 13,809 additions and 4,063 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -5,7 +5,7 @@ root = true
 
 # Unix-style newlines with a newline ending every file
 [*]
-end_of_line = lf
+end_of_line = crlf
 insert_final_newline = true
 charset = utf-8
 trim_trailing_whitespace = true

diff --git a/.gitignore b/.gitignore
@@ -35,3 +35,5 @@ package-lock.json
 /scss/components/_offcanvas.scss
 docs/js/DialogManager.js
 docs/modal.html
+
+/.yohn
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@
   </a>
 </p>
 
-[![Github release](https://img.shields.io/github/v/release/Yohn/PicoCSS?color=0172ad&logo=github&logoColor=white)](https://github.com/Yohn/PicoCSS/releases/latest)
+[![Github release](https://img.shields.io/github/v/release/Yohn/PicoCSS?color=0172.ad&logo=github&logoColor=white)](https://github.com/Yohn/PicoCSS/releases/latest)
 [![npm version](https://img.shields.io/npm/v/@yohns/picocss?color=0172ad)](https://www.npmjs.com/package/@yohns/picocss)
 [![License](https://img.shields.io/badge/license-MIT-%230172ad)](https://github.com/Yohn/PicoCSS/blob/master/LICENSE.md)
 <!-- [![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/picocss.svg?style=social&label=Follow%20%40picocss)](https://twitter.com/picocss) -->
@@ -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].1/css/pico.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].2/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].1/css/pico.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].2/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].1/css/pico.fluid.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].2/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].1/css/pico.classless.min.css"
+      href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].2/css/pico.classless.min.css"
     />
     <title>Hello, world!</title>
   </head>

diff --git a/css/pico.amber.css b/css/pico.amber.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -1857,7 +1857,8 @@ input,
 optgroup,
 select,
 textarea,
-[role=group] > label {
+[role=group] > label,
+[role=group] > legend {
   margin: 0;
   font-size: 1rem;
   line-height: var(--pico-line-height);
@@ -1931,8 +1932,7 @@ textarea {
   border-width: 0;
 }
 
-input:not([type=checkbox], [type=radio], [type=range], [type=date]),
-[role=group] > label {
+input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
   height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
 }
 
@@ -1966,7 +1966,8 @@ textarea {
 input:not([type=checkbox], [type=radio], [type=range], [type=file]),
 select,
 textarea,
-[role=group] > label {
+[role=group] > label,
+[role=group] > legend {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1976,7 +1977,8 @@ textarea,
 input,
 select,
 textarea,
-[role=group] > label {
+[role=group] > label,
+[role=group] > legend {
   --pico-background-color: var(--pico-form-element-background-color);
   --pico-border-color: var(--pico-form-element-border-color);
   --pico-color: var(--pico-form-element-color);
@@ -2018,6 +2020,7 @@ input:not([type=submit],
 
 input:not([type=submit], [type=button], [type=reset])[disabled],
 [role=group] > label,
+[role=group] > legend,
 select[disabled],
 textarea[disabled],
 label[aria-disabled=true],
@@ -2027,7 +2030,8 @@ label[aria-disabled=true],
 }
 
 label[aria-disabled=true] input[disabled],
-[role=group] > label {
+[role=group] > label,
+[role=group] > legend {
   opacity: 1;
 }
 
@@ -2095,15 +2099,17 @@ input::-webkit-input-placeholder,
 textarea::placeholder,
 textarea::-webkit-input-placeholder,
 select:invalid,
-[role=group] > label {
+[role=group] > label,
+[role=group] > legend {
   color: var(--pico-form-element-placeholder-color);
   opacity: 1;
 }
 
 input:not([type=checkbox], [type=radio]),
 select,
 textarea,
-[role=group] > label {
+[role=group] > label,
+[role=group] > legend {
   margin-bottom: var(--pico-spacing);
 }
 
@@ -3299,6 +3305,10 @@ label > details.dropdown {
 /**
  * Group ([role="group"], [role="search"])
  */
+fieldset[role=group] > legend {
+  float: left;
+}
+
 [role=search],
 [role=group] {
   display: inline-flex;
@@ -3311,85 +3321,129 @@ label > details.dropdown {
   transition: box-shadow var(--pico-transition);
 }
 [role=search] > label,
-[role=group] > label {
+[role=search] > legend,
+[role=group] > label,
+[role=group] > legend {
+  border-color: var(--pico-secondary-background);
   background-color: var(--pico-secondary-background);
   color: var(--pico-secondary-inverse);
 }
 [role=search] > *,
 [role=search] input:not([type=checkbox], [type=radio]),
 [role=search] select,
-[role=search] label,
+[role=search] > label,
+[role=search] > legend,
+[role=search] > details,
 [role=group] > *,
 [role=group] input:not([type=checkbox], [type=radio]),
 [role=group] select,
-[role=group] label {
+[role=group] > label,
+[role=group] > legend,
+[role=group] > details {
   position: relative;
   flex: 1 1 auto;
   margin-bottom: 0;
 }
 [role=search] > *:not(:first-child),
 [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
 [role=search] select:not(:first-child),
-[role=search] label:not(:first-child),
+[role=search] > label:not(:first-child),
+[role=search] > legend:not(:first-child),
+[role=search] > details:not(:first-child),
 [role=group] > *:not(:first-child),
 [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
 [role=group] select:not(:first-child),
-[role=group] label:not(:first-child) {
+[role=group] > label:not(:first-child),
+[role=group] > legend:not(:first-child),
+[role=group] > details:not(:first-child) {
   margin-left: 0;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 [role=search] > *:not(:last-child),
 [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
 [role=search] select:not(:last-child),
-[role=search] label:not(:last-child),
+[role=search] > label:not(:last-child),
+[role=search] > legend:not(:last-child),
+[role=search] > details:not(:last-child),
 [role=group] > *:not(:last-child),
 [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
 [role=group] select:not(:last-child),
-[role=group] label:not(:last-child) {
+[role=group] > label:not(:last-child),
+[role=group] > legend:not(:last-child),
+[role=group] > details:not(:last-child) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 [role=search] > *:focus,
 [role=search] input:not([type=checkbox], [type=radio]):focus,
 [role=search] select:focus,
-[role=search] label:focus,
+[role=search] > label:focus,
+[role=search] > legend:focus,
+[role=search] > details:focus,
 [role=group] > *:focus,
 [role=group] input:not([type=checkbox], [type=radio]):focus,
 [role=group] select:focus,
-[role=group] label:focus {
+[role=group] > label:focus,
+[role=group] > legend:focus,
+[role=group] > details:focus {
   z-index: 2;
 }
+[role=search] > details:not(:first-child) > summary,
+[role=group] > details:not(:first-child) > summary {
+  margin-left: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+[role=search] > details:not(:last-child) > summary,
+[role=group] > details:not(:last-child) > summary {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+[role=search] > details > summary,
+[role=search] > details > summary:not([role]),
+[role=group] > details > summary,
+[role=group] > details > summary:not([role]) {
+  height: 100% !important;
+}
 [role=search] button:not(:first-child),
 [role=search] [type=submit]:not(:first-child),
 [role=search] [type=reset]:not(:first-child),
 [role=search] [type=button]:not(:first-child),
 [role=search] [role=button]:not(:first-child),
 [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
 [role=search] select:not(:first-child),
-[role=search] label:not(:first-child),
+[role=search] > label:not(:first-child),
+[role=search] > legend:not(:first-child),
+[role=search] > details > summary:not(:first-child),
 [role=group] button:not(:first-child),
 [role=group] [type=submit]:not(:first-child),
 [role=group] [type=reset]:not(:first-child),
 [role=group] [type=button]:not(:first-child),
 [role=group] [role=button]:not(:first-child),
 [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
 [role=group] select:not(:first-child),
-[role=group] label:not(:first-child) {
+[role=group] > label:not(:first-child),
+[role=group] > legend:not(:first-child),
+[role=group] > details > summary:not(:first-child) {
   margin-left: calc(var(--pico-border-width) * -1);
 }
 [role=search] button,
 [role=search] [type=submit],
 [role=search] [type=reset],
 [role=search] [type=button],
 [role=search] [role=button],
-[role=search] label,
+[role=search] > label,
+[role=search] > legend,
+[role=search] > details > summary,
 [role=group] button,
 [role=group] [type=submit],
 [role=group] [type=reset],
 [role=group] [type=button],
 [role=group] [role=button],
-[role=group] label {
+[role=group] > label,
+[role=group] > legend,
+[role=group] > details > summary {
   width: auto;
 }
 @supports selector(:has(*)) {
@@ -3399,10 +3453,14 @@ label > details.dropdown {
   }
   [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
   [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
-  [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
+  [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
+  [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
+  [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary,
   [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
   [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
-  [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
+  [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > label,
+  [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > legend,
+  [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) > details > summary {
     border-color: transparent;
   }
   [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@@ -3414,11 +3472,15 @@ label > details.dropdown {
   [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
   [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
   [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
+  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
+  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary,
   [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
   [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
   [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
   [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
-  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
+  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
+  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > legend,
+  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) > details > summary {
     --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border);
     --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border);
   }
@@ -3428,12 +3490,16 @@ label > details.dropdown {
   [role=search] [type=button]:focus,
   [role=search] [role=button]:focus,
   [role=search] label:focus,
+  [role=search] > legend:focus,
+  [role=search] > details > summary:focus,
   [role=group] button:focus,
   [role=group] [type=submit]:focus,
   [role=group] [type=reset]:focus,
   [role=group] [type=button]:focus,
   [role=group] [role=button]:focus,
-  [role=group] label:focus {
+  [role=group] label:focus,
+  [role=group] > legend:focus,
+  [role=group] > details > summary:focus {
     box-shadow: none;
   }
 }
@@ -3451,10 +3517,14 @@ label > details.dropdown {
 [dir=rtl] [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
 [dir=rtl] [role=search] select:not(:first-child),
 [dir=rtl] [role=search] label:not(:first-child),
+[dir=rtl] [role=search] > legend:not(:first-child),
+[dir=rtl] [role=search] > details > summary:not(:first-child),
 [dir=rtl] [role=group] > *:not(:first-child),
 [dir=rtl] [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
 [dir=rtl] [role=group] select:not(:first-child),
-[dir=rtl] [role=group] label:not(:first-child) {
+[dir=rtl] [role=group] label:not(:first-child),
+[dir=rtl] [role=group] > legend:not(:first-child),
+[dir=rtl] [role=group] > details > summary:not(:first-child) {
   margin-right: 0;
   margin-left: auto;
   border-top-right-radius: 0;
@@ -3466,10 +3536,14 @@ label > details.dropdown {
 [dir=rtl] [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
 [dir=rtl] [role=search] select:not(:last-child),
 [dir=rtl] [role=search] label:not(:last-child),
+[dir=rtl] [role=search] > legend:not(:last-child),
+[dir=rtl] [role=search] > details > summary:not(:last-child),
 [dir=rtl] [role=group] > *:not(:last-child),
 [dir=rtl] [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
 [dir=rtl] [role=group] select:not(:last-child),
-[dir=rtl] [role=group] label:not(:last-child) {
+[dir=rtl] [role=group] label:not(:last-child),
+[dir=rtl] [role=group] > legend:not(:last-child),
+[dir=rtl] [role=group] > details > summary:not(:last-child) {
   border-top-right-radius: var(--pico-border-radius);
   border-top-left-radius: 0;
   border-bottom-right-radius: var(--pico-border-radius);
@@ -3482,7 +3556,9 @@ label > details.dropdown {
 [dir=rtl] [role=button]:not(:first-child),
 [dir=rtl] input:not([type=checkbox], [type=radio]):not(:first-child),
 [dir=rtl] select:not(:first-child),
-[dir=rtl] label:not(:first-child) {
+[dir=rtl] label:not(:first-child),
+[dir=rtl] > legend:not(:first-child),
+[dir=rtl] > details > summary:not(:first-child) {
   margin-right: calc(var(--pico-border-width) * -1);
   margin-left: auto;
 }