@anyblades/pico 2.2.0-alpha.7 → 2.2.0-beta

package/README.md

@@ -19,7 +19,7 @@
   </a>
 </h1>
 
-## Minimal CSS Framework for Semantic HTML
+<big>Minimal CSS Framework for Semantic HTML</big>
 
 A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.
 

package/css/pico.blades.css

@@ -3009,56 +3009,56 @@ textarea,
     transition-duration: 0s !important;
   }
 }
-/*** Follows https://github.com/picocss/pico/blob/main/scss/_index.scss ***/
+/* Follows https://github.com/picocss/pico/blob/main/scss/_index.scss */
 /* Layout */
 /* Extends https://github.com/picocss/pico/blob/main/scss/layout/
-<!--section:docs-intro-->
-
-Global styles:
-```css */
-html {
-  /* Prevent horizontal overflow and scrolling, modern way. */
-  overflow-x: clip;
-}
-body {
-  /* Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support). */
-  min-height: 100dvh;
-}
-/*```
 <!--section:docs-->
 
 ### Auto-columns
+
+`.columns` automatically creates columns with at least 30 characters each:
+
+<article class="columns">
+  <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
+</article>
+
+The smaller the font size, the more columns will be created:
+
+<article class="columns" style="font-size: 65%">
+  <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+</article>
+
+Useful for tables of contents and long lists.
+
+<details>How it works:
 ```css */
-.columns,
-[data-is-toc] > ul,
-[data-is-toc] > ol {
+.columns {
   -moz-columns: 30ch auto;
   columns: 30ch auto; /* 2 cols max for 65ch container */
 }
 /* Avoid breaking inside elements, such as nested lists */
-.columns > *, [data-is-toc] > ul > *, [data-is-toc] > ol > * {
+.columns > * {
     -moz-column-break-inside: avoid;
     break-inside: avoid;
   }
 /*```
-
-Table of contents (`[data-is-toc]`) has auto-columns by default.
+</details>
 
 ### Jump to top
+
+`data-jump-to="top"` fixes element to the corner and adds extra top padding to make it easy to click:
 ```css */
 [data-jump-to="top"] {
   position: fixed;
   bottom: 0;
   right: 0;
   padding-top: 50vh;
-  opacity: 25%;
 }
-[data-jump-to="top"]:hover {
-    opacity: 75%;
-  }
 /*```
 <!--section--> */
-/* <!--section:code-->```css */
+/*
+<!--section:code-->
+```css */
 .breakout,
 .breakout-all {
   /* Prepare the container for breakout elements */
@@ -3134,55 +3134,59 @@ Table of contents (`[data-is-toc]`) has auto-columns by default.
       transform: translateX(-50%);
     }
 /*```
-<!--section:docs,summary-->
-
-Framework-agnostic utilities for breaking out images and figures beyond their container width.
+<!--section:summary-->
 
-Use the `.breakout` class to allow elements to extend beyond their parent container.
+The `.breakout` layout allows images, tables, and other figures to automatically extend or bleed beyond their parent container’s width.
 
 <!--section:docs-->
 
+### Demo <!-- inside parent .breakout -->
+
+Break out a wide image from the text flow:
+
+<div><!-- Dummy div to avoid p tag in Markdown --></div><img
+  src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='3000' height='300'><rect width='100%' height='100%' fill='gray'/></svg>">
+
+Or table:
+
+| Imagine<hr> | a<hr> | really<hr> | wide<hr> | table<hr> | here<hr> |
+| ----------- | ----- | ---------- | -------- | --------- | -------- |
+| ...         |
+
+Or code block:
+
 ```html
-<div class="breakout">
-  <img src="image.jpg" alt="Description" />
-</div>
+<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>
 ```
 
-The breakout container has `10%` inline padding and a max-width of `calc(10% + 65ch + 10%)`. The breakout utilities support images, pictures, figures, canvas, audio, video, tables, pre, iframe, and other media elements. Tables inside `.breakout` are specifically enhanced for horizontal scrolling and full-bleed mobile display. This is automatically included when you import the stylesheet.
+Or anything else:
+
+<article class="breakout-item-max" data-theme="dark">
+
+  Using `.breakout-item` and `.breakout-item-max` helpers {style=margin:0}
+</article>
+
+<div><hr></div>
+
+`.breakout-all` also visually breaks out headings and horizontal rules:
+
+<h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>
+<hr>
 
 <!--section--> */
 /* Content */
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
-<!--section:docs-intro-->
-
-Global styles:
-```css */
-html {
-  /* Enable font smoothing */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-body {
-  /* Evaluates the last ~4 lines of text blocks to prevent a single word from sitting on the final line. */
-  text-wrap: pretty;
-  /* Enable global hyphenation */
-  hyphens: auto;
-  /* ... except for links and tables which are better (safer) without hyphenation */
-}
-body a,
-  body table {
-    hyphens: none;
-  }
-/*```
 <!--section:docs-->
 
 ### Heading anchors
 
-Set `data-is-anchor` attribute on anchors inside headings to position them absolutely, and show only on hover (when supported):
+Links with `href="#..."` inside headings are automatically displayed as anchors:
 
-<article><h2>Heading with anchor <a href="#hwa" data-is-anchor>#</a></h2></article>
+<article>
+  <h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a href="#hwa" style="visibility: visible">#</a></h2>
+</article>
 
-How it works:
+<details>How it works:
 ```css */
 h1,
 h2,
@@ -3192,7 +3196,7 @@ h5,
 h6 {
   position: relative;
 }
-h1 [data-is-anchor], h2 [data-is-anchor], h3 [data-is-anchor], h4 [data-is-anchor], h5 [data-is-anchor], h6 [data-is-anchor] {
+h1 a[href^="#"], h2 a[href^="#"], h3 a[href^="#"], h4 a[href^="#"], h5 a[href^="#"], h6 a[href^="#"] {
     position: absolute;
     right: 100%;
     top: 50%;
@@ -3202,29 +3206,34 @@ h1 [data-is-anchor], h2 [data-is-anchor], h3 [data-is-anchor], h4 [data-is-ancho
     text-decoration: none;
     visibility: hidden;
   }
-/* Avoid double-tap on touch devices */
-@media (hover: hover) {
-      h1:hover [data-is-anchor], h2:hover [data-is-anchor], h3:hover [data-is-anchor], h4:hover [data-is-anchor], h5:hover [data-is-anchor], h6:hover [data-is-anchor] {
+@media /* to avoid double-tap on touch devices */ (hover: hover) {
+      h1:hover a[href^="#"], h2:hover a[href^="#"], h3:hover a[href^="#"], h4:hover a[href^="#"], h5:hover a[href^="#"], h6:hover a[href^="#"] {
         visibility: visible;
       }
   }
 /*```
-> **PRO-TIP** for 11ty + markdown-it-anchor: https://github.com/anyblades/eleventy-blades/blob/main/src/eleventy.config.js
+</details>
+
+**PRO** example of automatic anchors for `11ty`+`markdown-it-anchor`: https://github.com/anyblades/eleventy-blades/blob/main/src/eleventy.config.js
 
 ### List markers
 
-Use inline `style="--list-marker:'🥷 '"` on `<ul>/<ol>` or even individual `<li>` to customize list markers:
+Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or even individual `<li>`:
+
 <article>
 
-- Customize
-- list
-- markers
-- with [Blades CSS](https://blades.ninja/css/) {style="--list-marker:'🥷 '"}
+- you
+- can
+- make
+- really
+- cool markers {style="--list-marker:'🧊 '"}
+- with
+- *Bl*ades {style="--list-marker:'🥷 '"}
 
-{style="--list-marker:'🧊 '"}
+{style="--list-marker:'→ '"}
 </article>
 
-How it works:
+<details>How it works:
 ```css */
 ul[style*="--list-marker:"], ol[style*="--list-marker:"] {
     list-style-type: var(--list-marker);
@@ -3236,22 +3245,41 @@ ul li[style*="--list-marker:"], ol li[style*="--list-marker:"] {
     list-style-type: var(--list-marker);
   }
 ul li[data-marker]::marker, ol li[data-marker]::marker {
-    /* ⚠️ `data-marker` works only in Chrome and Firefox */
-    content: attr(data-marker) " ";
+    content: attr(data-marker) " "; /* ⚠️ Chrome and Firefox only */
   }
 /*```
+</details>
 
 ### Unlist
 
-Helper class to remove list styling at all:
+`.unlist` removes list styling:
+
+<article>
+
+- One: <article>1</article>
+- Two: <article>2</article>
+- Three: <article>3</article>
+
+{.unlist .grid style=margin:0}
+</article>
+
+`.unlist-all` also removes styling from all nested lists.
+
+<details>How it works:
 ```css */
-.unlist {
-  padding-inline-start: 0;
-}
-.unlist > li {
-    list-style: none;
+ul.unlist,
+  ul.unlist-all,
+  .unlist-all ul,
+  ol.unlist,
+  ol.unlist-all,
+  .unlist-all ol {
+    padding-inline-start: 0;
   }
+ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unlist-all > li, .unlist-all ol > li {
+      list-style: none;
+    }
 /*```
+</details>
 <!--section--> */
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
 <!--section:code-->
@@ -3270,7 +3298,8 @@ a > i {
 /* Favicons */
 a > i > img {
       height: 1.25em;
-      margin-block: calc(-0.25em / 2);
+      margin-block-start: calc(-0.25em / 2);
+      max-width: none; /* to keep ratio safe */
       display: inline-block; /* for Tailwind CSS Typography */
     }
 a > i[class^="fa-"],
@@ -3283,76 +3312,79 @@ a > i.fa-lg {
       line-height: normal;
     }
 /*```
-> **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
-
-<!--section:docs,summary-->
+<!--section:summary-->
 
-Use Blades' `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links. It automatically handles sizing and alignment while preventing underline on icons.
+Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
+It automatically handles sizing and alignment while preventing underline on icons.
 
 <!--section:docs-->
 
-Compare:
+<article class="breakout-item">
 
-| Without Blades <hr class="lg">                                                                          | With Blades' `<i>`-helper <hr class="lg">                                                                      | Clean HTML without `<span>ning` <hr class="x2"> |
-| ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
-| [🥷 Link with emoji](#)                                                                                 | [<i>🥷</i> Link with emoji](#)                                                                                 | `<a><i>🥷</i> Text</a>`                         |
-| [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Multi-line link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Multi-line link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>`            |
-| [<b class="fa-brands fa-github fa-lg"></b> Link with Font Awesome icon](#)                              | [<i class="fa-brands fa-github fa-lg"></i> Link with Font Awesome icon](#)                                     | `<a><i class="fa-..."></i> Text</a>`            |
+| Use `<i>`-helper with                                                                 | Clean HTML without `<span>ning`      |
+| ------------------------------------------------------------------------------------- | ------------------------------------ |
+| [<i>🥷</i> Emojis](#)                                                                 | `<a><i>🥷</i> Text</a>`              |
+| [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Favicons](#) | `<a><i><img src="..."></i> Text</a>` |
+| [<i class="fa-brands fa-github fa-lg"></i> Font Awesome icons](#)                     | `<a><i class="fa-..."></i> Text</a>` |
+</article>
 
----
+Or even for:
+
+<article>
+  <a href="#" style="margin: 0 0 0 1rem"><i>🥷</i> very-very-very-very-very-<br>long-multiline-links</a>
+</article>
+
+How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237
 
-[How we made it ↗ &nbsp;<small>(on Codepen)</small>](https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237){role=button .outline}
+**PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
 
 <!--section--> */
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
 <!--section:docs-->
 
-### Horizontal expanders
+### Column expanders
 
-Simply insert `<hr>` inside `<th>` to forcibly widen too narrow columns (especially useful in markdown):
-```html
-<th>Col <hr></th>
-```
-Example table before:
-<article class="overflow-auto"><table>
-  <tr><th>Wide tables</th><th>with many</th><th>columns might</th><th>get collapsed</th><th>and be really</th><th>hard to read!</th></tr>
-</table></article>
-
-Same table after adding `<hr>`-expanders:
-<article class="overflow-auto"><table>
-  <tr><th>Wide tables <hr></th><th>with many <hr></th><th>columns might <hr></th><th>get collapsed <hr></th><th>and be really <hr></th><th>hard to read! <hr></th></tr>
-</table></article>
-
-Living examples of big tables with `<hr>`-expanders:
-- https://any.digital/insights/ai-ide/
-- https://any.digital/insights/css-frameworks/
-- https://any.digital/insights/ssg/
-- https://blades.ninja/build-awesome-11ty/#min-starters
-
-How it works:
+Place `<hr>` element inside `<th>` column to expand it horizontally:
+
+<article>
+
+| Column with `<hr>`<hr> | Same column without `<hr>` | ... {style=width:100%} |
+| --- | --- | --- |
+| (012) 345-6789 | (012) 345-6789 |
+</article>
+
+Living examples of big tables with `<hr>`-expanders: <!--A-Z-->
+- https://blades.ninja/ai/ide/
+- https://blades.ninja/build-awesome-11ty/starters/
+- https://blades.ninja/css/frameworks/
+- https://blades.ninja/ssg/
+
+<details>How it works:
 ```css */
-table th hr {
-      width: 12ch; /* min ~65/12 = ~5 cols */
-      height: 0;
-      margin: 0;
-      visibility: hidden;
+th hr {
+    width: 12ch; /* min ~65/12 = ~5 cols */
+    height: 0;
+    margin: 0;
+    visibility: hidden;
+  }
+th hr.lg {
+      width: 18ch;
+    }
+th hr.x2 {
+      width: 24ch;
     }
-table th hr.lg {
-        width: 18ch;
-      }
-table th hr.x2 {
-        width: 24ch;
-      }
 /*```
+</details>
+
 ### Borderless table
 
-`<table class="borderless">` removes all default borders:
+`.borderless` removes all default borders:
 
 <article>
 
 | Less | borders |
 | ---- | ------- |
-| more | fun     |
+| More | fun     |
 
 {.borderless}
 </article>
@@ -3364,7 +3396,8 @@ table.borderless th,
   table.borderless td {
     border: none;
   }
-/* <!--section:code-->
+/*
+<!--section:code-->
 ```css */
 table.responsive,
 .breakout > table:not(.does-not-exist),
@@ -3394,17 +3427,17 @@ table.responsive th,
     padding-inline-start: 0;
   }
 /*```
-<!--#TODO:css-blade-->
-Soft-increase selector specificity trick:
-
-`table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
+`table:not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
 
-<!--section:docs,summary-->
+<!--section:summary-->
 
-`<table class="responsive">` allows a table to full-bleed and scroll on mobile.
+`.responsive` makes a table full-bleed and scroll on mobile, without a need for a redundant wrapper (finally).
+Tables inside https://blades.ninja/css/breakout/ are responsive by default.
 
 <!--section:docs-->
 
+### Demo table
+
 | Term              | Description <hr class="x2">                                                                                                                                                                  | Link                                                |
 | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
 | Responsive design | Approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. | https://en.wikipedia.org/wiki/Responsive_web_design |
@@ -3413,25 +3446,34 @@ Soft-increase selector specificity trick:
 
 ---
 
-Tables inside https://blades.ninja/css/breakout/ are responsive by default.
-
-Living examples:
-
-- https://any.digital/insights/ai-ide/
-- https://any.digital/insights/css-frameworks/
-- https://any.digital/insights/ssg/
-- https://blades.ninja/build-awesome-11ty/#min-starters
+Living examples: <!--A-Z-->
+- https://blades.ninja/ai/ide/
+- https://blades.ninja/build-awesome-11ty/starters/
+- https://blades.ninja/css/frameworks/
+- https://blades.ninja/ssg/
 
 <!--section--> */
-/* <!--section:docs-->
+/* Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
+<!--section:docs-->
+
 ### Code
-Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
+
+The `<pre><code>` blocks are Prism-compatible and support captions via `data-caption="..."` attribute:
+
+```treeview {data-caption="Blades CSS:"}
+./assets/
+├── blades.core.css     # reusable class-light utilities, unthemed
+├── blades.theme.css    # minimal opinionated theme
+└── blades.css          # above two together
+```
+<details>How it works:
 ```css */
 pre {
   padding: 1rem 1.5rem;
   padding-inline-end: 2rem;
 }
-@media screen and (max-width: 767px) {
+@media (max-width: 767px) {
+
 pre {
     border-radius: 0
 }
@@ -3447,7 +3489,7 @@ code[data-caption]::before {
 code:where(pre > *) {
     padding: 0;
   }
-/*** Extends https://github.com/PrismJS/prism/blob/master/plugins/treeview/prism-treeview.css ***/
+/* Extends https://github.com/PrismJS/prism/blob/master/plugins/treeview/prism-treeview.css */
 .token.treeview-part .entry-line {
     width: 2.5em !important;
     opacity: 25%;
@@ -3458,7 +3500,9 @@ code:where(pre > *) {
 .token.treeview-part .entry-name:last-child::before {
       display: none !important;
     }
-/*``` <!--section--> */
+/*```
+</details>
+<!--section--> */
 /* Forms */
 /* Moved here from https://github.com/anyblades/float-label-css for easier maintenance
 <!--section:docs-->
@@ -3490,6 +3534,9 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
 ```
 Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
 ```css */
+label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::-moz-placeholder, .has-float-label *:-moz-placeholder:not(:focus)::-moz-placeholder {
+    opacity: 0;
+  }
 label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
     opacity: 0;
   }
@@ -3517,19 +3564,49 @@ The `:has(*:placeholder-shown:not(:focus))` trick allows this input state inform
 Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
 <!--section--> */
 /* Utilities */
-/*
+/* Extends https://github.com/picocss/pico/tree/main/scss/utilities
 <!--section:docs-->
 
 ### Auto-dark
+
+`.dark-auto` automatically creates a simple dark version of any element:
+
+<article data-theme="dark">
+  <p>Look how cool <big class="dark-auto">🔥🕷️🐦‍⬛🐄🦓</big> can look in the dark!</p>
+</article>
+
+<details>How it works:
 ```css */
+/* Per https://picocss.com/docs/css-variables#css-variables-for-color-schemes */
+:root {
+  --blades-dark-filter: invert(100%) hue-rotate(180deg);
+}
+.dark-auto {
+  /* Dark color scheme (Forced) */
+}
+/* Dark color scheme (Auto) */
 @media (prefers-color-scheme: dark) {
-    :root:not([data-theme="light"]) .dark-auto {
-      filter: invert(100%) hue-rotate(180deg);
-    }
+
+.dark-auto {
+    filter: var(--blades-dark-filter)
 }
+  }
+.dark-auto[data-theme="dark"],
+  .dark-auto:where([data-theme="dark"] *) {
+    filter: var(--blades-dark-filter);
+  }
 /*```
+</details>
 
 ### Faded
+
+`.faded` reduces the opacity of an element:
+
+<article class="faded">
+  Hover to unfade me!
+</article>
+
+<details>How it works:
 ```css */
 .faded {
   opacity: 50%;
@@ -3538,16 +3615,14 @@ Historically, this was not possible: the float label had to be placed after the
     opacity: 87.5%;
   }
 /*```
-
-### Invert
-```css */
-/* Extends https://tailwindcss.com/docs/filter-invert */
-/* Fix the scrollbar color when inverted */
+</details>
+<!--section--> */
+/* Fix the scrollbar color when inverted by https://tailwindcss.com/docs/filter-invert */
 .invert ::-webkit-scrollbar {
     filter: invert(1) !important;
   }
-/*``` <!--section--> */
-/* <!--section:code-->
+/*
+<!--section:code-->
 ```css */
 /* Default/fallback state */
 label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
@@ -3588,14 +3663,38 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
     .has-float-label:has(*:placeholder-shown:not(:focus)) label {
       padding-block: 0.75rem; /* match Pico */
     }
+html {
+  /* Prevent horizontal overflow and scrolling, modern way. */
+  overflow-x: clip;
+
+  /* Enable font smoothing */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 body {
+  /* Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support). */
+  min-height: 100dvh;
+
   /* Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts. */
   display: flex;
   flex-direction: column;
+
+  /* Evaluates the last ~4 lines of text blocks to prevent a single word from sitting on the final line. */
+
+  /* Enable global hyphenation */
+  /* ... except for links and tables which are better (safer) without hyphenation */
 }
 body > main {
     flex-grow: 1;
   }
+body {
+  text-wrap: pretty;
+  hyphens: auto;
+}
+body a,
+  body table {
+    hyphens: none;
+  }
 a:not([href^="#"]) {
     text-decoration-thickness: 1px;
   }
@@ -3606,22 +3705,6 @@ h1 {
   font-size: 2.5em; /* for pico.css & tw-typography */
   margin-bottom: 1rem; /* for tw-typography */
 }
-/* Potential fix https://github.com/picocss/pico/blob/main/css/pico.css for the very first headings
-:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
-  margin-top: var(--pico-typography-spacing-top);
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  & ~ & {
-    margin-bottom: 2rem;
-  }
-}
-NOTE: be careful with wrapped headings, i.e. inside nav: https://blades.ninja/build-awesome-11ty/#usage
-*/
 hr {
   margin-block: 2em; /* for pico.css & tw-typography */
 }
@@ -3642,6 +3725,12 @@ table td {
 table pre {
     margin-bottom: 0.25rem;
   }
+[data-jump-to="top"] {
+  opacity: 25%;
+}
+[data-jump-to="top"]:hover {
+    opacity: 75%;
+  }
 [data-jump-to="top"] > i {
     display: inline-block;
     padding: 0.25rem 0.375rem;
@@ -3650,15 +3739,6 @@ table pre {
     color: black;
     border-color: black;
   }
-[data-is-toc] {
-  font-size: 87.5%;
-}
-[data-is-toc] a {
-    text-decoration: none;
-  }
-[data-is-toc] > ul > * > a {
-    font-weight: 500;
-  }
 .breakout > img,
   .breakout > figure,
   .breakout-all > img,

package/css/pico.blades.min.css

@@ -106,8 +106,8 @@ button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus
 button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus
 ) select{border-color:transparent}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus),[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus){--pico-group-box-shadow:var(--pico-group-box-shadow-focus-with-input)}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=button],[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=submit],[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) button,[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=button],[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=submit],[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) button{--pico-button-box-shadow:0 0 0 var(--pico-border-width) var(--pico-primary-border);--pico-button-hover-box-shadow:0 0 0 var(--pico-border-width) var(--pico-primary-hover-border)}[role=group] [role=button]:focus,[role=group] [type=button]:focus,[role=group] [type=reset]:focus,[role=group] [type=submit]:focus,[role=group] button:focus,[role=search] [role=button]:focus,[role=search] [type=button]:focus,[role=search] [type=reset]:focus,[role=search] [type=submit]:focus,[role=search] button:focus{box-shadow:none}}[role=search]>:first-child{border-top-left-radius:5rem;border-bottom-left-radius:5rem}[role=search]>:last-child{border-top-right-radius:5rem;border-bottom-right-radius:5rem}[aria-busy=true]:not(input,select,textarea,html,form){white-space:nowrap}[aria-busy=true]:not(input,select,textarea,html,form)::before{display:inline-block;width:1em;height:1em;background-image:var(--pico-icon-loading);background-size:1em auto;background-repeat:no-repeat;content:"";vertical-align:-.125em}[aria-busy=true]:not(input,select,textarea,html,form):not(:empty)::before{margin-inline-end:calc(var(--pico-spacing) * .5)}[aria-busy=true]:not(input,select,textarea,html,form):empty{text-align:center}[role=button][aria-busy=true],[type=button][aria-busy=true],[type=reset][aria-busy=true],[type=submit][aria-busy=true],a[aria-busy=true],button[aria-busy=true]{pointer-events:none}:host,:root{--pico-scrollbar-width:0px}dialog{display:flex;z-index:999;position:fixed;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;width:inherit;min-width:100%;height:inherit;min-height:100%;padding:0;border:0;backdrop-filter:var(--pico-modal-overlay-backdrop-filter);background-color:var(--pico-modal-overlay-background-color);color:var(--pico-color)}dialog>article{width:100%;max-height:calc(100vh - var(--pico-spacing) * 2);margin:var(--pico-spacing);overflow:auto}@media (min-width:576px){dialog>article{max-width:510px}}@media (min-width:768px){dialog>article{max-width:700px}}dialog>article>header>*{margin-bottom:0}dialog>article>header .close,dialog>article>header :is(a,button)[rel=prev]{margin:0;margin-left:var(--pico-spacing);padding:0;float:right}dialog>article>footer{text-align:end}dialog>article>footer [role=button],dialog>article>footer button{margin-bottom:0}dialog>article>footer [role=button]:not(:first-of-type),dialog>article>footer button:not(:first-of-type){margin-left:calc(var(--pico-spacing) * .5)}dialog>article .close,dialog>article :is(a,button)[rel=prev]{display:block;width:1rem;height:1rem;margin-top:calc(var(--pico-spacing) * -1);margin-bottom:var(--pico-spacing);margin-left:auto;border:none;background-image:var(--pico-icon-close);background-position:center;background-size:auto 1rem;background-repeat:no-repeat;background-color:transparent;opacity:.5;transition:opacity var(--pico-transition)}dialog>article .close:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),dialog>article :is(a,button)[rel=prev]:is(
 [aria-current]:not([aria-current=false]),:hover,:active,:focus
-){opacity:1}dialog:not([open]),dialog[open=false]{display:none}.modal-is-open{padding-right:var(--pico-scrollbar-width,0);overflow:hidden;pointer-events:none;touch-action:none}.modal-is-open dialog{pointer-events:auto;touch-action:auto}:where(.modal-is-opening,.modal-is-closing) dialog,:where(.modal-is-opening,.modal-is-closing) dialog>article{animation-duration:.2s;animation-timing-function:ease-in-out;animation-fill-mode:both}:where(.modal-is-opening,.modal-is-closing) dialog{animation-duration:.8s;animation-name:modal-overlay}:where(.modal-is-opening,.modal-is-closing) dialog>article{animation-delay:.2s;animation-name:modal}.modal-is-closing dialog,.modal-is-closing dialog>article{animation-delay:0s;animation-direction:reverse}@keyframes modal-overlay{from{backdrop-filter:none;background-color:transparent}}@keyframes modal{from{transform:translateY(-100%);opacity:0}}:where(nav li)::before{float:left;content:"​"}nav,nav ul{display:flex}nav{justify-content:space-between;overflow:visible}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--pico-nav-element-spacing-horizontal) * -1)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--pico-nav-element-spacing-horizontal) * -1)}nav li{display:inline-block;margin:0;padding:var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal)}nav li :where(a,[role=link]){display:inline-block;margin:calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1);padding:var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);border-radius:var(--pico-border-radius)}nav li :where(a,[role=link]):not(:hover){text-decoration:none}nav li [role=button],nav li [type=button],nav li button,nav li input:not([type=checkbox],[type=radio],[type=range],[type=file]),nav li select{height:auto;margin-right:inherit;margin-bottom:0;margin-left:inherit;padding:calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal)}nav[aria-label=breadcrumb]{align-items:center;justify-content:start}nav[aria-label=breadcrumb] ul li:not(:first-child){margin-inline-start:var(--pico-nav-link-spacing-horizontal)}nav[aria-label=breadcrumb] ul li a{margin:calc(var(--pico-nav-link-spacing-vertical) * -1) 0;margin-inline-start:calc(var(--pico-nav-link-spacing-horizontal) * -1)}nav[aria-label=breadcrumb] ul li:not(:last-child)::after{display:inline-block;position:absolute;width:calc(var(--pico-nav-link-spacing-horizontal) * 4);margin:0 calc(var(--pico-nav-link-spacing-horizontal) * -1);content:var(--pico-nav-breadcrumb-divider);color:var(--pico-muted-color);text-align:center;text-decoration:none;white-space:nowrap}nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]){background-color:transparent;color:inherit;text-decoration:none;pointer-events:none}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--pico-nav-element-spacing-vertical) * .5) var(--pico-nav-element-spacing-horizontal)}aside li a{display:block}aside li [role=button]{margin:inherit}[dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after{content:"\\"}progress{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;display:inline-block;appearance:none;width:100%;height:.5rem;margin-bottom:calc(var(--pico-spacing) * .5);overflow:hidden;border:0;border-radius:var(--pico-border-radius);background-color:var(--pico-progress-background-color);color:var(--pico-progress-color)}progress::-webkit-progress-bar{border-radius:var(--pico-border-radius);background:0 0}progress[value]::-webkit-progress-value{background-color:var(--pico-progress-color);-webkit-transition:inline-size var(--pico-transition);transition:inline-size var(--pico-transition)}progress::-moz-progress-bar{background-color:var(--pico-progress-color)}@media (prefers-reduced-motion:no-preference){progress:indeterminate{background:var(--pico-progress-background-color) linear-gradient(to right,var(--pico-progress-color) 30%,var(--pico-progress-background-color) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}}@media (prefers-reduced-motion:no-preference){[dir=rtl] progress:indeterminate{animation-direction:reverse}}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}[data-tooltip]{position:relative}[data-tooltip]:not(a,button,input,[role=button]){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]::after,[data-tooltip]::before,[data-tooltip][data-placement=top]::after,[data-tooltip][data-placement=top]::before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%,-.25rem);border-radius:var(--pico-border-radius);background:var(--pico-tooltip-background-color);content:attr(data-tooltip);color:var(--pico-tooltip-color);font-style:normal;font-weight:var(--pico-font-weight);font-size:.875rem;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;opacity:0;pointer-events:none}[data-tooltip]::after,[data-tooltip][data-placement=top]::after{padding:0;transform:translate(-50%,0);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;content:"";color:var(--pico-tooltip-background-color)}[data-tooltip][data-placement=bottom]::after,[data-tooltip][data-placement=bottom]::before{top:100%;bottom:auto;transform:translate(-50%,.25rem)}[data-tooltip][data-placement=bottom]:after{transform:translate(-50%,-.3rem);border:.3rem solid transparent;border-bottom:.3rem solid}[data-tooltip][data-placement=left]::after,[data-tooltip][data-placement=left]::before{top:50%;right:100%;bottom:auto;left:auto;transform:translate(-.25rem,-50%)}[data-tooltip][data-placement=left]:after{transform:translate(.3rem,-50%);border:.3rem solid transparent;border-left:.3rem solid}[data-tooltip][data-placement=right]::after,[data-tooltip][data-placement=right]::before{top:50%;right:auto;bottom:auto;left:100%;transform:translate(.25rem,-50%)}[data-tooltip][data-placement=right]:after{transform:translate(-.3rem,-50%);border:.3rem solid transparent;border-right:.3rem solid}[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{opacity:1}@media (hover:hover) and (pointer:fine){[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{--pico-tooltip-slide-to:translate(-50%, -0.25rem);transform:translate(-50%,.75rem);animation-duration:.2s;animation-fill-mode:forwards;animation-name:tooltip-slide;opacity:0}[data-tooltip]:focus::after,[data-tooltip]:hover::after{--pico-tooltip-caret-slide-to:translate(-50%, 0rem);transform:translate(-50%,-.25rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:focus::before,[data-tooltip][data-placement=bottom]:hover::after,[data-tooltip][data-placement=bottom]:hover::before{--pico-tooltip-slide-to:translate(-50%, 0.25rem);transform:translate(-50%,-.75rem);animation-name:tooltip-slide}[data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:hover::after{--pico-tooltip-caret-slide-to:translate(-50%, -0.3rem);transform:translate(-50%,-.5rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=left]:focus::after,[data-tooltip][data-placement=left]:focus::before,[data-tooltip][data-placement=left]:hover::after,[data-tooltip][data-placement=left]:hover::before{--pico-tooltip-slide-to:translate(-0.25rem, -50%);transform:translate(.75rem,-50%);animation-name:tooltip-slide}[data-tooltip][data-placement=left]:focus::after,[data-tooltip][data-placement=left]:hover::after{--pico-tooltip-caret-slide-to:translate(0.3rem, -50%);transform:translate(.05rem,-50%);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=right]:focus::after,[data-tooltip][data-placement=right]:focus::before,[data-tooltip][data-placement=right]:hover::after,[data-tooltip][data-placement=right]:hover::before{--pico-tooltip-slide-to:translate(0.25rem, -50%);transform:translate(-.75rem,-50%);animation-name:tooltip-slide}[data-tooltip][data-placement=right]:focus::after,[data-tooltip][data-placement=right]:hover::after{--pico-tooltip-caret-slide-to:translate(-0.3rem, -50%);transform:translate(-.05rem,-50%);animation-name:tooltip-caret-slide}}@keyframes tooltip-slide{to{transform:var(--pico-tooltip-slide-to);opacity:1}}@keyframes tooltip-caret-slide{50%{opacity:0}to{transform:var(--pico-tooltip-caret-slide-to);opacity:1}}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}[dir=rtl]{direction:rtl}@media (prefers-reduced-motion:reduce){:not([aria-busy=true])::after,:not([aria-busy=true])::before,:not([aria-busy=true]):not(.unreduce-motion){background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}html{overflow-x:clip}body{min-height:100dvh}.columns,[data-is-toc]>ol,[data-is-toc]>ul{-moz-columns:30ch auto;columns:30ch auto}.columns>*,[data-is-toc]>ol>*,[data-is-toc]>ul>*{-moz-column-break-inside:avoid;break-inside:avoid}[data-jump-to=top]{position:fixed;bottom:0;right:0;padding-top:50vh;opacity:25%}[data-jump-to=top]:hover{opacity:75%}.breakout,.breakout-all{padding-inline:10%;max-width:calc(10% + 65ch + 10%)}.breakout-all>:is(
+){opacity:1}dialog:not([open]),dialog[open=false]{display:none}.modal-is-open{padding-right:var(--pico-scrollbar-width,0);overflow:hidden;pointer-events:none;touch-action:none}.modal-is-open dialog{pointer-events:auto;touch-action:auto}:where(.modal-is-opening,.modal-is-closing) dialog,:where(.modal-is-opening,.modal-is-closing) dialog>article{animation-duration:.2s;animation-timing-function:ease-in-out;animation-fill-mode:both}:where(.modal-is-opening,.modal-is-closing) dialog{animation-duration:.8s;animation-name:modal-overlay}:where(.modal-is-opening,.modal-is-closing) dialog>article{animation-delay:.2s;animation-name:modal}.modal-is-closing dialog,.modal-is-closing dialog>article{animation-delay:0s;animation-direction:reverse}@keyframes modal-overlay{from{backdrop-filter:none;background-color:transparent}}@keyframes modal{from{transform:translateY(-100%);opacity:0}}:where(nav li)::before{float:left;content:"​"}nav,nav ul{display:flex}nav{justify-content:space-between;overflow:visible}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--pico-nav-element-spacing-horizontal) * -1)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--pico-nav-element-spacing-horizontal) * -1)}nav li{display:inline-block;margin:0;padding:var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal)}nav li :where(a,[role=link]){display:inline-block;margin:calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1);padding:var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);border-radius:var(--pico-border-radius)}nav li :where(a,[role=link]):not(:hover){text-decoration:none}nav li [role=button],nav li [type=button],nav li button,nav li input:not([type=checkbox],[type=radio],[type=range],[type=file]),nav li select{height:auto;margin-right:inherit;margin-bottom:0;margin-left:inherit;padding:calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal)}nav[aria-label=breadcrumb]{align-items:center;justify-content:start}nav[aria-label=breadcrumb] ul li:not(:first-child){margin-inline-start:var(--pico-nav-link-spacing-horizontal)}nav[aria-label=breadcrumb] ul li a{margin:calc(var(--pico-nav-link-spacing-vertical) * -1) 0;margin-inline-start:calc(var(--pico-nav-link-spacing-horizontal) * -1)}nav[aria-label=breadcrumb] ul li:not(:last-child)::after{display:inline-block;position:absolute;width:calc(var(--pico-nav-link-spacing-horizontal) * 4);margin:0 calc(var(--pico-nav-link-spacing-horizontal) * -1);content:var(--pico-nav-breadcrumb-divider);color:var(--pico-muted-color);text-align:center;text-decoration:none;white-space:nowrap}nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]){background-color:transparent;color:inherit;text-decoration:none;pointer-events:none}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--pico-nav-element-spacing-vertical) * .5) var(--pico-nav-element-spacing-horizontal)}aside li a{display:block}aside li [role=button]{margin:inherit}[dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after{content:"\\"}progress{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;display:inline-block;appearance:none;width:100%;height:.5rem;margin-bottom:calc(var(--pico-spacing) * .5);overflow:hidden;border:0;border-radius:var(--pico-border-radius);background-color:var(--pico-progress-background-color);color:var(--pico-progress-color)}progress::-webkit-progress-bar{border-radius:var(--pico-border-radius);background:0 0}progress[value]::-webkit-progress-value{background-color:var(--pico-progress-color);-webkit-transition:inline-size var(--pico-transition);transition:inline-size var(--pico-transition)}progress::-moz-progress-bar{background-color:var(--pico-progress-color)}@media (prefers-reduced-motion:no-preference){progress:indeterminate{background:var(--pico-progress-background-color) linear-gradient(to right,var(--pico-progress-color) 30%,var(--pico-progress-background-color) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}}@media (prefers-reduced-motion:no-preference){[dir=rtl] progress:indeterminate{animation-direction:reverse}}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}[data-tooltip]{position:relative}[data-tooltip]:not(a,button,input,[role=button]){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]::after,[data-tooltip]::before,[data-tooltip][data-placement=top]::after,[data-tooltip][data-placement=top]::before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%,-.25rem);border-radius:var(--pico-border-radius);background:var(--pico-tooltip-background-color);content:attr(data-tooltip);color:var(--pico-tooltip-color);font-style:normal;font-weight:var(--pico-font-weight);font-size:.875rem;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;opacity:0;pointer-events:none}[data-tooltip]::after,[data-tooltip][data-placement=top]::after{padding:0;transform:translate(-50%,0);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;content:"";color:var(--pico-tooltip-background-color)}[data-tooltip][data-placement=bottom]::after,[data-tooltip][data-placement=bottom]::before{top:100%;bottom:auto;transform:translate(-50%,.25rem)}[data-tooltip][data-placement=bottom]:after{transform:translate(-50%,-.3rem);border:.3rem solid transparent;border-bottom:.3rem solid}[data-tooltip][data-placement=left]::after,[data-tooltip][data-placement=left]::before{top:50%;right:100%;bottom:auto;left:auto;transform:translate(-.25rem,-50%)}[data-tooltip][data-placement=left]:after{transform:translate(.3rem,-50%);border:.3rem solid transparent;border-left:.3rem solid}[data-tooltip][data-placement=right]::after,[data-tooltip][data-placement=right]::before{top:50%;right:auto;bottom:auto;left:100%;transform:translate(.25rem,-50%)}[data-tooltip][data-placement=right]:after{transform:translate(-.3rem,-50%);border:.3rem solid transparent;border-right:.3rem solid}[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{opacity:1}@media (hover:hover) and (pointer:fine){[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{--pico-tooltip-slide-to:translate(-50%, -0.25rem);transform:translate(-50%,.75rem);animation-duration:.2s;animation-fill-mode:forwards;animation-name:tooltip-slide;opacity:0}[data-tooltip]:focus::after,[data-tooltip]:hover::after{--pico-tooltip-caret-slide-to:translate(-50%, 0rem);transform:translate(-50%,-.25rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:focus::before,[data-tooltip][data-placement=bottom]:hover::after,[data-tooltip][data-placement=bottom]:hover::before{--pico-tooltip-slide-to:translate(-50%, 0.25rem);transform:translate(-50%,-.75rem);animation-name:tooltip-slide}[data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:hover::after{--pico-tooltip-caret-slide-to:translate(-50%, -0.3rem);transform:translate(-50%,-.5rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=left]:focus::after,[data-tooltip][data-placement=left]:focus::before,[data-tooltip][data-placement=left]:hover::after,[data-tooltip][data-placement=left]:hover::before{--pico-tooltip-slide-to:translate(-0.25rem, -50%);transform:translate(.75rem,-50%);animation-name:tooltip-slide}[data-tooltip][data-placement=left]:focus::after,[data-tooltip][data-placement=left]:hover::after{--pico-tooltip-caret-slide-to:translate(0.3rem, -50%);transform:translate(.05rem,-50%);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=right]:focus::after,[data-tooltip][data-placement=right]:focus::before,[data-tooltip][data-placement=right]:hover::after,[data-tooltip][data-placement=right]:hover::before{--pico-tooltip-slide-to:translate(0.25rem, -50%);transform:translate(-.75rem,-50%);animation-name:tooltip-slide}[data-tooltip][data-placement=right]:focus::after,[data-tooltip][data-placement=right]:hover::after{--pico-tooltip-caret-slide-to:translate(-0.3rem, -50%);transform:translate(-.05rem,-50%);animation-name:tooltip-caret-slide}}@keyframes tooltip-slide{to{transform:var(--pico-tooltip-slide-to);opacity:1}}@keyframes tooltip-caret-slide{50%{opacity:0}to{transform:var(--pico-tooltip-caret-slide-to);opacity:1}}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}[dir=rtl]{direction:rtl}@media (prefers-reduced-motion:reduce){:not([aria-busy=true])::after,:not([aria-busy=true])::before,:not([aria-busy=true]):not(.unreduce-motion){background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}.columns{-moz-columns:30ch auto;columns:30ch auto}.columns>*{-moz-column-break-inside:avoid;break-inside:avoid}[data-jump-to=top]{position:fixed;bottom:0;right:0;padding-top:50vh}.breakout,.breakout-all{padding-inline:10%;max-width:calc(10% + 65ch + 10%)}.breakout-all>:is(
 table,pre,figure,video,iframe,canvas,img,picture,.breakout-item,.breakout-item-max
 ),.breakout>:is(
 table,pre,figure,video,iframe,canvas,img,picture,.breakout-item,.breakout-item-max
-){width:-moz-fit-content;width:fit-content;min-width:100%;max-width:125%;margin-left:50%;transform:translateX(-50%)}.breakout-all>:is(img,picture),.breakout>:is(img,picture){min-width:auto}.breakout-all>.breakout-item-max,.breakout>.breakout-item-max{width:125%!important}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class]){position:relative}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class])::before{content:"";display:block;position:absolute;background:gray;opacity:12.5%}.breakout-all>:is(h2,h3,h4,h5,h6):not([class])::before{width:10em;right:100%;margin-right:.8ch;height:.25em;top:50%;transform:translateY(-50%);background:linear-gradient(to left,gray,transparent)}.breakout-all>:is(h2,h3,h4,h5,h6):not([class]):where(hr + *)::before{display:none!important}.breakout-all>:is(hr){height:.5rem;border:none;overflow:visible}.breakout-all>:is(hr)::before{width:100vw;left:50%;height:100%;transform:translateX(-50%)}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{text-wrap:pretty;hyphens:auto}body a,body table{hyphens:none}h1,h2,h3,h4,h5,h6{position:relative}h1 [data-is-anchor],h2 [data-is-anchor],h3 [data-is-anchor],h4 [data-is-anchor],h5 [data-is-anchor],h6 [data-is-anchor]{position:absolute;right:100%;top:50%;transform:translateY(-50%);padding-right:.2ch;color:silver;text-decoration:none;visibility:hidden}@media (hover:hover){h1:hover [data-is-anchor],h2:hover [data-is-anchor],h3:hover [data-is-anchor],h4:hover [data-is-anchor],h5:hover [data-is-anchor],h6:hover [data-is-anchor]{visibility:visible}}ol[style*="--list-marker:"],ul[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol[style*="--list-marker:"]>li,ul[style*="--list-marker:"]>li{list-style-type:inherit}ol li[style*="--list-marker:"],ul li[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol li[data-marker]::marker,ul li[data-marker]::marker{content:attr(data-marker) " "}.unlist{padding-inline-start:0}.unlist>li{list-style:none}a:has(> i){display:inline-flex;gap:.375ch;overflow-y:clip}a>i{font-style:normal;float:left;text-underline-offset:-2em}a>i>img{height:1.25em;margin-block:calc(-0.25em / 2);display:inline-block}a>i[class*=" fa-"],a>i[class^=fa-]{line-height:inherit;--fa-width:auto}a>i.fa-lg{line-height:normal}table th hr{width:12ch;height:0;margin:0;visibility:hidden}table th hr.lg{width:18ch}table th hr.x2{width:24ch}table.borderless td,table.borderless th{border:none}.breakout-all>table:not(.does-not-exist),.breakout>table:not(.does-not-exist),table.responsive{margin-left:50%;transform:translateX(-50%);width:-moz-max-content;width:max-content;min-width:auto;max-width:100vw;padding-inline:7.5%;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.breakout-all>table:not(.does-not-exist) td,.breakout-all>table:not(.does-not-exist) th,.breakout>table:not(.does-not-exist) td,.breakout>table:not(.does-not-exist) th,table.responsive td,table.responsive th{padding-inline-start:0}pre{padding:1rem 1.5rem;padding-inline-end:2rem}@media screen and (max-width:767px){pre{border-radius:0}}code[data-caption]::before{content:attr(data-caption);display:block;margin-bottom:1rem;opacity:50%;font-style:italic}code:where(pre > *){padding:0}.token.treeview-part .entry-line{width:2.5em!important;opacity:25%}.token.treeview-part .entry-name:last-child{opacity:50%}.token.treeview-part .entry-name:last-child::before{display:none!important}.has-float-label,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select){display:block;position:relative}.has-float-label label,.has-float-label>span,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) label,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select)>span{position:absolute;left:0;top:0;cursor:text;font-size:75%}.has-float-label :placeholder-shown:not(:focus)::-moz-placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) :placeholder-shown:not(:focus)::-moz-placeholder{opacity:0}.has-float-label :-moz-placeholder:not(:focus)::placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) :-moz-placeholder:not(:focus)::placeholder{opacity:0}.has-float-label :placeholder-shown:not(:focus)::placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) :placeholder-shown:not(:focus)::placeholder{opacity:0}.has-float-label:has(:-moz-placeholder:not(:focus)) label,.has-float-label:has(:-moz-placeholder:not(:focus))>span,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:-moz-placeholder:not(:focus)) label,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:-moz-placeholder:not(:focus))>span{font-size:inherit;opacity:50%}.has-float-label:has(:placeholder-shown:not(:focus)) label,.has-float-label:has(:placeholder-shown:not(:focus))>span,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus)) label,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus))>span{font-size:inherit;opacity:50%}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .dark-auto{filter:invert(100%) hue-rotate(180deg)}}.faded{opacity:50%}.faded:hover{opacity:87.5%}.invert ::-webkit-scrollbar{filter:invert(1)!important}.has-float-label label,.has-float-label>span,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) label,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select)>span{padding-inline-start:calc(1rem + 1px);padding-block-start:0.25rem;opacity:75%;transition:all .25s}.has-float-label input,.has-float-label select,.has-float-label textarea,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) input,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) select,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) textarea{margin-block-start:0;padding-inline-start:1rem;padding-block:1.125rem 0.375rem}.has-float-label input::-moz-placeholder,.has-float-label select::-moz-placeholder,.has-float-label textarea::-moz-placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) input::-moz-placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) select::-moz-placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) textarea::-moz-placeholder{opacity:100%;-moz-transition:all .25s;transition:all .25s}.has-float-label input::placeholder,.has-float-label select::placeholder,.has-float-label textarea::placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) input::placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) select::placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) textarea::placeholder{opacity:100%;transition:all .25s}.has-float-label:has(:-moz-placeholder:not(:focus)) label,.has-float-label:has(:-moz-placeholder:not(:focus))>span,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:-moz-placeholder:not(:focus)) label,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:-moz-placeholder:not(:focus))>span{padding-block:0.75rem}.has-float-label:has(:placeholder-shown:not(:focus)) label,.has-float-label:has(:placeholder-shown:not(:focus))>span,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus)) label,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus))>span{padding-block:0.75rem}body{display:flex;flex-direction:column}body>main{flex-grow:1}a:not([href^="#"]){text-decoration-thickness:1px}a:not([href^="#"]):hover{text-decoration-thickness:2px}h1{font-size:2.5em;margin-bottom:1rem}hr{margin-block:2em}ul ul{font-size:87.5%}pre small{opacity:75%;font-weight:lighter}table th{vertical-align:bottom;font-weight:700}table td{vertical-align:top}table pre{margin-bottom:.25rem}[data-jump-to=top]>i{display:inline-block;padding:.25rem .375rem;margin:.5rem;font-size:.75rem;color:#000;border-color:#000}[data-is-toc]{font-size:87.5%}[data-is-toc] a{text-decoration:none}[data-is-toc]>ul>*>a{font-weight:500}.breakout-all>figure,.breakout-all>img,.breakout>figure,.breakout>img{margin-bottom:1rem}.faded a{text-decoration-style:dotted}
+){width:-moz-fit-content;width:fit-content;min-width:100%;max-width:125%;margin-left:50%;transform:translateX(-50%)}.breakout-all>:is(img,picture),.breakout>:is(img,picture){min-width:auto}.breakout-all>.breakout-item-max,.breakout>.breakout-item-max{width:125%!important}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class]){position:relative}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class])::before{content:"";display:block;position:absolute;background:gray;opacity:12.5%}.breakout-all>:is(h2,h3,h4,h5,h6):not([class])::before{width:10em;right:100%;margin-right:.8ch;height:.25em;top:50%;transform:translateY(-50%);background:linear-gradient(to left,gray,transparent)}.breakout-all>:is(h2,h3,h4,h5,h6):not([class]):where(hr + *)::before{display:none!important}.breakout-all>:is(hr){height:.5rem;border:none;overflow:visible}.breakout-all>:is(hr)::before{width:100vw;left:50%;height:100%;transform:translateX(-50%)}h1,h2,h3,h4,h5,h6{position:relative}h1 a[href^="#"],h2 a[href^="#"],h3 a[href^="#"],h4 a[href^="#"],h5 a[href^="#"],h6 a[href^="#"]{position:absolute;right:100%;top:50%;transform:translateY(-50%);padding-right:.2ch;color:silver;text-decoration:none;visibility:hidden}@media (hover:hover){h1:hover a[href^="#"],h2:hover a[href^="#"],h3:hover a[href^="#"],h4:hover a[href^="#"],h5:hover a[href^="#"],h6:hover a[href^="#"]{visibility:visible}}ol[style*="--list-marker:"],ul[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol[style*="--list-marker:"]>li,ul[style*="--list-marker:"]>li{list-style-type:inherit}ol li[style*="--list-marker:"],ul li[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol li[data-marker]::marker,ul li[data-marker]::marker{content:attr(data-marker) " "}.unlist-all ol,.unlist-all ul,ol.unlist,ol.unlist-all,ul.unlist,ul.unlist-all{padding-inline-start:0}.unlist-all ol>li,.unlist-all ul>li,ol.unlist-all>li,ol.unlist>li,ul.unlist-all>li,ul.unlist>li{list-style:none}a:has(> i){display:inline-flex;gap:.375ch;overflow-y:clip}a>i{font-style:normal;float:left;text-underline-offset:-2em}a>i>img{height:1.25em;margin-block-start:calc(-0.25em / 2);max-width:none;display:inline-block}a>i[class*=" fa-"],a>i[class^=fa-]{line-height:inherit;--fa-width:auto}a>i.fa-lg{line-height:normal}th hr{width:12ch;height:0;margin:0;visibility:hidden}th hr.lg{width:18ch}th hr.x2{width:24ch}table.borderless td,table.borderless th{border:none}.breakout-all>table:not(.does-not-exist),.breakout>table:not(.does-not-exist),table.responsive{margin-left:50%;transform:translateX(-50%);width:-moz-max-content;width:max-content;min-width:auto;max-width:100vw;padding-inline:7.5%;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.breakout-all>table:not(.does-not-exist) td,.breakout-all>table:not(.does-not-exist) th,.breakout>table:not(.does-not-exist) td,.breakout>table:not(.does-not-exist) th,table.responsive td,table.responsive th{padding-inline-start:0}pre{padding:1rem 1.5rem;padding-inline-end:2rem}@media (max-width:767px){pre{border-radius:0}}code[data-caption]::before{content:attr(data-caption);display:block;margin-bottom:1rem;opacity:50%;font-style:italic}code:where(pre > *){padding:0}.token.treeview-part .entry-line{width:2.5em!important;opacity:25%}.token.treeview-part .entry-name:last-child{opacity:50%}.token.treeview-part .entry-name:last-child::before{display:none!important}.has-float-label,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select){display:block;position:relative}.has-float-label label,.has-float-label>span,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) label,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select)>span{position:absolute;left:0;top:0;cursor:text;font-size:75%}.has-float-label :-moz-placeholder:not(:focus)::-moz-placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) :-moz-placeholder:not(:focus)::-moz-placeholder{opacity:0}.has-float-label :placeholder-shown:not(:focus)::-moz-placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) :placeholder-shown:not(:focus)::-moz-placeholder{opacity:0}.has-float-label :-moz-placeholder:not(:focus)::placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) :-moz-placeholder:not(:focus)::placeholder{opacity:0}.has-float-label :placeholder-shown:not(:focus)::placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) :placeholder-shown:not(:focus)::placeholder{opacity:0}.has-float-label:has(:-moz-placeholder:not(:focus)) label,.has-float-label:has(:-moz-placeholder:not(:focus))>span,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:-moz-placeholder:not(:focus)) label,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:-moz-placeholder:not(:focus))>span{font-size:inherit;opacity:50%}.has-float-label:has(:placeholder-shown:not(:focus)) label,.has-float-label:has(:placeholder-shown:not(:focus))>span,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus)) label,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus))>span{font-size:inherit;opacity:50%}:root{--blades-dark-filter:invert(100%) hue-rotate(180deg)}@media (prefers-color-scheme:dark){.dark-auto{filter:var(--blades-dark-filter)}}.dark-auto:where([data-theme=dark] *),.dark-auto[data-theme=dark]{filter:var(--blades-dark-filter)}.faded{opacity:50%}.faded:hover{opacity:87.5%}.invert ::-webkit-scrollbar{filter:invert(1)!important}.has-float-label label,.has-float-label>span,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) label,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select)>span{padding-inline-start:calc(1rem + 1px);padding-block-start:0.25rem;opacity:75%;transition:all .25s}.has-float-label input,.has-float-label select,.has-float-label textarea,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) input,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) select,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) textarea{margin-block-start:0;padding-inline-start:1rem;padding-block:1.125rem 0.375rem}.has-float-label input::-moz-placeholder,.has-float-label select::-moz-placeholder,.has-float-label textarea::-moz-placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) input::-moz-placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) select::-moz-placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) textarea::-moz-placeholder{opacity:100%;-moz-transition:all .25s;transition:all .25s}.has-float-label input::placeholder,.has-float-label select::placeholder,.has-float-label textarea::placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) input::placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) select::placeholder,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) textarea::placeholder{opacity:100%;transition:all .25s}.has-float-label:has(:-moz-placeholder:not(:focus)) label,.has-float-label:has(:-moz-placeholder:not(:focus))>span,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:-moz-placeholder:not(:focus)) label,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:-moz-placeholder:not(:focus))>span{padding-block:0.75rem}.has-float-label:has(:placeholder-shown:not(:focus)) label,.has-float-label:has(:placeholder-shown:not(:focus))>span,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus)) label,label:has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus))>span{padding-block:0.75rem}html{overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100dvh;display:flex;flex-direction:column}body>main{flex-grow:1}body{text-wrap:pretty;hyphens:auto}body a,body table{hyphens:none}a:not([href^="#"]){text-decoration-thickness:1px}a:not([href^="#"]):hover{text-decoration-thickness:2px}h1{font-size:2.5em;margin-bottom:1rem}hr{margin-block:2em}ul ul{font-size:87.5%}pre small{opacity:75%;font-weight:lighter}table th{vertical-align:bottom;font-weight:700}table td{vertical-align:top}table pre{margin-bottom:.25rem}[data-jump-to=top]{opacity:25%}[data-jump-to=top]:hover{opacity:75%}[data-jump-to=top]>i{display:inline-block;padding:.25rem .375rem;margin:.5rem;font-size:.75rem;color:#000;border-color:#000}.breakout-all>figure,.breakout-all>img,.breakout>figure,.breakout>img{margin-bottom:1rem}.faded a{text-decoration-style:dotted}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anyblades/pico",
-  "version": "2.2.0-alpha.7",
+  "version": "2.2.0-beta",
   "description": "Minimal CSS Framework for semantic HTML",
   "author": "Lucas Larroche",
   "contributors": [
@@ -50,7 +50,7 @@
     "done": "echo '\\033[32m[@anyblades/pico] ✨ Done\\033[0m'"
   },
   "devDependencies": {
-    "@anyblades/blades": "^0.28.0-alpha.2",
+    "@anyblades/blades": "^0.28.0-alpha.8",
     "autoprefixer": "^10.4.21",
     "caniuse-lite": "1.0.30001704",
     "clean-css-cli": "^5.6.3",