Add Sanitize.css

https://csstools.github.io/sanitize.css/

README.md

@@ -15,7 +15,7 @@
 
 # Pico.css
 
-`5.6 KB` minified and gzipped
+`6.2 KB` minified and gzipped
 
 - **Class-light and semantic**: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
 - **Great styles with just one CSS file**: No dependencies, package manager, external files or JavaScript.
@@ -83,6 +83,6 @@ npm install @picocss/pico
 ## Copyright and license
 
 - Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md)
-- Openly inspired by [Bootstrap](https://github.com/twbs/bootstrap) ([MIT](https://github.com/twbs/bootstrap/blob/master/LICENSE)), [Spectre](https://github.com/picturepan2/spectre) ([MIT](https://github.com/picturepan2/spectre/blob/master/LICENSE)), [Wing](https://github.com/kbrsh/wing/) ([MIT](https://github.com/kbrsh/wing/blob/master/LICENSE)), [CSS Bed](https://github.com/ubershmekel/cssbed) & [Normalize](https://github.com/necolas/normalize.css/) ([MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md))
+- Openly inspired by [Bootstrap](https://github.com/twbs/bootstrap) ([MIT](https://github.com/twbs/bootstrap/blob/master/LICENSE)), [Spectre](https://github.com/picturepan2/spectre) ([MIT](https://github.com/picturepan2/spectre/blob/master/LICENSE)), [Wing](https://github.com/kbrsh/wing/) ([MIT](https://github.com/kbrsh/wing/blob/master/LICENSE)), [CSS Bed](https://github.com/ubershmekel/cssbed), [Normalize](https://github.com/necolas/normalize.css/) ([MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md)) & [Sanitize](https://csstools.github.io/sanitize.css/) ([CC0 1.0](https://github.com/csstools/sanitize.css/blob/master/LICENSE.md))
 - Library icons by [Feather](https://github.com/feathericons/feather) ([MIT](https://github.com/feathericons/feather/blob/master/LICENSE))
 - Website icons by [Font Awesome](https://github.com/FortAwesome/Font-Awesome) ([CC BY 4.0](https://fontawesome.com/license/free))

css/pico.classless.css

@@ -155,16 +155,26 @@
   box-sizing: border-box;
 }
 
+::before,
+::after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
 html {
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
   background: var(--background);
   color: var(--text);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 16px;
   font-weight: 400;
   line-height: 1.5;
   text-rendering: optimizeLegibility;
+  cursor: default;
 }
 
 @media (min-width: 576px) {
@@ -320,15 +330,19 @@ sup {
   top: -0.5rem;
 }
 
-img {
+dl dl,
-  max-width: 100%;
+dl ol,
-  height: auto;
+dl ul,
-  border-style: none;
+ol dl,
+ul dl {
+  margin: 0;
 }
 
-svg,
+ol ol,
-img {
+ol ul,
-  vertical-align: text-bottom;
+ul ol,
+ul ul {
+  margin: 0;
 }
 
 address,
@@ -509,6 +523,46 @@ del {
   background-color: var(--primary-focus);
 }
 
+/**
+ * Embedded content
+ */
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+audio,
+video {
+  display: inline-block;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+iframe {
+  border-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border-style: none;
+}
+
+svg:not([fill]) {
+  fill: currentColor;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
 /**
  * Form elements
  */
@@ -519,9 +573,14 @@ textarea {
   margin: 0;
   font-family: inherit;
   font-size: 1rem;
+  letter-spacing: inherit;
   line-height: 1.5;
 }
 
+/**
+ * 1. Change the inconsistent appearance in all browsers (opinionated).
+ * 2. Add typography inheritance in all browsers (opinionated).
+ */
 input {
   overflow: visible;
 }
@@ -539,7 +598,10 @@ legend {
 }
 
 textarea {
+  margin: 0;
   overflow: auto;
+  resize: vertical;
+  resize: block;
 }
 
 [type="checkbox"],
@@ -547,7 +609,8 @@ textarea {
   padding: 0;
 }
 
-[type="number"]::-webkit-inner-spin-button {
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -565,6 +628,29 @@ textarea {
   font: inherit;
 }
 
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+::-ms-expand {
+  display: none;
+}
+
+[type="color"],
+[type="range"] {
+  padding: 0;
+  border-width: 0;
+}
+
 fieldset {
   margin: 0;
   margin-bottom: 1.5rem;
@@ -603,9 +689,11 @@ textarea {
   transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
-input::placeholder,
+input::placeholder, input::-webkit-input-placeholder,
 select::placeholder,
-textarea::placeholder {
+select::-webkit-input-placeholder,
+textarea::placeholder,
+textarea::-webkit-input-placeholder {
   color: var(--muted-text);
   opacity: 1;
 }
@@ -664,8 +752,8 @@ select::-ms-expand {
   background-color: transparent;
 }
 
-select:not([multiple]) {
+select:not([multiple]):not([size]) {
-  background-image: 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='%23808080' 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");
+  background-image: 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.66)' 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");
   background-position: center right .75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
@@ -808,8 +896,8 @@ a[role="button"] {
 button,
 input[type="submit"],
 a[role="button"] {
-  border: 1px solid transparent;
   padding: 0.75rem 1rem;
+  border: 1px solid transparent;
   border-radius: 0.25rem;
   outline: none;
   background-color: var(--primary);
@@ -855,7 +943,10 @@ a[role="button"][disabled] {
  */
 table {
   width: 100%;
+  border-color: inherit;
+  border-collapse: collapse;
   border-spacing: 0;
+  text-indent: 0;
 }
 
 th,
@@ -863,9 +954,9 @@ td {
   padding: 0.5rem 1rem;
   border-bottom: 1px solid var(--table-border);
   color: var(--muted-text);
+  font-size: 0.875rem;
   font-weight: 400;
   text-align: left;
-  font-size: 0.875rem;
 }
 
 th,
@@ -890,10 +981,15 @@ pre,
 code,
 kbd,
 samp {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
 }
 
+pre {
+  -ms-overflow-style: scrollbar;
+  overflow: auto;
+}
+
 pre,
 code,
 kbd {
@@ -901,7 +997,7 @@ kbd {
   color: var(--code-color-1);
   font-size: 85%;
   font-weight: 400;
-  line-height: 1;
+  line-height: initial;
 }
 
 @media (min-width: 576px) {
@@ -985,6 +1081,43 @@ kbd {
   font-weight: bolder;
 }
 
+/**
+ * Accessibility & User interaction
+ */
+[aria-busy="true"] {
+  cursor: progress;
+}
+
+[aria-controls] {
+  cursor: pointer;
+}
+
+[aria-disabled="true"],
+[disabled] {
+  cursor: not-allowed;
+}
+
+[aria-hidden="false"][hidden] {
+  display: initial;
+}
+
+[aria-hidden="false"][hidden]:not(:focus) {
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+}
+
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea,
+[tabindex] {
+  -ms-touch-action: manipulation;
+}
+
 /**
  * Miscs
  */
@@ -997,6 +1130,7 @@ hr {
 }
 
 progress {
+  display: inline-block;
   vertical-align: baseline;
 }
 
@@ -1005,6 +1139,32 @@ template {
   display: none;
 }
 
+dialog {
+  display: block;
+  position: absolute;
+  right: 0;
+  left: 0;
+  width: -moz-fit-content;
+  width: -webkit-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: -webkit-fit-content;
+  height: fit-content;
+  margin: auto;
+  padding: 1em;
+  border: solid;
+  background-color: white;
+  color: black;
+}
+
+dialog:not([open]) {
+  display: none;
+}
+
+canvas {
+  display: inline-block;
+}
+
 /**
  * Accordion (<details>)
  * Inspiration: https://codepen.io/koca/pen/RyeLLV
@@ -1017,9 +1177,9 @@ details {
 }
 
 details summary {
+  line-height: 1rem;
   list-style-type: none;
   cursor: pointer;
-  line-height: 1rem;
 }
 
 details summary::-webkit-details-marker {
@@ -1040,7 +1200,7 @@ details summary::after {
   height: 1rem;
   float: right;
   transform: rotate(-90deg);
-  background-image: 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='%23808080' 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");
+  background-image: 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.66)' 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");
   background-position: center;
   background-repeat: no-repeat;
   background-size: 1rem auto;
@@ -1246,6 +1406,7 @@ nav {
   justify-content: space-between;
 }
 
+nav ol,
 nav ul {
   align-items: center;
   margin-bottom: 0;
@@ -1253,10 +1414,12 @@ nav ul {
   list-style: none;
 }
 
+nav ol:first-of-type,
 nav ul:first-of-type {
   margin-left: -0.5rem;
 }
 
+nav ol:last-of-type,
 nav ul:last-of-type {
   margin-right: -0.5rem;
 }
@@ -1284,6 +1447,7 @@ nav a:hover, nav a:active, nav a:focus {
 }
 
 aside nav,
+aside ol,
 aside ul,
 aside li {
   display: block;
@@ -1349,3 +1513,20 @@ aside li a {
 [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
   opacity: 1;
 }
+
+/**
+   * Reduce Motion Features
+   */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    background-attachment: initial;
+    animation-duration: 1ms;
+    animation-delay: -1ms;
+    animation-iteration-count: 1;
+    scroll-behavior: auto;
+    transition-delay: 0s;
+    transition-duration: 0s;
+  }
+}

css/pico.css

@@ -155,16 +155,26 @@
   box-sizing: border-box;
 }
 
+::before,
+::after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
 html {
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
   background: var(--background);
   color: var(--text);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 16px;
   font-weight: 400;
   line-height: 1.5;
   text-rendering: optimizeLegibility;
+  cursor: default;
 }
 
 @media (min-width: 576px) {
@@ -259,9 +269,9 @@ body > footer {
 
 @media (min-width: 576px) {
   .container {
+    max-width: 510px;
     padding-right: 0;
     padding-left: 0;
-    max-width: 510px;
   }
 }
 
@@ -376,15 +386,19 @@ sup {
   top: -0.5rem;
 }
 
-img {
+dl dl,
-  max-width: 100%;
+dl ol,
-  height: auto;
+dl ul,
-  border-style: none;
+ol dl,
+ul dl {
+  margin: 0;
 }
 
-svg,
+ol ol,
-img {
+ol ul,
-  vertical-align: text-bottom;
+ul ol,
+ul ul {
+  margin: 0;
 }
 
 address,
@@ -592,6 +606,46 @@ del {
   background-color: var(--primary-focus);
 }
 
+/**
+ * Embedded content
+ */
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+audio,
+video {
+  display: inline-block;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+iframe {
+  border-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border-style: none;
+}
+
+svg:not([fill]) {
+  fill: currentColor;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
 /**
  * Form elements
  */
@@ -602,9 +656,14 @@ textarea {
   margin: 0;
   font-family: inherit;
   font-size: 1rem;
+  letter-spacing: inherit;
   line-height: 1.5;
 }
 
+/**
+ * 1. Change the inconsistent appearance in all browsers (opinionated).
+ * 2. Add typography inheritance in all browsers (opinionated).
+ */
 input {
   overflow: visible;
 }
@@ -622,7 +681,10 @@ legend {
 }
 
 textarea {
+  margin: 0;
   overflow: auto;
+  resize: vertical;
+  resize: block;
 }
 
 [type="checkbox"],
@@ -630,7 +692,8 @@ textarea {
   padding: 0;
 }
 
-[type="number"]::-webkit-inner-spin-button {
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -648,6 +711,29 @@ textarea {
   font: inherit;
 }
 
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+::-ms-expand {
+  display: none;
+}
+
+[type="color"],
+[type="range"] {
+  padding: 0;
+  border-width: 0;
+}
+
 fieldset {
   margin: 0;
   margin-bottom: 1.5rem;
@@ -686,9 +772,11 @@ textarea {
   transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
-input::placeholder,
+input::placeholder, input::-webkit-input-placeholder,
 select::placeholder,
-textarea::placeholder {
+select::-webkit-input-placeholder,
+textarea::placeholder,
+textarea::-webkit-input-placeholder {
   color: var(--muted-text);
   opacity: 1;
 }
@@ -753,14 +841,14 @@ input:not([type="checkbox"]):not([type="radio"]).valid,
 select.valid,
 textarea.valid {
   border-bottom: 1px solid var(--valid);
-  background-image: 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='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  background-image: 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(40, 138, 106, 0.99)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
 }
 
 input:not([type="checkbox"]):not([type="radio"]).invalid,
 select.invalid,
 textarea.invalid {
   border-bottom: 1px solid var(--invalid);
-  background-image: 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='%23b94646' 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");
+  background-image: 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(185, 70, 70, 0.99)' 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");
 }
 
 input[type="color"] {
@@ -772,8 +860,8 @@ select::-ms-expand {
   background-color: transparent;
 }
 
-select:not([multiple]) {
+select:not([multiple]):not([size]) {
-  background-image: 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='%23808080' 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");
+  background-image: 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.66)' 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");
   background-position: center right .75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
@@ -916,8 +1004,8 @@ a[role="button"] {
 button,
 input[type="submit"],
 a[role="button"] {
-  border: 1px solid transparent;
   padding: 0.75rem 1rem;
+  border: 1px solid transparent;
   border-radius: 0.25rem;
   outline: none;
   background-color: var(--primary);
@@ -1101,7 +1189,10 @@ a.outline.contrast[role="button"]:focus {
  */
 table {
   width: 100%;
+  border-color: inherit;
+  border-collapse: collapse;
   border-spacing: 0;
+  text-indent: 0;
 }
 
 th,
@@ -1109,9 +1200,9 @@ td {
   padding: 0.5rem 1rem;
   border-bottom: 1px solid var(--table-border);
   color: var(--muted-text);
+  font-size: 0.875rem;
   font-weight: 400;
   text-align: left;
-  font-size: 0.875rem;
 }
 
 th,
@@ -1136,10 +1227,15 @@ pre,
 code,
 kbd,
 samp {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
 }
 
+pre {
+  -ms-overflow-style: scrollbar;
+  overflow: auto;
+}
+
 pre,
 code,
 kbd {
@@ -1147,7 +1243,7 @@ kbd {
   color: var(--code-color-1);
   font-size: 85%;
   font-weight: 400;
-  line-height: 1;
+  line-height: initial;
 }
 
 @media (min-width: 576px) {
@@ -1231,6 +1327,43 @@ kbd {
   font-weight: bolder;
 }
 
+/**
+ * Accessibility & User interaction
+ */
+[aria-busy="true"] {
+  cursor: progress;
+}
+
+[aria-controls] {
+  cursor: pointer;
+}
+
+[aria-disabled="true"],
+[disabled] {
+  cursor: not-allowed;
+}
+
+[aria-hidden="false"][hidden] {
+  display: initial;
+}
+
+[aria-hidden="false"][hidden]:not(:focus) {
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+}
+
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea,
+[tabindex] {
+  -ms-touch-action: manipulation;
+}
+
 /**
  * Miscs
  */
@@ -1243,6 +1376,7 @@ hr {
 }
 
 progress {
+  display: inline-block;
   vertical-align: baseline;
 }
 
@@ -1251,6 +1385,32 @@ template {
   display: none;
 }
 
+dialog {
+  display: block;
+  position: absolute;
+  right: 0;
+  left: 0;
+  width: -moz-fit-content;
+  width: -webkit-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: -webkit-fit-content;
+  height: fit-content;
+  margin: auto;
+  padding: 1em;
+  border: solid;
+  background-color: white;
+  color: black;
+}
+
+dialog:not([open]) {
+  display: none;
+}
+
+canvas {
+  display: inline-block;
+}
+
 /**
  * Accordion (<details>)
  * Inspiration: https://codepen.io/koca/pen/RyeLLV
@@ -1263,9 +1423,9 @@ details {
 }
 
 details summary {
+  line-height: 1rem;
   list-style-type: none;
   cursor: pointer;
-  line-height: 1rem;
 }
 
 details summary::-webkit-details-marker {
@@ -1286,7 +1446,7 @@ details summary::after {
   height: 1rem;
   float: right;
   transform: rotate(-90deg);
-  background-image: 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='%23808080' 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");
+  background-image: 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.66)' 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");
   background-position: center;
   background-repeat: no-repeat;
   background-size: 1rem auto;
@@ -1492,6 +1652,7 @@ nav {
   justify-content: space-between;
 }
 
+nav ol,
 nav ul {
   align-items: center;
   margin-bottom: 0;
@@ -1499,10 +1660,12 @@ nav ul {
   list-style: none;
 }
 
+nav ol:first-of-type,
 nav ul:first-of-type {
   margin-left: -0.5rem;
 }
 
+nav ol:last-of-type,
 nav ul:last-of-type {
   margin-right: -0.5rem;
 }
@@ -1534,6 +1697,7 @@ nav a.contrast:not([role="button"]), nav a.contrast:not([role="button"]):hover,
 }
 
 aside nav,
+aside ol,
 aside ul,
 aside li {
   display: block;
@@ -1599,3 +1763,20 @@ aside li a {
 [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
   opacity: 1;
 }
+
+/**
+   * Reduce Motion Features
+   */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    background-attachment: initial;
+    animation-duration: 1ms;
+    animation-delay: -1ms;
+    animation-iteration-count: 1;
+    scroll-behavior: auto;
+    transition-delay: 0s;
+    transition-duration: 0s;
+  }
+}

css/pico.fluid.classless.css

@@ -155,16 +155,26 @@
   box-sizing: border-box;
 }
 
+::before,
+::after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
 html {
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
   background: var(--background);
   color: var(--text);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 16px;
   font-weight: 400;
   line-height: 1.5;
   text-rendering: optimizeLegibility;
+  cursor: default;
 }
 
 @media (min-width: 576px) {
@@ -316,15 +326,19 @@ sup {
   top: -0.5rem;
 }
 
-img {
+dl dl,
-  max-width: 100%;
+dl ol,
-  height: auto;
+dl ul,
-  border-style: none;
+ol dl,
+ul dl {
+  margin: 0;
 }
 
-svg,
+ol ol,
-img {
+ol ul,
-  vertical-align: text-bottom;
+ul ol,
+ul ul {
+  margin: 0;
 }
 
 address,
@@ -505,6 +519,46 @@ del {
   background-color: var(--primary-focus);
 }
 
+/**
+ * Embedded content
+ */
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+audio,
+video {
+  display: inline-block;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+iframe {
+  border-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border-style: none;
+}
+
+svg:not([fill]) {
+  fill: currentColor;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
 /**
  * Form elements
  */
@@ -515,9 +569,14 @@ textarea {
   margin: 0;
   font-family: inherit;
   font-size: 1rem;
+  letter-spacing: inherit;
   line-height: 1.5;
 }
 
+/**
+ * 1. Change the inconsistent appearance in all browsers (opinionated).
+ * 2. Add typography inheritance in all browsers (opinionated).
+ */
 input {
   overflow: visible;
 }
@@ -535,7 +594,10 @@ legend {
 }
 
 textarea {
+  margin: 0;
   overflow: auto;
+  resize: vertical;
+  resize: block;
 }
 
 [type="checkbox"],
@@ -543,7 +605,8 @@ textarea {
   padding: 0;
 }
 
-[type="number"]::-webkit-inner-spin-button {
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -561,6 +624,29 @@ textarea {
   font: inherit;
 }
 
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+::-ms-expand {
+  display: none;
+}
+
+[type="color"],
+[type="range"] {
+  padding: 0;
+  border-width: 0;
+}
+
 fieldset {
   margin: 0;
   margin-bottom: 1.5rem;
@@ -599,9 +685,11 @@ textarea {
   transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
-input::placeholder,
+input::placeholder, input::-webkit-input-placeholder,
 select::placeholder,
-textarea::placeholder {
+select::-webkit-input-placeholder,
+textarea::placeholder,
+textarea::-webkit-input-placeholder {
   color: var(--muted-text);
   opacity: 1;
 }
@@ -660,8 +748,8 @@ select::-ms-expand {
   background-color: transparent;
 }
 
-select:not([multiple]) {
+select:not([multiple]):not([size]) {
-  background-image: 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='%23808080' 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");
+  background-image: 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.66)' 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");
   background-position: center right .75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
@@ -804,8 +892,8 @@ a[role="button"] {
 button,
 input[type="submit"],
 a[role="button"] {
-  border: 1px solid transparent;
   padding: 0.75rem 1rem;
+  border: 1px solid transparent;
   border-radius: 0.25rem;
   outline: none;
   background-color: var(--primary);
@@ -851,7 +939,10 @@ a[role="button"][disabled] {
  */
 table {
   width: 100%;
+  border-color: inherit;
+  border-collapse: collapse;
   border-spacing: 0;
+  text-indent: 0;
 }
 
 th,
@@ -859,9 +950,9 @@ td {
   padding: 0.5rem 1rem;
   border-bottom: 1px solid var(--table-border);
   color: var(--muted-text);
+  font-size: 0.875rem;
   font-weight: 400;
   text-align: left;
-  font-size: 0.875rem;
 }
 
 th,
@@ -886,10 +977,15 @@ pre,
 code,
 kbd,
 samp {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
 }
 
+pre {
+  -ms-overflow-style: scrollbar;
+  overflow: auto;
+}
+
 pre,
 code,
 kbd {
@@ -897,7 +993,7 @@ kbd {
   color: var(--code-color-1);
   font-size: 85%;
   font-weight: 400;
-  line-height: 1;
+  line-height: initial;
 }
 
 @media (min-width: 576px) {
@@ -981,6 +1077,43 @@ kbd {
   font-weight: bolder;
 }
 
+/**
+ * Accessibility & User interaction
+ */
+[aria-busy="true"] {
+  cursor: progress;
+}
+
+[aria-controls] {
+  cursor: pointer;
+}
+
+[aria-disabled="true"],
+[disabled] {
+  cursor: not-allowed;
+}
+
+[aria-hidden="false"][hidden] {
+  display: initial;
+}
+
+[aria-hidden="false"][hidden]:not(:focus) {
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+}
+
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea,
+[tabindex] {
+  -ms-touch-action: manipulation;
+}
+
 /**
  * Miscs
  */
@@ -993,6 +1126,7 @@ hr {
 }
 
 progress {
+  display: inline-block;
   vertical-align: baseline;
 }
 
@@ -1001,6 +1135,32 @@ template {
   display: none;
 }
 
+dialog {
+  display: block;
+  position: absolute;
+  right: 0;
+  left: 0;
+  width: -moz-fit-content;
+  width: -webkit-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: -webkit-fit-content;
+  height: fit-content;
+  margin: auto;
+  padding: 1em;
+  border: solid;
+  background-color: white;
+  color: black;
+}
+
+dialog:not([open]) {
+  display: none;
+}
+
+canvas {
+  display: inline-block;
+}
+
 /**
  * Accordion (<details>)
  * Inspiration: https://codepen.io/koca/pen/RyeLLV
@@ -1013,9 +1173,9 @@ details {
 }
 
 details summary {
+  line-height: 1rem;
   list-style-type: none;
   cursor: pointer;
-  line-height: 1rem;
 }
 
 details summary::-webkit-details-marker {
@@ -1036,7 +1196,7 @@ details summary::after {
   height: 1rem;
   float: right;
   transform: rotate(-90deg);
-  background-image: 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='%23808080' 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");
+  background-image: 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.66)' 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");
   background-position: center;
   background-repeat: no-repeat;
   background-size: 1rem auto;
@@ -1242,6 +1402,7 @@ nav {
   justify-content: space-between;
 }
 
+nav ol,
 nav ul {
   align-items: center;
   margin-bottom: 0;
@@ -1249,10 +1410,12 @@ nav ul {
   list-style: none;
 }
 
+nav ol:first-of-type,
 nav ul:first-of-type {
   margin-left: -0.5rem;
 }
 
+nav ol:last-of-type,
 nav ul:last-of-type {
   margin-right: -0.5rem;
 }
@@ -1280,6 +1443,7 @@ nav a:hover, nav a:active, nav a:focus {
 }
 
 aside nav,
+aside ol,
 aside ul,
 aside li {
   display: block;
@@ -1345,3 +1509,20 @@ aside li a {
 [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
   opacity: 1;
 }
+
+/**
+   * Reduce Motion Features
+   */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    background-attachment: initial;
+    animation-duration: 1ms;
+    animation-delay: -1ms;
+    animation-iteration-count: 1;
+    scroll-behavior: auto;
+    transition-delay: 0s;
+    transition-duration: 0s;
+  }
+}

css/pico.slim.css

@@ -158,16 +158,26 @@
   box-sizing: border-box;
 }
 
+::before,
+::after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
 html {
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
   background: var(--background);
   color: var(--text);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 16px;
   font-weight: 400;
   line-height: 1.5;
   text-rendering: optimizeLegibility;
+  cursor: default;
 }
 
 @media (min-width: 576px) {
@@ -230,9 +240,9 @@ body > footer {
 
 @media (min-width: 576px) {
   .container {
+    max-width: 510px;
     padding-right: 0;
     padding-left: 0;
-    max-width: 510px;
   }
 }
 
@@ -315,15 +325,19 @@ sup {
   top: -0.5rem;
 }
 
-img {
+dl dl,
-  max-width: 100%;
+dl ol,
-  height: auto;
+dl ul,
-  border-style: none;
+ol dl,
+ul dl {
+  margin: 0;
 }
 
-svg,
+ol ol,
-img {
+ol ul,
-  vertical-align: text-bottom;
+ul ol,
+ul ul {
+  margin: 0;
 }
 
 address,
@@ -530,6 +544,46 @@ del {
   background-color: var(--primary-focus);
 }
 
+/**
+ * Embedded content
+ */
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+audio,
+video {
+  display: inline-block;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+iframe {
+  border-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border-style: none;
+}
+
+svg:not([fill]) {
+  fill: currentColor;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
 /**
  * Form elements
  */
@@ -540,9 +594,14 @@ textarea {
   margin: 0;
   font-family: inherit;
   font-size: 1rem;
+  letter-spacing: inherit;
   line-height: 1.5;
 }
 
+/**
+ * 1. Change the inconsistent appearance in all browsers (opinionated).
+ * 2. Add typography inheritance in all browsers (opinionated).
+ */
 input {
   overflow: visible;
 }
@@ -560,7 +619,10 @@ legend {
 }
 
 textarea {
+  margin: 0;
   overflow: auto;
+  resize: vertical;
+  resize: block;
 }
 
 [type="checkbox"],
@@ -568,7 +630,8 @@ textarea {
   padding: 0;
 }
 
-[type="number"]::-webkit-inner-spin-button {
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -586,6 +649,29 @@ textarea {
   font: inherit;
 }
 
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+::-ms-expand {
+  display: none;
+}
+
+[type="color"],
+[type="range"] {
+  padding: 0;
+  border-width: 0;
+}
+
 fieldset {
   margin: 0;
   margin-bottom: 1.5rem;
@@ -623,9 +709,11 @@ textarea {
   vertical-align: middle;
 }
 
-input::placeholder,
+input::placeholder, input::-webkit-input-placeholder,
 select::placeholder,
-textarea::placeholder {
+select::-webkit-input-placeholder,
+textarea::placeholder,
+textarea::-webkit-input-placeholder {
   color: var(--muted-text);
   opacity: 1;
 }
@@ -684,8 +772,8 @@ select::-ms-expand {
   background-color: transparent;
 }
 
-select:not([multiple]) {
+select:not([multiple]):not([size]) {
-  background-image: 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='%23808080' 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");
+  background-image: 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.66)' 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");
   background-position: center right .75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
@@ -827,8 +915,8 @@ a[role="button"] {
 button,
 input[type="submit"],
 a[role="button"] {
-  border: 1px solid transparent;
   padding: 0.75rem 1rem;
+  border: 1px solid transparent;
   border-radius: 0.25rem;
   outline: none;
   background-color: var(--primary);
@@ -873,7 +961,10 @@ a[role="button"][disabled] {
  */
 table {
   width: 100%;
+  border-color: inherit;
+  border-collapse: collapse;
   border-spacing: 0;
+  text-indent: 0;
 }
 
 th,
@@ -881,9 +972,9 @@ td {
   padding: 0.5rem 1rem;
   border-bottom: 1px solid var(--table-border);
   color: var(--muted-text);
+  font-size: 0.875rem;
   font-weight: 400;
   text-align: left;
-  font-size: 0.875rem;
 }
 
 th,
@@ -900,3 +991,40 @@ thead td {
 tbody tr:nth-child(odd) {
   background-color: var(--table-stripping);
 }
+
+/**
+ * Accessibility & User interaction
+ */
+[aria-busy="true"] {
+  cursor: progress;
+}
+
+[aria-controls] {
+  cursor: pointer;
+}
+
+[aria-disabled="true"],
+[disabled] {
+  cursor: not-allowed;
+}
+
+[aria-hidden="false"][hidden] {
+  display: initial;
+}
+
+[aria-hidden="false"][hidden]:not(:focus) {
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+}
+
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea,
+[tabindex] {
+  -ms-touch-action: manipulation;
+}

scss/_variables.scss

@@ -54,14 +54,38 @@ $spacing-input-button: .75rem 1rem !default;
 // ––––––––––––––––––––
 
 // Sans serif native font stack
-$sans-serif:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+// Source: github.com/csstools/sanitize.css/blob/master/typography.css
-                 "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+$sans-serif:
-                 "Apple Color Emoji", "Segoe UI Emoji",
+  system-ui,
-                 "Segoe UI Symbol", "Noto Color Emoji" !default;
+  -apple-system,       // macOS 10.11-10.12
+  "Segoe UI",          // Windows 6+
+  "Roboto",            // Android 4+
+  "Ubuntu",            // Ubuntu 10.10+
+  "Cantarell",         // Gnome 3+
+  "Noto Sans",         // KDE Plasma 5+
+  sans-serif,          // Fallback
+  "Apple Color Emoji", // macOS emoji
+  "Segoe UI Emoji",    // Windows emoji
+  "Segoe UI Symbol",   // Windows emoji
+  "Noto Color Emoji"   // Linux emoji
+  !default;
 
 // Monospace native font stack
-$monospace:      SFMono-Regular, Menlo, Monaco, Consolas,
+// // Source: github.com/csstools/sanitize.css/blob/master/typography.css
-                 "Liberation Mono", "Courier New", monospace !default;
+$monospace:
+  "Menlo",             // macOS 10.10+
+  "Consolas",          // Windows 6+
+  "Roboto Mono",       // Android 4+
+  "Ubuntu Monospace",  // Ubuntu 10.10+
+  "Noto Mono",         // KDE Plasma 5+
+  "Oxygen Mono",       // KDE Plasma 4+
+  "Liberation Mono",   // Linux/OpenOffice fallback
+  monospace,           // Fallback
+  "Apple Color Emoji", // macOS emoji
+  "Segoe UI Emoji",    // Windows emoji
+  "Segoe UI Symbol",   // Windows emoji
+  "Noto Color Emoji"   // Linux emoji
+  !default;
 
 $line-height:    1.5 !default;
 $text-weight:    400 !default;

scss/components/_accordion.scss

@@ -10,9 +10,9 @@ details {
   border-bottom: 1px solid var(--muted-border);
 
   summary {
+    line-height: 1rem;
     list-style-type: none;
     cursor: pointer;
-    line-height: 1rem;
 
     // Reset marker
     &::-webkit-details-marker {
@@ -27,14 +27,13 @@ details {
 
     // Marker
     &::after {
-      $caret-icon-color: "808080"; // Without '#' !important
       display: inline-block;
       width: 1rem;
       height: 1rem;
       float: right;
       transform: rotate(-90deg);
       // Source: https://feathericons.com/
-      background-image: 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='%23" + $caret-icon-color + "' 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");
+      background-image: 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, .66)}' 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");
       background-position: center;
       background-repeat: no-repeat;
       background-size: 1rem auto;

scss/components/_nav.scss

@@ -11,6 +11,7 @@ nav ul {
 nav {
   justify-content: space-between;
 
+  ol,
   ul {
     align-items: center;
     margin-bottom: 0;
@@ -65,6 +66,7 @@ nav {
 aside {
 
   nav,
+  ol,
   ul,
   li {
     display: block;

scss/components/_tooltip.scss

@@ -54,6 +54,5 @@
      &::after {
        opacity: 1;
      }
-
    }
  }

scss/content/_accessibility.scss

@@ -0,0 +1,51 @@
+/**
+ * Accessibility & User interaction
+ */
+
+
+// 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
+// ––––––––––––––––––––
+
+// Accessibility
+
+// Change the cursor on busy elements in all browsers (opinionated)
+[aria-busy="true"] {
+  cursor: progress;
+}
+
+// Change the cursor on control elements in all browsers (opinionated)
+[aria-controls] {
+  cursor: pointer;
+}
+
+// Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
+[aria-disabled="true"],
+[disabled] {
+  cursor: not-allowed;
+}
+
+// Change the display on visually hidden accessible elements in all browsers (opinionated)
+[aria-hidden="false"][hidden] {
+  display: initial;
+}
+
+[aria-hidden="false"][hidden]:not(:focus) {
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+}
+
+// User interaction
+// Remove the tapping delay in IE 10
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea,
+[tabindex] {
+  -ms-touch-action: manipulation;
+}

scss/content/_button.scss

@@ -3,11 +3,12 @@
  */
 
 
-// Reboot
+// Reboot based on :
-// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - 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
 // ––––––––––––––––––––
 
-// 1. Change the font styles in all browsers.
+// 1. Change the font styles in all browsers
 // 2. Remove the margin in Firefox and Safari
 // 3. Show the overflow in Edge
 button {
@@ -17,7 +18,7 @@ button {
   text-transform: none; // 1
 }
 
-// Correct the inability to style clickable types in iOS and Safari.
+// Correct the inability to style clickable types in iOS and Safari
 button,
 [type="button"],
 [type="reset"],
@@ -25,7 +26,7 @@ button,
   -webkit-appearance: button;
 }
 
-// Remove the inner border and padding in Firefox.
+// Remove the inner border and padding in Firefox
 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
@@ -52,8 +53,8 @@ a[role="button"] {
 button,
 input[type="submit"],
 a[role="button"] {
-  border: 1px solid transparent;
   padding: $spacing-input-button;
+  border: 1px solid transparent;
   border-radius: $round;
   outline: none;
   background-color: var(--primary);

scss/content/_code.scss

@@ -3,11 +3,13 @@
  */
 
 
-// Reboot
+// 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
 // ––––––––––––––––––––
 
-// 1. Correct the inheritance and scaling of font size in all browsers.
+// 1. Correct the inheritance and scaling of font size in all browsers
-// 2. Correct the odd `em` font sizing in all browsers.
+// 2. Correct the odd `em` font sizing in all browsers
 pre,
 code,
 kbd,
@@ -16,6 +18,12 @@ samp {
   font-size: 1rem; // 2
 }
 
+// Prevent overflow of the container in all browsers (opinionated)
+pre {
+  -ms-overflow-style: scrollbar;
+  overflow: auto;
+}
+
 
 // Pico
 // ––––––––––––––––––––
@@ -27,7 +35,7 @@ kbd {
   color: var(--code-color-1);
   font-size: 85%;
   font-weight: 400;
-  line-height: 1;
+  line-height: initial;
 
   @if map-get($breakpoints, "sm") and $enable-responsive-typography {
     @media (min-width: map-get($breakpoints, "sm")) {

scss/content/_embedded.scss

@@ -0,0 +1,54 @@
+/**
+ * Embedded content
+ */
+
+
+// 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
+// ––––––––––––––––––––
+
+// Change the alignment on media elements in all browsers (opinionated)
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+// Add the correct display in IE 9-
+audio,
+video {
+  display: inline-block;
+}
+
+// Add the correct display in iOS 4-7
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+// Remove the border on iframes in all browsers (opinionated)
+iframe {
+  border-style: none;
+}
+
+// 1. Remove the border on images inside links in IE 10.
+// 2. Responsive by default
+img {
+  max-width: 100%; // 2
+  height: auto; // 2
+  border-style: none; // 1
+}
+
+// Change the fill color to match the text color in all browsers (opinionated)
+svg:not([fill]) {
+  fill: currentColor;
+}
+
+// Hide the overflow in IE
+svg:not(:root) {
+  overflow: hidden;
+}

scss/content/_form.scss

@@ -3,12 +3,13 @@
  */
 
 
-// Reboot
+// Reboot based on :
-// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - 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
 // ––––––––––––––––––––
 
-// 1. Change the font styles in all browsers.
+// 1. Change the font styles in all browsers
-// 2. Remove the margin in Firefox and Safari.
+// 2. Remove the margin in Firefox and Safari
 input,
 optgroup,
 select,
@@ -16,23 +17,29 @@ textarea {
   margin: 0; // 2
   font-family: inherit; // 1
   font-size: 1rem; // 1
+  letter-spacing: inherit; // 2
   line-height: $line-height; // 1
 }
 
+/**
+ * 1. Change the inconsistent appearance in all browsers (opinionated).
+ * 2. Add typography inheritance in all browsers (opinionated).
+ */
+
 // Show the overflow in IE.
 input {
   overflow: visible;
 }
 
-// Remove the inheritance of text transform in Edge, Firefox, and IE.
+// Remove the inheritance of text transform in Edge, Firefox, and IE
 select {
   text-transform: none;
 }
 
-// 1. Correct the text wrapping in Edge and IE.
+// 1. Correct the text wrapping in Edge and IE
-// 2. Correct the color inheritance from `fieldset` elements in IE.
+// 2. Correct the color inheritance from `fieldset` elements in IE
 // 3. Remove the padding so developers are not caught out when they zero out
-// `fieldset` elements in all browsers.
+// `fieldset` elements in all browsers
 legend {
   display: table; // 1
   max-width: 100%; // 1
@@ -41,41 +48,75 @@ legend {
   white-space: normal; // 1
 }
 
-// Remove the default vertical scrollbar in IE 10+.
+// 1. Remove the margin in Firefox and Safari
+// 2. Remove the default vertical scrollbar in IE
+// 3. Change the resize direction in all browsers (opinionated)
 textarea {
-  overflow: auto;
+  margin: 0; // 1
+  overflow: auto; // 2
+  resize: vertical; // 3
+  resize: block; // 3
 }
 
-// Remove the padding in IE 10.
+// Remove the padding in IE 10
 [type="checkbox"],
 [type="radio"] {
   padding: 0;
 }
 
-// Correct the cursor style of increment and decrement buttons in Chrome.
+// Correct the cursor style of increment and decrement buttons in Safari
-[type="number"]::-webkit-inner-spin-button {
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
   height: auto;
 }
 
-// 1. Correct the odd appearance in Chrome and Safari.
+// 1. Correct the odd appearance in Chrome and Safari
-// 2. Correct the outline style in Safari.
+// 2. Correct the outline style in Safari
 [type="search"] {
   -webkit-appearance: textfield; // 1
   outline-offset: -2px; // 2
 }
 
-// Remove the inner padding in Chrome and Safari on macOS.
+// Remove the inner padding in Chrome and Safari on macOS
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-// 1. Correct the inability to style clickable types in iOS and Safari.
+// 1. Correct the inability to style clickable types in iOS and Safari
-// 2. Change font properties to `inherit` in Safari.
+// 2. Change font properties to `inherit` in Safari
 ::-webkit-file-upload-button {
   -webkit-appearance: button; // 1
   font: inherit; // 2
 }
 
+// Remove the inner border and padding of focus outlines in Firefox
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+//  Restore the focus outline styles unset by the previous rule in Firefox
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+// Remove the additional :invalid styles in Firefox
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+// Change the inconsistent appearance in IE (opinionated)
+::-ms-expand {
+  display: none;
+}
+
+// Remove the border and padding in all browsers (opinionated)
+[type="color"],
+[type="range"] {
+  padding: 0;
+  border-width: 0;
+}
+
 
 // Pico
 // ––––––––––––––––––––
@@ -132,7 +173,8 @@ textarea {
       box-shadow $transition;
     }
 
-  &::placeholder {
+  &::placeholder,
+  &::-webkit-input-placeholder {
     color: var(--muted-text);
     opacity: 1;
   }
@@ -181,17 +223,15 @@ textarea {
     }
 
     &.valid {
-      // Source: https://feathericons.com/
-      $valid-icon-color: "288a6a"; // Without '#' !important
       border-bottom: 1px solid var(--valid);
-      background-image: 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='%23" + $valid-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+      // Source: https://feathericons.com/
+      background-image: 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($green-600, .99)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
     }
 
     &.invalid {
-      // Source: https://feathericons.com/
-      $invalid-icon-color: "b94646"; // Without '#' !important
       border-bottom: 1px solid var(--invalid);
-      background-image: 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='%23" + $invalid-icon-color + "' 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");
+      // Source: https://feathericons.com/
+      background-image: 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-700, .99)}' 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");
     }
   }
 }
@@ -210,10 +250,9 @@ select {
     background-color: transparent;
   }
 
-  &:not([multiple]) {
+  &:not([multiple]):not([size]) {
     // Source: https://feathericons.com/
-    $caret-icon-color: "808080"; // Without '#' !important
+    background-image: 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, .66)}' 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");
-    background-image: 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='%23" + $caret-icon-color + "' 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");
     background-position: center right .75rem;
     background-repeat: no-repeat;
     background-size: 1rem auto;

scss/content/_miscs.scss

@@ -3,12 +3,13 @@
  */
 
 
-// Reboot
+// Reboot based on :
-// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - 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
 // ––––––––––––––––––––
 
-// 1. Add the correct box sizing in Firefox.
+// 1. Add the correct box sizing in Firefox
-// 2. Show the overflow in Edge and IE.
+// 2. Show the overflow in Edge and IE
 hr {
   box-sizing: content-box; // 1
   height: 0; // 1
@@ -17,13 +18,43 @@ hr {
   border-top: 1px solid var(--muted-border);
 }
 
-// Add the correct vertical alignment in Chrome, Firefox, and Opera.
+// 1. Add the correct display in Edge 18- and IE
+// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
 progress {
-  vertical-align: baseline;
+  display: inline-block; // 1
+  vertical-align: baseline; // 2
 }
 
-// Add the correct display in IE 10+.
+// Add the correct display in IE 10+
 [hidden],
 template {
   display: none;
 }
+
+// Add the correct styles in Edge 18-, IE, and Safari
+dialog {
+  display: block;
+  position: absolute;
+  right: 0;
+  left: 0;
+  width: -moz-fit-content;
+  width: -webkit-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: -webkit-fit-content;
+  height: fit-content;
+  margin: auto;
+  padding: 1em;
+  border: solid;
+  background-color: white;
+  color: black;
+}
+
+dialog:not([open]) {
+  display: none;
+}
+
+// Add the correct display in IE 9-
+canvas {
+  display: inline-block;
+}

scss/content/_reduce-motion.scss

@@ -0,0 +1,29 @@
+@if $enable-transitions {
+
+  /**
+   * Reduce Motion Features
+   */
+
+
+  // Based on :
+  // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Remove animations when motion is reduced (opinionated)
+  // 2. Remove fixed background attachments when motion is reduced (opinionated)
+  // 3. Remove timed scrolling behaviors when motion is reduced (opinionated)
+  // 4. Remove transitions when motion is reduced (opinionated)
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      background-attachment: initial; // 2
+      animation-duration: 1ms; // 1
+      animation-delay: -1ms; // 1
+      animation-iteration-count: 1; // 1
+      scroll-behavior: auto; // 3
+      transition-delay: 0s; // 4
+      transition-duration: 0s; // 4
+    }
+  }
+}

scss/content/_table.scss

@@ -2,20 +2,36 @@
  * Table
  */
 
+
+// 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
+// ––––––––––––––––––––
+
+// 1. Collapse border spacing in all browsers (opinionated).
+// 2. Correct table border color inheritance in all Chrome, Edge, and Safari.
+// 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
 table {
   width: 100%;
+  border-color: inherit; // 2
+  border-collapse: collapse; // 1
   border-spacing: 0;
+  text-indent: 0; // 3
 }
 
+
+// Pico
+// ––––––––––––––––––––
+
 // Cells
 th,
 td {
   padding: ($spacing-gutter/2) $spacing-gutter;
   border-bottom: 1px solid var(--table-border);
   color: var(--muted-text);
+  font-size: 0.875rem;
   font-weight: $text-weight;
   text-align: left;
-  font-size: 0.875rem;
 }
 
 // Titles

scss/content/_typography.scss

@@ -3,17 +3,18 @@
  */
 
 
-// Reboot
+// Reboot based on :
-// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - 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
 // ––––––––––––––––––––
 
-// Add the correct font weight in Chrome, Edge, and Safari.
+// Add the correct font weight in Chrome, Edge, and Safari
 b,
 strong {
   font-weight: bolder;
 }
 
-// Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+// Prevent `sub` and `sup` elements from affecting the line height in all browsers
 sub,
 sup {
   position: relative;
@@ -28,16 +29,21 @@ sup {
   top: -0.5rem;
 }
 
-// 1. Remove the border on images inside links in IE 10.
+// Remove the margin on nested lists in Chrome, Edge, IE, and Safari
-// 2. Responsive by default
+dl dl,
-img {
+dl ol,
-  max-width: 100%; // 2
+dl ul,
-  height: auto; // 2
+ol dl,
-  border-style: none; // 1
+ul dl {
+  margin: 0;
 }
-svg,
+
-img {
+// Remove the margin on nested lists in Edge 18- and IE
-  vertical-align: text-bottom;
+ol ol,
+ol ul,
+ul ol,
+ul ul {
+  margin: 0;
 }
 
 
@@ -62,7 +68,7 @@ ul {
 }
 
 // Links
-// 1. Remove the gray background on active links in IE 10.
+// 1. Remove the gray background on active links in IE 10
 a {
   background-color: transparent; // 1
   color: var(--primary);
@@ -258,7 +264,7 @@ blockquote {
 }
 
 // Abbreviations
-// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari.
+// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
 abbr[title] {
   border-bottom: 1px dotted;
   text-decoration: none; // 1

scss/layout/_container.scss

@@ -17,9 +17,9 @@
 
     @if map-get($breakpoints, "sm") and $enable-viewport {
       @media (min-width: map-get($breakpoints, "sm")) {
+        max-width: map-get($viewports, "sm");
         padding-right: 0;
         padding-left: 0;
-        max-width: map-get($viewports, "sm");
       }
     }
 

scss/layout/_document.scss

@@ -4,23 +4,38 @@
  */
 
 
-// Reboot
+// Reboot based on :
-// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - 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
 // ––––––––––––––––––––
 
-// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`
 *,
 *::before,
 *::after {
   box-sizing: border-box; // 1
 }
 
-// 1. Correct the line height in all browsers.
+// 1. Add text decoration inheritance in all browsers (opinionated)
-// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+// 2. Add vertical alignment inheritance in all browsers (opinionated)
-// 3. Change the default tap highlight to be completely transparent in iOS.
+::before,
+::after {
+  text-decoration: inherit; // 1
+  vertical-align: inherit; // 2
+}
+
+// 1. Correct the line height in all browsers
+// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
+// 3. Change the default tap highlight to be completely transparent in iOS
+// 4. Use the default cursor in all browsers (opinionated)
+// 5. Use a 4-space tab width in all browsers (opinionated)
+// 6. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
 html {
   -webkit-text-size-adjust: 100%; // 2
   -webkit-tap-highlight-color: rgba(0,0,0,0); // 3
+  -moz-tab-size: 4; // 5
+  -ms-text-size-adjust: 100%; // 6
+  -webkit-text-size-adjust: 100%; // 6
   background: var(--background);
   color: var(--text);
   font-family: $sans-serif;
@@ -28,6 +43,7 @@ html {
   font-weight: $text-weight;
   line-height: $line-height; // 1
   text-rendering: optimizeLegibility;
+  cursor: default; // 4
 
   @if map-get($breakpoints, "sm") and
     map-get($base-font, "sm") and
@@ -64,5 +80,4 @@ html {
       font-size: map-get($base-font, "xl");
     }
   }
-
 }

scss/layout/_sectioning.scss

@@ -4,11 +4,12 @@
  */
 
 
-// Reboot
+// Reboot based on :
-// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - 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
 // ––––––––––––––––––––
 
-// Render the `main` element consistently in IE.
+// Render the `main` element consistently in IE
 main {
   display: block;
 }

scss/pico.scss

@@ -18,14 +18,16 @@
 @import "layout/scroller";             // figure
 
 // Content
-@import "content/typography";          // a, headings, p, ul, blockquote ...
+@import "content/typography";          // a, headings, p, ul, blockquote, ...
+@import "content/embedded";            // audio, canvas, iframe, img, svg, video
 @import "content/form";                // label, input, select, ...
 @import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
 @import "content/button";              // button, a[role=button], ...
 @import "content/button-styles";       // .secondary, .contrast, .outline
 @import "content/table";               // table, tr, td, ...
 @import "content/code";                // pre, code, ...
-@import "content/miscs";               // hr, progress, template, [hidden]
+@import "content/accessibility";       // -ms-touch-action, aria-*
+@import "content/miscs";               // hr, progress, template, [hidden], dialog, canvas
 
 // Components
 @import "components/accordion";        // details, summary
@@ -33,3 +35,6 @@
 @import "components/card-sectioning";  // article > header, footer, pre
 @import "components/nav";              // nav
 @import "components/tooltip";          // data-tooltip
+
+// Reduce motion
+@import "content/reduce-motion";       // prefers-reduced-motion

scss/pico.slim.scss

@@ -30,26 +30,31 @@ $enable-transitions: false;
 @import "themes/default";
 
 // Layout
-@import "layout/document";                // html
+@import "layout/document";               // html
-@import "layout/sectioning";              // body, header, main, footer
+@import "layout/sectioning";             // body, header, main, footer
-@import "layout/container";               // .container, .container-fluid
+@import "layout/container";              // .container, .container-fluid
-// @import "layout/section";              // section
+// @import "layout/section";             // section
-@import "layout/grid";                    // .grid
+@import "layout/grid";                   // .grid
-@import "layout/scroller";                // figure
+@import "layout/scroller";               // figure
 
 // Content
-@import "content/typography";             // a, headings, p, ul, blockquote ...
+@import "content/typography";            // a, headings, p, ul, blockquote, ...
-@import "content/form";                   // label, input, select, ...
+@import "content/embedded";              // audio, canvas, iframe, img, svg, video
-@import "content/form-checkbox-radio";    // type=checkbox, type=radio, role=switch
+@import "content/form";                  // label, input, select, ...
-@import "content/button";                 // button, a[role=button], ...
+@import "content/form-checkbox-radio";   // type=checkbox, type=radio, role=switch
-// @import "content/button-styles";       // .secondary, .contrast, .outline
+@import "content/button";                // button, a[role=button], ...
-@import "content/table";                  // table, tr, td, ...
+// @import "content/button-styles";      // .secondary, .contrast, .outline
-// @import "content/code";                // pre, code, ...
+@import "content/table";                 // table, tr, td, ...
-// @import "content/miscs";               // hr, progress, template, [hidden]
+// @import "content/code";               // pre, code, ...
+@import "content/accessibility";         // -ms-touch-action, aria-*
+// @import "content/miscs";              // hr, progress, template, [hidden], dialog
 
 // Components
-// @import "components/accordion";        // details, summary
+// @import "components/accordion";       // details, summary
-// @import "components/card";             // article
+// @import "components/card";            // article
-// @import "components/card-sectioning";  // article > header, footer, pre
+// @import "components/card-sectioning"; // article > header, footer, pre
-// @import "components/nav";              // nav
+// @import "components/nav";             // nav
-// @import "components/tooltip";          // data-tooltip
+// @import "components/tooltip";         // data-tooltip
+
+// Reduce motion
+// @import "content/reduce-motion";      // prefers-reduced-motion