Merge branch 'dev' into pr/141

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"],
@@ -153,7 +153,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);
   }
 
@@ -79,7 +79,7 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="
 [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;
 
@@ -143,7 +143,7 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="
   appearance: none;
   width: 100%;
   height: $height-thumb;
-  background: transparent;
+  background: none;
 
   // Slider Track
   @mixin slider-track {

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
@@ -221,7 +221,8 @@ textarea {
         padding-inline-end: calc(
           var(--form-element-spacing-horizontal) + 1.5rem
         ) !important;
-      } @else {
+      } 
+      @else {
         padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
         padding-left: var(--form-element-spacing-horizontal);
         padding-inline-start: var(--form-element-spacing-horizontal);
@@ -248,7 +249,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);
       }
@@ -262,7 +264,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

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)