chore: Update sanitize.css resets

scss/components/_dropdown.scss

@@ -131,7 +131,7 @@ details[role="list"] {
       right: 0;
       bottom: 0;
       left: 0;
-      background: transparent;
+      background: none;
       content: "";
       cursor: default;
     }
@@ -168,11 +168,11 @@ nav [role="list"] {
   &[open] summary {
     border-radius: var(--border-radius);
   }
-  
+
   summary + ul {
     margin-top: var(--outline-width);
   }
-  
+
   summary[role="link"] {
     margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
     line-height: var(--line-height);

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,
@@ -196,8 +195,7 @@ input[type="reset"],
       --color: var(--contrast-hover);
     }
   }
-}
-
+} 
 @else {
   // Secondary button without .class
   input[type="reset"] {
@@ -231,4 +229,4 @@ a[role="button"]:not([href]), // 1
 [role="button"][disabled] {
   opacity: 0.5;
   pointer-events: none;
-}
+}

scss/content/_code.scss

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

scss/content/_embedded.scss

@@ -4,16 +4,11 @@
 
 // Reboot based on :
 // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
 // ––––––––––––––––––––
 
 // Change the alignment on media elements in all browsers (opinionated)
-audio,
-canvas,
-iframe,
-img,
-svg,
-video {
+:where(audio, 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);
@@ -242,7 +242,7 @@ textarea {
     &[aria-invalid="false"] {
       background-image: var(--icon-valid);
     }
-  
+
     &[aria-invalid="true"] {
       background-image: var(--icon-invalid);
     }
@@ -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);
       }
@@ -265,13 +266,14 @@ textarea {
 
   &[aria-invalid="true"] {
     --border-color: var(--form-element-invalid-border-color);
-    
+
     &:active,
     &:focus {
       @if $enable-important {
         --border-color: var(--form-element-invalid-active-border-color) !important;
         --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
-      } @else {
+      } 
+      @else {
         --border-color: var(--form-element-invalid-active-border-color);
         --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
       }

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
-// 2. Show the overflow in Edge and IE
+// 1. Correct the inheritance of border color in Firefox
+// 2. Add the correct box sizing in Firefox
 hr {
-  box-sizing: content-box; // 1
-  height: 0; // 1
-  overflow: visible; // 2
-  border: none;
+  height: 0; // 2
+  border: 0;
   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).
-// 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 {
+// 1. Collapse border spacing in all browsers (opinionated)
+// 2. Remove text indentation from table contents in Chrome, Edge, and Safari
+:where(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
-dl dl,
-dl ol,
-dl ul,
-ol dl,
-ul dl {
-  margin: 0;
-}
-
-// Remove the margin on nested lists in Edge 18- and IE
-ol ol,
-ol ul,
-ul ol,
-ul ul {
+// Remove the margin on nested lists in Chrome, Edge, and Safari
+:where(dl, ol, ul) :where(dl, ol, 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
-// 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
-  -ms-text-size-adjust: 100%; // 6
+// 1. Use the default cursor in all browsers (opinionated)
+// 2. Change the line height in all browsers (opinionated)
+// 3. Breaks words to prevent overflow in all browsers (opinionated)
+// 4. 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 iOS
+:where(:root) {
+  -webkit-tap-highlight-color: transparent; // 5
+  -webkit-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
-  tab-size: 4; // 5
+  overflow-wrap: break-word; // 3
+  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)