Merge pull request #45 from picocss/dev

Patch 1.4.1

css/pico.classless.css

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.4.0 (https://picocss.com)
+ * Pico.css v1.4.1 (https://picocss.com)
  * Copyright 2019-2021 - Licensed under MIT
  */
 /**
@@ -1041,7 +1041,7 @@ textarea {
 }
 
 input:not([type=checkbox]):not([type=radio]):not([type=range]) {
-  height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2) );
+  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
 }
 
 fieldset {
@@ -1120,24 +1120,33 @@ textarea[disabled] {
   opacity: var(--form-element-disabled-opacity);
 }
 
-input[aria-invalid],
+input:not([type=checkbox]):not([type=radio])[aria-invalid],
-select[aria-invalid],
+select:not([type=checkbox]):not([type=radio])[aria-invalid],
-textarea[aria-invalid] {
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
-  padding-right: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
+  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
   padding-left: var(--form-element-spacing-horizontal);
-  -webkit-padding-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
+  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
-          padding-inline-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
+          padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
   -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
           padding-inline-start: var(--form-element-spacing-horizontal) !important;
   background-position: center right 0.75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
 }
+input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
+  background-image: var(--icon-valid);
+}
+input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
+  background-image: var(--icon-invalid);
+}
 input[aria-invalid=false],
 select[aria-invalid=false],
 textarea[aria-invalid=false] {
   --border-color: var(--form-element-valid-border-color);
-  background-image: var(--icon-valid);
 }
 input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
 select[aria-invalid=false]:active,
@@ -1152,7 +1161,6 @@ input[aria-invalid=true],
 select[aria-invalid=true],
 textarea[aria-invalid=true] {
   --border-color: var(--form-element-invalid-border-color);
-  background-image: var(--icon-invalid);
 }
 input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
 select[aria-invalid=true]:active,
@@ -1322,6 +1330,22 @@ label > input, label > select, label > textarea {
   -webkit-margin-start: calc(1.125em - var(--border-width));
           margin-inline-start: calc(1.125em - var(--border-width));
 }
+[type=checkbox][role=switch][aria-invalid=false] {
+  --border-color: var(--form-element-valid-border-color);
+}
+[type=checkbox][role=switch][aria-invalid=false]:active, [type=checkbox][role=switch][aria-invalid=false]:focus {
+  --border-color: var(
+    --form-element-valid-active-border-color
+  ) !important;
+}
+[type=checkbox][role=switch][aria-invalid=true] {
+  --border-color: var(--form-element-invalid-border-color);
+}
+[type=checkbox][role=switch][aria-invalid=true]:active, [type=checkbox][role=switch][aria-invalid=true]:focus {
+  --border-color: var(
+    --form-element-invalid-active-border-color
+  ) !important;
+}
 
 /**
  * Form elements
@@ -1575,7 +1599,7 @@ label > input, label > select, label > textarea {
 
 [type=search] {
   border-radius: 5rem;
-  padding-left: calc( var(--form-element-spacing-horizontal) + 1.75rem ) !important;
+  padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
   background-image: var(--icon-search);
   background-position: center left 1.125rem;
   background-repeat: no-repeat;

css/pico.css

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.4.0 (https://picocss.com)
+ * Pico.css v1.4.1 (https://picocss.com)
  * Copyright 2019-2021 - Licensed under MIT
  */
 /**
@@ -1220,7 +1220,7 @@ textarea {
 }
 
 input:not([type=checkbox]):not([type=radio]):not([type=range]) {
-  height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2) );
+  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
 }
 
 fieldset {
@@ -1299,24 +1299,33 @@ textarea[disabled] {
   opacity: var(--form-element-disabled-opacity);
 }
 
-input[aria-invalid],
+input:not([type=checkbox]):not([type=radio])[aria-invalid],
-select[aria-invalid],
+select:not([type=checkbox]):not([type=radio])[aria-invalid],
-textarea[aria-invalid] {
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
-  padding-right: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
+  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
   padding-left: var(--form-element-spacing-horizontal);
-  -webkit-padding-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
+  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
-          padding-inline-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
+          padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
   -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
           padding-inline-start: var(--form-element-spacing-horizontal) !important;
   background-position: center right 0.75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
 }
+input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
+  background-image: var(--icon-valid);
+}
+input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
+  background-image: var(--icon-invalid);
+}
 input[aria-invalid=false],
 select[aria-invalid=false],
 textarea[aria-invalid=false] {
   --border-color: var(--form-element-valid-border-color);
-  background-image: var(--icon-valid);
 }
 input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
 select[aria-invalid=false]:active,
@@ -1331,7 +1340,6 @@ input[aria-invalid=true],
 select[aria-invalid=true],
 textarea[aria-invalid=true] {
   --border-color: var(--form-element-invalid-border-color);
-  background-image: var(--icon-invalid);
 }
 input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
 select[aria-invalid=true]:active,
@@ -1501,6 +1509,22 @@ label > input, label > select, label > textarea {
   -webkit-margin-start: calc(1.125em - var(--border-width));
           margin-inline-start: calc(1.125em - var(--border-width));
 }
+[type=checkbox][role=switch][aria-invalid=false] {
+  --border-color: var(--form-element-valid-border-color);
+}
+[type=checkbox][role=switch][aria-invalid=false]:active, [type=checkbox][role=switch][aria-invalid=false]:focus {
+  --border-color: var(
+    --form-element-valid-active-border-color
+  ) !important;
+}
+[type=checkbox][role=switch][aria-invalid=true] {
+  --border-color: var(--form-element-invalid-border-color);
+}
+[type=checkbox][role=switch][aria-invalid=true]:active, [type=checkbox][role=switch][aria-invalid=true]:focus {
+  --border-color: var(
+    --form-element-invalid-active-border-color
+  ) !important;
+}
 
 /**
  * Form elements
@@ -1754,7 +1778,7 @@ label > input, label > select, label > textarea {
 
 [type=search] {
   border-radius: 5rem;
-  padding-left: calc( var(--form-element-spacing-horizontal) + 1.75rem ) !important;
+  padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
   background-image: var(--icon-search);
   background-position: center left 1.125rem;
   background-repeat: no-repeat;

css/pico.fluid.classless.css

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.4.0 (https://picocss.com)
+ * Pico.css v1.4.1 (https://picocss.com)
  * Copyright 2019-2021 - Licensed under MIT
  */
 /**
@@ -1011,7 +1011,7 @@ textarea {
 }
 
 input:not([type=checkbox]):not([type=radio]):not([type=range]) {
-  height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2) );
+  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
 }
 
 fieldset {
@@ -1090,24 +1090,33 @@ textarea[disabled] {
   opacity: var(--form-element-disabled-opacity);
 }
 
-input[aria-invalid],
+input:not([type=checkbox]):not([type=radio])[aria-invalid],
-select[aria-invalid],
+select:not([type=checkbox]):not([type=radio])[aria-invalid],
-textarea[aria-invalid] {
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
-  padding-right: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
+  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
   padding-left: var(--form-element-spacing-horizontal);
-  -webkit-padding-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
+  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
-          padding-inline-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
+          padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
   -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
           padding-inline-start: var(--form-element-spacing-horizontal) !important;
   background-position: center right 0.75rem;
   background-repeat: no-repeat;
   background-size: 1rem auto;
 }
+input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
+  background-image: var(--icon-valid);
+}
+input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
+  background-image: var(--icon-invalid);
+}
 input[aria-invalid=false],
 select[aria-invalid=false],
 textarea[aria-invalid=false] {
   --border-color: var(--form-element-valid-border-color);
-  background-image: var(--icon-valid);
 }
 input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
 select[aria-invalid=false]:active,
@@ -1122,7 +1131,6 @@ input[aria-invalid=true],
 select[aria-invalid=true],
 textarea[aria-invalid=true] {
   --border-color: var(--form-element-invalid-border-color);
-  background-image: var(--icon-invalid);
 }
 input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
 select[aria-invalid=true]:active,
@@ -1292,6 +1300,22 @@ label > input, label > select, label > textarea {
   -webkit-margin-start: calc(1.125em - var(--border-width));
           margin-inline-start: calc(1.125em - var(--border-width));
 }
+[type=checkbox][role=switch][aria-invalid=false] {
+  --border-color: var(--form-element-valid-border-color);
+}
+[type=checkbox][role=switch][aria-invalid=false]:active, [type=checkbox][role=switch][aria-invalid=false]:focus {
+  --border-color: var(
+    --form-element-valid-active-border-color
+  ) !important;
+}
+[type=checkbox][role=switch][aria-invalid=true] {
+  --border-color: var(--form-element-invalid-border-color);
+}
+[type=checkbox][role=switch][aria-invalid=true]:active, [type=checkbox][role=switch][aria-invalid=true]:focus {
+  --border-color: var(
+    --form-element-invalid-active-border-color
+  ) !important;
+}
 
 /**
  * Form elements
@@ -1545,7 +1569,7 @@ label > input, label > select, label > textarea {
 
 [type=search] {
   border-radius: 5rem;
-  padding-left: calc( var(--form-element-spacing-horizontal) + 1.75rem ) !important;
+  padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
   background-image: var(--icon-search);
   background-position: center left 1.125rem;
   background-repeat: no-repeat;

css/pico.slim.css

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.4.0 (https://picocss.com)
+ * Pico.css v1.4.1 (https://picocss.com)
  * Copyright 2019-2021 - Licensed under MIT
  *
  * Slim version example
@@ -1165,7 +1165,7 @@ textarea {
 }
 
 input:not([type=checkbox]):not([type=radio]):not([type=range]) {
-  height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2) );
+  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
 }
 
 fieldset {
@@ -1243,9 +1243,9 @@ textarea[disabled] {
   opacity: var(--form-element-disabled-opacity);
 }
 
-input[aria-invalid],
+input:not([type=checkbox]):not([type=radio])[aria-invalid],
-select[aria-invalid],
+select:not([type=checkbox]):not([type=radio])[aria-invalid],
-textarea[aria-invalid] {
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
   padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
   padding-left: var(--form-element-spacing-horizontal);
   -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
@@ -1256,11 +1256,20 @@ textarea[aria-invalid] {
   background-repeat: no-repeat;
   background-size: 1rem auto;
 }
+input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
+  background-image: var(--icon-valid);
+}
+input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
+  background-image: var(--icon-invalid);
+}
 input[aria-invalid=false],
 select[aria-invalid=false],
 textarea[aria-invalid=false] {
   --border-color: var(--form-element-valid-border-color);
-  background-image: var(--icon-valid);
 }
 input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
 select[aria-invalid=false]:active,
@@ -1273,7 +1282,6 @@ input[aria-invalid=true],
 select[aria-invalid=true],
 textarea[aria-invalid=true] {
   --border-color: var(--form-element-invalid-border-color);
-  background-image: var(--icon-invalid);
 }
 input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
 select[aria-invalid=true]:active,

docs/index.html

@@ -1325,6 +1325,7 @@
     </main><!-- ./ Main -->
 
     <!-- JavaScript -->
+    <script src="https://unpkg.com/most-visible@1.5.0/dist/most-visible.min.js"></script>
     <script src="js/pico.docs.min.js"></script>
 
   </body>

docs/js/src/most-visible.js

@@ -1,151 +0,0 @@
-/**
- * Most Visible v1.5.0
- *
- * @author Andy Palmer <andy@andypalmer.me>
- * @license MIT
- */
-(function (root, factory) {
-  // Universal Module Definition
-
-  /* jshint strict:false */
-
-  /* global define: false, module: false */
-  if (typeof define === 'function' && define.amd) {
-    define([], function () {
-      return factory(root);
-    });
-  } else if (typeof module === 'object' && module.exports) {
-    module.exports = factory(root);
-  } else {
-    root.mostVisible = factory(root);
-  }
-})(typeof self !== 'undefined' ? self : this, function (window) {
-  /* jshint unused: vars */
-  'use strict';
-  /**
-   * MostVisible constructor
-   *
-   * @param {NodeList|string} elements
-   * @param {{}} options
-   * @constructor
-   */
-
-  function MostVisible(elements, options) {
-    if (!(this instanceof MostVisible)) {
-      return new MostVisible(elements, options).getMostVisible();
-    }
-
-    if (typeof elements === 'string') {
-      elements = document.querySelectorAll(elements);
-    }
-
-    this.elements = elements;
-    this.options = extend({}, MostVisible.defaults, options);
-  }
-  /**
-   * MostVisible default options
-   *
-   * @namespace
-   * @property {{}}      defaults             Default options hash.
-   * @property {boolean} defaults.percentage  Whether to calculate visibility as a percentage of height.
-   * @property {number}  defaults.offset      An offset to take into account when calculating visibility.
-   */
-
-  MostVisible.defaults = {
-    percentage: false,
-    offset: 0,
-  };
-  MostVisible.prototype = {
-    /**
-     * Returns the most visible element from the instance's NodeList.
-     *
-     * @returns {HTMLElement} Most visible element.
-     */
-    getMostVisible: function () {
-      var _this = this;
-
-      var viewportHeight = document.documentElement.clientHeight;
-      return Array.prototype.reduce.call(
-        this.elements,
-        function (carry, element) {
-          var value = _this.getVisibleHeight(element, viewportHeight);
-
-          return value > carry[0] ? [value, element] : carry;
-        },
-        [0, null]
-      )[1];
-    },
-
-    /**
-     * Returns the visible height of an element.
-     *
-     * @param {HTMLElement} element Element to check the visibility of.
-     * @param {number}      viewportHeight
-     * @returns {number}    Visible height of the element in pixels or a percentage of the element's total height.
-     */
-    getVisibleHeight: function (element, viewportHeight) {
-      var rect = element.getBoundingClientRect(),
-        rectTopOffset = rect.top - this.options.offset,
-        rectBottomOffset = rect.bottom - this.options.offset,
-        height = rect.bottom - rect.top,
-        visible = {
-          top: rectTopOffset >= 0 && rectTopOffset < viewportHeight,
-          bottom: rectBottomOffset > 0 && rectBottomOffset < viewportHeight,
-        };
-      var visiblePx = 0;
-
-      if (visible.top && visible.bottom) {
-        // Whole element is visible
-        visiblePx = height;
-      } else if (visible.top) {
-        visiblePx = viewportHeight - rect.top;
-      } else if (visible.bottom) {
-        visiblePx = rectBottomOffset;
-      } else if (height > viewportHeight && rectTopOffset < 0) {
-        var absTop = Math.abs(rectTopOffset);
-
-        if (absTop < height) {
-          // Part of the element is visible
-          visiblePx = height - absTop;
-        }
-      }
-
-      if (this.options.percentage) {
-        return (visiblePx / height) * 100;
-      }
-
-      return visiblePx;
-    },
-  };
-
-  MostVisible.makeJQueryPlugin = function ($) {
-    if (!$) {
-      return;
-    }
-
-    $.fn.mostVisible = function (options) {
-      var instance = new MostVisible(this.get(), options);
-      return this.filter(instance.getMostVisible());
-    };
-  }; // Try adding the jQuery plugin to window.jQuery
-
-  MostVisible.makeJQueryPlugin(window.jQuery);
-  /**
-   * Extends obj by adding the properties of all other objects passed to the function.
-   *
-   * @param {...{}} obj
-   * @returns {{}} The extended object.
-   */
-
-  function extend(obj) {
-    for (var i = 1; i < arguments.length; i++) {
-      for (var key in arguments[i]) {
-        obj[key] = arguments[i][key];
-      }
-    }
-
-    return obj;
-  }
-
-  return MostVisible;
-});

docs/js/src/scrollspy.js

@@ -8,13 +8,8 @@
  * Copyright 2019-2021 - Licensed under MIT
  */
 
-import * as MostVisible from './most-visible.js';
-
 export const scrollspy = {
-  mostVisible() {
+  
-    new MostVisible();
-  },
-
   // Config
   minWidth: '992px',
   interval: 75,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@picocss/pico",
-  "version": "1.4.0",
+  "version": "1.4.1",
-  "description": "Graceful & Minimal CSS design system in pure semantic HTML",
+  "description": "Minimal CSS Framework for semantic HTML",
   "author": "Lucas Larroche",
   "main": "css/pico.min.css",
   "homepage": "https://picocss.com",
@@ -43,17 +43,17 @@
     "watch": "npm-run-all --parallel watch:scss watch:scss:docs watch:js:docs"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.4",
+    "@babel/cli": "^7.15.7",
-    "@babel/core": "^7.15.5",
+    "@babel/core": "^7.15.8",
-    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-env": "^7.15.8",
-    "autoprefixer": "^10.3.4",
+    "autoprefixer": "^10.3.7",
-    "clean-css-cli": "^5.3.3",
+    "clean-css-cli": "^5.4.2",
-    "nodemon": "^2.0.12",
+    "nodemon": "^2.0.14",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.3.6",
-    "postcss-cli": "^8.3.1",
+    "postcss-cli": "^9.0.1",
-    "rollup": "^2.56.3",
+    "rollup": "^2.58.0",
-    "sass": "^1.39.0",
+    "sass": "^1.43.3",
-    "uglify-js": "^3.14.1"
+    "uglify-js": "^3.14.2"
   }
 }

scss/content/_form-checkbox-radio.scss

@@ -119,4 +119,35 @@
       margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
     }
   }
+
+  // Aria-invalid
+  &[aria-invalid="false"] {
+    --border-color: var(--form-element-valid-border-color);
+
+    &:active,
+    &:focus {
+      @if $enable-important {
+        --border-color: var(
+          --form-element-valid-active-border-color
+        ) !important;
+      } @else {
+        --border-color: var(--form-element-valid-active-border-color);
+      }
+    }
+  }
+
+  &[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;
+      } @else {
+        --border-color: var(--form-element-invalid-active-border-color);
+      }
+    }
+  }
 }

scss/content/_form.scss

@@ -211,34 +211,44 @@ textarea {
   }
 }
 
-// Aria-valid
+// Aria-invalid
 input,
 select,
 textarea {
-  &[aria-invalid] {
+
-    @if $enable-important {
+  &:not([type="checkbox"]):not([type="radio"]) {
-      padding-right: calc(
+    &[aria-invalid] {
-        var(--form-element-spacing-horizontal) + 1.5rem
+      @if $enable-important {
-      ) !important;
+        padding-right: calc(
-      padding-left: var(--form-element-spacing-horizontal);
+          var(--form-element-spacing-horizontal) + 1.5rem
-      padding-inline-end: calc(
+        ) !important;
-        var(--form-element-spacing-horizontal) + 1.5rem
+        padding-left: var(--form-element-spacing-horizontal);
-      ) !important;
+        padding-inline-end: calc(
-      padding-inline-start: var(--form-element-spacing-horizontal) !important;
+          var(--form-element-spacing-horizontal) + 1.5rem
-    } @else {
+        ) !important;
-      padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+        padding-inline-start: var(--form-element-spacing-horizontal) !important;
-      padding-left: var(--form-element-spacing-horizontal);
+      } @else {
-      padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+        padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
-      padding-inline-start: var(--form-element-spacing-horizontal);
+        padding-left: var(--form-element-spacing-horizontal);
+        padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+        padding-inline-start: var(--form-element-spacing-horizontal);
+      }
+      background-position: center right 0.75rem;
+      background-repeat: no-repeat;
+      background-size: 1rem auto;
+    }
+
+    &[aria-invalid="false"] {
+      background-image: var(--icon-valid);
+    }
+  
+    &[aria-invalid="true"] {
+      background-image: var(--icon-invalid);
     }
-    background-position: center right 0.75rem;
-    background-repeat: no-repeat;
-    background-size: 1rem auto;
   }
 
   &[aria-invalid="false"] {
     --border-color: var(--form-element-valid-border-color);
-    background-image: var(--icon-valid);
 
     &:active,
     &:focus {
@@ -254,7 +264,6 @@ textarea {
 
   &[aria-invalid="true"] {
     --border-color: var(--form-element-invalid-border-color);
-    background-image: var(--icon-invalid);
 
     &:active,
     &:focus {

scss/pico.scss

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.4.0 (https://picocss.com)
+ * Pico.css v1.4.1 (https://picocss.com)
  * Copyright 2019-2021 - Licensed under MIT
  */
 

scss/pico.slim.scss

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.4.0 (https://picocss.com)
+ * Pico.css v1.4.1 (https://picocss.com)
  * Copyright 2019-2021 - Licensed under MIT
  *
  * Slim version example