Build CSS, JS and Docs

css/pico.classless.css

@@ -100,28 +100,20 @@ section {
   }
 }
 
+dialog > article {
+  --block-spacing-vertical: calc(var(--spacing) * 2);
+  --block-spacing-horizontal: var(--spacing);
+}
 @media (min-width: 576px) {
   dialog > article {
-    --block-spacing-vertical: calc(var(--spacing) * 1.5);
+    --block-spacing-vertical: calc(var(--spacing) * 2.5);
-    --block-spacing-horizontal: calc(var(--spacing) * 1.5);
+    --block-spacing-horizontal: calc(var(--spacing) * 1.25);
   }
 }
 @media (min-width: 768px) {
-  dialog > article {
-    --block-spacing-vertical: calc(var(--spacing) * 2);
-    --block-spacing-horizontal: calc(var(--spacing) * 2);
-  }
-}
-@media (min-width: 992px) {
-  dialog > article {
-    --block-spacing-vertical: calc(var(--spacing) * 2.5);
-    --block-spacing-horizontal: calc(var(--spacing) * 2.5);
-  }
-}
-@media (min-width: 1200px) {
   dialog > article {
     --block-spacing-vertical: calc(var(--spacing) * 3);
-    --block-spacing-horizontal: calc(var(--spacing) * 3);
+    --block-spacing-horizontal: calc(var(--spacing) * 1.5);
   }
 }
 
@@ -276,7 +268,7 @@ kbd {
     0 0.125rem 2rem rgba(27, 40, 50, 0.08),
     0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
   --card-sectionning-background-color: #fbfbfc;
-  --modal-overlay-background-color: rgba(27, 40, 50, 0.9);
+  --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
   --progress-background-color: #d5dce2;
   --progress-color: var(--primary);
   --loading-spinner-opacity: 0.5;
@@ -1203,9 +1195,13 @@ textarea[aria-invalid=true]:focus {
   ) !important;
 }
 
-[dir=rtl] input[aria-invalid],
+[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
-[dir=rtl] select[aria-invalid],
+[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid],
-[dir=rtl] textarea[aria-invalid] {
+[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid],
+[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
   background-position: center left 0.75rem;
 }
 
@@ -1397,24 +1393,24 @@ label > input, label > select, label > textarea {
   border-radius: calc(var(--border-radius) * 0.5);
 }
 
-:not(:dir(rtl)) [type=date],
+:not([dir=rtl]) [type=date],
-:not(:dir(rtl)) [type=datetime-local],
+:not([dir=rtl]) [type=datetime-local],
-:not(:dir(rtl)) [type=month],
+:not([dir=rtl]) [type=month],
-:not(:dir(rtl)) [type=time],
+:not([dir=rtl]) [type=time],
-:not(:dir(rtl)) [type=week] {
+:not([dir=rtl]) [type=week] {
   background-image: var(--icon-date);
   background-position: center right 0.75rem;
   background-size: 1rem auto;
   background-repeat: no-repeat;
 }
-:not(:dir(rtl)) [type=date]::-webkit-calendar-picker-indicator,
+:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator,
-:not(:dir(rtl)) [type=datetime-local]::-webkit-calendar-picker-indicator,
+:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator,
-:not(:dir(rtl)) [type=month]::-webkit-calendar-picker-indicator,
+:not([dir=rtl]) [type=month]::-webkit-calendar-picker-indicator,
-:not(:dir(rtl)) [type=time]::-webkit-calendar-picker-indicator,
+:not([dir=rtl]) [type=time]::-webkit-calendar-picker-indicator,
-:not(:dir(rtl)) [type=week]::-webkit-calendar-picker-indicator {
+:not([dir=rtl]) [type=week]::-webkit-calendar-picker-indicator {
   opacity: 0;
 }
-:not(:dir(rtl)) [type=time] {
+:not([dir=rtl]) [type=time] {
   background-image: var(--icon-time);
 }
 
@@ -1761,7 +1757,6 @@ canvas {
 
 /**
  * Accordion (<details>)
- * Inspiration: https://codepen.io/koca/pen/RyeLLV
  */
 details {
   display: block;
@@ -1857,6 +1852,7 @@ article > footer {
  */
 dialog {
   display: flex;
+  z-index: 999;
   position: fixed;
   top: 0;
   right: 0;
@@ -1882,45 +1878,145 @@ dialog {
     max-width: 700px;
   }
 }
+dialog article > header,
+dialog article > footer {
+  padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
+}
+dialog article > header .close {
+  margin: 0;
+  margin-left: var(--spacing);
+  float: right;
+}
 dialog article > footer {
   text-align: right;
 }
+dialog article > footer [role=button] {
+  margin-bottom: 0;
+}
 dialog article > footer [role=button]:not(:first-of-type) {
   margin-left: calc(var(--spacing) * 0.5);
 }
-dialog:not([open]) {
+dialog article p:last-of-type {
-  display: none;
+  margin: 0;
 }
-dialog .close {
+dialog article .close {
   display: block;
   width: 1rem;
   height: 1rem;
-  margin-top: -0.5rem;
+  margin-top: calc(var(--block-spacing-vertical) * -0.5);
-  margin-right: -0.5rem;
   margin-bottom: var(--typography-spacing-vertical);
   margin-left: auto;
   background-image: var(--icon-close);
   background-position: center;
-  background-size: 1rem auto;
+  background-size: auto 1rem;
   background-repeat: no-repeat;
   opacity: 0.5;
   transition: opacity var(--transition);
 }
-dialog .close:hover, dialog .close:active, dialog .close:focus {
+dialog article .close:hover, dialog article .close:active, dialog article .close:focus {
   opacity: 1;
 }
+dialog:not([open]), dialog[open=false] {
+  display: none;
+}
 
-.dialog-is-open {
+.modal-is-open {
   overflow: hidden;
   pointer-events: none;
 }
-.dialog-is-open .container {
+.modal-is-open body > *:not(dialog) {
-  filter: blur(0.125rem);
+  filter: blur(0.1875rem);
 }
-.dialog-is-open dialog {
+.modal-is-open dialog {
   pointer-events: auto;
 }
 
+.modal-is-opening body > *:not(dialog),
+.modal-is-opening dialog,
+.modal-is-opening dialog > article,
+.modal-is-closing body > *:not(dialog),
+.modal-is-closing dialog,
+.modal-is-closing dialog > article {
+  -webkit-animation-duration: 0.2s;
+  animation-duration: 0.2s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+.modal-is-opening body > *:not(dialog),
+.modal-is-closing body > *:not(dialog) {
+  -webkit-animation-name: blurIn;
+  animation-name: blurIn;
+}
+.modal-is-opening dialog,
+.modal-is-closing dialog {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+.modal-is-opening dialog > article,
+.modal-is-closing dialog > article {
+  -webkit-animation-name: slideInDown;
+  animation-name: slideInDown;
+}
+
+.modal-is-closing body > *:not(dialog),
+.modal-is-closing dialog,
+.modal-is-closing dialog > article {
+  animation-direction: reverse;
+}
+
+@-webkit-keyframes blurIn {
+  from {
+    filter: blur(0);
+  }
+  to {
+    filter: blur(0.1875rem);
+  }
+}
+
+@keyframes blurIn {
+  from {
+    filter: blur(0);
+  }
+  to {
+    filter: blur(0.1875rem);
+  }
+}
+@-webkit-keyframes fadeIn {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--modal-overlay-background-color);
+  }
+}
+@keyframes fadeIn {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--modal-overlay-background-color);
+  }
+}
+@-webkit-keyframes slideInDown {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes slideInDown {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
 /**
  * Nav
  */
@@ -2142,6 +2238,9 @@ a[aria-busy=true] {
 }
 [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
   opacity: 1;
+}
+@media (hover: hover) and (pointer: fine) {
+  [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
     -webkit-animation-duration: 0.2s;
     animation-duration: 0.2s;
     -webkit-animation-name: slide;
@@ -2151,6 +2250,7 @@ a[aria-busy=true] {
     -webkit-animation-name: slideCaret;
     animation-name: slideCaret;
   }
+}
 
 @-webkit-keyframes slide {
   from {

css/pico.css

@@ -100,28 +100,20 @@ section {
   }
 }
 
+dialog > article {
+  --block-spacing-vertical: calc(var(--spacing) * 2);
+  --block-spacing-horizontal: var(--spacing);
+}
 @media (min-width: 576px) {
   dialog > article {
-    --block-spacing-vertical: calc(var(--spacing) * 1.5);
+    --block-spacing-vertical: calc(var(--spacing) * 2.5);
-    --block-spacing-horizontal: calc(var(--spacing) * 1.5);
+    --block-spacing-horizontal: calc(var(--spacing) * 1.25);
   }
 }
 @media (min-width: 768px) {
-  dialog > article {
-    --block-spacing-vertical: calc(var(--spacing) * 2);
-    --block-spacing-horizontal: calc(var(--spacing) * 2);
-  }
-}
-@media (min-width: 992px) {
-  dialog > article {
-    --block-spacing-vertical: calc(var(--spacing) * 2.5);
-    --block-spacing-horizontal: calc(var(--spacing) * 2.5);
-  }
-}
-@media (min-width: 1200px) {
   dialog > article {
     --block-spacing-vertical: calc(var(--spacing) * 3);
-    --block-spacing-horizontal: calc(var(--spacing) * 3);
+    --block-spacing-horizontal: calc(var(--spacing) * 1.5);
   }
 }
 
@@ -276,7 +268,7 @@ kbd {
     0 0.125rem 2rem rgba(27, 40, 50, 0.08),
     0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
   --card-sectionning-background-color: #fbfbfc;
-  --modal-overlay-background-color: rgba(27, 40, 50, 0.9);
+  --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
   --progress-background-color: #d5dce2;
   --progress-color: var(--primary);
   --loading-spinner-opacity: 0.5;
@@ -1382,9 +1374,13 @@ textarea[aria-invalid=true]:focus {
   ) !important;
 }
 
-[dir=rtl] input[aria-invalid],
+[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
-[dir=rtl] select[aria-invalid],
+[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid],
-[dir=rtl] textarea[aria-invalid] {
+[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid],
+[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
   background-position: center left 0.75rem;
 }
 
@@ -1576,24 +1572,24 @@ label > input, label > select, label > textarea {
   border-radius: calc(var(--border-radius) * 0.5);
 }
 
-:not(:dir(rtl)) [type=date],
+:not([dir=rtl]) [type=date],
-:not(:dir(rtl)) [type=datetime-local],
+:not([dir=rtl]) [type=datetime-local],
-:not(:dir(rtl)) [type=month],
+:not([dir=rtl]) [type=month],
-:not(:dir(rtl)) [type=time],
+:not([dir=rtl]) [type=time],
-:not(:dir(rtl)) [type=week] {
+:not([dir=rtl]) [type=week] {
   background-image: var(--icon-date);
   background-position: center right 0.75rem;
   background-size: 1rem auto;
   background-repeat: no-repeat;
 }
-:not(:dir(rtl)) [type=date]::-webkit-calendar-picker-indicator,
+:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator,
-:not(:dir(rtl)) [type=datetime-local]::-webkit-calendar-picker-indicator,
+:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator,
-:not(:dir(rtl)) [type=month]::-webkit-calendar-picker-indicator,
+:not([dir=rtl]) [type=month]::-webkit-calendar-picker-indicator,
-:not(:dir(rtl)) [type=time]::-webkit-calendar-picker-indicator,
+:not([dir=rtl]) [type=time]::-webkit-calendar-picker-indicator,
-:not(:dir(rtl)) [type=week]::-webkit-calendar-picker-indicator {
+:not([dir=rtl]) [type=week]::-webkit-calendar-picker-indicator {
   opacity: 0;
 }
-:not(:dir(rtl)) [type=time] {
+:not([dir=rtl]) [type=time] {
   background-image: var(--icon-time);
 }
 
@@ -1940,7 +1936,6 @@ canvas {
 
 /**
  * Accordion (<details>)
- * Inspiration: https://codepen.io/koca/pen/RyeLLV
  */
 details {
   display: block;
@@ -2036,6 +2031,7 @@ article > footer {
  */
 dialog {
   display: flex;
+  z-index: 999;
   position: fixed;
   top: 0;
   right: 0;
@@ -2061,45 +2057,145 @@ dialog {
     max-width: 700px;
   }
 }
+dialog article > header,
+dialog article > footer {
+  padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
+}
+dialog article > header .close {
+  margin: 0;
+  margin-left: var(--spacing);
+  float: right;
+}
 dialog article > footer {
   text-align: right;
 }
+dialog article > footer [role=button] {
+  margin-bottom: 0;
+}
 dialog article > footer [role=button]:not(:first-of-type) {
   margin-left: calc(var(--spacing) * 0.5);
 }
-dialog:not([open]) {
+dialog article p:last-of-type {
-  display: none;
+  margin: 0;
 }
-dialog .close {
+dialog article .close {
   display: block;
   width: 1rem;
   height: 1rem;
-  margin-top: -0.5rem;
+  margin-top: calc(var(--block-spacing-vertical) * -0.5);
-  margin-right: -0.5rem;
   margin-bottom: var(--typography-spacing-vertical);
   margin-left: auto;
   background-image: var(--icon-close);
   background-position: center;
-  background-size: 1rem auto;
+  background-size: auto 1rem;
   background-repeat: no-repeat;
   opacity: 0.5;
   transition: opacity var(--transition);
 }
-dialog .close:hover, dialog .close:active, dialog .close:focus {
+dialog article .close:hover, dialog article .close:active, dialog article .close:focus {
   opacity: 1;
 }
+dialog:not([open]), dialog[open=false] {
+  display: none;
+}
 
-.dialog-is-open {
+.modal-is-open {
   overflow: hidden;
   pointer-events: none;
 }
-.dialog-is-open .container {
+.modal-is-open body > *:not(dialog) {
-  filter: blur(0.125rem);
+  filter: blur(0.1875rem);
 }
-.dialog-is-open dialog {
+.modal-is-open dialog {
   pointer-events: auto;
 }
 
+.modal-is-opening body > *:not(dialog),
+.modal-is-opening dialog,
+.modal-is-opening dialog > article,
+.modal-is-closing body > *:not(dialog),
+.modal-is-closing dialog,
+.modal-is-closing dialog > article {
+  -webkit-animation-duration: 0.2s;
+  animation-duration: 0.2s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+.modal-is-opening body > *:not(dialog),
+.modal-is-closing body > *:not(dialog) {
+  -webkit-animation-name: blurIn;
+  animation-name: blurIn;
+}
+.modal-is-opening dialog,
+.modal-is-closing dialog {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+.modal-is-opening dialog > article,
+.modal-is-closing dialog > article {
+  -webkit-animation-name: slideInDown;
+  animation-name: slideInDown;
+}
+
+.modal-is-closing body > *:not(dialog),
+.modal-is-closing dialog,
+.modal-is-closing dialog > article {
+  animation-direction: reverse;
+}
+
+@-webkit-keyframes blurIn {
+  from {
+    filter: blur(0);
+  }
+  to {
+    filter: blur(0.1875rem);
+  }
+}
+
+@keyframes blurIn {
+  from {
+    filter: blur(0);
+  }
+  to {
+    filter: blur(0.1875rem);
+  }
+}
+@-webkit-keyframes fadeIn {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--modal-overlay-background-color);
+  }
+}
+@keyframes fadeIn {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--modal-overlay-background-color);
+  }
+}
+@-webkit-keyframes slideInDown {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes slideInDown {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
 /**
  * Nav
  */
@@ -2321,6 +2417,9 @@ a[aria-busy=true] {
 }
 [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
   opacity: 1;
+}
+@media (hover: hover) and (pointer: fine) {
+  [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
     -webkit-animation-duration: 0.2s;
     animation-duration: 0.2s;
     -webkit-animation-name: slide;
@@ -2330,6 +2429,7 @@ a[aria-busy=true] {
     -webkit-animation-name: slideCaret;
     animation-name: slideCaret;
   }
+}
 
 @-webkit-keyframes slide {
   from {

css/pico.fluid.classless.css

@@ -100,28 +100,20 @@ section {
   }
 }
 
+dialog > article {
+  --block-spacing-vertical: calc(var(--spacing) * 2);
+  --block-spacing-horizontal: var(--spacing);
+}
 @media (min-width: 576px) {
   dialog > article {
-    --block-spacing-vertical: calc(var(--spacing) * 1.5);
+    --block-spacing-vertical: calc(var(--spacing) * 2.5);
-    --block-spacing-horizontal: calc(var(--spacing) * 1.5);
+    --block-spacing-horizontal: calc(var(--spacing) * 1.25);
   }
 }
 @media (min-width: 768px) {
-  dialog > article {
-    --block-spacing-vertical: calc(var(--spacing) * 2);
-    --block-spacing-horizontal: calc(var(--spacing) * 2);
-  }
-}
-@media (min-width: 992px) {
-  dialog > article {
-    --block-spacing-vertical: calc(var(--spacing) * 2.5);
-    --block-spacing-horizontal: calc(var(--spacing) * 2.5);
-  }
-}
-@media (min-width: 1200px) {
   dialog > article {
     --block-spacing-vertical: calc(var(--spacing) * 3);
-    --block-spacing-horizontal: calc(var(--spacing) * 3);
+    --block-spacing-horizontal: calc(var(--spacing) * 1.5);
   }
 }
 
@@ -276,7 +268,7 @@ kbd {
     0 0.125rem 2rem rgba(27, 40, 50, 0.08),
     0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
   --card-sectionning-background-color: #fbfbfc;
-  --modal-overlay-background-color: rgba(27, 40, 50, 0.9);
+  --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
   --progress-background-color: #d5dce2;
   --progress-color: var(--primary);
   --loading-spinner-opacity: 0.5;
@@ -1173,9 +1165,13 @@ textarea[aria-invalid=true]:focus {
   ) !important;
 }
 
-[dir=rtl] input[aria-invalid],
+[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
-[dir=rtl] select[aria-invalid],
+[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid],
-[dir=rtl] textarea[aria-invalid] {
+[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid],
+[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
   background-position: center left 0.75rem;
 }
 
@@ -1367,24 +1363,24 @@ label > input, label > select, label > textarea {
   border-radius: calc(var(--border-radius) * 0.5);
 }
 
-:not(:dir(rtl)) [type=date],
+:not([dir=rtl]) [type=date],
-:not(:dir(rtl)) [type=datetime-local],
+:not([dir=rtl]) [type=datetime-local],
-:not(:dir(rtl)) [type=month],
+:not([dir=rtl]) [type=month],
-:not(:dir(rtl)) [type=time],
+:not([dir=rtl]) [type=time],
-:not(:dir(rtl)) [type=week] {
+:not([dir=rtl]) [type=week] {
   background-image: var(--icon-date);
   background-position: center right 0.75rem;
   background-size: 1rem auto;
   background-repeat: no-repeat;
 }
-:not(:dir(rtl)) [type=date]::-webkit-calendar-picker-indicator,
+:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator,
-:not(:dir(rtl)) [type=datetime-local]::-webkit-calendar-picker-indicator,
+:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator,
-:not(:dir(rtl)) [type=month]::-webkit-calendar-picker-indicator,
+:not([dir=rtl]) [type=month]::-webkit-calendar-picker-indicator,
-:not(:dir(rtl)) [type=time]::-webkit-calendar-picker-indicator,
+:not([dir=rtl]) [type=time]::-webkit-calendar-picker-indicator,
-:not(:dir(rtl)) [type=week]::-webkit-calendar-picker-indicator {
+:not([dir=rtl]) [type=week]::-webkit-calendar-picker-indicator {
   opacity: 0;
 }
-:not(:dir(rtl)) [type=time] {
+:not([dir=rtl]) [type=time] {
   background-image: var(--icon-time);
 }
 
@@ -1731,7 +1727,6 @@ canvas {
 
 /**
  * Accordion (<details>)
- * Inspiration: https://codepen.io/koca/pen/RyeLLV
  */
 details {
   display: block;
@@ -1827,6 +1822,7 @@ article > footer {
  */
 dialog {
   display: flex;
+  z-index: 999;
   position: fixed;
   top: 0;
   right: 0;
@@ -1852,45 +1848,145 @@ dialog {
     max-width: 700px;
   }
 }
+dialog article > header,
+dialog article > footer {
+  padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
+}
+dialog article > header .close {
+  margin: 0;
+  margin-left: var(--spacing);
+  float: right;
+}
 dialog article > footer {
   text-align: right;
 }
+dialog article > footer [role=button] {
+  margin-bottom: 0;
+}
 dialog article > footer [role=button]:not(:first-of-type) {
   margin-left: calc(var(--spacing) * 0.5);
 }
-dialog:not([open]) {
+dialog article p:last-of-type {
-  display: none;
+  margin: 0;
 }
-dialog .close {
+dialog article .close {
   display: block;
   width: 1rem;
   height: 1rem;
-  margin-top: -0.5rem;
+  margin-top: calc(var(--block-spacing-vertical) * -0.5);
-  margin-right: -0.5rem;
   margin-bottom: var(--typography-spacing-vertical);
   margin-left: auto;
   background-image: var(--icon-close);
   background-position: center;
-  background-size: 1rem auto;
+  background-size: auto 1rem;
   background-repeat: no-repeat;
   opacity: 0.5;
   transition: opacity var(--transition);
 }
-dialog .close:hover, dialog .close:active, dialog .close:focus {
+dialog article .close:hover, dialog article .close:active, dialog article .close:focus {
   opacity: 1;
 }
+dialog:not([open]), dialog[open=false] {
+  display: none;
+}
 
-.dialog-is-open {
+.modal-is-open {
   overflow: hidden;
   pointer-events: none;
 }
-.dialog-is-open .container {
+.modal-is-open body > *:not(dialog) {
-  filter: blur(0.125rem);
+  filter: blur(0.1875rem);
 }
-.dialog-is-open dialog {
+.modal-is-open dialog {
   pointer-events: auto;
 }
 
+.modal-is-opening body > *:not(dialog),
+.modal-is-opening dialog,
+.modal-is-opening dialog > article,
+.modal-is-closing body > *:not(dialog),
+.modal-is-closing dialog,
+.modal-is-closing dialog > article {
+  -webkit-animation-duration: 0.2s;
+  animation-duration: 0.2s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+.modal-is-opening body > *:not(dialog),
+.modal-is-closing body > *:not(dialog) {
+  -webkit-animation-name: blurIn;
+  animation-name: blurIn;
+}
+.modal-is-opening dialog,
+.modal-is-closing dialog {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+.modal-is-opening dialog > article,
+.modal-is-closing dialog > article {
+  -webkit-animation-name: slideInDown;
+  animation-name: slideInDown;
+}
+
+.modal-is-closing body > *:not(dialog),
+.modal-is-closing dialog,
+.modal-is-closing dialog > article {
+  animation-direction: reverse;
+}
+
+@-webkit-keyframes blurIn {
+  from {
+    filter: blur(0);
+  }
+  to {
+    filter: blur(0.1875rem);
+  }
+}
+
+@keyframes blurIn {
+  from {
+    filter: blur(0);
+  }
+  to {
+    filter: blur(0.1875rem);
+  }
+}
+@-webkit-keyframes fadeIn {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--modal-overlay-background-color);
+  }
+}
+@keyframes fadeIn {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--modal-overlay-background-color);
+  }
+}
+@-webkit-keyframes slideInDown {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes slideInDown {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
 /**
  * Nav
  */
@@ -2112,6 +2208,9 @@ a[aria-busy=true] {
 }
 [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
   opacity: 1;
+}
+@media (hover: hover) and (pointer: fine) {
+  [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
     -webkit-animation-duration: 0.2s;
     animation-duration: 0.2s;
     -webkit-animation-name: slide;
@@ -2121,6 +2220,7 @@ a[aria-busy=true] {
     -webkit-animation-name: slideCaret;
     animation-name: slideCaret;
   }
+}
 
 @-webkit-keyframes slide {
   from {

css/pico.slim.css

@@ -200,7 +200,7 @@ kbd {
     0 0.125rem 2rem rgba(27, 40, 50, 0.08),
     0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
   --card-sectionning-background-color: #fbfbfc;
-  --modal-overlay-background-color: rgba(27, 40, 50, 0.9);
+  --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
   --progress-background-color: #d5dce2;
   --progress-color: var(--primary);
   --loading-spinner-opacity: 0.5;
@@ -1297,9 +1297,13 @@ textarea[aria-invalid=true]:focus {
   --border-color: var(--form-element-invalid-active-border-color);
 }
 
-[dir=rtl] input[aria-invalid],
+[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
-[dir=rtl] select[aria-invalid],
+[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid],
-[dir=rtl] textarea[aria-invalid] {
+[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
+[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid],
+[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true],
+[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
   background-position: center left 0.75rem;
 }
 

css/themes/default.css

@@ -96,28 +96,20 @@ section {
   }
 }
 
+dialog > article {
+  --block-spacing-vertical: calc(var(--spacing) * 2);
+  --block-spacing-horizontal: var(--spacing);
+}
 @media (min-width: 576px) {
   dialog > article {
-    --block-spacing-vertical: calc(var(--spacing) * 1.5);
+    --block-spacing-vertical: calc(var(--spacing) * 2.5);
-    --block-spacing-horizontal: calc(var(--spacing) * 1.5);
+    --block-spacing-horizontal: calc(var(--spacing) * 1.25);
   }
 }
 @media (min-width: 768px) {
-  dialog > article {
-    --block-spacing-vertical: calc(var(--spacing) * 2);
-    --block-spacing-horizontal: calc(var(--spacing) * 2);
-  }
-}
-@media (min-width: 992px) {
-  dialog > article {
-    --block-spacing-vertical: calc(var(--spacing) * 2.5);
-    --block-spacing-horizontal: calc(var(--spacing) * 2.5);
-  }
-}
-@media (min-width: 1200px) {
   dialog > article {
     --block-spacing-vertical: calc(var(--spacing) * 3);
-    --block-spacing-horizontal: calc(var(--spacing) * 3);
+    --block-spacing-horizontal: calc(var(--spacing) * 1.5);
   }
 }
 
@@ -272,7 +264,7 @@ kbd {
     0 0.125rem 2rem rgba(27, 40, 50, 0.08),
     0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
   --card-sectionning-background-color: #fbfbfc;
-  --modal-overlay-background-color: rgba(27, 40, 50, 0.9);
+  --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
   --progress-background-color: #d5dce2;
   --progress-color: var(--primary);
   --loading-spinner-opacity: 0.5;

docs/css/pico.docs.css

@@ -180,7 +180,10 @@ main > aside details[open] > summary:not(:focus) {
 /**
  * Docs: Documentation
  */
-#themes button i {
+#themes button.theme-switcher:first-of-type {
+  --font-weight: bold;
+}
+#themes button.theme-switcher i {
   font-style: normal;
 }
 
@@ -271,6 +274,10 @@ main > aside details[open] > summary:not(:focus) {
   grid-row-gap: 0;
 }
 
+#modal button {
+  --font-weight: bold;
+}
+
 /**
  * Docs: Typography
  */
@@ -352,6 +359,37 @@ section > pre {
   content: "Great";
 }
 
+/**
+ * Docs: Modal
+ */
+dialog.example {
+  display: block;
+  z-index: inherit;
+  position: relative;
+  top: inherit;
+  right: inherit;
+  bottom: inherit;
+  left: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+  width: inherit;
+  min-width: inherit;
+  height: inherit;
+  min-height: inherit;
+  padding: 0;
+  background-color: inherit;
+}
+dialog.example article {
+  max-width: inherit;
+}
+dialog.example:not([open]), dialog.example[open=false] {
+  display: none;
+}
+
+.dialog-is-open body > button {
+  filter: blur(0.125rem);
+}
+
 /**
  * Docs: Navs
  */

docs/js/commons.min.js

@@ -1 +1 @@
-"use strict";!function(){var t={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){document.querySelectorAll(this.buttonsTarget).forEach(function(t){t.addEventListener("click",function(t){"dark"==this.scheme?this.scheme="light":this.scheme="dark"}.bind(this),!1)}.bind(this))},addButton:function(t){var e=document.createElement(t.tag);e.className=t.class,document.querySelector(t.target).appendChild(e)},set scheme(t){"auto"==t?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=t&&"light"!=t||(this._scheme=t),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var e;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(t){e="dark"==this.scheme?this.change.dark:this.change.light,t.innerHTML=e,t.setAttribute("aria-label",e.replace(/<[^>]*>?/gm,""))}.bind(this))}},e={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init:function(){this.onToggleClick()},onToggleClick:function(){this.toggleLink.addEventListener("click",function(t){t.preventDefault(),"closed-on-mobile"==this.state?this.state="open":this.state="closed-on-mobile",this.nav.removeAttribute("class"),this.nav.classList.add(this.state)}.bind(this),!1)},applyState:function(){},get state(){return this._state},set state(t){this._state=t}};t.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),t.init(),e.init()}();
+"use strict";!function(){var e={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){var t=this;document.querySelectorAll(this.buttonsTarget).forEach(function(e){e.addEventListener("click",function(){"dark"==t.scheme?t.scheme="light":t.scheme="dark"},!1)})},addButton:function(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var i=this;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(e){var t="dark"==i.scheme?i.change.dark:i.change.light;e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))})}},t={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init:function(){this.onToggleClick()},onToggleClick:function(){var t=this;this.toggleLink.addEventListener("click",function(e){e.preventDefault(),"closed-on-mobile"==t.state?t.state="open":t.state="closed-on-mobile",t.nav.removeAttribute("class"),t.nav.classList.add(t.state)},!1)},get state(){return this._state},set state(e){this._state=e}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init(),t.init()}();

docs/js/grid.min.js

@@ -1 +1 @@
-"use strict";({buttons:{text:{add:"Add column",remove:"Remove column"},target:"#grid article"},grid:{current:4,min:1,max:12,gridTarget:"#grid .grid",codeTarget:"#grid pre code"},init:function(){this.addButtons(),this.generateGrid()},addButtons:function(){var t=document.createElement("P");t.innerHTML='\n      <button class="secondary add">\n        <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n          <line x1="12" y1="5" x2="12" y2="19"></line>\n          <line x1="5" y1="12" x2="19" y2="12">\'</line>\n        </svg>\n        '.concat(this.buttons.text.add,'\n      </button>\n\n      <button class="secondary remove">\n        <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n          <line x1="5" y1="12" x2="19" y2="12"></line>\n        </svg>\n        ').concat(this.buttons.text.remove,"\n      </button>"),document.querySelector(this.buttons.target).before(t),document.querySelector("#grid button.add").addEventListener("click",function(){this.addColumn()}.bind(this),!1),document.querySelector("#grid button.remove").addEventListener("click",function(){this.removeColumn()}.bind(this),!1)},generateGrid:function(){for(var t="",e='&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n',n=0;n<this.grid.current;n++)t+="<div>"+(n+1)+"</div>",e+="  &lt;<b>div</b>&gt;"+(n+1)+"&lt;/<b>div</b>&gt;\n";e+="&lt;/<b>div</b>&gt;",document.querySelector(this.grid.gridTarget).innerHTML=t,document.querySelector(this.grid.codeTarget).innerHTML=e},addColumn:function(){this.grid.current<this.grid.max&&(this.grid.current++,this.generateGrid())},removeColumn:function(){this.grid.current>this.grid.min&&(this.grid.current--,this.generateGrid())}}).init();
+"use strict";var grid={buttons:{text:{add:"Add column",remove:"Remove column"},target:"#grid article"},grid:{current:4,min:1,max:12,gridTarget:"#grid .grid",codeTarget:"#grid pre code"},init:function(){this.addButtons(),this.generateGrid()},addButtons:function(){var t=this,e=document.createElement("P");e.innerHTML='\n      <button class="secondary add">\n        <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n          <line x1="12" y1="5" x2="12" y2="19"></line>\n          <line x1="5" y1="12" x2="19" y2="12">\'</line>\n        </svg>\n        '.concat(this.buttons.text.add,'\n      </button>\n\n      <button class="secondary remove">\n        <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n          <line x1="5" y1="12" x2="19" y2="12"></line>\n        </svg>\n        ').concat(this.buttons.text.remove,"\n      </button>"),document.querySelector(this.buttons.target).before(e),document.querySelector("#grid button.add").addEventListener("click",function(){t.addColumn()},!1),document.querySelector("#grid button.remove").addEventListener("click",function(){t.removeColumn()},!1)},generateGrid:function(){for(var t="",e='&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n',n=0;n<this.grid.current;n++)t+="<div>"+(n+1)+"</div>",e+="  &lt;<b>div</b>&gt;"+(n+1)+"&lt;/<b>div</b>&gt;\n";e+="&lt;/<b>div</b>&gt;",document.querySelector(this.grid.gridTarget).innerHTML=t,document.querySelector(this.grid.codeTarget).innerHTML=e},addColumn:function(){this.grid.current<this.grid.max&&(this.grid.current++,this.generateGrid())},removeColumn:function(){this.grid.current>this.grid.min&&(this.grid.current--,this.generateGrid())}};grid.init();

docs/js/modal.js

@@ -0,0 +1,63 @@
+/*
+ * Modal
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2021 - Licensed under MIT
+ */
+
+// Config
+const isOpenClass = 'modal-is-open';
+const openingClass = 'modal-is-opening';
+const closingClass = 'modal-is-closing';
+let visibleModal = null;
+
+// Toggle modal
+const toggleModal = event => {
+  event.preventDefault();
+  const modal = document.getElementById(event.target.getAttribute('data-target'));
+  (typeof(modal) != 'undefined' && modal != null)
+    && isModalOpen(modal) ? closeModal(modal) : openModal(modal)
+}
+
+// Is modal open
+const isModalOpen = modal => {
+  return modal.hasAttribute('open') && modal.getAttribute('open') != 'false' ? true : false;
+}
+
+// Open modal
+const openModal = modal => {
+  setTimeout(() => {
+    visibleModal = modal;
+  }, 100);
+  document.documentElement.classList.add(isOpenClass, openingClass);
+  setTimeout(() => {
+    document.documentElement.classList.remove(openingClass);
+  }, 200);
+  modal.setAttribute('open', true);
+}
+
+// Close modal
+const closeModal = modal => {
+  visibleModal = null;
+  document.documentElement.classList.add(closingClass);
+  setTimeout(() => {
+    document.documentElement.classList.remove(closingClass, isOpenClass);
+    modal.removeAttribute('open');
+  }, 200);
+}
+
+// Close with a click outside
+document.addEventListener('click', event => {
+  if (visibleModal != null) {
+    const modalContent = visibleModal.querySelector('article');
+    const isClickInside = modalContent.contains(event.target);
+    !isClickInside && closeModal(visibleModal);
+  }
+});
+
+// Close with Esc key
+document.addEventListener('keydown', event => {
+  if (event.key === 'Escape' && visibleModal != null) {
+    closeModal(visibleModal);
+  }
+});

docs/js/modal.min.js

@@ -0,0 +1 @@
+"use strict";var isOpenClass="modal-is-open",openingClass="modal-is-opening",closingClass="modal-is-closing",visibleModal=null,toggleModal=function(e){e.preventDefault();e=document.getElementById(e.target.getAttribute("data-target"));(void 0!==e&&null!=e&&isModalOpen(e)?closeModal:openModal)(e)},isModalOpen=function(e){return!(!e.hasAttribute("open")||"false"==e.getAttribute("open"))},openModal=function(e){setTimeout(function(){visibleModal=e},100),document.documentElement.classList.add(isOpenClass,openingClass),setTimeout(function(){document.documentElement.classList.remove(openingClass)},200),e.setAttribute("open",!0)},closeModal=function(e){visibleModal=null,document.documentElement.classList.add(closingClass),setTimeout(function(){document.documentElement.classList.remove(closingClass,isOpenClass),e.removeAttribute("open")},200)};document.addEventListener("click",function(e){null!=visibleModal&&(visibleModal.querySelector("article").contains(e.target)||closeModal(visibleModal))}),document.addEventListener("keydown",function(e){"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)});