Merge pull request #165 from picocss/ll/refactor/nav

refactor(nav): Add css vars

README.md

@@ -164,6 +164,7 @@ Pico can be used without custom CSS for quick or small projects. However, it’s
 - [Cards](https://picocss.com/docs/cards.html)
 - [Modal](https://picocss.com/docs/modal.html)
 - [Navs](https://picocss.com/docs/navs.html)
+- [Dropdown](https://picocss.com/docs/dropdown.html)
 - [Progress](https://picocss.com/docs/progress.html)
 
 **Utilities**

css/pico.classless.css

@@ -21,6 +21,10 @@
   --block-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.75rem;
+  --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;
 }
@@ -276,6 +280,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(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");
@@ -371,6 +377,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");
@@ -465,6 +473,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");
@@ -1779,16 +1789,18 @@ canvas {
 details {
   display: block;
   margin-bottom: var(--spacing);
-  padding-bottom: calc(var(--spacing) * 0.5);
+  padding-bottom: calc(var(--spacing));
   border-bottom: var(--border-width) solid var(--accordion-border-color);
 }
 details summary {
-  color: var(--accordion-close-summary-color);
   line-height: 1rem;
   list-style-type: none;
   cursor: pointer;
   transition: color var(--transition);
 }
+details summary:not([role=button]) {
+  color: var(--accordion-close-summary-color);
+}
 details summary::-webkit-details-marker {
   display: none;
 }
@@ -1813,24 +1825,31 @@ details summary::after {
 }
 details summary:focus {
   outline: none;
+}
+details summary:focus:not([role=button]) {
   color: var(--accordion-active-summary-color);
 }
-details summary ~ * {
+details summary[role=button] {
-  margin-top: calc(var(--spacing) * 0.5);
+  width: 100%;
+  text-align: left;
 }
-details summary ~ * ~ * {
+details summary[role=button]::after {
-  margin-top: 0;
+  height: calc(1rem * var(--line-height));
+  background-image: var(--icon-chevron-button);
 }
 details[open] > summary {
-  margin-bottom: calc(var(--spacing) * 0.25);
+  margin-bottom: calc(var(--spacing));
 }
-details[open] > summary:not(:focus) {
+details[open] > summary:not([role=button]):not(:focus) {
   color: var(--accordion-open-summary-color);
 }
 details[open] > summary::after {
   transform: rotate(0);
 }
 
+[dir=rtl] details summary {
+  text-align: right;
+}
 [dir=rtl] details summary::after {
   float: left;
 }
@@ -1841,7 +1860,6 @@ details[open] > summary::after {
 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);
@@ -1948,25 +1966,24 @@ nav ul {
 }
 nav ol:first-of-type,
 nav ul:first-of-type {
-  margin-left: calc(var(--spacing) * -0.5);
+  margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
 }
 nav ol:last-of-type,
 nav ul:last-of-type {
-  margin-right: calc(var(--spacing) * -0.5);
+  margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
 }
 nav 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);
 }
-nav li > *,
+nav li > * {
-nav li > input:not([type=checkbox]):not([type=radio]) {
+  --spacing: 0;
-  margin-bottom: 0;
 }
 nav a {
-  display: block;
+  display: inline-block;
-  margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
+  margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
-  padding: var(--spacing) calc(var(--spacing) * 0.5);
+  padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
   border-radius: var(--border-radius);
   text-decoration: none;
 }
@@ -1981,11 +1998,13 @@ aside li {
   display: block;
 }
 aside li {
-  padding: calc(var(--spacing) * 0.5);
+  padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
 }
 aside li a {
-  margin: calc(var(--spacing) * -0.5);
+  display: block;
-  padding: calc(var(--spacing) * 0.5);
+}
+aside li [role=button] {
+  margin: inherit;
 }
 
 /**
@@ -2057,6 +2076,87 @@ progress::-moz-progress-bar {
     background-position: -200% 0;
   }
 }
+details[role=list] {
+  position: relative;
+  padding: 0;
+  border-bottom: none;
+}
+details[role=list] summary {
+  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+  margin-bottom: 0;
+  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);
+  line-height: inherit;
+  cursor: pointer;
+}
+details[role=list] summary::after {
+  height: 100%;
+  transform: rotate(0deg);
+}
+details[role=list] summary + ul {
+  z-index: 100;
+  position: absolute;
+  top: auto;
+  right: 0px;
+  left: 0px;
+  margin: 0;
+  padding: 0;
+  border: var(--border-width) solid var(--form-element-border-color);
+  border-top: none;
+  border-bottom-right-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+  background-color: var(--background-color);
+  list-style: none;
+}
+details[role=list] summary + ul li {
+  margin-bottom: 0;
+}
+details[role=list] summary + ul li::marker {
+  content: "";
+}
+details[role=list] summary + ul li label {
+  position: relative;
+  width: 100%;
+  margin: 0;
+  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+  cursor: pointer;
+}
+details[role=list] summary + ul li label:hover {
+  background-color: var(--secondary-focus);
+}
+details[role=list] summary + ul li label input[type=radio],
+details[role=list] summary + ul li label input[type=checkbox] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+details[role=list][disabled] summary, details[role=list].disabled summary {
+  color: var(--muted-color);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+details[role=list][open] summary {
+  margin-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+details[role=list][open] summary::before {
+  display: block;
+  z-index: 80;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: transparent;
+  content: " ";
+  cursor: default;
+}
+details[role=list][open] summary::after {
+  transform: rotate(180deg);
+}
+
 /**
  * Loading ([aria-busy=true])
  */

css/pico.css

@@ -23,6 +23,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.75rem;
+  --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;
 }
@@ -281,6 +285,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(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");
@@ -376,6 +382,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");
@@ -470,6 +478,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");
@@ -1957,16 +1967,18 @@ canvas {
 details {
   display: block;
   margin-bottom: var(--spacing);
-  padding-bottom: calc(var(--spacing) * 0.5);
+  padding-bottom: calc(var(--spacing));
   border-bottom: var(--border-width) solid var(--accordion-border-color);
 }
 details summary {
-  color: var(--accordion-close-summary-color);
   line-height: 1rem;
   list-style-type: none;
   cursor: pointer;
   transition: color var(--transition);
 }
+details summary:not([role=button]) {
+  color: var(--accordion-close-summary-color);
+}
 details summary::-webkit-details-marker {
   display: none;
 }
@@ -1991,24 +2003,34 @@ details summary::after {
 }
 details summary:focus {
   outline: none;
+}
+details summary:focus:not([role=button]) {
   color: var(--accordion-active-summary-color);
 }
-details summary ~ * {
+details summary[role=button] {
-  margin-top: calc(var(--spacing) * 0.5);
+  width: 100%;
+  text-align: left;
 }
-details summary ~ * ~ * {
+details summary[role=button]::after {
-  margin-top: 0;
+  height: calc(1rem * var(--line-height));
+  background-image: var(--icon-chevron-button);
+}
+details summary[role=button]:not(.outline).contrast::after {
+  background-image: var(--icon-chevron-button-inverse);
 }
 details[open] > summary {
-  margin-bottom: calc(var(--spacing) * 0.25);
+  margin-bottom: calc(var(--spacing));
 }
-details[open] > summary:not(:focus) {
+details[open] > summary:not([role=button]):not(:focus) {
   color: var(--accordion-open-summary-color);
 }
 details[open] > summary::after {
   transform: rotate(0);
 }
 
+[dir=rtl] details summary {
+  text-align: right;
+}
 [dir=rtl] details summary::after {
   float: left;
 }
@@ -2019,7 +2041,6 @@ details[open] > summary::after {
 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);
@@ -2222,25 +2243,24 @@ nav ul {
 }
 nav ol:first-of-type,
 nav ul:first-of-type {
-  margin-left: calc(var(--spacing) * -0.5);
+  margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
 }
 nav ol:last-of-type,
 nav ul:last-of-type {
-  margin-right: calc(var(--spacing) * -0.5);
+  margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
 }
 nav 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);
 }
-nav li > *,
+nav li > * {
-nav li > input:not([type=checkbox]):not([type=radio]) {
+  --spacing: 0;
-  margin-bottom: 0;
 }
 nav a {
-  display: block;
+  display: inline-block;
-  margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
+  margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
-  padding: var(--spacing) calc(var(--spacing) * 0.5);
+  padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
   border-radius: var(--border-radius);
   text-decoration: none;
 }
@@ -2255,11 +2275,13 @@ aside li {
   display: block;
 }
 aside li {
-  padding: calc(var(--spacing) * 0.5);
+  padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
 }
 aside li a {
-  margin: calc(var(--spacing) * -0.5);
+  display: block;
-  padding: calc(var(--spacing) * 0.5);
+}
+aside li [role=button] {
+  margin: inherit;
 }
 
 /**
@@ -2331,6 +2353,87 @@ progress::-moz-progress-bar {
     background-position: -200% 0;
   }
 }
+details[role=list] {
+  position: relative;
+  padding: 0;
+  border-bottom: none;
+}
+details[role=list] summary {
+  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+  margin-bottom: 0;
+  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);
+  line-height: inherit;
+  cursor: pointer;
+}
+details[role=list] summary::after {
+  height: 100%;
+  transform: rotate(0deg);
+}
+details[role=list] summary + ul {
+  z-index: 100;
+  position: absolute;
+  top: auto;
+  right: 0px;
+  left: 0px;
+  margin: 0;
+  padding: 0;
+  border: var(--border-width) solid var(--form-element-border-color);
+  border-top: none;
+  border-bottom-right-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+  background-color: var(--background-color);
+  list-style: none;
+}
+details[role=list] summary + ul li {
+  margin-bottom: 0;
+}
+details[role=list] summary + ul li::marker {
+  content: "";
+}
+details[role=list] summary + ul li label {
+  position: relative;
+  width: 100%;
+  margin: 0;
+  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+  cursor: pointer;
+}
+details[role=list] summary + ul li label:hover {
+  background-color: var(--secondary-focus);
+}
+details[role=list] summary + ul li label input[type=radio],
+details[role=list] summary + ul li label input[type=checkbox] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+details[role=list][disabled] summary, details[role=list].disabled summary {
+  color: var(--muted-color);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+details[role=list][open] summary {
+  margin-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+details[role=list][open] summary::before {
+  display: block;
+  z-index: 80;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: transparent;
+  content: " ";
+  cursor: default;
+}
+details[role=list][open] summary::after {
+  transform: rotate(180deg);
+}
+
 /**
  * Loading ([aria-busy=true])
  */

css/pico.fluid.classless.css

@@ -21,6 +21,10 @@
   --block-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.75rem;
+  --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;
 }
@@ -276,6 +280,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(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");
@@ -371,6 +377,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");
@@ -465,6 +473,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");
@@ -1749,16 +1759,18 @@ canvas {
 details {
   display: block;
   margin-bottom: var(--spacing);
-  padding-bottom: calc(var(--spacing) * 0.5);
+  padding-bottom: calc(var(--spacing));
   border-bottom: var(--border-width) solid var(--accordion-border-color);
 }
 details summary {
-  color: var(--accordion-close-summary-color);
   line-height: 1rem;
   list-style-type: none;
   cursor: pointer;
   transition: color var(--transition);
 }
+details summary:not([role=button]) {
+  color: var(--accordion-close-summary-color);
+}
 details summary::-webkit-details-marker {
   display: none;
 }
@@ -1783,24 +1795,31 @@ details summary::after {
 }
 details summary:focus {
   outline: none;
+}
+details summary:focus:not([role=button]) {
   color: var(--accordion-active-summary-color);
 }
-details summary ~ * {
+details summary[role=button] {
-  margin-top: calc(var(--spacing) * 0.5);
+  width: 100%;
+  text-align: left;
 }
-details summary ~ * ~ * {
+details summary[role=button]::after {
-  margin-top: 0;
+  height: calc(1rem * var(--line-height));
+  background-image: var(--icon-chevron-button);
 }
 details[open] > summary {
-  margin-bottom: calc(var(--spacing) * 0.25);
+  margin-bottom: calc(var(--spacing));
 }
-details[open] > summary:not(:focus) {
+details[open] > summary:not([role=button]):not(:focus) {
   color: var(--accordion-open-summary-color);
 }
 details[open] > summary::after {
   transform: rotate(0);
 }
 
+[dir=rtl] details summary {
+  text-align: right;
+}
 [dir=rtl] details summary::after {
   float: left;
 }
@@ -1811,7 +1830,6 @@ details[open] > summary::after {
 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);
@@ -1918,25 +1936,24 @@ nav ul {
 }
 nav ol:first-of-type,
 nav ul:first-of-type {
-  margin-left: calc(var(--spacing) * -0.5);
+  margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
 }
 nav ol:last-of-type,
 nav ul:last-of-type {
-  margin-right: calc(var(--spacing) * -0.5);
+  margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
 }
 nav 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);
 }
-nav li > *,
+nav li > * {
-nav li > input:not([type=checkbox]):not([type=radio]) {
+  --spacing: 0;
-  margin-bottom: 0;
 }
 nav a {
-  display: block;
+  display: inline-block;
-  margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
+  margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
-  padding: var(--spacing) calc(var(--spacing) * 0.5);
+  padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
   border-radius: var(--border-radius);
   text-decoration: none;
 }
@@ -1951,11 +1968,13 @@ aside li {
   display: block;
 }
 aside li {
-  padding: calc(var(--spacing) * 0.5);
+  padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
 }
 aside li a {
-  margin: calc(var(--spacing) * -0.5);
+  display: block;
-  padding: calc(var(--spacing) * 0.5);
+}
+aside li [role=button] {
+  margin: inherit;
 }
 
 /**
@@ -2027,6 +2046,87 @@ progress::-moz-progress-bar {
     background-position: -200% 0;
   }
 }
+details[role=list] {
+  position: relative;
+  padding: 0;
+  border-bottom: none;
+}
+details[role=list] summary {
+  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+  margin-bottom: 0;
+  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);
+  line-height: inherit;
+  cursor: pointer;
+}
+details[role=list] summary::after {
+  height: 100%;
+  transform: rotate(0deg);
+}
+details[role=list] summary + ul {
+  z-index: 100;
+  position: absolute;
+  top: auto;
+  right: 0px;
+  left: 0px;
+  margin: 0;
+  padding: 0;
+  border: var(--border-width) solid var(--form-element-border-color);
+  border-top: none;
+  border-bottom-right-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+  background-color: var(--background-color);
+  list-style: none;
+}
+details[role=list] summary + ul li {
+  margin-bottom: 0;
+}
+details[role=list] summary + ul li::marker {
+  content: "";
+}
+details[role=list] summary + ul li label {
+  position: relative;
+  width: 100%;
+  margin: 0;
+  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+  cursor: pointer;
+}
+details[role=list] summary + ul li label:hover {
+  background-color: var(--secondary-focus);
+}
+details[role=list] summary + ul li label input[type=radio],
+details[role=list] summary + ul li label input[type=checkbox] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+details[role=list][disabled] summary, details[role=list].disabled summary {
+  color: var(--muted-color);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+details[role=list][open] summary {
+  margin-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+details[role=list][open] summary::before {
+  display: block;
+  z-index: 80;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: transparent;
+  content: " ";
+  cursor: default;
+}
+details[role=list][open] summary::after {
+  transform: rotate(180deg);
+}
+
 /**
  * Loading ([aria-busy=true])
  */

css/pico.slim.css

@@ -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.75rem;
+  --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;
 }
@@ -213,6 +217,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(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");
@@ -308,6 +314,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");
@@ -402,6 +410,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");

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.75rem;
+  --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;
 }
@@ -277,6 +281,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(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");
@@ -372,6 +378,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");
@@ -466,6 +474,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;
@@ -140,8 +141,12 @@ main > aside summary {
   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;
@@ -167,7 +172,7 @@ 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) {
   color: var(--h1-color);
@@ -266,6 +271,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 +294,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 +394,9 @@ dialog.example:not([open]), dialog.example[open=false] {
  * Docs: Navs
  */
 body > nav {
+  --nav-element-spacing-horizontal: 0.75rem;
+  --nav-link-spacing-vertical: 1rem;
+  --nav-link-spacing-horizontal: 0.75rem;
   -webkit-backdrop-filter: saturate(180%) blur(20px);
   z-index: 99;
   position: fixed;
@@ -409,20 +416,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/scss/components/_nav.scss

@@ -3,6 +3,9 @@
  */
 
 body > nav {
+  --nav-element-spacing-horizontal: 0.75rem;
+  --nav-link-spacing-vertical: 1rem;
+  --nav-link-spacing-horizontal: 0.75rem;
   -webkit-backdrop-filter: saturate(180%) blur(20px);
   z-index: 99;
   position: fixed;
@@ -26,31 +29,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,7 +66,6 @@ main > aside {
     }
   }
 
-
   li,
   summary {
     padding-top: 0;
@@ -73,8 +73,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;
@@ -107,7 +112,7 @@ main > aside {
 
     &[open] {
       > summary {
-        margin-bottom: calc(var(--spacing) * 0.75);
+        margin-bottom: 0;
 
         &: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="./dropdown.html" id="dropdown-link" class="secondary">Dropdown</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>

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/dropdown.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    ${require('./_head.html') title="Dropdown" description="a dropdown
+    component, without JavaScript." canonical="dropdown.html" }
+  </head>
+
+  <body>
+    ${require('./_nav.html')}
+
+    <main class="container" id="docs">
+      ${require('./_sidebar.html') active="dropdown-link"}
+
+      <div role="document">
+        <section id="dropdown">
+          <hgroup>
+            <h1>Dropdown</h1>
+            <h2>single / multi select dropdown, without JavaScript.</h2>
+          </hgroup>
+          <article aria-label="Dropdown examples">
+            <details role="list">
+              <summary aria-haspopup="listbox">Single select</summary>
+              <ul role="listbox">
+                <li>
+                  <label for="01">
+                    <input type="radio" id="01" name="option1" />
+                    Option 1
+                  </label>
+                </li>
+                <li>
+                  <label for="02">
+                    <input type="radio" id="02" name="option1" />
+                    Option 2
+                  </label>
+                </li>
+              </ul>
+            </details>
+            <details role="list">
+              <summary aria-haspopup="listbox">Multi-select</summary>
+              <ul role="listbox">
+                <li>
+                  <label for="11">
+                    <input type="checkbox" id="11" name="option2" />
+                    Option 1
+                  </label>
+                </li>
+                <li>
+                  <label for="12">
+                    <input type="checkbox" id="12" name="option2" />
+                    Option 2
+                  </label>
+                </li>
+              </ul>
+            </details>
+          </article>
+
+          <label><strong>Usage notes</strong></label>
+          <ul>
+            <li>
+              in order to use dropdown component, use
+              <code>role='list'</code> on details tag.
+            </li>
+            <li>
+              no need to use javascript to close the dropdown when clicked
+              outside.
+            </li>
+            <li>
+              for both single / multi-select case, need javascript to update
+              <code>summary</code> tag text when any option selected.
+            </li>
+            <li>
+              in case of single select, remove <code>open</code> attribute on
+              <code>details</code> tag using javascript when an option is
+              selected.
+            </li>
+          </ul>
+          <footer class="code">
+            <pre>
+              <code>
+                <em>&lt;!-- For Single-select --&gt;</em>
+                &lt;<b>details role="list"</b>&gt;
+                  &lt;<b>summary aria-haspopup="listbox"</b>&gt;Single select&lt;<b>/summary</b>&gt;
+                  &lt;<b>ul role="listbox"</b>&gt;
+                    &lt;<b>li</b>&gt;
+                      &lt;<b>label for="01"</b>&gt;
+                        &lt;<b>input type="radio" id="01" name="option1" /</b>&gt;
+                        Option 1
+                      &lt;<b>/label</b>&gt;
+                    &lt;<b>/li</b>&gt;
+                    &lt;<b>li</b>&gt;
+                      &lt;<b>label for="02"</b>&gt;
+                        &lt;<b>input type="radio" id="02" name="option1" /</b>&gt;
+                        Option 2
+                      &lt;<b>/label</b>&gt;
+                    &lt;<b>/li</b>&gt;
+                  &lt;<b>/ul</b>&gt;
+                &lt;<b>/details</b>&gt;
+  
+  
+                <em>&lt;!-- For Multi-select --&gt;</em>
+                &lt;<b>details role="list"</b>&gt;
+                  &lt;<b>summary aria-haspopup="listbox"</b>&gt;Multi select&lt;<b>/summary</b>&gt;
+                  &lt;<b>ul role="listbox"</b>&gt;
+                    &lt;<b>li</b>&gt;
+                      &lt;<b>label for="01"</b>&gt;
+                        &lt;<b>input type="checkbox" id="01" name="option1" /</b>&gt;
+                        Option 1
+                      &lt;<b>/label</b>&gt;
+                    &lt;<b>/li</b>&gt;
+                    &lt;<b>li</b>&gt;
+                      &lt;<b>label for="01"</b>&gt;
+                        &lt;<b>input type="checkbox" id="02" name="option1" /</b>&gt;
+                        Option 2
+                      &lt;<b>/label</b>&gt;
+                    &lt;<b>/li</b>&gt;
+                  &lt;<b>/ul</b>&gt;
+                &lt;<b>/details</b>&gt;
+              </code>
+            </pre>
+          </footer>
+        </section>
+
+        ${require('./_footer.html')}
+      </div>
+    </main>
+    <script src="js/commons.min.js"></script>
+  </body>
+</html>

scss/components/_accordion.scss

@@ -5,15 +5,19 @@
 details {
   display: block;
   margin-bottom: var(--spacing);
-  padding-bottom: calc(var(--spacing) * 0.5);
+  padding-bottom: calc(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="button"]) {
+      color: var(--accordion-close-summary-color);
+    }
+
     @if $enable-transitions {
       transition: color var(--transition);
     }
@@ -51,14 +55,33 @@ 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));
+        background-image: var(--icon-chevron-button);
+      }
+
+      @if $enable-classes {
+        
+        // .contrast
+        &:not(.outline).contrast {
+          
+          // Marker
+          &::after {
+            background-image: var(--icon-chevron-button-inverse);
+          }
+        }
       }
     }
   }
@@ -66,10 +89,12 @@ details {
   // Open
   &[open] {
     > summary {
-      margin-bottom: calc(var(--spacing) * 0.25);
+      margin-bottom: calc(var(--spacing));
 
-      &:not(:focus) {
+      &:not([role="button"]) {
-        color: var(--accordion-open-summary-color);
+        &:not(:focus) {
+          color: var(--accordion-open-summary-color);
+        }
       }
 
       &::after {
@@ -82,6 +107,8 @@ details {
 [dir="rtl"] {
   details {
     summary {
+      text-align: right;
+
       &::after {
         float: left;
       }

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);

scss/components/_dropdown.scss

@@ -0,0 +1,93 @@
+details[role='list'] {
+  position: relative;
+  padding: 0;
+  border-bottom: none;
+
+  summary {
+    height: calc(
+      1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
+        var(--border-width) * 2
+    );
+    margin-bottom: 0;
+    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);
+    line-height: inherit;
+    cursor: pointer;
+
+    &::after {
+      height: 100%;
+      transform: rotate(0deg);
+    }
+
+    & + ul {
+      z-index: 100;
+      position: absolute;
+      top: auto;
+      right: 0px;
+      left: 0px;
+      margin: 0;
+      padding: 0;
+      border: var(--border-width) solid var(--form-element-border-color);
+      border-top: none;
+      border-bottom-right-radius: var(--border-radius);
+      border-bottom-left-radius: var(--border-radius);
+      background-color: var(--background-color);
+      list-style: none;
+
+      li {
+        margin-bottom: 0;
+        &::marker {
+          content: '';
+        }
+
+        label {
+          position: relative;
+          width: 100%;
+          margin: 0;
+          padding: var(--form-element-spacing-vertical)
+            var(--form-element-spacing-horizontal);
+          cursor: pointer;
+          &:hover {
+            background-color: var(--secondary-focus);
+          }
+
+          input[type='radio'],
+          input[type='checkbox'] {
+            appearance: none;
+          }
+        }
+      }
+    }
+  }
+
+  &[disabled] summary,
+  &.disabled summary {
+    color: var(--muted-color);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &[open] summary {
+    margin-bottom: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    &::before {
+      display: block;
+      z-index: 80;
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: transparent;
+      content: ' ';
+      cursor: default;
+    }
+
+    &::after {
+      transform: rotate(180deg);
+    }
+  }
+}

scss/components/_nav.scss

@@ -19,29 +19,28 @@ 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 {
-    display: block;
+    display: inline-block;
-    margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
+    margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
-    padding: var(--spacing) calc(var(--spacing) * 0.5);
+    padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
     border-radius: var(--border-radius);
     text-decoration: none;
 
@@ -63,11 +62,15 @@ 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/pico.scss

@@ -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/themes/default/_dark.scss

@@ -129,6 +129,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

@@ -129,6 +129,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.75rem;
+  --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);