Merge branch 'dev' of https://github.com/picocss/pico into dev

README.md

@@ -38,6 +38,7 @@ Shipped with two beautiful color themes, automatically enabled according to the
 - [Usage](#usage)
 - [Class-less version](#class-less-version)
 - [Examples](#examples)
+- [Limitations](#limitations)
 - [Documentation](#documentation)
 - [Contributing](#contributing)
 - [Copyright and license](#copyright-and-license)
@@ -134,6 +135,10 @@ Minimalist templates to discover Pico in action:
 
 All examples are open-sourced in [picocss/examples](https://github.com/picocss/examples).
 
+## Limitations
+
+Pico can be used without custom CSS for quick or small projects. However, it’s designed as a starting point, like a “reset CSS on steroids”. As Pico does not integrate any helpers or utilities `.classes`, this minimal CSS framework requires SCSS or CSS knowledge to build large projects.
+
 ## Documentation
 
 **Getting started**

css/pico.classless.css

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.4.2 (https://picocss.com)
+ * Pico.css v1.4.4 (https://picocss.com)
  * Copyright 2019-2021 - Licensed under MIT
  */
 /**
@@ -168,11 +168,13 @@ h5 {
 }
 
 thead th,
-thead td {
+thead td,
+tfoot th,
+tfoot td {
   --border-width: 3px;
 }
 
-:not(thead) > * > td {
+:not(thead):not(tfoot) > * > td {
   --font-size: 0.875em;
 }
 
@@ -907,7 +909,7 @@ button {
   margin-bottom: var(--spacing);
 }
 
-a[role=button] {
+[role=button] {
   display: inline-block;
   text-decoration: none;
 }
@@ -916,7 +918,7 @@ button,
 input[type=submit],
 input[type=button],
 input[type=reset],
-a[role=button] {
+[role=button] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -945,18 +947,19 @@ input[type=button]:focus,
 input[type=reset]:hover,
 input[type=reset]:active,
 input[type=reset]:focus,
-a[role=button]:hover,
+[role=button]:hover,
-a[role=button]:active,
+[role=button]:active,
-a[role=button]:focus {
+[role=button]: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));
+  --color: var(--primary-inverse);
 }
 button:focus,
 input[type=submit]:focus,
 input[type=button]:focus,
 input[type=reset]:focus,
-a[role=button]:focus {
+[role=button]:focus {
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--outline-width) var(--primary-focus);
 }
@@ -981,7 +984,7 @@ input[type=submit][disabled],
 input[type=button][disabled],
 input[type=reset][disabled],
 a[role=button]:not([href]),
-a[role=button][disabled] {
+[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
 }
@@ -1353,12 +1356,9 @@ label > input, label > select, label > textarea {
   background-image: none;
 }
 [type=checkbox][role=switch]:checked::before {
-  margin-right: 0;
   margin-left: calc(1.125em - var(--border-width));
   -webkit-margin-start: calc(1.125em - var(--border-width));
   margin-inline-start: calc(1.125em - var(--border-width));
-  -webkit-margin-end: 0;
-  margin-inline-end: 0;
 }
 
 [type=checkbox][aria-invalid=false],
@@ -1397,25 +1397,36 @@ label > input, label > select, label > textarea {
   border-radius: calc(var(--border-radius) * 0.5);
 }
 
-:not([dir=rtl]) [type=date],
+input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] {
-:not([dir=rtl]) [type=datetime-local],
+  --icon-position: 0.75rem;
-:not([dir=rtl]) [type=month],
+  --icon-width: 1rem;
-:not([dir=rtl]) [type=time],
+  padding-right: calc(var(--icon-width) + var(--icon-position));
-:not([dir=rtl]) [type=week] {
   background-image: var(--icon-date);
-  background-position: center right 0.75rem;
+  background-position: center right var(--icon-position);
-  background-size: 1rem auto;
+  background-size: var(--icon-width) auto;
   background-repeat: no-repeat;
 }
-:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator,
+input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
-:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator,
+  background-image: var(--icon-time);
-:not([dir=rtl]) [type=month]::-webkit-calendar-picker-indicator,
+}
-:not([dir=rtl]) [type=time]::-webkit-calendar-picker-indicator,
+
-:not([dir=rtl]) [type=week]::-webkit-calendar-picker-indicator {
+[type=date]::-webkit-calendar-picker-indicator,
+[type=datetime-local]::-webkit-calendar-picker-indicator,
+[type=month]::-webkit-calendar-picker-indicator,
+[type=time]::-webkit-calendar-picker-indicator,
+[type=week]::-webkit-calendar-picker-indicator {
+  width: var(--icon-width);
+  margin-right: calc(var(--icon-width) * -1);
+  margin-left: var(--icon-position);
   opacity: 0;
 }
-:not([dir=rtl]) [type=time] {
+
-  background-image: var(--icon-time);
+[dir=rtl] [type=date],
+[dir=rtl] [type=datetime-local],
+[dir=rtl] [type=month],
+[dir=rtl] [type=time],
+[dir=rtl] [type=week] {
+  text-align: right;
 }
 
 [type=file] {
@@ -1628,14 +1639,15 @@ label > input, label > select, label > textarea {
   transform: scale(1.25);
 }
 
-[type=search] {
+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;
-  padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
   background-image: var(--icon-search);
   background-position: center left 1.125rem;
   background-size: 1rem auto;
   background-repeat: no-repeat;
 }
+
 [type=search]::-webkit-search-cancel-button {
   -webkit-appearance: none;
   display: none;
@@ -1663,12 +1675,14 @@ td {
   text-align: start;
 }
 
-tr {
+tfoot th,
-  background-color: var(--background-color);
+tfoot td {
+  border-top: var(--border-width) solid var(--table-border-color);
+  border-bottom: 0;
 }
 
 table[role=grid] tbody tr:nth-child(odd) {
-  --background-color: var(--table-row-stripped-background-color);
+  background-color: var(--table-row-stripped-background-color);
 }
 
 /**
@@ -1772,7 +1786,6 @@ details summary {
   color: var(--accordion-close-summary-color);
   line-height: 1rem;
   list-style-type: none;
-  list-style-type: none;
   cursor: pointer;
   transition: color var(--transition);
 }
@@ -1876,6 +1889,10 @@ dialog {
   border: none;
   background-color: var(--modal-overlay-background-color);
 }
+dialog article {
+  max-height: calc(100vh - var(--spacing) * 2);
+  overflow: auto;
+}
 @media (min-width: 576px) {
   dialog article {
     max-width: 510px;

css/pico.css

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.4.2 (https://picocss.com)
+ * Pico.css v1.4.4 (https://picocss.com)
  * Copyright 2019-2021 - Licensed under MIT
  */
 /**
@@ -173,11 +173,13 @@ h5 {
 }
 
 thead th,
-thead td {
+thead td,
+tfoot th,
+tfoot td {
   --border-width: 3px;
 }
 
-:not(thead) > * > td {
+:not(thead):not(tfoot) > * > td {
   --font-size: 0.875em;
 }
 
@@ -958,7 +960,7 @@ button {
   margin-bottom: var(--spacing);
 }
 
-a[role=button] {
+[role=button] {
   display: inline-block;
   text-decoration: none;
 }
@@ -967,7 +969,7 @@ button,
 input[type=submit],
 input[type=button],
 input[type=reset],
-a[role=button] {
+[role=button] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -996,42 +998,28 @@ input[type=button]:focus,
 input[type=reset]:hover,
 input[type=reset]:active,
 input[type=reset]:focus,
-a[role=button]:hover,
+[role=button]:hover,
-a[role=button]:active,
+[role=button]:active,
-a[role=button]:focus {
+[role=button]: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));
+  --color: var(--primary-inverse);
 }
 button:focus,
 input[type=submit]:focus,
 input[type=button]:focus,
 input[type=reset]:focus,
-a[role=button]:focus {
+[role=button]:focus {
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--outline-width) var(--primary-focus);
 }
 
-input[type=reset] {
-  --background-color: var(--secondary);
-  --border-color: var(--secondary);
-  --color: var(--secondary-inverse);
-  cursor: pointer;
-}
-input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
-  --background-color: var(--secondary-hover);
-  --border-color: var(--secondary-hover);
-}
-input[type=reset]:focus {
-  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
-    0 0 0 var(--outline-width) var(--secondary-focus);
-}
-
 button.secondary,
 input[type=submit].secondary,
 input[type=button].secondary,
-input[type=reset].secondary,
+input[type=reset],
-a[role=button].secondary {
+[role=button].secondary {
   --background-color: var(--secondary);
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
@@ -1044,28 +1032,30 @@ input[type=submit].secondary:focus,
 input[type=button].secondary:hover,
 input[type=button].secondary:active,
 input[type=button].secondary:focus,
-input[type=reset].secondary:hover,
+input[type=reset]:hover,
-input[type=reset].secondary:active,
+input[type=reset]:active,
-input[type=reset].secondary:focus,
+input[type=reset]:focus,
-a[role=button].secondary:hover,
+[role=button].secondary:hover,
-a[role=button].secondary:active,
+[role=button].secondary:active,
-a[role=button].secondary:focus {
+[role=button].secondary:focus {
   --background-color: var(--secondary-hover);
   --border-color: var(--secondary-hover);
+  --color: var(--secondary-inverse);
 }
 button.secondary:focus,
 input[type=submit].secondary:focus,
 input[type=button].secondary:focus,
-input[type=reset].secondary:focus,
+input[type=reset]:focus,
-a[role=button].secondary:focus {
+[role=button].secondary:focus {
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--outline-width) var(--secondary-focus);
 }
+
 button.contrast,
 input[type=submit].contrast,
 input[type=button].contrast,
 input[type=reset].contrast,
-a[role=button].contrast {
+[role=button].contrast {
   --background-color: var(--contrast);
   --border-color: var(--contrast);
   --color: var(--contrast-inverse);
@@ -1080,25 +1070,27 @@ input[type=button].contrast:focus,
 input[type=reset].contrast:hover,
 input[type=reset].contrast:active,
 input[type=reset].contrast:focus,
-a[role=button].contrast:hover,
+[role=button].contrast:hover,
-a[role=button].contrast:active,
+[role=button].contrast:active,
-a[role=button].contrast:focus {
+[role=button].contrast:focus {
   --background-color: var(--contrast-hover);
   --border-color: var(--contrast-hover);
+  --color: var(--contrast-inverse);
 }
 button.contrast:focus,
 input[type=submit].contrast:focus,
 input[type=button].contrast:focus,
 input[type=reset].contrast:focus,
-a[role=button].contrast:focus {
+[role=button].contrast:focus {
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--outline-width) var(--contrast-focus);
 }
+
 button.outline,
 input[type=submit].outline,
 input[type=button].outline,
 input[type=reset].outline,
-a[role=button].outline {
+[role=button].outline {
   --background-color: transparent;
   --color: var(--primary);
 }
@@ -1112,17 +1104,18 @@ input[type=button].outline:focus,
 input[type=reset].outline:hover,
 input[type=reset].outline:active,
 input[type=reset].outline:focus,
-a[role=button].outline:hover,
+[role=button].outline:hover,
-a[role=button].outline:active,
+[role=button].outline:active,
-a[role=button].outline:focus {
+[role=button].outline:focus {
   --background-color: transparent;
   --color: var(--primary-hover);
 }
+
 button.outline.secondary,
 input[type=submit].outline.secondary,
 input[type=button].outline.secondary,
 input[type=reset].outline.secondary,
-a[role=button].outline.secondary {
+[role=button].outline.secondary {
   --color: var(--secondary);
 }
 button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
@@ -1135,16 +1128,17 @@ input[type=button].outline.secondary:focus,
 input[type=reset].outline.secondary:hover,
 input[type=reset].outline.secondary:active,
 input[type=reset].outline.secondary:focus,
-a[role=button].outline.secondary:hover,
+[role=button].outline.secondary:hover,
-a[role=button].outline.secondary:active,
+[role=button].outline.secondary:active,
-a[role=button].outline.secondary:focus {
+[role=button].outline.secondary:focus {
   --color: var(--secondary-hover);
 }
+
 button.outline.contrast,
 input[type=submit].outline.contrast,
 input[type=button].outline.contrast,
 input[type=reset].outline.contrast,
-a[role=button].outline.contrast {
+[role=button].outline.contrast {
   --color: var(--contrast);
 }
 button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
@@ -1157,9 +1151,9 @@ input[type=button].outline.contrast:focus,
 input[type=reset].outline.contrast:hover,
 input[type=reset].outline.contrast:active,
 input[type=reset].outline.contrast:focus,
-a[role=button].outline.contrast:hover,
+[role=button].outline.contrast:hover,
-a[role=button].outline.contrast:active,
+[role=button].outline.contrast:active,
-a[role=button].outline.contrast:focus {
+[role=button].outline.contrast:focus {
   --color: var(--contrast-hover);
 }
 
@@ -1168,7 +1162,7 @@ input[type=submit][disabled],
 input[type=button][disabled],
 input[type=reset][disabled],
 a[role=button]:not([href]),
-a[role=button][disabled] {
+[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
 }
@@ -1540,12 +1534,9 @@ label > input, label > select, label > textarea {
   background-image: none;
 }
 [type=checkbox][role=switch]:checked::before {
-  margin-right: 0;
   margin-left: calc(1.125em - var(--border-width));
   -webkit-margin-start: calc(1.125em - var(--border-width));
   margin-inline-start: calc(1.125em - var(--border-width));
-  -webkit-margin-end: 0;
-  margin-inline-end: 0;
 }
 
 [type=checkbox][aria-invalid=false],
@@ -1584,25 +1575,36 @@ label > input, label > select, label > textarea {
   border-radius: calc(var(--border-radius) * 0.5);
 }
 
-:not([dir=rtl]) [type=date],
+input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] {
-:not([dir=rtl]) [type=datetime-local],
+  --icon-position: 0.75rem;
-:not([dir=rtl]) [type=month],
+  --icon-width: 1rem;
-:not([dir=rtl]) [type=time],
+  padding-right: calc(var(--icon-width) + var(--icon-position));
-:not([dir=rtl]) [type=week] {
   background-image: var(--icon-date);
-  background-position: center right 0.75rem;
+  background-position: center right var(--icon-position);
-  background-size: 1rem auto;
+  background-size: var(--icon-width) auto;
   background-repeat: no-repeat;
 }
-:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator,
+input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
-:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator,
+  background-image: var(--icon-time);
-:not([dir=rtl]) [type=month]::-webkit-calendar-picker-indicator,
+}
-:not([dir=rtl]) [type=time]::-webkit-calendar-picker-indicator,
+
-:not([dir=rtl]) [type=week]::-webkit-calendar-picker-indicator {
+[type=date]::-webkit-calendar-picker-indicator,
+[type=datetime-local]::-webkit-calendar-picker-indicator,
+[type=month]::-webkit-calendar-picker-indicator,
+[type=time]::-webkit-calendar-picker-indicator,
+[type=week]::-webkit-calendar-picker-indicator {
+  width: var(--icon-width);
+  margin-right: calc(var(--icon-width) * -1);
+  margin-left: var(--icon-position);
   opacity: 0;
 }
-:not([dir=rtl]) [type=time] {
+
-  background-image: var(--icon-time);
+[dir=rtl] [type=date],
+[dir=rtl] [type=datetime-local],
+[dir=rtl] [type=month],
+[dir=rtl] [type=time],
+[dir=rtl] [type=week] {
+  text-align: right;
 }
 
 [type=file] {
@@ -1815,14 +1817,15 @@ label > input, label > select, label > textarea {
   transform: scale(1.25);
 }
 
-[type=search] {
+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;
-  padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
   background-image: var(--icon-search);
   background-position: center left 1.125rem;
   background-size: 1rem auto;
   background-repeat: no-repeat;
 }
+
 [type=search]::-webkit-search-cancel-button {
   -webkit-appearance: none;
   display: none;
@@ -1850,12 +1853,14 @@ td {
   text-align: start;
 }
 
-tr {
+tfoot th,
-  background-color: var(--background-color);
+tfoot td {
+  border-top: var(--border-width) solid var(--table-border-color);
+  border-bottom: 0;
 }
 
 table[role=grid] tbody tr:nth-child(odd) {
-  --background-color: var(--table-row-stripped-background-color);
+  background-color: var(--table-row-stripped-background-color);
 }
 
 /**
@@ -1959,7 +1964,6 @@ details summary {
   color: var(--accordion-close-summary-color);
   line-height: 1rem;
   list-style-type: none;
-  list-style-type: none;
   cursor: pointer;
   transition: color var(--transition);
 }
@@ -2063,6 +2067,10 @@ dialog {
   border: none;
   background-color: var(--modal-overlay-background-color);
 }
+dialog article {
+  max-height: calc(100vh - var(--spacing) * 2);
+  overflow: auto;
+}
 @media (min-width: 576px) {
   dialog article {
     max-width: 510px;

css/pico.fluid.classless.css

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.4.2 (https://picocss.com)
+ * Pico.css v1.4.4 (https://picocss.com)
  * Copyright 2019-2021 - Licensed under MIT
  */
 /**
@@ -168,11 +168,13 @@ h5 {
 }
 
 thead th,
-thead td {
+thead td,
+tfoot th,
+tfoot td {
   --border-width: 3px;
 }
 
-:not(thead) > * > td {
+:not(thead):not(tfoot) > * > td {
   --font-size: 0.875em;
 }
 
@@ -877,7 +879,7 @@ button {
   margin-bottom: var(--spacing);
 }
 
-a[role=button] {
+[role=button] {
   display: inline-block;
   text-decoration: none;
 }
@@ -886,7 +888,7 @@ button,
 input[type=submit],
 input[type=button],
 input[type=reset],
-a[role=button] {
+[role=button] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -915,18 +917,19 @@ input[type=button]:focus,
 input[type=reset]:hover,
 input[type=reset]:active,
 input[type=reset]:focus,
-a[role=button]:hover,
+[role=button]:hover,
-a[role=button]:active,
+[role=button]:active,
-a[role=button]:focus {
+[role=button]: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));
+  --color: var(--primary-inverse);
 }
 button:focus,
 input[type=submit]:focus,
 input[type=button]:focus,
 input[type=reset]:focus,
-a[role=button]:focus {
+[role=button]:focus {
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--outline-width) var(--primary-focus);
 }
@@ -951,7 +954,7 @@ input[type=submit][disabled],
 input[type=button][disabled],
 input[type=reset][disabled],
 a[role=button]:not([href]),
-a[role=button][disabled] {
+[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
 }
@@ -1323,12 +1326,9 @@ label > input, label > select, label > textarea {
   background-image: none;
 }
 [type=checkbox][role=switch]:checked::before {
-  margin-right: 0;
   margin-left: calc(1.125em - var(--border-width));
   -webkit-margin-start: calc(1.125em - var(--border-width));
   margin-inline-start: calc(1.125em - var(--border-width));
-  -webkit-margin-end: 0;
-  margin-inline-end: 0;
 }
 
 [type=checkbox][aria-invalid=false],
@@ -1367,25 +1367,36 @@ label > input, label > select, label > textarea {
   border-radius: calc(var(--border-radius) * 0.5);
 }
 
-:not([dir=rtl]) [type=date],
+input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] {
-:not([dir=rtl]) [type=datetime-local],
+  --icon-position: 0.75rem;
-:not([dir=rtl]) [type=month],
+  --icon-width: 1rem;
-:not([dir=rtl]) [type=time],
+  padding-right: calc(var(--icon-width) + var(--icon-position));
-:not([dir=rtl]) [type=week] {
   background-image: var(--icon-date);
-  background-position: center right 0.75rem;
+  background-position: center right var(--icon-position);
-  background-size: 1rem auto;
+  background-size: var(--icon-width) auto;
   background-repeat: no-repeat;
 }
-:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator,
+input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
-:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator,
+  background-image: var(--icon-time);
-:not([dir=rtl]) [type=month]::-webkit-calendar-picker-indicator,
+}
-:not([dir=rtl]) [type=time]::-webkit-calendar-picker-indicator,
+
-:not([dir=rtl]) [type=week]::-webkit-calendar-picker-indicator {
+[type=date]::-webkit-calendar-picker-indicator,
+[type=datetime-local]::-webkit-calendar-picker-indicator,
+[type=month]::-webkit-calendar-picker-indicator,
+[type=time]::-webkit-calendar-picker-indicator,
+[type=week]::-webkit-calendar-picker-indicator {
+  width: var(--icon-width);
+  margin-right: calc(var(--icon-width) * -1);
+  margin-left: var(--icon-position);
   opacity: 0;
 }
-:not([dir=rtl]) [type=time] {
+
-  background-image: var(--icon-time);
+[dir=rtl] [type=date],
+[dir=rtl] [type=datetime-local],
+[dir=rtl] [type=month],
+[dir=rtl] [type=time],
+[dir=rtl] [type=week] {
+  text-align: right;
 }
 
 [type=file] {
@@ -1598,14 +1609,15 @@ label > input, label > select, label > textarea {
   transform: scale(1.25);
 }
 
-[type=search] {
+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;
-  padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
   background-image: var(--icon-search);
   background-position: center left 1.125rem;
   background-size: 1rem auto;
   background-repeat: no-repeat;
 }
+
 [type=search]::-webkit-search-cancel-button {
   -webkit-appearance: none;
   display: none;
@@ -1633,12 +1645,14 @@ td {
   text-align: start;
 }
 
-tr {
+tfoot th,
-  background-color: var(--background-color);
+tfoot td {
+  border-top: var(--border-width) solid var(--table-border-color);
+  border-bottom: 0;
 }
 
 table[role=grid] tbody tr:nth-child(odd) {
-  --background-color: var(--table-row-stripped-background-color);
+  background-color: var(--table-row-stripped-background-color);
 }
 
 /**
@@ -1742,7 +1756,6 @@ details summary {
   color: var(--accordion-close-summary-color);
   line-height: 1rem;
   list-style-type: none;
-  list-style-type: none;
   cursor: pointer;
   transition: color var(--transition);
 }
@@ -1846,6 +1859,10 @@ dialog {
   border: none;
   background-color: var(--modal-overlay-background-color);
 }
+dialog article {
+  max-height: calc(100vh - var(--spacing) * 2);
+  overflow: auto;
+}
 @media (min-width: 576px) {
   dialog article {
     max-width: 510px;

css/pico.slim.css

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.4.2 (https://picocss.com)
+ * Pico.css v1.4.4 (https://picocss.com)
  * Copyright 2019-2021 - Licensed under MIT
  *
  * Slim version example
@@ -105,11 +105,13 @@ h5 {
 }
 
 thead th,
-thead td {
+thead td,
+tfoot th,
+tfoot td {
   --border-width: 3px;
 }
 
-:not(thead) > * > td {
+:not(thead):not(tfoot) > * > td {
   --font-size: 0.875em;
 }
 
@@ -887,7 +889,7 @@ button {
   margin-bottom: var(--spacing);
 }
 
-a[role=button] {
+[role=button] {
   display: inline-block;
   text-decoration: none;
 }
@@ -896,7 +898,7 @@ button,
 input[type=submit],
 input[type=button],
 input[type=reset],
-a[role=button] {
+[role=button] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -924,42 +926,28 @@ input[type=button]:focus,
 input[type=reset]:hover,
 input[type=reset]:active,
 input[type=reset]:focus,
-a[role=button]:hover,
+[role=button]:hover,
-a[role=button]:active,
+[role=button]:active,
-a[role=button]:focus {
+[role=button]: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));
+  --color: var(--primary-inverse);
 }
 button:focus,
 input[type=submit]:focus,
 input[type=button]:focus,
 input[type=reset]:focus,
-a[role=button]:focus {
+[role=button]:focus {
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--outline-width) var(--primary-focus);
 }
 
-input[type=reset] {
-  --background-color: var(--secondary);
-  --border-color: var(--secondary);
-  --color: var(--secondary-inverse);
-  cursor: pointer;
-}
-input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
-  --background-color: var(--secondary-hover);
-  --border-color: var(--secondary-hover);
-}
-input[type=reset]:focus {
-  --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
-    0 0 0 var(--outline-width) var(--secondary-focus);
-}
-
 button.secondary,
 input[type=submit].secondary,
 input[type=button].secondary,
-input[type=reset].secondary,
+input[type=reset],
-a[role=button].secondary {
+[role=button].secondary {
   --background-color: var(--secondary);
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
@@ -972,28 +960,30 @@ input[type=submit].secondary:focus,
 input[type=button].secondary:hover,
 input[type=button].secondary:active,
 input[type=button].secondary:focus,
-input[type=reset].secondary:hover,
+input[type=reset]:hover,
-input[type=reset].secondary:active,
+input[type=reset]:active,
-input[type=reset].secondary:focus,
+input[type=reset]:focus,
-a[role=button].secondary:hover,
+[role=button].secondary:hover,
-a[role=button].secondary:active,
+[role=button].secondary:active,
-a[role=button].secondary:focus {
+[role=button].secondary:focus {
   --background-color: var(--secondary-hover);
   --border-color: var(--secondary-hover);
+  --color: var(--secondary-inverse);
 }
 button.secondary:focus,
 input[type=submit].secondary:focus,
 input[type=button].secondary:focus,
-input[type=reset].secondary:focus,
+input[type=reset]:focus,
-a[role=button].secondary:focus {
+[role=button].secondary:focus {
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--outline-width) var(--secondary-focus);
 }
+
 button.contrast,
 input[type=submit].contrast,
 input[type=button].contrast,
 input[type=reset].contrast,
-a[role=button].contrast {
+[role=button].contrast {
   --background-color: var(--contrast);
   --border-color: var(--contrast);
   --color: var(--contrast-inverse);
@@ -1008,25 +998,27 @@ input[type=button].contrast:focus,
 input[type=reset].contrast:hover,
 input[type=reset].contrast:active,
 input[type=reset].contrast:focus,
-a[role=button].contrast:hover,
+[role=button].contrast:hover,
-a[role=button].contrast:active,
+[role=button].contrast:active,
-a[role=button].contrast:focus {
+[role=button].contrast:focus {
   --background-color: var(--contrast-hover);
   --border-color: var(--contrast-hover);
+  --color: var(--contrast-inverse);
 }
 button.contrast:focus,
 input[type=submit].contrast:focus,
 input[type=button].contrast:focus,
 input[type=reset].contrast:focus,
-a[role=button].contrast:focus {
+[role=button].contrast:focus {
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--outline-width) var(--contrast-focus);
 }
+
 button.outline,
 input[type=submit].outline,
 input[type=button].outline,
 input[type=reset].outline,
-a[role=button].outline {
+[role=button].outline {
   --background-color: transparent;
   --color: var(--primary);
 }
@@ -1040,17 +1032,18 @@ input[type=button].outline:focus,
 input[type=reset].outline:hover,
 input[type=reset].outline:active,
 input[type=reset].outline:focus,
-a[role=button].outline:hover,
+[role=button].outline:hover,
-a[role=button].outline:active,
+[role=button].outline:active,
-a[role=button].outline:focus {
+[role=button].outline:focus {
   --background-color: transparent;
   --color: var(--primary-hover);
 }
+
 button.outline.secondary,
 input[type=submit].outline.secondary,
 input[type=button].outline.secondary,
 input[type=reset].outline.secondary,
-a[role=button].outline.secondary {
+[role=button].outline.secondary {
   --color: var(--secondary);
 }
 button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
@@ -1063,16 +1056,17 @@ input[type=button].outline.secondary:focus,
 input[type=reset].outline.secondary:hover,
 input[type=reset].outline.secondary:active,
 input[type=reset].outline.secondary:focus,
-a[role=button].outline.secondary:hover,
+[role=button].outline.secondary:hover,
-a[role=button].outline.secondary:active,
+[role=button].outline.secondary:active,
-a[role=button].outline.secondary:focus {
+[role=button].outline.secondary:focus {
   --color: var(--secondary-hover);
 }
+
 button.outline.contrast,
 input[type=submit].outline.contrast,
 input[type=button].outline.contrast,
 input[type=reset].outline.contrast,
-a[role=button].outline.contrast {
+[role=button].outline.contrast {
   --color: var(--contrast);
 }
 button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
@@ -1085,9 +1079,9 @@ input[type=button].outline.contrast:focus,
 input[type=reset].outline.contrast:hover,
 input[type=reset].outline.contrast:active,
 input[type=reset].outline.contrast:focus,
-a[role=button].outline.contrast:hover,
+[role=button].outline.contrast:hover,
-a[role=button].outline.contrast:active,
+[role=button].outline.contrast:active,
-a[role=button].outline.contrast:focus {
+[role=button].outline.contrast:focus {
   --color: var(--contrast-hover);
 }
 
@@ -1096,7 +1090,7 @@ input[type=submit][disabled],
 input[type=button][disabled],
 input[type=reset][disabled],
 a[role=button]:not([href]),
-a[role=button][disabled] {
+[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
 }
@@ -1393,12 +1387,14 @@ td {
   text-align: start;
 }
 
-tr {
+tfoot th,
-  background-color: var(--background-color);
+tfoot td {
+  border-top: var(--border-width) solid var(--table-border-color);
+  border-bottom: 0;
 }
 
 table[role=grid] tbody tr:nth-child(odd) {
-  --background-color: var(--table-row-stripped-background-color);
+  background-color: var(--table-row-stripped-background-color);
 }
 
 /**

css/themes/default.css

@@ -169,11 +169,13 @@ h5 {
 }
 
 thead th,
-thead td {
+thead td,
+tfoot th,
+tfoot td {
   --border-width: 3px;
 }
 
-:not(thead) > * > td {
+:not(thead):not(tfoot) > * > td {
   --font-size: 0.875em;
 }
 

docs/modal.html

@@ -35,7 +35,7 @@
 &lt;<b>dialog</b> <i>id</i>=<u>"modal-example"</u>&gt;
   &lt;<b>article</b>&gt;
     &lt;<b>a</b> <i>href</i>=<u>"#close"</u>
-      <i>aria-label</i>=<u>"Close"</u>&gt;
+      <i>aria-label</i>=<u>"Close"</u>
       <i>class</i>=<u>"close"</u>
       <i>data-target</i>=<u>"modal-example"</u>
       <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
@@ -48,7 +48,7 @@
     &lt;/<b>p</b>&gt;
     &lt;<b>footer</b>&gt;
       &lt;<b>a</b> <i>href</i>=<u>"#cancel"</u>
-        <i>role</i>=<u>"button"</u>&gt;
+        <i>role</i>=<u>"button"</u>
         <i>class</i>=<u>"secondary"</u>
         <i>data-target</i>=<u>"modal-example"</u>
         <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;

docs/src/buttons.html

@@ -30,7 +30,7 @@
 
             </footer>
           </article>
-          <p>Buttons are <code><i>width</i>: <u>100%</u>;</code> by default. Use <code>&lt;<b>a</b> <i>role</i>=<u>"button"&gt;</u></code> if you need an inline element.</p>
+          <p>Buttons are <code><i>width</i>: <u>100%</u>;</code> by default. Use <code><i>role</i>=<u>"button"</code> on an inline element if you need an inline button.</p>
           <article aria-label="Inline buttons examples">
             <a href="#" onclick="event.preventDefault()" role="button">Link</a>
             <a href="#" onclick="event.preventDefault()" role="button">Link</a>

docs/src/modal.html

@@ -106,7 +106,7 @@
 &lt;<b>dialog</b> <i>id</i>=<u>"modal-example"</u>&gt;
   &lt;<b>article</b>&gt;
     &lt;<b>a</b> <i>href</i>=<u>"#close"</u>
-      <i>aria-label</i>=<u>"Close"</u>&gt;
+      <i>aria-label</i>=<u>"Close"</u>
       <i>class</i>=<u>"close"</u>
       <i>data-target</i>=<u>"modal-example"</u>
       <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;
@@ -119,7 +119,7 @@
     &lt;/<b>p</b>&gt;
     &lt;<b>footer</b>&gt;
       &lt;<b>a</b> <i>href</i>=<u>"#cancel"</u>
-        <i>role</i>=<u>"button"</u>&gt;
+        <i>role</i>=<u>"button"</u>
         <i>class</i>=<u>"secondary"</u>
         <i>data-target</i>=<u>"modal-example"</u>
         <i>onClick</i>=<u>"toggleModal(event)"</u>&gt;

docs/src/tables.html

@@ -58,6 +58,16 @@
                   <td>Cell</td>
                 </tr>
               </tbody>
+              <tfoot>
+                <tr>
+                  <th scope="row">#</th>
+                  <td>Total</td>
+                  <td>Total</td>
+                  <td>Total</td>
+                  <td>Total</td>
+                  <td>Total</td>
+                </tr>
+              </tfoot>
             </table>
           </figure>
 
@@ -98,6 +108,16 @@
       &lt;<b>td</b>>Cell&lt;/<b>td</b>&gt;
     &lt;/<b>tr</b>&gt;
   &lt;/<b>tbody</b>&gt;
+  &lt;<b>tfoot</b>&gt;
+    &lt;<b>tr</b>&gt;
+      &lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;#&lt;/<b>th</b>&gt;
+      &lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
+      &lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
+      &lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
+      &lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
+      &lt;<b>td</b> <i>scope</i>=<u>"col"</u>&gt;Total&lt;/<b>td</b>&gt;
+    &lt;/<b>tr</b>&gt;
+  &lt;/<b>tfoot</b>&gt;
 &lt;/<b>table</b>&gt;</code></pre>
 
           <p><code><i>role</i>=<u>"grid"</u></code> enable striped rows.</p>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picocss/pico",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "Minimal CSS Framework for semantic HTML",
   "author": "Lucas Larroche",
   "main": "css/pico.min.css",
@@ -79,20 +79,20 @@
     "watch:pico": "nodemon --watch scss/ --ext scss --exec 'npm run build:pico'"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.0",
+    "@babel/cli": "^7.16.8",
     "@babel/core": "^7.16.5",
-    "@babel/preset-env": "^7.16.5",
+    "@babel/preset-env": "^7.16.8",
-    "autoprefixer": "^10.4.0",
+    "autoprefixer": "^10.4.2",
     "clean-css-cli": "^5.5.0",
-    "css-declaration-sorter": "^6.1.3",
+    "css-declaration-sorter": "^6.1.4",
     "html-includes": "^4.4.1",
     "nodemon": "^2.0.15",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
-    "postcss-scss": "^4.0.2",
+    "postcss-scss": "^4.0.3",
-    "rollup": "^2.61.1",
+    "rollup": "^2.64.0",
-    "sass": "^1.45.0",
+    "sass": "^1.48.0",
     "uglify-js": "^3.14.5"
   },
   "browserslist": [

scss/components/_accordion.scss

@@ -12,7 +12,6 @@ details {
     color: var(--accordion-close-summary-color);
     line-height: 1rem;
     list-style-type: none;
-    list-style-type: none;
     cursor: pointer;
 
     @if $enable-transitions {

scss/components/_modal.scss

@@ -26,6 +26,9 @@ dialog {
 
   // Content
   article {
+    max-height: calc(100vh - var(--spacing) * 2);
+    overflow: auto;
+
     @if map-get($breakpoints, 'sm') {
       @media (min-width: map-get($breakpoints, 'sm')) {
         max-width: map-get($viewports, 'sm');

scss/content/_button.scss

@@ -43,7 +43,7 @@ button {
   margin-bottom: var(--spacing);
 }
 
-a[role="button"] {
+[role="button"] {
   display: inline-block;
   text-decoration: none;
 }
@@ -52,7 +52,7 @@ button,
 input[type="submit"],
 input[type="button"],
 input[type="reset"],
-a[role="button"] {
+[role="button"] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -83,6 +83,7 @@ a[role="button"] {
     --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));
+    --color: var(--primary-inverse);
   }
 
   &:focus {
@@ -91,6 +92,107 @@ a[role="button"] {
   }
 }
 
+// .secondary, .contrast & .outline
+@if $enable-classes {
+
+  // Secondary
+  button.secondary,
+  input[type="submit"].secondary,
+  input[type="button"].secondary,
+  input[type="reset"],
+  [role="button"].secondary {
+    --background-color: var(--secondary);
+    --border-color: var(--secondary);
+    --color: var(--secondary-inverse);
+    cursor: pointer;
+
+    &:hover,
+    &:active,
+    &:focus {
+      --background-color: var(--secondary-hover);
+      --border-color: var(--secondary-hover);
+      --color: var(--secondary-inverse);
+    }
+
+    &:focus {
+      --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+        0 0 0 var(--outline-width) var(--secondary-focus);
+    }
+  }
+
+  // Contrast
+  button.contrast,
+  input[type="submit"].contrast,
+  input[type="button"].contrast,
+  input[type="reset"].contrast,
+  [role="button"].contrast {
+    --background-color: var(--contrast);
+    --border-color: var(--contrast);
+    --color: var(--contrast-inverse);
+
+    &:hover,
+    &:active,
+    &:focus {
+      --background-color: var(--contrast-hover);
+      --border-color: var(--contrast-hover);
+      --color: var(--contrast-inverse);
+    }
+
+    &:focus {
+      --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+        0 0 0 var(--outline-width) var(--contrast-focus);
+    }
+  }
+
+  // Outline (primary)
+  button.outline,
+  input[type="submit"].outline,
+  input[type="button"].outline,
+  input[type="reset"].outline,
+  [role="button"].outline {
+    --background-color: transparent;
+    --color: var(--primary);
+
+    &: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 {
+    --color: var(--secondary);
+
+    &: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 {
+    --color: var(--contrast);
+
+    &:hover,
+    &:active,
+    &:focus {
+      --color: var(--contrast-hover);
+    }
+  }
+}
+
+@else {
   // Secondary button without .class
   input[type="reset"] {
     --background-color: var(--secondary);
@@ -110,97 +212,16 @@ input[type="reset"] {
         0 0 0 var(--outline-width) var(--secondary-focus);
     }
   }
-
-// .secondary, .contrast & .outline
-@if $enable-classes {
-  button,
-  input[type="submit"],
-  input[type="button"],
-  input[type="reset"],
-  a[role="button"] {
-    // Secondary
-    &.secondary {
-      --background-color: var(--secondary);
-      --border-color: var(--secondary);
-      --color: var(--secondary-inverse);
-      cursor: pointer;
-
-      &:hover,
-      &:active,
-      &:focus {
-        --background-color: var(--secondary-hover);
-        --border-color: var(--secondary-hover);
-      }
-
-      &:focus {
-        --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
-          0 0 0 var(--outline-width) var(--secondary-focus);
-      }
-    }
-
-    // Contrast
-    &.contrast {
-      --background-color: var(--contrast);
-      --border-color: var(--contrast);
-      --color: var(--contrast-inverse);
-
-      &:hover,
-      &:active,
-      &:focus {
-        --background-color: var(--contrast-hover);
-        --border-color: var(--contrast-hover);
-      }
-
-      &:focus {
-        --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
-          0 0 0 var(--outline-width) var(--contrast-focus);
-      }
-    }
-
-    // Outline (primary)
-    &.outline {
-      --background-color: transparent;
-      --color: var(--primary);
-
-      &:hover,
-      &:active,
-      &:focus {
-        --background-color: transparent;
-        --color: var(--primary-hover);
-      }
-    }
-
-    // Outline (secondary)
-    &.outline.secondary {
-      --color: var(--secondary);
-
-      &:hover,
-      &:active,
-      &:focus {
-        --color: var(--secondary-hover);
-      }
-    }
-
-    // Outline (contrast)
-    &.outline.contrast {
-      --color: var(--contrast);
-
-      &:hover,
-      &:active,
-      &:focus {
-        --color: var(--contrast-hover);
-      }
-    }
-  }
 }
 
 // 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]),
+a[role="button"]:not([href]), // 1
-a[role="button"][disabled] {
+[role="button"][disabled] {
   opacity: 0.5;
   pointer-events: none;
 }

scss/content/_form-alt-input-types.scss

@@ -34,25 +34,49 @@
 }
 
 // Date & Time
-:not([dir="rtl"]) {
+// :not() are needed to add Specificity and avoid !important on padding
+input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
+  &[type="date"],
+  &[type="datetime-local"],
+  &[type="month"],
+  &[type="time"],
+  &[type="week"] {
+    --icon-position: 0.75rem;
+    --icon-width: 1rem;
+    padding-right: calc(var(--icon-width) + var(--icon-position));
+    background-image: var(--icon-date);
+    background-position: center right var(--icon-position);
+    background-size: var(--icon-width) auto;
+    background-repeat: no-repeat;
+  }
+
+  // Time
+  &[type="time"] {
+    background-image: var(--icon-time);
+  }
+}
+
+// Calendar picker
 [type="date"],
 [type="datetime-local"],
 [type="month"],
 [type="time"],
 [type="week"] {
-    background-image: var(--icon-date);
-    background-position: center right 0.75rem;
-    background-size: 1rem auto;
-    background-repeat: no-repeat;
-
   &::-webkit-calendar-picker-indicator {
+    width: var(--icon-width);
+    margin-right: calc(var(--icon-width) * -1);
+    margin-left: var(--icon-position);
     opacity: 0;
   }
 }
 
-  // Time
+[dir="rtl"] {
-  [type="time"] {
+  [type="date"],
-    background-image: var(--icon-time);
+  [type="datetime-local"],
+  [type="month"],
+  [type="time"],
+  [type="week"] {
+    text-align: right;
   }
 }
 
@@ -213,20 +237,20 @@
 }
 
 // Search
-[type="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]) {
+  &[type="search"] {
+    padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
     border-radius: 5rem;
-
-  @if $enable-important {
-    padding-left: calc(
-      var(--form-element-spacing-horizontal) + 1.75rem
-    ) !important;
     background-image: var(--icon-search);
     background-position: center left 1.125rem;
     background-size: 1rem auto;
     background-repeat: no-repeat;
   }
+}
 
 // Cancel button
+[type="search"] {
   &::-webkit-search-cancel-button {
     -webkit-appearance: none;
     display: none;

scss/content/_form-checkbox-radio.scss

@@ -114,10 +114,8 @@
     background-image: none;
 
     &::before {
-      margin-right: 0;
       margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
       margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
-      margin-inline-end: 0;
     }
   }
 }

scss/content/_table.scss

@@ -33,16 +33,20 @@ td {
   text-align: start;
 }
 
-// Rows
+// Footer
-tr {
+tfoot {
-  background-color: var(--background-color);
+  th,
+  td {
+    border-top: var(--border-width) solid var(--table-border-color);
+    border-bottom: 0;
+  }
 }
 
 // Striped
 table {
   &[role="grid"] {
     tbody tr:nth-child(odd) {
-      --background-color: var(--table-row-stripped-background-color);
+      background-color: var(--table-row-stripped-background-color);
     }
   }
 }

scss/pico.scss

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

scss/pico.slim.scss

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

scss/themes/default/_styles.scss

@@ -211,14 +211,15 @@ h5 {
 }
 
 // Table
-thead {
+thead,
+tfoot {
   th,
   td {
     --border-width: 3px;
   }
 }
 
-:not(thead) > * > td {
+:not(thead):not(tfoot) > * > td {
   --font-size: 0.875em;
 }