Merge pull request #662 from picocss/dev

v2.1.1

.github/CONTRIBUTING.md

@@ -5,16 +5,18 @@ Thanks for your interest in contributing to Pico CSS! Please take a moment to re
 ## Bug reports
 
 The [issue tracker]((https://github.com/picocss/pico/issues)) is the preferred channel for bug reports, but please respect the following restrictions:
-- Please do not use the issue tracker for personal support requests. [Open a question in our discussion forums](https://github.com/picocss/pico/discussions/new?category=help) instead.
-- Please do not use the issue tracker for feature requests. [Suggest any ideas you have using our discussion forums](https://github.com/picocss/pico/discussions/new?category=ideas) instead.
+- Please do not use the issue tracker for personal support requests. [Open a question in our discussion forums](https://github.com/picocss/pico/discussions/categories/help) instead.
+- Please do not use the issue tracker for feature requests.  Instead, use our discussion forums to [suggest any ideas](https://github.com/picocss/pico/discussions/categories/ideas) you have.
 
 ## Pull requests
 
 Good pull requests, patches, improvements, and new features are a fantastic help.
 
-**Please ask first before starting work on any significant new features.**
-We recommend that you first [suggest your feature idea in our discussion forums](https://github.com/picocss/pico/discussions/new?category=ideas).
+**Please ask before starting work on any significant new features.**
+We recommend that you first [suggest your feature idea in our discussion forums](https://github.com/picocss/pico/discussions/categories/ideas).
 
-[`dev`](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
+[`dev`](https://github.com/picocss/pico/tree/dev) branch is open for pull requests on `v2`.
 
-**Do not edit [`/css`](https://github.com/picocss/pico/tree/master/css) files directly.** Edit the source files in [`/scss`](https://github.com/picocss/pico/tree/master/scss), then recompile the [`/css`](https://github.com/picocss/pico/tree/master/css) files with `npm run build`.
+[`v1-dev`](https://github.com/picocss/pico/tree/v1-dev) branch is open to pull requests on `v1`.
+
+**Do not edit [`/css`](https://github.com/picocss/pico/tree/master/css) files directly.** Edit the source files in [`/scss`](https://github.com/picocss/pico/tree/master/scss), then recompile the [`/css`](https://github.com/picocss/pico/tree/master/css) files with `yarn build`.

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,8 @@
 blank_issues_enabled: false
 contact_links:
   - name: Get Help
-    url: https://github.com/picocss/pico/discussions/discussions/new?category=help
+    url: https://github.com/picocss/pico/discussions/categories/help
     about: If you can't get something to work the way you expect, open a question in our discussion forums.
   - name: Feature Request
-    url: https://github.com/picocss/pico/discussions/discussions/new?category=ideas
+    url: https://github.com/picocss/pico/discussions/categories/ideas
     about: Suggest any ideas you have using our discussion forums.

.github/logo-dark.svg

@@ -0,0 +1,27 @@
+<svg height="458" viewBox="0 0 1064 458" width="1064" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    :root {
+      --pico-logo-wordmark: #fff;
+      --pico-logo-small-sparkles: #ff9500;
+      --pico-logo-big-sparkle: #ffbf00;
+    }
+    .pico-logo-wordmark {
+      fill: var(--pico-logo-wordmark);
+    }
+    .pico-logo-small-sparkles {
+      fill: var(--pico-logo-small-sparkles);
+    }
+    .pico-logo-big-sparkle {
+      fill: var(--pico-logo-big-sparkle);
+    }
+  </style>
+  <path d="m993.708 161.083c-1.475.567-2.641 1.733-3.208 3.208l-21.822 56.738c-1.836 4.774-8.59 4.774-10.426 0l-21.823-56.738c-.567-1.475-1.733-2.641-3.208-3.208l-56.738-21.823c-4.774-1.836-4.774-8.59 0-10.426l56.738-21.822c1.475-.567 2.641-1.733 3.208-3.208l21.823-56.7383c1.836-4.7737 8.59-4.7737 10.426 0l21.822 56.7383c.567 1.475 1.733 2.641 3.208 3.208l56.742 21.822c4.77 1.836 4.77 8.59 0 10.426z" class="pico-logo-big-sparkle" />
+  <path d="m834.63 86.9817c-1.836 4.7738-8.59 4.7738-10.426 0l-7.859-20.4337c-.567-1.475-1.733-2.6407-3.208-3.208l-20.433-7.8592c-4.774-1.836-4.774-8.59 0-10.426l20.433-7.8591c1.475-.5674 2.641-1.733 3.208-3.2081l7.859-20.4337c1.836-4.77377 8.59-4.77375 10.426 0l7.86 20.4337c.567 1.4751 1.733 2.6407 3.208 3.2081l20.433 7.8591c4.774 1.836 4.774 8.59 0 10.426l-20.433 7.8592c-1.475.5673-2.641 1.733-3.208 3.208z" class="pico-logo-small-sparkles" />
+  <path d="m879.209 230.899c-1.475.568-2.64 1.733-3.208 3.208l-7.859 20.434c-1.836 4.774-8.59 4.774-10.426 0l-7.859-20.434c-.567-1.475-1.733-2.64-3.208-3.208l-20.434-7.859c-4.773-1.836-4.773-8.59 0-10.426l20.434-7.859c1.475-.567 2.641-1.733 3.208-3.208l7.859-20.434c1.836-4.774 8.59-4.774 10.426 0l7.859 20.434c.568 1.475 1.733 2.641 3.208 3.208l20.434 7.859c4.774 1.836 4.774 8.59 0 10.426z" class="pico-logo-small-sparkles" />
+  <g class="pico-logo-wordmark">
+    <path d="m0 457.995v-282.83h59.1396l3.6208 37.172v245.658zm119.889-75.96c-16.629 0-30.5761-4.175-41.8408-12.525-11.2647-8.62-19.7132-20.876-25.3455-36.768-5.6324-15.892-8.4485-34.748-8.4485-56.566 0-22.088 2.8161-40.943 8.4485-56.566 5.6323-15.893 14.0808-28.014 25.3455-36.364 11.2647-8.62 25.2118-12.93 41.8408-12.93 18.774 0 35.001 4.31 48.679 12.93 13.679 8.35 24.139 20.471 31.38 36.364 7.242 15.623 10.863 34.478 10.863 56.566 0 21.818-3.621 40.674-10.863 56.566-7.241 15.892-17.701 28.148-31.38 36.768-13.678 8.35-29.905 12.525-48.679 12.525zm-16.093-58.182c8.046 0 15.154-2.02 21.323-6.061 6.168-4.04 11.13-9.562 14.885-16.566 3.755-7.272 5.632-15.623 5.632-25.05 0-9.428-1.743-17.643-5.23-24.647-3.486-7.273-8.448-12.929-14.885-16.97-6.169-4.04-13.276-6.06-21.323-6.06-8.0458 0-15.2874 2.02-21.7244 6.06-6.1687 4.041-10.9964 9.697-14.4831 16.97s-5.2301 15.488-5.2301 24.647c0 9.427 1.7434 17.778 5.2301 25.05 3.4867 7.004 8.3144 12.526 14.4831 16.566 6.1688 4.041 13.2763 6.061 21.3224 6.061z" />
+    <path d="m245.196 377.187v-202.022h62.76v202.022zm31.38-227.881c-9.387 0-17.702-3.502-24.943-10.505-6.974-7.273-10.46-15.623-10.46-25.051 0-9.966 3.486-18.3165 10.46-25.0505 7.241-7.0035 15.556-10.5052 24.943-10.5052 9.655 0 17.97 3.5017 24.943 10.5052 6.973 6.734 10.46 15.0845 10.46 25.0505 0 9.428-3.487 17.778-10.46 25.051-6.973 7.003-15.288 10.505-24.943 10.505z" />
+    <path d="m452.936 382.035c-21.457 0-40.634-4.444-57.531-13.333-16.629-9.159-29.637-21.684-39.024-37.576-9.387-16.162-14.081-34.479-14.081-54.95 0-20.741 4.694-39.058 14.081-54.95 9.387-15.893 22.261-28.283 38.622-37.172 16.629-9.159 35.671-13.738 57.128-13.738 20.652 0 39.56 5.253 56.726 15.758 17.165 10.505 29.502 25.724 37.012 45.657l-59.542 20.202c-2.95-6.465-7.912-11.717-14.885-15.758-6.705-4.309-14.215-6.464-22.53-6.464-8.314 0-15.69 2.02-22.127 6.06-6.168 3.771-11.13 9.159-14.885 16.162-3.487 7.004-5.23 15.084-5.23 24.243 0 9.158 1.743 17.239 5.23 24.242 3.755 6.734 8.851 12.122 15.288 16.162 6.705 4.041 14.215 6.061 22.529 6.061 8.315 0 15.824-2.155 22.529-6.465 6.706-4.31 11.667-9.966 14.886-16.97l59.542 20.202c-7.778 20.203-20.25 35.691-37.415 46.465-16.897 10.775-35.672 16.162-56.323 16.162z" />
+    <path d="m672.537 382.035c-21.188 0-39.962-4.444-56.323-13.333-16.093-9.159-28.832-21.684-38.22-37.576-9.119-15.893-13.678-34.209-13.678-54.95s4.559-39.058 13.678-54.95c9.119-15.893 21.725-28.283 37.818-37.172 16.36-9.159 34.866-13.738 55.518-13.738 21.189 0 39.829 4.579 55.922 13.738 16.36 8.889 29.1 21.279 38.219 37.172 9.119 15.892 13.679 34.209 13.679 54.95s-4.56 39.057-13.679 54.95c-9.119 15.892-21.725 28.417-37.817 37.576-15.824 8.889-34.196 13.333-55.117 13.333zm-.402-59.798c8.314 0 15.422-1.886 21.322-5.657 6.169-4.04 10.997-9.428 14.484-16.162 3.486-7.003 5.23-15.084 5.23-24.242 0-9.159-1.878-17.105-5.633-23.839-3.486-7.003-8.314-12.39-14.483-16.162-6.169-4.04-13.276-6.06-21.322-6.06s-15.154 2.02-21.323 6.06c-6.168 3.772-10.996 9.159-14.483 16.162-3.487 6.734-5.23 14.68-5.23 23.839 0 8.889 1.743 16.835 5.23 23.838 3.487 7.004 8.315 12.526 14.483 16.566 6.437 3.771 13.679 5.657 21.725 5.657z" />
+  </g>
+</svg>

.github/logo-light.svg

@@ -1,17 +1,10 @@
-<svg fill="none" height="458" viewBox="0 0 1064 458" width="1064" xmlns="http://www.w3.org/2000/svg">
+<svg height="458" viewBox="0 0 1064 458" width="1064" xmlns="http://www.w3.org/2000/svg">
   <style>
     :root {
       --pico-logo-wordmark: #2a3140;
       --pico-logo-small-sparkles: #ffbf00;
       --pico-logo-big-sparkle: #ff9500;
     }
-    @media only screen and (prefers-color-scheme: dark) {
-      :root {
-        --pico-logo-wordmark: #fff;
-        --pico-logo-small-sparkles: #ff9500;
-        --pico-logo-big-sparkle: #ffbf00;
-      }
-    }
     .pico-logo-wordmark {
       fill: var(--pico-logo-wordmark);
     }

.gitignore

@@ -27,3 +27,6 @@ Thumbs.db
 
 # Folders to ignore
 /node_modules/
+
+# Pico
+.pico

.node-version

@@ -1 +0,0 @@
-18.19.0

.nvmrc

@@ -1 +0,0 @@
-18.19.0

LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019-2022 Pico
+Copyright (c) 2019-2024 Pico
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,38 +1,44 @@
-<p align="center" style="padding: 1rem;">
-  <a href="https://v2.picocss.com/">
-    <img src=".github/logo.svg" width="auto" height="60">
+<p>
+  <a href="https://picocss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
+      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
+    </picture>
   </a>
 </p>
 
-<p align="center">
-  <strong>Minimal CSS Framework for semantic HTML</strong>
-</p>
+[![Github release](https://img.shields.io/github/v/release/picocss/pico?color=0172ad&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest)
+[![npm version](https://img.shields.io/npm/v/@picocss/pico?color=0172ad)](https://www.npmjs.com/package/@picocss/pico)
+[![License](https://img.shields.io/badge/license-MIT-%230172ad)](https://github.com/picocss/pico/blob/master/LICENSE.md)
+[![X (formerly Twitter)](https://img.shields.io/twitter/url/https/twitter.com/picocss.svg?style=social&label=Follow%20%40picocss)](https://x.com/picocss)
 
-<p align="center">
- Pico CSS is a minimalist and lightweight starter kit that prioritizes semantic HTML, making every HTML tag responsive and elegant by default.
-</p>
+## Minimal CSS Framework for Semantic HTML
 
-<p align="center">
-  <a href="https://v2.picocss.com/docs">Documentation</a>
-</p>
+A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.
 
-# Pico.css
+Write HTML, Add Pico CSS, and Voilà!
 
-**Class-light and semantic**  
-Pico uses simple native HTML tags as much as possible. Less than 10 .classes are used in Pico.
+## What’s new in v2?
 
-**Great styles with just one CSS file**  
-No dependencies, package manager, external files, or JavaScript.
+Pico v2.0 features better accessibility, easier customization with SASS, a complete color palette, a new group component, and 20 precompiled color themes totaling over 100 combinations accessible via CDN.
 
-**Responsive everything**  
-Elegant and consistent adaptive spacings and typography on all devices.
+[Read more](https://picocss.com/docs/v2)
 
-**Light or Dark mode**  
-Shipped with two beautiful color themes, automatically enabled according to the user preference.
+## A Superpowered HTML Reset
 
-# Table of contents
+With just the right amount of everything, Pico is great starting point for a clean and lightweight design system.
 
-- [Usage](#usage)
+- Class-light and Semantic
+- Great Styles with Just CSS
+- Responsive Everything
+- Light or Dark Mode
+- Easy Customization
+- Optimized Performance
+
+## Table of contents
+
+- [Quick start](#quick-start)
 - [Class-less version](#class-less-version)
 - [Limitations](#limitations)
 - [Documentation](#documentation)
@@ -40,52 +46,83 @@ Shipped with two beautiful color themes, automatically enabled according to the
 - [Contributing](#contributing)
 - [Copyright and license](#copyright-and-license)
 
-# Usage
+## Quick start
 
 There are 4 ways to get started with pico.css:
 
-**Install manually**
+### Install manually
 
-[Download Pico](https://github.com/picocss/pico/archive/refs/heads/v2.zip) and link `/css/pico.min.css` in the `<head>` of your website.
+[Download Pico](https://github.com/picocss/pico/archive/refs/heads/main.zip) and link `/css/pico.min.css` in the `<head>` of your website.
 
 ```html
-<link rel="stylesheet" href="css/pico.min.css" />
+<link rel="stylesheet" href="css/pico.min.css">
 ```
 
-**Install from CDN**
+### Usage from CDN
 
 Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@picocss/pico) to link pico.css.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@next/css/pico.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 ```
 
-**Install with NPM**
+### Install with NPM
 
 ```shell
-npm install @picocss/pico@next
+npm install @picocss/pico
 ```
 
+Or
+
 ```shell
-yarn add @picocss/pico@next
+yarn add @picocss/pico
 ```
 
-**Install with Composer**
+Then, import Pico into your SCSS file with [@use](https://sass-lang.com/documentation/at-rules/use):
+
+```SCSS
+@use "pico";
+```
+
+### Install with Composer
 
 ```shell
 composer require picocss/pico
 ```
 
-# Class-less version
+### Starter HTML template
 
-Pico provides a `.classless` version ([example](https://picocss.com/examples/classless)).
+```HTML
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
+    <link rel="stylesheet" href="css/pico.min.css">
+    <title>Hello world!</title>
+  </head>
+  <body>
+    <main class="container">
+      <h1>Hello world!</h1>
+    </main>
+  </body>
+</html>
+```
 
-In this version, `header`, `main` and `footer` act as containers.
+## Class-less version
+
+Pico provides a `.classless` version.
+
+In this version, `<header>`, `<main>`, and `<footer>` inside `<body>` act as containers to define a centered or a fluid viewport.
 
 Use the default `.classless` version if you need centered viewports:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@next/css/pico.classless.min.css" />
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
+/>
 ```
 
 Or use the `.fluid.classless` version if you need a fluid container:
@@ -93,22 +130,23 @@ Or use the `.fluid.classless` version if you need a fluid container:
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@picocss/pico@next/css/pico.fluid.classless.min.css"
-/>
+  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fluid.classless.min.css"
+>
 ```
 
 Then just write pure HTML, and it should look great:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@picocss/pico@next/css/pico.classless.min.css"
-    />
+      href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
+    >
     <title>Hello, world!</title>
   </head>
   <body>
@@ -119,78 +157,82 @@ Then just write pure HTML, and it should look great:
 </html>
 ```
 
-# Limitations
+## Limitations
 
-Pico can be used without custom CSS for quick or small projects. However, it’s designed as a starting point, like a “reset CSS on steroids”. As Pico does not integrate any helpers or utilities `.classes`, this minimal CSS framework requires SCSS or CSS knowledge to build large projects.
+Pico CSS can be used without custom CSS for quick or small projects. However, it’s designed as a starting point, like a “reset CSS on steroids”. As Pico does not integrate any helpers or utilities `.classes`, this minimal CSS framework requires SCSS or CSS knowledge to build large projects.
 
-# Documentation
+[Read more](https://picocss.com/docs/usage-scenarios)
+
+## Documentation
 
 **Getting started**
 
-- [Quick start](https://v2.picocss.com/docs)
-- [Color schemes](https://v2.picocss.com/docs/color-schemes)
-- [Class-less version](https://v2.picocss.com/docs/classless)
-- [RTL](https://v2.picocss.com/docs/rtl)
+- [Quick start](https://picocss.com/docs)
+- [Version picker `New`](https://picocss.com/docs/version-picker)
+- [Color schemes](https://picocss.com/docs/color-schemes)
+- [Class-less version](https://picocss.com/docs/classless)
+- [Conditional styling `New`](https://picocss.com/docs/conditional)
+- [RTL](https://picocss.com/docs/rtl)
 
 **Customization**
 
-- [CSS Variables](https://v2.picocss.com/docs/css-variables)
-- [Theme generator](https://v2.picocss.com/docs/theme-generator)
-- [Sass](https://v2.picocss.com/docs/sass)
-- [Colors New](https://v2.picocss.com/docs/colors)
+- [CSS Variables](https://picocss.com/docs/css-variables)
+- [Sass](https://picocss.com/docs/sass)
+- [Colors `New`](https://picocss.com/docs/colors)
 
 **Layout**
 
-- [Container](https://v2.picocss.com/docs/container)
-- [Landmarks & section](https://v2.picocss.com/docs/landmarks-section)
-- [Grid](https://v2.picocss.com/docs/grid)
-- [Horizontal scroller](https://v2.picocss.com/docs/scroller)
+- [Container](https://picocss.com/docs/container)
+- [Landmarks & section](https://picocss.com/docs/landmarks-section)
+- [Grid](https://picocss.com/docs/grid)
+- [Overflow auto `New`](https://picocss.com/docs/overflow-auto)
 
 **Content**
 
-- [Typography](https://v2.picocss.com/docs/typography)
-- [Link](https://v2.picocss.com/docs/link)
-- [Button](https://v2.picocss.com/docs/button)
-- [Table](https://v2.picocss.com/docs/table)
+- [Typography](https://picocss.com/docs/typography)
+- [Link](https://picocss.com/docs/link)
+- [Button](https://picocss.com/docs/button)
+- [Table](https://picocss.com/docs/table)
 
 **Forms**
 
-- [Overview](https://v2.picocss.com/docs/forms)
-- [Input](https://v2.picocss.com/docs/forms/input)
-- [Textarea](https://v2.picocss.com/docs/forms/textarea)
-- [Select](https://v2.picocss.com/docs/forms/select)
-- [Checkboxes](https://v2.picocss.com/docs/forms/checkboxes)
-- [Radios](https://v2.picocss.com/docs/forms/radios)
-- [Switch](https://v2.picocss.com/docs/forms/switch)
-- [Range](https://v2.picocss.com/docs/forms/range)
+- [Overview](https://picocss.com/docs/forms)
+- [Input](https://picocss.com/docs/forms/input)
+- [Textarea](https://picocss.com/docs/forms/textarea)
+- [Select](https://picocss.com/docs/forms/select)
+- [Checkboxes](https://picocss.com/docs/forms/checkboxes)
+- [Radios](https://picocss.com/docs/forms/radios)
+- [Switch](https://picocss.com/docs/forms/switch)
+- [Range](https://picocss.com/docs/forms/range)
 
 **Components**
 
-- [Accordion](https://v2.picocss.com/docs/accordion)
-- [Card](https://v2.picocss.com/docs/card)
-- [Dropdown](https://v2.picocss.com/docs/dropdown)
-- [Group New](https://v2.picocss.com/docs/group)
-- [Loading](https://v2.picocss.com/docs/loading)
-- [Modal](https://v2.picocss.com/docs/modal)
-- [Nav](https://v2.picocss.com/docs/nav)
-- [Progress](https://v2.picocss.com/docs/progress)
-- [Tooltip](https://v2.picocss.com/docs/tooltip)
+- [Accordion](https://picocss.com/docs/accordion)
+- [Card](https://picocss.com/docs/card)
+- [Dropdown](https://picocss.com/docs/dropdown)
+- [Group `New`](https://picocss.com/docs/group)
+- [Loading](https://picocss.com/docs/loading)
+- [Modal](https://picocss.com/docs/modal)
+- [Nav](https://picocss.com/docs/nav)
+- [Progress](https://picocss.com/docs/progress)
+- [Tooltip](https://picocss.com/docs/tooltip)
 
 **About**
 
-- [What’s new in v2?](https://v2.picocss.com/docs/v2)
-- [Mission](https://v2.picocss.com/docs/mission)
-- [Usage scenarios](https://v2.picocss.com/docs/usage-scenarios)
-- [Brand](https://v2.picocss.com/docs/brand)
+- [What’s new in v2?](https://picocss.com/docs/v2)
+- [Mission](https://picocss.com/docs/mission)
+- [Usage scenarios](https://picocss.com/docs/usage-scenarios)
+- [Brand](https://picocss.com/docs/brand)
+- [Built With](https://picocss.com/docs/built-with)
 
-# Browser Support
+## Browser Support
 
-Pico is designed and tested for the latest stable Chrome, Firefox, Edge, and Safari releases. It does not support any version of IE, including IE 11.
+Pico CSS is designed and tested for the latest stable Chrome, Firefox, Edge, and Safari releases. It does not support any version of IE, including IE 11.
 
-# Contributing
+## Contributing
 
 If you are interested in contributing to Pico CSS, please read our [contributing guidelines](https://github.com/picocss/pico/blob/master/.github/CONTRIBUTING.md).
 
-# Copyright and license
+## Copyright and license
 
-Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
+Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).

css/pico.classless.css

@@ -1,14 +1,15 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.0.0-rc3 (https://picocss.com)
- * Copyright 2019-2024 - Licensed under MIT
+ * Pico CSS ✨ v2.1.1 (https://picocss.com)
+ * Copyright 2019-2025 - Licensed under MIT
  */
 /**
  * Styles
  */
-:root {
+:root,
+:host {
   --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, var(--pico-font-family-emoji);
+  --pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);
   --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji);
   --pico-font-family: var(--pico-font-family-sans-serif);
   --pico-line-height: 1.5;
@@ -44,36 +45,35 @@
   --pico-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
 }
 @media (min-width: 576px) {
-  :root {
+  :root,
+  :host {
     --pico-font-size: 106.25%;
   }
 }
 @media (min-width: 768px) {
-  :root {
+  :root,
+  :host {
     --pico-font-size: 112.5%;
   }
 }
 @media (min-width: 1024px) {
-  :root {
+  :root,
+  :host {
     --pico-font-size: 118.75%;
   }
 }
 @media (min-width: 1280px) {
-  :root {
+  :root,
+  :host {
     --pico-font-size: 125%;
   }
 }
 @media (min-width: 1536px) {
-  :root {
+  :root,
+  :host {
     --pico-font-size: 131.25%;
   }
 }
-:root details summary[role=button]::after {
-  filter: brightness(0) invert(1);
-}
-:root [aria-busy=true]:not(input, select, textarea):is(button, [type=submit], [type=button], [type=reset], [role=button])::before {
-  filter: brightness(0) invert(1);
-}
 
 a {
   --pico-text-decoration: underline;
@@ -185,16 +185,26 @@ input:not([type=submit],
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+details summary[role=button]::after {
+  filter: brightness(0) invert(1);
+}
+
+[aria-busy=true]:not(input, select, textarea):is(button, [type=submit], [type=button], [type=reset], [role=button])::before {
+  filter: brightness(0) invert(1);
+}
+
 /**
  * Color schemes
  */
 [data-theme=light],
-:root:not([data-theme=dark]) {
+:root:not([data-theme=dark]),
+:host(:not([data-theme=dark])) {
+  color-scheme: light;
   --pico-background-color: #fff;
   --pico-color: #373c44;
   --pico-text-selection-color: rgba(2, 154, 232, 0.25);
   --pico-muted-color: #646b79;
-  --pico-muted-border-color: #e7eaf0;
+  --pico-muted-border-color: rgb(231, 234, 239.5);
   --pico-primary: #0172ad;
   --pico-primary-background: #0172ad;
   --pico-primary-border: var(--pico-primary-background);
@@ -232,21 +242,21 @@ input:not([type=submit],
   --pico-h4-color: #4d535e;
   --pico-h5-color: #5c6370;
   --pico-h6-color: #646b79;
-  --pico-mark-background-color: #fde7c0;
+  --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
   --pico-mark-color: #0f1114;
-  --pico-ins-color: #1d6a54;
-  --pico-del-color: #883935;
+  --pico-ins-color: rgb(28.5, 105.5, 84);
+  --pico-del-color: rgb(136, 56.5, 53);
   --pico-blockquote-border-color: var(--pico-muted-border-color);
   --pico-blockquote-footer-color: var(--pico-muted-color);
   --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --pico-table-border-color: var(--pico-muted-border-color);
   --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
-  --pico-code-background-color: #f3f5f7;
+  --pico-code-background-color: rgb(243, 244.5, 246.75);
   --pico-code-color: #646b79;
   --pico-code-kbd-background-color: var(--pico-color);
   --pico-code-kbd-color: var(--pico-background-color);
-  --pico-form-element-background-color: #fbfcfc;
+  --pico-form-element-background-color: rgb(251, 251.5, 252.25);
   --pico-form-element-selected-background-color: #dfe3eb;
   --pico-form-element-border-color: #cfd5e2;
   --pico-form-element-color: #23262c;
@@ -254,18 +264,17 @@ input:not([type=submit],
   --pico-form-element-active-background-color: #fff;
   --pico-form-element-active-border-color: var(--pico-primary-border);
   --pico-form-element-focus-color: var(--pico-primary-border);
-  --pico-form-element-disabled-background-color: var(--pico-form-element-background-color);
-  --pico-form-element-disabled-border-color: var(--pico-form-element-border-color);
   --pico-form-element-disabled-opacity: 0.5;
-  --pico-form-element-invalid-border-color: #b86a6b;
-  --pico-form-element-invalid-active-border-color: #c84f48;
+  --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
+  --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
   --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
-  --pico-form-element-valid-border-color: #4c9b8a;
-  --pico-form-element-valid-active-border-color: #279977;
+  --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
+  --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
   --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
   --pico-switch-background-color: #bfc7d9;
-  --pico-switch-color: var(--pico-primary-inverse);
   --pico-switch-checked-background-color: var(--pico-primary-background);
+  --pico-switch-color: #fff;
+  --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --pico-range-border-color: #dfe3eb;
   --pico-range-active-border-color: #bfc7d9;
   --pico-range-thumb-border-color: var(--pico-background-color);
@@ -278,16 +287,15 @@ input:not([type=submit],
   --pico-card-background-color: var(--pico-background-color);
   --pico-card-border-color: var(--pico-muted-border-color);
   --pico-card-box-shadow: var(--pico-box-shadow);
-  --pico-card-sectioning-background-color: #fbfcfc;
+  --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
   --pico-loading-spinner-opacity: 0.5;
   --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
   --pico-progress-background-color: #dfe3eb;
   --pico-progress-color: var(--pico-primary-background);
   --pico-tooltip-background-color: var(--pico-contrast-background);
   --pico-tooltip-color: var(--pico-contrast-inverse);
-  --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-  --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200, 79, 72)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
-  color-scheme: light;
+  --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
 }
 [data-theme=light] input:is([type=submit],
 [type=button],
@@ -300,13 +308,21 @@ input:not([type=submit],
 [type=reset],
 [type=checkbox],
 [type=radio],
+[type=file]),
+:host(:not([data-theme=dark])) input:is([type=submit],
+[type=button],
+[type=reset],
+[type=checkbox],
+[type=radio],
 [type=file]) {
   --pico-form-element-focus-color: var(--pico-primary-focus);
 }
 
 @media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    --pico-background-color: #13171f;
+  :root:not([data-theme]),
+  :host(:not([data-theme])) {
+    color-scheme: dark;
+    --pico-background-color: rgb(19, 22.5, 30.5);
     --pico-color: #c2c7d0;
     --pico-text-selection-color: rgba(1, 170, 255, 0.1875);
     --pico-muted-color: #7b8495;
@@ -341,7 +357,7 @@ input:not([type=submit],
     --pico-contrast-hover-underline: var(--pico-contrast-hover);
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
-    --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
+    --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -351,37 +367,36 @@ input:not([type=submit],
     --pico-mark-background-color: #014063;
     --pico-mark-color: #fff;
     --pico-ins-color: #62af9a;
-    --pico-del-color: #ce7e7b;
+    --pico-del-color: rgb(205.5, 126, 123);
     --pico-blockquote-border-color: var(--pico-muted-border-color);
     --pico-blockquote-footer-color: var(--pico-muted-color);
     --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
     --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
     --pico-table-border-color: var(--pico-muted-border-color);
     --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
-    --pico-code-background-color: #1a1f28;
+    --pico-code-background-color: rgb(26, 30.5, 40.25);
     --pico-code-color: #8891a4;
     --pico-code-kbd-background-color: var(--pico-color);
     --pico-code-kbd-color: var(--pico-background-color);
-    --pico-form-element-background-color: #1c212c;
+    --pico-form-element-background-color: rgb(28, 33, 43.5);
     --pico-form-element-selected-background-color: #2a3140;
     --pico-form-element-border-color: #2a3140;
     --pico-form-element-color: #e0e3e7;
     --pico-form-element-placeholder-color: #8891a4;
-    --pico-form-element-active-background-color: #1a1f28;
+    --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
     --pico-form-element-active-border-color: var(--pico-primary-border);
     --pico-form-element-focus-color: var(--pico-primary-border);
-    --pico-form-element-disabled-background-color: var(--pico-form-element-background-color);
-    --pico-form-element-disabled-border-color: var(--pico-form-element-border-color);
     --pico-form-element-disabled-opacity: 0.5;
-    --pico-form-element-invalid-border-color: #964a50;
-    --pico-form-element-invalid-active-border-color: #b7403b;
+    --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
+    --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
     --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
     --pico-form-element-valid-border-color: #2a7b6f;
-    --pico-form-element-valid-active-border-color: #16896a;
+    --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
     --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
     --pico-switch-background-color: #333c4e;
-    --pico-switch-color: var(--pico-primary-inverse);
     --pico-switch-checked-background-color: var(--pico-primary-background);
+    --pico-switch-color: #fff;
+    --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
     --pico-range-border-color: #202632;
     --pico-range-active-border-color: #2a3140;
     --pico-range-thumb-border-color: var(--pico-background-color);
@@ -394,28 +409,34 @@ input:not([type=submit],
     --pico-card-background-color: #181c25;
     --pico-card-border-color: var(--pico-card-background-color);
     --pico-card-box-shadow: var(--pico-box-shadow);
-    --pico-card-sectioning-background-color: #1a1f28;
+    --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
     --pico-loading-spinner-opacity: 0.5;
-    --pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
+    --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
     --pico-progress-background-color: #202632;
     --pico-progress-color: var(--pico-primary-background);
     --pico-tooltip-background-color: var(--pico-contrast-background);
     --pico-tooltip-color: var(--pico-contrast-inverse);
     --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-    --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(150, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
-    color-scheme: dark;
+    --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
   }
   :root:not([data-theme]) input:is([type=submit],
   [type=button],
   [type=reset],
   [type=checkbox],
   [type=radio],
+  [type=file]),
+  :host(:not([data-theme])) input:is([type=submit],
+  [type=button],
+  [type=reset],
+  [type=checkbox],
+  [type=radio],
   [type=file]) {
     --pico-form-element-focus-color: var(--pico-primary-focus);
   }
 }
 [data-theme=dark] {
-  --pico-background-color: #13171f;
+  color-scheme: dark;
+  --pico-background-color: rgb(19, 22.5, 30.5);
   --pico-color: #c2c7d0;
   --pico-text-selection-color: rgba(1, 170, 255, 0.1875);
   --pico-muted-color: #7b8495;
@@ -450,7 +471,7 @@ input:not([type=submit],
   --pico-contrast-hover-underline: var(--pico-contrast-hover);
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
-  --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
+  --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -460,37 +481,36 @@ input:not([type=submit],
   --pico-mark-background-color: #014063;
   --pico-mark-color: #fff;
   --pico-ins-color: #62af9a;
-  --pico-del-color: #ce7e7b;
+  --pico-del-color: rgb(205.5, 126, 123);
   --pico-blockquote-border-color: var(--pico-muted-border-color);
   --pico-blockquote-footer-color: var(--pico-muted-color);
   --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --pico-table-border-color: var(--pico-muted-border-color);
   --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
-  --pico-code-background-color: #1a1f28;
+  --pico-code-background-color: rgb(26, 30.5, 40.25);
   --pico-code-color: #8891a4;
   --pico-code-kbd-background-color: var(--pico-color);
   --pico-code-kbd-color: var(--pico-background-color);
-  --pico-form-element-background-color: #1c212c;
+  --pico-form-element-background-color: rgb(28, 33, 43.5);
   --pico-form-element-selected-background-color: #2a3140;
   --pico-form-element-border-color: #2a3140;
   --pico-form-element-color: #e0e3e7;
   --pico-form-element-placeholder-color: #8891a4;
-  --pico-form-element-active-background-color: #1a1f28;
+  --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
   --pico-form-element-active-border-color: var(--pico-primary-border);
   --pico-form-element-focus-color: var(--pico-primary-border);
-  --pico-form-element-disabled-background-color: var(--pico-form-element-background-color);
-  --pico-form-element-disabled-border-color: var(--pico-form-element-border-color);
   --pico-form-element-disabled-opacity: 0.5;
-  --pico-form-element-invalid-border-color: #964a50;
-  --pico-form-element-invalid-active-border-color: #b7403b;
+  --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
+  --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
   --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
   --pico-form-element-valid-border-color: #2a7b6f;
-  --pico-form-element-valid-active-border-color: #16896a;
+  --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
   --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
   --pico-switch-background-color: #333c4e;
-  --pico-switch-color: var(--pico-primary-inverse);
   --pico-switch-checked-background-color: var(--pico-primary-background);
+  --pico-switch-color: #fff;
+  --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --pico-range-border-color: #202632;
   --pico-range-active-border-color: #2a3140;
   --pico-range-thumb-border-color: var(--pico-background-color);
@@ -503,16 +523,15 @@ input:not([type=submit],
   --pico-card-background-color: #181c25;
   --pico-card-border-color: var(--pico-card-background-color);
   --pico-card-box-shadow: var(--pico-box-shadow);
-  --pico-card-sectioning-background-color: #1a1f28;
+  --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
   --pico-loading-spinner-opacity: 0.5;
-  --pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
+  --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
   --pico-progress-background-color: #202632;
   --pico-progress-color: var(--pico-primary-background);
   --pico-tooltip-background-color: var(--pico-contrast-background);
   --pico-tooltip-color: var(--pico-contrast-inverse);
   --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-  --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(150, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
-  color-scheme: dark;
+  --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
 }
 [data-theme=dark] input:is([type=submit],
 [type=button],
@@ -547,7 +566,8 @@ progress,
   vertical-align: inherit;
 }
 
-:where(:root) {
+:where(:root),
+:where(:host) {
   -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
@@ -561,7 +581,6 @@ progress,
   text-underline-offset: var(--pico-text-underline-offset);
   text-rendering: optimizeLegibility;
   overflow-wrap: break-word;
-  cursor: default;
   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;
@@ -632,54 +651,6 @@ section {
   margin-bottom: var(--pico-block-spacing-vertical);
 }
 
-/**
- * Horizontal scroller (<figure>)
- */
-figure {
-  display: block;
-  margin: 0;
-  padding: 0;
-  overflow-x: auto;
-}
-figure figcaption {
-  padding: calc(var(--pico-spacing) * 0.5) 0;
-  color: var(--pico-muted-color);
-}
-
-/**
- * Link
- */
-:where(a:not([role=button])),
-[role=link] {
-  --pico-color: var(--pico-primary);
-  --pico-background-color: transparent;
-  --pico-underline: var(--pico-primary-underline);
-  outline: none;
-  background-color: var(--pico-background-color);
-  color: var(--pico-color);
-  -webkit-text-decoration: var(--pico-text-decoration);
-  text-decoration: var(--pico-text-decoration);
-  text-decoration-color: var(--pico-underline);
-  text-underline-offset: 0.125em;
-  transition: background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
-  transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
-  transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
-}
-:where(a:not([role=button])):is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
-[role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
-  --pico-color: var(--pico-primary-hover);
-  --pico-underline: var(--pico-primary-hover-underline);
-  --pico-text-decoration: underline;
-}
-:where(a:not([role=button])):focus-visible,
-[role=link]:focus-visible {
-  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
-}
-
-a[role=button] {
-  display: inline-block;
-}
-
 /**
  * Typography
  */
@@ -837,40 +808,39 @@ del {
 }
 
 /**
- * Embedded content
+ * Link
  */
-:where(audio, canvas, iframe, img, svg, video) {
-  vertical-align: middle;
+:where(a:not([role=button])),
+[role=link] {
+  --pico-color: var(--pico-primary);
+  --pico-background-color: transparent;
+  --pico-underline: var(--pico-primary-underline);
+  outline: none;
+  background-color: var(--pico-background-color);
+  color: var(--pico-color);
+  -webkit-text-decoration: var(--pico-text-decoration);
+  text-decoration: var(--pico-text-decoration);
+  text-decoration-color: var(--pico-underline);
+  text-underline-offset: 0.125em;
+  transition: background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
+  transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
+  transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
+}
+:where(a:not([role=button])):is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
+[role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
+  --pico-color: var(--pico-primary-hover);
+  --pico-underline: var(--pico-primary-hover-underline);
+  --pico-text-decoration: underline;
+}
+:where(a:not([role=button])):focus-visible,
+[role=link]:focus-visible {
+  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
 }
 
-audio,
-video {
+a[role=button] {
   display: inline-block;
 }
 
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-:where(iframe) {
-  border-style: none;
-}
-
-img {
-  max-width: 100%;
-  height: auto;
-  border-style: none;
-}
-
-:where(svg:not([fill])) {
-  fill: currentColor;
-}
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
 /**
  * Button
  */
@@ -1008,6 +978,42 @@ table.striped tbody tr:nth-child(odd) td {
   background-color: var(--pico-table-row-stripped-background-color);
 }
 
+/**
+ * Embedded content
+ */
+:where(audio, canvas, iframe, img, svg, video) {
+  vertical-align: middle;
+}
+
+audio,
+video {
+  display: inline-block;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+:where(iframe) {
+  border-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border-style: none;
+}
+
+:where(svg:not([fill])) {
+  fill: currentColor;
+}
+
+svg:not(:root),
+svg:not(:host) {
+  overflow: hidden;
+}
+
 /**
  * Code
  */
@@ -1019,7 +1025,8 @@ samp {
   font-family: var(--pico-font-family);
 }
 
-pre code {
+pre code,
+pre samp {
   font-size: inherit;
   font-family: inherit;
 }
@@ -1031,7 +1038,8 @@ pre {
 
 pre,
 code,
-kbd {
+kbd,
+samp {
   border-radius: var(--pico-border-radius);
   background: var(--pico-code-background-color);
   color: var(--pico-code-color);
@@ -1040,7 +1048,8 @@ kbd {
 }
 
 code,
-kbd {
+kbd,
+samp {
   display: inline-block;
   padding: 0.375rem;
 }
@@ -1050,7 +1059,8 @@ pre {
   margin-bottom: var(--pico-spacing);
   overflow-x: auto;
 }
-pre > code {
+pre > code,
+pre > samp {
   display: block;
   padding: var(--pico-spacing);
   background: none;
@@ -1064,7 +1074,20 @@ kbd {
 }
 
 /**
- * Miscs
+ * Figure
+ */
+figure {
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+figure figcaption {
+  padding: calc(var(--pico-spacing) * 0.5) 0;
+  color: var(--pico-muted-color);
+}
+
+/**
+ * Misc
  */
 hr {
   height: 0;
@@ -1250,8 +1273,6 @@ select[disabled],
 textarea[disabled],
 label[aria-disabled=true],
 :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
-  --pico-background-color: var(--pico-form-element-disabled-background-color);
-  --pico-border-color: var(--pico-form-element-disabled-border-color);
   opacity: var(--pico-form-element-disabled-opacity);
   pointer-events: none;
 }
@@ -1350,6 +1371,7 @@ select:not([multiple], [size]) {
 }
 select[multiple] option:checked {
   background: var(--pico-form-element-selected-background-color);
+  color: var(--pico-form-element-color);
 }
 
 [dir=rtl] select:not([multiple], [size]) {
@@ -1465,10 +1487,11 @@ label:has([type=checkbox], [type=radio]) {
 }
 [type=checkbox][role=switch]:before {
   display: block;
-  width: calc(1.25em - var(--pico-border-width) * 2);
+  aspect-ratio: 1;
   height: 100%;
   border-radius: 50%;
   background-color: var(--pico-color);
+  box-shadow: var(--pico-switch-thumb-box-shadow);
   content: "";
   transition: margin 0.1s ease-in-out;
 }
@@ -1482,7 +1505,7 @@ label:has([type=checkbox], [type=radio]) {
   background-image: none;
 }
 [type=checkbox][role=switch]:checked::before {
-  margin-inline-start: calc(1.125em - var(--pico-border-width));
+  margin-inline-start: calc(2.25em - 1.25em);
 }
 [type=checkbox][role=switch][disabled] {
   --pico-background-color: var(--pico-border-color);
@@ -1694,7 +1717,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
 input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
   padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
   background-image: var(--pico-icon-search);
-  background-position: center left 1.125rem;
+  background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem);
   background-size: 1rem auto;
   background-repeat: no-repeat;
 }
@@ -1826,23 +1849,11 @@ article > footer {
 /**
  * Group ([role="group"], [role="search"])
  */
-form[role=search], form[role=group] {
-  width: 100%;
-}
-
-[role=search] > *:first-child {
-  border-top-left-radius: 5rem;
-  border-bottom-left-radius: 5rem;
-}
-[role=search] > *:last-child {
-  border-top-right-radius: 5rem;
-  border-bottom-right-radius: 5rem;
-}
-
 [role=search],
 [role=group] {
   display: inline-flex;
   position: relative;
+  width: 100%;
   margin-bottom: var(--pico-spacing);
   border-radius: var(--pico-border-radius);
   box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@@ -1942,36 +1953,47 @@ form[role=search], form[role=group] {
   }
   [role=search] button:focus,
   [role=search] [type=submit]:focus,
+  [role=search] [type=reset]:focus,
   [role=search] [type=button]:focus,
   [role=search] [role=button]: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 {
     box-shadow: none;
   }
 }
 
+[role=search] > *:first-child {
+  border-top-left-radius: 5rem;
+  border-bottom-left-radius: 5rem;
+}
+[role=search] > *:last-child {
+  border-top-right-radius: 5rem;
+  border-bottom-right-radius: 5rem;
+}
+
 /**
  * Loading ([aria-busy=true])
  */
-[aria-busy=true]:not(input, select, textarea, html) {
+[aria-busy=true]:not(input, select, textarea, html, form) {
   white-space: nowrap;
 }
-[aria-busy=true]:not(input, select, textarea, html)::before {
+[aria-busy=true]:not(input, select, textarea, html, form)::before {
   display: inline-block;
   width: 1em;
   height: 1em;
   background-image: var(--pico-icon-loading);
-  background-size: 1rem auto;
+  background-size: 1em auto;
   background-repeat: no-repeat;
   content: "";
   vertical-align: -0.125em;
 }
-[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before {
+[aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
   margin-inline-end: calc(var(--pico-spacing) * 0.5);
 }
-[aria-busy=true]:not(input, select, textarea, html):empty {
+[aria-busy=true]:not(input, select, textarea, html, form):empty {
   text-align: center;
 }
 
@@ -1987,7 +2009,8 @@ a[aria-busy=true] {
 /**
  * Modal (<dialog>)
  */
-:root {
+:root,
+:host {
   --pico-scrollbar-width: 0px;
 }
 
@@ -2012,56 +2035,59 @@ dialog {
   background-color: var(--pico-modal-overlay-background-color);
   color: var(--pico-color);
 }
-dialog article {
+dialog > article {
   width: 100%;
   max-height: calc(100vh - var(--pico-spacing) * 2);
   margin: var(--pico-spacing);
   overflow: auto;
 }
 @media (min-width: 576px) {
-  dialog article {
+  dialog > article {
     max-width: 510px;
   }
 }
 @media (min-width: 768px) {
-  dialog article {
+  dialog > article {
     max-width: 700px;
   }
 }
-dialog article > header > * {
+dialog > article > header > * {
   margin-bottom: 0;
 }
-dialog article > header a[rel=prev] {
+dialog > article > header :is(a, button)[rel=prev] {
   margin: 0;
   margin-left: var(--pico-spacing);
+  padding: 0;
   float: right;
 }
-dialog article > footer {
+dialog > article > footer {
   text-align: right;
 }
-dialog article > footer button,
-dialog article > footer [role=button] {
+dialog > article > footer button,
+dialog > article > footer [role=button] {
   margin-bottom: 0;
 }
-dialog article > footer button:not(:first-of-type),
-dialog article > footer [role=button]:not(:first-of-type) {
+dialog > article > footer button:not(:first-of-type),
+dialog > article > footer [role=button]:not(:first-of-type) {
   margin-left: calc(var(--pico-spacing) * 0.5);
 }
-dialog article a[rel=prev] {
+dialog > article :is(a, button)[rel=prev] {
   display: block;
   width: 1rem;
   height: 1rem;
   margin-top: calc(var(--pico-spacing) * -1);
   margin-bottom: var(--pico-spacing);
   margin-left: auto;
+  border: none;
   background-image: var(--pico-icon-close);
   background-position: center;
   background-size: auto 1rem;
   background-repeat: no-repeat;
+  background-color: transparent;
   opacity: 0.5;
   transition: opacity var(--pico-transition);
 }
-dialog article a[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
+dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
   opacity: 1;
 }
 dialog:not([open]), dialog[open=false] {
@@ -2083,6 +2109,7 @@ nav ul {
 
 nav {
   justify-content: space-between;
+  overflow: visible;
 }
 nav ol,
 nav ul {
@@ -2115,6 +2142,7 @@ nav li :where(a, [role=link]):not(:hover) {
 }
 nav li button,
 nav li [role=button],
+nav li [type=button],
 nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
 nav li select {
   height: auto;
@@ -2239,7 +2267,7 @@ progress::-moz-progress-bar {
 [data-tooltip] {
   position: relative;
 }
-[data-tooltip]:not(a, button, input) {
+[data-tooltip]:not(a, button, input, [role=button]) {
   border-bottom: 1px dotted;
   text-decoration: none;
   cursor: help;
@@ -2428,5 +2456,3 @@ textarea,
     transition-duration: 0s !important;
   }
 }
-
-/*# sourceMappingURL=pico.classless.css.map */

css/pico.colors.css

@@ -1,9 +1,10 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.0.0-rc3 (https://picocss.com)
- * Copyright 2019-2024 - Licensed under MIT
+ * Pico CSS ✨ v2.1.1 (https://picocss.com)
+ * Copyright 2019-2025 - Licensed under MIT
  */
-:root {
+:root,
+:host {
   --pico-color-red-950: #1c0d06;
   --pico-color-red-900: #30130a;
   --pico-color-red-850: #45150c;
@@ -4007,5 +4008,3 @@
   background-color: var(--pico-color-slate);
   color: var(--pico-color-light);
 }
-
-/*# sourceMappingURL=pico.colors.css.map */