Merge branch 'picocss:master' into feat/add-issue-templates

css/pico.classless.css

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.4.3 (https://picocss.com)
+ * Pico.css v1.4.4 (https://picocss.com)
  * Copyright 2019-2021 - Licensed under MIT
  */
 /**
@@ -909,7 +909,7 @@ button {
   margin-bottom: var(--spacing);
 }
 
-a[role=button] {
+[role=button] {
   display: inline-block;
   text-decoration: none;
 }
@@ -918,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);
@@ -947,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);
 }
@@ -983,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;
 }
@@ -1355,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],
@@ -1400,10 +1398,12 @@ label > input, label > select, label > textarea {
 }
 
 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] {
-  padding-right: calc(1.75rem + var(--spacing) * 0.5);
+  --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 0.75rem;
+  background-position: center right var(--icon-position);
-  background-size: 1rem auto;
+  background-size: var(--icon-width) auto;
   background-repeat: no-repeat;
 }
 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
@@ -1415,6 +1415,9 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
 [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;
 }
 
@@ -1425,13 +1428,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
 [dir=rtl] [type=week] {
   text-align: right;
 }
-[dir=rtl] [type=date]::-webkit-calendar-picker-indicator,
-[dir=rtl] [type=datetime-local]::-webkit-calendar-picker-indicator,
-[dir=rtl] [type=month]::-webkit-calendar-picker-indicator,
-[dir=rtl] [type=time]::-webkit-calendar-picker-indicator,
-[dir=rtl] [type=week]::-webkit-calendar-picker-indicator {
-  display: none;
-}
 
 [type=file] {
   --color: var(--muted-color);
@@ -1790,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);
 }
@@ -1894,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.3 (https://picocss.com)
+ * Pico.css v1.4.4 (https://picocss.com)
  * Copyright 2019-2021 - Licensed under MIT
  */
 /**
@@ -960,7 +960,7 @@ button {
   margin-bottom: var(--spacing);
 }
 
-a[role=button] {
+[role=button] {
   display: inline-block;
   text-decoration: none;
 }
@@ -969,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);
@@ -998,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);
@@ -1046,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);
@@ -1082,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);
 }
@@ -1114,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,
@@ -1137,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,
@@ -1159,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);
 }
 
@@ -1170,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;
 }
@@ -1542,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],
@@ -1587,10 +1576,12 @@ label > input, label > select, label > textarea {
 }
 
 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] {
-  padding-right: calc(1.75rem + var(--spacing) * 0.5);
+  --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 0.75rem;
+  background-position: center right var(--icon-position);
-  background-size: 1rem auto;
+  background-size: var(--icon-width) auto;
   background-repeat: no-repeat;
 }
 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
@@ -1602,6 +1593,9 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
 [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;
 }
 
@@ -1612,13 +1606,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
 [dir=rtl] [type=week] {
   text-align: right;
 }
-[dir=rtl] [type=date]::-webkit-calendar-picker-indicator,
-[dir=rtl] [type=datetime-local]::-webkit-calendar-picker-indicator,
-[dir=rtl] [type=month]::-webkit-calendar-picker-indicator,
-[dir=rtl] [type=time]::-webkit-calendar-picker-indicator,
-[dir=rtl] [type=week]::-webkit-calendar-picker-indicator {
-  display: none;
-}
 
 [type=file] {
   --color: var(--muted-color);
@@ -1977,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);
 }
@@ -2081,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.3 (https://picocss.com)
+ * Pico.css v1.4.4 (https://picocss.com)
  * Copyright 2019-2021 - Licensed under MIT
  */
 /**
@@ -879,7 +879,7 @@ button {
   margin-bottom: var(--spacing);
 }
 
-a[role=button] {
+[role=button] {
   display: inline-block;
   text-decoration: none;
 }
@@ -888,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);
@@ -917,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);
 }
@@ -953,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;
 }
@@ -1325,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],
@@ -1370,10 +1368,12 @@ label > input, label > select, label > textarea {
 }
 
 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] {
-  padding-right: calc(1.75rem + var(--spacing) * 0.5);
+  --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 0.75rem;
+  background-position: center right var(--icon-position);
-  background-size: 1rem auto;
+  background-size: var(--icon-width) auto;
   background-repeat: no-repeat;
 }
 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] {
@@ -1385,6 +1385,9 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
 [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;
 }
 
@@ -1395,13 +1398,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
 [dir=rtl] [type=week] {
   text-align: right;
 }
-[dir=rtl] [type=date]::-webkit-calendar-picker-indicator,
-[dir=rtl] [type=datetime-local]::-webkit-calendar-picker-indicator,
-[dir=rtl] [type=month]::-webkit-calendar-picker-indicator,
-[dir=rtl] [type=time]::-webkit-calendar-picker-indicator,
-[dir=rtl] [type=week]::-webkit-calendar-picker-indicator {
-  display: none;
-}
 
 [type=file] {
   --color: var(--muted-color);
@@ -1760,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);
 }
@@ -1864,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.3 (https://picocss.com)
+ * Pico.css v1.4.4 (https://picocss.com)
  * Copyright 2019-2021 - Licensed under MIT
  *
  * Slim version example
@@ -889,7 +889,7 @@ button {
   margin-bottom: var(--spacing);
 }
 
-a[role=button] {
+[role=button] {
   display: inline-block;
   text-decoration: none;
 }
@@ -898,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);
@@ -926,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);
@@ -974,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);
@@ -1010,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);
 }
@@ -1042,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,
@@ -1065,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,
@@ -1087,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);
 }
 
@@ -1098,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;
 }

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;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picocss/pico",
-  "version": "1.4.3",
+  "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

@@ -41,10 +41,12 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
   &[type="month"],
   &[type="time"],
   &[type="week"] {
-    padding-right: calc(1.75rem + var(--spacing) * 0.5);
+    --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 0.75rem;
+    background-position: center right var(--icon-position);
-    background-size: 1rem auto;
+    background-size: var(--icon-width) auto;
     background-repeat: no-repeat;
   }
 
@@ -61,6 +63,9 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
 [type="time"],
 [type="week"] {
   &::-webkit-calendar-picker-indicator {
+    width: var(--icon-width);
+    margin-right: calc(var(--icon-width) * -1);
+    margin-left: var(--icon-position);
     opacity: 0;
   }
 }
@@ -72,10 +77,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
   [type="time"],
   [type="week"] {
     text-align: right;
-
-    &::-webkit-calendar-picker-indicator {
-      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/pico.scss

@@ -1,5 +1,5 @@
 /*!
- * Pico.css v1.4.3 (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.3 (https://picocss.com)
+ * Pico.css v1.4.4 (https://picocss.com)
  * Copyright 2019-2021 - Licensed under MIT
  *
  * Slim version example