npm - @anyblades/pico - Versions diffs - 2.2.0-alpha.7 → 2.2.0-alpha.8 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/css/pico.blades.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@anyblades/pico",
-  "version": "2.2.0-alpha.7",
+  "version": "2.2.0-alpha.8",
   "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",