Closes Legend element not styled in role="group" Yohn/PicoCSS#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
This commit is contained in:
Yohn 2024-12-31 00:16:26 -05:00
parent 324f6fcef4
commit ddf41a191a
265 changed files with 13809 additions and 4063 deletions

View file

@ -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/picocss@2.2.1/css/pico.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.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/picocss@2.2.1/css/pico.classless.min.css"
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.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/picocss@2.2.1/css/pico.fluid.classless.min.css"
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.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/picocss@2.2.1/css/pico.classless.min.css"
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.2/css/pico.classless.min.css"
/>
<title>Hello, world!</title>
</head>