Merge branch 'dev' into feat/nav_breadcrumb

.github/CONTRIBUTING.md

@@ -0,0 +1,22 @@
+# Contributing to Pico
+
+Thanks for your interest in contributing to Pico CSS! Please take a moment to review this document before submitting a [bug report](https://github.com/picocss/pico/issues) or a [pull request](https://github.com/picocss/pico/pulls).
+
+## 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.
+
+## 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).
+
+[`dev`](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
+
+**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`.
+
+Do not edit [`/docs/*.html`](https://github.com/picocss/pico/tree/master/docs) files directly. Edit the source files in [`/docs/src`](https://github.com/picocss/pico/tree/master/docs/src), then recompile the docs files with `npm run build`.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,21 @@
+---
+name: Bug report
+about: Create a bug report if you've already asked for help with a problem and confirmed something is broken with Pico CSS.
+---
+
+Please search for duplicate or closed issues first.
+  
+## Describe the issue
+  
+### Current Behavior
+A concise description of the bug.
+
+### Expected Behavior
+A concise description of what you expected.
+
+### Reproduction URL
+We recommend including a link to a minimal reproduction of the bug using CodePen or a similar tool.
+**Please do not link to your actual project.** Instead, we need a reduced test case in a new project without any unnecessary code.
+
+### Environment
+Example: OS, versions, browser details.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Get Help
+    url: https://github.com/picocss/pico/discussions/discussions/new?category=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
+    about: Suggest any ideas you have using our discussion forums.

LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019-2021 Pico
+Copyright (c) 2019-2022 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

@@ -14,10 +14,12 @@
 </p>
 
 ## Pico.css
-[![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=CSS%20gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css)
+[![Standard gzipped CSS](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=Standard%20CSS)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css)
+[![Classless gzipped CSS](https://img.badgesize.io/picocss/pico/master/css/pico.classless.min.css?compression=gzip&color=1095c1&label=Classless%20CSS)](https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css)
 [![Github release](https://img.shields.io/github/v/release/picocss/pico?color=1095c1&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest)
 [![npm version](https://img.shields.io/npm/v/@picocss/pico?color=1095c1)](https://www.npmjs.com/package/@picocss/pico)
 [![License](https://img.shields.io/badge/license-MIT-%231095c1)](https://github.com/picocss/pico/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)
 
 https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4
 
@@ -40,12 +42,13 @@ Shipped with two beautiful color themes, automatically enabled according to the
 - [Examples](#examples)
 - [Limitations](#limitations)
 - [Documentation](#documentation)
+- [Browser Support](#browser-support)
 - [Contributing](#contributing)
 - [Copyright and license](#copyright-and-license)
 
 ## Usage
 
-There are 3 ways to get started with pico.css:
+There are 4 ways to get started with pico.css:
 
 **Install manually**
 
@@ -69,6 +72,12 @@ Alternatively, you can use [unpkg CDN](https://unpkg.com/@picocss/pico@latest/)
 npm install @picocss/pico
 ```
 
+**Install with Composer**
+
+```shell
+composer require picocss/pico
+```
+
 ## Class-less version
 
 Pico provides a `.classless` version ([example](https://picocss.com/examples/classless)).
@@ -162,6 +171,7 @@ Pico can be used without custom CSS for quick or small projects. However, it’s
 **Components**
 - [Accordions](https://picocss.com/docs/accordions.html)
 - [Cards](https://picocss.com/docs/cards.html)
+- [Dropdowns](https://picocss.com/docs/dropdowns.html)
 - [Modal](https://picocss.com/docs/modal.html)
 - [Navs](https://picocss.com/docs/navs.html)
 - [Progress](https://picocss.com/docs/progress.html)
@@ -170,11 +180,13 @@ Pico can be used without custom CSS for quick or small projects. However, it’s
 - [Loading](https://picocss.com/docs/loading.html)
 - [Tooltips](https://picocss.com/docs/tooltips.html)
 
+## 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.
+
 ## Contributing
 
-- [`dev`](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
+If you are interested in contributing to Pico CSS, please read our [contributing guidelines](https://github.com/picocss/pico/blob/master/.github/CONTRIBUTING.md).
-- 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`.
-- Do not edit [`/docs/*.html`](https://github.com/picocss/pico/tree/master/docs) files directly. Edit the source files in [`/docs/src`](https://github.com/picocss/pico/tree/master/docs/src), then recompile the docs files with `npm run build`.
 
 ## Copyright and license
 

composer.json

@@ -0,0 +1,30 @@
+{
+  "name": "picocss/pico",
+  "description": "Minimal CSS Framework for semantic HTML.",
+  "keywords": [
+    "css",
+    "css-framework",
+    "dark-mode",
+    "dark-theme",
+    "lightweight",
+    "minimal",
+    "minimalist",
+    "minimalistic",
+    "native-html",
+    "scss-framework",
+    "semantic"
+  ],
+  "homepage": "https://picocss.com",
+  "authors": [
+    {
+      "name": "Lucas Larroche",
+      "email": "lucas@larroche.com",
+      "homepage": "https://lucaslarroche.com",
+      "role": "Developer"
+    }
+  ],
+  "support": {
+    "issues": "https://github.com/picocss/pico/issues/"
+  },
+  "license": "MIT"
+}

css/pico.slim.css

@@ -1,6 +1,6 @@
 /*!
- * Pico.css v1.4.4 (https://picocss.com)
+ * Pico.css v1.5.2 (https://picocss.com)
- * Copyright 2019-2021 - Licensed under MIT
+ * Copyright 2019-2022 - Licensed under MIT
  *
  * Slim version example
  * You can export only the modules you need
@@ -26,6 +26,10 @@
   --grid-spacing-horizontal: var(--spacing);
   --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
+  --nav-element-spacing-vertical: 1rem;
+  --nav-element-spacing-horizontal: 0.5rem;
+  --nav-link-spacing-vertical: 0.5rem;
+  --nav-link-spacing-horizontal: 0.5rem;
   --form-label-font-weight: var(--font-weight);
   --transition: 0.2s ease-in-out;
 }
@@ -131,24 +135,24 @@ kbd {
 [data-theme=light],
 :root:not([data-theme=dark]) {
   --background-color: #fff;
-  --color: #415462;
+  --color: hsl(205deg, 20%, 32%);
-  --h1-color: #1b2832;
+  --h1-color: hsl(205deg, 30%, 15%);
   --h2-color: #24333e;
-  --h3-color: #2c3d49;
+  --h3-color: hsl(205deg, 25%, 23%);
   --h4-color: #374956;
-  --h5-color: #415462;
+  --h5-color: hsl(205deg, 20%, 32%);
   --h6-color: #4d606d;
-  --muted-color: #73828c;
+  --muted-color: hsl(205deg, 10%, 50%);
-  --muted-border-color: #edf0f3;
+  --muted-border-color: hsl(205deg, 20%, 94%);
-  --primary: #1095c1;
+  --primary: hsl(195deg, 85%, 41%);
-  --primary-hover: #08769b;
+  --primary-hover: hsl(195deg, 90%, 32%);
   --primary-focus: rgba(16, 149, 193, 0.125);
   --primary-inverse: #fff;
-  --secondary: #596b78;
+  --secondary: hsl(205deg, 15%, 41%);
-  --secondary-hover: #415462;
+  --secondary-hover: hsl(205deg, 20%, 32%);
   --secondary-focus: rgba(89, 107, 120, 0.125);
   --secondary-inverse: #fff;
-  --contrast: #1b2832;
+  --contrast: hsl(205deg, 30%, 15%);
   --contrast-hover: #000;
   --contrast-focus: rgba(89, 107, 120, 0.125);
   --contrast-inverse: #fff;
@@ -161,14 +165,14 @@ kbd {
   --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --form-element-background-color: transparent;
-  --form-element-border-color: #a2afb9;
+  --form-element-border-color: hsl(205deg, 14%, 68%);
   --form-element-color: var(--color);
   --form-element-placeholder-color: var(--muted-color);
   --form-element-active-background-color: transparent;
   --form-element-active-border-color: var(--primary);
   --form-element-focus-color: var(--primary-focus);
-  --form-element-disabled-background-color: #d5dce2;
+  --form-element-disabled-background-color: hsl(205deg, 18%, 86%);
-  --form-element-disabled-border-color: #a2afb9;
+  --form-element-disabled-border-color: hsl(205deg, 14%, 68%);
   --form-element-disabled-opacity: 0.5;
   --form-element-invalid-border-color: #c62828;
   --form-element-invalid-active-border-color: #d32f2f;
@@ -176,42 +180,54 @@ kbd {
   --form-element-valid-border-color: #388e3c;
   --form-element-valid-active-border-color: #43a047;
   --form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
-  --switch-background-color: #bbc6ce;
+  --switch-background-color: hsl(205deg, 16%, 77%);
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
-  --range-border-color: #d5dce2;
+  --range-border-color: hsl(205deg, 18%, 86%);
-  --range-active-border-color: #bbc6ce;
+  --range-active-border-color: hsl(205deg, 16%, 77%);
   --range-thumb-border-color: var(--background-color);
   --range-thumb-color: var(--secondary);
   --range-thumb-hover-color: var(--secondary-hover);
   --range-thumb-active-color: var(--primary);
   --table-border-color: var(--muted-border-color);
   --table-row-stripped-background-color: #f6f8f9;
-  --code-background-color: #edf0f3;
+  --code-background-color: hsl(205deg, 20%, 94%);
   --code-color: var(--muted-color);
   --code-kbd-background-color: var(--contrast);
   --code-kbd-color: var(--contrast-inverse);
-  --code-tag-color: #b34d80;
+  --code-tag-color: hsl(330deg, 40%, 50%);
-  --code-property-color: #3d888f;
+  --code-property-color: hsl(185deg, 40%, 40%);
-  --code-value-color: #998866;
+  --code-value-color: hsl(40deg, 20%, 50%);
-  --code-comment-color: #a2afb9;
+  --code-comment-color: hsl(205deg, 14%, 68%);
   --accordion-border-color: var(--muted-border-color);
   --accordion-close-summary-color: var(--color);
   --accordion-open-summary-color: var(--muted-color);
   --card-background-color: var(--background-color);
   --card-border-color: var(--muted-border-color);
-  --card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04),
+  --card-box-shadow:
-    0 0.125rem 2rem rgba(27, 40, 50, 0.08),
+    0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
-    0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
+    0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
+    0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
+    0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
+    0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
+    0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
+    0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
   --card-sectionning-background-color: #fbfbfc;
+  --dropdown-background-color: #fbfbfc;
+  --dropdown-border-color: #e1e6eb;
+  --dropdown-box-shadow: var(--card-box-shadow);
+  --dropdown-color: var(--color);
+  --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
   --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
-  --progress-background-color: #d5dce2;
+  --progress-background-color: hsl(205deg, 18%, 86%);
   --progress-color: var(--primary);
   --loading-spinner-opacity: 0.5;
   --tooltip-background-color: var(--contrast);
   --tooltip-color: var(--contrast-inverse);
   --icon-checkbox: 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='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-chevron: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-chevron-button: 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='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-chevron-button-inverse: 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='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-close: 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='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
   --icon-date: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
   --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='rgba(198, 40, 40, 0.999)' 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");
@@ -225,24 +241,24 @@ kbd {
 @media only screen and (prefers-color-scheme: dark) {
   :root:not([data-theme=light]) {
     --background-color: #11191f;
-    --color: #bbc6ce;
+    --color: hsl(205deg, 16%, 77%);
-    --h1-color: #edf0f3;
+    --h1-color: hsl(205deg, 20%, 94%);
     --h2-color: #e1e6eb;
-    --h3-color: #d5dce2;
+    --h3-color: hsl(205deg, 18%, 86%);
     --h4-color: #c8d1d8;
-    --h5-color: #bbc6ce;
+    --h5-color: hsl(205deg, 16%, 77%);
     --h6-color: #afbbc4;
-    --muted-color: #73828c;
+    --muted-color: hsl(205deg, 10%, 50%);
     --muted-border-color: #1f2d38;
-    --primary: #1095c1;
+    --primary: hsl(195deg, 85%, 41%);
-    --primary-hover: #1ab3e6;
+    --primary-hover: hsl(195deg, 80%, 50%);
     --primary-focus: rgba(16, 149, 193, 0.25);
     --primary-inverse: #fff;
-    --secondary: #596b78;
+    --secondary: hsl(205deg, 15%, 41%);
-    --secondary-hover: #73828c;
+    --secondary-hover: hsl(205deg, 10%, 50%);
     --secondary-focus: rgba(115, 130, 140, 0.25);
     --secondary-inverse: #fff;
-    --contrast: #edf0f3;
+    --contrast: hsl(205deg, 20%, 94%);
     --contrast-hover: #fff;
     --contrast-focus: rgba(115, 130, 140, 0.25);
     --contrast-inverse: #000;
@@ -261,8 +277,8 @@ kbd {
     --form-element-active-background-color: var(--form-element-background-color);
     --form-element-active-border-color: var(--primary);
     --form-element-focus-color: var(--primary-focus);
-    --form-element-disabled-background-color: #2c3d49;
+    --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
-    --form-element-disabled-border-color: #415462;
+    --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
     --form-element-disabled-opacity: 0.5;
     --form-element-invalid-border-color: #b71c1c;
     --form-element-invalid-active-border-color: #c62828;
@@ -274,7 +290,7 @@ kbd {
     --switch-color: var(--primary-inverse);
     --switch-checked-background-color: var(--primary);
     --range-border-color: #24333e;
-    --range-active-border-color: #2c3d49;
+    --range-active-border-color: hsl(205deg, 25%, 23%);
     --range-thumb-border-color: var(--background-color);
     --range-thumb-color: var(--secondary);
     --range-thumb-hover-color: var(--secondary-hover);
@@ -285,20 +301,30 @@ kbd {
     --code-color: var(--muted-color);
     --code-kbd-background-color: var(--contrast);
     --code-kbd-color: var(--contrast-inverse);
-    --code-tag-color: #a65980;
+    --code-tag-color: hsl(330deg, 30%, 50%);
-    --code-property-color: #599fa6;
+    --code-property-color: hsl(185deg, 30%, 50%);
-    --code-value-color: #8c8473;
+    --code-value-color: hsl(40deg, 10%, 50%);
     --code-comment-color: #4d606d;
     --accordion-border-color: var(--muted-border-color);
     --accordion-active-summary-color: var(--primary);
     --accordion-close-summary-color: var(--color);
     --accordion-open-summary-color: var(--muted-color);
     --card-background-color: #141e26;
-    --card-border-color: #11191f;
+    --card-border-color: var(--card-background-color);
-    --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
+    --card-box-shadow:
-      0 0.125rem 2rem rgba(0, 0, 0, 0.12),
+      0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
-      0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
+      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);
     --card-sectionning-background-color: #18232c;
+    --dropdown-background-color: hsl(205deg, 30%, 15%);
+    --dropdown-border-color: #24333e;
+    --dropdown-box-shadow: var(--card-box-shadow);
+    --dropdown-color: var(--color);
+    --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
     --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
     --progress-background-color: #24333e;
     --progress-color: var(--primary);
@@ -307,6 +333,8 @@ kbd {
     --tooltip-color: var(--contrast-inverse);
     --icon-checkbox: 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='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
     --icon-chevron: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    --icon-chevron-button: 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='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    --icon-chevron-button-inverse: 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='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
     --icon-close: 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='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
     --icon-date: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
     --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='rgba(183, 28, 28, 0.999)' 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");
@@ -319,24 +347,24 @@ kbd {
 }
 [data-theme=dark] {
   --background-color: #11191f;
-  --color: #bbc6ce;
+  --color: hsl(205deg, 16%, 77%);
-  --h1-color: #edf0f3;
+  --h1-color: hsl(205deg, 20%, 94%);
   --h2-color: #e1e6eb;
-  --h3-color: #d5dce2;
+  --h3-color: hsl(205deg, 18%, 86%);
   --h4-color: #c8d1d8;
-  --h5-color: #bbc6ce;
+  --h5-color: hsl(205deg, 16%, 77%);
   --h6-color: #afbbc4;
-  --muted-color: #73828c;
+  --muted-color: hsl(205deg, 10%, 50%);
   --muted-border-color: #1f2d38;
-  --primary: #1095c1;
+  --primary: hsl(195deg, 85%, 41%);
-  --primary-hover: #1ab3e6;
+  --primary-hover: hsl(195deg, 80%, 50%);
   --primary-focus: rgba(16, 149, 193, 0.25);
   --primary-inverse: #fff;
-  --secondary: #596b78;
+  --secondary: hsl(205deg, 15%, 41%);
-  --secondary-hover: #73828c;
+  --secondary-hover: hsl(205deg, 10%, 50%);
   --secondary-focus: rgba(115, 130, 140, 0.25);
   --secondary-inverse: #fff;
-  --contrast: #edf0f3;
+  --contrast: hsl(205deg, 20%, 94%);
   --contrast-hover: #fff;
   --contrast-focus: rgba(115, 130, 140, 0.25);
   --contrast-inverse: #000;
@@ -355,8 +383,8 @@ kbd {
   --form-element-active-background-color: var(--form-element-background-color);
   --form-element-active-border-color: var(--primary);
   --form-element-focus-color: var(--primary-focus);
-  --form-element-disabled-background-color: #2c3d49;
+  --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
-  --form-element-disabled-border-color: #415462;
+  --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
   --form-element-disabled-opacity: 0.5;
   --form-element-invalid-border-color: #b71c1c;
   --form-element-invalid-active-border-color: #c62828;
@@ -368,7 +396,7 @@ kbd {
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
   --range-border-color: #24333e;
-  --range-active-border-color: #2c3d49;
+  --range-active-border-color: hsl(205deg, 25%, 23%);
   --range-thumb-border-color: var(--background-color);
   --range-thumb-color: var(--secondary);
   --range-thumb-hover-color: var(--secondary-hover);
@@ -379,20 +407,30 @@ kbd {
   --code-color: var(--muted-color);
   --code-kbd-background-color: var(--contrast);
   --code-kbd-color: var(--contrast-inverse);
-  --code-tag-color: #a65980;
+  --code-tag-color: hsl(330deg, 30%, 50%);
-  --code-property-color: #599fa6;
+  --code-property-color: hsl(185deg, 30%, 50%);
-  --code-value-color: #8c8473;
+  --code-value-color: hsl(40deg, 10%, 50%);
   --code-comment-color: #4d606d;
   --accordion-border-color: var(--muted-border-color);
   --accordion-active-summary-color: var(--primary);
   --accordion-close-summary-color: var(--color);
   --accordion-open-summary-color: var(--muted-color);
   --card-background-color: #141e26;
-  --card-border-color: #11191f;
+  --card-border-color: var(--card-background-color);
-  --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
+  --card-box-shadow:
-    0 0.125rem 2rem rgba(0, 0, 0, 0.12),
+    0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
-    0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
+    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);
   --card-sectionning-background-color: #18232c;
+  --dropdown-background-color: hsl(205deg, 30%, 15%);
+  --dropdown-border-color: #24333e;
+  --dropdown-box-shadow: var(--card-box-shadow);
+  --dropdown-color: var(--color);
+  --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
   --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
   --progress-background-color: #24333e;
   --progress-color: var(--primary);
@@ -401,6 +439,8 @@ kbd {
   --tooltip-color: var(--contrast-inverse);
   --icon-checkbox: 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='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-chevron: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-chevron-button: 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='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-chevron-button-inverse: 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='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-close: 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='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
   --icon-date: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
   --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='rgba(183, 28, 28, 0.999)' 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");
@@ -419,6 +459,7 @@ kbd {
 *::before,
 *::after {
   box-sizing: border-box;
+  background-repeat: no-repeat;
 }
 
 ::before,
@@ -427,10 +468,11 @@ kbd {
   vertical-align: inherit;
 }
 
-html {
+:where(:root) {
+  -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
   text-rendering: optimizeLegibility;
   background-color: var(--background-color);
   color: var(--color);
@@ -438,6 +480,7 @@ html {
   font-size: var(--font-size);
   line-height: var(--line-height);
   font-family: var(--font-family);
+  overflow-wrap: break-word;
   cursor: default;
   -moz-tab-size: 4;
   -o-tab-size: 4;
@@ -566,21 +609,6 @@ sup {
   top: -0.5em;
 }
 
-dl dl,
-dl ol,
-dl ul,
-ol dl,
-ul dl {
-  margin: 0;
-}
-
-ol ol,
-ol ul,
-ul ol,
-ul ul {
-  margin: 0;
-}
-
 address,
 blockquote,
 dl,
@@ -599,7 +627,8 @@ ul {
   font-size: var(--font-size);
 }
 
-a {
+a,
+[role=link] {
   --color: var(--primary);
   --background-color: transparent;
   outline: none;
@@ -608,29 +637,37 @@ a {
   -webkit-text-decoration: var(--text-decoration);
   text-decoration: var(--text-decoration);
 }
-a:hover, a:active, a:focus {
+a:is([aria-current], :hover, :active, :focus),
+[role=link]:is([aria-current], :hover, :active, :focus) {
   --color: var(--primary-hover);
   --text-decoration: underline;
 }
-a:focus {
+a:focus,
+[role=link]:focus {
   --background-color: var(--primary-focus);
 }
-a.secondary {
+a.secondary,
+[role=link].secondary {
   --color: var(--secondary);
 }
-a.secondary:hover, a.secondary:active, a.secondary:focus {
+a.secondary:is([aria-current], :hover, :active, :focus),
+[role=link].secondary:is([aria-current], :hover, :active, :focus) {
   --color: var(--secondary-hover);
 }
-a.secondary:focus {
+a.secondary:focus,
+[role=link].secondary:focus {
   --background-color: var(--secondary-focus);
 }
-a.contrast {
+a.contrast,
+[role=link].contrast {
   --color: var(--contrast);
 }
-a.contrast:hover, a.contrast:active, a.contrast:focus {
+a.contrast:is([aria-current], :hover, :active, :focus),
+[role=link].contrast:is([aria-current], :hover, :active, :focus) {
   --color: var(--contrast-hover);
 }
-a.contrast:focus {
+a.contrast:focus,
+[role=link].contrast:focus {
   --background-color: var(--contrast-focus);
 }
 
@@ -672,61 +709,7 @@ h6 {
   --color: var(--h6-color);
 }
 
-address ~ h1, address ~ h2, address ~ h3, address ~ h4, address ~ h5, address ~ h6,
+:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
-blockquote ~ h1,
-blockquote ~ h2,
-blockquote ~ h3,
-blockquote ~ h4,
-blockquote ~ h5,
-blockquote ~ h6,
-dl ~ h1,
-dl ~ h2,
-dl ~ h3,
-dl ~ h4,
-dl ~ h5,
-dl ~ h6,
-figure ~ h1,
-figure ~ h2,
-figure ~ h3,
-figure ~ h4,
-figure ~ h5,
-figure ~ h6,
-form ~ h1,
-form ~ h2,
-form ~ h3,
-form ~ h4,
-form ~ h5,
-form ~ h6,
-ol ~ h1,
-ol ~ h2,
-ol ~ h3,
-ol ~ h4,
-ol ~ h5,
-ol ~ h6,
-p ~ h1,
-p ~ h2,
-p ~ h3,
-p ~ h4,
-p ~ h5,
-p ~ h6,
-pre ~ h1,
-pre ~ h2,
-pre ~ h3,
-pre ~ h4,
-pre ~ h5,
-pre ~ h6,
-table ~ h1,
-table ~ h2,
-table ~ h3,
-table ~ h4,
-table ~ h5,
-table ~ h6,
-ul ~ h1,
-ul ~ h2,
-ul ~ h3,
-ul ~ h4,
-ul ~ h5,
-ul ~ h6 {
   margin-top: var(--typography-spacing-vertical);
 }
 
@@ -754,8 +737,7 @@ small {
   font-size: var(--font-size);
 }
 
-ul,
+:where(dl, ol, ul) {
-ol {
   padding-right: 0;
   padding-left: var(--spacing);
   -webkit-padding-start: var(--spacing);
@@ -763,11 +745,15 @@ ol {
   -webkit-padding-end: 0;
   padding-inline-end: 0;
 }
-ul li,
+:where(dl, ol, ul) li {
-ol li {
   margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
 }
 
+:where(dl, ol, ul) :is(dl, ol, ul) {
+  margin: 0;
+  margin-top: calc(var(--typography-spacing-vertical) * 0.25);
+}
+
 ul li {
   list-style: square;
 }
@@ -821,12 +807,7 @@ del {
 /**
  * Embedded content
  */
-audio,
+:where(audio, canvas, iframe, img, svg, video) {
-canvas,
-iframe,
-img,
-svg,
-video {
   vertical-align: middle;
 }
 
@@ -840,7 +821,7 @@ audio:not([controls]) {
   height: 0;
 }
 
-iframe {
+:where(iframe) {
   border-style: none;
 }
 
@@ -850,7 +831,7 @@ img {
   border-style: none;
 }
 
-svg:not([fill]) {
+:where(svg:not([fill])) {
   fill: currentColor;
 }
 
@@ -875,14 +856,6 @@ button,
   -webkit-appearance: button;
 }
 
-button::-moz-focus-inner,
-[type=button]::-moz-focus-inner,
-[type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
 button {
   display: block;
   width: 100%;
@@ -916,19 +889,11 @@ input[type=reset],
   text-align: center;
   cursor: pointer;
 }
-button:hover, button:active, button:focus,
+button:is([aria-current], :hover, :active, :focus),
-input[type=submit]:hover,
+input[type=submit]:is([aria-current], :hover, :active, :focus),
-input[type=submit]:active,
+input[type=button]:is([aria-current], :hover, :active, :focus),
-input[type=submit]:focus,
+input[type=reset]:is([aria-current], :hover, :active, :focus),
-input[type=button]:hover,
+[role=button]:is([aria-current], :hover, :active, :focus) {
-input[type=button]:active,
-input[type=button]:focus,
-input[type=reset]:hover,
-input[type=reset]:active,
-input[type=reset]:focus,
-[role=button]:hover,
-[role=button]:active,
-[role=button]:focus {
   --background-color: var(--primary-hover);
   --border-color: var(--primary-hover);
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@@ -943,154 +908,70 @@ input[type=reset]:focus,
     0 0 0 var(--outline-width) var(--primary-focus);
 }
 
-button.secondary,
+:is(button, input[type=submit], input[type=button], [role=button]).secondary,
-input[type=submit].secondary,
+input[type=reset] {
-input[type=button].secondary,
-input[type=reset],
-[role=button].secondary {
   --background-color: var(--secondary);
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
   cursor: pointer;
 }
-button.secondary:hover, button.secondary:active, button.secondary:focus,
+:is(button, input[type=submit], input[type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus),
-input[type=submit].secondary:hover,
+input[type=reset]:is([aria-current], :hover, :active, :focus) {
-input[type=submit].secondary:active,
-input[type=submit].secondary:focus,
-input[type=button].secondary:hover,
-input[type=button].secondary:active,
-input[type=button].secondary:focus,
-input[type=reset]:hover,
-input[type=reset]:active,
-input[type=reset]:focus,
-[role=button].secondary:hover,
-[role=button].secondary:active,
-[role=button].secondary:focus {
   --background-color: var(--secondary-hover);
   --border-color: var(--secondary-hover);
   --color: var(--secondary-inverse);
 }
-button.secondary:focus,
+:is(button, input[type=submit], input[type=button], [role=button]).secondary:focus,
-input[type=submit].secondary:focus,
+input[type=reset]:focus {
-input[type=button].secondary:focus,
-input[type=reset]:focus,
-[role=button].secondary:focus {
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--outline-width) var(--secondary-focus);
 }
 
-button.contrast,
+:is(button, input[type=submit], input[type=button], [role=button]).contrast {
-input[type=submit].contrast,
-input[type=button].contrast,
-input[type=reset].contrast,
-[role=button].contrast {
   --background-color: var(--contrast);
   --border-color: var(--contrast);
   --color: var(--contrast-inverse);
 }
-button.contrast:hover, button.contrast:active, button.contrast:focus,
+:is(button, input[type=submit], input[type=button], [role=button]).contrast:is([aria-current], :hover, :active, :focus) {
-input[type=submit].contrast:hover,
-input[type=submit].contrast:active,
-input[type=submit].contrast:focus,
-input[type=button].contrast:hover,
-input[type=button].contrast:active,
-input[type=button].contrast:focus,
-input[type=reset].contrast:hover,
-input[type=reset].contrast:active,
-input[type=reset].contrast:focus,
-[role=button].contrast:hover,
-[role=button].contrast:active,
-[role=button].contrast:focus {
   --background-color: var(--contrast-hover);
   --border-color: var(--contrast-hover);
   --color: var(--contrast-inverse);
 }
-button.contrast:focus,
+:is(button, input[type=submit], input[type=button], [role=button]).contrast:focus {
-input[type=submit].contrast:focus,
-input[type=button].contrast:focus,
-input[type=reset].contrast:focus,
-[role=button].contrast:focus {
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--outline-width) var(--contrast-focus);
 }
 
-button.outline,
+:is(button, input[type=submit], input[type=button], [role=button]).outline,
-input[type=submit].outline,
+input[type=reset].outline {
-input[type=button].outline,
-input[type=reset].outline,
-[role=button].outline {
   --background-color: transparent;
   --color: var(--primary);
 }
-button.outline:hover, button.outline:active, button.outline:focus,
+:is(button, input[type=submit], input[type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus),
-input[type=submit].outline:hover,
+input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
-input[type=submit].outline:active,
-input[type=submit].outline:focus,
-input[type=button].outline:hover,
-input[type=button].outline:active,
-input[type=button].outline:focus,
-input[type=reset].outline:hover,
-input[type=reset].outline:active,
-input[type=reset].outline:focus,
-[role=button].outline:hover,
-[role=button].outline:active,
-[role=button].outline:focus {
   --background-color: transparent;
   --color: var(--primary-hover);
 }
 
-button.outline.secondary,
+:is(button, input[type=submit], input[type=button], [role=button]).outline.secondary,
-input[type=submit].outline.secondary,
+input[type=reset].outline {
-input[type=button].outline.secondary,
-input[type=reset].outline.secondary,
-[role=button].outline.secondary {
   --color: var(--secondary);
 }
-button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
+:is(button, input[type=submit], input[type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus),
-input[type=submit].outline.secondary:hover,
+input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
-input[type=submit].outline.secondary:active,
-input[type=submit].outline.secondary:focus,
-input[type=button].outline.secondary:hover,
-input[type=button].outline.secondary:active,
-input[type=button].outline.secondary:focus,
-input[type=reset].outline.secondary:hover,
-input[type=reset].outline.secondary:active,
-input[type=reset].outline.secondary:focus,
-[role=button].outline.secondary:hover,
-[role=button].outline.secondary:active,
-[role=button].outline.secondary:focus {
   --color: var(--secondary-hover);
 }
 
-button.outline.contrast,
+:is(button, input[type=submit], input[type=button], [role=button]).outline.contrast {
-input[type=submit].outline.contrast,
-input[type=button].outline.contrast,
-input[type=reset].outline.contrast,
-[role=button].outline.contrast {
   --color: var(--contrast);
 }
-button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
+:is(button, input[type=submit], input[type=button], [role=button]).outline.contrast:is([aria-current], :hover, :active, :focus) {
-input[type=submit].outline.contrast:hover,
-input[type=submit].outline.contrast:active,
-input[type=submit].outline.contrast:focus,
-input[type=button].outline.contrast:hover,
-input[type=button].outline.contrast:active,
-input[type=button].outline.contrast:focus,
-input[type=reset].outline.contrast:hover,
-input[type=reset].outline.contrast:active,
-input[type=reset].outline.contrast:focus,
-[role=button].outline.contrast:hover,
-[role=button].outline.contrast:active,
-[role=button].outline.contrast:focus {
   --color: var(--contrast-hover);
 }
 
-button[disabled],
+:where(button, [type=submit], [type=button], [type=reset], [role=button])[disabled],
-input[type=submit][disabled],
+:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]),
-input[type=button][disabled],
+a[role=button]:not([href]) {
-input[type=reset][disabled],
-a[role=button]:not([href]),
-[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
 }
@@ -1225,19 +1106,13 @@ textarea {
   font-weight: var(--font-weight);
 }
 
-input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,
+input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):is(:active, :focus),
-select:active,
+:where(select, textarea):is(:active, :focus) {
-select:focus,
-textarea:active,
-textarea:focus {
   --background-color: var(--form-element-active-background-color);
 }
 
-input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,
+input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus),
-select:active,
+:where(select, textarea):is(:active, :focus) {
-select:focus,
-textarea:active,
-textarea:focus {
   --border-color: var(--form-element-active-border-color);
 }
 
@@ -1249,15 +1124,15 @@ textarea:focus {
 
 input:not([type=submit]):not([type=button]):not([type=reset])[disabled],
 select[disabled],
-textarea[disabled] {
+textarea[disabled],
+:where(fieldset[disabled]) :is(input:not([type=submit]):not([type=button]):not([type=reset]), select, textarea) {
   --background-color: var(--form-element-disabled-background-color);
   --border-color: var(--form-element-disabled-border-color);
   opacity: var(--form-element-disabled-opacity);
+  pointer-events: none;
 }
 
-input:not([type=checkbox]):not([type=radio])[aria-invalid],
+:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] {
-select:not([type=checkbox]):not([type=radio])[aria-invalid],
-textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
   padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
   padding-left: var(--form-element-spacing-horizontal);
   -webkit-padding-start: var(--form-element-spacing-horizontal);
@@ -1268,50 +1143,28 @@ textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
   background-size: 1rem auto;
   background-repeat: no-repeat;
 }
-input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
-select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
-textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
   background-image: var(--icon-valid);
 }
-input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] {
-select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
-textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
   background-image: var(--icon-invalid);
 }
-input[aria-invalid=false],
+:where(input, select, textarea)[aria-invalid=false] {
-select[aria-invalid=false],
-textarea[aria-invalid=false] {
   --border-color: var(--form-element-valid-border-color);
 }
-input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
+:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
-select[aria-invalid=false]:active,
-select[aria-invalid=false]:focus,
-textarea[aria-invalid=false]:active,
-textarea[aria-invalid=false]:focus {
   --border-color: var(--form-element-valid-active-border-color);
   --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
 }
-input[aria-invalid=true],
+:where(input, select, textarea)[aria-invalid=true] {
-select[aria-invalid=true],
-textarea[aria-invalid=true] {
   --border-color: var(--form-element-invalid-border-color);
 }
-input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
+:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
-select[aria-invalid=true]:active,
-select[aria-invalid=true]:focus,
-textarea[aria-invalid=true]:active,
-textarea[aria-invalid=true]:focus {
   --border-color: var(--form-element-invalid-active-border-color);
   --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
 }
 
-[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
-[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid],
-[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
-[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
-[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid],
-[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true],
-[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
   background-position: center left 0.75rem;
 }
 
@@ -1351,9 +1204,7 @@ select:not([multiple]):not([size]) {
   background-position: center left 0.75rem;
 }
 
-input + small,
+:where(input, select, textarea) + small {
-select + small,
-textarea + small {
   display: block;
   width: 100%;
   margin-top: calc(var(--spacing) * -0.75);
@@ -1361,16 +1212,15 @@ textarea + small {
   color: var(--muted-color);
 }
 
-label > input, label > select, label > textarea {
+label > :where(input, select, textarea) {
   margin-top: calc(var(--spacing) * 0.25);
 }
 
 /**
  * Table
  */
-table {
+:where(table) {
   width: 100%;
-  border-color: inherit;
   border-collapse: collapse;
   border-spacing: 0;
   text-indent: 0;

css/themes/default.css

@@ -19,6 +19,10 @@
   --grid-spacing-horizontal: var(--spacing);
   --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
+  --nav-element-spacing-vertical: 1rem;
+  --nav-element-spacing-horizontal: 0.5rem;
+  --nav-link-spacing-vertical: 0.5rem;
+  --nav-link-spacing-horizontal: 0.5rem;
   --form-label-font-weight: var(--font-weight);
   --transition: 0.2s ease-in-out;
 }
@@ -195,24 +199,24 @@ kbd {
 [data-theme=light],
 :root:not([data-theme=dark]) {
   --background-color: #fff;
-  --color: #415462;
+  --color: hsl(205deg, 20%, 32%);
-  --h1-color: #1b2832;
+  --h1-color: hsl(205deg, 30%, 15%);
   --h2-color: #24333e;
-  --h3-color: #2c3d49;
+  --h3-color: hsl(205deg, 25%, 23%);
   --h4-color: #374956;
-  --h5-color: #415462;
+  --h5-color: hsl(205deg, 20%, 32%);
   --h6-color: #4d606d;
-  --muted-color: #73828c;
+  --muted-color: hsl(205deg, 10%, 50%);
-  --muted-border-color: #edf0f3;
+  --muted-border-color: hsl(205deg, 20%, 94%);
-  --primary: #1095c1;
+  --primary: hsl(195deg, 85%, 41%);
-  --primary-hover: #08769b;
+  --primary-hover: hsl(195deg, 90%, 32%);
   --primary-focus: rgba(16, 149, 193, 0.125);
   --primary-inverse: #fff;
-  --secondary: #596b78;
+  --secondary: hsl(205deg, 15%, 41%);
-  --secondary-hover: #415462;
+  --secondary-hover: hsl(205deg, 20%, 32%);
   --secondary-focus: rgba(89, 107, 120, 0.125);
   --secondary-inverse: #fff;
-  --contrast: #1b2832;
+  --contrast: hsl(205deg, 30%, 15%);
   --contrast-hover: #000;
   --contrast-focus: rgba(89, 107, 120, 0.125);
   --contrast-inverse: #fff;
@@ -225,14 +229,14 @@ kbd {
   --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   --form-element-background-color: transparent;
-  --form-element-border-color: #a2afb9;
+  --form-element-border-color: hsl(205deg, 14%, 68%);
   --form-element-color: var(--color);
   --form-element-placeholder-color: var(--muted-color);
   --form-element-active-background-color: transparent;
   --form-element-active-border-color: var(--primary);
   --form-element-focus-color: var(--primary-focus);
-  --form-element-disabled-background-color: #d5dce2;
+  --form-element-disabled-background-color: hsl(205deg, 18%, 86%);
-  --form-element-disabled-border-color: #a2afb9;
+  --form-element-disabled-border-color: hsl(205deg, 14%, 68%);
   --form-element-disabled-opacity: 0.5;
   --form-element-invalid-border-color: #c62828;
   --form-element-invalid-active-border-color: #d32f2f;
@@ -240,42 +244,54 @@ kbd {
   --form-element-valid-border-color: #388e3c;
   --form-element-valid-active-border-color: #43a047;
   --form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
-  --switch-background-color: #bbc6ce;
+  --switch-background-color: hsl(205deg, 16%, 77%);
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
-  --range-border-color: #d5dce2;
+  --range-border-color: hsl(205deg, 18%, 86%);
-  --range-active-border-color: #bbc6ce;
+  --range-active-border-color: hsl(205deg, 16%, 77%);
   --range-thumb-border-color: var(--background-color);
   --range-thumb-color: var(--secondary);
   --range-thumb-hover-color: var(--secondary-hover);
   --range-thumb-active-color: var(--primary);
   --table-border-color: var(--muted-border-color);
   --table-row-stripped-background-color: #f6f8f9;
-  --code-background-color: #edf0f3;
+  --code-background-color: hsl(205deg, 20%, 94%);
   --code-color: var(--muted-color);
   --code-kbd-background-color: var(--contrast);
   --code-kbd-color: var(--contrast-inverse);
-  --code-tag-color: #b34d80;
+  --code-tag-color: hsl(330deg, 40%, 50%);
-  --code-property-color: #3d888f;
+  --code-property-color: hsl(185deg, 40%, 40%);
-  --code-value-color: #998866;
+  --code-value-color: hsl(40deg, 20%, 50%);
-  --code-comment-color: #a2afb9;
+  --code-comment-color: hsl(205deg, 14%, 68%);
   --accordion-border-color: var(--muted-border-color);
   --accordion-close-summary-color: var(--color);
   --accordion-open-summary-color: var(--muted-color);
   --card-background-color: var(--background-color);
   --card-border-color: var(--muted-border-color);
-  --card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04),
+  --card-box-shadow:
-    0 0.125rem 2rem rgba(27, 40, 50, 0.08),
+    0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
-    0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
+    0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
+    0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
+    0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
+    0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
+    0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
+    0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
   --card-sectionning-background-color: #fbfbfc;
+  --dropdown-background-color: #fbfbfc;
+  --dropdown-border-color: #e1e6eb;
+  --dropdown-box-shadow: var(--card-box-shadow);
+  --dropdown-color: var(--color);
+  --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
   --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
-  --progress-background-color: #d5dce2;
+  --progress-background-color: hsl(205deg, 18%, 86%);
   --progress-color: var(--primary);
   --loading-spinner-opacity: 0.5;
   --tooltip-background-color: var(--contrast);
   --tooltip-color: var(--contrast-inverse);
   --icon-checkbox: 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='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-chevron: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-chevron-button: 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='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-chevron-button-inverse: 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='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-close: 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='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
   --icon-date: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
   --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='rgba(198, 40, 40, 0.999)' 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");
@@ -289,24 +305,24 @@ kbd {
 @media only screen and (prefers-color-scheme: dark) {
   :root:not([data-theme=light]) {
     --background-color: #11191f;
-    --color: #bbc6ce;
+    --color: hsl(205deg, 16%, 77%);
-    --h1-color: #edf0f3;
+    --h1-color: hsl(205deg, 20%, 94%);
     --h2-color: #e1e6eb;
-    --h3-color: #d5dce2;
+    --h3-color: hsl(205deg, 18%, 86%);
     --h4-color: #c8d1d8;
-    --h5-color: #bbc6ce;
+    --h5-color: hsl(205deg, 16%, 77%);
     --h6-color: #afbbc4;
-    --muted-color: #73828c;
+    --muted-color: hsl(205deg, 10%, 50%);
     --muted-border-color: #1f2d38;
-    --primary: #1095c1;
+    --primary: hsl(195deg, 85%, 41%);
-    --primary-hover: #1ab3e6;
+    --primary-hover: hsl(195deg, 80%, 50%);
     --primary-focus: rgba(16, 149, 193, 0.25);
     --primary-inverse: #fff;
-    --secondary: #596b78;
+    --secondary: hsl(205deg, 15%, 41%);
-    --secondary-hover: #73828c;
+    --secondary-hover: hsl(205deg, 10%, 50%);
     --secondary-focus: rgba(115, 130, 140, 0.25);
     --secondary-inverse: #fff;
-    --contrast: #edf0f3;
+    --contrast: hsl(205deg, 20%, 94%);
     --contrast-hover: #fff;
     --contrast-focus: rgba(115, 130, 140, 0.25);
     --contrast-inverse: #000;
@@ -325,8 +341,8 @@ kbd {
     --form-element-active-background-color: var(--form-element-background-color);
     --form-element-active-border-color: var(--primary);
     --form-element-focus-color: var(--primary-focus);
-    --form-element-disabled-background-color: #2c3d49;
+    --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
-    --form-element-disabled-border-color: #415462;
+    --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
     --form-element-disabled-opacity: 0.5;
     --form-element-invalid-border-color: #b71c1c;
     --form-element-invalid-active-border-color: #c62828;
@@ -338,7 +354,7 @@ kbd {
     --switch-color: var(--primary-inverse);
     --switch-checked-background-color: var(--primary);
     --range-border-color: #24333e;
-    --range-active-border-color: #2c3d49;
+    --range-active-border-color: hsl(205deg, 25%, 23%);
     --range-thumb-border-color: var(--background-color);
     --range-thumb-color: var(--secondary);
     --range-thumb-hover-color: var(--secondary-hover);
@@ -349,20 +365,30 @@ kbd {
     --code-color: var(--muted-color);
     --code-kbd-background-color: var(--contrast);
     --code-kbd-color: var(--contrast-inverse);
-    --code-tag-color: #a65980;
+    --code-tag-color: hsl(330deg, 30%, 50%);
-    --code-property-color: #599fa6;
+    --code-property-color: hsl(185deg, 30%, 50%);
-    --code-value-color: #8c8473;
+    --code-value-color: hsl(40deg, 10%, 50%);
     --code-comment-color: #4d606d;
     --accordion-border-color: var(--muted-border-color);
     --accordion-active-summary-color: var(--primary);
     --accordion-close-summary-color: var(--color);
     --accordion-open-summary-color: var(--muted-color);
     --card-background-color: #141e26;
-    --card-border-color: #11191f;
+    --card-border-color: var(--card-background-color);
-    --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
+    --card-box-shadow:
-      0 0.125rem 2rem rgba(0, 0, 0, 0.12),
+      0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
-      0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
+      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);
     --card-sectionning-background-color: #18232c;
+    --dropdown-background-color: hsl(205deg, 30%, 15%);
+    --dropdown-border-color: #24333e;
+    --dropdown-box-shadow: var(--card-box-shadow);
+    --dropdown-color: var(--color);
+    --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
     --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
     --progress-background-color: #24333e;
     --progress-color: var(--primary);
@@ -371,6 +397,8 @@ kbd {
     --tooltip-color: var(--contrast-inverse);
     --icon-checkbox: 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='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
     --icon-chevron: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    --icon-chevron-button: 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='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    --icon-chevron-button-inverse: 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='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
     --icon-close: 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='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
     --icon-date: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
     --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='rgba(183, 28, 28, 0.999)' 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");
@@ -383,24 +411,24 @@ kbd {
 }
 [data-theme=dark] {
   --background-color: #11191f;
-  --color: #bbc6ce;
+  --color: hsl(205deg, 16%, 77%);
-  --h1-color: #edf0f3;
+  --h1-color: hsl(205deg, 20%, 94%);
   --h2-color: #e1e6eb;
-  --h3-color: #d5dce2;
+  --h3-color: hsl(205deg, 18%, 86%);
   --h4-color: #c8d1d8;
-  --h5-color: #bbc6ce;
+  --h5-color: hsl(205deg, 16%, 77%);
   --h6-color: #afbbc4;
-  --muted-color: #73828c;
+  --muted-color: hsl(205deg, 10%, 50%);
   --muted-border-color: #1f2d38;
-  --primary: #1095c1;
+  --primary: hsl(195deg, 85%, 41%);
-  --primary-hover: #1ab3e6;
+  --primary-hover: hsl(195deg, 80%, 50%);
   --primary-focus: rgba(16, 149, 193, 0.25);
   --primary-inverse: #fff;
-  --secondary: #596b78;
+  --secondary: hsl(205deg, 15%, 41%);
-  --secondary-hover: #73828c;
+  --secondary-hover: hsl(205deg, 10%, 50%);
   --secondary-focus: rgba(115, 130, 140, 0.25);
   --secondary-inverse: #fff;
-  --contrast: #edf0f3;
+  --contrast: hsl(205deg, 20%, 94%);
   --contrast-hover: #fff;
   --contrast-focus: rgba(115, 130, 140, 0.25);
   --contrast-inverse: #000;
@@ -419,8 +447,8 @@ kbd {
   --form-element-active-background-color: var(--form-element-background-color);
   --form-element-active-border-color: var(--primary);
   --form-element-focus-color: var(--primary-focus);
-  --form-element-disabled-background-color: #2c3d49;
+  --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
-  --form-element-disabled-border-color: #415462;
+  --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
   --form-element-disabled-opacity: 0.5;
   --form-element-invalid-border-color: #b71c1c;
   --form-element-invalid-active-border-color: #c62828;
@@ -432,7 +460,7 @@ kbd {
   --switch-color: var(--primary-inverse);
   --switch-checked-background-color: var(--primary);
   --range-border-color: #24333e;
-  --range-active-border-color: #2c3d49;
+  --range-active-border-color: hsl(205deg, 25%, 23%);
   --range-thumb-border-color: var(--background-color);
   --range-thumb-color: var(--secondary);
   --range-thumb-hover-color: var(--secondary-hover);
@@ -443,20 +471,30 @@ kbd {
   --code-color: var(--muted-color);
   --code-kbd-background-color: var(--contrast);
   --code-kbd-color: var(--contrast-inverse);
-  --code-tag-color: #a65980;
+  --code-tag-color: hsl(330deg, 30%, 50%);
-  --code-property-color: #599fa6;
+  --code-property-color: hsl(185deg, 30%, 50%);
-  --code-value-color: #8c8473;
+  --code-value-color: hsl(40deg, 10%, 50%);
   --code-comment-color: #4d606d;
   --accordion-border-color: var(--muted-border-color);
   --accordion-active-summary-color: var(--primary);
   --accordion-close-summary-color: var(--color);
   --accordion-open-summary-color: var(--muted-color);
   --card-background-color: #141e26;
-  --card-border-color: #11191f;
+  --card-border-color: var(--card-background-color);
-  --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
+  --card-box-shadow:
-    0 0.125rem 2rem rgba(0, 0, 0, 0.12),
+    0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
-    0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
+    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);
   --card-sectionning-background-color: #18232c;
+  --dropdown-background-color: hsl(205deg, 30%, 15%);
+  --dropdown-border-color: #24333e;
+  --dropdown-box-shadow: var(--card-box-shadow);
+  --dropdown-color: var(--color);
+  --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
   --modal-overlay-background-color: rgba(36, 51, 62, 0.9);
   --progress-background-color: #24333e;
   --progress-color: var(--primary);
@@ -465,6 +503,8 @@ kbd {
   --tooltip-color: var(--contrast-inverse);
   --icon-checkbox: 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='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-chevron: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-chevron-button: 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='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-chevron-button-inverse: 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='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-close: 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='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
   --icon-date: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
   --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='rgba(183, 28, 28, 0.999)' 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");

docs/css/pico.docs.css

@@ -102,6 +102,7 @@ main > aside nav {
   }
 }
 main > aside nav a#toggle-docs-navigation {
+  display: block;
   margin: 0;
   margin-bottom: var(--spacing);
   padding: 0;
@@ -134,14 +135,24 @@ main > aside nav.closed-on-mobile details {
 main > aside nav.open a#toggle-docs-navigation svg.expand {
   display: none;
 }
+main > aside details {
+  padding-bottom: 0;
+}
+main > aside details summary {
+  padding-bottom: 0.5rem;
+}
 main > aside li,
 main > aside summary {
   padding-top: 0;
   padding-bottom: 0;
   font-size: 16px;
 }
+main > aside ul {
+  padding-left: 0.25rem;
+}
 main > aside li a {
-  padding: 0.375rem 0.5rem;
+  --nav-link-spacing-vertical: 0.25rem;
+  --nav-link-spacing-horizontal: 0.75rem;
 }
 main > aside li a svg {
   vertical-align: middle;
@@ -150,8 +161,8 @@ main > aside a.secondary:focus {
   background-color: transparent;
   color: var(--primary-hover);
 }
-main > aside a.active,
+main > aside a[aria-current],
-main > aside a.active:hover {
+main > aside a[aria-current]:hover {
   color: var(--primary);
 }
 main > aside details {
@@ -167,9 +178,9 @@ main > aside details summary::after {
   display: none;
 }
 main > aside details[open] > summary {
-  margin-bottom: calc(var(--spacing) * 0.75);
+  margin-bottom: 0;
 }
-main > aside details[open] > summary:not(:focus) {
+main > aside details[open] > summary:not([role=button]):not(:focus) {
   color: var(--h1-color);
 }
 
@@ -266,6 +277,10 @@ main > aside details[open] > summary:not(:focus) {
   vertical-align: bottom;
 }
 
+#buttons a[role=button] {
+  margin-right: calc(var(--spacing) * 0.5);
+}
+
 #forms div.grid {
   grid-row-gap: 0;
 }
@@ -285,11 +300,6 @@ section > hgroup {
   margin-bottom: calc(var(--typography-spacing-vertical) * 2);
 }
 
-a[role=button] {
-  margin-right: calc(var(--typography-spacing-vertical) / 4);
-  margin-bottom: var(--typography-spacing-vertical);
-}
-
 [role=document] section > h1,
 [role=document] section > h2,
 [role=document] section > h3 {
@@ -390,6 +400,7 @@ dialog.example:not([open]), dialog.example[open=false] {
  * Docs: Navs
  */
 body > nav {
+  --nav-link-spacing-vertical: 1rem;
   -webkit-backdrop-filter: saturate(180%) blur(20px);
   z-index: 99;
   position: fixed;
@@ -409,20 +420,27 @@ body > nav a {
 body > nav svg {
   vertical-align: text-bottom;
 }
-body > nav ul:first-of-type li:first-of-type a {
+body > nav ul:first-of-type {
-  width: 3.5rem;
-  height: 3.5rem;
   margin-left: calc(var(--spacing) * -1);
+}
+body > nav ul:first-of-type li {
+  padding: 0;
+}
+body > nav ul:first-of-type li:first-of-type a {
+  display: block;
+  margin: 0;
   padding: 0;
   background: var(--h1-color);
   color: var(--nav-logo-color);
 }
 body > nav ul:first-of-type li:first-of-type a svg {
+  display: block;
+  width: 3.5rem;
   height: 3.5rem;
 }
 body > nav ul:first-of-type li:nth-of-type(2) {
   display: none;
-  margin-left: var(--spacing);
+  margin-left: calc(var(--spacing) * 1.5);
   color: var(--h1-color);
 }
 @media (min-width: 992px) {

docs/js/commons.js

@@ -2,7 +2,7 @@
  * Add some magic to Pico docs
  *
  * Pico.css - https://picocss.com
- * Copyright 2019-2021 - Licensed under MIT
+ * Copyright 2019-2022 - Licensed under MIT
  */
 
 // Imports

docs/js/commons.min.js

@@ -1 +1 @@
-"use strict";!function(){var e={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){var t=this;document.querySelectorAll(this.buttonsTarget).forEach(function(e){e.addEventListener("click",function(){"dark"==t.scheme?t.scheme="light":t.scheme="dark"},!1)})},addButton:function(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var i=this;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(e){var t="dark"==i.scheme?i.change.dark:i.change.light;e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))})}},t={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init:function(){this.onToggleClick()},onToggleClick:function(){var t=this;this.toggleLink.addEventListener("click",function(e){e.preventDefault(),"closed-on-mobile"==t.state?t.state="open":t.state="closed-on-mobile",t.nav.removeAttribute("class"),t.nav.classList.add(t.state)},!1)},get state(){return this._state},set state(e){this._state=e}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init(),t.init()}();
+"use strict";!function(){const e={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",localStorageKey:"picoPreferedColorScheme",init(){this.scheme=this.schemeFromLocalStorage,this.initSwitchers()},get schemeFromLocalStorage(){return void 0!==window.localStorage&&null!==window.localStorage.getItem(this.localStorageKey)?window.localStorage.getItem(this.localStorageKey):this._scheme},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers(){const e=document.querySelectorAll(this.buttonsTarget);e.forEach(e=>{e.addEventListener("click",()=>{"dark"==this.scheme?this.scheme="light":this.scheme="dark"},!1)})},addButton(e){let t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme(),this.schemeToLocalStorage()},get scheme(){return this._scheme},applyScheme(){document.querySelector("html").setAttribute("data-theme",this.scheme);const e=document.querySelectorAll(this.buttonsTarget);e.forEach(e=>{const t="dark"==this.scheme?this.change.dark:this.change.light;e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))})},schemeToLocalStorage(){void 0!==window.localStorage&&window.localStorage.setItem(this.localStorageKey,this.scheme)}},t={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init(){this.onToggleClick()},onToggleClick(){this.toggleLink.addEventListener("click",e=>{e.preventDefault(),"closed-on-mobile"==this.state?this.state="open":this.state="closed-on-mobile",this.nav.removeAttribute("class"),this.nav.classList.add(this.state)},!1)},get state(){return this._state},set state(e){this._state=e}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init(),t.init()}();

docs/js/customization.js

@@ -2,7 +2,7 @@
  * Customization
  *
  * Pico.css - https://picocss.com
- * Copyright 2019-2021 - Licensed under MIT
+ * Copyright 2019-2022 - Licensed under MIT
  */
 
 // Imports

docs/js/grid.js

@@ -2,7 +2,7 @@
  * Grid
  *
  * Pico.css - https://picocss.com
- * Copyright 2019-2021 - Licensed under MIT
+ * Copyright 2019-2022 - Licensed under MIT
  */
 
 const grid = {

docs/js/grid.min.js

@@ -1 +1 @@
-"use strict";var grid={buttons:{text:{add:"Add column",remove:"Remove column"},target:"#grid article"},grid:{current:4,min:1,max:12,gridTarget:"#grid .grid",codeTarget:"#grid pre code"},init:function(){this.addButtons(),this.generateGrid()},addButtons:function(){var t=this,e=document.createElement("P");e.innerHTML='\n      <button class="secondary add">\n        <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n          <line x1="12" y1="5" x2="12" y2="19"></line>\n          <line x1="5" y1="12" x2="19" y2="12">\'</line>\n        </svg>\n        '.concat(this.buttons.text.add,'\n      </button>\n\n      <button class="secondary remove">\n        <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n          <line x1="5" y1="12" x2="19" y2="12"></line>\n        </svg>\n        ').concat(this.buttons.text.remove,"\n      </button>"),document.querySelector(this.buttons.target).before(e),document.querySelector("#grid button.add").addEventListener("click",function(){t.addColumn()},!1),document.querySelector("#grid button.remove").addEventListener("click",function(){t.removeColumn()},!1)},generateGrid:function(){for(var t="",e='&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n',n=0;n<this.grid.current;n++)t+="<div>"+(n+1)+"</div>",e+="  &lt;<b>div</b>&gt;"+(n+1)+"&lt;/<b>div</b>&gt;\n";e+="&lt;/<b>div</b>&gt;",document.querySelector(this.grid.gridTarget).innerHTML=t,document.querySelector(this.grid.codeTarget).innerHTML=e},addColumn:function(){this.grid.current<this.grid.max&&(this.grid.current++,this.generateGrid())},removeColumn:function(){this.grid.current>this.grid.min&&(this.grid.current--,this.generateGrid())}};grid.init();
+"use strict";const grid={buttons:{text:{add:"Add column",remove:"Remove column"},target:"#grid article"},grid:{current:4,min:1,max:12,gridTarget:"#grid .grid",codeTarget:"#grid pre code"},init(){this.addButtons(),this.generateGrid()},addButtons(){let t=document.createElement("P");t.innerHTML='\n      <button class="secondary add">\n        <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n          <line x1="12" y1="5" x2="12" y2="19"></line>\n          <line x1="5" y1="12" x2="19" y2="12">\'</line>\n        </svg>\n        '.concat(this.buttons.text.add,'\n      </button>\n\n      <button class="secondary remove">\n        <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n          <line x1="5" y1="12" x2="19" y2="12"></line>\n        </svg>\n        ').concat(this.buttons.text.remove,"\n      </button>"),document.querySelector(this.buttons.target).before(t),document.querySelector("#grid button.add").addEventListener("click",()=>{this.addColumn()},!1),document.querySelector("#grid button.remove").addEventListener("click",()=>{this.removeColumn()},!1)},generateGrid(){let e="",r='&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n';for(let t=0;t<this.grid.current;t++)e+="<div>"+(t+1)+"</div>",r+="  &lt;<b>div</b>&gt;"+(t+1)+"&lt;/<b>div</b>&gt;\n";r+="&lt;/<b>div</b>&gt;",document.querySelector(this.grid.gridTarget).innerHTML=e,document.querySelector(this.grid.codeTarget).innerHTML=r},addColumn(){this.grid.current<this.grid.max&&(this.grid.current++,this.generateGrid())},removeColumn(){this.grid.current>this.grid.min&&(this.grid.current--,this.generateGrid())}};grid.init();

docs/js/modal.js

@@ -2,7 +2,7 @@
  * Modal
  *
  * Pico.css - https://picocss.com
- * Copyright 2019-2021 - Licensed under MIT
+ * Copyright 2019-2022 - Licensed under MIT
  */
 
 // Config
@@ -16,7 +16,7 @@ let visibleModal = null;
 // Toggle modal
 const toggleModal = event => {
   event.preventDefault();
-  const modal = document.getElementById(event.target.getAttribute('data-target'));
+  const modal = document.getElementById(event.currentTarget.getAttribute('data-target'));
   (typeof(modal) != 'undefined' && modal != null)
     && isModalOpen(modal) ? closeModal(modal) : openModal(modal)
 }

docs/js/modal.min.js

@@ -1 +1 @@
-"use strict";var isOpenClass="modal-is-open",openingClass="modal-is-opening",closingClass="modal-is-closing",animationDuration=400,visibleModal=null,toggleModal=function(e){e.preventDefault();e=document.getElementById(e.target.getAttribute("data-target"));(void 0!==e&&null!=e&&isModalOpen(e)?closeModal:openModal)(e)},isModalOpen=function(e){return!(!e.hasAttribute("open")||"false"==e.getAttribute("open"))},openModal=function(e){isScrollbarVisible()&&document.documentElement.style.setProperty("--scrollbar-width","".concat(getScrollbarWidth(),"px")),document.documentElement.classList.add(isOpenClass,openingClass),setTimeout(function(){visibleModal=e,document.documentElement.classList.remove(openingClass)},animationDuration),e.setAttribute("open",!0)},closeModal=function(e){visibleModal=null,document.documentElement.classList.add(closingClass),setTimeout(function(){document.documentElement.classList.remove(closingClass,isOpenClass),document.documentElement.style.removeProperty("--scrollbar-width"),e.removeAttribute("open")},animationDuration)};document.addEventListener("click",function(e){null!=visibleModal&&(visibleModal.querySelector("article").contains(e.target)||closeModal(visibleModal))}),document.addEventListener("keydown",function(e){"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)});var getScrollbarWidth=function(){var e=document.createElement("div");e.style.visibility="hidden",e.style.overflow="scroll",e.style.msOverflowStyle="scrollbar",document.body.appendChild(e);var t=document.createElement("div");e.appendChild(t);t=e.offsetWidth-t.offsetWidth;return e.parentNode.removeChild(e),t},isScrollbarVisible=function(){return document.body.scrollHeight>screen.height};
+"use strict";const isOpenClass="modal-is-open",openingClass="modal-is-opening",closingClass="modal-is-closing",animationDuration=400;let visibleModal=null;const toggleModal=e=>{e.preventDefault();e=document.getElementById(e.currentTarget.getAttribute("data-target"));(void 0!==e&&null!=e&&isModalOpen(e)?closeModal:openModal)(e)},isModalOpen=e=>!(!e.hasAttribute("open")||"false"==e.getAttribute("open")),openModal=e=>{isScrollbarVisible()&&document.documentElement.style.setProperty("--scrollbar-width","".concat(getScrollbarWidth(),"px")),document.documentElement.classList.add(isOpenClass,openingClass),setTimeout(()=>{visibleModal=e,document.documentElement.classList.remove(openingClass)},animationDuration),e.setAttribute("open",!0)},closeModal=e=>{visibleModal=null,document.documentElement.classList.add(closingClass),setTimeout(()=>{document.documentElement.classList.remove(closingClass,isOpenClass),document.documentElement.style.removeProperty("--scrollbar-width"),e.removeAttribute("open")},animationDuration)},getScrollbarWidth=(document.addEventListener("click",e=>{if(null!=visibleModal){const t=visibleModal.querySelector("article");t.contains(e.target)||closeModal(visibleModal)}}),document.addEventListener("keydown",e=>{"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)}),()=>{const e=document.createElement("div");e.style.visibility="hidden",e.style.overflow="scroll",e.style.msOverflowStyle="scrollbar",document.body.appendChild(e);var t=document.createElement("div"),t=(e.appendChild(t),e.offsetWidth-t.offsetWidth);return e.parentNode.removeChild(e),t}),isScrollbarVisible=()=>document.body.scrollHeight>screen.height;

docs/js/src/color-picker.js

@@ -2,7 +2,7 @@
  * Color Picker
  *
  * Pico.css - https://picocss.com
- * Copyright 2019-2021 - Licensed under MIT
+ * Copyright 2019-2022 - Licensed under MIT
  */
 
 export const colorPicker = {

docs/js/src/theme-switcher.js

@@ -2,7 +2,7 @@
  * Theme switcher
  *
  * Pico.css - https://picocss.com
- * Copyright 2019-2021 - Licensed under MIT
+ * Copyright 2019-2022 - Licensed under MIT
  */
 
 export const themeSwitcher = {
@@ -14,13 +14,24 @@ export const themeSwitcher = {
     dark: '<i>Turn off dark mode</i>',
   },
   buttonsTarget: '.theme-switcher',
+  localStorageKey: 'picoPreferedColorScheme',
 
   // Init
   init() {
-    this.scheme = this._scheme;
+    this.scheme = this.schemeFromLocalStorage;
     this.initSwitchers();
   },
 
+  // Get color scheme from local storage
+  get schemeFromLocalStorage() {
+    if (typeof window.localStorage !== 'undefined') {
+      if (window.localStorage.getItem(this.localStorageKey) !== null) {
+        return window.localStorage.getItem(this.localStorageKey);
+      }
+    }
+    return this._scheme;
+  },
+
   // Prefered color scheme
   get preferedColorScheme() {
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
@@ -52,6 +63,7 @@ export const themeSwitcher = {
       this._scheme = scheme;
     }
     this.applyScheme();
+    this.schemeToLocalStorage();
   },
 
   // Get scheme
@@ -71,6 +83,13 @@ export const themeSwitcher = {
       }
     );
   },
+
+  // Store scheme to local storage
+  schemeToLocalStorage() {
+    if (typeof window.localStorage !== 'undefined') {
+      window.localStorage.setItem(this.localStorageKey, this.scheme);
+    }
+  },
 };
 
 export default themeSwitcher;

docs/js/src/toggle-navigation.js

@@ -2,7 +2,7 @@
  * Toggle navigation
  *
  * Pico.css - https://picocss.com
- * Copyright 2019-2021 - Licensed under MIT
+ * Copyright 2019-2022 - Licensed under MIT
  */
 
 export const toggleNavigation = {

docs/scss/components/_nav.scss

@@ -3,6 +3,8 @@
  */
 
 body > nav {
+  --nav-link-spacing-vertical: 1rem;
+
   -webkit-backdrop-filter: saturate(180%) blur(20px);
   z-index: 99;
   position: fixed;
@@ -26,31 +28,38 @@ body > nav {
   }
 
   // Band & Title
-  ul:first-of-type li {
+  ul:first-of-type {
-    // Brand
+    margin-left: calc(var(--spacing) * -1);
-    &:first-of-type {
-      a {
-        width: 3.5rem;
-        height: 3.5rem;
-        margin-left: calc(var(--spacing) * -1);
-        padding: 0;
-        background: var(--h1-color);
-        color: var(--nav-logo-color);
 
-        svg {
+    li {
-          height: 3.5rem;
+      padding: 0;
+  
+      // Brand
+      &:first-of-type {
+        a {
+          display: block;
+          margin: 0;
+          padding: 0;
+          background: var(--h1-color);
+          color: var(--nav-logo-color);
+  
+          svg {
+            display: block;
+            width: 3.5rem;
+            height: 3.5rem;
+          }
         }
       }
-    }
   
-    // Title
+      // Title
-    &:nth-of-type(2) {
+      &:nth-of-type(2) {
-      display: none;
+        display: none;
-      margin-left: var(--spacing);
+        margin-left: calc(var(--spacing) * 1.5);
-      color: var(--h1-color);
+        color: var(--h1-color);
   
-      @media (min-width: map-get($breakpoints, "lg")) {
+        @media (min-width: map-get($breakpoints, "lg")) {
-        display: inline;
+          display: inline;
+        }
       }
     }
   }

docs/scss/content/_typography.scss

@@ -10,11 +10,6 @@ section > hgroup {
   margin-bottom: calc(var(--typography-spacing-vertical) * 2);
 }
 
-a[role="button"] {
-  margin-right: calc(var(--typography-spacing-vertical) / 4);
-  margin-bottom: var(--typography-spacing-vertical);
-}
-
 [role="document"] {
   section > h1,
   section > h2,

docs/scss/layout/_aside.scss

@@ -17,6 +17,7 @@ main > aside {
     }
 
     a#toggle-docs-navigation {
+      display: block;
       margin: 0;
       margin-bottom: var(--spacing);
       padding: 0;
@@ -65,6 +66,13 @@ main > aside {
     }
   }
 
+  details {
+    padding-bottom: 0;
+
+    summary {
+      padding-bottom: 0.5rem;
+    }
+  }
 
   li,
   summary {
@@ -73,8 +81,13 @@ main > aside {
     font-size: 16px;
   }
 
+  ul {
+    padding-left: 0.25rem;
+  }
+
   li a {
-    padding: 0.375rem 0.5rem;
+    --nav-link-spacing-vertical: 0.25rem;
+    --nav-link-spacing-horizontal: 0.75rem;
 
     svg {
       vertical-align: middle;
@@ -86,8 +99,8 @@ main > aside {
     color: var(--primary-hover);
   }
 
-  a.active,
+  a[aria-current],
-  a.active:hover {
+  a[aria-current]:hover {
     color: var(--primary);
   }
 
@@ -107,9 +120,9 @@ main > aside {
 
     &[open] {
       > summary {
-        margin-bottom: calc(var(--spacing) * 0.75);
+        margin-bottom: 0;
 
-        &:not(:focus) {
+        &:not([role=button]):not(:focus) {
           color: var(--h1-color);
         }
       }

docs/scss/layout/_documentation.scss

@@ -117,6 +117,13 @@
   }
 }
 
+// Docs: Buttons
+#buttons {
+  a[role="button"] {
+    margin-right: calc(var(--spacing) * 0.5);
+  }
+}
+
 // Docs: Forms
 #forms div.grid {
   grid-row-gap: 0;

docs/src/_sidebar.html

@@ -43,6 +43,7 @@
       <ul>
         <li><a href="./accordions.html" id="accordions-link" class="secondary">Accordions</a></li>
         <li><a href="./cards.html" id="cards-link" class="secondary">Cards</a></li>
+        <li><a href="./dropdowns.html" id="dropdowns-link" class="secondary">Dropdowns</a></li>
         <li><a href="./modal.html" id="modal-link" class="secondary">Modal</a></li>
         <li><a href="./navs.html" id="navs-link" class="secondary">Navs</a></li>
         <li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li>
@@ -67,7 +68,7 @@
   <script>
     const activeLink = document.querySelector(`aside a#${props.active}`);
     const parentAccordion = activeLink.closest('details');
-    activeLink.classList.add('active');
+    activeLink.setAttribute('aria-current', 'page');
     parentAccordion.setAttribute('open', 'true');
   </script>
 </aside>

docs/src/accordions.html

@@ -22,11 +22,11 @@
           </hgroup>
           <article aria-label="Accordions examples">
             <details>
-              <summary>Collapsible elements 1</summary>
+              <summary>Accordion 1</summary>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.</p>
             </details>
             <details open>
-              <summary>Collapsible elements 2</summary>
+              <summary>Accordion 2</summary>
               <ul>
                 <li>Vestibulum id elit quis massa interdum sodales.</li>
                 <li>Nunc quis eros vel odio pretium tincidunt nec quis neque.</li>
@@ -37,18 +37,54 @@
             <footer class="code">
 
 <pre><code>&lt;<b>details</b>&gt;
-  &lt;<b>summary</b>&gt;Collapsible elements 1&lt;/<b>summary</b>&gt;
+  &lt;<b>summary</b>&gt;Accordion 1&lt;/<b>summary</b>&gt;
   &lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
 &lt;/<b>details</b>&gt;
 
 &lt;<b>details</b> <i>open</i>&gt;
-  &lt;<b>summary</b>&gt;Collapsible elements 2&lt;/<b>summary</b>&gt;
+  &lt;<b>summary</b>&gt;Accordion 2&lt;/<b>summary</b>&gt;
   &lt;<b>ul</b>&gt;
     &lt;<b>li</b>&gt;…&lt;/<b>li</b>&gt;
     &lt;<b>li</b>&gt;…&lt;/<b>li</b>&gt;
   &lt;/<b>ul</b>&gt;
 &lt;/<b>details</b>&gt;</code></pre>
 
+            </footer>
+          </article>
+          <p><code><i>role</i>=<u>"button"</u></code> can be used to turn <code>&lt;<b>summary</b>&gt;</code> into a button.</p>
+          <article aria-label="Accordions buttons examples">
+            <details>
+              <summary role="button">Accordion 1</summary>
+              <p>Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est egestas vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.</p>
+            </details>
+            <details>
+              <summary role="button" class="secondary">Accordion 2</summary>
+              <p>Quisque porta dictum ipsum nec vestibulum. Suspendisse non mi ac tellus scelerisque egestas. Sed vel nisi laoreet, rhoncus urna quis, luctus risus. Donec vitae molestie felis.</p>
+            </details>
+            <details>
+              <summary role="button" class="contrast">Accordion 3</summary>
+              <p>Praesent quam ipsum, condimentum non augue at, porttitor interdum tellus. Curabitur ultrices consectetur leo, a placerat mauris malesuada et. In quis varius risus.</p>
+            </details>
+            <footer class="code">
+
+<pre><code><em>&lt;!-- Primary --&gt;</em>
+&lt;<b>details</b>&gt;
+  &lt;<b>summary</b> <i>role</i>=<u>"button"</u>&gt;Accordion 1&lt;/<b>summary</b>&gt;
+  &lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
+&lt;/<b>details</b>&gt;
+
+<em>&lt;!-- Secondary --&gt;</em>
+&lt;<b>details</b>&gt;
+  &lt;<b>summary</b> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;Accordion 2&lt;/<b>summary</b>&gt;
+  &lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
+&lt;/<b>details</b>&gt;
+
+<em>&lt;!-- Contrast --&gt;</em>
+&lt;<b>details</b>&gt;
+  &lt;<b>summary</b> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>&gt;Accordion 3&lt;/<b>summary</b>&gt;
+  &lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
+&lt;/<b>details</b>&gt;
+
             </footer>
           </article>
         </section>

docs/src/buttons.html

@@ -42,6 +42,7 @@
             </footer>
           </article>
           <p>Buttons come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
+          <p>ℹ️&nbsp;These classes are not available in the <a href="classless.html">class-less version</a>.</p>
           <article aria-label="Buttons styles examples">
             <a href="#" onclick="event.preventDefault()" role="button" class="secondary">Secondary</a>
             <a href="#" onclick="event.preventDefault()" role="button" class="contrast">Contrast</a>

docs/src/containers.html

@@ -61,7 +61,7 @@
               </tbody>
             </table>
           </figure>
-          <p><code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct childs of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code></p>
+          <p><code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct children of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code></p>
           <p><code>&lt;<b>section</b>&gt;</code> provides a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
         </section>
 

docs/src/dropdowns.html

@@ -0,0 +1,379 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    ${require('./_head.html')
+      title="Dropdowns"
+      description="Dropdown menus and custom selects without JavaScript." 
+      canonical="dropdowns.html"
+    }
+  </head>
+
+  <body>
+    ${require('./_nav.html')}
+
+    <main class="container" id="docs">
+      ${require('./_sidebar.html') active="dropdowns-link"}
+
+      <div role="document">
+        <section id="dropdown">
+          <hgroup>
+            <h1>Dropdowns</h1>
+            <h2>Dropdown menus and custom selects without JavaScript.</h2>
+          </hgroup>
+          <p>Dropdowns are built with <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code> as a wrapper and <code>&lt;<b>summary</b>&gt;</code> and <code>&lt;<b>ul</b>&gt;</code> as direct children.</p>
+          <p>For style consistency with the form elements, dropdowns are styled like a <a href="forms.html">&lt;select&gt;</a> by default.</p>
+          <article aria-label="Dropdowns as Selects">
+            <details role="list">
+              <summary aria-haspopup="listbox">Dropdown</summary>
+              <ul role="listbox">
+                <li><a href="#" onclick="event.preventDefault()">Action</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
+              </ul>
+            </details>
+            <select required>
+              <option value="" disabled selected>Select</option>
+              <option>Option</option>
+              <option>Another option</option>
+              <option>Something else here</option>
+            </select>
+            <footer class="code">
+
+<pre><code><em>&lt;!-- Dropdown --&gt;</em>
+&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
+  &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
+  &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+  &lt;/<b>ul</b>&gt;
+&lt;/<b>details</b>&gt;
+
+<em>&lt;!-- Select --&gt;</em>
+&lt;<b>select</b></u>&gt;
+  &lt;<b>option</b> <i>value</i>=<u>""</u> <i>disabled selected</i>&gt;Select&lt;/<b>option</b>&gt;
+  &lt;<b>option</b>&gt;…&lt;/<b>option</b>&gt;
+&lt;/<b>select</b>&gt;
+</code></pre>
+
+            </footer> 
+          </article>
+          <p><code>&lt;<b>summary</b> <i>role</i>=<u>"button"</u>&gt;</code> transforms the dropdown into a button.</p>
+          <article aria-label="Dropdowns as Buttons">
+            <details role="list">
+              <summary aria-haspopup="listbox" role="button">Dropdown as a button 1</summary>
+              <ul role="listbox">
+                <li><a href="#" onclick="event.preventDefault()">Action</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
+              </ul>
+            </details>
+            <details role="list">
+              <summary aria-haspopup="listbox" role="button" class="secondary">Dropdown as a button 2</summary>
+              <ul role="listbox">
+                <li><a href="#" onclick="event.preventDefault()">Action</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
+              </ul>
+            </details>
+            <details role="list">
+              <summary aria-haspopup="listbox" role="button" class="contrast">Dropdown as a button 3</summary>
+              <ul role="listbox">
+                <li><a href="#" onclick="event.preventDefault()">Action</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
+              </ul>
+            </details>
+            <footer class="code">
+
+<pre><code><em>&lt;!-- Primary --&gt;</em>
+&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
+  &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>&gt;
+    Dropdown as a button 1
+  &lt;/<b>summary</b>&gt;
+  &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+  &lt;/<b>ul</b>&gt;
+&lt;/<b>details</b>&gt;
+
+<em>&lt;!-- Secondary --&gt;</em>
+&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
+  &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;
+    Dropdown as a button 2
+  &lt;/<b>summary</b>&gt;
+  &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+  &lt;/<b>ul</b>&gt;
+&lt;/<b>details</b>&gt;
+
+<em>&lt;!-- Contrast --&gt;</em>
+&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
+  &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>&gt;
+    Dropdown as a button 3
+  &lt;/<b>summary</b>&gt;
+  &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+  &lt;/<b>ul</b>&gt;
+&lt;/<b>details</b>&gt;
+</code></pre>
+              
+            </footer> 
+          </article>
+          <p>Dropdowns can be used as custom selects with <code>&lt;<b>input</b> <i>type</i>=<u>"radio"</u>&gt;</code> or  <code>&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;</code></p>
+          <article aria-label="Dropdowns with radio buttons or checkboxes">
+            <details role="list">
+              <summary aria-haspopup="listbox">Select single element</summary>
+              <ul role="listbox">
+                <li>
+                  <label for="small">
+                    <input type="radio" id="small" name="size" value="small" />
+                    Small
+                  </label>
+                </li>
+                <li>
+                  <label for="medium">
+                    <input type="radio" id="medium" name="size" value="medium" />
+                    Medium
+                  </label>
+                </li>
+                <li>
+                  <label for="large">
+                    <input type="radio" id="large" name="size" value="large" />
+                    Large
+                  </label>
+                </li>
+              </ul>
+            </details>
+            <details role="list">
+              <summary aria-haspopup="listbox">Select multiple elements</summary>
+              <ul role="listbox">
+                <li>
+                  <label>
+                    <input type="checkbox" />
+                    Banana
+                  </label>
+                </li>
+                <li>
+                  <label>
+                    <input type="checkbox" />
+                    Watermelon
+                  </label>
+                </li>
+                <li>
+                  <label>
+                    <input type="checkbox" />
+                    Apple
+                  </label>
+                </li>
+              </ul>
+            </details>
+            <footer class="code">
+
+<pre><code><em>&lt;!-- With radio buttons --&gt;</em>
+&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
+  &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
+  &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
+    &lt;<b>li</b>&gt;
+      &lt;<b>label</b> <i>for</i>=<u>"small"</u>&gt;
+        &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"small"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"small"</u>&gt;
+        Small
+      &lt;/<b>label</b>&gt;
+    &lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;
+      &lt;<b>label</b> <i>for</i>=<u>"medium"</u>&gt;
+        &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"medium"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"medium"</u>&gt;
+        Medium
+      &lt;/<b>label</b>&gt;
+    &lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;
+      &lt;<b>label</b> <i>for</i>=<u>"large"</u>&gt;
+        &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt;
+        Large
+      &lt;/<b>label</b>&gt;
+    &lt;/<b>li</b>&gt;
+  &lt;/<b>ul</b>&gt;
+&lt;/<b>details</b>&gt;
+
+<em>&lt;!-- With checkboxes --&gt;</em>
+&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
+  &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
+  &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
+    &lt;<b>li</b>&gt;
+      &lt;<b>label</b>&gt;
+        &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
+        Banana
+      &lt;/<b>label</b>&gt;
+    &lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;
+      &lt;<b>label</b>&gt;
+        &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
+        Watermelon
+      &lt;/<b>label</b>&gt;
+    &lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;
+      &lt;<b>label</b>&gt;
+        &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
+        Apple
+      &lt;/<b>label</b>&gt;
+    &lt;/<b>li</b>&gt;
+  &lt;/<b>ul</b>&gt;
+&lt;/<b>details</b>&gt;
+              
+            </footer> 
+          </article>
+          <p>Dropdowns can be used inside a <a href="navs.html">&lt;nav&gt;</a> with a nested <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code></p>
+          <p>Example with a dropdown as a link:</p>
+          <article aria-label="Dropdowns inside a nav">
+            <nav>
+              <ul>
+                <li><strong>Brand</strong></li>
+              </ul>
+              <ul>
+                <li><a href="#" onclick="event.preventDefault()">Link</a></li>
+                <li>
+                  <details role="list" dir="rtl">
+                    <summary aria-haspopup="listbox" role="link">Dropdown</summary>
+                    <ul role="listbox">
+                      <li><a href="#" onclick="event.preventDefault()">Action</a></li>
+                      <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
+                      <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
+                    </ul>
+                  </details>
+                </li>
+              </ul>
+            </nav>
+            <footer class="code">
+
+<pre><code>&lt;<b>nav</b>&gt;
+  &lt;<b>ul</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
+  &lt;/<b>ul</b>&gt;
+  &lt;<b>ul</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;
+      &lt;<b>details</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>&gt;
+        &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"link"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
+        &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
+          &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+          &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+          &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+        &lt;/<b>ul</b>&gt;
+      &lt;/<b>details</b>&gt;
+    &lt;/<b>li</b>&gt;
+  &lt;/<b>ul</b>&gt;
+&lt;/<b>nav</b>&gt;</code></pre>
+
+            </footer> 
+          </article>
+          <p>Example with a default dropdown and a dropdown as a button:</p>
+          <article aria-label="Dropdowns inside a nav">
+            <nav>
+              <ul>
+                <li>
+                  <details role="list">
+                    <summary aria-haspopup="listbox">Dropdown</summary>
+                    <ul role="listbox">
+                      <li><a href="#" onclick="event.preventDefault()">Action</a></li>
+                      <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
+                      <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
+                    </ul>
+                  </details>
+                </li>
+                <li>
+                  <details role="list">
+                    <summary aria-haspopup="listbox" role="button">Dropdown</summary>
+                    <ul role="listbox">
+                      <li><a href="#" onclick="event.preventDefault()">Action</a></li>
+                      <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
+                      <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
+                    </ul>
+                  </details>
+                </li>
+              </ul>
+            </nav>
+            <footer class="code">
+
+<pre><code>&lt;<b>nav</b>&gt;
+  &lt;<b>ul</b>&gt;
+    &lt;<b>li</b>&gt;
+      &lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
+        &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
+        &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
+          &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+          &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+          &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+        &lt;/<b>ul</b>&gt;
+      &lt;/<b>details</b>&gt;
+    &lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;
+      &lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
+        &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
+        &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
+          &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+          &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+          &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+        &lt;/<b>ul</b>&gt;
+      &lt;/<b>details</b>&gt;
+    &lt;/<b>li</b>&gt;
+  &lt;/<b>ul</b>&gt;
+&lt;/<b>nav</b>&gt;</code></pre>
+
+            </footer> 
+          </article>
+          <p>You can also use  <code>&lt;<b>li</b> <i>role</i>=<u>"list"</u>&gt;</code> as a nested wrapper to render a list as a dropdown.</p>
+          <p>ℹ️&nbsp;This syntax is experimental. In this version, the dropdown menu is triggered on hover.</p>
+          <article aria-label="Dropdowns inside a nav">
+            <nav>
+              <ul>
+                <li><strong>Brand</strong></li>
+              </ul>
+              <ul>
+                <li><a href="#" onclick="event.preventDefault()">Link</a></li>
+                <li><a href="#" onclick="event.preventDefault()">Link</a></li>
+                <li role="list" dir="rtl">
+                  <a href="#" onclick="event.preventDefault()" aria-haspopup="listbox">Dropdown</a>
+                  <ul role="listbox">
+                    <li><a href="#" onclick="event.preventDefault()">Action</a></li>
+                    <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
+                    <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
+                  </ul>
+                </li>
+              </ul>
+            </nav>
+            <footer class="code">
+
+<pre><code>&lt;<b>nav</b>&gt;
+  &lt;<b>ul</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
+  &lt;/<b>ul</b>&gt;
+  &lt;<b>ul</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>&gt;
+      &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>a</b>&gt;
+      &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
+        &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+        &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+        &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+      &lt;/<b>ul</b>&gt;
+    &lt;/<b>li</b>&gt;
+  &lt;/<b>ul</b>&gt;
+&lt;/<b>nav</b>&gt;</code></pre>
+
+            </footer> 
+          </article>
+        </section>
+
+        ${require('./_footer.html')}
+
+      </div>
+    </main>
+    <script src="js/commons.min.js"></script>
+  </body>
+</html>

docs/src/forms.html

@@ -210,8 +210,10 @@
 
             </footer>
           </article>
+
           <p>Others input types:</p>
-          <article aria-label="File browser, range slider, date, time, color examples">
+          <article aria-label="Search, file browser, range slider, date, time, color examples">
+            <input type="search" id="search" name="search" placeholder="Search">
             <label for="file">File browser
               <input type="file" id="file" name="file">
             </label>
@@ -229,7 +231,10 @@
             </label>
             <footer class="code">
 
-<pre><code><em>&lt;!-- File browser --&gt;</em>
+<pre><code><em>&lt;!-- Search --&gt;</em>
+&lt;<b>input</b> <i>type</i>=<u>"search"</u> <i>id</i>=<u>"search"</u> <i>name</i>=<u>"search"</u> <i>placeholder</i>=<u>"Search"</u>&gt;
+  
+&lt;!-- File browser --&gt;</em>
 &lt;<b>label</b> <i>for</i>=<u>"file"</u>&gt;File browser
   &lt;<b>input</b> <i>type</i>=<u>"file"</u> <i>id</i>=<u>"file"</u> <i>name</i>=<u>"file"</u>&gt;
 &lt;/<b>label</b>&gt;

docs/src/index.html

@@ -3,7 +3,7 @@
   <head>
     ${require('./_head.html') 
       title="Documentation" 
-      description="Pico works without package manager or dependencies! There are 3 ways to get started with pico.css: manually, from a CDN, with NPM."
+      description="Pico works without package manager or dependencies! There are 4 ways to get started with pico.css: manually, from a CDN, with NPM, or with Composer."
       canonical=""
     }
   </head>
@@ -20,7 +20,7 @@
             <h1>Usage</h1>
             <h2>Works without package manager or dependencies 🙂!</h2>
           </hgroup>
-          <p>There are 3 ways to get started with pico.css:</p>
+          <p>There are 4 ways to get started with pico.css:</p>
           <h3>Install manually</h3>
           <p><a href="https://github.com/picocss/pico/archive/refs/heads/master.zip">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code>&lt;<b>head</b>&gt;</code> of your website.</p>
           <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre>
@@ -29,6 +29,8 @@
           <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.min.css"</u>&gt;</code></pre>
           <h3>Install with NPM</h3>
           <pre><code><b>npm</b> <i>install</i> <u>@picocss/pico</u></code></pre>
+          <h3>Install with Composer</h3>
+          <pre><code><b>composer</b> <i>require</i> <u>picocss/pico</u></code></pre>          
           <p>Starter HTML template:</p>
 
 <pre><code><em>&lt;!doctype html&gt;</em>

docs/src/modal.html

@@ -70,7 +70,6 @@
             </article>
           </dialog>
 
-
 <pre><code>&lt;<b>dialog</b> <i>open</i>&gt;
   &lt;<b>article</b>&gt;
     &lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt;
@@ -139,9 +138,7 @@
           </article>
 
           <p>Pico does not include JavaScript code. You will need to implement your JS to interact with modals.</p>
-
           <p>As a starting point, you can look at the JavaScript used in this documentation: <a href="https://github.com/picocss/pico/blob/master/docs/js/modal.js">js/modal.js</a>.</p>
-
           <p>To make a modal appear, add the <code><i>open</i></code> attribute to the <code>&lt;<b>dialog</b></u>&gt;</code> container.</p>
 
 <pre><code><em>&lt;!-- Open modal--&gt;</em>
@@ -160,9 +157,8 @@
 </code></pre>
 
           <h2>Utilities</h2>
-
           <p>Modals come with 3 utility classes.</p>
-
+          <p>ℹ️&nbsp;These classes are not available in the <a href="classless.html">class-less version</a>.</p>
           <p><code>.modal-is-open</code> prevents any scrolling and interactions below the modal.</p>
 
 <pre><code><em>&lt;!doctype html&gt;</em>

docs/src/navs.html

@@ -28,7 +28,7 @@
               <ul>
                 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
                 <li><a href="#" onclick="event.preventDefault()">Link</a></li>
-                <li><a href="#" onclick="event.preventDefault()">Link</a></li>
+                <li><a href="#" onclick="event.preventDefault()" role="button">Button</a></li>
               </ul>
             </nav>
             <footer class="code">
@@ -40,7 +40,7 @@
   &lt;<b>ul</b>&gt;
     &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
     &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
-    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
+    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Button&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
   &lt;/<b>ul</b>&gt;
 &lt;/<b>nav</b>&gt;</code></pre>
 

docs/src/rtl.html

@@ -27,7 +27,7 @@
   <em>...</em>
 &lt;/<b>html</b>&gt;</code></pre>
 
-          <p>The RTL feature is still experimental and will probably evolve.</p>
+          <p>ℹ️&nbsp;The RTL feature is still experimental and will probably evolve.</p>
         </section>
 
         ${require('./_footer.html')}

docs/src/typography.html

@@ -166,10 +166,8 @@
               </div>
             </div>
           </article>
-          <p>
+          <p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
-            Links come with <code>.secondary</code> and
+          <p>ℹ️&nbsp;These classes are not available in the <a href="classless.html">class-less version</a>.</p>
-            <code>.contrast</code> styles.
-          </p>
           <article aria-label="Links examples">
             <a href="#" onclick="event.preventDefault()">Primary</a><br />
             <a href="#" onclick="event.preventDefault()" class="secondary"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picocss/pico",
-  "version": "1.4.4",
+  "version": "1.5.2",
   "description": "Minimal CSS Framework for semantic HTML",
   "author": "Lucas Larroche",
   "main": "css/pico.min.css",
@@ -79,25 +79,26 @@
     "watch:pico": "nodemon --watch scss/ --ext scss --exec 'npm run build:pico'"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.8",
+    "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.16.5",
+    "@babel/core": "^7.18.0",
-    "@babel/preset-env": "^7.16.8",
+    "@babel/preset-env": "^7.18.0",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.7",
-    "clean-css-cli": "^5.5.0",
+    "clean-css-cli": "^5.6.0",
-    "css-declaration-sorter": "^6.1.4",
+    "css-declaration-sorter": "^6.2.2",
     "html-includes": "^4.4.1",
-    "nodemon": "^2.0.15",
+    "nodemon": "^2.0.16",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.5",
+    "postcss": "^8.4.14",
     "postcss-cli": "^9.1.0",
-    "postcss-scss": "^4.0.3",
+    "postcss-scss": "^4.0.4",
-    "rollup": "^2.64.0",
+    "rollup": "^2.74.1",
-    "sass": "^1.48.0",
+    "sass": "^1.52.1",
-    "uglify-js": "^3.14.5"
+    "uglify-js": "^3.15.5"
   },
   "browserslist": [
     ">= 0.5%",
     "last 2 major versions",
-    "not dead"
+    "not dead",
+    "not ie > 0"
   ]
 }

scss/components/_accordion.scss

@@ -5,15 +5,18 @@
 details {
   display: block;
   margin-bottom: var(--spacing);
-  padding-bottom: calc(var(--spacing) * 0.5);
+  padding-bottom: var(--spacing);
   border-bottom: var(--border-width) solid var(--accordion-border-color);
 
   summary {
-    color: var(--accordion-close-summary-color);
     line-height: 1rem;
     list-style-type: none;
     cursor: pointer;
 
+    &:not([role]) {
+      color: var(--accordion-close-summary-color);
+    }
+
     @if $enable-transitions {
       transition: color var(--transition);
     }
@@ -36,10 +39,11 @@ details {
       display: block;
       width: 1rem;
       height: 1rem;
+      margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
       float: right;
       transform: rotate(-90deg);
       background-image: var(--icon-chevron);
-      background-position: center;
+      background-position: right center;
       background-size: 1rem auto;
       background-repeat: no-repeat;
       content: "";
@@ -51,14 +55,31 @@ details {
 
     &:focus {
       outline: none;
-      color: var(--accordion-active-summary-color);
+
+      &:not([role="button"]) {
+        color: var(--accordion-active-summary-color);
+      }
     }
 
-    ~ * {
+    // Type button
-      margin-top: calc(var(--spacing) * 0.5);
+    &[role="button"] {
+      width: 100%;
+      text-align: left;
 
-      ~ * {
+      // Marker
-        margin-top: 0;
+      &::after {
+        height: calc(1rem * var(--line-height, 1.5));
+        background-image: var(--icon-chevron-button);
+      }
+
+      @if $enable-classes {
+        // .contrast
+        &:not(.outline).contrast {
+          // Marker
+          &::after {
+            background-image: var(--icon-chevron-button-inverse);
+          }
+        }
       }
     }
   }
@@ -66,10 +87,12 @@ details {
   // Open
   &[open] {
     > summary {
-      margin-bottom: calc(var(--spacing) * 0.25);
+      margin-bottom: calc(var(--spacing));
 
-      &:not(:focus) {
+      &:not([role]) {
-        color: var(--accordion-open-summary-color);
+        &:not(:focus) {
+          color: var(--accordion-open-summary-color);
+        }
       }
 
       &::after {
@@ -82,8 +105,11 @@ details {
 [dir="rtl"] {
   details {
     summary {
+      text-align: right;
+
       &::after {
         float: left;
+        background-position: left center;
       }
     }
   }

scss/components/_card.scss

@@ -5,7 +5,6 @@
 article {
   margin: var(--block-spacing-vertical) 0;
   padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
-  overflow: hidden;
   border-radius: var(--border-radius);
   background: var(--card-background-color);
   box-shadow: var(--card-box-shadow);
@@ -23,11 +22,15 @@ article {
     margin-top: calc(var(--block-spacing-vertical) * -1);
     margin-bottom: var(--block-spacing-vertical);
     border-bottom: var(--border-width) solid var(--card-border-color);
+    border-top-right-radius: var(--border-radius);
+    border-top-left-radius: var(--border-radius);
   }
 
   > footer {
     margin-top: var(--block-spacing-vertical);
     margin-bottom: calc(var(--block-spacing-vertical) * -1);
     border-top: var(--border-width) solid var(--card-border-color);
+    border-bottom-right-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
   }
 }

scss/components/_dropdown.scss

@@ -0,0 +1,208 @@
+/**
+ * Dropdown ([role="list"])
+ */
+
+// Menu
+details[role="list"],
+li[role="list"] {
+  position: relative;
+}
+
+details[role="list"] summary + ul,
+li[role="list"] > ul {
+  display: flex;
+  z-index: 99;
+  position: absolute;
+  top: auto;
+  right: 0;
+  left: 0;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  border: var(--border-width) solid var(--dropdown-border-color);
+  border-radius: var(--border-radius);
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  background-color: var(--dropdown-background-color);
+  box-shadow: var(--card-box-shadow);
+  color: var(--dropdown-color);
+  white-space: nowrap;
+
+  li {
+    width: 100%;
+    margin-bottom: 0;
+    padding: calc(var(--form-element-spacing-vertical) * 0.5)
+      var(--form-element-spacing-horizontal);
+    list-style: none;
+
+    &:first-of-type {
+      margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
+    }
+
+    &:last-of-type {
+      margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
+    }
+
+    a {
+      display: block;
+      margin: calc(var(--form-element-spacing-vertical) * -0.5)
+        calc(var(--form-element-spacing-horizontal) * -1);
+      padding: calc(var(--form-element-spacing-vertical) * 0.5)
+        var(--form-element-spacing-horizontal);
+      overflow: hidden;
+      color: var(--dropdown-color);
+      text-decoration: none;
+      text-overflow: ellipsis;
+
+      &:hover {
+        background-color: var(--dropdown-hover-background-color);
+      }
+    }
+  }
+}
+
+// Marker
+details[role="list"] summary,
+li[role="list"] > a {
+  &::after {
+    display: block;
+    width: 1rem;
+    height: calc(1rem * var(--line-height, 1.5));
+    margin-inline-start: 0.5rem;
+    float: right;
+    transform: rotate(0deg);
+    background-position: right center;
+    background-size: 1rem auto;
+    background-repeat: no-repeat;
+    content: "";
+  }
+}
+
+// Global dropdown only
+details[role="list"] {
+  padding: 0;
+  border-bottom: none;
+
+  // Style <summary> as <select>
+  summary {
+    margin-bottom: 0;
+
+    &:not([role]) {
+      height: calc(
+        1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
+          var(--border-width) * 2
+      );
+      padding: var(--form-element-spacing-vertical)
+        var(--form-element-spacing-horizontal);
+      border: var(--border-width) solid var(--form-element-border-color);
+      border-radius: var(--border-radius);
+      background-color: var(--form-element-background-color);
+      color: var(--form-element-placeholder-color);
+      line-height: inherit;
+      cursor: pointer;
+
+      @if $enable-transitions {
+        transition: background-color var(--transition),
+          border-color var(--transition), color var(--transition),
+          box-shadow var(--transition);
+      }
+
+      &:active,
+      &:focus {
+        border-color: var(--form-element-active-border-color);
+        background-color: var(--form-element-active-background-color);
+      }
+
+      &:focus {
+        box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
+      }
+    }
+  }
+
+  // Close for details[role="list"]
+  &[open] summary {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+
+    &::before {
+      display: block;
+      z-index: 1;
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: none;
+      content: "";
+      cursor: default;
+    }
+  }
+}
+
+// All Dropdowns inside <nav>
+nav details[role="list"] summary,
+nav li[role="list"] a {
+  display: flex;
+  direction: ltr;
+}
+
+nav details[role="list"] summary + ul,
+nav li[role="list"] > ul {
+  min-width: fit-content;
+  border-radius: var(--border-radius);
+
+  li a {
+    border-radius: 0;
+  }
+}
+
+// Dropdowns inside <nav> as nested <details>
+nav details[role="list"] {
+  summary,
+  summary:not([role]) {
+    height: auto;
+    padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
+  }
+
+  &[open] summary {
+    border-radius: var(--border-radius);
+  }
+
+  summary + ul {
+    margin-top: var(--outline-width);
+    margin-inline-start: 0;
+  }
+
+  summary[role="link"] {
+    margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
+    line-height: var(--line-height);
+
+    + ul {
+      margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
+      margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
+    }
+  }
+}
+
+// Dropdowns inside a <nav> without using <details>
+li[role="list"] {
+  // Open on hover (for mobile)
+  // or on active/focus (for keyboard navigation)
+  &:hover > ul,
+  a:active ~ ul,
+  a:focus ~ ul {
+    display: flex;
+  }
+
+  > ul {
+    display: none;
+    margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
+    margin-inline-start: calc(
+      var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
+    );
+  }
+
+  > a::after {
+    background-image: var(--icon-chevron);
+  }
+}

scss/components/_modal.scss

@@ -21,23 +21,24 @@ dialog {
   height: inherit;
   min-height: 100%;
   padding: var(--spacing);
-  border: none;
+  border: 0;
   background-color: var(--modal-overlay-background-color);
+  color: var(--color);
 
   // Content
   article {
     max-height: calc(100vh - var(--spacing) * 2);
     overflow: auto;
 
-    @if map-get($breakpoints, 'sm') {
+    @if map-get($breakpoints, "sm") {
-      @media (min-width: map-get($breakpoints, 'sm')) {
+      @media (min-width: map-get($breakpoints, "sm")) {
-        max-width: map-get($viewports, 'sm');
+        max-width: map-get($viewports, "sm");
       }
     }
 
-    @if map-get($breakpoints, 'md') {
+    @if map-get($breakpoints, "md") {
-      @media (min-width: map-get($breakpoints, 'md')) {
+      @media (min-width: map-get($breakpoints, "md")) {
-        max-width: map-get($viewports, 'md');
+        max-width: map-get($viewports, "md");
       }
     }
 
@@ -58,7 +59,7 @@ dialog {
     > footer {
       text-align: right;
 
-      [role='button'] {
+      [role="button"] {
         margin-bottom: 0;
 
         &:not(:first-of-type) {
@@ -92,9 +93,7 @@ dialog {
           transition: opacity var(--transition);
         }
 
-        &:hover,
+        &:is([aria-current], :hover, :active, :focus) {
-        &:active,
-        &:focus {
           opacity: 1;
         }
       }
@@ -103,7 +102,7 @@ dialog {
 
   // Closed state
   &:not([open]),
-  &[open='false'] {
+  &[open="false"] {
     display: none;
   }
 }
@@ -125,8 +124,7 @@ dialog {
 @if ($enable-classes and $enable-transitions) {
   $animation-duration: 0.2s;
 
-  .modal-is-opening,
+  :where(.modal-is-opening, .modal-is-closing) {
-  .modal-is-closing {
     dialog,
     dialog > article {
       animation-duration: $animation-duration;

scss/components/_nav.scss

@@ -2,6 +2,18 @@
  * Nav
  */
 
+// Reboot based on :
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+
+// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
+:where(nav li)::before {
+  float: left;
+  content: "\200B";
+}
+
+// Pico
+// ––––––––––––––––––––
+
 // Horizontal Nav
 nav,
 nav ul {
@@ -19,35 +31,34 @@ nav {
     list-style: none;
 
     &:first-of-type {
-      margin-left: calc(var(--spacing) * -0.5);
+      margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
     }
     &:last-of-type {
-      margin-right: calc(var(--spacing) * -0.5);
+      margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
     }
   }
 
   li {
     display: inline-block;
     margin: 0;
-    padding: var(--spacing) calc(var(--spacing) * 0.5);
+    padding: var(--nav-element-spacing-vertical)
+      var(--nav-element-spacing-horizontal);
 
-    // HACK: Input & Button inside Nav
+    // Minimal support for buttons and forms elements
-    > *,
+    > * {
-    > input:not([type="checkbox"]):not([type="radio"]) {
+      --spacing: 0;
-      margin-bottom: 0;
     }
   }
 
-  a {
+  :where(a, [role="link"]) {
-    display: block;
+    display: inline-block;
-    margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
+    margin: calc(var(--nav-link-spacing-vertical) * -1)
-    padding: var(--spacing) calc(var(--spacing) * 0.5);
+      calc(var(--nav-link-spacing-horizontal) * -1);
+    padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
     border-radius: var(--border-radius);
     text-decoration: none;
 
-    &:hover,
+    &:is([aria-current], :hover, :active, :focus) {
-    &:active,
-    &:focus {
       text-decoration: none;
     }
   }
@@ -91,11 +102,16 @@ aside {
   }
 
   li {
-    padding: calc(var(--spacing) * 0.5);
+    padding: calc(var(--nav-element-spacing-vertical) * 0.5)
+      var(--nav-element-spacing-horizontal);
 
     a {
-      margin: calc(var(--spacing) * -0.5);
+      display: block;
-      padding: calc(var(--spacing) * 0.5);
+    }
+
+    // Minimal support for links as buttons
+    [role="button"] {
+      margin: inherit;
     }
   }
 }

scss/components/_progress.scss

@@ -4,7 +4,7 @@
 
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
 // ––––––––––––––––––––
 
 // 1. Add the correct display in Edge 18- and IE
@@ -40,7 +40,7 @@ progress {
 
   &::-webkit-progress-bar {
     border-radius: var(--border-radius);
-    background: transparent;
+    background: none;
   }
   &[value]::-webkit-progress-value {
     background-color: var(--progress-color);

scss/content/_button.scss

@@ -4,11 +4,11 @@
 
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
 // ––––––––––––––––––––
 
 // 1. Change the font styles in all browsers
-// 2. Remove the margin in Firefox and Safari
+// 2. Remove the margin on controls in Safari
 // 3. Show the overflow in Edge
 button {
   margin: 0; // 2
@@ -17,7 +17,7 @@ button {
   text-transform: none; // 1
 }
 
-// Correct the inability to style clickable types in iOS and Safari
+// Correct the inability to style buttons in iOS and Safari
 button,
 [type="button"],
 [type="reset"],
@@ -25,15 +25,6 @@ button,
   -webkit-appearance: button;
 }
 
-// Remove the inner border and padding in Firefox
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
 // Pico
 // ––––––––––––––––––––
 
@@ -77,9 +68,7 @@ input[type="reset"],
       box-shadow var(--transition);
   }
 
-  &:hover,
+  &:is([aria-current], :hover, :active, :focus) {
-  &:active,
-  &:focus {
     --background-color: var(--primary-hover);
     --border-color: var(--primary-hover);
     --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@@ -96,19 +85,14 @@ input[type="reset"],
 @if $enable-classes {
 
   // Secondary
-  button.secondary,
+  :is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
-  input[type="submit"].secondary,
+  input[type="reset"] {
-  input[type="button"].secondary,
-  input[type="reset"],
-  [role="button"].secondary {
     --background-color: var(--secondary);
     --border-color: var(--secondary);
     --color: var(--secondary-inverse);
     cursor: pointer;
 
-    &:hover,
+    &:is([aria-current], :hover, :active, :focus) {
-    &:active,
-    &:focus {
       --background-color: var(--secondary-hover);
       --border-color: var(--secondary-hover);
       --color: var(--secondary-inverse);
@@ -121,18 +105,12 @@ input[type="reset"],
   }
 
   // Contrast
-  button.contrast,
+  :is(button, input[type="submit"], input[type="button"], [role="button"]).contrast {
-  input[type="submit"].contrast,
-  input[type="button"].contrast,
-  input[type="reset"].contrast,
-  [role="button"].contrast {
     --background-color: var(--contrast);
     --border-color: var(--contrast);
     --color: var(--contrast-inverse);
 
-    &:hover,
+    &:is([aria-current], :hover, :active, :focus) {
-    &:active,
-    &:focus {
       --background-color: var(--contrast-hover);
       --border-color: var(--contrast-hover);
       --color: var(--contrast-inverse);
@@ -145,53 +123,36 @@ input[type="reset"],
   }
 
   // Outline (primary)
-  button.outline,
+  :is(button, input[type="submit"], input[type="button"], [role="button"]).outline,
-  input[type="submit"].outline,
+  input[type="reset"].outline {
-  input[type="button"].outline,
-  input[type="reset"].outline,
-  [role="button"].outline {
     --background-color: transparent;
     --color: var(--primary);
 
-    &:hover,
+    &:is([aria-current], :hover, :active, :focus) {
-    &:active,
-    &:focus {
       --background-color: transparent;
       --color: var(--primary-hover);
     }
   }
 
   // Outline (secondary)
-  button.outline.secondary,
+  :is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary,
-  input[type="submit"].outline.secondary,
+  input[type="reset"].outline {
-  input[type="button"].outline.secondary,
-  input[type="reset"].outline.secondary,
-  [role="button"].outline.secondary {
     --color: var(--secondary);
 
-    &:hover,
+    &:is([aria-current], :hover, :active, :focus) {
-    &:active,
-    &:focus {
       --color: var(--secondary-hover);
     }
   }
 
   // Outline (contrast)
-  button.outline.contrast,
+  :is(button, input[type="submit"], input[type="button"], [role="button"]).outline.contrast {
-  input[type="submit"].outline.contrast,
-  input[type="button"].outline.contrast,
-  input[type="reset"].outline.contrast,
-  [role="button"].outline.contrast {
     --color: var(--contrast);
 
-    &:hover,
+    &:is([aria-current], :hover, :active, :focus) {
-    &:active,
-    &:focus {
       --color: var(--contrast-hover);
     }
   }
 } 
-
 @else {
   // Secondary button without .class
   input[type="reset"] {
@@ -200,9 +161,7 @@ input[type="reset"],
     --color: var(--secondary-inverse);
     cursor: pointer;
 
-    &:hover,
+    &:is([aria-current], :hover, :active, :focus) {
-    &:active,
-    &:focus {
       --background-color: var(--secondary-hover);
       --border-color: var(--secondary-hover);
     }
@@ -215,13 +174,10 @@ input[type="reset"],
 }
 
 // Button [disabled]
-// 1. Links without href are disabled by default
+// Links without href are disabled by default
-button[disabled],
+:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
-input[type="submit"][disabled],
+:where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]),
-input[type="button"][disabled],
+a[role="button"]:not([href]) {
-input[type="reset"][disabled],
-a[role="button"]:not([href]), // 1
-[role="button"][disabled] {
   opacity: 0.5;
   pointer-events: none;
 }

scss/content/_code.scss

@@ -4,11 +4,11 @@
 
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
 // ––––––––––––––––––––
 
 // 1. Correct the inheritance and scaling of font size in all browsers
-// 2. Correct the font sizing in all browsers
+// 2. Correct the odd `em` font sizing in all browsers
 pre,
 code,
 kbd,
@@ -50,7 +50,7 @@ pre {
   > code {
     display: block;
     padding: var(--spacing);
-    background: transparent;
+    background: none;
     font-size: 14px;
     line-height: var(--line-height);
   }

scss/content/_embedded.scss

@@ -4,16 +4,11 @@
 
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
 // ––––––––––––––––––––
 
 // Change the alignment on media elements in all browsers (opinionated)
-audio,
+:where(audio, canvas, iframe, img, svg, video) {
-canvas,
-iframe,
-img,
-svg,
-video {
   vertical-align: middle;
 }
 
@@ -30,7 +25,7 @@ audio:not([controls]) {
 }
 
 // Remove the border on iframes in all browsers (opinionated)
-iframe {
+:where(iframe) {
   border-style: none;
 }
 
@@ -43,7 +38,7 @@ img {
 }
 
 // Change the fill color to match the text color in all browsers (opinionated)
-svg:not([fill]) {
+:where(svg:not([fill])) {
   fill: currentColor;
 }
 

scss/content/_form-alt-input-types.scss

@@ -20,7 +20,7 @@
 
   // Swatch
   @mixin color-swatch {
-    border: none;
+    border: 0;
     border-radius: calc(var(--border-radius) * 0.5);
   }
 
@@ -35,7 +35,7 @@
 
 // Date & Time
 // :not() are needed to add Specificity and avoid !important on padding
-input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
   &[type="date"],
   &[type="datetime-local"],
   &[type="month"],
@@ -70,31 +70,19 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
   }
 }
 
-[dir="rtl"] {
+[dir="rtl"]
-  [type="date"],
+  :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
-  [type="datetime-local"],
+  text-align: right;
-  [type="month"],
-  [type="time"],
-  [type="week"] {
-    text-align: right;
-  }
 }
 
 // File
 [type="file"] {
   --color: var(--muted-color);
   padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
-  border: none;
+  border: 0;
   border-radius: 0;
   background: none;
 
-  &:hover,
-  &:active,
-  &:focus {
-    border: none;
-    background: none;
-  }
-
   @mixin file-selector-button {
     --background-color: var(--secondary);
     --border-color: var(--secondary);
@@ -123,9 +111,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
         box-shadow var(--transition);
     }
 
-    &:hover,
+    &:is(:hover, :active, :focus) {
-    &:active,
-    &:focus {
       --background-color: var(--secondary-hover);
       --border-color: var(--secondary-hover);
     }
@@ -157,7 +143,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
   appearance: none;
   width: 100%;
   height: $height-thumb;
-  background: transparent;
+  background: none;
 
   // Slider Track
   @mixin slider-track {
@@ -238,14 +224,32 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
 
 // Search
 // :not() are needed to add Specificity and avoid !important on padding
-input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
   &[type="search"] {
-    padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+    padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
     border-radius: 5rem;
     background-image: var(--icon-search);
     background-position: center left 1.125rem;
     background-size: 1rem auto;
     background-repeat: no-repeat;
+    
+    &[aria-invalid] {
+      @if $enable-important {
+        padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
+      } 
+      @else {
+        padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+      }
+      background-position: center left 1.125rem, center right 0.75rem;
+    }
+
+    &[aria-invalid="false"] {
+      background-image: var(--icon-search), var(--icon-valid);
+    }
+
+    &[aria-invalid="true"] {
+      background-image: var(--icon-search), var(--icon-invalid);
+    }
   }
 }
 
@@ -256,3 +260,17 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
     display: none;
   }
 }
+
+[dir="rtl"] {
+  :where(input) {
+    &:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
+      &[type="search"] {
+        background-position: center right 1.125rem;
+        
+        &[aria-invalid] {
+          background-position: center right 1.125rem, center left 0.75rem;
+        }
+      }
+    }
+  }
+}

scss/content/_form.scss

@@ -4,7 +4,7 @@
 
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
 // ––––––––––––––––––––
 
 // 1. Change the font styles in all browsers
@@ -174,20 +174,16 @@ textarea {
 
 // Active & Focus
 input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
-select,
+:where(select, textarea) {
-textarea {
+  &:is(:active, :focus) {
-  &:active,
-  &:focus {
     --background-color: var(--form-element-active-background-color);
   }
 }
 
 // Active & Focus
 input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
-select,
+:where(select, textarea) {
-textarea {
+  &:is(:active, :focus) {
-  &:active,
-  &:focus {
     --border-color: var(--form-element-active-border-color);
   }
 }
@@ -202,21 +198,18 @@ textarea {
 }
 
 // Disabled
-input:not([type="submit"]):not([type="button"]):not([type="reset"]),
+input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],
-select,
+select[disabled],
-textarea {
+textarea[disabled],
-  &[disabled] {
+:where(fieldset[disabled]) :is(input:not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea) {
-    --background-color: var(--form-element-disabled-background-color);
+  --background-color: var(--form-element-disabled-background-color);
-    --border-color: var(--form-element-disabled-border-color);
+  --border-color: var(--form-element-disabled-border-color);
-    opacity: var(--form-element-disabled-opacity);
+  opacity: var(--form-element-disabled-opacity);
-  }
+  pointer-events: none;
 }
 
 // Aria-invalid
-input,
+:where(input, select, textarea) {
-select,
-textarea {
-
   &:not([type="checkbox"]):not([type="radio"]) {
     &[aria-invalid] {
       @if $enable-important {
@@ -228,7 +221,8 @@ textarea {
         padding-inline-end: calc(
           var(--form-element-spacing-horizontal) + 1.5rem
         ) !important;
-      } @else {
+      } 
+      @else {
         padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
         padding-left: var(--form-element-spacing-horizontal);
         padding-inline-start: var(--form-element-spacing-horizontal);
@@ -251,12 +245,12 @@ textarea {
   &[aria-invalid="false"] {
     --border-color: var(--form-element-valid-border-color);
 
-    &:active,
+    &:is(:active, :focus) {
-    &:focus {
       @if $enable-important {
         --border-color: var(--form-element-valid-active-border-color) !important;
         --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
-      } @else {
+      } 
+      @else {
         --border-color: var(--form-element-valid-active-border-color);
         --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
       }
@@ -266,12 +260,12 @@ textarea {
   &[aria-invalid="true"] {
     --border-color: var(--form-element-invalid-border-color);
 
-    &:active,
+    &:is(:active, :focus) {
-    &:focus {
       @if $enable-important {
         --border-color: var(--form-element-invalid-active-border-color) !important;
         --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
-      } @else {
+      } 
+      @else {
         --border-color: var(--form-element-invalid-active-border-color);
         --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
       }
@@ -280,9 +274,7 @@ textarea {
 }
 
 [dir="rtl"] {
-  input,
+  :where(input, select, textarea) {
-  select,
-  textarea {
     &:not([type="checkbox"]):not([type="radio"]) {
       &[aria-invalid],
       &[aria-invalid="true"],
@@ -339,9 +331,7 @@ select {
 }
 
 // Helper
-input,
+:where(input, select, textarea) {
-select,
-textarea {
   + small {
     display: block;
     width: 100%;
@@ -353,9 +343,7 @@ textarea {
 
 // Styles for Input inside a label
 label {
-  & > input,
+  > :where(input, select, textarea) {
-  & > select,
-  & > textarea {
     margin-top: calc(var(--spacing) * 0.25);
   }
 }

scss/content/_miscs.scss

@@ -4,17 +4,16 @@
 
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
 // ––––––––––––––––––––
 
-// 1. Add the correct box sizing in Firefox
+// 1. Correct the inheritance of border color in Firefox
-// 2. Show the overflow in Edge and IE
+// 2. Add the correct box sizing in Firefox
 hr {
-  box-sizing: content-box; // 1
+  height: 0; // 2
-  height: 0; // 1
+  border: 0;
-  overflow: visible; // 2
-  border: none;
   border-top: 1px solid var(--muted-border-color);
+  color: inherit; // 1
 }
 
 // Add the correct display in IE 10+
@@ -22,7 +21,8 @@ hr {
 template {
   @if $enable-important {
     display: none !important;
-  } @else {
+  } 
+  @else {
     display: none;
   }
 }

scss/content/_table.scss

@@ -4,18 +4,16 @@
 
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
 // ––––––––––––––––––––
 
-// 1. Collapse border spacing in all browsers (opinionated).
+// 1. Collapse border spacing in all browsers (opinionated)
-// 2. Correct table border color inheritance in all Chrome, Edge, and Safari.
+// 2. Remove text indentation from table contents in Chrome, Edge, and Safari
-// 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
+:where(table) {
-table {
   width: 100%;
-  border-color: inherit; // 2
   border-collapse: collapse; // 1
   border-spacing: 0;
-  text-indent: 0; // 3
+  text-indent: 0; // 2
 }
 
 // Pico

scss/content/_typography.scss

@@ -4,7 +4,7 @@
 
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
 // ––––––––––––––––––––
 
 // Add the correct font weight in Chrome, Edge, and Safari
@@ -28,23 +28,6 @@ sup {
   top: -0.5em;
 }
 
-// Remove the margin on nested lists in Chrome, Edge, IE, and Safari
-dl dl,
-dl ol,
-dl ul,
-ol dl,
-ul dl {
-  margin: 0;
-}
-
-// Remove the margin on nested lists in Edge 18- and IE
-ol ol,
-ol ul,
-ul ol,
-ul ul {
-  margin: 0;
-}
-
 // Pico
 // ––––––––––––––––––––
 
@@ -68,7 +51,8 @@ ul {
 
 // Links
 // 1. Remove the gray background on active links in IE 10
-a {
+a,
+[role="link"] {
   --color: var(--primary);
   --background-color: transparent;
   outline: none;
@@ -81,9 +65,7 @@ a {
       text-decoration var(--transition), box-shadow var(--transition);
   }
 
-  &:hover,
+  &:is([aria-current], :hover, :active, :focus) {
-  &:active,
-  &:focus {
     --color: var(--primary-hover);
     --text-decoration: underline;
   }
@@ -97,9 +79,7 @@ a {
     &.secondary {
       --color: var(--secondary);
 
-      &:hover,
+      &:is([aria-current], :hover, :active, :focus) {
-      &:active,
-      &:focus {
         --color: var(--secondary-hover);
       }
 
@@ -112,9 +92,7 @@ a {
     &.contrast {
       --color: var(--contrast);
 
-      &:hover,
+      &:is([aria-current], :hover, :active, :focus) {
-      &:active,
-      &:focus {
         --color: var(--contrast-hover);
       }
 
@@ -160,22 +138,8 @@ h6 {
 }
 
 // Margin-top for headings after a typography block
-address,
+:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
-blockquote,
+  ~ :is(h1, h2, h3, h4, h5, h6) {
-dl,
-figure,
-form,
-ol,
-p,
-pre,
-table,
-ul {
-  & ~ h1,
-  & ~ h2,
-  & ~ h3,
-  & ~ h4,
-  & ~ h5,
-  & ~ h6 {
     margin-top: var(--typography-spacing-vertical);
   }
 }
@@ -227,8 +191,7 @@ small {
 }
 
 // Lists
-ul,
+:where(dl, ol, ul) {
-ol {
   padding-right: 0;
   padding-left: var(--spacing);
   padding-inline-start: var(--spacing);
@@ -239,6 +202,15 @@ ol {
   }
 }
 
+// Margin-top for nested lists
+// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
+:where(dl, ol, ul) {
+  :is(dl, ol, ul) {
+    margin: 0; // 1
+    margin-top: calc(var(--typography-spacing-vertical) * 0.25);
+  }
+}
+
 ul li {
   list-style: square;
 }

scss/layout/_document.scss

@@ -5,14 +5,16 @@
 
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
 // ––––––––––––––––––––
 
-// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`
+// 1. Add border box sizing in all browsers (opinionated)
+// 2. Backgrounds do not repeat by default (opinionated)
 *,
 *::before,
 *::after {
   box-sizing: border-box; // 1
+  background-repeat: no-repeat; // 2
 }
 
 // 1. Add text decoration inheritance in all browsers (opinionated)
@@ -23,23 +25,24 @@
   vertical-align: inherit; // 2
 }
 
-// 1. Correct the line height in all browsers
+// 1. Use the default cursor in all browsers (opinionated)
-// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
+// 2. Change the line height in all browsers (opinionated)
-// 3. Change the default tap highlight to be completely transparent in iOS
+// 3. Breaks words to prevent overflow in all browsers (opinionated)
-// 4. Use the default cursor in all browsers (opinionated)
+// 4. Use a 4-space tab width in all browsers (opinionated)
-// 5. Use a 4-space tab width in all browsers (opinionated)
+// 5. Remove the grey highlight on links in iOS (opinionated)
-// 6. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
+// 6. Prevent adjustments of font size after orientation changes in iOS
-html {
+:where(:root) {
-  -webkit-text-size-adjust: 100%; // 2
+  -webkit-tap-highlight-color: transparent; // 5
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 3
+  -webkit-text-size-adjust: 100%; // 6
-  -ms-text-size-adjust: 100%; // 6
+  text-size-adjust: 100%; // 6
   text-rendering: optimizeLegibility;
   background-color: var(--background-color);
   color: var(--color);
   font-weight: var(--font-weight);
   font-size: var(--font-size);
-  line-height: var(--line-height); // 1
+  line-height: var(--line-height); // 2
   font-family: var(--font-family);
-  cursor: default; // 4
+  overflow-wrap: break-word; // 3
-  tab-size: 4; // 5
+  cursor: default; // 1
+  tab-size: 4; // 4
 }

scss/layout/_sectioning.scss

@@ -5,7 +5,7 @@
 
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
 // ––––––––––––––––––––
 
 // Render the `main` element consistently in IE
@@ -16,9 +16,10 @@ main {
 // Pico
 // ––––––––––––––––––––
 
+// 1. Remove the margin in all browsers (opinionated)
 body {
   width: 100%;
-  margin: 0;
+  margin: 0; // 1
 
   > header,
   > main,

scss/pico.scss

@@ -1,6 +1,6 @@
 /*!
- * Pico.css v1.4.4 (https://picocss.com)
+ * Pico.css v1.5.2 (https://picocss.com)
- * Copyright 2019-2021 - Licensed under MIT
+ * Copyright 2019-2022 - Licensed under MIT
  */
 
 // Config
@@ -34,6 +34,7 @@
 @import "components/modal"; // dialog
 @import "components/nav"; // nav
 @import "components/progress"; // progress
+@import "components/dropdown"; // dropdown
 
 // Utilities
 @import "utilities/loading"; // aria-busy=true

scss/pico.slim.scss

@@ -1,6 +1,6 @@
 /*!
- * Pico.css v1.4.4 (https://picocss.com)
+ * Pico.css v1.5.2 (https://picocss.com)
- * Copyright 2019-2021 - Licensed under MIT
+ * Copyright 2019-2022 - Licensed under MIT
  *
  * Slim version example
  * You can export only the modules you need

scss/themes/default/_dark.scss

@@ -103,13 +103,28 @@
   --accordion-open-summary-color: var(--muted-color);
 
   // Card (<article>)
+  $box-shadow-elevation: 1rem;
+  $box-shadow-blur-strengh: 6rem;
+  $box-shadow-opacity: 0.06;
   --card-background-color: #{mix($black, $grey-900, 25%)};
-  --card-border-color: #{mix($black, $grey-900, 37.5%)};
+  --card-border-color: var(--card-background-color);
-  --card-box-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)},
+  --card-box-shadow:
-    0 0.125rem 2rem #{rgba($black, 0.12)},
+    #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($black, ($box-shadow-opacity * 0.283))},
-    0 0 0 0.0625rem #{rgba($black, 0.036)};
+    #{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($black, ($box-shadow-opacity * 0.4))},
+    #{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($black, ($box-shadow-opacity * 0.5))},
+    #{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($black, ($box-shadow-opacity * 0.6))},
+    #{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($black, ($box-shadow-opacity * 0.717))},
+    #{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($black, $box-shadow-opacity)},
+    0 0 0 0.0625rem #{rgba($black, ($box-shadow-opacity * 0.25) )};
   --card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
 
+  // Dropdown (<details role="list">)
+  --dropdown-background-color: #{$grey-900};
+  --dropdown-border-color: #{mix($grey-900, $grey-800)};
+  --dropdown-box-shadow: var(--card-box-shadow);
+  --dropdown-color: var(--color);
+  --dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
+
   // Modal (<dialog>)
   --modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.9)};
 
@@ -127,6 +142,8 @@
   // Icons
   --icon-checkbox: 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='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-chevron: 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='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-chevron-button: 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='#{rgba($white, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-chevron-button-inverse: 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='#{rgba($black, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-close: 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='#{rgba($grey-500, .999)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
   --icon-date: 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='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
   --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='#{rgba($red-900, .999)}' 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");

scss/themes/default/_light.scss

@@ -103,12 +103,27 @@
   --accordion-open-summary-color: var(--muted-color);
 
   // Card (<article>)
+  $box-shadow-elevation: 1rem;
+  $box-shadow-blur-strengh: 6rem;
+  $box-shadow-opacity: 0.06;
   --card-background-color: var(--background-color);
   --card-border-color: var(--muted-border-color);
-  --card-box-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)},
+  --card-box-shadow:
-    0 0.125rem 2rem #{rgba($grey-900, 0.08)},
+    #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($grey-900, ($box-shadow-opacity * 0.283))},
-    0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
+    #{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($grey-900, ($box-shadow-opacity * 0.4))},
-  --card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
+    #{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($grey-900, ($box-shadow-opacity * 0.5))},
+    #{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($grey-900, ($box-shadow-opacity * 0.6))},
+    #{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($grey-900, ($box-shadow-opacity * 0.717))},
+    #{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($grey-900, $box-shadow-opacity)},
+    0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25) )};
+--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
+
+  // Dropdown (<details role="list">)
+  --dropdown-background-color: #{mix($grey-50, $white, 25%)};
+  --dropdown-border-color: #{mix($grey-100, $grey-50)};
+  --dropdown-box-shadow: var(--card-box-shadow);
+  --dropdown-color: var(--color);
+  --dropdown-hover-background-color: #{$grey-50};
 
   // Modal (<dialog>)
   --modal-overlay-background-color: #{rgba($grey-100, 0.8)};
@@ -127,6 +142,8 @@
   // Icons
   --icon-checkbox: 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='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-chevron: 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='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-chevron-button: 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='#{rgba($white, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-chevron-button-inverse: 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='#{rgba($white, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-close: 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='#{rgba($grey-500, .999)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
   --icon-date: 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='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
   --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='#{rgba($red-800, .999)}' 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");

scss/themes/default/_styles.scss

@@ -59,6 +59,12 @@
   --form-element-spacing-vertical: 0.75rem;
   --form-element-spacing-horizontal: 1rem;
 
+  // Spacings for nav component
+  --nav-element-spacing-vertical: 1rem;
+  --nav-element-spacing-horizontal: 0.5rem;
+  --nav-link-spacing-vertical: 0.5rem;
+  --nav-link-spacing-horizontal: 0.5rem;
+
   // Font weight for form labels & fieldsets legend
   --form-label-font-weight: var(--font-weight);