Merge branch 'dev' into feat-modal

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
  */
 /**
@@ -1069,7 +1069,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 {
@@ -1148,9 +1148,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) !important;
   padding-left: var(--form-element-spacing-horizontal);
   -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
@@ -1161,11 +1161,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,
@@ -1180,7 +1189,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,
@@ -1350,6 +1358,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
@@ -2210,3 +2234,5 @@ textarea,
     transition-duration: 0s !important;
   }
 }
+
+/*# sourceMappingURL=pico.classless.css.map */

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
  */
 /**
@@ -1248,7 +1248,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 {
@@ -1327,9 +1327,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) !important;
   padding-left: var(--form-element-spacing-horizontal);
   -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
@@ -1340,11 +1340,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,
@@ -1359,7 +1368,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,
@@ -1529,6 +1537,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
@@ -2389,3 +2413,5 @@ textarea,
     transition-duration: 0s !important;
   }
 }
+
+/*# sourceMappingURL=pico.css.map */

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
  */
 /**
@@ -1039,7 +1039,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 {
@@ -1118,9 +1118,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) !important;
   padding-left: var(--form-element-spacing-horizontal);
   -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
@@ -1131,11 +1131,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,
@@ -1150,7 +1159,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,
@@ -1320,6 +1328,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
@@ -2180,3 +2204,5 @@ textarea,
     transition-duration: 0s !important;
   }
 }
+
+/*# sourceMappingURL=pico.fluid.classless.css.map */

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
@@ -1168,7 +1168,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 {
@@ -1246,9 +1246,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);
@@ -1259,11 +1259,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,
@@ -1276,7 +1285,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,
@@ -1408,3 +1416,5 @@ textarea,
 [dir=rtl] {
   direction: rtl;
 }
+
+/*# sourceMappingURL=pico.slim.css.map */

css/themes/default.css

@@ -470,3 +470,5 @@ kbd {
   --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
 }
+
+/*# sourceMappingURL=default.css.map */

docs/css/pico.docs.css

@@ -444,3 +444,5 @@ body > nav ul:first-of-type li:nth-of-type(2) {
     right: var(--spacing);
   }
 }
+
+/*# sourceMappingURL=pico.docs.css.map */

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,12 +8,7 @@
  * Copyright 2019-2021 - Licensed under MIT
  */
 
-import * as MostVisible from './most-visible.js';
-
 export const scrollspy = {
-  mostVisible() {
-    new MostVisible();
-  },
   
   // Config
   minWidth: '992px',

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",
@@ -27,33 +27,38 @@
     "url": "https://github.com/picocss/pico/issues"
   },
   "scripts": {
-    "css:compile": "sass --style expanded --no-source-map --no-error-css scss/:css/",
+    "watch": "npm-run-all --parallel watch:scss watch:scss:docs watch:js:docs",
-    "css:compile:docs": "sass --style expanded --no-source-map --no-error-css docs/scss/:docs/css/",
+    "build": "npm-run-all build:css build:js info:postbuild",
-    "css:prefix": "postcss css/*.css css/*/*.css docs/css/*.css !css/*.min.css !docs/css/*.min.css --use autoprefixer --no-map --replace",
+    "build:css": "npm-run-all info:build:css css:compile css:compile:docs css:prefix info:css:minify css:minify",
-    "css:minify": "cleancss -O1 --batch --batch-suffix '.min' css/*.css css/*/*.css docs/css/*.css !css/*.min.css !css/*/*.min.css !docs/css/*.min.css",
+    "build:js": "npm-run-all info:build:js js:bundle js:babel info:js:minify js:minify",
-    "js:bundle": "rollup docs/js/pico.docs.js --file docs/js/pico.docs.min.js --format iife",
+    "css:compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:css/",
+    "css:compile:docs": "sass --style expanded --source-map --embed-sources --no-error-css docs/scss/:docs/css/",
+    "css:prefix": "postcss --config postcss.config.js --replace css/*.css css/*/*.css docs/css/*.css !css/*.min.css !docs/css/*.min.css",
+    "css:minify": "cleancss -O1 --with-rebase --source-map --source-map-inline-sources --batch --batch-suffix .min css/*.css css/*/*.css docs/css/*.css !css/*.min.css !css/*/*.min.css !docs/css/*.min.css",
+    "js:bundle": "rollup docs/js/pico.docs.js --file docs/js/pico.docs.min.js --format iife --silent",
     "js:babel": "babel docs/js/pico.docs.min.js --out-file docs/js/pico.docs.min.js --presets=@babel/preset-env",
     "js:minify": "uglifyjs docs/js/pico.docs.min.js --compress --mangle --output docs/js/pico.docs.min.js",
-    "build:css": "npm-run-all css:compile css:compile:docs css:prefix css:minify",
-    "build:js": "npm-run-all js:bundle js:babel js:minify",
-    "build": "npm-run-all build:css build:js",
     "watch:scss": "nodemon --watch scss/ --ext scss --exec 'npm run build:css'",
     "watch:scss:docs": "nodemon --watch docs/scss/ --ext scss --exec 'npm run build:css'",
     "watch:js:docs": "nodemon --watch docs/js/ --ext js --ignore 'docs/js/pico.docs.min.js' --exec 'npm run build:js'",
-    "watch": "npm-run-all --parallel watch:scss watch:scss:docs watch:js:docs"
+    "info:build:css": "echo '\\033[32m[picocss/pico] Compile .css files\\033[0m'",
+    "info:css:minify": "echo '\\033[32m[picocss/pico] Minify .css files\\033[0m'",
+    "info:build:js": "echo '\\033[32m[picocss/pico] Bundle .js files\\033[0m'",
+    "info:js:minify": "echo '\\033[32m[picocss/pico] Minify .js file\\033[0m'",
+    "info:postbuild": "echo '\\033[32m[picocss/pico] Done\\033[0m\n'"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.4",
+    "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.15.5",
+    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-env": "^7.16.0",
-    "autoprefixer": "^10.3.4",
+    "autoprefixer": "^10.4.0",
-    "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": "^8.3.11",
-    "postcss-cli": "^8.3.1",
+    "postcss-cli": "^9.0.1",
-    "rollup": "^2.56.3",
+    "rollup": "^2.58.3",
-    "sass": "^1.39.0",
+    "sass": "^1.43.4",
-    "uglify-js": "^3.14.1"
+    "uglify-js": "^3.14.2"
   }
 }

postcss.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  map: { 
+    inline: false,
+    annotation: true,
+    sourcesContent: true
+  },
+  plugins: {
+    autoprefixer: {
+      cascade: false
+    }
+  }
+}

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,10 +211,12 @@ textarea {
   }
 }
 
-// Aria-valid
+// Aria-invalid
 input,
 select,
 textarea {
+
+  &:not([type="checkbox"]):not([type="radio"]) {
     &[aria-invalid] {
       @if $enable-important {
         padding-right: calc(
@@ -237,8 +239,16 @@ textarea {
     }
 
     &[aria-invalid="false"] {
-    --border-color: var(--form-element-valid-border-color);
       background-image: var(--icon-valid);
+    }
+  
+    &[aria-invalid="true"] {
+      background-image: var(--icon-invalid);
+    }
+  }
+
+  &[aria-invalid="false"] {
+    --border-color: var(--form-element-valid-border-color);
 
     &: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