Merge pull request #400 from asbjornu/include-close-button-in-classless

Include close icon styles in classless
feat: include the close icon styles in classless
2025-07-27 00:02:10 -04:00 · 2023-12-28 20:30:54 +07:00 · 2023-12-28 14:24:42 +01:00 · 2023-12-28 18:02:21 +07:00 · 2023-12-28 17:26:46 +07:00 · 2023-12-28 17:24:57 +07:00
66 changed files with 938 additions and 613 deletions
--- a/README.md
+++ b/README.md
@ -9,7 +9,7 @@
 <p align="center">
  <strong>Minimal CSS Framework for semantic HTML</strong><br>
  Elegant styles for all native HTML elements without <code>.classes</code> and dark mode automatically enabled.<br><br>
-  <a href="https://picocss.com/#examples">Examples</a> ·
+  <a href="https://github.com/picocss/examples">Examples</a> ·
  <a href="https://picocss.com/docs/">Documentation</a>
 </p>

@ -52,7 +52,7 @@ There are 4 ways to get started with Pico CSS:

 **Install manually**

-[Download Pico](https://github.com/picocss/pico/archive/refs/tags/v1.5.10.zip) and link `/css/pico.min.css` in the `<head>` of your website.
+[Download Pico](https://github.com/picocss/pico/archive/refs/tags/v1.5.11.zip) and link `/css/pico.min.css` in the `<head>` of your website.

 ```html
 <link rel="stylesheet" href="css/pico.min.css">
@ -80,7 +80,7 @@ composer require picocss/pico

 ## Class-less version

-Pico provides a `.classless` version ([example](https://picocss.com/examples/classless)).
+Pico provides a `.classless` version ([example](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-classless)).

 In this version, `header`, `main` and `footer` act as containers.

@ -119,7 +119,7 @@ Then just write pure HTML, and it should look great:

 Minimalist templates to discover Pico in action:

-[![Examples](.github/examples.jpg)](https://picocss.com/#examples)
+[![Examples](.github/examples.jpg)](https://github.com/picocss/examples)

 - **[Preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-preview)**  
  A starter example with most of the Pico components and styles.
--- a/css/pico.classless.css
+++ b/css/pico.classless.css
@ -1,6 +1,6 @@
@charset "UTF-8";
 /*!
- * Pico CSS v1.5.10 (https://picocss.com)
+ * Pico CSS v1.5.11 (https://picocss.com)
 * Copyright 2019-2023 - Licensed under MIT
 */
 /**
@ -763,9 +763,7 @@ small {
 :where(dl, ol, ul) {
  padding-right: 0;
  padding-left: var(--spacing);
-  -webkit-padding-start: var(--spacing);
  padding-inline-start: var(--spacing);
-  -webkit-padding-end: 0;
  padding-inline-end: 0;
 }
 :where(dl, ol, ul) li {
@ -794,9 +792,7 @@ blockquote {
  padding: var(--spacing);
  border-right: none;
  border-left: 0.25rem solid var(--blockquote-border-color);
-  -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
  border-inline-start: 0.25rem solid var(--blockquote-border-color);
-  -webkit-border-end: none;
  border-inline-end: none;
 }
 blockquote footer {
@ -1113,9 +1109,7 @@ textarea[disabled],
 :where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] {
  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
  padding-left: var(--form-element-spacing-horizontal);
-  -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
  padding-inline-start: var(--form-element-spacing-horizontal) !important;
-  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
  padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
  background-position: center right 0.75rem;
  background-size: 1rem auto;
@ -1168,9 +1162,7 @@ select::-ms-expand {
 select:not([multiple], [size]) {
  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-left: var(--form-element-spacing-horizontal);
-  -webkit-padding-start: var(--form-element-spacing-horizontal);
  padding-inline-start: var(--form-element-spacing-horizontal);
-  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  background-image: var(--icon-chevron);
  background-position: center right 0.75rem;
@ -1208,9 +1200,7 @@ label > :where(input, select, textarea) {
  margin-top: -0.125em;
  margin-right: 0.375em;
  margin-left: 0;
-  -webkit-margin-start: 0;
  margin-inline-start: 0;
-  -webkit-margin-end: 0.375em;
  margin-inline-end: 0.375em;
  border-width: var(--border-width);
  font-size: inherit;
@ -1291,7 +1281,6 @@ label > :where(input, select, textarea) {
 }
 [type=checkbox][role=switch]:checked::before {
  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));
 }

@ -1382,9 +1371,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
  --color: var(--secondary-inverse);
  margin-right: calc(var(--spacing) / 2);
  margin-left: 0;
-  -webkit-margin-start: 0;
  margin-inline-start: 0;
-  -webkit-margin-end: calc(var(--spacing) / 2);
  margin-inline-end: calc(var(--spacing) / 2);
  padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
  border: var(--border-width) solid var(--border-color);
@ -1410,9 +1397,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
  --color: var(--secondary-inverse);
  margin-right: calc(var(--spacing) / 2);
  margin-left: 0;
-  -webkit-margin-start: 0;
  margin-inline-start: 0;
-  -webkit-margin-end: calc(var(--spacing) / 2);
  margin-inline-end: calc(var(--spacing) / 2);
  padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
  border: var(--border-width) solid var(--border-color);
@ -1547,7 +1532,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
 }

 input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
-  -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
  padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
  border-radius: 5rem;
  background-image: var(--icon-search);
@ -1556,7 +1540,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
  background-repeat: no-repeat;
 }
 input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
-  -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
  padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
  background-position: center left 1.125rem, center right 0.75rem;
 }
@ -1728,7 +1711,6 @@ details summary::after {
  display: block;
  width: 1rem;
  height: 1rem;
-  -webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
  margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
  float: right;
  transform: rotate(-90deg);
@ -1849,7 +1831,7 @@ dialog article > header,
 dialog article > footer {
  padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
 }
-dialog article > header .close {
+dialog article > header a[rel=prev] {
  margin: 0;
  margin-left: var(--spacing);
  float: right;
@ -1866,6 +1848,23 @@ dialog article > footer [role=button]:not(:first-of-type) {
 dialog article p:last-of-type {
  margin: 0;
 }
+dialog article a[rel=prev] {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  margin-top: calc(var(--block-spacing-vertical) * -0.5);
+  margin-bottom: var(--typography-spacing-vertical);
+  margin-left: auto;
+  background-image: var(--icon-close);
+  background-position: center;
+  background-size: auto 1rem;
+  background-repeat: no-repeat;
+  opacity: 0.5;
+  transition: opacity var(--transition);
+}
+dialog article a[rel=prev]:is([aria-current], :hover, :active, :focus) {
+  opacity: 1;
+}
 dialog:not([open]), dialog[open=false] {
  display: none;
 }
@ -1924,13 +1923,11 @@ nav[aria-label=breadcrumb] {
  justify-content: start;
 }
 nav[aria-label=breadcrumb] ul li:not(:first-child) {
-  -webkit-margin-start: var(--nav-link-spacing-horizontal);
  margin-inline-start: var(--nav-link-spacing-horizontal);
 }
 nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
  position: absolute;
  width: calc(var(--nav-link-spacing-horizontal) * 2);
-  -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
  margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
  content: "/";
  color: var(--muted-color);
@ -2090,10 +2087,10 @@ li[role=list] > a::after {
  display: block;
  width: 1rem;
  height: calc(1rem * var(--line-height, 1.5));
-  -webkit-margin-start: 0.5rem;
  margin-inline-start: 0.5rem;
  float: right;
  transform: rotate(0deg);
+  background-image: var(--icon-chevron);
  background-position: right center;
  background-size: 1rem auto;
  background-repeat: no-repeat;
@ -2169,7 +2166,6 @@ nav details[role=list][open] summary {
 }
 nav details[role=list] summary + ul {
  margin-top: var(--outline-width);
-  -webkit-margin-start: 0;
  margin-inline-start: 0;
 }
 nav details[role=list] summary[role=link] {
@ -2178,7 +2174,6 @@ nav details[role=list] summary[role=link] {
 }
 nav details[role=list] summary[role=link] + ul {
  margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-  -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
  margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
 }

@ -2190,7 +2185,6 @@ li[role=list] a:focus ~ ul {
 li[role=list] > ul {
  display: none;
  margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-  -webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
  margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
 }
 li[role=list] > a::after {
@ -2225,9 +2219,7 @@ label > details[role=list] {
 [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before {
  margin-right: calc(var(--spacing) * 0.5);
  margin-left: 0;
-  -webkit-margin-start: 0;
  margin-inline-start: 0;
-  -webkit-margin-end: calc(var(--spacing) * 0.5);
  margin-inline-end: calc(var(--spacing) * 0.5);
 }
 [aria-busy=true]:not(input, select, textarea, html):empty {
--- a/css/pico.classless.css.map
+++ b/css/pico.classless.css.map
--- a/css/pico.classless.min.css
+++ b/css/pico.classless.min.css
--- a/css/pico.classless.min.css.map
+++ b/css/pico.classless.min.css.map
--- a/css/pico.css
+++ b/css/pico.css
@ -1,6 +1,6 @@
@charset "UTF-8";
 /*!
- * Pico CSS v1.5.10 (https://picocss.com)
+ * Pico CSS v1.5.11 (https://picocss.com)
 * Copyright 2019-2023 - Licensed under MIT
 */
 /**
@ -820,9 +820,7 @@ small {
 :where(dl, ol, ul) {
  padding-right: 0;
  padding-left: var(--spacing);
-  -webkit-padding-start: var(--spacing);
  padding-inline-start: var(--spacing);
-  -webkit-padding-end: 0;
  padding-inline-end: 0;
 }
 :where(dl, ol, ul) li {
@ -851,9 +849,7 @@ blockquote {
  padding: var(--spacing);
  border-right: none;
  border-left: 0.25rem solid var(--blockquote-border-color);
-  -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
  border-inline-start: 0.25rem solid var(--blockquote-border-color);
-  -webkit-border-end: none;
  border-inline-end: none;
 }
 blockquote footer {
@ -1216,9 +1212,7 @@ textarea[disabled],
 :where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] {
  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
  padding-left: var(--form-element-spacing-horizontal);
-  -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
  padding-inline-start: var(--form-element-spacing-horizontal) !important;
-  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
  padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
  background-position: center right 0.75rem;
  background-size: 1rem auto;
@ -1271,9 +1265,7 @@ select::-ms-expand {
 select:not([multiple], [size]) {
  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-left: var(--form-element-spacing-horizontal);
-  -webkit-padding-start: var(--form-element-spacing-horizontal);
  padding-inline-start: var(--form-element-spacing-horizontal);
-  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  background-image: var(--icon-chevron);
  background-position: center right 0.75rem;
@ -1311,9 +1303,7 @@ label > :where(input, select, textarea) {
  margin-top: -0.125em;
  margin-right: 0.375em;
  margin-left: 0;
-  -webkit-margin-start: 0;
  margin-inline-start: 0;
-  -webkit-margin-end: 0.375em;
  margin-inline-end: 0.375em;
  border-width: var(--border-width);
  font-size: inherit;
@ -1394,7 +1384,6 @@ label > :where(input, select, textarea) {
 }
 [type=checkbox][role=switch]:checked::before {
  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));
 }

@ -1485,9 +1474,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
  --color: var(--secondary-inverse);
  margin-right: calc(var(--spacing) / 2);
  margin-left: 0;
-  -webkit-margin-start: 0;
  margin-inline-start: 0;
-  -webkit-margin-end: calc(var(--spacing) / 2);
  margin-inline-end: calc(var(--spacing) / 2);
  padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
  border: var(--border-width) solid var(--border-color);
@ -1513,9 +1500,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
  --color: var(--secondary-inverse);
  margin-right: calc(var(--spacing) / 2);
  margin-left: 0;
-  -webkit-margin-start: 0;
  margin-inline-start: 0;
-  -webkit-margin-end: calc(var(--spacing) / 2);
  margin-inline-end: calc(var(--spacing) / 2);
  padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
  border: var(--border-width) solid var(--border-color);
@ -1650,7 +1635,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
 }

 input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
-  -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
  padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
  border-radius: 5rem;
  background-image: var(--icon-search);
@ -1659,7 +1643,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
  background-repeat: no-repeat;
 }
 input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
-  -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
  padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
  background-position: center left 1.125rem, center right 0.75rem;
 }
@ -1831,7 +1814,6 @@ details summary::after {
  display: block;
  width: 1rem;
  height: 1rem;
-  -webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
  margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
  float: right;
  transform: rotate(-90deg);
@ -2091,13 +2073,11 @@ nav[aria-label=breadcrumb] {
  justify-content: start;
 }
 nav[aria-label=breadcrumb] ul li:not(:first-child) {
-  -webkit-margin-start: var(--nav-link-spacing-horizontal);
  margin-inline-start: var(--nav-link-spacing-horizontal);
 }
 nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
  position: absolute;
  width: calc(var(--nav-link-spacing-horizontal) * 2);
-  -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
  margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
  content: "/";
  color: var(--muted-color);
@ -2257,10 +2237,10 @@ li[role=list] > a::after {
  display: block;
  width: 1rem;
  height: calc(1rem * var(--line-height, 1.5));
-  -webkit-margin-start: 0.5rem;
  margin-inline-start: 0.5rem;
  float: right;
  transform: rotate(0deg);
+  background-image: var(--icon-chevron);
  background-position: right center;
  background-size: 1rem auto;
  background-repeat: no-repeat;
@ -2336,7 +2316,6 @@ nav details[role=list][open] summary {
 }
 nav details[role=list] summary + ul {
  margin-top: var(--outline-width);
-  -webkit-margin-start: 0;
  margin-inline-start: 0;
 }
 nav details[role=list] summary[role=link] {
@ -2345,7 +2324,6 @@ nav details[role=list] summary[role=link] {
 }
 nav details[role=list] summary[role=link] + ul {
  margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-  -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
  margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
 }

@ -2357,7 +2335,6 @@ li[role=list] a:focus ~ ul {
 li[role=list] > ul {
  display: none;
  margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-  -webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
  margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
 }
 li[role=list] > a::after {
@ -2392,9 +2369,7 @@ label > details[role=list] {
 [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before {
  margin-right: calc(var(--spacing) * 0.5);
  margin-left: 0;
-  -webkit-margin-start: 0;
  margin-inline-start: 0;
-  -webkit-margin-end: calc(var(--spacing) * 0.5);
  margin-inline-end: calc(var(--spacing) * 0.5);
 }
 [aria-busy=true]:not(input, select, textarea, html):empty {
--- a/css/pico.css.map
+++ b/css/pico.css.map
--- a/css/pico.fluid.classless.css
+++ b/css/pico.fluid.classless.css
@ -1,6 +1,6 @@
@charset "UTF-8";
 /*!
- * Pico CSS v1.5.10 (https://picocss.com)
+ * Pico CSS v1.5.11 (https://picocss.com)
 * Copyright 2019-2023 - Licensed under MIT
 */
 /**
@ -733,9 +733,7 @@ small {
 :where(dl, ol, ul) {
  padding-right: 0;
  padding-left: var(--spacing);
-  -webkit-padding-start: var(--spacing);
  padding-inline-start: var(--spacing);
-  -webkit-padding-end: 0;
  padding-inline-end: 0;
 }
 :where(dl, ol, ul) li {
@ -764,9 +762,7 @@ blockquote {
  padding: var(--spacing);
  border-right: none;
  border-left: 0.25rem solid var(--blockquote-border-color);
-  -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
  border-inline-start: 0.25rem solid var(--blockquote-border-color);
-  -webkit-border-end: none;
  border-inline-end: none;
 }
 blockquote footer {
@ -1083,9 +1079,7 @@ textarea[disabled],
 :where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] {
  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
  padding-left: var(--form-element-spacing-horizontal);
-  -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
  padding-inline-start: var(--form-element-spacing-horizontal) !important;
-  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
  padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
  background-position: center right 0.75rem;
  background-size: 1rem auto;
@ -1138,9 +1132,7 @@ select::-ms-expand {
 select:not([multiple], [size]) {
  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-left: var(--form-element-spacing-horizontal);
-  -webkit-padding-start: var(--form-element-spacing-horizontal);
  padding-inline-start: var(--form-element-spacing-horizontal);
-  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  background-image: var(--icon-chevron);
  background-position: center right 0.75rem;
@ -1178,9 +1170,7 @@ label > :where(input, select, textarea) {
  margin-top: -0.125em;
  margin-right: 0.375em;
  margin-left: 0;
-  -webkit-margin-start: 0;
  margin-inline-start: 0;
-  -webkit-margin-end: 0.375em;
  margin-inline-end: 0.375em;
  border-width: var(--border-width);
  font-size: inherit;
@ -1261,7 +1251,6 @@ label > :where(input, select, textarea) {
 }
 [type=checkbox][role=switch]:checked::before {
  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));
 }

@ -1352,9 +1341,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
  --color: var(--secondary-inverse);
  margin-right: calc(var(--spacing) / 2);
  margin-left: 0;
-  -webkit-margin-start: 0;
  margin-inline-start: 0;
-  -webkit-margin-end: calc(var(--spacing) / 2);
  margin-inline-end: calc(var(--spacing) / 2);
  padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
  border: var(--border-width) solid var(--border-color);
@ -1380,9 +1367,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
  --color: var(--secondary-inverse);
  margin-right: calc(var(--spacing) / 2);
  margin-left: 0;
-  -webkit-margin-start: 0;
  margin-inline-start: 0;
-  -webkit-margin-end: calc(var(--spacing) / 2);
  margin-inline-end: calc(var(--spacing) / 2);
  padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
  border: var(--border-width) solid var(--border-color);
@ -1517,7 +1502,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
 }

 input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
-  -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
  padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
  border-radius: 5rem;
  background-image: var(--icon-search);
@ -1526,7 +1510,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
  background-repeat: no-repeat;
 }
 input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
-  -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
  padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
  background-position: center left 1.125rem, center right 0.75rem;
 }
@ -1698,7 +1681,6 @@ details summary::after {
  display: block;
  width: 1rem;
  height: 1rem;
-  -webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
  margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
  float: right;
  transform: rotate(-90deg);
@ -1819,7 +1801,7 @@ dialog article > header,
 dialog article > footer {
  padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
 }
-dialog article > header .close {
+dialog article > header a[rel=prev] {
  margin: 0;
  margin-left: var(--spacing);
  float: right;
@ -1836,6 +1818,23 @@ dialog article > footer [role=button]:not(:first-of-type) {
 dialog article p:last-of-type {
  margin: 0;
 }
+dialog article a[rel=prev] {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  margin-top: calc(var(--block-spacing-vertical) * -0.5);
+  margin-bottom: var(--typography-spacing-vertical);
+  margin-left: auto;
+  background-image: var(--icon-close);
+  background-position: center;
+  background-size: auto 1rem;
+  background-repeat: no-repeat;
+  opacity: 0.5;
+  transition: opacity var(--transition);
+}
+dialog article a[rel=prev]:is([aria-current], :hover, :active, :focus) {
+  opacity: 1;
+}
 dialog:not([open]), dialog[open=false] {
  display: none;
 }
@ -1894,13 +1893,11 @@ nav[aria-label=breadcrumb] {
  justify-content: start;
 }
 nav[aria-label=breadcrumb] ul li:not(:first-child) {
-  -webkit-margin-start: var(--nav-link-spacing-horizontal);
  margin-inline-start: var(--nav-link-spacing-horizontal);
 }
 nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
  position: absolute;
  width: calc(var(--nav-link-spacing-horizontal) * 2);
-  -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
  margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
  content: "/";
  color: var(--muted-color);
@ -2060,10 +2057,10 @@ li[role=list] > a::after {
  display: block;
  width: 1rem;
  height: calc(1rem * var(--line-height, 1.5));
-  -webkit-margin-start: 0.5rem;
  margin-inline-start: 0.5rem;
  float: right;
  transform: rotate(0deg);
+  background-image: var(--icon-chevron);
  background-position: right center;
  background-size: 1rem auto;
  background-repeat: no-repeat;
@ -2139,7 +2136,6 @@ nav details[role=list][open] summary {
 }
 nav details[role=list] summary + ul {
  margin-top: var(--outline-width);
-  -webkit-margin-start: 0;
  margin-inline-start: 0;
 }
 nav details[role=list] summary[role=link] {
@ -2148,7 +2144,6 @@ nav details[role=list] summary[role=link] {
 }
 nav details[role=list] summary[role=link] + ul {
  margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-  -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
  margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
 }

@ -2160,7 +2155,6 @@ li[role=list] a:focus ~ ul {
 li[role=list] > ul {
  display: none;
  margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-  -webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
  margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
 }
 li[role=list] > a::after {
@ -2195,9 +2189,7 @@ label > details[role=list] {
 [aria-busy=true]:not(input, select, textarea, html):not(:empty)::before {
  margin-right: calc(var(--spacing) * 0.5);
  margin-left: 0;
-  -webkit-margin-start: 0;
  margin-inline-start: 0;
-  -webkit-margin-end: calc(var(--spacing) * 0.5);
  margin-inline-end: calc(var(--spacing) * 0.5);
 }
 [aria-busy=true]:not(input, select, textarea, html):empty {
--- a/css/pico.fluid.classless.css.map
+++ b/css/pico.fluid.classless.css.map
--- a/css/pico.fluid.classless.min.css
+++ b/css/pico.fluid.classless.min.css
--- a/css/pico.fluid.classless.min.css.map
+++ b/css/pico.fluid.classless.min.css.map
--- a/css/pico.min.css
+++ b/css/pico.min.css
--- a/css/pico.min.css.map
+++ b/css/pico.min.css.map
--- a/css/pico.slim.css
+++ b/css/pico.slim.css
@ -1,5 +1,5 @@
 /*!
- * Pico CSS v1.5.10 (https://picocss.com)
+ * Pico CSS v1.5.11 (https://picocss.com)
 * Copyright 2019-2023 - Licensed under MIT
 *
 * Slim version example
@ -748,9 +748,7 @@ small {
 :where(dl, ol, ul) {
  padding-right: 0;
  padding-left: var(--spacing);
-  -webkit-padding-start: var(--spacing);
  padding-inline-start: var(--spacing);
-  -webkit-padding-end: 0;
  padding-inline-end: 0;
 }
 :where(dl, ol, ul) li {
@ -779,9 +777,7 @@ blockquote {
  padding: var(--spacing);
  border-right: none;
  border-left: 0.25rem solid var(--blockquote-border-color);
-  -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
  border-inline-start: 0.25rem solid var(--blockquote-border-color);
-  -webkit-border-end: none;
  border-inline-end: none;
 }
 blockquote footer {
@ -1142,9 +1138,7 @@ textarea[disabled],
 :where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] {
  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-left: var(--form-element-spacing-horizontal);
-  -webkit-padding-start: var(--form-element-spacing-horizontal);
  padding-inline-start: var(--form-element-spacing-horizontal);
-  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  background-position: center right 0.75rem;
  background-size: 1rem auto;
@ -1197,9 +1191,7 @@ select::-ms-expand {
 select:not([multiple], [size]) {
  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-left: var(--form-element-spacing-horizontal);
-  -webkit-padding-start: var(--form-element-spacing-horizontal);
  padding-inline-start: var(--form-element-spacing-horizontal);
-  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  background-image: var(--icon-chevron);
  background-position: center right 0.75rem;
--- a/css/pico.slim.css.map
+++ b/css/pico.slim.css.map
--- a/css/pico.slim.min.css
+++ b/css/pico.slim.min.css
--- a/css/pico.slim.min.css.map
+++ b/css/pico.slim.min.css.map
--- a/docs/accordions.html
+++ b/docs/accordions.html
--- a/docs/buttons.html
+++ b/docs/buttons.html
--- a/docs/cards.html
+++ b/docs/cards.html
--- a/docs/classless.html
+++ b/docs/classless.html
--- a/docs/containers.html
+++ b/docs/containers.html
--- a/docs/customization.html
+++ b/docs/customization.html
--- a/docs/dropdowns.html
+++ b/docs/dropdowns.html
--- a/docs/forms.html
+++ b/docs/forms.html
--- a/docs/grid.html
+++ b/docs/grid.html
--- a/docs/index.html
+++ b/docs/index.html
--- a/docs/loading.html
+++ b/docs/loading.html
--- a/docs/modal.html
+++ b/docs/modal.html
--- a/docs/navs.html
+++ b/docs/navs.html
--- a/docs/progress.html
+++ b/docs/progress.html
--- a/docs/rtl.html
+++ b/docs/rtl.html
--- a/docs/scroller.html
+++ b/docs/scroller.html
--- a/docs/src/_nav.html
+++ b/docs/src/_nav.html
@ -10,7 +10,7 @@
    <li>Documentation</li>
  </ul>
  <ul>
-    <li><a href="https://picocss.com#examples" class="secondary">Examples</a></li>
+    <li><a href="https://github.com/picocss/examples" class="secondary">Examples</a></li>
    <li><a href="./" class="secondary">Docs</a></li>
    <li>
      <a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository">
--- a/docs/src/accordions.html
+++ b/docs/src/accordions.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html') 
-      title="Accordions" 
-      description="Toggle sections of content in pure HTML, without JavaScript."
-      canonical="accordions.html"
+      title=`Accordions`
+      description=`Toggle sections of content in pure HTML, without JavaScript.`
+      canonical=`accordions.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="accordions-link"}
+      ${require('./_sidebar.html') active=`accordions-link`}
      
      <div role="document">
        <section id="accordions">
--- a/docs/src/buttons.html
+++ b/docs/src/buttons.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html') 
-      title="Buttons" 
-      description="The essential button in pure HTML, without .classes for the default style."
-      canonical="buttons.html"
+      title=`Buttons`
+      description=`The essential button in pure HTML, without .classes for the default style.`
+      canonical=`buttons.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="buttons-link"}
+      ${require('./_sidebar.html') active=`buttons-link`}
      
      <div role="document">
        <section id="buttons">
--- a/docs/src/cards.html
+++ b/docs/src/cards.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html') 
-      title="Cards" 
-      description="A flexible container with graceful spacings across devices and viewports."
-      canonical="cards.html"
+      title=`Cards`
+      description=`A flexible container with graceful spacings across devices and viewports.`
+      canonical=`cards.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="cards-link"}
+      ${require('./_sidebar.html') active=`cards-link`}
      
      <div role="document">
        <section id="cards">
--- a/docs/src/classless.html
+++ b/docs/src/classless.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html') 
-      title="Class-less version" 
-      description="For wild HTML purists, Pico provides a .classless version."
-      canonical="classless.html"
+      title=`Class-less version`
+      description=`For wild HTML purists, Pico provides a .classless version.`
+      canonical=`classless.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="classless-link"}
+      ${require('./_sidebar.html') active=`classless-link`}
      
      <div role="document">
        <section id="classless">
--- a/docs/src/containers.html
+++ b/docs/src/containers.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html') 
-      title="Containers" 
-      description=".container enable a centered viewport, .container-fluid enable a 100% layout."
-      canonical="containers.html"
+      title=`Containers`
+      description=`.container enable a centered viewport, .container-fluid enable a 100% layout.`
+      canonical=`containers.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="containers-link"}
+      ${require('./_sidebar.html') active=`containers-link`}
      
      <div role="document">
        <section id="containers">
--- a/docs/src/customization.html
+++ b/docs/src/customization.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html') 
-      title="Customization" 
-      description="You can customize themes with SCSS, or you can edit the CSS variables. All Pico's styles and colors are set with CSS custom properties (variables)."
-      canonical="customization.html"
+      title=`Customization`
+      description=`You can customize themes with SCSS, or you can edit the CSS variables. All Pico's styles and colors are set with CSS custom properties (variables).`
+      canonical=`customization.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="customization-link"}
+      ${require('./_sidebar.html') active=`customization-link`}
      
      <div role="document">
        <section id="customization">
--- a/docs/src/dropdowns.html
+++ b/docs/src/dropdowns.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html')
-      title="Dropdowns"
-      description="Dropdown menus and custom selects without JavaScript." 
-      canonical="dropdowns.html"
+      title=`Dropdowns`
+      description=`Dropdown menus and custom selects without JavaScript.`
+      canonical=`dropdowns.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}

    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="dropdowns-link"}
+      ${require('./_sidebar.html') active=`dropdowns-link`}

      <div role="document">
        <section id="dropdown">
--- a/docs/src/forms.html
+++ b/docs/src/forms.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html')
-      title="Forms"
-      description="All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports."
-      canonical="forms.html"
+      title=`Forms`
+      description=`All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.`
+      canonical=`forms.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}

    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="forms-link"}
+      ${require('./_sidebar.html') active=`forms-link`}

      <div role="document">
        <section id="forms">
--- a/docs/src/grid.html
+++ b/docs/src/grid.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html') 
-      title="Grid" 
-      description=".grid enable a minimal grid system with auto-layout columns."
-      canonical="grid.html"
+      title=`Grid`
+      description=`.grid enable a minimal grid system with auto-layout columns.`
+      canonical=`grid.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="grid-link"}
+      ${require('./_sidebar.html') active=`grid-link`}
      
      <div role="document">
        <section id="grid">
--- a/docs/src/index.html
+++ b/docs/src/index.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html') 
-      title="Documentation" 
-      description="Pico works without package manager or dependencies! There are 4 ways to get started with Pico CSS: manually, from a CDN, with NPM, or with Composer."
-      canonical=""
+      title=`Documentation`
+      description=`Pico works without package manager or dependencies! There are 4 ways to get started with Pico CSS: manually, from a CDN, with NPM, or with Composer.`
+      canonical=``
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="start-link"}
+      ${require('./_sidebar.html') active=`start-link`}
      
      <div role="document">
        <section id="start">
--- a/docs/src/loading.html
+++ b/docs/src/loading.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html') 
-      title="Loading" 
-      description="aria-busy='true' enable a loading indicator."
-      canonical="loading.html"
+      title=`Loading`
+      description=`aria-busy='true' enable a loading indicator.`
+      canonical=`loading.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="loading-link"}
+      ${require('./_sidebar.html') active=`loading-link`}
      
      <div role="document">
        <section id="loading">
--- a/docs/src/modal.html
+++ b/docs/src/modal.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html') 
-      title="Modal" 
-      description="A flexible container with graceful spacings across devices and viewports."
-      canonical="modal.html"
+      title=`Modal` 
+      description=`A flexible container with graceful spacings across devices and viewports.`
+      canonical=`modal.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="modal-link"}
+      ${require('./_sidebar.html') active=`modal-link`}
      
      <div role="document">
        <section id="modal">
--- a/docs/src/navs.html
+++ b/docs/src/navs.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html') 
-      title="Navs" 
-      description="The essential navbar component in pure semantic HTML."
-      canonical="navs.html"
+      title=`Navs`
+      description=`The essential navbar component in pure semantic HTML.`
+      canonical=`navs.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="navs-link"}
+      ${require('./_sidebar.html') active=`navs-link`}
      
      <div role="document">
        <section id="navs">
--- a/docs/src/progress.html
+++ b/docs/src/progress.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html')
-      title="Progress"
-      description="Progress bar element in pure HTML, without JavaScript."
-      canonical="progress.html"
+      title=`Progress`
+      description=`Progress bar element in pure HTML, without JavaScript.`
+      canonical=`progress.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}

    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="progress-link"}
+      ${require('./_sidebar.html') active=`progress-link`}

      <div role="document">
        <section id="progress">
--- a/docs/src/rtl.html
+++ b/docs/src/rtl.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html') 
-      title="RTL (Right-To-Left)" 
-      description="Support for right-to-left text in Pico with dir='rtl'"
-      canonical="rtl.html"
+      title=`RTL (Right-To-Left)`
+      description=`Support for right-to-left text in Pico with dir='rtl'`
+      canonical=`rtl.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="rtl-link"}
+      ${require('./_sidebar.html') active=`rtl-link`}
      
      <div role="document">
        <section id="rtl">
--- a/docs/src/scroller.html
+++ b/docs/src/scroller.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html') 
-      title="Horizontal scroller" 
-      description="&lt;figure&gt; acts as a container to make any content scrollable horizontally."
-      canonical="scroller.html"
+      title=`Horizontal scroller`
+      description=`&lt;figure&gt; acts as a container to make any content scrollable horizontally.`
+      canonical=`scroller.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="scroller-link"}
+      ${require('./_sidebar.html') active=`scroller-link`}
      
      <div role="document">
        <section id="scroller">
--- a/docs/src/tables.html
+++ b/docs/src/tables.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html') 
-      title="Tables" 
-      description="Default styles for tables without .classes"
-      canonical="tables.html"
+      title=`Tables`
+      description=`Default styles for tables without .classes`
+      canonical=`tables.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="tables-link"}
+      ${require('./_sidebar.html') active=`tables-link`}
      
      <div role="document">
        <section id="tables">
--- a/docs/src/themes.html
+++ b/docs/src/themes.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html') 
-      title="Themes" 
-      description="Pico is shipped with 2 consistent themes: Light & Dark. The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled ('prefers-color-scheme: dark')."
-      canonical="themes.html"
+      title=`Themes` 
+      description=`Pico is shipped with 2 consistent themes: Light & Dark. The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled ('prefers-color-scheme: dark').`
+      canonical=`themes.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="themes-link"}
+      ${require('./_sidebar.html') active=`themes-link`}
      
      <div role="document">
        <section id="themes">
--- a/docs/src/tooltips.html
+++ b/docs/src/tooltips.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html') 
-      title="Tooltips" 
-      description="Enable tooltips everywhere in pure HTML, without JavaScript."
-      canonical="tooltips.html"
+      title=`Tooltips`
+      description=`Enable tooltips everywhere in pure HTML, without JavaScript.`
+      canonical=`tooltips.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="tooltips-link"}
+      ${require('./_sidebar.html') active=`tooltips-link`}
      
      <div role="document">
        <section id="tooltips">
--- a/docs/src/typography.html
+++ b/docs/src/typography.html
@ -1,16 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    ${require('./_head.html') title="Typography" description="All typographic
-    elements are responsive, allowing text to scale gracefully across devices
-    and viewports." canonical="typography.html" }
+    ${require('./_head.html')
+      title=`Typography`
+      description=`All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.`
+      canonical=`typography.html`
+    }
  </head>

  <body>
    ${require('./_nav.html')}

    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="typography-link"}
+      ${require('./_sidebar.html') active=`typography-link`}

      <div role="document">
        <section id="typography">
@ -127,18 +129,13 @@
          <article aria-label="Hgroup example">
            <div class="headings">
              <h2>Heading 2</h2>
-              <h3>Subtitle for heading 2</h3>
+              <p>Subtitle for heading 2</p>
            </div>
            <footer class="code">
              <pre><code>&lt;<b>hgroup</b>&gt;
  &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
-  &lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
+  &lt;<b>p</b>&gt;Subtitle for heading 2&lt;/<b>p</b>&gt;
 &lt;/<b>hgroup</b>&gt;</code></pre>
-
-              <pre><code>&lt;<b>div</b> <i>class</i>=<u>"headings</u>"&gt;
-  &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
-  &lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
-&lt;/<b>div</b>&gt;</code></pre>
            </footer>
          </article>

--- a/docs/src/we-love-classes.html
+++ b/docs/src/we-love-classes.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    ${require('./_head.html') 
-      title="We love .classes" 
-      description="As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes. But of course, .classes are not a bad practice at all. Feel free to use modifiers."
-      canonical="we-love-classes.html"
+      title=`We love .classes`
+      description=`As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes. But of course, .classes are not a bad practice at all. Feel free to use modifiers.`
+      canonical=`we-love-classes.html`
    }
  </head>

@ -12,7 +12,7 @@
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
-      ${require('./_sidebar.html') active="we-love-classes-link"}
+      ${require('./_sidebar.html') active=`we-love-classes-link`}
      
      <div role="document">
        <section id="we-love-classes">
--- a/docs/tables.html
+++ b/docs/tables.html
--- a/docs/themes.html
+++ b/docs/themes.html
--- a/docs/tooltips.html
+++ b/docs/tooltips.html
--- a/docs/typography.html
+++ b/docs/typography.html
--- a/docs/we-love-classes.html
+++ b/docs/we-love-classes.html
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@picocss/pico",
-  "version": "1.5.10",
+  "version": "1.5.11",
  "description": "Minimal CSS Framework for semantic HTML",
  "author": "Lucas Larroche",
  "main": "css/pico.min.css",
@ -83,16 +83,16 @@
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "autoprefixer": "^10.4.14",
-    "caniuse-lite": "1.0.30001481",
+    "caniuse-lite": "1.0.30001572",
    "clean-css-cli": "^5.6.2",
-    "css-declaration-sorter": "^6.4.0",
-    "html-includes": "^4.4.1",
-    "nodemon": "^2.0.22",
+    "css-declaration-sorter": "^7.1.1",
+    "html-includes": "^5.0.0",
+    "nodemon": "^3.0.2",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.23",
-    "postcss-cli": "^10.1.0",
+    "postcss-cli": "^11.0.0",
    "postcss-scss": "^4.0.6",
-    "rollup": "^3.20.7",
+    "rollup": "^4.9.1",
    "sass": "^1.62.0",
    "uglify-js": "^3.17.4"
  },
--- a/scss/components/_dropdown.scss
+++ b/scss/components/_dropdown.scss
@ -71,6 +71,7 @@ li[role="list"] > a {
    margin-inline-start: 0.5rem;
    float: right;
    transform: rotate(0deg);
+    background-image: var(--icon-chevron);
    background-position: right center;
    background-size: 1rem auto;
    background-repeat: no-repeat;
--- a/scss/components/_modal.scss
+++ b/scss/components/_modal.scss
@ -28,6 +28,7 @@ dialog {

  // Content
  article {
+    $close-selector: if($enable-classes, ".close", "a[rel='prev']");
    max-height: calc(100vh - var(--spacing) * 2);
    overflow: auto;

@ -50,7 +51,7 @@ dialog {
    }

    > header {
-      .close {
+      #{$close-selector} {
        margin: 0;
        margin-left: var(--spacing);
        float: right;
@ -76,8 +77,7 @@ dialog {
    }

    // Close icon
-    @if $enable-classes {
-      .close {
+    #{$close-selector} {
      display: block;
      width: 1rem;
      height: 1rem;
@ -99,7 +99,6 @@ dialog {
      }
    }
  }
-  }

  // Closed state
  &:not([open]),
--- a/scss/pico.scss
+++ b/scss/pico.scss
@ -1,5 +1,5 @@
 /*!
- * Pico CSS v1.5.10 (https://picocss.com)
+ * Pico CSS v1.5.11 (https://picocss.com)
 * Copyright 2019-2023 - Licensed under MIT
 */

--- a/scss/pico.slim.scss
+++ b/scss/pico.slim.scss
@ -1,5 +1,5 @@
 /*!
- * Pico CSS v1.5.10 (https://picocss.com)
+ * Pico CSS v1.5.11 (https://picocss.com)
 * Copyright 2019-2023 - Licensed under MIT
 *
 * Slim version example
Author	SHA1	Message	Date
Lucas Larroche	873ad1b015	Merge pull request #400 from asbjornu/include-close-button-in-classless Include close icon styles in classless	2023-12-28 20:30:54 +07:00
Asbjørn Ulsberg	d85d2f177c	feat: include the close icon styles in classless	2023-12-28 14:24:42 +01:00
Lucas Larroche	a88ad874c5	chore: update examples link	2023-12-28 18:02:21 +07:00
Lucas Larroche	97c124933c	chore: update examples link	2023-12-28 17:26:46 +07:00
Lucas Larroche	14fa09035c	chore: bump version to v1.5.11	2023-12-28 17:24:57 +07:00
Lucas Larroche	af49fbb755	chore: update examples link	2023-12-28 17:12:16 +07:00
Lucas Larroche	d7dfeb524d	Delete yarn.lock	2023-12-28 17:04:57 +07:00
Lucas Larroche	86f700c58d	Merge branch 'dev' of https://github.com/picocss/pico into dev	2023-12-28 16:28:19 +07:00
Lucas Larroche	3fc47b759e	chore: upgrade `html-includes`	2023-12-28 16:28:11 +07:00
Lucas Larroche	9051b75806	chore: upgrade `html-includes`	2023-12-28 16:26:59 +07:00
Lucas Larroche	f0cde7139d	Merge pull request #404 from ericfortmeyer/master Use only one h* tag in the example	2023-12-28 13:51:42 +07:00
Lucas Larroche	7eb1b5cf3c	Merge branch 'dev' into pr/404	2023-12-28 13:49:47 +07:00
Lucas Larroche	b99a1b2a85	fix: use p tag within hgroup example	2023-12-28 13:48:51 +07:00
Lucas Larroche	2097a11ea8	Merge pull request #410 from thewebartisan7/master Add missing chevron icon when accordion is disabled but not dropdown.	2023-12-28 13:35:51 +07:00
Lucas Larroche	29b19b8afc	chore: build	2023-12-28 13:33:59 +07:00
Lucas Larroche	6102a69373	Merge branch 'dev' into pr/410	2023-12-28 13:33:12 +07:00
Lucas Larroche	adf7552778	chore: build	2023-12-28 13:31:48 +07:00
Lucas Larroche	04c4324c4f	Merge branch 'dev' of https://github.com/picocss/pico into dev	2023-12-28 12:59:00 +07:00
Lucas Larroche	31002a26b5	chore: update dependencies	2023-12-28 12:54:04 +07:00
Lucas Larroche	30be6cd2ba	chore: update dependencies	2023-12-28 12:47:25 +07:00
Damir	175e7def64	Update _dropdown.scss Add missing chevron icon when accordion is disabled but not dropdown.	2023-09-29 08:47:14 +02:00
Eric Fortmeyer	5e012413c8	use p tag within hgroup example HTML linters will display errors when the example is copied as is. This is because the standard requires that only one h* tag is used. See https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-element.	2023-09-16 17:14:31 -05:00