pico-rails 1.4.4 → 1.5.3

data/app/assets/stylesheets/{scss → pico/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"],
@@ -25,15 +25,6 @@ button,
   -webkit-appearance: button;
 }
 
-// Remove the inner border and padding in Firefox
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
 // Pico
 // ––––––––––––––––––––
 
@@ -77,9 +68,7 @@ input[type="reset"],
       box-shadow var(--transition);
   }
 
-  &:hover,
-  &:active,
-  &:focus {
+  &:is([aria-current], :hover, :active, :focus) {
     --background-color: var(--primary-hover);
     --border-color: var(--primary-hover);
     --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@@ -96,19 +85,14 @@ input[type="reset"],
 @if $enable-classes {
 
   // Secondary
-  button.secondary,
-  input[type="submit"].secondary,
-  input[type="button"].secondary,
-  input[type="reset"],
-  [role="button"].secondary {
+  :is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
+  input[type="reset"] {
     --background-color: var(--secondary);
     --border-color: var(--secondary);
     --color: var(--secondary-inverse);
     cursor: pointer;
 
-    &:hover,
-    &:active,
-    &:focus {
+    &:is([aria-current], :hover, :active, :focus) {
       --background-color: var(--secondary-hover);
       --border-color: var(--secondary-hover);
       --color: var(--secondary-inverse);
@@ -121,18 +105,12 @@ input[type="reset"],
   }
 
   // Contrast
-  button.contrast,
-  input[type="submit"].contrast,
-  input[type="button"].contrast,
-  input[type="reset"].contrast,
-  [role="button"].contrast {
+  :is(button, input[type="submit"], input[type="button"], [role="button"]).contrast {
     --background-color: var(--contrast);
     --border-color: var(--contrast);
     --color: var(--contrast-inverse);
 
-    &:hover,
-    &:active,
-    &:focus {
+    &:is([aria-current], :hover, :active, :focus) {
       --background-color: var(--contrast-hover);
       --border-color: var(--contrast-hover);
       --color: var(--contrast-inverse);
@@ -145,53 +123,36 @@ input[type="reset"],
   }
 
   // Outline (primary)
-  button.outline,
-  input[type="submit"].outline,
-  input[type="button"].outline,
-  input[type="reset"].outline,
-  [role="button"].outline {
+  :is(button, input[type="submit"], input[type="button"], [role="button"]).outline,
+  input[type="reset"].outline {
     --background-color: transparent;
     --color: var(--primary);
 
-    &:hover,
-    &:active,
-    &:focus {
+    &:is([aria-current], :hover, :active, :focus) {
       --background-color: transparent;
       --color: var(--primary-hover);
     }
   }
 
   // Outline (secondary)
-  button.outline.secondary,
-  input[type="submit"].outline.secondary,
-  input[type="button"].outline.secondary,
-  input[type="reset"].outline.secondary,
-  [role="button"].outline.secondary {
+  :is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary,
+  input[type="reset"].outline {
     --color: var(--secondary);
 
-    &:hover,
-    &:active,
-    &:focus {
+    &:is([aria-current], :hover, :active, :focus) {
       --color: var(--secondary-hover);
     }
   }
 
   // Outline (contrast)
-  button.outline.contrast,
-  input[type="submit"].outline.contrast,
-  input[type="button"].outline.contrast,
-  input[type="reset"].outline.contrast,
-  [role="button"].outline.contrast {
+  :is(button, input[type="submit"], input[type="button"], [role="button"]).outline.contrast {
     --color: var(--contrast);
 
-    &:hover,
-    &:active,
-    &:focus {
+    &:is([aria-current], :hover, :active, :focus) {
       --color: var(--contrast-hover);
     }
   }
-}
-
+} 
 @else {
   // Secondary button without .class
   input[type="reset"] {
@@ -200,9 +161,7 @@ input[type="reset"],
     --color: var(--secondary-inverse);
     cursor: pointer;
 
-    &:hover,
-    &:active,
-    &:focus {
+    &:is([aria-current], :hover, :active, :focus) {
       --background-color: var(--secondary-hover);
       --border-color: var(--secondary-hover);
     }
@@ -215,13 +174,10 @@ input[type="reset"],
 }
 
 // Button [disabled]
-// 1. Links without href are disabled by default
-button[disabled],
-input[type="submit"][disabled],
-input[type="button"][disabled],
-input[type="reset"][disabled],
-a[role="button"]:not([href]), // 1
-[role="button"][disabled] {
+// Links without href are disabled by default
+:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
+:where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]),
+a[role="button"]:not([href]) {
   opacity: 0.5;
   pointer-events: none;
-}
+}

data/app/assets/stylesheets/{scss → pico/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);
   }

data/app/assets/stylesheets/{scss → pico/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;
 }
 

data/app/assets/stylesheets/{scss → pico/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"],
@@ -70,31 +70,19 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
   }
 }
 
-[dir="rtl"] {
-  [type="date"],
-  [type="datetime-local"],
-  [type="month"],
-  [type="time"],
-  [type="week"] {
-    text-align: right;
-  }
+[dir="rtl"]
+  :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
+  text-align: right;
 }
 
 // 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;
-    background: none;
-  }
-
   @mixin file-selector-button {
     --background-color: var(--secondary);
     --border-color: var(--secondary);
@@ -123,9 +111,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
         box-shadow var(--transition);
     }
 
-    &:hover,
-    &:active,
-    &:focus {
+    &:is(:hover, :active, :focus) {
       --background-color: var(--secondary-hover);
       --border-color: var(--secondary-hover);
     }
@@ -157,7 +143,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,14 +224,32 @@ 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);
+    padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
     border-radius: 5rem;
     background-image: var(--icon-search);
     background-position: center left 1.125rem;
     background-size: 1rem auto;
     background-repeat: no-repeat;
+    
+    &[aria-invalid] {
+      @if $enable-important {
+        padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
+      } 
+      @else {
+        padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+      }
+      background-position: center left 1.125rem, center right 0.75rem;
+    }
+
+    &[aria-invalid="false"] {
+      background-image: var(--icon-search), var(--icon-valid);
+    }
+
+    &[aria-invalid="true"] {
+      background-image: var(--icon-search), var(--icon-invalid);
+    }
   }
 }
 
@@ -256,3 +260,17 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
     display: none;
   }
 }
+
+[dir="rtl"] {
+  :where(input) {
+    &:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
+      &[type="search"] {
+        background-position: center right 1.125rem;
+        
+        &[aria-invalid] {
+          background-position: center right 1.125rem, center left 0.75rem;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/{scss → pico/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
@@ -146,7 +146,6 @@ textarea {
   appearance: none;
   padding: var(--form-element-spacing-vertical)
     var(--form-element-spacing-horizontal);
-  vertical-align: middle;
 }
 
 // Commons styles
@@ -174,20 +173,16 @@ textarea {
 
 // Active & Focus
 input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
-select,
-textarea {
-  &:active,
-  &:focus {
+:where(select, textarea) {
+  &:is(:active, :focus) {
     --background-color: var(--form-element-active-background-color);
   }
 }
 
 // Active & Focus
 input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
-select,
-textarea {
-  &:active,
-  &:focus {
+:where(select, textarea) {
+  &:is(:active, :focus) {
     --border-color: var(--form-element-active-border-color);
   }
 }
@@ -202,21 +197,18 @@ textarea {
 }
 
 // Disabled
-input:not([type="submit"]):not([type="button"]):not([type="reset"]),
-select,
-textarea {
-  &[disabled] {
-    --background-color: var(--form-element-disabled-background-color);
-    --border-color: var(--form-element-disabled-border-color);
-    opacity: var(--form-element-disabled-opacity);
-  }
+input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],
+select[disabled],
+textarea[disabled],
+:where(fieldset[disabled]) :is(input:not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea) {
+  --background-color: var(--form-element-disabled-background-color);
+  --border-color: var(--form-element-disabled-border-color);
+  opacity: var(--form-element-disabled-opacity);
+  pointer-events: none;
 }
 
 // Aria-invalid
-input,
-select,
-textarea {
-
+:where(input, select, textarea) {
   &:not([type="checkbox"]):not([type="radio"]) {
     &[aria-invalid] {
       @if $enable-important {
@@ -228,7 +220,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 +235,7 @@ textarea {
     &[aria-invalid="false"] {
       background-image: var(--icon-valid);
     }
-  
+
     &[aria-invalid="true"] {
       background-image: var(--icon-invalid);
     }
@@ -251,12 +244,12 @@ textarea {
   &[aria-invalid="false"] {
     --border-color: var(--form-element-valid-border-color);
 
-    &:active,
-    &:focus {
+    &:is(:active, :focus) {
       @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 +258,13 @@ textarea {
 
   &[aria-invalid="true"] {
     --border-color: var(--form-element-invalid-border-color);
-    
-    &:active,
-    &:focus {
+
+    &:is(: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);
       }
@@ -280,9 +273,7 @@ textarea {
 }
 
 [dir="rtl"] {
-  input,
-  select,
-  textarea {
+  :where(input, select, textarea) {
     &:not([type="checkbox"]):not([type="radio"]) {
       &[aria-invalid],
       &[aria-invalid="true"],
@@ -339,9 +330,7 @@ select {
 }
 
 // Helper
-input,
-select,
-textarea {
+:where(input, select, textarea) {
   + small {
     display: block;
     width: 100%;
@@ -353,9 +342,7 @@ textarea {
 
 // Styles for Input inside a label
 label {
-  & > input,
-  & > select,
-  & > textarea {
+  > :where(input, select, textarea) {
     margin-top: calc(var(--spacing) * 0.25);
   }
 }

data/app/assets/stylesheets/{scss → pico/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;
   }
 }

data/app/assets/stylesheets/{scss → pico/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