Merge pull request #169 from picocss/ll/update-reset

chore: Update sanitize.css resets

css/pico.classless.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*!
  * Pico.css v1.4.4 (https://picocss.com)
  * Copyright 2019-2021 - Licensed under MIT
@@ -507,6 +508,7 @@ kbd {
 *::before,
 *::after {
   box-sizing: border-box;
+  background-repeat: no-repeat;
 }
 
 ::before,
@@ -515,10 +517,11 @@ kbd {
   vertical-align: inherit;
 }
 
-html {
+:where(:root) {
+  -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
   text-rendering: optimizeLegibility;
   background-color: var(--background-color);
   color: var(--color);
@@ -526,6 +529,7 @@ html {
   font-size: var(--font-size);
   line-height: var(--line-height);
   font-family: var(--font-family);
+  overflow-wrap: break-word;
   cursor: default;
   -moz-tab-size: 4;
   -o-tab-size: 4;
@@ -629,18 +633,7 @@ sup {
   top: -0.5em;
 }
 
-dl dl,
+:where(dl, ol, ul) :where(dl, ol, ul) {
-dl ol,
-dl ul,
-ol dl,
-ul dl {
-  margin: 0;
-}
-
-ol ol,
-ol ul,
-ul ol,
-ul ul {
   margin: 0;
 }
 
@@ -872,12 +865,7 @@ del {
 /**
  * Embedded content
  */
-audio,
+:where(audio, canvas, iframe, img, svg, video) {
-canvas,
-iframe,
-img,
-svg,
-video {
   vertical-align: middle;
 }
 
@@ -891,7 +879,7 @@ audio:not([controls]) {
   height: 0;
 }
 
-iframe {
+:where(iframe) {
   border-style: none;
 }
 
@@ -901,7 +889,7 @@ img {
   border-style: none;
 }
 
-svg:not([fill]) {
+:where(svg:not([fill])) {
   fill: currentColor;
 }
 
@@ -1424,11 +1412,11 @@ label > input, label > select, label > textarea {
   padding: 0;
 }
 [type=color]::-webkit-color-swatch {
-  border: none;
+  border: 0;
   border-radius: calc(var(--border-radius) * 0.5);
 }
 [type=color]::-moz-color-swatch {
-  border: none;
+  border: 0;
   border-radius: calc(var(--border-radius) * 0.5);
 }
 
@@ -1467,12 +1455,12 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
 [type=file] {
   --color: var(--muted-color);
   padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
-  border: none;
+  border: 0;
   border-radius: 0;
   background: none;
 }
 [type=file]:hover, [type=file]:active, [type=file]:focus {
-  border: none;
+  border: 0;
   background: none;
 }
 [type=file]::-webkit-file-upload-button {
@@ -1595,7 +1583,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
   appearance: none;
   width: 100%;
   height: 1.25rem;
-  background: transparent;
+  background: none;
 }
 [type=range]::-webkit-slider-runnable-track {
   width: 100%;
@@ -1691,9 +1679,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
 /**
  * Table
  */
-table {
+:where(table) {
   width: 100%;
-  border-color: inherit;
   border-collapse: collapse;
   border-spacing: 0;
   text-indent: 0;
@@ -1760,7 +1747,7 @@ pre {
 pre > code {
   display: block;
   padding: var(--spacing);
-  background: transparent;
+  background: none;
   font-size: 14px;
   line-height: var(--line-height);
 }
@@ -1792,11 +1779,10 @@ kbd {
  * Miscs
  */
 hr {
-  box-sizing: content-box;
   height: 0;
-  overflow: visible;
+  border: 0;
-  border: none;
   border-top: 1px solid var(--muted-border-color);
+  color: inherit;
 }
 
 [hidden],
@@ -1930,7 +1916,7 @@ dialog {
   height: inherit;
   min-height: 100%;
   padding: var(--spacing);
-  border: none;
+  border: 0;
   background-color: var(--modal-overlay-background-color);
 }
 dialog article {
@@ -1975,6 +1961,11 @@ dialog:not([open]), dialog[open=false] {
 /**
  * Nav
  */
+:where(nav li)::before {
+  float: left;
+  content: "​";
+}
+
 nav,
 nav ul {
   display: flex;
@@ -2062,7 +2053,7 @@ progress {
 }
 progress::-webkit-progress-bar {
   border-radius: var(--border-radius);
-  background: transparent;
+  background: none;
 }
 progress[value]::-webkit-progress-value {
   background-color: var(--progress-color);
@@ -2226,7 +2217,7 @@ details[role=list][open] summary::before {
   right: 0;
   bottom: 0;
   left: 0;
-  background: transparent;
+  background: none;
   content: "";
   cursor: default;
 }
@@ -2481,8 +2472,8 @@ textarea,
 }
 
 /**
- * Reduce Motion Features
+* Reduce Motion Features
- */
+*/
 @media (prefers-reduced-motion: reduce) {
   *:not([aria-busy=true]),
 :not([aria-busy=true])::before,

css/pico.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*!
  * Pico.css v1.4.4 (https://picocss.com)
  * Copyright 2019-2021 - Licensed under MIT
@@ -512,6 +513,7 @@ kbd {
 *::before,
 *::after {
   box-sizing: border-box;
+  background-repeat: no-repeat;
 }
 
 ::before,
@@ -520,10 +522,11 @@ kbd {
   vertical-align: inherit;
 }
 
-html {
+:where(:root) {
+  -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
   text-rendering: optimizeLegibility;
   background-color: var(--background-color);
   color: var(--color);
@@ -531,6 +534,7 @@ html {
   font-size: var(--font-size);
   line-height: var(--line-height);
   font-family: var(--font-family);
+  overflow-wrap: break-word;
   cursor: default;
   -moz-tab-size: 4;
   -o-tab-size: 4;
@@ -659,18 +663,7 @@ sup {
   top: -0.5em;
 }
 
-dl dl,
+:where(dl, ol, ul) :where(dl, ol, ul) {
-dl ol,
-dl ul,
-ol dl,
-ul dl {
-  margin: 0;
-}
-
-ol ol,
-ol ul,
-ul ol,
-ul ul {
   margin: 0;
 }
 
@@ -935,12 +928,7 @@ del {
 /**
  * Embedded content
  */
-audio,
+:where(audio, canvas, iframe, img, svg, video) {
-canvas,
-iframe,
-img,
-svg,
-video {
   vertical-align: middle;
 }
 
@@ -954,7 +942,7 @@ audio:not([controls]) {
   height: 0;
 }
 
-iframe {
+:where(iframe) {
   border-style: none;
 }
 
@@ -964,7 +952,7 @@ img {
   border-style: none;
 }
 
-svg:not([fill]) {
+:where(svg:not([fill])) {
   fill: currentColor;
 }
 
@@ -1634,11 +1622,11 @@ label > input, label > select, label > textarea {
   padding: 0;
 }
 [type=color]::-webkit-color-swatch {
-  border: none;
+  border: 0;
   border-radius: calc(var(--border-radius) * 0.5);
 }
 [type=color]::-moz-color-swatch {
-  border: none;
+  border: 0;
   border-radius: calc(var(--border-radius) * 0.5);
 }
 
@@ -1677,12 +1665,12 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
 [type=file] {
   --color: var(--muted-color);
   padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
-  border: none;
+  border: 0;
   border-radius: 0;
   background: none;
 }
 [type=file]:hover, [type=file]:active, [type=file]:focus {
-  border: none;
+  border: 0;
   background: none;
 }
 [type=file]::-webkit-file-upload-button {
@@ -1805,7 +1793,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
   appearance: none;
   width: 100%;
   height: 1.25rem;
-  background: transparent;
+  background: none;
 }
 [type=range]::-webkit-slider-runnable-track {
   width: 100%;
@@ -1901,9 +1889,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
 /**
  * Table
  */
-table {
+:where(table) {
   width: 100%;
-  border-color: inherit;
   border-collapse: collapse;
   border-spacing: 0;
   text-indent: 0;
@@ -1970,7 +1957,7 @@ pre {
 pre > code {
   display: block;
   padding: var(--spacing);
-  background: transparent;
+  background: none;
   font-size: 14px;
   line-height: var(--line-height);
 }
@@ -2002,11 +1989,10 @@ kbd {
  * Miscs
  */
 hr {
-  box-sizing: content-box;
   height: 0;
-  overflow: visible;
+  border: 0;
-  border: none;
   border-top: 1px solid var(--muted-border-color);
+  color: inherit;
 }
 
 [hidden],
@@ -2143,7 +2129,7 @@ dialog {
   height: inherit;
   min-height: 100%;
   padding: var(--spacing);
-  border: none;
+  border: 0;
   background-color: var(--modal-overlay-background-color);
 }
 dialog article {
@@ -2284,6 +2270,11 @@ dialog:not([open]), dialog[open=false] {
 /**
  * Nav
  */
+:where(nav li)::before {
+  float: left;
+  content: "​";
+}
+
 nav,
 nav ul {
   display: flex;
@@ -2371,7 +2362,7 @@ progress {
 }
 progress::-webkit-progress-bar {
   border-radius: var(--border-radius);
-  background: transparent;
+  background: none;
 }
 progress[value]::-webkit-progress-value {
   background-color: var(--progress-color);
@@ -2535,7 +2526,7 @@ details[role=list][open] summary::before {
   right: 0;
   bottom: 0;
   left: 0;
-  background: transparent;
+  background: none;
   content: "";
   cursor: default;
 }
@@ -2790,8 +2781,8 @@ textarea,
 }
 
 /**
- * Reduce Motion Features
+* Reduce Motion Features
- */
+*/
 @media (prefers-reduced-motion: reduce) {
   *:not([aria-busy=true]),
 :not([aria-busy=true])::before,

css/pico.fluid.classless.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*!
  * Pico.css v1.4.4 (https://picocss.com)
  * Copyright 2019-2021 - Licensed under MIT
@@ -507,6 +508,7 @@ kbd {
 *::before,
 *::after {
   box-sizing: border-box;
+  background-repeat: no-repeat;
 }
 
 ::before,
@@ -515,10 +517,11 @@ kbd {
   vertical-align: inherit;
 }
 
-html {
+:where(:root) {
+  -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
   text-rendering: optimizeLegibility;
   background-color: var(--background-color);
   color: var(--color);
@@ -526,6 +529,7 @@ html {
   font-size: var(--font-size);
   line-height: var(--line-height);
   font-family: var(--font-family);
+  overflow-wrap: break-word;
   cursor: default;
   -moz-tab-size: 4;
   -o-tab-size: 4;
@@ -599,18 +603,7 @@ sup {
   top: -0.5em;
 }
 
-dl dl,
+:where(dl, ol, ul) :where(dl, ol, ul) {
-dl ol,
-dl ul,
-ol dl,
-ul dl {
-  margin: 0;
-}
-
-ol ol,
-ol ul,
-ul ol,
-ul ul {
   margin: 0;
 }
 
@@ -842,12 +835,7 @@ del {
 /**
  * Embedded content
  */
-audio,
+:where(audio, canvas, iframe, img, svg, video) {
-canvas,
-iframe,
-img,
-svg,
-video {
   vertical-align: middle;
 }
 
@@ -861,7 +849,7 @@ audio:not([controls]) {
   height: 0;
 }
 
-iframe {
+:where(iframe) {
   border-style: none;
 }
 
@@ -871,7 +859,7 @@ img {
   border-style: none;
 }
 
-svg:not([fill]) {
+:where(svg:not([fill])) {
   fill: currentColor;
 }
 
@@ -1394,11 +1382,11 @@ label > input, label > select, label > textarea {
   padding: 0;
 }
 [type=color]::-webkit-color-swatch {
-  border: none;
+  border: 0;
   border-radius: calc(var(--border-radius) * 0.5);
 }
 [type=color]::-moz-color-swatch {
-  border: none;
+  border: 0;
   border-radius: calc(var(--border-radius) * 0.5);
 }
 
@@ -1437,12 +1425,12 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
 [type=file] {
   --color: var(--muted-color);
   padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
-  border: none;
+  border: 0;
   border-radius: 0;
   background: none;
 }
 [type=file]:hover, [type=file]:active, [type=file]:focus {
-  border: none;
+  border: 0;
   background: none;
 }
 [type=file]::-webkit-file-upload-button {
@@ -1565,7 +1553,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
   appearance: none;
   width: 100%;
   height: 1.25rem;
-  background: transparent;
+  background: none;
 }
 [type=range]::-webkit-slider-runnable-track {
   width: 100%;
@@ -1661,9 +1649,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
 /**
  * Table
  */
-table {
+:where(table) {
   width: 100%;
-  border-color: inherit;
   border-collapse: collapse;
   border-spacing: 0;
   text-indent: 0;
@@ -1730,7 +1717,7 @@ pre {
 pre > code {
   display: block;
   padding: var(--spacing);
-  background: transparent;
+  background: none;
   font-size: 14px;
   line-height: var(--line-height);
 }
@@ -1762,11 +1749,10 @@ kbd {
  * Miscs
  */
 hr {
-  box-sizing: content-box;
   height: 0;
-  overflow: visible;
+  border: 0;
-  border: none;
   border-top: 1px solid var(--muted-border-color);
+  color: inherit;
 }
 
 [hidden],
@@ -1900,7 +1886,7 @@ dialog {
   height: inherit;
   min-height: 100%;
   padding: var(--spacing);
-  border: none;
+  border: 0;
   background-color: var(--modal-overlay-background-color);
 }
 dialog article {
@@ -1945,6 +1931,11 @@ dialog:not([open]), dialog[open=false] {
 /**
  * Nav
  */
+:where(nav li)::before {
+  float: left;
+  content: "​";
+}
+
 nav,
 nav ul {
   display: flex;
@@ -2032,7 +2023,7 @@ progress {
 }
 progress::-webkit-progress-bar {
   border-radius: var(--border-radius);
-  background: transparent;
+  background: none;
 }
 progress[value]::-webkit-progress-value {
   background-color: var(--progress-color);
@@ -2196,7 +2187,7 @@ details[role=list][open] summary::before {
   right: 0;
   bottom: 0;
   left: 0;
-  background: transparent;
+  background: none;
   content: "";
   cursor: default;
 }
@@ -2451,8 +2442,8 @@ textarea,
 }
 
 /**
- * Reduce Motion Features
+* Reduce Motion Features
- */
+*/
 @media (prefers-reduced-motion: reduce) {
   *:not([aria-busy=true]),
 :not([aria-busy=true])::before,

css/pico.slim.css

@@ -444,6 +444,7 @@ kbd {
 *::before,
 *::after {
   box-sizing: border-box;
+  background-repeat: no-repeat;
 }
 
 ::before,
@@ -452,10 +453,11 @@ kbd {
   vertical-align: inherit;
 }
 
-html {
+:where(:root) {
+  -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
   text-rendering: optimizeLegibility;
   background-color: var(--background-color);
   color: var(--color);
@@ -463,6 +465,7 @@ html {
   font-size: var(--font-size);
   line-height: var(--line-height);
   font-family: var(--font-family);
+  overflow-wrap: break-word;
   cursor: default;
   -moz-tab-size: 4;
   -o-tab-size: 4;
@@ -591,18 +594,7 @@ sup {
   top: -0.5em;
 }
 
-dl dl,
+:where(dl, ol, ul) :where(dl, ol, ul) {
-dl ol,
-dl ul,
-ol dl,
-ul dl {
-  margin: 0;
-}
-
-ol ol,
-ol ul,
-ul ol,
-ul ul {
   margin: 0;
 }
 
@@ -864,12 +856,7 @@ del {
 /**
  * Embedded content
  */
-audio,
+:where(audio, canvas, iframe, img, svg, video) {
-canvas,
-iframe,
-img,
-svg,
-video {
   vertical-align: middle;
 }
 
@@ -883,7 +870,7 @@ audio:not([controls]) {
   height: 0;
 }
 
-iframe {
+:where(iframe) {
   border-style: none;
 }
 
@@ -893,7 +880,7 @@ img {
   border-style: none;
 }
 
-svg:not([fill]) {
+:where(svg:not([fill])) {
   fill: currentColor;
 }
 
@@ -1435,9 +1422,8 @@ label > input, label > select, label > textarea {
 /**
  * Table
  */
-table {
+:where(table) {
   width: 100%;
-  border-color: inherit;
   border-collapse: collapse;
   border-spacing: 0;
   text-indent: 0;

scss/components/_dropdown.scss

@@ -131,7 +131,7 @@ details[role="list"] {
       right: 0;
       bottom: 0;
       left: 0;
-      background: transparent;
+      background: none;
       content: "";
       cursor: default;
     }

scss/components/_modal.scss

@@ -21,7 +21,7 @@ dialog {
   height: inherit;
   min-height: 100%;
   padding: var(--spacing);
-  border: none;
+  border: 0;
   background-color: var(--modal-overlay-background-color);
 
   // Content

scss/components/_nav.scss

@@ -2,6 +2,18 @@
  * Nav
  */
 
+// Reboot based on :
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+
+// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
+:where(nav li)::before {
+  float: left;
+  content: "\200B";
+}
+
+// Pico
+// ––––––––––––––––––––
+
 // Horizontal Nav
 nav,
 nav ul {

scss/components/_progress.scss

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

scss/content/_button.scss

@@ -4,11 +4,11 @@
 
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
 // ––––––––––––––––––––
 
 // 1. Change the font styles in all browsers
-// 2. Remove the margin in Firefox and Safari
+// 2. Remove the margin on controls in Safari
 // 3. Show the overflow in Edge
 button {
   margin: 0; // 2
@@ -17,7 +17,7 @@ button {
   text-transform: none; // 1
 }
 
-// Correct the inability to style clickable types in iOS and Safari
+// Correct the inability to style buttons in iOS and Safari
 button,
 [type="button"],
 [type="reset"],
@@ -95,7 +95,6 @@ input[type="reset"],
 
 // .secondary, .contrast & .outline
 @if $enable-classes {
-
   // Secondary
   button.secondary,
   input[type="submit"].secondary,
@@ -197,7 +196,6 @@ input[type="reset"],
     }
   }
 } 
-
 @else {
   // Secondary button without .class
   input[type="reset"] {

scss/content/_code.scss

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

scss/content/_embedded.scss

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

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

@@ -20,7 +20,7 @@
 
   // Swatch
   @mixin color-swatch {
-    border: none;
+    border: 0;
     border-radius: calc(var(--border-radius) * 0.5);
   }
 
@@ -35,7 +35,7 @@
 
 // Date & Time
 // :not() are needed to add Specificity and avoid !important on padding
-input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
   &[type="date"],
   &[type="datetime-local"],
   &[type="month"],
@@ -84,14 +84,14 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
 [type="file"] {
   --color: var(--muted-color);
   padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
-  border: none;
+  border: 0;
   border-radius: 0;
   background: none;
 
   &:hover,
   &:active,
   &:focus {
-    border: none;
+    border: 0;
     background: none;
   }
 
@@ -157,7 +157,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
   appearance: none;
   width: 100%;
   height: $height-thumb;
-  background: transparent;
+  background: none;
 
   // Slider Track
   @mixin slider-track {
@@ -238,7 +238,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
 
 // Search
 // :not() are needed to add Specificity and avoid !important on padding
-input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
   &[type="search"] {
     padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
     border-radius: 5rem;

scss/content/_form.scss

@@ -4,7 +4,7 @@
 
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
 // ––––––––––––––––––––
 
 // 1. Change the font styles in all browsers
@@ -216,7 +216,6 @@ textarea {
 input,
 select,
 textarea {
-
   &:not([type="checkbox"]):not([type="radio"]) {
     &[aria-invalid] {
       @if $enable-important {
@@ -228,7 +227,8 @@ textarea {
         padding-inline-end: calc(
           var(--form-element-spacing-horizontal) + 1.5rem
         ) !important;
-      } @else {
+      } 
+      @else {
         padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
         padding-left: var(--form-element-spacing-horizontal);
         padding-inline-start: var(--form-element-spacing-horizontal);
@@ -256,7 +256,8 @@ textarea {
       @if $enable-important {
         --border-color: var(--form-element-valid-active-border-color) !important;
         --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
-      } @else {
+      } 
+      @else {
         --border-color: var(--form-element-valid-active-border-color);
         --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
       }
@@ -271,7 +272,8 @@ textarea {
       @if $enable-important {
         --border-color: var(--form-element-invalid-active-border-color) !important;
         --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
-      } @else {
+      } 
+      @else {
         --border-color: var(--form-element-invalid-active-border-color);
         --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
       }

scss/content/_miscs.scss

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

scss/content/_table.scss

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

scss/content/_typography.scss

@@ -4,7 +4,7 @@
 
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
 // ––––––––––––––––––––
 
 // Add the correct font weight in Chrome, Edge, and Safari
@@ -28,20 +28,8 @@ sup {
   top: -0.5em;
 }
 
-// Remove the margin on nested lists in Chrome, Edge, IE, and Safari
+// Remove the margin on nested lists in Chrome, Edge, and Safari
-dl dl,
+:where(dl, ol, ul) :where(dl, ol, ul) {
-dl ol,
-dl ul,
-ol dl,
-ul dl {
-  margin: 0;
-}
-
-// Remove the margin on nested lists in Edge 18- and IE
-ol ol,
-ol ul,
-ul ol,
-ul ul {
   margin: 0;
 }
 

scss/layout/_document.scss

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

scss/layout/_sectioning.scss

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

scss/utilities/_accessibility.scss

@@ -2,10 +2,9 @@
  * Accessibility & User interaction
  */
 
-
 // Based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
 // ––––––––––––––––––––
 
 // Accessibility
@@ -45,7 +44,6 @@ textarea,
   -ms-touch-action: manipulation;
 }
 
-
 // Pico
 // ––––––––––––––––––––
 

scss/utilities/_reduce-motion.scss

@@ -1,12 +1,10 @@
 @if $enable-transitions and $enable-important {
-
+  /**
-/**
  * Reduce Motion Features
  */
 
-
   // Based on :
-  // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
   // ––––––––––––––––––––
 
   // 1. Remove animations when motion is reduced (opinionated)