Version 2.2.1

Author: Yohn

README.md

@@ -77,7 +77,7 @@ There are 4 ways to get started with pico.css:
 Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@yohns/picocss) to link pico.css.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].0/css/pico.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].1/css/pico.min.css" />
 ```
 
 ### Install with NPM
@@ -135,7 +135,7 @@ Use the default `.classless` version if you need centered viewports:
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].0/css/pico.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].1/css/pico.classless.min.css"
 />
 ```
 
@@ -144,7 +144,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].0/css/pico.fluid.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].1/css/pico.fluid.classless.min.css"
 />
 ```
 
@@ -159,7 +159,7 @@ Then just write pure HTML, and it should look great:
     <meta name="color-scheme" content="light dark" />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].0/css/pico.classless.min.css"
+      href="https://cdn.jsdelivr.net/npm/@yohns/[email protected].1/css/pico.classless.min.css"
     />
     <title>Hello, world!</title>
   </head>

css/pico.amber.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.2.0 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.1 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2024 - Licensed under MIT
  */
 /**
@@ -219,6 +219,10 @@ nav details.dropdown summary:focus-visible {
   --pico-form-element-spacing-horizontal: 2rem;
 }
 
+[role=tablist] {
+  --pico-tab-animation: showTab;
+}
+
 /**
  * Color schemes
  */
@@ -262,6 +266,10 @@ nav details.dropdown summary:focus-visible {
   --pico-contrast-focus: rgba(93, 107, 137, 0.25);
   --pico-contrast-inverse: #fff;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
+  --pico-accent-bg-color: var(--pico-background-color);
+  --pico-accent-section-bg-color: rgb(251, 251.5, 252.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #2d3138;
   --pico-h2-color: #373c44;
   --pico-h3-color: #424751;
@@ -413,6 +421,10 @@ nav details.dropdown summary:focus-visible {
     --pico-contrast-focus: rgba(207, 213, 226, 0.25);
     --pico-contrast-inverse: #000;
     --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+    --pico-accent-bg-color: #181c25;
+    --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+    --pico-accent-border-color: var(--pico-muted-border-color);
+    --pico-accent-box-shadow: var(--pico-box-shadow);
     --pico-h1-color: #f0f1f3;
     --pico-h2-color: #e0e3e7;
     --pico-h3-color: #c2c7d0;
@@ -564,6 +576,10 @@ nav details.dropdown summary:focus-visible {
   --pico-contrast-focus: rgba(207, 213, 226, 0.25);
   --pico-contrast-inverse: #000;
   --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
+  --pico-accent-bg-color: #181c25;
+  --pico-accent-section-bg-color: rgb(26, 30.5, 40.25);
+  --pico-accent-border-color: var(--pico-muted-border-color);
+  --pico-accent-box-shadow: var(--pico-box-shadow);
   --pico-h1-color: #f0f1f3;
   --pico-h2-color: #e0e3e7;
   --pico-h3-color: #c2c7d0;
@@ -2806,7 +2822,7 @@ section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=fo
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -2821,7 +2837,7 @@ section[role=form] > select:has(option:checked:not([disabled])) ~ label {
   padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
   transform: translateY(-50%) scale(0.85);
   color: var(--pico-form-element-active-border-color);
-  font-size: calc(var(--pico-font-size) * 0.75);
+  font-size: calc(var(--pico-font-size) * 0.85);
   line-height: 1.25;
   transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -3147,11 +3163,6 @@ details.dropdown > a::after {
   background-repeat: no-repeat;
   content: "";
 }
-
-nav details.dropdown {
-  margin-bottom: 0;
-}
-
 details.dropdown > summary:not([role]) {
   height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
   padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
@@ -3186,19 +3197,6 @@ details.dropdown > summary:not([role])[aria-invalid=true] {
   --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
   --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
 }
-
-nav details.dropdown {
-  display: inline;
-  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
-}
-nav details.dropdown > summary:not([role]) {
-  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
-  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
-}
-nav details.dropdown > summary:not([role]):focus-visible {
-  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
-}
-
 details.dropdown > summary + ul {
   display: flex;
   z-index: 99;
@@ -3261,17 +3259,9 @@ details.dropdown > summary + ul li label {
 details.dropdown > summary + ul li:has(label):hover {
   background-color: var(--pico-dropdown-hover-background-color);
 }
-
 details.dropdown[open] > summary {
   margin-bottom: 0;
 }
-
-details.dropdown[open] > summary + ul {
-  transform: scaleY(1);
-  opacity: 1;
-  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
-}
-
 details.dropdown[open] > summary::before {
   display: block;
   z-index: 1;
@@ -3283,6 +3273,24 @@ details.dropdown[open] > summary::before {
   content: "";
   cursor: default;
 }
+details.dropdown[open] > summary + ul {
+  transform: scaleY(1);
+  opacity: 1;
+  transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
+}
+
+nav details.dropdown {
+  display: inline;
+  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
+  margin-bottom: 0;
+}
+nav details.dropdown > summary:not([role]) {
+  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
+  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
+}
+nav details.dropdown > summary:not([role]):focus-visible {
+  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
+}
 
 label > details.dropdown {
   margin-top: calc(var(--pico-spacing) * 0.25);
@@ -4192,57 +4200,78 @@ progress::-moz-progress-bar {
 }
 
 /**
- * Tab region
- * styling help from: https://github.com/picocss/pico/discussions/608
- * and his demo: https://gistpreview.github.io/?86c08db6793d078757aa795845c19ed3
+ * Tabs
+ * styling help from: https://codepen.io/mikestreety/pen/yVNNNm
  */
-section[role=region] {
+@keyframes showTab {
+  from {
+    scale: 0.75;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}
+[role=tablist] {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 0;
-}
-section[role=region] details {
-  display: contents;
-  margin-bottom: 0;
   padding-bottom: 0;
 }
-section[role=region] details summary {
+[role=tablist] button {
   flex-grow: 1;
-  order: 0;
-  margin: 0;
-  padding: calc(var(--pico-block-spacing-vertical) * 0.75) calc(var(--pico-block-spacing-horizontal) * 1.5);
-  border-bottom: 1px solid transparent;
-  background-color: var(--pico-card-sectioning-background-color);
-  list-style-type: none;
-  touch-action: manipulation;
-  transition: all var(--pico-transition);
+  order: 1;
+  padding: calc(var(--pico-spacing) * 0.625);
+  border: 0;
+  border-bottom: 1px solid var(--pico-primary-background);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  background: transparent;
+  color: var(--pico-contrast);
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color var(--pico-transition);
 }
-section[role=region] details summary:hover {
-  border-bottom-color: var(--pico-primary-border);
-  background-color: var(--pico-card-background-color);
+[role=tablist] button[aria-selected=true] {
+  background: var(--pico-primary-background);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details summary::after {
-  display: none;
+[role=tablist] button:hover {
+  background: var(--pico-primary-hover-background);
+  color: var(--pico-primary-inverse);
 }
-section[role=region] details > div {
-  opacity: 0;
+[role=tablist] [role=tabpanel] {
+  flex-grow: 1;
+  order: 99;
+  width: 100%;
+  padding: var(--pico-spacing) calc(var(--pico-spacing) * 0.75);
+  background: var(--pico-accent-section-bg-color);
+  animation: var(--pico-tab-animation) var(--pico-transition);
 }
-section[role=region] details[open] > summary {
-  background-color: var(--pico-primary-background);
-  color: var(--pico-primary-inverse) !important;
+[role=tablist] [role=tabpanel]:not([hidden]) {
+  display: block;
 }
-section[role=region] details[open] > summary:hover {
-  background-color: var(--pico-primary-hover-background);
+[role=tablist] [role=tabpanel][hidden] {
+  display: none;
 }
-section[role=region] details[open] > div {
-  order: 1;
-  width: 100%;
-  padding: var(--pico-spacing);
-  padding-bottom: 0;
-  opacity: 1;
-  transition: opacity var(--pico-transition);
+[role=tablist] [role=tabpanel] > *:last-of-type {
+  margin-bottom: 0;
 }
 
+@media (max-width: 45em) {
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button,
+  [role=tablist] label {
+    order: initial;
+  }
+  [role=tablist] label,
+  [role=tablist] [role=tabpanel],
+  [role=tablist] button {
+    width: 100%;
+    margin-top: 0.2rem;
+    margin-right: 0;
+  }
+}
 [popover] {
   border-color: var(--pico-primary);
 }
@@ -4264,52 +4293,6 @@ section[role=region] details[open] > div {
   opacity: 0.8;
 }
 
-/**
-* Notification (<dialog>)
-*/
-dialog[role=alert] {
-  position: fixed;
-  top: unset;
-  right: var(--pico-spacing);
-  bottom: var(--pico-spacing);
-  left: unset;
-  width: auto;
-  min-width: unset;
-  height: auto;
-  min-height: unset;
-  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-  border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: var(--pico-border-radius);
-  -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
-  background-color: var(--pico-primary-background);
-  box-shadow: var(--pico-box-shadow);
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-  opacity: 0;
-  transition: opacity var(--pico-transition);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-dialog[role=alert] * {
-  color: var(--pico-primary-inverse);
-  font-weight: var(--pico-font-weight);
-  font-size: var(--pico-font-size);
-  line-height: var(--pico-line-height);
-}
-
-dialog[data-backdrop=false][role=alert]::backdrop {
-  display: none;
-}
-
-dialog[role=alert][open] {
-  opacity: 1;
-  transition: opacity var(--pico-transition);
-}
-
 .timeline {
   position: relative;
   max-width: 100%;